@geode/opengeodeweb-front 0.0.0

package/components/Step.vue

@@ -0,0 +1,74 @@
+<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-col v-if="step_index == current_step_index">
+        <component :is="steps[step_index].component.component_name"
+          v-bind="steps[step_index].component.component_options" />
+        <v-btn v-if="skippable()" @click="skipStep()" color="primary">Skip step</v-btn>
+      </v-col>
+    </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 skippable () {
+  if (stepper_tree.steps[step_index].component.skippable !== undefined) {
+    return(stepper_tree.steps[step_index].component.skippable)
+  } else {
+    return(false)
+  }
+}
+
+function skipStep() {
+  stepper_tree.current_step_index++ 
+}
+
+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">
+      <Step :step_index="index" />
+    </div>
+  </v-card>
+</template>
+
+<script setup>
+const stepper_tree = inject('stepper_tree')
+const { steps } = stepper_tree
+
+</script>

package/components/ViewToolbar.vue

@@ -0,0 +1,30 @@
+<template>
+    <v-row dense :class="[$style.floatToolbar, 'flex-column']">
+        <v-col>
+            <v-tooltip location="left">
+                Reset camera
+                <template #activator="{ props }">
+                    <v-btn @click.stop=reset_camera icon="mdi-crop-free" density="comfortable" v-bind="props" />
+                </template>
+            </v-tooltip>
+        </v-col>
+    </v-row>
+</template>
+
+<script setup>
+const viewer_store = use_viewer_store()
+function reset_camera() {
+    viewer_store.reset_camera()
+}
+</script>
+
+<style module>
+.floatToolbar {
+    position: absolute;
+    z-index: 2;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 16px;
+}
+</style>

package/components/Wrapper.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-container>
+    <v-row class="flex-column">
+      <v-col>
+        <Header :tool_name="tool_name" :cards_list="cards_list" />
+      </v-col>
+      <v-col v-if="!is_cloud_running">
+        <Launcher :site_key="site_key" />
+      </v-col>
+      <v-col v-if="is_cloud_running">
+        <Stepper />
+      </v-col>
+      <v-col v-if="is_cloud_running">
+        <PackagesVersions :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 },
+  site_key: { type: String, required: true }
+})
+const { cards_list, site_key } = props
+
+const stepper_tree = inject('stepper_tree')
+const { tool_name, route_prefix } = stepper_tree
+
+</script>

package/composables/api_fetch.js

@@ -0,0 +1,32 @@
+export async function api_fetch (request_url, request_options, { request_error_function, response_function, response_error_function } = {}) {
+  const errors_store = use_errors_store()
+  const cloud_store = use_cloud_store()
+
+  return useFetch(request_url,
+    {
+      baseURL: cloud_store.geode_url,
+      ...request_options,
+      onRequestError ({ error }) {
+        // MUST STAY HERE FOR EASIER DEBUG
+        // console.log('onRequestError', error)
+        errors_store.add_error({ "code": '', "route": request_url, 'name': error.message, 'description': error.stack })
+        if (request_error_function) { request_error_function(error) }
+      },
+      onResponse ({ response }) {
+        if (response.ok) {
+          // MUST STAY HERE FOR EASIER DEBUG
+          // console.log('onResponse', response)
+          if (response_function) { response_function(response) }
+        }
+      },
+      onResponseError ({ response }) {
+        // MUST STAY HERE FOR EASIER DEBUG
+        // console.log('onResponseError', response)
+        errors_store.add_error({ "code": response.status, "route": request_url, 'name': response._data.name, 'description': response._data.description })
+        if (response_error_function) { response_error_function(response) }
+      }
+    }
+  )
+}
+
+export default api_fetch

package/nuxt.config.js

@@ -0,0 +1,5 @@
+export default defineNuxtConfig({
+  imports: {
+    dirs: ['stores']
+  },
+})

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@geode/opengeodeweb-front",
+  "private": false,
+  "scripts": {
+    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
+  },
+  "devDependencies": {
+    "eslint": "^8.47.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-nuxt": "^4.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier-vue": "^4.2.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vuetify": "^2.0.5",
+    "nuxt": "^3.6.5"
+  },
+  "overrides": {
+    "vue": "latest"
+  },
+  "description": "OpenSource Vue/Vuetify framework for web applications",
+  "type": "module",
+  "version": "0.0.0",
+  "main": "./nuxt.config.js",
+  "dependencies": {
+    "@kitware/vtk.js": "^28.8.0",
+    "@mdi/font": "^7.2.96",
+    "@pinia/nuxt": "^0.4.11",
+    "@types/node": "^20.5.3",
+    "@vueuse/components": "^10.3.0",
+    "@vueuse/core": "^10.3.0",
+    "lodash": "^4.17.21",
+    "pinia": "^2.1.6",
+    "sass": "^1.66.1",
+    "semver": "^7.5.4",
+    "vue-recaptcha": "^2.0.3",
+    "vuetify": "^3.3.14",
+    "wslink": "^1.11.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Geode-solutions/OpenGeodeWeb-Front.git"
+  },
+  "keywords": [
+    "vue",
+    "vuetify"
+  ],
+  "author": "@geode",
+  "license": "MIT",
+  "bugs": {
+    "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,20 @@
+/* eslint-disable arrow-body-style */
+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]),
+    toggle_edge_visibility: (params) => session.call('toggle_edge_visibility', [params]),
+    toggle_point_visibility: (params) => session.call('toggle_point_visibility', [params]),
+    set_color: (params) => session.call('set_color', [params]),
+    set_vertex_attribute: (params) => session.call('set_vertex_attribute', [params]),
+    point_size: (params) => session.call('point_size', [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])
+  };
+}
+
+export default createMethods

package/stores/cloud.js

@@ -0,0 +1,89 @@
+import { defineStore } from 'pinia'
+
+export const use_cloud_store = defineStore('cloud', {
+  state: () => ({
+    ID: '',
+    is_captcha_validated: false,
+    is_cloud_running: false,
+    is_connexion_launched: false,
+    request_counter: 0
+  }),
+  getters: {
+    geode_url: (state) => {
+      const public_runtime_config = useRuntimeConfig().public
+      var geode_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
+      if (process.env.NODE_ENV == 'production') {
+        geode_url = geode_url + `/${state.ID}/geode`
+      }
+      console.log("geode_url",geode_url)
+      return geode_url
+    },
+    viewer_url: (state) => {
+      const public_runtime_config = useRuntimeConfig().public
+      var viewer_url = `${public_runtime_config.VIEWER_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.VIEWER_PORT}`
+      if (process.env.NODE_ENV == 'production') {
+        viewer_url = viewer_url + `/${state.ID}/viewer`
+      }
+      viewer_url = viewer_url + '/ws'
+      return viewer_url
+    },
+  },
+  actions: {
+    async create_connexion () {
+      if (this.is_connexion_launched) { return }
+      this.is_connexion_launched = true
+      const ID = localStorage.getItem('ID')
+      if (ID === null || typeof ID === 'undefined') {
+        return this.create_backend()
+      } else {
+        const { data, error } = await useFetch(`${this.geode_url}/ping`, { method: 'POST' })
+        console.log("error", error)
+        if (data.value !== null) {
+          this.ID = ID
+          this.is_cloud_running = true
+          return this.ping_task()
+        } else {
+          return this.create_backend()
+        }
+      }
+    },
+    async create_backend () {
+      const errors_store = use_errors_store()
+      const config = useRuntimeConfig()
+      const public_runtime_config = config.public
+      const { data, error } = await useFetch(`${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}${public_runtime_config.SITE_BRANCH}/tools/createbackend`, { method: 'POST' })
+      if (data.value !== null) {
+        this.ID = data.value.ID
+        localStorage.setItem('ID', data.value.ID)
+        this.is_cloud_running = true
+        return this.ping_task()
+      } else {
+        console.log("error : ", error)
+        errors_store.server_error = true
+      }
+    },
+
+    ping_task () {
+      setInterval(() => this.do_ping(), 10 * 1000)
+    },
+    async do_ping () {
+      const errors_store = use_errors_store()
+      const { data, error } = await useFetch(`${this.geode_url}/ping`, { method: 'POST' })
+      if (data.value !== null) {
+        this.is_cloud_running = true
+      } else {
+        errors_store.server_error = true
+        console.log("error : ", error)
+      }
+    },
+
+    mutations: {
+      start_request (state) {
+        state.request_counter++
+      },
+      stop_request (state) {
+        state.request_counter--
+      }
+    }
+  }
+})

package/stores/errors.js

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+
+export const use_errors_store = defineStore('errors', {
+  state: () => ({
+    errors: [],
+    server_error: false,
+  }),
+  actions: {
+    add_error (error_object) {
+      this.errors.push(error_object)
+      console.log(this.errors)
+    },
+    delete_error (error_index) {
+      this.errors.splice(error_index, 1)
+    },
+    delete_server_error () {
+      this.server_error = false
+    }
+  }
+})

package/stores/viewer.js

