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

package/app/components/Viewer/ObjectTree/Views/{ModelCollections.vue → ModelTree.vue}

@@ -1,37 +1,74 @@
-<script setup>
+<script setup lang="ts">
 import { sortAndFormatItems, useTreeFilter } from "@ogw_front/composables/tree_filter";
 import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
+import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import FetchingData from "@ogw_front/components/FetchingData.vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useModelCollections } from "@ogw_front/composables/model_collections";
+import { useModelComponents } from "@ogw_front/composables/model_components";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const { id, viewId } = defineProps({
-  id: { type: String, required: true },
-  viewId: { type: String, required: false, default: undefined },
-});
+interface Props {
+  id: string;
+  viewId?: string;
+  viewType?: string;
+}
+
+const { id, viewId = undefined, viewType = "model_components" } = defineProps<Props>();
 const actualViewId = viewId || id;
+
+interface CollectionTreeItem {
+  raw?: CollectionTreeItem;
+  id: string;
+  category?: string;
+  children?: CollectionTreeItem[];
+  viewer_id?: number;
+  title?: string;
+}
+
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 const hybridViewerStore = useHybridViewerStore();
-const emit = defineEmits(["show-menu"]);
+interface Emits {
+  "show-menu": [
+    payload: {
+      event: unknown;
+      itemId: string;
+      context_type: "model_component" | "model_component_type";
+      modelId: string;
+      modelComponentType?: string;
+      targetComponentIds?: string[];
+    },
+  ];
+}
+
+const emit = defineEmits<Emits>();
 
 const treeviewStore = useTreeviewStore();
+
+const isCollections = computed(() => viewType === "model_collections");
+
+const composable = isCollections.value ? useModelCollections(id) : useModelComponents(id);
 const {
   items: rawItems,
-  collectionsCache: componentsCache,
   localCategories,
   selection: visibleComponents,
   updateVisibility,
-} = useModelCollections(id);
+} = composable;
+
+const cache = computed(
+  () =>
+    ("componentsCache" in composable ? composable.componentsCache.value : undefined) ??
+    ("collectionsCache" in composable ? composable.collectionsCache.value : undefined),
+);
 
 const currentView = computed(() =>
   treeviewStore.opened_views.find((view) => view.id === actualViewId),
 );
 
