@geode/opengeodeweb-front 10.3.0 → 10.3.1

package/app/components/PackagesVersions.vue

@@ -2,7 +2,7 @@
   import Status from "@ogw_front/utils/status"
   import { useGeodeStore } from "@ogw_front/stores/geode"
 
-  const props = defineProps({
+  const { schema } = defineProps({
     schema: { type: Object, required: true },
   })
 
@@ -11,7 +11,7 @@
 
   async function get_packages_versions() {
     await geodeStore.request(
-      props.schema,
+      schema,
       {},
       {
         response_function: (response) => {
@@ -24,7 +24,9 @@
   watch(
     () => geodeStore.status,
     (value) => {
-      if (value == Status.CONNECTED) get_packages_versions()
+      if (value === Status.CONNECTED) {
+        get_packages_versions()
+      }
     },
   )
 

package/app/components/Recaptcha.vue

@@ -2,7 +2,9 @@
   import { appMode } from "@ogw_front/utils/app_mode"
   import { useInfraStore } from "@ogw_front/stores/infra"
 
-  const props = defineProps({
+  const RESPONSE_STATUS_OK = 200
+
+  const { button_label, button_color, color } = defineProps({
     button_label: {
       type: String,
       required: false,
@@ -58,7 +60,7 @@
       },
     })
     infraStore.$patch({
-      is_captcha_validated: response.status === 200,
+      is_captcha_validated: response.status === RESPONSE_STATUS_OK,
     })
   }
 </script>
@@ -95,8 +97,8 @@
   <VRow align="center" justify="center">
     <VCol cols="4" class="d-flex justify-center align-center">
       <VBtn
-        :text="props.button_label"
-        :color="props.color || props.button_color"
+        :text="button_label"
+        :color="color || button_color"
         @click="submit_recaptcha"
       />
     </VCol>

package/app/components/RemoteRenderingView.vue

@@ -1,12 +1,12 @@
 <script setup>
-  import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView"
   import { useElementSize, useWindowSize } from "@vueuse/core"
-  import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
   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"
+  import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView"
 
-  const props = defineProps({
+  const { viewId } = defineProps({
     viewId: { type: String, default: "-1" },
   })
 
@@ -28,6 +28,7 @@
   }
 
   const connected = ref(false)
+  // oxlint-disable-next-line import/no-named-as-default-member
   const view = vtkRemoteView.newInstance({
     rpcWheelEvent: "viewport.mouse.zoom.wheel",
   })

package/app/components/Screenshot.vue

@@ -6,7 +6,7 @@
 
   const emit = defineEmits(["close"])
 
-  const props = defineProps({
+  const { show_dialog, width } = defineProps({
     show_dialog: { type: Boolean, required: true },
     width: { type: Number, required: false, default: 400 },
   })
@@ -31,7 +31,7 @@
         response_function: async (response) => {
           fileDownload(
             response.blob,
-            filename.value + "." + output_extension.value,
+            `${filename.value}.${output_extension.value}`,
           )
         },
       },
@@ -47,9 +47,9 @@
 </script>
 <template>
   <OptionCard
-    v-if="props.show_dialog"
+    v-if="show_dialog"
     title="Take a screenshot"
-    :width="props.width"
+    :width="width"
     class="position-absolute"
     style="z-index: 2; top: 90px; right: 55px"
   >

package/app/components/Step.vue

@@ -1,12 +1,12 @@
 <script setup>
   function truncate(text, maxLength) {
     if (text.length > maxLength) {
-      return text.slice(0, maxLength) + "..."
+      return `${text.slice(0, maxLength)}...`
     }
     return text
   }
 
-  const props = defineProps({
+  const { step_index } = defineProps({
     step_index: { type: Number, required: true },
   })
 
@@ -26,17 +26,17 @@
   }
 
   function increment_step() {
-    stepper_tree.current_step_index++
+    stepper_tree.current_step_index += 1
   }
 
   function decrement_step() {
-    stepper_tree.current_step_index--
+    stepper_tree.current_step_index -= 1
   }
 
   const sortedChips = computed(() => {
-    const chips = steps.value[props.step_index]?.chips || []
-    return [...chips].sort((a, b) =>
-      a.localeCompare(b, undefined, {
+    const chips = steps.value[step_index]?.chips || []
+    return chips.toSorted((chipA, chipB) =>
+      chipA.localeCompare(chipB, undefined, {
         numeric: true,
         sensitivity: "base",
       }),

package/app/components/VeaseViewToolbar.vue

@@ -4,8 +4,8 @@
   import Screenshot from "@ogw_front/components/Screenshot"
   import ZScaling from "@ogw_front/components/ZScaling"
 
-  import { useViewerStore } from "@ogw_front/stores/viewer"
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
+  import { useViewerStore } from "@ogw_front/stores/viewer"
 
   const hybridViewerStore = useHybridViewerStore()
   const viewerStore = useViewerStore()
@@ -21,7 +21,7 @@
     },
   )
 
-  const handleZScalingClose = async () => {
+  async function handleZScalingClose() {
     await hybridViewerStore.setZScaling(zScale.value)
     showZScaling.value = false
   }
@@ -33,7 +33,7 @@
       action: () => {
         const { genericRenderWindow } = storeToRefs(hybridViewerStore)
         const renderWindow = genericRenderWindow.value.value.getRenderWindow()
-        const renderer = renderWindow.getRenderers()[0]
+        const [renderer] = renderWindow.getRenderers()
         renderer.resetCamera()
         renderWindow.render()
         hybridViewerStore.syncRemoteCamera()

package/app/components/Viewer/BreadCrumb.vue

@@ -7,15 +7,13 @@
 
   const selectedTree = computed(() => treeviewStore.selectedTree)
 
-  const goBackToFileTree = () => {
+  function goBackToFileTree() {
     treeviewStore.displayFileTree()
   }
 
   const model_id = computed(() => treeviewStore.model_id)
 
-  const metaDatas = computed(() => {
-    return dataStore.getItem(model_id.value).value
-  })
+  const metaDatas = computed(() => dataStore.getItem(model_id.value).value)
 </script>
 
 <template>

package/app/components/Viewer/ContextMenu.vue

@@ -1,12 +1,24 @@
 <script setup>
-  import { useMenuStore } from "@ogw_front/stores/menu"
   import { useDataStore } from "@ogw_front/stores/data"
   import { useEventListener } from "@vueuse/core"
+  import { useMenuStore } from "@ogw_front/stores/menu"
+
+  const RADIUS = 80
+  const MARGIN_OFFSET = 40
+  const Z_INDEX_MENU = 1000
+  const Z_INDEX_ACTIVE_ITEM = 10
+  const Z_INDEX_BASE_ITEM = 1
+  const FULL_ANGLE = 360
+  const ANGLE_45 = 45
+  const ANGLE_135 = 135
+  const ANGLE_225 = 225
+  const ANGLE_315 = 315
+  const CLOSE_DELAY = 100
 
   const menuStore = useMenuStore()
   const dataStore = useDataStore()
 
-  const props = defineProps({
+  const { id, x, y, containerWidth, containerHeight } = defineProps({
     id: { type: String, required: true },
     x: { type: Number, required: true },
     y: { type: Number, required: true },
@@ -15,21 +27,22 @@
   })
 
   const meta_data = computed(() => {
-    const itemId = props.id || menuStore.current_id
-    if (!itemId) return {}
+    const itemId = id || menuStore.current_id
+    if (!itemId) {
+      return {}
+    }
     return dataStore.getItem(itemId).value || {}
   })
 
-  const radius = 80
   const show_menu = ref(true)
   const isDragging = ref(false)
   const dragStartX = ref(0)
   const dragStartY = ref(0)
-  const menuX = ref(props.x)
-  const menuY = ref(props.y)
+  const menuX = ref(x)
+  const menuY = ref(y)
 
   watch(
-    () => [props.x, props.y],
+    () => [x, y],
     ([newX, newY]) => {
       const { x, y } = clampPosition(newX, newY)
       menuX.value = x
@@ -40,94 +53,113 @@
   )
 
   useEventListener(
-    window,
+    globalThis,
     "mousemove",
-    (e) => {
-      if (!isDragging.value) return
-      handleDrag(e)
+    (event) => {
+      if (!isDragging.value) {
+        return
+      }
+      handleDrag(event)
     },
     { passive: true },
   )
 
-  useEventListener(window, "mouseup", (e) => {
-    if (!isDragging.value) return
-    stopDrag(e)
+  useEventListener(globalThis, "mouseup", (event) => {
+    if (!isDragging.value) {
+      return
+    }
+    stopDrag(event)
   })
 
   const menu_items = shallowRef([])
   watch(
     () => [meta_data.value.viewer_type, meta_data.value.geode_object_type],
-    ([v, g]) => {
-      menu_items.value = menuStore.getMenuItems(v, g)
+    ([viewer_type, geode_object_type]) => {
+      menu_items.value = menuStore.getMenuItems(viewer_type, geode_object_type)
     },
     { immediate: true },
   )
 
   const menuItemCount = computed(() => menu_items.value.length)
 
-  function startDrag(e) {
+  function startDrag(event) {
     isDragging.value = true
-    dragStartX.value = e.clientX - menuX.value
-    dragStartY.value = e.clientY - menuY.value
-    e.preventDefault()
+    dragStartX.value = event.clientX - menuX.value
+    dragStartY.value = event.clientY - menuY.value
+    event.preventDefault()
   }
 
   function clampPosition(x, y) {
-    const margin = radius + 40
+    const margin = RADIUS + MARGIN_OFFSET
     return {
-      x: Math.min(Math.max(x, margin), props.containerWidth - margin),
-      y: Math.min(Math.max(y, margin), props.containerHeight - margin),
+      x: Math.min(Math.max(x, margin), containerWidth - margin),
+      y: Math.min(Math.max(y, margin), containerHeight - margin),
     }
   }
 
-  function handleDrag(e) {
+  function handleDrag(event) {
     const { x, y } = clampPosition(
-      e.clientX - dragStartX.value,
-      e.clientY - dragStartY.value,
+      event.clientX - dragStartX.value,
+      event.clientY - dragStartY.value,
     )
     menuX.value = x
     menuY.value = y
     menuStore.setMenuPosition(x, y)
   }
 
-  function stopDrag(e) {
+  function stopDrag(event) {
     isDragging.value = false
-    e.stopPropagation()
+    event.stopPropagation()
     menuStore.setMenuPosition(menuX.value, menuY.value)
   }
 
   function getMenuStyle() {
     return {
       position: "fixed",
-      left: `${menuStore.containerLeft + menuX.value - radius}px`,
-      top: `${menuStore.containerTop + menuY.value - radius}px`,
-      zIndex: 1000,
+      left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
+      top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
+      zIndex: Z_INDEX_MENU,
     }
   }
 
   function getTooltipLocation(index) {
-    const angle = (index / menuItemCount.value) * 360
-    if (angle < 45 || angle >= 315) return "right"
-    if (angle >= 45 && angle < 135) return "top"
-    if (angle >= 135 && angle < 225) return "left"
+    const angle = (index / menuItemCount.value) * FULL_ANGLE
+    if (angle < ANGLE_45 || angle >= ANGLE_315) {
+      return "right"
+    }
+    if (angle >= ANGLE_45 && angle < ANGLE_135) {
+      return "top"
+    }
+    if (angle >= ANGLE_135 && angle < ANGLE_225) {
+      return "left"
+    }
     return "bottom"
   }
 
   function getTooltipOrigin(index) {
-    const angle = (index / menuItemCount.value) * 360
-    if (angle < 45 || angle >= 315) return "left"
-    if (angle >= 45 && angle < 135) return "bottom"
-    if (angle >= 135 && angle < 225) return "right"
+    const angle = (index / menuItemCount.value) * FULL_ANGLE
+    if (angle < ANGLE_45 || angle >= ANGLE_315) {
+      return "left"
+    }
+    if (angle >= ANGLE_45 && angle < ANGLE_135) {
+      return "bottom"
+    }
+    if (angle >= ANGLE_135 && angle < ANGLE_225) {
+      return "right"
+    }
     return "top"
   }
 
   function getItemStyle(index) {
     const angle = (index / menuItemCount.value) * 2 * Math.PI
     return {
-      transform: `translate(${Math.cos(angle) * radius}px, ${Math.sin(angle) * radius}px)`,
+      transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
       transition: "opacity 0.2s ease, transform 0.2s ease",
       position: "absolute",
-      zIndex: menuStore.active_item_index === index ? 10 : 1,
+      zIndex:
+        menuStore.active_item_index === index
+          ? Z_INDEX_ACTIVE_ITEM
+          : Z_INDEX_BASE_ITEM,
     }
   }
 </script>
@@ -138,13 +170,13 @@
     content-class="circular-menu-container"
     :style="getMenuStyle()"
     :close-on-content-click="false"
-    :close-delay="100"
+    :close-delay="CLOSE_DELAY"
     :overlay="false"
   >
     <div class="circular-menu-drag-handle" @mousedown.stop="startDrag">
       <div
         class="circular-menu-items"
-        :style="{ width: `${radius * 2}px`, height: `${radius * 2}px` }"
+        :style="{ width: `${RADIUS * 2}px`, height: `${RADIUS * 2}px` }"
       >
         <component
           v-for="(item, index) in menu_items"
@@ -152,7 +184,7 @@
           :key="index"
           :index="index"
           :itemProps="{
-            id: props.id,
+            id: id,
             tooltip_location: getTooltipLocation(index),
             tooltip_origin: getTooltipOrigin(index),
             totalItems: menuItemCount,

package/app/components/Viewer/ContextMenuItem.vue

@@ -1,66 +1,79 @@
 <script setup>
-  import { useTheme } from "vuetify"
-  import { useMenuStore } from "@ogw_front/stores/menu"
   import { useElementSize } from "@vueuse/core"
+  import { useMenuStore } from "@ogw_front/stores/menu"
+  import { useTheme } from "vuetify"
+
+  const CARD_WIDTH = 320
+  const CARD_HEIGHT = 500
+  const MARGIN = 60
+  const RADIUS = 80
+  const OFFSET = 40
 
   const menuStore = useMenuStore()
   const theme = useTheme()
   const primaryColor = computed(() => theme.current.value.colors.primary)
-  const props = defineProps({
+  const { index, itemProps, tooltip, btn_image } = defineProps({
     index: { type: Number, required: true },
     itemProps: { type: Object, required: true },
     tooltip: { type: String, required: true },
     btn_image: { type: String, required: true },
   })
 
-  const is_active = computed(() => menuStore.active_item_index === props.index)
-  const optionsRef = ref(null)
+  const is_active = computed(() => menuStore.active_item_index === index)
+  const optionsRef = ref(undefined)
   const { height: optionsHeight } = useElementSize(optionsRef)
 
   const maxCardHeight = computed(() =>
-    Math.min(500, menuStore.containerHeight - 40),
+    Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
   )
 
   const optionsStyle = computed(() => {
-    if (!is_active.value || !optionsHeight.value) return {}
-    const angle = (props.index / props.itemProps.totalItems) * 2 * Math.PI
-    const radius = 80
+    if (!is_active.value || !optionsHeight.value) {
+      return {}
+    }
+    const angle = (index / itemProps.totalItems) * 2 * Math.PI
+    const radius = RADIUS
     const absoluteButtonY = menuStore.menuY + Math.sin(angle) * radius
-    const h = optionsHeight.value
-    const margin = 20
-    let dy = 0
-
-    if (absoluteButtonY - h / 2 < margin) {
-      dy = margin - (absoluteButtonY - h / 2)
-    } else if (absoluteButtonY + h / 2 > menuStore.containerHeight - margin) {
-      dy = menuStore.containerHeight - margin - (absoluteButtonY + h / 2)
+    const height = optionsHeight.value
+    const margin = MARGIN
+    let offsetY = 0
+
+    if (absoluteButtonY - height / 2 < margin) {
+      offsetY = margin - (absoluteButtonY - height / 2)
+    } else if (
+      absoluteButtonY + height / 2 >
+      menuStore.containerHeight - margin
+    ) {
+      offsetY =
+        menuStore.containerHeight - margin - (absoluteButtonY + height / 2)
     }
-    return { top: `calc(50% + ${dy}px)` }
+    return { top: `calc(50% + ${offsetY}px)` }
   })
 
   const optionsClass = computed(() => {
-    const loc = props.itemProps.tooltip_location
-    const cardWidth = 320
-    const margin = 60
-    const radius = 80
+    const loc = itemProps.tooltip_location
+    const margin = MARGIN
+    const radius = RADIUS
     if (loc === "right") {
-      return menuStore.menuX + radius + margin + cardWidth >
+      return menuStore.menuX + radius + margin + CARD_WIDTH >
         menuStore.containerWidth
         ? "options-left"
         : "options-right"
     }
-    return menuStore.menuX - radius - margin - cardWidth < 0
+    return menuStore.menuX - radius - margin - CARD_WIDTH < 0
       ? "options-right"
       : "options-left"
   })
 
-  const toggleOptions = () => menuStore.toggleItemOptions(props.index)
+  function toggleOptions() {
+    menuStore.toggleItemOptions(index)
+  }
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">
     <v-tooltip
-      :location="props.itemProps.tooltip_location"
-      :origin="props.itemProps.tooltip_origin"
+      :location="itemProps.tooltip_location"
+      :origin="itemProps.tooltip_origin"
     >
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
@@ -74,7 +87,7 @@
           <v-img :src="btn_image" height="28" width="28" />
         </v-btn>
       </template>
-      <span>{{ props.tooltip }}</span>
+      <span>{{ tooltip }}</span>
     </v-tooltip>
 
     <v-sheet
@@ -86,11 +99,7 @@
       color="transparent"
       @click.stop
     >
-      <OptionCard
-        :title="props.tooltip"
-        width="320"
-        :max-height="maxCardHeight"
-      >
+      <OptionCard :title="tooltip" width="320" :max-height="maxCardHeight">
         <slot name="options" />
       </OptionCard>
     </v-sheet>

package/app/components/Viewer/EdgedCurve/PointsOptions.vue

@@ -1,15 +1,15 @@
 <script setup>
-  import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions"
   import EdgedCurvePoints from "@ogw_front/assets/viewer_svgs/edged_curve_points.svg"
+  import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions"
 
-  const props = defineProps({
+  const { itemProps } = defineProps({
     itemProps: { type: Object, required: true },
   })
 </script>
 
 <template>
   <ViewerGenericMeshPointsOptions
-    :itemProps="props.itemProps"
+    :itemProps="itemProps"
     :btn_image="EdgedCurvePoints"
   />
 </template>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -1,8 +1,8 @@
 <script setup>
+  import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg"
   import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
-  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
   import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
-  import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg"
+  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
 
   import { useDataStyleStore } from "@ogw_front/stores/data_style"
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
@@ -10,11 +10,11 @@
   const dataStyleStore = useDataStyleStore()
   const hybridViewerStore = useHybridViewerStore()
 
-  const props = defineProps({
+  const { itemProps } = defineProps({
     itemProps: { type: Object, required: true },
   })
 
-  const id = toRef(() => props.itemProps.id)
+  const id = toRef(() => itemProps.id)
 
   const visibility = computed({
     get: () => dataStyleStore.meshEdgesVisibility(id.value),
@@ -102,7 +102,7 @@
 </script>
 <template>
   <ViewerContextMenuItem
-    :itemProps="props.itemProps"
+    :itemProps="itemProps"
     tooltip="Edges options"
     :btn_image="EdgedCurveEdges"
   >

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -1,7 +1,7 @@
 <script setup>
   import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem"
-  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
   import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector"
+  import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch"
 
   import { useDataStyleStore } from "@ogw_front/stores/data_style"
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
@@ -9,13 +9,13 @@
   const dataStyleStore = useDataStyleStore()
   const hybridViewerStore = useHybridViewerStore()
 
-  const props = defineProps({
+  const { itemProps, btn_image, tooltip } = defineProps({
     itemProps: { type: Object, required: true },
     btn_image: { type: String, required: true },
     tooltip: { type: String, required: false, default: "Cells options" },
   })
 
-  const id = toRef(() => props.itemProps.id)
+  const id = toRef(() => itemProps.id)
 
   const visibility = computed({
     get: () => dataStyleStore.meshCellsVisibility(id.value),
@@ -106,9 +106,9 @@
 
 <template>
   <ViewerContextMenuItem
-    :itemProps="props.itemProps"
-    :tooltip="props.tooltip"
-    :btn_image="props.btn_image"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
   >
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />