@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/app/components/Viewer/Grid/3D/FacetsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import Grid3D_Facets from "@ogw_front/assets/viewer_svgs/grid_3d_facets.svg";
-import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Grid/3D/PointsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import Grid3D_Points from "@ogw_front/assets/viewer_svgs/grid_3d_points.svg";
-import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

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

@@ -1,31 +1,50 @@
-<script setup>
+<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";
-
-const { items, opened, selected, active, scrollTop, options } = defineProps({
-  items: { type: Array, required: true },
-  opened: { type: Array, required: false, default: () => [] },
-  selected: { type: Array, required: false, default: () => [] },
-  active: { type: Array, required: false, default: () => [] },
-  scrollTop: { type: Number, required: false, default: 0 },
-  options: { type: Object, required: false, default: () => ({}) },
-});
-
-const treeWrapper = ref(undefined);
-
-const emit = defineEmits([
-  "update:opened",
-  "update:selected",
-  "update:active",
-  "click:item",
-  "update:scrollTop",
-  "hover:enter",
-  "hover:leave",
-  "contextmenu",
-]);
+
+// 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
+  ? Result
+  : Source extends { value: infer Result }
+    ? Result
+    : Source;
+type VirtualTreeProps = UnwrapMaybeRefOrGetter<Parameters<typeof useVirtualTree>[0]>;
+
+interface Props {
+  items: unknown[];
+  opened?: unknown[];
+  selected?: unknown[];
+  active?: unknown[];
+  scrollTop?: number;
+  options?: Record<string, unknown>;
+}
+
+const {
+  items,
+  opened = [],
+  selected = [],
+  active = [],
+  scrollTop = 0,
+  options = {},
+} = defineProps<Props>();
+
+const treeWrapper = ref<HTMLDivElement | undefined>(undefined);
+
+interface Emits {
+  "update:opened": [value: unknown[]];
+  "update:selected": [value: unknown[]];
+  "update:active": [value: unknown[]];
+  "click:item": [item: DisplayItem["raw"]];
+  "update:scrollTop": [value: number];
+  "hover:enter": [payload: { item: DisplayItem }];
+  "hover:leave": [payload: { item: DisplayItem }];
+  contextmenu: [payload: { event: MouseEvent; item: DisplayItem["raw"] }];
+}
+
+const emit = defineEmits<Emits>();
 
 const {
   actualItemProps,
@@ -36,77 +55,102 @@ const {
   isSelected,
   getIndeterminate,
 } = useVirtualTree(
-  computed(() => ({
-    items,
-    opened,
-    selected,
-    active,
-    ...options,
-  })),
-  emit,
+  computed(
+    () =>
+      ({
+        items,
+        opened,
+        selected,
+        active,
+        ...options,
+      }) as unknown as VirtualTreeProps,
+  ),
+  emit as EmitFn,
 );
 
 const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex, getScrollInfo } =
   useTreeScroll(
     computed(() => ({ scrollTop })),
-    emit,
+    emit as EmitFn,
     displayItems,
     actualItemProps,
   );
 