-const opened = computed({
+const opened = computed<string[]>({
   get: () => currentView.value?.opened || [],
   set: (val) => treeviewStore.setOpened(actualViewId, val),
 });
@@ -47,20 +84,22 @@ const {
   applySearchFilter,
 } = useTreeFilter(localCategories);
 
-function onUpdateSelection(newSelection) {
+function onUpdateSelection(newSelection: string[]): void {
   const finalSelection = applySearchFilter(newSelection, visibleComponents.value);
-  updateVisibility(finalSelection);
+  updateVisibility(finalSelection as string[]);
 }
 
-const visibleSelection = computed(() => applySearchFilter(visibleComponents.value, []));
+const visibleSelection = computed<string[]>(
+  () => applySearchFilter(visibleComponents.value, []) as string[],
+);
 
-const itemsForTreeView = computed(() => {
-  if (search.value && componentsCache.value) {
+const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
+  if (search.value && cache.value) {
     const query = search.value.toLowerCase();
-    const result = [];
-    for (const type of Object.keys(componentsCache.value)) {
-      const matches = componentsCache.value[type].filter(
-        (component) =>
+    const result: CollectionTreeItem[] = [];
+    for (const type of Object.keys(cache.value)) {
+      const matches = (cache.value[type] ?? []).filter(
+        (component: { title: string; id: string }) =>
           component.title.toLowerCase().includes(query) ||
           component.id.toLowerCase().includes(query),
       );
@@ -68,45 +107,60 @@ const itemsForTreeView = computed(() => {
         result.push({
           id: type,
           title: `${type}s (${matches.length})`,
-          children: sortAndFormatItems(matches, sortType.value),
+          children: sortAndFormatItems(matches, sortType.value) as unknown as CollectionTreeItem[],
         });
       }
     }
     return result;
   }
 
-  const result = [];
+  const result: CollectionTreeItem[] = [];
   for (const category of filteredCategories.value) {
+    const categoryId = category.id as string;
     result.push({
       ...category,
-      children: sortAndFormatItems(componentsCache.value?.[category.id], sortType.value),
+      id: categoryId,
+      children: sortAndFormatItems(
+        cache.value?.[categoryId],
+        sortType.value,
+      ) as unknown as CollectionTreeItem[],
     });
   }
   return result;
 });
 
-function showContextMenu(event, item) {
+function showContextMenu(event: unknown, item: CollectionTreeItem): void {
   const actualItem = item.raw || item;
+  const typeId = actualItem.category || actualItem.id;
+  const typeItem = itemsForTreeView.value.find((type) => type.id === typeId);
+  const targetComponentIds = typeItem?.children?.map((child) => child.id);
   emit("show-menu", {
     event,
     itemId: actualItem.category ? actualItem.id : id,
     context_type: actualItem.category ? "model_component" : "model_component_type",
     modelId: id,
     modelComponentType: actualItem.category ? undefined : actualItem.id,
+    targetComponentIds,
   });
 }
 
-function extractIds(node) {
+function extractIds(node: CollectionTreeItem): number[] {
   if (node.children) {
     return node.children.flatMap((child) => extractIds(child));
   }
   if (Number.isInteger(node.viewer_id)) {
-    return [node.viewer_id];
+    return [node.viewer_id as number];
   }
   return [];
 }
 
-function handleHoverEnter({ item, immediate = false }) {
+function handleHoverEnter({
+  item,
+  immediate = false,
+}: {
+  item: CollectionTreeItem;
+  immediate?: boolean;
+}): void {
   const actualItem = item.raw || item;
 
   if (!actualItem.category && (!actualItem.children || actualItem.children.length === 0)) {
@@ -114,17 +168,16 @@ function handleHoverEnter({ item, immediate = false }) {
   }
 
   const viewerIdsToHover = extractIds(actualItem);
-
   onHoverEnter(id, () => viewerIdsToHover, "model", immediate);
 }
 
-function handleHoverLeave() {
+function handleHoverLeave(): void {
   onHoverLeave(id);
 }
 
-function expandAll() {
-  const allIds = [];
-  function traverse(itemsList) {
+function expandAll(): void {
+  const allIds: string[] = [];
+  function traverse(itemsList: CollectionTreeItem[]): void {
     for (const item of itemsList) {
       if (item.children && item.children.length > 0) {
         allIds.push(item.id);
@@ -136,10 +189,14 @@ function expandAll() {
   opened.value = allIds;
 }
 
-function getLeafViewerIds(item) {
+function getLeafViewerIds(item: CollectionTreeItem): number[] {
   const actualItem = item.raw || item;
   return extractIds(actualItem);
 }
+
+function getLeafViewerIdsForFocus(item: CollectionTreeItem): string[] {
+  return getLeafViewerIds(item) as unknown as string[];
+}
 </script>
 
 <template>
@@ -169,31 +226,36 @@ function getLeafViewerIds(item) {
       }"
       :scroll-top="currentView?.scrollTop || 0"
       class="transparent-treeview virtual-tree-height"
-      @update:selected="onUpdateSelection"
-      @click:item="onUpdateSelection([$event.id, ...visibleComponents])"
+      @update:selected="(val) => onUpdateSelection(val as string[])"
+      @click:item="onUpdateSelection([$event.id as string, ...visibleComponents])"
       @update:scroll-top="treeviewStore.setScrollTop(actualViewId, $event)"
-      @hover:enter="handleHoverEnter"
+      @hover:enter="({ item }) => handleHoverEnter({ item: item as unknown as CollectionTreeItem })"
       @hover:leave="handleHoverLeave"
-      @contextmenu="showContextMenu($event.event, $event.item)"
+      @contextmenu="showContextMenu($event.event, $event.item as unknown as CollectionTreeItem)"
     >
       <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel
-          :item="item"
+          :item="item as unknown as DisplayItem"
           :is-leaf="isLeaf"
           show-tooltip
           class="text-body-1"
-          @contextmenu="showContextMenu($event, item)"
+          @contextmenu="showContextMenu($event, item as unknown as CollectionTreeItem)"
         />
       </template>
 
       <template #append="{ item }">
         <v-btn
-          v-if="getLeafViewerIds(item).length > 0"
+          v-if="getLeafViewerIds(item as unknown as CollectionTreeItem).length > 0"
           icon="mdi-target"
           size="medium"
           variant="text"
           v-tooltip="'Focus camera on object'"
-          @click.stop="hybridViewerStore.focusCameraOnObject(id, getLeafViewerIds(item))"
+          @click.stop="
+            hybridViewerStore.focusCameraOnObject(
+              id,
+              getLeafViewerIdsForFocus(item as unknown as CollectionTreeItem),
+            )
+          "
         />
       </template>
     </CommonTreeView>

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

@@ -1,17 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import AttributeRangeSelector from "./AttributeRangeSelector.vue";
 import ColorMapPicker from "./ColorMapPicker.vue";
 
-const emit = defineEmits(["reset"]);
+interface Emits {
+  reset: [];
+}
+
+const emit = defineEmits<Emits>();
 
-const minimum = defineModel("minimum", { type: Number });
-const maximum = defineModel("maximum", { type: Number });
-const colorMap = defineModel("colorMap", { type: String });
+const minimum = defineModel<number>("minimum");
+const maximum = defineModel<number>("maximum");
+const colorMap = defineModel<string>("colorMap");
 </script>
 
 <template>
   <div class="attribute-colorbar mt-3">
-    <ColorMapPicker v-model:selected-preset-name="colorMap" :min="minimum" :max="maximum" />
+    <ColorMapPicker
+      v-model:selected-preset-name="colorMap"
+      :min="minimum ?? 0"
+      :max="maximum ?? 0"
+    />
     <AttributeRangeSelector
       v-model:minimum="minimum"
       v-model:maximum="maximum"

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

@@ -1,8 +1,12 @@
-<script setup>
-const emit = defineEmits(["reset"]);
+<script setup lang="ts">
+interface Emits {
+  reset: [];
+}
 
-const minimum = defineModel("minimum", { type: Number });
-const maximum = defineModel("maximum", { type: Number });
+const emit = defineEmits<Emits>();
+
+const minimum = defineModel<number>("minimum");
+const maximum = defineModel<number>("maximum");
 </script>
 
 <template>

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

@@ -1,5 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import { getAttributeRange } from "@ogw_front/utils/attributes";
@@ -7,51 +8,74 @@ import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
-const attributeName = defineModel("attributeName", { type: String });
-const attributeItem = defineModel("attributeItem", { type: Number });
-const attributeRange = defineModel("attributeRange", { type: Array });
-const attributeColorMap = defineModel("attributeColorMap", { type: String });
-const attributeNoDataColor = defineModel("attributeNoDataColor", { type: Object });
+const attributeName = defineModel<string>("attributeName");
+const attributeItem = defineModel<number>("attributeItem");
+const attributeRange = defineModel<(number | undefined)[]>("attributeRange");
+const attributeColorMap = defineModel<string>("attributeColorMap");
+const attributeNoDataColor = defineModel<typeof DEFAULT_NO_DATA_COLOR>("attributeNoDataColor");
 
-const { id, componentIds, schema } = defineProps({
-  id: { type: String, required: true },
-  componentIds: { type: Array, default: undefined },
-  schema: { type: Object, required: true },
-});
+interface Props {
+  id: string;
+  componentIds?: string[];
+  schema: JsonRpcSchema;
+}
+
+const { id, componentIds = undefined, schema } = defineProps<Props>();
+
+interface AttributeInfo {
+  attribute_name: string;
+  nb_items: number;
+  no_data?: boolean;
+  [key: string]: unknown;
+}
 
-const attributes = ref([]);
+const attributes = ref<AttributeInfo[]>([]);
 
-const currentAttribute = computed(() =>
+const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
 );
-const cssNoDataColor = computed(() => {
+const cssNoDataColor = computed<string>(() => {
   const { red, green, blue, alpha } = attributeNoDataColor.value ?? DEFAULT_NO_DATA_COLOR;
   return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 });
-const rangeMin = computed({
-  get: () => (attributeRange.value ? attributeRange.value[0] : undefined),
-  set: (val) => {
-    const currentMax = attributeRange.value ? attributeRange.value[1] : undefined;
+const rangeMin = computed<number | undefined>({
+  get: () => {
+    const range = attributeRange.value as number[] | undefined;
+    return range ? range[0] : undefined;
+  },
+  set: (val: number | undefined) => {
+    if (val === undefined) {
+      return;
+    }
+    const range = attributeRange.value as number[] | undefined;
+    const currentMax = range ? range[1] : undefined;
     let newMin = val;
-    if (currentMax !== undefined && val > currentMax) {
+    if (typeof currentMax === "number" && val > currentMax) {
       newMin = currentMax;
     }
     attributeRange.value = [newMin, currentMax];
   },
 });
-const rangeMax = computed({
-  get: () => (attributeRange.value ? attributeRange.value[1] : undefined),
-  set: (val) => {
-    const currentMin = attributeRange.value ? attributeRange.value[0] : undefined;
+const rangeMax = computed<number | undefined>({
+  get: () => {
+    const range = attributeRange.value as number[] | undefined;
+    return range ? range[1] : undefined;
+  },
+  set: (val: number | undefined) => {
+    if (val === undefined) {
+      return;
+    }
+    const range = attributeRange.value as number[] | undefined;
+    const currentMin = range ? range[0] : undefined;
     let newMax = val;
-    if (currentMin !== undefined && val < currentMin) {
+    if (typeof currentMin === "number" && val < currentMin) {
       newMax = currentMin;
     }
     attributeRange.value = [currentMin, newMax];
   },
 });
 
-const componentItems = computed(() => {
+const componentItems = computed<{ title: string; value: number }[]>(() => {
   if (!currentAttribute.value) {
     return [];
   }
@@ -61,25 +85,32 @@ const componentItems = computed(() => {
   }));
 });
 
-function resetRange() {
+function resetRange(): void {
   if (currentAttribute.value) {
     const comp = attributeItem.value ?? 0;
-    const { min, max } = getAttributeRange(currentAttribute.value, comp);
+    // GetAttributeRange's parameter type (AttributeRangeSource) isn't exported;
+    // AttributeInfo's index signature covers its optional min/max fields at
+    // Runtime (they come from the same backend attribute response shape).
+    const { min, max } = getAttributeRange(
+      currentAttribute.value as unknown as Parameters<typeof getAttributeRange>[0],
+      comp,
+    );
     attributeRange.value = [min, max];
   }
 }
 
-function hasSelectedComponent(components) {
+function hasSelectedComponent(components: unknown): boolean {
   return Array.isArray(components) && components.length > 0;
 }
 
-function getAttributes() {
-  const requiresComponent = schema.properties.component_ids !== undefined;
+function getAttributes(): void {
+  const schemaProperties = schema.properties as Record<string, unknown> | undefined;
+  const requiresComponent = schemaProperties?.component_ids !== undefined;
   if (requiresComponent && !hasSelectedComponent(componentIds)) {
     return;
   }
 
-  const params = { id };
+  const params: { id: string; component_ids?: unknown } = { id };
   if (requiresComponent) {
     params.component_ids = componentIds;
   }
@@ -87,8 +118,8 @@ function getAttributes() {
   backStore.request(
     { schema, params },
     {
-      response_function: (response) => {
-        attributes.value = response.attributes;
+      response_function: (response: unknown) => {
+        attributes.value = (response as { attributes: AttributeInfo[] }).attributes;
       },
     },
   );

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

@@ -1,38 +1,59 @@
-<script setup>
+<script setup lang="ts">
 import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { drawCanvasForPreset } from "@ogw_front/utils/colormap";
 
 const CHUNK_SIZE = 5;
 
-const { presets, selectedPresetName } = defineProps({
-  presets: { type: Array, required: true },
-  selectedPresetName: { type: String, default: "" },
-});
+interface ColorMapPreset {
+  Name: string;
+  Children?: ColorMapPreset[];
+  [key: string]: unknown;
+}
+
+interface Props {
+  presets: ColorMapPreset[];
+  selectedPresetName?: string;
+}
+
+const { presets, selectedPresetName = "" } = defineProps<Props>();
 
-const emit = defineEmits(["select"]);
+interface Emits {
+  select: [preset: ColorMapPreset];
+}
+
+const emit = defineEmits<Emits>();
 
-const filterText = ref("");
-const canvasRefs = ref({});
-const loading = ref(true);
-const renderJobId = ref(0);
-const openedGroups = ref([]);
+interface CanvasRefEntry {
+  element: HTMLCanvasElement;
+  presetName: string;
+}
 
-function setCanvasRef(presetName, element, id) {
+const filterText = ref<string>("");
+const canvasRefs = ref<Map<string, CanvasRefEntry>>(new Map());
+const loading = ref<boolean>(true);
+const renderJobId = ref<number>(0);
+const openedGroups = ref<string[]>([]);
+
+function setCanvasRef(presetName: string, element: Element | null, id: string): void {
   if (element) {
-    canvasRefs.value[id] = { element, presetName };
+    canvasRefs.value.set(id, {
+      element: element as HTMLCanvasElement,
+      presetName,
+    });
   } else {
-    delete canvasRefs.value[id];
+    canvasRefs.value.delete(id);
   }
 }
 
-const filteredPresets = computed(() => {
+const filteredPresets = computed<ColorMapPreset[]>(() => {
+  const allPresets = presets;
   if (!filterText.value) {
-    return presets;
+    return allPresets;
   }
   const term = filterText.value.toLowerCase();
 
-  const result = [];
-  for (const item of presets) {
+  const result: ColorMapPreset[] = [];
+  for (const item of allPresets) {
     if (item.Children) {
       const children = item.Children.filter((child) => child.Name.toLowerCase().includes(term));
       if (children.length > 0) {
@@ -55,7 +76,7 @@ watch(filterText, (newFilterText) => {
   }
 });
 
-function processChunk(entries, index, jobId) {
+function processChunk(entries: [string, CanvasRefEntry][], index: number, jobId: number): void {
   if (jobId !== renderJobId.value || index >= entries.length) {
     if (jobId === renderJobId.value) {
       loading.value = false;
@@ -65,20 +86,24 @@ function processChunk(entries, index, jobId) {
 
   const end = Math.min(index + CHUNK_SIZE, entries.length);
   for (let i = index; i < end; i += 1) {
-    const [unusedKey, refValue] = entries[i];
+    const entry = entries[i];
+    if (!entry) {
+      continue;
+    }
+    const [, refValue] = entry;
     drawCanvasForPreset(refValue.presetName, refValue.element);
   }
   const ZERO = 0;
   setTimeout(() => processChunk(entries, end, jobId), ZERO);
 }
 
-function drawAllCanvases() {
+function drawAllCanvases(): void {
   renderJobId.value += 1;
   const jobId = renderJobId.value;
   loading.value = true;
   nextTick(() => {
     const WAIT_MS = 50;
-    setTimeout(() => processChunk(Object.entries(canvasRefs.value), 0, jobId), WAIT_MS);
+    setTimeout(() => processChunk([...canvasRefs.value.entries()], 0, jobId), WAIT_MS);
   });
 }
 
@@ -139,7 +164,10 @@ watch(filteredPresets, drawAllCanvases);
             <div class="d-flex flex-column py-1">
               <span class="text-caption text-grey-lighten-1 mb-1">{{ child.Name }}</span>
               <canvas
-                :ref="(element) => setCanvasRef(child.Name, element, `g-${itemIdx}-${childIdx}`)"
+                :ref="
+                  (element: Element | null) =>
+                    setCanvasRef(child.Name, element, `g-${itemIdx}-${childIdx}`)
+                "
                 width="200"
                 height="18"
                 class="w-100 rounded-xs border-thin"
@@ -159,7 +187,7 @@ watch(filteredPresets, drawAllCanvases);
           <div class="d-flex flex-column py-1">
             <span class="text-caption text-grey-lighten-1 mb-1">{{ item.Name }}</span>
             <canvas
-              :ref="(element) => setCanvasRef(item.Name, element, `s-${itemIdx}`)"
+              :ref="(element: Element | null) => setCanvasRef(item.Name, element, `s-${itemIdx}`)"
               width="200"
               height="18"
               class="w-100 rounded-xs border-thin"

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

@@ -1,31 +1,35 @@
-<script setup>
+<script setup lang="ts">
 import { drawCanvasForPreset, getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import ColorMapList from "./ColorMapList.vue";
 import GlassCard from "@ogw_front/components/GlassCard.vue";
 
-const { max, min } = defineProps({
-  min: { type: Number, required: true },
-  max: { type: Number, required: true },
-});
+interface Props {
+  min: number;
+  max: number;
+}
 
-const selectedPresetName = defineModel("selectedPresetName", { type: String, default: "batlow" });
+const { max, min } = defineProps<Props>();
+
+const selectedPresetName = defineModel<string>("selectedPresetName", {
+  default: "batlow",
+});
 
-const menuOpen = ref(false);
-const lutCanvas = ref();
+const menuOpen = ref<boolean>(false);
+const lutCanvas = ref<HTMLCanvasElement | undefined>(undefined);
 
 const presets = computed(() => getPresetsWithCurrentAtTop(selectedPresetName.value));
 
-function drawLutCanvas() {
+function drawLutCanvas(): void {
   drawCanvasForPreset(selectedPresetName.value, lutCanvas.value);
 }
 
-function onSelectPreset(preset) {
+function onSelectPreset(preset: { Name: string }): void {
   selectedPresetName.value = preset.Name;
   menuOpen.value = false;
 }
 
 onMounted(() => nextTick(drawLutCanvas));
-watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
+watch([lutCanvas, selectedPresetName, (): number => min, (): number => max], drawLutCanvas);
 </script>
 
 <template>