@@ -0,0 +1,139 @@
+import { defineStore } from 'pinia'
+
+export const use_viewer_store = defineStore('viewer', {
+  state: () => ({
+    picking_mode: false,
+    picked_point: { x: null, y: null }
+  }),
+  actions: {
+    toggle_picking_mode(value) {
+      this.picking_mode = value
+    },
+    async set_picked_point(x, y) {
+      const response = await get_point_position({ x, y })
+      const { x: world_x, y: world_y } = response
+      this.picked_point.x = world_x
+      this.picked_point.y = world_y
+      this.picking_mode = false
+    },
+    async create_object_pipeline(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.create_object_pipeline(params)
+          .catch(console.error);
+      }
+    },
+    async reset_camera() {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.reset_camera()
+          .catch(console.error);
+      }
+    },
+    async toggle_object_visibility(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.toggle_object_visibility(params)
+          .catch(console.error);
+      }
+    },
+    async toggle_edge_visibility(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.toggle_edge_visibility(params)
+          .catch(console.error);
+      }
+    },
+    async toggle_point_visibility(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.toggle_point_visibility(params)
+          .catch(console.error);
+      }
+    },
+    async point_size(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.point_size(params)
+          .catch(console.error);
+      }
+    },
+    async set_color(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.set_color(params)
+          .catch(console.error);
+      }
+    },
+    async set_vertex_attribute(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        use_websocket_store().client
+          .getRemote()
+          .vtk.set_vertex_attribute(params)
+          .catch(console.error);
+      }
+    },
+    async apply_textures(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        use_websocket_store().client
+          .getRemote()
+          .vtk.apply_textures(params)
+          .catch(console.error);
+        websocket_store.$patch({ busy: false })
+      }
+    },
+    async get_point_position(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        const response = await use_websocket_store().client
+          .getRemote()
+          .vtk.get_point_position(params)
+          .catch(console.error);
+        websocket_store.$patch({ busy: false })
+        return response
+      }
+    },
+    async update_data(params) {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        const response = await use_websocket_store().client
+          .getRemote()
+          .vtk.update_data(params)
+          .catch(console.error);
+        websocket_store.$patch({ busy: false })
+        return response
+      }
+    },
+    async reset() {
+      const websocket_store = use_websocket_store()
+      if (websocket_store.client) {
+        websocket_store.$patch({ busy: true })
+        const response = await use_websocket_store().client
+          .getRemote()
+          .vtk.reset()
+          .catch(console.error);
+        websocket_store.$patch({ busy: false })
+        return response
+      }
+    }
+  }
+})

package/stores/websocket.js

@@ -0,0 +1,94 @@
+import { defineStore } from 'pinia'
+import _ from 'lodash'
+
+import vtkWSLinkClient from '@kitware/vtk.js/IO/Core/WSLinkClient'
+import SmartConnect from 'wslink/src/SmartConnect'
+
+import '@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry'
+import { connectImageStream } from '@kitware/vtk.js/Rendering/Misc/RemoteView'
+import protocols from '@/protocols'
+
+// Bind vtkWSLinkClient to our SmartConnect
+vtkWSLinkClient.setSmartConnectClass(SmartConnect);
+
+
+export const use_websocket_store = defineStore('websocket', {
+  state: () => ({
+    client: {},
+    config: null,
+    busy: false,
+    is_client_created: false
+  }),
+  actions: {
+    ws_connect () {
+      const config = { application: 'cone' };
+      const cloud_store = use_cloud_store()
+      config.sessionURL = cloud_store.viewer_url
+
+      const { client } = this
+      if (this.is_client_created && client.isConnected()) {
+        client.disconnect(-1);
+        this.is_client_created = false;
+      }
+      let clientToConnect = client;
+      if (_.isEmpty(clientToConnect)) {
+        clientToConnect = vtkWSLinkClient.newInstance({ protocols });
+      }
+
+      // Connect to busy store
+      clientToConnect.onBusyChange((count) => {
+        this.buzy = count
+      });
+      clientToConnect.beginBusy();
+
+      // Error
+      clientToConnect.onConnectionError((httpReq) => {
+        const message =
+          (httpReq && httpReq.response && httpReq.response.error) ||
+          `Connection error`;
+        console.error(message);
+        console.log(httpReq);
+      });
+
+      // Close
+      clientToConnect.onConnectionClose((httpReq) => {
+        const message =
+          (httpReq && httpReq.response && httpReq.response.error) ||
+          `Connection close`;
+        console.error(message);
+        console.log(httpReq);
+      });
+
+      // Connect
+      clientToConnect
+        .connect(config)
+        .then((validClient) => {
+          connectImageStream(validClient.getConnection().getSession());
+          this.client = validClient
+          clientToConnect.endBusy();
+
+          // Now that the client is ready let's setup the server for us
+          this.ws_initialize_server()
+          this.client.getRemote().vtk.reset().catch(console.error);
+          this.is_client_created = true;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    ws_initialize_server () {
+
+      if (!_.isEmpty(this.client)) {
+        this.client
+          .getRemote()
+          .vtk.create_visualization()
+          .catch(console.error);
+      }
+    },
+    reset_camera () {
+      if (!_.isEmpty(this.client)) {
+        this.client.getRemote().vtk.reset_camera().catch(console.error);
+      }
+    },
+  },
+})