@geode/opengeodeweb-front 10.4.1 → 10.5.0-rc.1

package/app/components/DeleteDialog.vue

@@ -8,7 +8,7 @@
     },
     item: {
       type: Object,
-      default: null,
+      default: undefined,
     },
     selectedCount: {
       type: Number,

package/app/components/DragAndDrop.vue

@@ -1,14 +1,11 @@
 <script setup>
   import GlassCard from "@ogw_front/components/GlassCard"
 
-  const props = defineProps({
+  const { multiple, accept, loading, showExtensions } = defineProps({
     multiple: { type: Boolean, default: false },
     accept: { type: String, default: "" },
     loading: { type: Boolean, default: false },
     showExtensions: { type: Boolean, default: true },
-    idleText: { type: String, default: "Click or Drag & Drop files" },
-    dropText: { type: String, default: "Drop to upload" },
-    loadingText: { type: String, default: "Uploading..." },
   })
 
   const emit = defineEmits(["files-selected"])
@@ -83,7 +80,13 @@
           class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
           style="transition: color 0.3s ease"
         >
-          {{ loading ? loadingText : isDragging ? dropText : idleText }}
+          {{
+            loading
+              ? "Uploading..."
+              : isDragging
+                ? "Drop to upload"
+                : "Click or Drag & Drop files"
+          }}
         </v-card-title>
 
         <v-card-subtitle v-if="showExtensions" class="text-body-2 pa-0">

package/app/components/FileUploader.vue

@@ -21,11 +21,11 @@
 
   const toggle_loading = useToggle(loading)
 
-  function processSelectedFiles(files) {
+  function processSelectedFiles(selected_files) {
     if (multiple) {
-      internal_files.value = [...internal_files.value, ...files]
+      internal_files.value = [...internal_files.value, ...selected_files]
     } else {
-      internal_files.value = [files[0]]
+      internal_files.value = [selected_files[0]]
     }
   }
 

package/app/components/GlassCard.vue

@@ -1,18 +1,18 @@
 <script setup>
   import { computed, useAttrs } from "vue"
-  defineProps({
+  const { variant, rounded, padding, theme } = defineProps({
     variant: {
       type: String,
       default: "panel",
-      validator: (v) => ["panel", "ui"].includes(v),
+      validator: (valid) => ["panel", "ui"].includes(valid),
     },
     rounded: { type: String, default: "xl" },
     padding: { type: String, default: "pa-6" },
-    theme: { type: String, default: null },
+    theme: { type: String, default: undefined },
   })
 
   const attrs = useAttrs()
-  const isInteractive = computed(() => !!attrs.onClick)
+  const isInteractive = computed(() => Boolean(attrs.onClick))
 </script>
 
 <template>

package/app/components/HybridRenderingView.vue

@@ -43,10 +43,6 @@
       timeout = setTimeout(later, wait)
     }
   }
-
-  function get_x_y(event) {
-    emit("click", event)
-  }
 </script>
 
 <template>
@@ -58,7 +54,7 @@
         class="pa-0"
         ref="viewer"
         style="height: 100%; overflow: hidden; position: relative; z-index: 0"
-        @click="get_x_y"
+        @click="emit('click', $event)"
         @keydown.esc="viewerStore.toggle_picking_mode(false)"
       />
     </div>

package/app/components/Inspector/InspectionButton.vue

@@ -15,9 +15,12 @@
   const loading = ref(false)
   const toggle_loading = useToggle(loading)
 
-  async function get_inspection_results(geode_object_type, filename) {
+  async function get_inspection_results() {
     toggle_loading()
-    const params = { geode_object_type, filename }
+    const params = {
+      geode_object_type: geode_object_type,
+      filename: filename,
+    }
     const geodeStore = useGeodeStore()
 
     await geodeStore.request(schema, params, {
@@ -34,11 +37,7 @@
 
 <template>
   <div class="pa-0">
-    <v-btn
-      :loading="loading"
-      color="primary"
-      @click="get_inspection_results(geode_object_type, filename)"
-    >
+    <v-btn :loading="loading" color="primary" @click="get_inspection_results()">
       Inspect
       <template #loader>
         <v-progress-circular indeterminate size="20" color="white" width="3" />

package/app/components/Launcher.vue

@@ -1,7 +1,7 @@
 <script setup>
   import Loading from "@ogw_front/components/Loading"
   import Recaptcha from "@ogw_front/components/Recaptcha"
-  import Status from "@ogw_front/utils/status"
+  import { Status } from "@ogw_front/utils/status"
   import { useInfraStore } from "@ogw_front/stores/infra"
 
   const infraStore = useInfraStore()

package/app/components/ObjectSelector.vue

@@ -80,7 +80,7 @@
         .map((obj) => obj[key].object_priority)
         .filter((priority) => priority !== undefined && priority !== null)
       final_object[key] = { is_loadable: Math.min(...load_scores) }
-      if (priorities.length) {
+      if (priorities.length > 0) {
         final_object[key].object_priority = Math.max(...priorities)
       }
     }

package/app/components/PackagesVersions.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import Status from "@ogw_front/utils/status"
+  import { Status } from "@ogw_front/utils/status"
   import { useGeodeStore } from "@ogw_front/stores/geode"
 
   const { schema } = defineProps({

package/app/components/RemoteRenderingView.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { useElementSize, useWindowSize } from "@vueuse/core"
-  import Status from "@ogw_front/utils/status"
+  import { Status } from "@ogw_front/utils/status"
   import ViewToolbar from "@ogw_front/components/ViewToolbar"
   import { useViewerStore } from "@ogw_front/stores/viewer"
   import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"

package/app/components/Screenshot.vue

@@ -1,6 +1,6 @@
 <script setup>
-  import fileDownload from "js-file-download"
   import GlassCard from "@ogw_front/components/GlassCard"
+  import fileDownload from "js-file-download"
   import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
   import { useViewerStore } from "@ogw_front/stores/viewer"
@@ -29,7 +29,7 @@
         include_background: include_background.value,
       },
       {
-        response_function: async (response) => {
+        response_function: (response) => {
           fileDownload(
             response.blob,
             `${filename.value}.${output_extension.value}`,

package/app/components/SearchBar.vue

@@ -1,7 +1,16 @@
+<script setup>
+  const { modelValue, label } = defineProps({
+    modelValue: { type: String, default: "" },
+    label: { type: String, default: "Search..." },
+  })
+
+  const emit = defineEmits(["update:modelValue"])
+</script>
+
 <template>
   <v-text-field
     :model-value="modelValue"
-    @update:model-value="$emit('update:modelValue', $event)"
+    @update:model-value="emit('update:modelValue', $event)"
     prepend-inner-icon="mdi-magnify"
     :label="label"
     variant="outlined"
@@ -17,18 +26,3 @@
     </template>
   </v-text-field>
 </template>
-
-<script setup>
-  defineProps({
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      default: "Search...",
-    },
-  })
-
-  defineEmits(["update:modelValue"])
-</script>

package/app/components/Step.vue

@@ -10,6 +10,8 @@
     step_index: { type: Number, required: true },
   })
 
+  const emit = defineEmits(["reset_values"])
+
   const stepper_tree = inject("stepper_tree")
   const { current_step_index, steps } = toRefs(stepper_tree)
 
@@ -98,7 +100,7 @@
         @increment_step="increment_step"
         @decrement_step="decrement_step"
         @update_values="update_values_event"
-        @reset_values="$emit('reset_values')"
+        @reset_values="emit('reset_values')"
       />
     </v-card-text>
   </v-stepper-vertical-item>

package/app/components/ViewToolbar.vue

@@ -27,7 +27,6 @@
       tooltip: "Toggle grid scale",
       icon: "mdi-ruler-square",
       action: () => {
-        const viewerStore = useViewerStore()
         viewerStore.request(
           schemas.opengeodeweb_viewer.viewer.grid_scale,
           { visibility: !grid_scale.value },

package/app/components/Viewer/ContextMenu.vue

@@ -36,10 +36,10 @@
   watch(
     () => [x, y],
     ([newX, newY]) => {
-      const { x, y } = clampPosition(newX, newY)
-      menuX.value = x
-      menuY.value = y
-      menuStore.setMenuPosition(x, y)
+      const { x: clampedX, y: clampedY } = clampPosition(newX, newY)
+      menuX.value = clampedX
+      menuY.value = clampedY
+      menuStore.setMenuPosition(clampedX, clampedY)
     },
     { immediate: true },
   )
@@ -81,22 +81,22 @@
     event.preventDefault()
   }
 
-  function clampPosition(x, y) {
+  function clampPosition(posX, posY) {
     const margin = RADIUS + MARGIN_OFFSET
     return {
-      x: Math.min(Math.max(x, margin), containerWidth - margin),
-      y: Math.min(Math.max(y, margin), containerHeight - margin),
+      x: Math.min(Math.max(posX, margin), containerWidth - margin),
+      y: Math.min(Math.max(posY, margin), containerHeight - margin),
     }
   }
 
   function handleDrag(event) {
-    const { x, y } = clampPosition(
+    const { x: clampedX, y: clampedY } = clampPosition(
       event.clientX - dragStartX.value,
       event.clientY - dragStartY.value,
     )
-    menuX.value = x
-    menuY.value = y
-    menuStore.setMenuPosition(x, y)
+    menuX.value = clampedX
+    menuY.value = clampedY
+    menuStore.setMenuPosition(clampedX, clampedY)
   }
 
   function stopDrag(event) {

package/app/components/Viewer/ContextMenuItem.vue

@@ -1,7 +1,7 @@
 <script setup>
   import GlassCard from "@ogw_front/components/GlassCard"
-  import { useTheme } from "vuetify"
   import { useMenuStore } from "@ogw_front/stores/menu"
+  import { useTheme } from "vuetify"
 
   const CARD_WIDTH = 320
   const CARD_HEIGHT = 500

package/app/components/Viewer/Options/AttributeColorBar.vue

@@ -6,10 +6,6 @@
   const minimum = defineModel("minimum", { type: Number })
   const maximum = defineModel("maximum", { type: Number })
   const colorMap = defineModel("colorMap", { type: String })
-
-  function reset() {
-    emit("reset")
-  }
 </script>
 
 <template>
@@ -33,7 +29,7 @@
           icon="mdi-arrow-left-right"
           size="x-small"
           variant="text"
-          @click="reset"
+          @click="emit('reset')"
           v-tooltip="'Reset range'"
         />
       </v-col>

package/app/components/Viewer/Options/ColorMapList.vue

@@ -55,12 +55,10 @@
     if (!preset || !preset.RGBPoints) {
       return
     }
-
     const ctx = canvas.getContext("2d")
     const { height, width } = canvas
     const lut = vtkColorTransferFunction()
     const rgbPoints = preset.RGBPoints
-
     for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
       lut.addRGBPoint(
         rgbPoints[pointIdx],
@@ -69,7 +67,6 @@
         rgbPoints[pointIdx + THREE],
       )
     }
-
     const table = lut.getUint8Table(
       rgbPoints[0],
       rgbPoints.at(-LAST_POINT_OFFSET),
@@ -77,7 +74,6 @@
       true,
     )
     const imageData = ctx.createImageData(width, height)
-
     for (let xCoord = 0; xCoord < width; xCoord += 1) {
       const alpha = table[xCoord * 4 + THREE],
         blue = table[xCoord * 4 + 2],
@@ -180,7 +176,7 @@
           <v-list-item
             v-for="(child, cIdx) in item.Children"
             :key="cIdx"
-            @click="$emit('select', child)"
+            @click="emit('select', child)"
             class="px-2 mb-1"
             rounded="md"
           >
@@ -202,7 +198,7 @@
 
         <v-list-item
           v-else
-          @click="$emit('select', item)"
+          @click="emit('select', item)"
           class="px-2 mb-1"
           rounded="md"
         >

package/app/components/Viewer/Options/ColorMapPicker.vue

@@ -120,9 +120,9 @@
   watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas)
   watch(
     () => modelValue,
-    (nv) => {
-      if (nv !== selectedPresetName.value) {
-        selectedPresetName.value = nv
+    (newValue) => {
+      if (newValue !== selectedPresetName.value) {
+        selectedPresetName.value = newValue
       }
     },
   )

package/app/components/Viewer/Options/ColoringTypeSelector.vue

@@ -58,7 +58,7 @@
     value: "polyhedron",
   }
   const coloring_styles = computed(() => {
-    let array = []
+    const array = []
     if (has_color.value) {
       array.push(color_dict)
     }

package/app/components/Viewer/Options/TextureItem.vue

@@ -37,7 +37,7 @@
   }
 
   async function files_uploaded_event(value) {
-    if (value.length) {
+    if (value.length > 0) {
       await geodeStore.request(
         back_schemas.opengeodeweb_back.save_viewable_file,
         {
@@ -48,7 +48,7 @@
           },
         },
         {
-          response_function: async (response) => {
+          response_function: (response) => {
             texture_id.value = response.id
           },
         },

package/app/components/Viewer/Options/TexturesSelector.vue

@@ -10,10 +10,10 @@
   const internal_textures = ref([])
 
   onMounted(() => {
-    if (textures.value !== null) {
-      internal_textures.value = textures.value
-    } else {
+    if (textures.value === null) {
       internal_textures.value = [{ id: "", texture_name: "" }]
+    } else {
+      internal_textures.value = textures.value
     }
   })
 
@@ -22,7 +22,7 @@
     const filtered = internal_textures.value.filter(
       (texture) => texture.texture_name !== "" && texture.id !== "",
     )
-    if (filtered.length !== 0) {
+    if (filtered.length > 0) {
       textures.value = filtered
     }
   }

package/app/components/Viewer/Tree/ObjectTree.vue

@@ -9,15 +9,11 @@
   const treeviewStore = useTreeviewStore()
   const emit = defineEmits(["show-menu"])
 
-  function handleTreeMenu({ event, itemId }) {
-    emit("show-menu", { event, itemId })
-  }
-
   function onResizeStart(event) {
     const startWidth = treeviewStore.panelWidth
     const startX = event.clientX
-    function resize(event) {
-      const deltaX = event.clientX - startX
+    function resize(move_event) {
+      const deltaX = move_event.clientX - startX
       const newWidth = Math.max(
         WIDTH_MIN,
         Math.min(startWidth + deltaX, window.innerWidth),
@@ -60,11 +56,11 @@
             <v-col>
               <ViewerTreeObject
                 v-if="!treeviewStore.isAdditionnalTreeDisplayed"
-                @show-menu="handleTreeMenu"
+                @show-menu="emit('show-menu', $event)"
               />
               <ViewerTreeComponent
                 v-else
-                @show-menu="handleTreeMenu"
+                @show-menu="emit('show-menu', $event)"
                 :id="treeviewStore.model_id"
               />
             </v-col>

package/app/components/ZScaling.vue

@@ -5,6 +5,8 @@
   const { width } = defineProps({
     width: { type: Number, default: 400 },
   })
+
+  const emit = defineEmits(["close"])
 </script>
 <template>
   <GlassCard
@@ -50,10 +52,8 @@
 
     <template #actions>
       <v-card-actions class="justify-center pb-4">
-        <v-btn variant="text" color="white" @click="$emit('close')"
-          >Close</v-btn
-        >
-        <v-btn variant="outlined" color="white" @click="$emit('close')"
+        <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
+        <v-btn variant="outlined" color="white" @click="emit('close')"
           >Apply</v-btn
         >
       </v-card-actions>

package/app/composables/project_manager.js

@@ -108,5 +108,3 @@ export function useProjectManager() {
 
   return { exportProject, importProjectFile }
 }
-
-export default useProjectManager

package/app/composables/run_function_when_microservices_connected.js

@@ -14,5 +14,3 @@ export function run_function_when_microservices_connected(function_to_run) {
     })
   }
 }
-
-export default run_function_when_microservices_connected

package/app/stores/data.js

@@ -1,6 +1,6 @@
 // Third party imports
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-import { database } from "../../internal/database/database.js"
+import { database } from "@ogw_internal/database/database.js"
 import { liveQuery } from "dexie"
 import { useObservable } from "@vueuse/rxjs"
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
@@ -42,13 +42,15 @@ export const useDataStore = defineStore("data", () => {
       Block: "Blocks",
     }
 
-    const componentsByType = items.reduce((accumulator, item) => {
-      if (componentTitles[item.type]) {
-        if (!accumulator[item.type]) accumulator[item.type] = []
-        accumulator[item.type].push(item)
+    const componentsByType = {}
+    for (const component_item of items) {
+      if (componentTitles[component_item.type]) {
+        if (!componentsByType[component_item.type]) {
+          componentsByType[component_item.type] = []
+        }
+        componentsByType[component_item.type].push(component_item)
       }
-      return accumulator
-    }, {})
+    }
 
     return Object.keys(componentTitles)
       .filter((type) => componentsByType[type])
@@ -99,20 +101,70 @@ export const useDataStore = defineStore("data", () => {
     await database.data.update(id, changes)
   }
 
-  async function addModelComponents(values) {
+  async function addModelComponents(id, values) {
     if (!values || values.length === 0) {
-      console.debug("[addModelComponents] No mesh components to add")
+      console.debug("[addModelComponents] No components to add")
       return
     }
-    for (const value of values) {
-      value.created_at = new Date().toISOString()
+
+    const { mesh_components, collection_components } = values
+    const allComponents = [
+      ...(mesh_components || []),
+      ...(collection_components || []),
+    ]
+
+    const relations = []
+    for (const component of allComponents) {
+      component.id = id
+      component.created_at = new Date().toISOString()
+
+      if (component.boundaries) {
+        for (const boundary_id of component.boundaries) {
+          relations.push({
+            id,
+            parent: component.geode_id,
+            child: boundary_id,
+            type: "boundary",
+          })
+        }
+        delete component.boundaries
+      }
+      if (component.internals) {
+        for (const internal_id of component.internals) {
+          relations.push({
+            id,
+            parent: component.geode_id,
+            child: internal_id,
+            type: "internal",
+          })
+        }
+        delete component.internals
+      }
+      if (component.items) {
+        for (const item_id of component.items) {
+          relations.push({
+            id,
+            parent: component.geode_id,
+            child: item_id,
+            type: "collection",
+          })
+        }
+        delete component.items
+      }
+    }
+
+    const serializedComponents = structuredClone(allComponents)
+    const serializedRelations = structuredClone(relations)
+
+    await database.model_components.bulkAdd(serializedComponents)
+    if (serializedRelations.length > 0) {
+      await database.model_components_relation.bulkAdd(serializedRelations)
     }
-    const serializedData = structuredClone(values)
-    await database.model_components.bulkAdd(serializedData)
   }
 
   async function deleteModelComponents(id) {
     await database.model_components.where({ id }).delete()
+    await database.model_components_relation.where({ id }).delete()
   }
 
   async function fetchModelComponents(id) {
@@ -122,23 +174,15 @@ export const useDataStore = defineStore("data", () => {
       { id },
       {
         response_function: async (response) => {
-          const allComponents = [
-            ...response.mesh_components.map(
-              ({ boundaries, internals, ...component }) => component,
-            ),
-            ...response.collection_components.map(
-              ({ items, ...component }) => component,
-            ),
-          ].map((component) => ({ ...component, id }))
-          await addModelComponents(allComponents)
+          await addModelComponents(id, response)
         },
       },
     )
   }
 
-  async function getMeshComponentGeodeIds(id, meshComponentType) {
+  async function getMeshComponentGeodeIds(id, component_type) {
     const components = await database.model_components
-      .where({ id, type: meshComponentType })
+      .where({ id, type: component_type })
       .toArray()
     return components.map((component) => component.geode_id)
   }