@geode/opengeodeweb-front 9.11.2 → 9.11.3-rc.2

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/.github/workflows/test_pr.yml

@@ -9,4 +9,5 @@ jobs:
     uses: Geode-solutions/actions/.github/workflows/js-test-pr.yml@master
     with:
       repos: ${{ vars.REPOS }}
+      integration: false
     secrets: inherit

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,43 @@
 <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 emit = defineEmits(["click"])
+
   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 +45,23 @@
       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)
+  }
 </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/Options/PolygonAttributeSelector.vue

@@ -10,8 +10,6 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
-  const dataBaseStore = useDataBaseStore()
-
   const props = defineProps({
     id: { type: String, required: true },
   })
@@ -21,10 +19,6 @@
   const polygon_attribute_names = ref([])
   const polygon_attribute = reactive({ name: polygon_attribute_name.value })
 
-  const meta_data = computed(() => {
-    return dataBaseStore.itemMetaDatas(props.id)
-  })
-
   onMounted(() => {
     if (model.value != null) {
       polygon_attribute_name.value = model.value.name
@@ -45,8 +39,7 @@
       {
         schema: back_schemas.opengeodeweb_back.polygon_attribute_names,
         params: {
-          input_geode_object: meta_data.value.geode_object,
-          filename: meta_data.value.native_filename,
+          id: props.id,
         },
       },
       {

package/components/Viewer/Options/PolyhedronAttributeSelector.vue

@@ -32,12 +32,7 @@
     id: { type: String, required: true },
   })
 
-  const dataBaseStore = useDataBaseStore()
-
   const polyhedron_attribute_names = ref([])
-  const meta_data = computed(() => {
-    return dataBaseStore.itemMetaDatas(props.id)
-  })
 
   onMounted(() => {
     getVertexAttributes()
@@ -48,8 +43,7 @@
       {
         schema: back_schemas.opengeodeweb_back.polyhedron_attribute_names,
         params: {
-          input_geode_object: meta_data.value.geode_object,
-          filename: meta_data.value.native_filename,
+          id: props.id,
         },
       },
       {

package/components/Viewer/Options/TextureItem.vue

@@ -38,8 +38,6 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
-  const dataBaseStore = useDataBaseStore()
-
   const emit = defineEmits(["update_value"])
 
   const props = defineProps({
@@ -56,10 +54,6 @@
 
   const texture_coordinates = ref([])
 
-  const meta_data = computed(() => {
-    return dataBaseStore.itemMetaDatas(props.id)
-  })
-
   onMounted(() => {
     getTextureCoordinates()
   })
@@ -69,8 +63,7 @@
       {
         schema: back_schemas.opengeodeweb_back.texture_coordinates,
         params: {
-          input_geode_object: meta_data.value.geode_object,
-          filename: meta_data.value.native_filename,
+          id: props.id,
         },
       },
       {

package/components/Viewer/Options/VertexAttributeSelector.vue

@@ -33,9 +33,6 @@
   const dataBaseStore = useDataBaseStore()
 
   const vertex_attribute_names = ref([])
-  const meta_data = computed(() => {
-    return dataBaseStore.itemMetaDatas(props.id)
-  })
 
   onMounted(() => {
     getVertexAttributes()
@@ -46,8 +43,7 @@
       {
         schema: back_schemas.opengeodeweb_back.vertex_attribute_names,
         params: {
-          input_geode_object: meta_data.value.geode_object,
-          filename: meta_data.value.native_filename,
+          id: props.id,
         },
       },
       {

package/components/Viewer/Tree/ObjectTree.vue

@@ -42,30 +42,30 @@
 </template>
 
 <script setup>
-  const treeviewStore = use_treeview_store()
+  const treeviewStore = useTreeviewStore()
   const menuStore = useMenuStore()
   const cardContainer = useTemplateRef("cardContainer")
   const containerWidth = ref(window.innerWidth)
   const containerHeight = ref(window.innerHeight)
-
   const menuX = ref(0)
   const menuY = ref(0)
   const id = ref(null)
 
-  const emit = defineEmits(["show-menu", "position-menu"])
+  const handleResize = () => {
+    containerWidth.value = window.innerWidth
+    containerHeight.value = window.innerHeight
+  }
 
   function handleTreeMenu({ event, itemId }) {
     menuX.value = event.clientX
     menuY.value = event.clientY
     id.value = itemId
-
     menuStore.openMenu(itemId, event.clientX, event.clientY)
   }
 
   function onResizeStart(event) {
     const startWidth = treeviewStore.panelWidth
     const startX = event.clientX
-
     const resize = (e) => {
       const deltaX = e.clientX - startX
       const newWidth = Math.max(
@@ -75,13 +75,11 @@
       treeviewStore.setPanelWidth(newWidth)
       document.body.style.userSelect = "none"
     }
-
     const stopResize = () => {
       document.removeEventListener("mousemove", resize)
       document.removeEventListener("mouseup", stopResize)
       document.body.style.userSelect = ""
     }
-
     document.addEventListener("mousemove", resize)
     document.addEventListener("mouseup", stopResize)
   }
@@ -89,15 +87,11 @@
   onMounted(() => {
     containerWidth.value = window.innerWidth
     containerHeight.value = window.innerHeight
-
-    window.addEventListener("resize", () => {
-      containerWidth.value = window.innerWidth
-      containerHeight.value = window.innerHeight
-    })
+    window.addEventListener("resize", handleResize)
   })
 
   onUnmounted(() => {
-    window.removeEventListener("resize")
+    window.removeEventListener("resize", handleResize)
   })
 </script>
 
@@ -113,20 +107,17 @@
     display: flex;
     box-sizing: border-box;
   }
-
   .resizable-panel {
     display: flex;
     height: 100%;
     position: relative;
     box-sizing: border-box;
   }
-
   .scrollable-wrapper {
     overflow-y: auto;
     padding-right: 6px;
     flex: 1;
   }
-
   .resizer {
     position: absolute;
     top: 0;
@@ -137,32 +128,25 @@
     background-color: transparent;
     z-index: 15;
   }
-
   .resizer:hover {
     background-color: #999;
   }
-
   .resizer:active {
     background-color: #666;
   }
-
   .transparent-treeview {
     background-color: transparent;
     margin: 4px 0;
   }
-
   .scrollbar-hover {
     overflow-x: hidden;
   }
-
   .scrollbar-hover::-webkit-scrollbar {
     width: 5px;
   }
-
   .scrollbar-hover::-webkit-scrollbar-thumb {
     background-color: transparent;
   }
-
   .scrollbar-hover:hover::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 10px;

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