@geode/opengeodeweb-front 9.11.0-rc.7 → 9.11.0-rc.9

package/.github/workflows/test.yml

@@ -7,6 +7,29 @@ on:
       - next
 
 jobs:
+  test-integration:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Node setup
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Python setup
+        uses: actions/setup-python@v5
+        with:
+          python-version: 3.12
+      - name: Install python dependencies
+        run: |
+          cd ./tests/integration/microservices/viewer
+          python3 -m venv venv
+          source venv/bin/activate
+          pip install --extra-index-url https://wheels.vtk.org -r requirements.txt
+      - name: Install and run tests
+        run: |
+          npm i
+
+          npm run test:integration
   test:
     uses: Geode-solutions/actions/.github/workflows/js-test.yml@master
     with:

package/.oxlintrc.json

@@ -2,7 +2,7 @@
   "categories": {
     "correctness": "error",
     "suspicious": "error",
-    "pedantic": "warning",
+    "pedantic": "warn",
     "perf": "error",
     "style": "error",
     "restriction": "error"

package/components/FeedBack/ErrorBanner.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-  const feedback_store = use_feedback_store()
+  const feedback_store = useFeedbackStore()
 
   function reload() {
     window.location.reload()

package/components/FeedBack/Snackers.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script setup>
-  const feedback_store = use_feedback_store()
+  const feedback_store = useFeedbackStore()
   const show = true
 
   function calc_margin(index) {

package/components/HybridRenderingView.vue

@@ -1,34 +1,41 @@
 <template>
   <ClientOnly>
-    <div style="position: relative; width: 100%; height: calc(100vh - 75px)">
+    <div class="fill-height" style="position: relative">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
-        style="
-          overflow: hidden;
-          position: relative;
-          z-index: 0;
-          height: 100%;
-          width: 100%;
-        "
-        class="pa-0"
+        style="overflow: hidden; position: relative; z-index: 0"
+        :style="{ height: viewerHeight }"
         @click="get_x_y"
-        @keydown.esc="viewer_store.toggle_picking_mode(false)"
+        @keydown.esc="viewerStore.toggle_picking_mode(false)"
       />
     </div>
   </ClientOnly>
 </template>
 
 <script setup>
+  const props = defineProps({
+    height: {
+      type: String,
+      default: "100%",
+    },
+  })
+
   const container = useTemplateRef("viewer")
   const hybridViewerStore = useHybridViewerStore()
-
+  const viewerStore = useViewerStore()
   const { windowWidth, windowHeight } = useWindowSize()
   const { width, height } = useElementSize(container)
 
-  watch([windowWidth, windowHeight, height, width], () => {
+  const viewerHeight = computed(() => props.height)
+
+  const debouncedResize = debounce(() => {
     hybridViewerStore.resize(width.value, height.value)
+  }, 100)
+
+  watch([windowWidth, windowHeight, width, height], () => {
+    debouncedResize()
   })
 
   onMounted(async () => {
@@ -36,6 +43,25 @@
       await hybridViewerStore.initHybridViewer()
       await nextTick()
       hybridViewerStore.setContainer(container)
+      debouncedResize()
     }
   })
+
+  function debounce(func, wait) {
+    let timeout
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+
+  function get_x_y(event) {
+    emit("click", event)
+  }
+
+  defineEmits(["click"])
 </script>

package/components/Launcher.vue

@@ -21,7 +21,7 @@
 <script setup>
   import Status from "@ogw_f/utils/status.js"
 
-  const infra_store = use_infra_store()
+  const infra_store = useInfraStore()
   const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
 
   watch(

package/components/PackagesVersions.vue

@@ -25,7 +25,7 @@
     schema: { type: Object, required: true },
   })
 
-  const geode_store = use_geode_store()
+  const geode_store = useGeodeStore()
   const packages_versions = ref([])
 
   async function get_packages_versions() {

package/components/Recaptcha.vue

@@ -13,7 +13,7 @@
 
 <script setup>
   import { VueRecaptcha } from "vue-recaptcha"
-  const infra_store = use_infra_store()
+  const infra_store = useInfraStore()
 
   const props = defineProps({
     site_key: { type: String, required: true },

package/components/RemoteRenderingView.vue

@@ -30,7 +30,7 @@
     viewId: { type: String, default: "-1" },
   })
 
-  const viewer_store = use_viewer_store()
+  const viewer_store = useViewerStore()
   const viewer = useTemplateRef("viewer")
   const { width, height } = useElementSize(viewer)
 

package/components/Viewer/BreadCrumb.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-  const treeviewStore = use_treeview_store()
+  const treeviewStore = useTreeviewStore()
 
   const selectedTree = computed(() => treeviewStore.selectedTree)
 

package/components/Viewer/Tree/ObjectTree.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-  const treeviewStore = use_treeview_store()
+  const treeviewStore = useTreeviewStore()
   const menuStore = useMenuStore()
   const cardContainer = useTemplateRef("cardContainer")
   const containerWidth = ref(window.innerWidth)

package/components/Viewer/TreeObject.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup>
-  const treeviewStore = use_treeview_store()
+  const treeviewStore = useTreeviewStore()
   const dataStyleStore = useDataStyleStore()
   const dataBaseStore = useDataBaseStore()
   const emit = defineEmits(["show-menu"])

package/components/Wrapper.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-  const infra_store = use_infra_store()
+  const infra_store = useInfraStore()
 
   const props = defineProps({
     versions_schema: { type: Object, required: true },

package/composables/api_fetch.js

@@ -4,8 +4,8 @@ export function api_fetch(
   { schema, params },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const feedback_store = use_feedback_store()
-  const geode_store = use_geode_store()
+  const feedback_store = useFeedbackStore()
+  const geode_store = useGeodeStore()
 
   const body = params || {}
 

package/composables/run_function_when_microservices_connected.js

@@ -1,5 +1,5 @@
 export function run_function_when_microservices_connected(function_to_run) {
-  const infra_store = use_infra_store()
+  const infra_store = useInfraStore()
   const { microservices_connected } = storeToRefs(infra_store)
   if (microservices_connected.value) {
     function_to_run()

package/composables/upload_file.js

@@ -2,8 +2,8 @@ export async function upload_file(
   { route, file },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const feedback_store = use_feedback_store()
-  const geode_store = use_geode_store()
+  const feedback_store = useFeedbackStore()
+  const geode_store = useGeodeStore()
   if (!(file instanceof File)) {
     throw new Error("file must be a instance of File")
   }

package/composables/viewer_call.js

@@ -2,8 +2,8 @@ export function viewer_call(
   { schema, params = {} },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const feedback_store = use_feedback_store()
-  const viewer_store = use_viewer_store()
+  const feedback_store = useFeedbackStore()
+  const viewer_store = useViewerStore()
 
   const { valid, error } = validate_schema(schema, params)
 
@@ -19,45 +19,45 @@ export function viewer_call(
 
   const client = viewer_store.client
 
-  let promise = new Promise((resolve, reject) => {
-    if (client) {
-      viewer_store.start_request()
-      client
-        .getConnection()
-        .getSession()
-        .call(schema.$id, [params])
-        .then(
-          (value) => {
-            if (response_function) {
-              response_function(value)
-            }
-            resolve()
-          },
-          (reason) => {
-            if (request_error_function) {
-              request_error_function(reason)
-            }
-            reject()
-          },
-        )
-        .catch((error) => {
-          feedback_store.add_error(
-            error.code,
-            schema.route,
-            error.message,
-            error.message,
-          )
-          if (response_error_function) {
-            response_error_function(error)
+  return new Promise((resolve, reject) => {
+    if (!client) {
+      reject()
+    }
+    viewer_store.start_request()
+    client
+      .getConnection()
+      .getSession()
+      .call(schema.$id, [params])
+      .then(
+        (value) => {
+          if (response_function) {
+            response_function(value)
+          }
+          resolve()
+        },
+        (reason) => {
+          if (request_error_function) {
+            request_error_function(reason)
           }
           reject()
-        })
-        .finally(() => {
-          viewer_store.stop_request()
-        })
-    }
+        },
+      )
+      .catch((error) => {
+        feedback_store.add_error(
+          error.code,
+          schema.route,
+          error.message,
+          error.message,
+        )
+        if (response_error_function) {
+          response_error_function(error)
+        }
+        reject()
+      })
+      .finally(() => {
+        viewer_store.stop_request()
+      })
   })
-  return promise
 }
 
 export default viewer_call

package/internal_stores/mesh/edges.js

@@ -2,105 +2,102 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 const mesh_edges_schemas = viewer_schemas.opengeodeweb_viewer.mesh.edges
 
 export function useMeshEdgesStyle() {
-  /** State **/
   const dataStyleStore = useDataStyleStore()
 
-  /** Getters **/
   function edgesVisibility(id) {
     return dataStyleStore.styles[id].edges.visibility
   }
-  function edgesActiveColoring(id) {
-    return dataStyleStore.styles[id].edges.coloring.active
-  }
-  function edgesColor(id) {
-    return dataStyleStore.styles[id].edges.coloring.color
-  }
-  function edgesSize(id) {
-    return dataStyleStore.styles[id].edges.size
-  }
-
-  /** Actions **/
   function setEdgesVisibility(id, visibility) {
-    viewer_call(
+    const edges_style = dataStyleStore.styles[id].edges
+    return viewer_call(
       {
         schema: mesh_edges_schemas.visibility,
         params: { id, visibility },
       },
       {
         response_function: () => {
-          dataStyleStore.styles[id].edges.visibility = visibility
-          console.log(
-            "setEdgesVisibility",
-            dataStyleStore.styles[id].edges.visibility,
-          )
+          edges_style.visibility = visibility
+          console.log(`${setEdgesVisibility.name} ${edges_style.visibility}`)
         },
       },
     )
   }
-  function setEdgesActiveColoring(id, type) {
-    if (type == "color")
-      setEdgesColor(id, dataStyleStore.styles[id].edges.coloring.color)
-    else if (type == "vertex") {
-      const vertex = dataStyleStore.styles[id].edges.coloring.vertex
-      if (vertex !== null) setEdgesVertexAttribute(id, vertex)
-    } else if (type == "edges") {
-      const edges = dataStyleStore.styles[id].edges.coloring.edges
-      if (edges !== null) setEdgesEdgeAttribute(id, edges)
+
+  function edgesActiveColoring(id) {
+    return dataStyleStore.styles[id].edges.coloring.active
+  }
+  async function setEdgesActiveColoring(id, type) {
+    const coloring = dataStyleStore.styles[id].edges.coloring
+    if (type == "color") {
+      setEdgesColor(id, coloring.color)
+      // else if (type == "vertex") {
+      //   const vertex = coloring.vertex
+      // if (vertex !== null) setEdgesVertexAttribute(id, vertex)
+      // } else if (type == "edges") {
+      //   const edges = coloring.edges
+      //   if (edges !== null) setEdgesEdgeAttribute(id, edges)
     } else throw new Error("Unknown edges coloring type: " + type)
-    dataStyleStore.styles[id].edges.coloring.active = type
-    console.log(
-      "setEdgesActiveColoring",
-      dataStyleStore.styles[id].edges.coloring.active,
-    )
+    coloring.active = type
+    console.log(`${setEdgesActiveColoring.name} ${coloring.active}`)
   }
 
+  function edgesColor(id) {
+    return dataStyleStore.styles[id].edges.coloring.color
+  }
   function setEdgesColor(id, color) {
-    viewer_call(
+    const coloring_style = dataStyleStore.styles[id].edges.coloring
+    return viewer_call(
       {
         schema: mesh_edges_schemas.color,
         params: { id, color },
       },
       {
         response_function: () => {
-          dataStyleStore.styles[id].edges.coloring.color = color
+          coloring_style.color = color
           console.log(
-            "setEdgesColor",
-            dataStyleStore.styles[id].edges.coloring.color,
+            `${setEdgesColor.name} ${JSON.stringify(coloring_style.color)}`,
           )
         },
       },
     )
   }
-  function setEdgesSize(id, size) {
-    viewer_call(
+
+  function edgesWidth(id) {
+    return dataStyleStore.styles[id].edges.size
+  }
+  function setEdgesWidth(id, width) {
+    const edges_style = dataStyleStore.styles[id].edges
+    return viewer_call(
       {
-        schema: mesh_edges_schemas.size,
-        params: { id, size },
+        schema: mesh_edges_schemas.width,
+        params: { id, width },
       },
       {
         response_function: () => {
-          dataStyleStore.styles[id].edges.size = size
-          console.log("setEdgesSize", dataStyleStore.styles[id].edges.size)
+          edges_style.width = width
+          console.log(`${setEdgesWidth.name} ${edges_style.width}`)
         },
       },
     )
   }
 
-  function applyEdgesStyle(id, style) {
-    setEdgesVisibility(id, style.visibility)
-    setEdgesActiveColoring(id, style.coloring.active)
-    // setEdgesSize(id, style.size);
+  async function applyEdgesStyle(id, style) {
+    return Promise.all([
+      setEdgesVisibility(id, style.visibility),
+      setEdgesActiveColoring(id, style.coloring.active),
+      // setEdgesWidth(id, style.width);
+    ])
   }
 
   return {
-    edgesVisibility,
+    applyEdgesStyle,
     edgesActiveColoring,
     edgesColor,
-    edgesSize,
-    setEdgesVisibility,
+    edgesVisibility,
+    edgesWidth,
     setEdgesActiveColoring,
     setEdgesColor,
-    setEdgesSize,
-    applyEdgesStyle,
+    setEdgesVisibility,
+    setEdgesWidth,
   }
 }

package/internal_stores/mesh/index.js

@@ -13,32 +13,38 @@ export default function useMeshStyle() {
   const hybridViewerStore = useHybridViewerStore()
 
   function setMeshVisibility(id, visibility) {
-    viewer_call(
+    return viewer_call(
       {
         schema: viewer_schemas.opengeodeweb_viewer.mesh.visibility,
         params: { id, visibility },
       },
       {
         response_function: () => {
-          dataStyleStore.styles[id].visibility = visibility
           hybridViewerStore.setVisibility(id, visibility)
-          console.log("setMeshVisibility", dataStyleStore.styles[id].visibility)
+          dataStyleStore.styles[id].visibility = visibility
         },
       },
     )
   }
 
-  function applyMeshDefaultStyle(id) {
-    const id_style = dataStyleStore.styles[id]
-    for (const [key, value] of Object.entries(id_style)) {
-      if (key == "visibility") setMeshVisibility(id, value)
-      else if (key == "points") pointsStyleStore.applyPointsStyle(id, value)
-      else if (key == "edges") edgesStyleStore.applyEdgesStyle(id, value)
-      else if (key == "polygons")
-        polygonsStyleStore.applyPolygonsStyle(id, value)
-      else if (key == "polyhedra")
-        polyhedraStyleStore.applyPolyhedraStyle(id, value)
-    }
+  async function applyMeshDefaultStyle(id) {
+    return new Promise(async (resolve) => {
+      const id_style = dataStyleStore.styles[id]
+      for (const [key, value] of Object.entries(id_style)) {
+        if (key == "visibility") {
+          await setMeshVisibility(id, value)
+        } else if (key == "points") {
+          await pointsStyleStore.applyPointsStyle(id, value)
+        } else if (key == "edges") {
+          await edgesStyleStore.applyEdgesStyle(id, value)
+        } else if (key == "polygons") {
+          await polygonsStyleStore.applyPolygonsStyle(id, value)
+        } else if (key == "polyhedra") {
+          await polyhedraStyleStore.applyPolyhedraStyle(id, value)
+        }
+      }
+      resolve()
+    })
   }
 
   return {

package/internal_stores/mesh/points.js

@@ -24,7 +24,7 @@ export function useMeshPointsStyle() {
 
   /** Actions **/
   function setPointsVisibility(id, visibility) {
-    viewer_call(
+    return viewer_call(
       {
         schema: mesh_points_schemas.visibility,
         params: { id, visibility },
@@ -42,7 +42,7 @@ export function useMeshPointsStyle() {
   }
 
   function setPointsColor(id, color) {
-    viewer_call(
+    return viewer_call(
       {
         schema: viewer_schemas.opengeodeweb_viewer.mesh.points.color,
         params: { id, color },
@@ -59,7 +59,7 @@ export function useMeshPointsStyle() {
     )
   }
   function setPointsVertexAttribute(id, vertex_attribute) {
-    viewer_call(
+    return viewer_call(
       {
         schema: viewer_schemas.opengeodeweb_viewer.mesh.points.vertex_attribute,
         params: { id, ...vertex_attribute },
@@ -76,7 +76,7 @@ export function useMeshPointsStyle() {
     )
   }
   function setPointsSize(id, size) {
-    viewer_call(
+    return viewer_call(
       {
         schema: viewer_schemas.opengeodeweb_viewer.mesh.points.size,
         params: { id, size },
@@ -108,9 +108,11 @@ export function useMeshPointsStyle() {
   }
 
   function applyPointsStyle(id, style) {
-    setPointsVisibility(id, style.visibility)
-    setPointsActiveColoring(id, style.coloring.active)
-    setPointsSize(id, style.size)
+    return Promise.all([
+      setPointsVisibility(id, style.visibility),
+      setPointsActiveColoring(id, style.coloring.active),
+      setPointsSize(id, style.size),
+    ])
   }
 
   return {

package/internal_stores/mesh/polygons.js

@@ -27,7 +27,7 @@ export function useMeshPolygonsStyle() {
 
   /** Actions **/
   function setPolygonsVisibility(id, visibility) {
-    viewer_call(
+    return viewer_call(
       {
         schema: mesh_polygons_schemas.visibility,
         params: { id, visibility },
@@ -67,7 +67,7 @@ export function useMeshPolygonsStyle() {
     )
   }
   function setPolygonsColor(id, color) {
-    viewer_call(
+    return viewer_call(
       {
         schema: mesh_polygons_schemas.color,
         params: { id, color },
@@ -84,7 +84,7 @@ export function useMeshPolygonsStyle() {
     )
   }
   function setPolygonsTextures(id, textures) {
-    viewer_call(
+    return viewer_call(
       {
         schema: viewer_schemas.opengeodeweb_viewer.mesh.apply_textures,
         params: { id, textures },
@@ -101,7 +101,7 @@ export function useMeshPolygonsStyle() {
     )
   }
   function setPolygonsVertexAttribute(id, vertex_attribute) {
-    viewer_call(
+    return viewer_call(
       {
         schema: mesh_polygons_schemas.vertex_attribute,
         params: { id, ...vertex_attribute },
@@ -118,7 +118,7 @@ export function useMeshPolygonsStyle() {
     )
   }
   function setPolygonsPolygonAttribute(id, polygon_attribute) {
-    viewer_call(
+    return viewer_call(
       {
         schema: mesh_polygons_schemas.polygon_attribute,
         params: { id, ...polygon_attribute },
@@ -137,8 +137,10 @@ export function useMeshPolygonsStyle() {
   }
 
   function applyPolygonsStyle(id, style) {
-    setPolygonsVisibility(id, style.visibility)
-    setPolygonsActiveColoring(id, style.coloring.active)
+    return Promise.all([
+      setPolygonsVisibility(id, style.visibility),
+      setPolygonsActiveColoring(id, style.coloring.active),
+    ])
   }
 
   return {