-const focusedIndex = ref(-1);
-const lastActiveIndex = ref(-1);
+const focusedIndex = ref<number>(-1);
+const lastActiveIndex = ref<number>(-1);
+
+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 handleItemClick(item, index, event) {
+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];
-
-    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 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]);
+}
+
+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);
   }
 }
 
 const { handleKeyDown } = useTreeKeyboardNav(
   displayItems,
-  emit,
+  emit as EmitFn,
   scrollToIndex,
   toggleOpen,
   handleItemClick,
@@ -121,8 +165,8 @@ const { handleKeyDown } = useTreeKeyboardNav(
     class="common-tree-view-wrapper"
     tabindex="0"
     @keydown="handleKeyDown"
-    @mousedown="treeWrapper.focus()"
-    @mouseenter="treeWrapper.focus()"
+    @mousedown="treeWrapper?.focus()"
+    @mouseenter="treeWrapper?.focus()"
   >
     <StickyHeader
       v-if="stickyHeader"
@@ -162,11 +206,11 @@ const { handleKeyDown } = useTreeKeyboardNav(
           @mousedown.prevent
           @click="
             handleItemClick(item, index, $event);
-            treeWrapper.focus();
+            treeWrapper?.focus();
           "
           @contextmenu.prevent.stop="
             emit('contextmenu', { event: $event, item: item.raw });
-            treeWrapper.focus();
+            treeWrapper?.focus();
           "
           @mouseenter="emit('hover:enter', { item })"
           @mouseleave="emit('hover:leave', { item })"

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

@@ -1,18 +1,33 @@
-<script setup>
+<script setup lang="ts">
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
 
-const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } = defineProps({
-  search: { type: String, required: true },
-  sortType: { type: String, required: true },
-  filterOptions: { type: Object, required: true },
-  availableFilterOptions: { type: Array, required: true },
-  isCollapsed: { type: Boolean, required: false, default: false },
-});
+interface Props {
+  search: string;
+  sortType: string;
+  filterOptions: Record<string, boolean>;
+  availableFilterOptions: string[];
+  isCollapsed?: boolean;
+}
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  availableFilterOptions,
+  isCollapsed = false,
+} = defineProps<Props>();
+
+interface Emits {
+  "update:search": [value: string];
+  "toggle-sort": [];
+  "collapse-all": [];
+  "expand-all": [];
+}
 
-const emit = defineEmits(["update:search", "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,4 +1,5 @@
-<script setup>
+<script setup lang="ts">
+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";
@@ -7,17 +8,34 @@ import { useResponsiveMiddleTruncate } from "@ogw_front/composables/responsive_m
 const feedbackStore = useFeedbackStore();
 const { copy } = useClipboard();
 
-const { item, isLeaf } = defineProps({
-  item: { type: Object, required: true },
-  isLeaf: { type: Boolean, required: false, default: undefined },
-});
+interface Props {
+  item: DisplayItem;
+  isLeaf?: boolean;
+}
+
+const { item, isLeaf } = defineProps<Props>();
+
+interface Emits {
+  contextmenu: [event: MouseEvent];
+  mouseenter: [];
+  mouseleave: [];
+}
 
-const emit = defineEmits(["contextmenu", "mouseenter", "mouseleave"]);
+const emit = defineEmits<Emits>();
 
 const labelContainer = useTemplateRef("label-container");
 const { width: containerWidth } = useElementSize(labelContainer);
 
-const actualItem = computed(() => item.raw || item);
+// The item prop can be either a DisplayItem wrapper (with a `.raw` domain object) or the domain object itself when this component is used outside CommonTreeView's slot machinery; the domain object always carries an id/title at runtime.
+interface LabeledItem {
+  id: string;
+  title?: string;
+  is_active?: boolean;
+  category?: string;
+  children?: unknown[];
+}
+
+const actualItem = computed<LabeledItem>(() => (item.raw || item) as unknown as LabeledItem);
 
 const TOOLTIP_NAME_MAX_LENGTH = 40;
 const TOOLTIP_NAME_START_CHARS = 10;
@@ -25,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,
@@ -34,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, label) {
+async function copyToClipboard(text: string, label: string): Promise<void> {
   await copy(text);
   feedbackStore.add_success(`${label} copied to clipboard`);
 }
@@ -77,29 +98,33 @@ async function copyToClipboard(text, label) {
       <div class="d-flex flex-column ga-1">
         <span class="text-caption d-flex align-center">
           <strong class="text-white mr-1">ID:</strong>
-          <span>{{ actualItem.id }}</span>
+          <span data-testid="tooltipIdValue">{{ actualItem.id }}</span>
           <v-btn
             data-testid="copyIdBtn"
-            icon="mdi-content-copy"
+            icon
             variant="text"
-            size="x-small"
             density="compact"
             class="ml-1 text-white"
+            style="width: 18px; height: 18px; min-width: 18px; min-height: 18px"
             @click.stop="copyToClipboard(actualItem.id, 'ID')"
-          />
+          >
+            <v-icon size="12">mdi-content-copy</v-icon>
+          </v-btn>
         </span>
         <span v-if="actualItem.title" class="text-caption d-flex align-center">
           <strong class="text-white mr-1">Name:</strong>
           <span>{{ tooltipTitle }}</span>
           <v-btn
             data-testid="copyNameBtn"
-            icon="mdi-content-copy"
+            icon
             variant="text"
-            size="x-small"
             density="compact"
             class="ml-1 text-white"
+            style="width: 18px; height: 18px; min-width: 18px; min-height: 18px"
             @click.stop="copyToClipboard(actualItem.title, 'Name')"
-          />
+          >
+            <v-icon size="12">mdi-content-copy</v-icon>
+          </v-btn>
         </span>
         <span v-if="actualItem.is_active !== undefined" class="text-caption d-flex align-center">
           <strong class="text-white mr-1">Status:</strong>

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

@@ -1,15 +1,28 @@
-<script setup>
+<script setup lang="ts">
+import type {
+  DisplayItem,
+  ItemPropsConfig,
+  SelectionConfig,
+  TreeItem,
+} from "@ogw_front/composables/virtual_tree";
 import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
 
-const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
-  item: { type: Object, required: true },
-  itemProps: { type: Object, required: true },
-  selection: { type: Object, required: true },
-  isSelected: { type: Function, required: true },
-  getIndeterminate: { type: Function, required: true },
-});
+interface Props {
+  item: DisplayItem;
+  itemProps: ItemPropsConfig;
+  selection: SelectionConfig;
+  isSelected: (item: TreeItem) => boolean;
+  getIndeterminate: (item: TreeItem) => boolean;
+}
+
+const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps<Props>();
+
+interface Emits {
+  "toggle-open": [item: TreeItem];
+  "toggle-select": [item: TreeItem];
+}
 
-const emit = defineEmits(["toggle-open", "toggle-select"]);
+const emit = defineEmits<Emits>();
 </script>
 
 <template>

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

@@ -1,30 +1,45 @@
-<script setup>
+<script setup lang="ts">
+import type {
+  DisplayItem,
+  ItemPropsConfig,
+  SelectionConfig,
+  TreeItem,
+} from "@ogw_front/composables/virtual_tree";
 import { useDataStore } from "@ogw_front/stores/data";
 
 const dataStore = useDataStore();
 
-const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
-  item: { type: Object, required: true },
-  itemProps: { type: Object, required: true },
-  selection: { type: Object, required: true },
-  isSelected: { type: Function, required: true },
-  getIndeterminate: { type: Function, required: true },
-});
+interface Props {
+  item: DisplayItem;
+  itemProps: ItemPropsConfig;
+  selection: SelectionConfig;
+  isSelected: (item: TreeItem) => boolean;
+  getIndeterminate: (item: TreeItem) => boolean;
+}
+
+const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps<Props>();
+
+interface Emits {
+  "toggle-open": [item: TreeItem];
+  "toggle-select": [item: TreeItem];
+  "hover-eye-enter": [item: unknown];
+  "hover-eye-leave": [item: unknown];
+}
 
