@geode/opengeodeweb-front 10.34.0-rc.9 → 10.34.0

package/app/components/Viewer/Generic/Model/SurfacesOptions.vue

@@ -1,37 +1,47 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-// This file exhaustively wires group- and per-component style properties (visibility/color/coloring/vertex+polyhedron attributes) to the style store; the formatter's line-wrapping of the resulting store calls pushes the file past max-lines even though no logic was added.
-// oxlint-disable eslint/max-lines
+import type { CollectionComponent } from "@ogw_front/stores/data_helpers/collections";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 
 interface Props {
   modelId: string;
   surfaceId?: string;
   targetSurfaceIds: string[];
+  collections?: CollectionComponent[];
 }
 
-const { modelId, surfaceId = undefined, targetSurfaceIds } = defineProps<Props>();
+const {
+  modelId,
+  surfaceId = undefined,
+  targetSurfaceIds,
+  collections = undefined,
+} = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const referenceSurfaceId = computed<string | undefined>(() =>
+  collections ? targetSurfaceIds[0] : undefined,
+);
+
 // Visibility
-const surfacesVisibility = computed({
-  get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Surface"),
+const surfacesVisibility = computed<boolean>({
+  get: () =>
+    collections
+      ? targetSurfaceIds.every((id) => dataStyleStore.modelSurfaceVisibility(modelId, id))
+      : dataStyleStore.modelComponentTypeVisibility(modelId, "Surface"),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVisibility(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfaceVisibility = computed({
+const surfaceVisibility = computed<boolean>({
   get: () => dataStyleStore.modelSurfaceVisibility(modelId, surfaceId) as boolean | undefined,
   set: async (newValue) => {
     if (surfaceId === undefined) {
@@ -44,7 +54,8 @@ const surfaceVisibility = computed({
 
 // Color
 const surfacesColor = computed<RGBAColor | undefined>({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Surface") as RGBAColor | undefined,
+  get: () =>
+    dataStyleStore.modelSurfaceColor(modelId, referenceSurfaceId.value) as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelSurfacesColor(modelId, targetSurfaceIds, color);
     hybridViewerStore.remoteRender();
@@ -64,12 +75,27 @@ const surfaceColor = computed<RGBAColor | undefined>({
 
 const surfacesActiveColoring = computed<string | undefined>({
   get: () =>
-    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface") as string | undefined,
+    dataStyleStore.modelSurfaceActiveColoring(modelId, referenceSurfaceId.value) as
+      | string
+      | undefined,
   set: async (coloringType) => {
     if (typeof coloringType !== "string") {
       return;
     }
-    await dataStyleStore.setModelSurfacesActiveColoring(modelId, targetSurfaceIds, coloringType);
+    if (collections && coloringType === "random") {
+      await Promise.all(
+        collections.map((collection) =>
+          dataStyleStore.setModelSurfacesActiveColoring(
+            modelId,
+            collection.children.map((child) => child.id),
+            coloringType,
+            collection.id,
+          ),
+        ),
+      );
+    } else {
+      await dataStyleStore.setModelSurfacesActiveColoring(modelId, targetSurfaceIds, coloringType);
+    }
     hybridViewerStore.remoteRender();
   },
 });
@@ -86,8 +112,8 @@ const surfaceActiveColoring = computed<string | undefined>({
 });
 
 // Group Attributes
-const surfacesVertexAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId),
+const surfacesVertexAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -97,16 +123,16 @@ const surfacesVertexAttributeName = computed({
   },
 });
 
-const surfacesVertexAttributeItem = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId),
+const surfacesVertexAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeItem(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesVertexAttributeRange = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId),
+const surfacesVertexAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -122,8 +148,8 @@ const surfacesVertexAttributeRange = computed({
   },
 });
 
-const surfacesVertexAttributeColorMap = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId),
+const surfacesVertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeColorMap(
       modelId,
@@ -136,7 +162,9 @@ const surfacesVertexAttributeColorMap = computed({
 
 const surfacesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
   get: () =>
-    dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
+    dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId, referenceSurfaceId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesVertexAttributeNoDataColor(
       modelId,
@@ -147,8 +175,8 @@ const surfacesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
   },
 });
 
-const surfacesPolygonAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId),
+const surfacesPolygonAttributeName = computed<string | undefined>({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     if (newValue === undefined) {
       return;
@@ -158,16 +186,16 @@ const surfacesPolygonAttributeName = computed({
   },
 });
 
-const surfacesPolygonAttributeItem = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId),
+const surfacesPolygonAttributeItem = computed<string | undefined>({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeItem(modelId, targetSurfaceIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesPolygonAttributeRange = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId),
+const surfacesPolygonAttributeRange = computed<[number, number] | undefined>({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
     if (minimum === undefined || maximum === undefined) {
@@ -183,8 +211,9 @@ const surfacesPolygonAttributeRange = computed({
   },
 });
 
-const surfacesPolygonAttributeColorMap = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId),
+const surfacesPolygonAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
+  get: () =>
+    dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId, referenceSurfaceId.value),
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeColorMap(
       modelId,
@@ -197,7 +226,9 @@ const surfacesPolygonAttributeColorMap = computed({
 
 const surfacesPolygonAttributeNoDataColor = computed<RGBAColor | undefined>({
   get: () =>
-    dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId) as RGBAColor | undefined,
+    dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId, referenceSurfaceId.value) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelSurfacesPolygonAttributeNoDataColor(
       modelId,
@@ -209,7 +240,7 @@ const surfacesPolygonAttributeNoDataColor = computed<RGBAColor | undefined>({
 });
 
 // Individual Attributes
-const vertexAttributeName = computed({
+const vertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
   set: async (newValue) => {
     if (surfaceId === undefined || newValue === undefined) {
@@ -220,7 +251,7 @@ const vertexAttributeName = computed({
   },
 });
 
-const vertexAttributeItem = computed({
+const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, surfaceId),
   set: async (newValue) => {
     if (surfaceId === undefined) {
@@ -231,7 +262,7 @@ const vertexAttributeItem = computed({
   },
 });
 
-const vertexAttributeRange = computed({
+const vertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, surfaceId),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -248,7 +279,7 @@ const vertexAttributeRange = computed({
   },
 });
 
-const vertexAttributeColorMap = computed({
+const vertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelSurfacesVertexAttributeColorMap(modelId, surfaceId),
   set: async (newValue) => {
     if (surfaceId === undefined) {
@@ -273,7 +304,7 @@ const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
   },
 });
 
-const polygonAttributeName = computed({
+const polygonAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
   set: async (newValue) => {
     if (surfaceId === undefined || newValue === undefined) {
@@ -284,7 +315,7 @@ const polygonAttributeName = computed({
   },
 });
 
-const polygonAttributeItem = computed({
+const polygonAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, surfaceId),
   set: async (newValue) => {
     if (surfaceId === undefined) {
@@ -295,7 +326,7 @@ const polygonAttributeItem = computed({
   },
 });
 
-const polygonAttributeRange = computed({
+const polygonAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, surfaceId),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -312,7 +343,7 @@ const polygonAttributeRange = computed({
   },
 });
 
-const polygonAttributeColorMap = computed({
+const polygonAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeColorMap(modelId, surfaceId),
   set: async (newValue) => {
     if (surfaceId === undefined) {

package/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
+import { type DisplayItem, type EmitFn, useVirtualTree } from "@ogw_front/composables/virtual_tree";
 import StickyHeader from "@ogw_front/components/Viewer/ObjectTree/Base/StickyHeader.vue";
 import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
 import { useTreeKeyboardNav } from "@ogw_front/composables/tree_keyboard_nav";
 import { useTreeScroll } from "@ogw_front/composables/tree_scroll";
-import { useVirtualTree } from "@ogw_front/composables/virtual_tree";
-// oxlint-disable-next-line eslint/no-duplicate-imports
-import type { DisplayItem, EmitFn } from "@ogw_front/composables/virtual_tree";
 
 // The useVirtualTree composable's own props type (VirtualTreeProps) isn't exported; this component intentionally stays generic over whatever item shape callers use (plain treeview groups, model component groups, ...), so it is extracted from the composable's signature instead of re-declared here.
 type UnwrapMaybeRefOrGetter<Source> = Source extends () => infer Result
@@ -35,7 +33,7 @@ const {
 
 const treeWrapper = ref<HTMLDivElement | undefined>(undefined);
 
-const emit = defineEmits<{
+interface Emits {
   "update:opened": [value: unknown[]];
   "update:selected": [value: unknown[]];
   "update:active": [value: unknown[]];
@@ -44,7 +42,9 @@ const emit = defineEmits<{
   "hover:enter": [payload: { item: DisplayItem }];
   "hover:leave": [payload: { item: DisplayItem }];
   contextmenu: [payload: { event: MouseEvent; item: DisplayItem["raw"] }];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const {
   actualItemProps,
@@ -76,57 +76,75 @@ const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex, getScrollIn
     actualItemProps,
   );
 
-const focusedIndex = ref(-1);
-const lastActiveIndex = ref(-1);
+const focusedIndex = ref<number>(-1);
+const lastActiveIndex = ref<number>(-1);
 
-function handleItemClick(
-  item: DisplayItem,
-  index: number | undefined,
-  event?: MouseEvent | KeyboardEvent,
-) {
+function applyRangeSelect(newActive: Set<unknown>, index: number): void {
+  const start = Math.min(lastActiveIndex.value, index);
+  const end = Math.max(lastActiveIndex.value, index);
+  for (let i = start; i <= end; i += 1) {
+    const rowItem = displayItems.value[i];
+    if (rowItem && rowItem.isLeaf) {
+      newActive.add(rowItem.raw[actualItemProps.value.value]);
+    }
+  }
+}
+
+function applyToggleActive(newActive: Set<unknown>, id: unknown, index: number | undefined): void {
+  if (newActive.has(id)) {
+    newActive.delete(id);
+  } else {
+    newActive.add(id);
+  }
   if (index !== undefined) {
-    focusedIndex.value = index;
+    lastActiveIndex.value = index;
   }
+}
 
-  if (event && (event.ctrlKey || event.metaKey || event.shiftKey)) {
-    const newActive = new Set(active);
-    const id = item.raw[actualItemProps.value.value];
+function handleMultiSelectClick(
+  item: DisplayItem,
+  index: number | undefined,
+  event: MouseEvent | KeyboardEvent,
+): void {
+  const newActive = new Set(active);
+  const id = item.raw[actualItemProps.value.value];
+  if (event.shiftKey && lastActiveIndex.value !== -1 && index !== undefined) {
+    applyRangeSelect(newActive, index);
+  } else {
+    applyToggleActive(newActive, id, index);
+  }
+  emit("update:active", [...newActive]);
+}
 
-    if (event.shiftKey && lastActiveIndex.value !== -1 && index !== undefined) {
-      const start = Math.min(lastActiveIndex.value, index);
-      const end = Math.max(lastActiveIndex.value, index);
-      for (let i = start; i <= end; i += 1) {
-        const rowItem = displayItems.value[i];
-        if (rowItem && rowItem.isLeaf) {
-          newActive.add(rowItem.raw[actualItemProps.value.value]);
-        }
-      }
-    } else {
-      if (newActive.has(id)) {
-        newActive.delete(id);
-      } else {
-        newActive.add(id);
-      }
-      if (index !== undefined) {
-        lastActiveIndex.value = index;
-      }
-    }
-    emit("update:active", [...newActive]);
+function handleNormalClick(item: DisplayItem, index: number | undefined): void {
+  if (!item.isLeaf) {
+    toggleOpen(item.raw);
     return;
   }
+  emit("update:active", [item.raw[actualItemProps.value.value]]);
+  if (index !== undefined) {
+    lastActiveIndex.value = index;
+  }
+  toggleSelect(item.raw);
+  emit("click:item", item.raw);
+}
 
-  // Normal click
-  if (item.isLeaf) {
-    const newActive = [item.raw[actualItemProps.value.value]];
-    emit("update:active", newActive);
-    if (index !== undefined) {
-      lastActiveIndex.value = index;
-    }
+function isMultiSelectEvent(event: MouseEvent | KeyboardEvent): void {
+  return event.ctrlKey || event.metaKey || event.shiftKey;
+}
 
-    toggleSelect(item.raw);
-    emit("click:item", item.raw);
+function handleItemClick(
+  item: DisplayItem,
+  index: number | undefined,
+  event?: MouseEvent | KeyboardEvent,
+): void {
+  if (index !== undefined) {
+    focusedIndex.value = index;
+  }
+  if (Boolean(event) && isMultiSelectEvent(event)) {
+    handleMultiSelectClick(item, index, event);
   } else {
-    toggleOpen(item.raw);
+    handleNormalClick(item, index);
   }
 }
 

package/app/components/Viewer/ObjectTree/Base/Controls.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
 
@@ -20,14 +18,16 @@ const {
   isCollapsed = false,
 } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   "update:search": [value: string];
   "toggle-sort": [];
   "collapse-all": [];
   "expand-all": [];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
-const showSearch = ref(false);
+const showSearch = ref<boolean>(false);
 
 watch(
   () => showSearch.value,

package/app/components/Viewer/ObjectTree/Base/ItemLabel.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
+import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import { middleTruncate } from "@ogw_front/utils/string";
 import { useClipboard } from "@vueuse/core";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 import { useResponsiveMiddleTruncate } from "@ogw_front/composables/responsive_middle_truncate";
-import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 
 const feedbackStore = useFeedbackStore();
 const { copy } = useClipboard();
@@ -17,11 +15,13 @@ interface Props {
 
 const { item, isLeaf } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   contextmenu: [event: MouseEvent];
   mouseenter: [];
   mouseleave: [];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const labelContainer = useTemplateRef("label-container");
 const { width: containerWidth } = useElementSize(labelContainer);
@@ -31,10 +31,11 @@ interface LabeledItem {
   id: string;
   title?: string;
   is_active?: boolean;
+  category?: string;
   children?: unknown[];
 }
 
-const actualItem = computed(() => (item.raw || item) as unknown as LabeledItem);
+const actualItem = computed<LabeledItem>(() => (item.raw || item) as unknown as LabeledItem);
 
 const TOOLTIP_NAME_MAX_LENGTH = 40;
 const TOOLTIP_NAME_START_CHARS = 10;
@@ -42,7 +43,7 @@ const TOOLTIP_NAME_END_CHARS = 8;
 
 const displayTitle = useResponsiveMiddleTruncate(() => actualItem.value.title, containerWidth);
 
-const tooltipTitle = computed(() =>
+const tooltipTitle = computed<string>(() =>
   middleTruncate(
     actualItem.value.title,
     TOOLTIP_NAME_MAX_LENGTH,
@@ -51,14 +52,17 @@ const tooltipTitle = computed(() =>
   ),
 );
 
-const tooltipDisabled = computed(() => {
+const tooltipDisabled = computed<boolean>(() => {
+  if (actualItem.value.category !== undefined) {
+    return false;
+  }
   if (isLeaf !== undefined) {
     return !isLeaf;
   }
   return actualItem.value.children && actualItem.value.children.length > 0;
 });
 
-async function copyToClipboard(text: string, label: string) {
+async function copyToClipboard(text: string, label: string): Promise<void> {
   await copy(text);
   feedbackStore.add_success(`${label} copied to clipboard`);
 }

package/app/components/Viewer/ObjectTree/Base/StickyHeader.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
 import type {
   DisplayItem,
   ItemPropsConfig,
   SelectionConfig,
   TreeItem,
 } from "@ogw_front/composables/virtual_tree";
+import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
 
 interface Props {
   item: DisplayItem;
@@ -19,10 +17,12 @@ interface Props {
 
 const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   "toggle-open": [item: TreeItem];
   "toggle-select": [item: TreeItem];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 </script>
 
 <template>

package/app/components/Viewer/ObjectTree/Base/TreeRow.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-import { useDataStore } from "@ogw_front/stores/data";
 import type {
   DisplayItem,
   ItemPropsConfig,
   SelectionConfig,
   TreeItem,
 } from "@ogw_front/composables/virtual_tree";
+import { useDataStore } from "@ogw_front/stores/data";
 
 const dataStore = useDataStore();
 
@@ -21,25 +19,27 @@ interface Props {
 
 const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   "toggle-open": [item: TreeItem];
   "toggle-select": [item: TreeItem];
   "hover-eye-enter": [item: unknown];
   "hover-eye-leave": [item: unknown];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const INDENT_STEP = 10;
 
-function triggerHorizonStackModal(rawItem: unknown) {
+function triggerHorizonStackModal(rawItem: unknown): void {
   globalThis.dispatchEvent(new CustomEvent("open-horizon-stack-modal", { detail: rawItem }));
 }
-const isHorizonStack = computed(() => item.raw.geode_object_type === "HorizonStack3D");
-const isViewable = computed(() => dataStore.isItemViewable(item.raw));
-const showEyeButton = computed(
+const isHorizonStack = computed<boolean>(() => item.raw.geode_object_type === "HorizonStack3D");
+const isViewable = computed<boolean>(() => dataStore.isItemViewable(item.raw));
+const showEyeButton = computed<boolean>(
   () => !isHorizonStack.value && item.raw.title !== "HorizonStack3D" && isViewable.value,
 );
 
-function handleRowClick(event: MouseEvent) {
+function handleRowClick(event: MouseEvent): void {
   if (isHorizonStack.value) {
     if (!item.isLeaf) {
       return;

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

@@ -23,11 +23,13 @@ const {
   borderLeft = true,
 } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   close: [];
   dragstart: [event: DragEvent];
   "update:scrollTop": [value: number];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const scrollContainer = useTemplateRef("scroll-container");
 const treeviewBox = useTemplateRef("treeview-box");
@@ -37,14 +39,14 @@ const { adaptiveStyles } = useAdaptiveStyles(treeviewBox);
 let isApplyingScroll = false;
 let resizeObserver: ResizeObserver | undefined = undefined;
 
-function handleScroll(event: Event) {
+function handleScroll(event: Event): void {
   if (isApplyingScroll) {
     return;
   }
   emit("update:scrollTop", (event.target as HTMLElement).scrollTop);
 }
 
-function applyScrollTop(val: number) {
+function applyScrollTop(val: number): void {
   if (scrollContainer.value) {
     isApplyingScroll = true;
     scrollContainer.value.scrollTop = val;