@geode/opengeodeweb-front 0.0.2 → 0.0.3

package/.github/workflows/CD.yml

@@ -1,5 +1,7 @@
 name: Publish Package to npmjs
-on: push
+on:
+  push:
+    branches: [ next, master ]
 
 jobs:
   build:
@@ -12,6 +14,10 @@ jobs:
           node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
+      - run: |
+          git config --global user.email "contact@geode-solutions.com"
+          git config --global user.name "Geode-solutions"
+      - run: npm version patch
       - run: npm publish --access public 
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/components/CrsSelector.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
+  <v-data-table v-model="selected_crs" :v-model:items-per-page="10" :headers="headers" :items="crs_list" item-value="code"
+    class="elevation-1" density='compact' fixed-header select-strategy='single' show-select :search="search"
+    :loading="data_table_loading" loading-text="Loading... Please wait"></v-data-table>
+</template>
+
+<script setup>
+import { useToggle } from '@vueuse/core'
+
+const stepper_tree = inject('stepper_tree')
+const { geode_object, route_prefix } = stepper_tree
+
+const props = defineProps({
+  variable_to_update: { type: String, required: true },
+  variable_to_increment: { type: String, required: true },
+})
+
+const { variable_to_update, variable_to_increment } = props
+
+const search = ref('')
+const data_table_loading = ref(false)
+const crs_list = ref([])
+const selected_crs = ref([])
+const toggle_loading = useToggle(data_table_loading)
+
+watch(selected_crs, (new_value) => {
+  const crs = get_selected_crs(new_value[0])
+  set_crs(crs)
+})
+
+function set_crs (crs_value) {
+  stepper_tree[variable_to_update] = crs_value
+  stepper_tree[variable_to_increment]++
+}
+
+function get_selected_crs (crs_code) {
+  for (let i = 0; i <= crs_list.value.length; i++) {
+    if (crs_list.value[i]['code'] == crs_code) {
+      return crs_list.value[i]
+    }
+  }
+}
+
+async function get_crs_table () {
+  let params = new FormData()
+  params.append('geode_object', geode_object)
+  toggle_loading()
+  await api_fetch(`${route_prefix}/geographic_coordinate_systems`, { method: 'POST', body: params },
+    {
+      'request_error_function': () => { toggle_loading() },
+      'response_function': (response) => {
+        toggle_loading()
+        crs_list.value = response._data.crs_list
+      },
+      'response_error_function': () => { toggle_loading() }
+    }
+  )
+}
+
+const headers = [
+  {
+    title: 'Authority',
+    align: 'start',
+    sortable: true,
+    key: 'authority',
+
+  },
+  { title: 'Code', align: 'end', key: 'code' },
+  { title: 'Name', align: 'end', key: 'name' }
+]
+
+
+onMounted(() => {
+  get_crs_table()
+})
+
+</script>

package/components/ExtensionSelector.vue

@@ -11,25 +11,21 @@
 </template>
 
 <script setup>
-import geode_objects from '@assets/geode_objects';
+const stepper_tree = inject('stepper_tree')
+const { geode_object, route_prefix } = stepper_tree
 
 const props = defineProps({
-  geode_object: { type: String, required: true, validator (value) { return geode_objects.keys().includes(value) } },
-  route_prefix: { type: String, required: true },
   variable_to_update: { type: String, required: true },
   variable_to_increment: { type: String, required: true },
 })
-
-const { geode_object, route_prefix, variable_to_update, variable_to_increment } = props
+const { variable_to_update, variable_to_increment } = props
 
 const file_extensions = ref([])
 
 
 async function get_output_file_extensions () {
-
   const params = new FormData()
   params.append('geode_object', geode_object)
-
   await api_fetch(`${route_prefix}/output_file_extensions`, { method: 'POST', body: params },
     {
       'response_function': (response) => {
@@ -40,7 +36,6 @@ async function get_output_file_extensions () {
 }
 
 function set_output_extension (extension) {
-  const stepper_tree = inject('stepper_tree')
   stepper_tree[variable_to_update] = extension
   stepper_tree[variable_to_increment]++
 }

package/components/FileSelector.vue

@@ -6,16 +6,15 @@
 
 <script setup>
 const stepper_tree = inject('stepper_tree')
+const { route_prefix } = stepper_tree
 
 const props = defineProps({
   multiple: { type: Boolean, required: true },
   label: { type: String, required: true },
-  route_prefix: { type: String, required: true },
   variable_to_update: { type: String, required: true },
   variable_to_increment: { type: String, required: true },
-
 })
-const { multiple, label, route_prefix, variable_to_update, variable_to_increment } = props.component_options
+const { multiple, label, variable_to_update, variable_to_increment } = props
 
 const accept = ref('')
 const files = ref([])

package/components/ObjectSelector.vue

@@ -9,8 +9,8 @@
       </v-card>
     </v-col>
   </v-row>
-  <v-row v-else>
-    <v-card class="card ma-2" variant="tonal" elevation="5" rounded>
+  <v-row v-else class="pa-5">
+    <v-card class="card" variant="tonal" elevation="5" rounded>
       <v-card-text>
         This file format isn't supported! Please check the <a href="https://docs.geode-solutions.com/formats/"
           target="_blank">
@@ -21,17 +21,17 @@
 </template>
 
 <script setup>
-import geode_objects from '@assets/geode_objects';
+import geode_objects from '@/assets/geode_objects'
+
+const stepper_tree = inject('stepper_tree')
+const { files, route_prefix } = stepper_tree
 
 const props = defineProps({
-  geode_object: { type: String, required: true, validator (value) { return geode_objects.keys().includes(value) } },
-  route_prefix: { type: String, required: true },
-  files: { type: Array, required: true },
   variable_to_update: { type: String, required: true },
   variable_to_increment: { type: String, required: true },
 })
 
-const { geode_objects, route_prefix, files } = props
+const { variable_to_update, variable_to_increment } = props
 
 const allowed_objects = ref([])
 
@@ -48,7 +48,6 @@ async function get_allowed_objects () {
 }
 
 function set_geode_object (geode_object) {
-  const stepper_tree = inject('stepper_tree')
   stepper_tree[variable_to_update] = geode_object
   stepper_tree[variable_to_increment]++
 }

package/components/RemoteRenderingView.vue

@@ -0,0 +1,87 @@
+<template>
+  <v-col v-element-size="resize" style="overflow: hidden; position: relative; z-index: 1; height: 100%; width: 100%"
+    ref="viewer" class="viewer" @click="get_x_y" @keydown.esc="app_store.toggle_picking_mode(false)">
+  </v-col>
+</template>
+
+<script setup>
+import vtkRemoteView from '@kitware/vtk.js/Rendering/Misc/RemoteView';
+import { vElementSize } from '@vueuse/components'
+
+const app_store = use_app_store()
+const { picking_mode } = storeToRefs(app_store)
+
+function get_x_y (event) {
+  if (picking_mode.value === true) {
+    const { offsetX, offsetY } = event
+    app_store.set_picked_point(offsetX, offsetY)
+  }
+}
+
+const props = defineProps({
+  viewId: { type: String, default: '-1' },
+  client: { type: Object, required: true }
+})
+
+const viewer = ref(null)
+const { width, height } = useElementSize(viewer)
+
+function resize () {
+  view.getCanvasView().setSize(0, 0) // hack to fit full size
+  view.resize();
+}
+
+watch(picking_mode, value => {
+  const cursor = value == true ? 'crosshair' : 'pointer'
+  view.getCanvasView().setCursor(cursor)
+})
+watch(width, value => {
+  resize()
+})
+watch(height, value => {
+  resize()
+})
+const { client, viewId } = toRefs(props)
+const connected = ref(false)
+
+const view = vtkRemoteView.newInstance({ rpcWheelEvent: 'viewport.mouse.zoom.wheel' })
+// default of 0.5 causes 2x size labels on high-DPI screens. 1 good for demo, not for production.
+if (location.hostname.split('.')[0] === 'localhost') {
+  view.setInteractiveRatio(1)
+}
+
+
+watch(client, (new_client) => {
+  connect()
+})
+
+watch(viewId, (id) => {
+  if (connected.value) {
+    view.setViewId(id)
+    view.render()
+  }
+})
+
+onMounted(async () => {
+  if (process.client) {
+    window.addEventListener('resize', resize)
+    await nextTick()
+    view.setContainer(viewer.value.$el)
+    connect()
+    resize()
+  }
+})
+
+function connect () {
+  const session = client.value.getConnection().getSession()
+  view.setSession(session)
+  view.setViewId(viewId.value)
+  connected.value = true
+  view.render()
+}
+function handleClick (event) {
+  onClick(event)
+}
+
+
+</script>

package/components/Step.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-card class="pa-5 card" elevation="5">
+    <v-row align="center" @click="set_current_step(step_index)">
+      <v-col cols="auto">
+        <v-icon v-if="current_step_index > step_index" icon="mdi-check-circle" color="grey" />
+        <v-icon v-else-if="current_step_index == step_index" :icon="`mdi-numeric-${step_index + 1}-circle`"
+          color="primary" />
+        <v-icon v-else :icon="`mdi-numeric-${step_index + 1}-circle`" color="grey" />
+      </v-col>
+      <v-col cols="auto">
+        <p class="font-weight-bold">
+          {{ steps[step_index].step_title }}
+        </p>
+      </v-col>
+      <v-col v-if="steps[step_index].chips.length && (current_step_index >= step_index)">
+        <v-chip v-for="(chip, chip_index) in steps[step_index].chips" :key="chip_index">
+          {{ chip }}
+        </v-chip>
+      </v-col>
+    </v-row>
+    <Transition name="slide-fade">
+      <v-row v-if="step_index == current_step_index">
+        <component :is="steps[step_index].component.component_name"
+          v-bind="steps[step_index].component.component_options" />
+      </v-row>
+    </Transition>
+  </v-card>
+</template>
+
+<script setup>
+const props = defineProps({
+  step_index: { type: Number, required: true }
+})
+const { step_index } = props
+const stepper_tree = inject('stepper_tree')
+const { current_step_index, steps } = toRefs(stepper_tree)
+
+function set_current_step (step_index) {
+  stepper_tree.current_step_index = step_index
+}
+</script>
+
+<style>
+.card {
+  border-radius: 15px;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.5s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.5s ease-in;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(50px);
+  opacity: 0;
+}
+</style>

package/components/Stepper.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-card class="card">
+    <div v-for="(step, index) in steps" :key="index" class="pa-3">
+      <ToolsStep :step_index="index" />
+    </div>
+  </v-card>
+</template>
+
+<script setup>
+const stepper_tree = inject('stepper_tree')
+const { steps } = stepper_tree
+
+</script>

package/components/Wrapper.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-container>
+    <v-row class="flex-column">
+      <v-col>
+        <ToolsHeader :tool_name="tool_name" :cards_list="cards_list" />
+      </v-col>
+      <v-col v-if="!is_cloud_running">
+        <ToolsLauncher />
+      </v-col>
+      <v-col v-if="is_cloud_running">
+        <ToolsStepper />
+      </v-col>
+      <v-col v-if="is_cloud_running">
+        <ToolsPackagesVersions :route_prefix="route_prefix" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+const cloud_store = use_cloud_store()
+const { is_cloud_running } = storeToRefs(cloud_store)
+
+const props = defineProps({
+  cards_list: { type: Array, required: true }
+})
+const { cards_list } = props
+
+const stepper_tree = inject('stepper_tree')
+const { tool_name, route_prefix } = stepper_tree
+
+</script>

package/package.json

@@ -2,31 +2,29 @@
   "name": "@geode/opengeodeweb-front",
   "private": false,
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "release:major": "npm version $(semver $npm_package_version -i major) && npm publish --tag latest",
+    "release:minor": "npm version $(semver $npm_package_version -i minor) && npm publish --tag latest",
+    "release:patch": "npm version $(semver $npm_package_version -i patch) && npm publish --tag latest",
+    "release:beta": "npm version $(semver $npm_package_version -i prerelease --preid $(npm whoami) ) && npm publish --tag rc"
   },
   "devDependencies": {
-    "@types/node": "^20.4.6",
-    "nuxt": "^3.6.5",
-    "vuetify": "^3.3.11"
+    "semver": "^7.5.4",
+    "@types/node": "^20.4.9",
+    "vuetify": "^3.3.12"
   },
   "overrides": {
     "vue": "latest"
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "index.js",
   "dependencies": {
     "@mdi/font": "^7.2.96",
     "@pinia/nuxt": "^0.4.11",
     "@vueuse/core": "^10.3.0",
-    "nuxt": "^3.6.5",
     "pinia": "^2.1.6",
-    "sass": "^1.64.2",
-    "vuetify": "^3.3.11"
+    "sass": "^1.65.1",
+    "vuetify": "^3.3.12"
   },
   "repository": {
     "type": "git",
@@ -42,4 +40,4 @@
     "url": "https://github.com/Geode-solutions/OpenGeodeWeb-Front/issues"
   },
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front#readme"
-}
+}

package/protocols/index.js

@@ -0,0 +1,5 @@
+import vtk from './vtk';
+
+export default {
+  vtk,
+};

package/protocols/vtk.js

@@ -0,0 +1,13 @@
+/* eslint-disable arrow-body-style */
+export default function createMethods (session) {
+  return {
+    create_object_pipeline: (params) => session.call('create_object_pipeline', [params]),
+    create_visualization: () => session.call('create_visualization', []),
+    reset: () => session.call('reset'),
+    reset_camera: () => session.call('reset_camera', []),
+    toggle_object_visibility: (params) => session.call('toggle_object_visibility', [params]),
+    apply_textures: (params) => session.call('apply_textures', [params]),
+    get_point_position: (params) => session.call('get_point_position', [params]),
+    update_data: (params) => session.call('update_data', [params])
+  };
+}

package/README copy.md

@@ -1,63 +0,0 @@
-# Nuxt 3 Minimal Starter
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/nuxt.config.ts

@@ -1,2 +0,0 @@
-export default defineNuxtConfig({
-})