-const emit = defineEmits(["toggle-open", "toggle-select", "hover-eye-enter", "hover-eye-leave"]);
+const emit = defineEmits<Emits>();
 
 const INDENT_STEP = 10;
 
-function triggerHorizonStackModal(rawItem) {
+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) {
+function handleRowClick(event: MouseEvent): void {
   if (isHorizonStack.value) {
     if (!item.isLeaf) {
       return;

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

@@ -1,18 +1,35 @@
-<script setup>
+<script setup lang="ts">
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
-const { title, closable, icon, mdiIcon, scrollTop, borderRadius } = defineProps({
-  title: { type: String, required: true },
-  closable: { type: Boolean, required: false, default: false },
-  icon: { type: String, required: false, default: "" },
-  mdiIcon: { type: String, required: false, default: "" },
-  scrollTop: { type: Number, required: false, default: 0 },
-  borderRadius: { type: String, required: false, default: "16px" },
-  borderLeft: { type: Boolean, required: false, default: true },
-});
-const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
+interface Props {
+  title: string;
+  closable?: boolean;
+  icon?: string;
+  mdiIcon?: string;
+  scrollTop?: number;
+  borderRadius?: string;
+  borderLeft?: boolean;
+}
+
+const {
+  title,
+  closable = false,
+  icon = "",
+  mdiIcon = "",
+  scrollTop = 0,
+  borderRadius = "16px",
+  borderLeft = true,
+} = defineProps<Props>();
+
+interface Emits {
+  close: [];
+  dragstart: [event: DragEvent];
+  "update:scrollTop": [value: number];
+}
+
+const emit = defineEmits<Emits>();
 
 const scrollContainer = useTemplateRef("scroll-container");
 const treeviewBox = useTemplateRef("treeview-box");
@@ -20,16 +37,16 @@ const treeviewBox = useTemplateRef("treeview-box");
 const { adaptiveStyles } = useAdaptiveStyles(treeviewBox);
 
 let isApplyingScroll = false;
-let resizeObserver = undefined;
+let resizeObserver: ResizeObserver | undefined = undefined;
 
-function handleScroll(event) {
+function handleScroll(event: Event): void {
   if (isApplyingScroll) {
     return;
   }
-  emit("update:scrollTop", event.target.scrollTop);
+  emit("update:scrollTop", (event.target as HTMLElement).scrollTop);
 }
 
-function applyScrollTop(val) {
+function applyScrollTop(val: number): void {
   if (scrollContainer.value) {
     isApplyingScroll = true;
     scrollContainer.value.scrollTop = val;