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

package/app/composables/{project_manager.js → project_manager.ts}

@@ -2,18 +2,50 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.jso
 import fileDownload from "js-file-download";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import { type DataStyleSnapshot, useDataStyleStore } from "@ogw_front/stores/data_style";
+import { type NewDataItem, useDataStore } from "@ogw_front/stores/data";
+import { type TreeviewSnapshot, useTreeviewStore } from "@ogw_front/stores/treeview";
+import type { CameraSnapshot } from "@ogw_internal/stores/hybrid_viewer/camera";
+import type { ModelComponentRecord } from "@ogw_front/stores/data_helpers/mesh.js";
+import type { ModelComponentRelationRecord } from "@ogw_front/stores/data.js";
 import { fetchRaw } from "@ogw_shared/utils/fetch_raw";
 import { importWorkflowFromSnapshot } from "@ogw_front/utils/import_workflow";
 import { useAppStore } from "@ogw_front/stores/app";
 import { useBackStore } from "@ogw_front/stores/back";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-async function exportProject() {
+interface ProjectDataSnapshot {
+  items: NewDataItem[];
+  modelComponents: ModelComponentRecord[];
+  modelComponentsRelations: ModelComponentRelationRecord[];
+}
+
+interface ProjectSnapshot {
+  treeview?: TreeviewSnapshot;
+  data?: ProjectDataSnapshot;
+  hybridViewer?: CameraSnapshot;
+  dataStyle?: DataStyleSnapshot;
+}
+
+// The backend response is an untyped network payload; this is the one place its shape is asserted.
+function isImportSnapshotResponse(value: unknown): value is { snapshot?: ProjectSnapshot } {
+  return typeof value === "object" && value !== null;
+}
+
+function isFileDownloadData(
+  value: unknown,
+): value is string | ArrayBuffer | ArrayBufferView | Blob {
+  return (
+    typeof value === "string" ||
+    value instanceof ArrayBuffer ||
+    ArrayBuffer.isView(value) ||
+    value instanceof Blob
+  );
+}
+
+async function exportProject(): Promise<{ result: unknown }> {
   console.log("[export triggered]");
   const appStore = useAppStore();
   const backStore = useBackStore();
@@ -29,12 +61,39 @@ async function exportProject() {
     baseURL: backStore.base_url,
   });
 
+  if (!isFileDownloadData(result)) {
+    throw new Error("Unexpected export_project response type");
+  }
   fileDownload(result, defaultName);
   feedbackStore.add_success("Project exported successfully");
   return { result };
 }
 
-async function importProject(file) {
+async function releaseViewerDatabase(
+  client: ReturnType<typeof useViewerStore>["client"],
+): Promise<void> {
+  if (
+    client !== undefined &&
+    client.getConnection !== undefined &&
+    client.getConnection().getSession !== undefined
+  ) {
+    await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
+  }
+}
+
+async function importProjectToViewer(
+  client: ReturnType<typeof useViewerStore>["client"],
+): Promise<void> {
+  if (
+    client !== undefined &&
+    client.getConnection !== undefined &&
+    client.getConnection().getSession !== undefined
+  ) {
+    await client.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
+  }
+}
+
+async function importProject(file: File): Promise<void> {
   const backStore = useBackStore();
   const dataStyleStore = useDataStyleStore();
   const viewerStore = useViewerStore();
@@ -44,21 +103,18 @@ async function importProject(file) {
 
   await viewerStore.ws_connect();
 
-  const { client } = viewerStore;
-  if (client && client.getConnection && client.getConnection().getSession) {
-    await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
-  }
+  await releaseViewerDatabase(viewerStore.client);
   const resetVisualizationSchema = viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization;
   const timeout = undefined;
   await viewerStore.request({ schema: resetVisualizationSchema, timeout });
 
   treeviewStore.clear();
-  dataStore.clear();
+  await dataStore.clear();
   hybridViewerStore.clear();
 
   const importProjectSchema = back_schemas.opengeodeweb_back.import_project;
   const form = new FormData();
-  const originalFileName = file && file.name ? file.name : "project.vease";
+  const originalFileName = file.name.length > 0 ? file.name : "project.vease";
   if (!originalFileName.toLowerCase().endsWith(".vease")) {
     throw new Error("Uploaded file must be a .vease");
   }
@@ -70,23 +126,24 @@ async function importProject(file) {
     method: importProjectSchema.methods[0],
     baseURL: backStore.base_url,
   });
-  const snapshot = result && result.snapshot ? result.snapshot : {};
+  const snapshot = (isImportSnapshotResponse(result) ? result.snapshot : undefined) ?? {};
 
   treeviewStore.isImporting = true;
 
-  const { client: client2 } = viewerStore;
-  if (client2 && client2.getConnection && client2.getConnection().getSession) {
-    await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
-  }
+  await importProjectToViewer(viewerStore.client);
 
-  await treeviewStore.importStores(snapshot.treeview);
-  await dataStore.importStores(snapshot.data);
+  treeviewStore.importStores(snapshot.treeview);
+  if (snapshot.data !== undefined) {
+    await dataStore.importStores(snapshot.data);
+  }
   await hybridViewerStore.initHybridViewer();
 
-  const items = snapshot?.data?.items || [];
+  const items = snapshot.data?.items ?? [];
   await importWorkflowFromSnapshot(items);
   await hybridViewerStore.importStores(snapshot.hybridViewer);
-  await dataStyleStore.importStores(snapshot.dataStyle);
+  if (snapshot.dataStyle !== undefined) {
+    await dataStyleStore.importStores(snapshot.dataStyle);
+  }
   await dataStyleStore.applyAllStylesFromState();
 
   treeviewStore.finalizeImportSelection();

package/app/composables/responsive_middle_truncate.ts

@@ -0,0 +1,48 @@
+import { middleTruncate } from "@ogw_front/utils/string";
+
+const UUID_END_CHARS = 12;
+const ELLIPSIS_LENGTH = 3;
+const MIN_START_CHARS = 4;
+const DEFAULT_ESTIMATED_CHAR_WIDTH = 8.5;
+
+interface ResponsiveMiddleTruncateOptions {
+  readonly estimatedCharWidth?: number;
+  readonly uuidEndChars?: number;
+  readonly ellipsisLength?: number;
+  readonly minStartChars?: number;
+}
+
+// Same shape as Vue's MaybeRefOrGetter<T>, kept as a local alias for readability at call sites.
+type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
+
+export function useResponsiveMiddleTruncate(
+  textRef: ReadonlyMaybeRefOrGetter<string | undefined | null>,
+  containerWidthRef: ReadonlyMaybeRefOrGetter<number | undefined>,
+  options: ResponsiveMiddleTruncateOptions = {},
+): ComputedRef<string> {
+  const {
+    estimatedCharWidth = DEFAULT_ESTIMATED_CHAR_WIDTH,
+    uuidEndChars = UUID_END_CHARS,
+    ellipsisLength = ELLIPSIS_LENGTH,
+    minStartChars = MIN_START_CHARS,
+  } = options;
+
+  return computed(() => {
+    const text = toValue(textRef);
+    if (text === undefined || text === null || text === "") {
+      return "";
+    }
+
+    const width = toValue(containerWidthRef) ?? 0;
+    const maxChars = Math.floor(width / estimatedCharWidth);
+
+    if (maxChars <= 0 || text.length <= maxChars) {
+      return text;
+    }
+
+    const endChars = Math.min(uuidEndChars, Math.floor(maxChars / ellipsisLength));
+    const startChars = Math.max(minStartChars, maxChars - endChars - ellipsisLength);
+
+    return middleTruncate(text, maxChars, startChars, endChars) ?? "";
+  });
+}

package/app/composables/{run_function_when_microservices_connected.js → run_function_when_microservices_connected.ts}

@@ -1,6 +1,6 @@
 import { useInfraStore } from "@ogw_front/stores/infra";
 
-export function runFunctionWhenMicroservicesConnected(functionToRun) {
+export function runFunctionWhenMicroservicesConnected(functionToRun: () => void): void {
   const infraStore = useInfraStore();
   const { microservices_connected } = storeToRefs(infraStore);
   console.log("inside microservices_connected", microservices_connected.value);

package/app/composables/stepper_tree.ts

@@ -0,0 +1,79 @@
+interface StepperTreeApi {
+  state: Record<string, unknown>;
+  update_values: (keys_values_object: Record<string, unknown>) => void;
+  increment_step: () => void;
+  decrement_step: () => void;
+  reset_values: () => void;
+}
+
+function isUnknownArray(value: unknown): value is unknown[] {
+  return Array.isArray(value);
+}
+
+function get_current_step_index(state: Record<string, unknown>): number {
+  const value = state.current_step_index;
+  return typeof value === "number" ? value : 0;
+}
+
+function build_initial_state_unref(
+  initial_state: Record<string, unknown>,
+): Record<string, unknown> {
+  const initial_state_unref: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(initial_state)) {
+    const unref_val: unknown = unref(value);
+    initial_state_unref[key] = isUnknownArray(unref_val) ? [...unref_val] : unref_val;
+  }
+  return initial_state_unref;
+}
+
+export function useStepperTree(
+  steps: readonly unknown[],
+  initial_state: Record<string, unknown> = {},
+): StepperTreeApi {
+  const initial_state_unref = build_initial_state_unref(initial_state);
+  const state = reactive<Record<string, unknown>>({
+    current_step_index: 0,
+    navigating_back: false,
+    steps,
+    ...initial_state,
+  });
+
+  watch(
+    () => get_current_step_index(state),
+    (newVal, oldVal) => {
+      if (newVal < oldVal) {
+        state.navigating_back = true;
+      }
+    },
+  );
+
+  function update_values(keys_values_object: Record<string, unknown>): void {
+    for (const [key, value] of Object.entries(keys_values_object)) {
+      state[key] = value;
+    }
+  }
+
+  function increment_step(): void {
+    state.current_step_index = get_current_step_index(state) + 1;
+  }
+
+  function decrement_step(): void {
+    state.current_step_index = get_current_step_index(state) - 1;
+  }
+
+  function reset_values(): void {
+    state.current_step_index = 0;
+    state.navigating_back = false;
+    for (const [key, initial_val] of Object.entries(initial_state_unref)) {
+      state[key] = isUnknownArray(initial_val) ? [...initial_val] : initial_val;
+    }
+  }
+
+  return {
+    state,
+    update_values,
+    increment_step,
+    decrement_step,
+    reset_values,
+  };
+}

package/app/composables/tree_filter.ts

@@ -0,0 +1,194 @@
+import type { Ref } from "vue";
+
+// Same shape as Vue's MaybeRefOrGetter<T>, kept as a local alias for readability at call sites.
+type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
+
+// This composable filters/sorts different flavors of "category with children" trees (treeview groups, model component/collection groups, ...); this shape captures just the fields it reads/writes, generically, across all of them.
+interface FilterableItem {
+  readonly id: unknown;
+  readonly title?: string;
+  readonly children?: readonly FilterableItem[];
+}
+
+interface FilterContext {
+  readonly raw?: FilterableItem;
+}
+
+interface TreeFilterOptions {
+  readonly recursiveSort?: boolean;
+  readonly defaultSort?: string;
+  readonly defaultFilters?: Record<string, boolean>;
+}
+
+interface UseTreeFilterReturn {
+  search: Ref<string>;
+  sortType: Ref<string>;
+  filterOptions: Ref<Record<string, boolean>>;
+  processedItems: ComputedRef<FilterableItem[]>;
+  availableFilterOptions: ComputedRef<string[]>;
+  toggleSort: () => void;
+  customFilter: typeof customFilter;
+  applySearchFilter: (
+    newSelection: readonly unknown[],
+    previousSelection?: readonly unknown[],
+  ) => unknown[];
+}
+
+function customFilter(
+  value: unknown,
+  searchQuery: string | undefined,
+  item: FilterContext,
+): boolean {
+  if (searchQuery === undefined || searchQuery === "") {
+    return true;
+  }
+  if (!item.raw) {
+    return false;
+  }
+  const query = searchQuery.toLowerCase();
+  const { title = "", id = value } = item.raw;
+  return [title, id].some((field) => String(field).toLowerCase().includes(query));
+}
+
+// Extracted so we never call String() directly on a value typed as `unknown`/`any`.
+// The `id` field can be anything at runtime, so only stringify primitives that have a sane toString.
+// Anything else falls back to "" instead of risking "[object Object]".
+function toSortKey(item: FilterableItem, field: "title" | "id"): string {
+  const raw = item[field] ?? item.id ?? "";
+  if (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") {
+    return String(raw);
+  }
+  return "";
+}
+
+function sortAndFormatItems(
+  itemList: readonly FilterableItem[] | undefined | null,
+  sortType: string,
+  options: TreeFilterOptions = {},
+): FilterableItem[] {
+  if (!itemList) {
+    return [];
+  }
+  const field: "title" | "id" = sortType === "name" ? "title" : "id";
+  const localeOptions: Intl.CollatorOptions = { numeric: true, sensitivity: "base" };
+
+  // Copy into a plain mutable array up front: chaining .filter()/.toSorted() straight off the
+  // Readonly-typed parameter (previously combined with an Array.isArray guard here) has been
+  // Observed to make oxlint's type-aware analysis silently widen the result to `any[]`.
+  const items: FilterableItem[] = [...itemList];
+  const sorted = items
+    .filter((item) => item !== null && item !== undefined)
+    .toSorted((itemA, itemB) =>
+      toSortKey(itemA, field).localeCompare(toSortKey(itemB, field), undefined, localeOptions),
+    );
+
+  if (options.recursiveSort === true) {
+    return sorted.map((item) => {
+      if (item.children && item.children.length > 0) {
+        return {
+          ...item,
+          children: sortAndFormatItems(item.children, sortType, options),
+        };
+      }
+      return item;
+    });
+  }
+  return sorted;
+}
+
+function useTreeFilter(
+  itemsIn: ReadonlyMaybeRefOrGetter<readonly FilterableItem[]>,
+  options: TreeFilterOptions = {},
+): UseTreeFilterReturn {
+  const rawItems = typeof itemsIn === "function" ? computed(itemsIn) : toRef(itemsIn);
+  const search = ref("");
+  const sortType = ref(options.defaultSort ?? "name");
+  const filterOptions = ref<Record<string, boolean>>({ ...options.defaultFilters });
+
+  const availableFilterOptions = computed(() =>
+    rawItems.value.map((category) => String(category.title ?? category.id)),
+  );
+
+  watch(
+    availableFilterOptions,
+    (newOptions: readonly string[]) => {
+      for (const option of newOptions) {
+        filterOptions.value[option] ??= true;
+      }
+    },
+    { immediate: true },
+  );
+
+  const processedItems = computed(() => {
+    const filteredByCategory = rawItems.value.filter((category) => {
+      const key = String(category.title ?? category.id);
+      return filterOptions.value[key] !== false;
+    });
+
+    const sorted = sortAndFormatItems(filteredByCategory, sortType.value, options);
+
+    if (!search.value) {
+      return sorted;
+    }
+
+    const result: FilterableItem[] = [];
+    for (const category of sorted) {
+      const children = (category.children ?? []).filter((child) =>
+        customFilter(child.id, search.value, { raw: child }),
+      );
+      if (children.length > 0 || customFilter(category.id, search.value, { raw: category })) {
+        result.push({ ...category, children });
+      }
+    }
+    return result;
+  });
+
+  function toggleSort(): void {
+    sortType.value = sortType.value === "name" ? "id" : "name";
+  }
+
+  const allItems = computed(() => {
+    const map = new Map<unknown, FilterableItem>();
+    function traverse(items: readonly FilterableItem[]): void {
+      for (const item of items) {
+        map.set(item.id, item);
+        if (item.children) {
+          traverse(item.children);
+        }
+      }
+    }
+    traverse(rawItems.value);
+    return map;
+  });
+
+  function applySearchFilter(
+    newSelection: readonly unknown[],
+    previousSelection: readonly unknown[] = [],
+  ): unknown[] {
+    if (!search.value) {
+      return [...newSelection];
+    }
+    const allItemsMap = allItems.value;
+    function matches(id: unknown): boolean {
+      const item = allItemsMap.get(id);
+      return Boolean(item && customFilter(id, search.value, { raw: item }));
+    }
+    const hidden = previousSelection.filter((id) => !matches(id));
+    const visible = newSelection.filter((id) => matches(id));
+    return [...new Set([...hidden, ...visible])];
+  }
+
+  return {
+    search,
+    sortType,
+    filterOptions,
+    processedItems,
+    availableFilterOptions,
+    toggleSort,
+    customFilter,
+    applySearchFilter,
+  };
+}
+
+export { customFilter, useTreeFilter, sortAndFormatItems };
+export type { FilterableItem };

package/app/composables/{tree_keyboard_nav.js → tree_keyboard_nav.ts}

@@ -1,4 +1,36 @@
-function getBaseIndex(currentIndex, lastIndex, bounds, key) {
+import type { DisplayItem, EmitFn } from "./virtual_tree";
+
+interface VisibleBounds {
+  firstVisible: number;
+  lastVisible: number;
+}
+
+interface ScrollInfo {
+  scrollTop: number;
+  containerHeight: number;
+  itemHeight: number;
+}
+
+type ReadonlyDisplayItem = Omit<DisplayItem, "raw"> & {
+  readonly raw: Record<string, unknown>;
+};
+
+interface KeyboardEventLike {
+  readonly key: string;
+  preventDefault: () => void;
+}
+
+interface UseTreeKeyboardNavReturn {
+  focusedIndex: Ref<number>;
+  handleKeyDown: (event: KeyboardEventLike) => void;
+}
+
+function getBaseIndex(
+  currentIndex: number,
+  lastIndex: number,
+  bounds: VisibleBounds | undefined,
+  key: string,
+): number {
   if (currentIndex < 0 || currentIndex > lastIndex) {
     if (bounds) {
       return key === "End" ? lastIndex : bounds.firstVisible;
@@ -17,26 +49,27 @@ function getBaseIndex(currentIndex, lastIndex, bounds, key) {
 }
 
 export function useTreeKeyboardNav(
-  displayItems,
-  emit,
-  scrollToIndex,
-  toggleOpen,
-  handleItemClick,
-  getScrollInfo,
-  externalFocusedIndex,
-) {
-  const focusedIndex = externalFocusedIndex || ref(-1);
-
-  function findParentIndex(item, currentIndex) {
+  displayItems: Ref<readonly ReadonlyDisplayItem[]>,
+  emit: EmitFn,
+  scrollToIndex: (index: number) => void,
+  toggleOpen: (raw: Record<string, unknown>) => void,
+  handleItemClick: (item: ReadonlyDisplayItem, index: number) => void,
+  getScrollInfo: (() => ScrollInfo | undefined) | undefined,
+  externalFocusedIndex: Ref<number> | undefined,
+): UseTreeKeyboardNavReturn {
+  const focusedIndex = externalFocusedIndex ?? ref(-1);
+
+  function findParentIndex(item: ReadonlyDisplayItem, currentIndex: number): number {
     for (let index = currentIndex - 1; index >= 0; index -= 1) {
-      if (displayItems.value[index] && displayItems.value[index].depth < item.depth) {
+      const candidate = displayItems.value[index];
+      if (candidate && candidate.depth < item.depth) {
         return index;
       }
     }
     return -1;
   }
 
-  function getVisibleBounds() {
+  function getVisibleBounds(): VisibleBounds | undefined {
     if (!getScrollInfo) {
       return undefined;
     }
@@ -51,7 +84,11 @@ export function useTreeKeyboardNav(
     return { firstVisible, lastVisible };
   }
 
-  function handleExpandOrNext(item, currentIndex, lastIndex) {
+  function handleExpandOrNext(
+    item: ReadonlyDisplayItem | undefined,
+    currentIndex: number,
+    lastIndex: number,
+  ): number {
     if (item && !item.isLeaf && !item.isOpen) {
       toggleOpen(item.raw);
       return currentIndex;
@@ -59,7 +96,10 @@ export function useTreeKeyboardNav(
     return Math.min(currentIndex + 1, lastIndex);
   }
 
-  function handleCollapseOrParent(item, currentIndex) {
+  function handleCollapseOrParent(
+    item: ReadonlyDisplayItem | undefined,
+    currentIndex: number,
+  ): number {
     if (item && !item.isLeaf && item.isOpen) {
       toggleOpen(item.raw);
       return currentIndex;
@@ -71,7 +111,7 @@ export function useTreeKeyboardNav(
     return currentIndex;
   }
 
-  function getNextIndex(key) {
+  function getNextIndex(key: string): number {
     const total = displayItems.value.length;
     if (total === 0) {
       return -1;
@@ -103,7 +143,7 @@ export function useTreeKeyboardNav(
     return currentIndex;
   }
 
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEventLike): void {
     if (displayItems.value.length === 0) {
       return;
     }
@@ -111,7 +151,7 @@ export function useTreeKeyboardNav(
     if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
       event.preventDefault();
       const prevIndex = focusedIndex.value;
-      focusedIndex.value = getNextIndex(event.key);
+      (focusedIndex as Ref<number>).value = getNextIndex(event.key);
 
       if (focusedIndex.value !== prevIndex) {
         if (prevIndex >= 0 && prevIndex < displayItems.value.length) {
@@ -129,7 +169,9 @@ export function useTreeKeyboardNav(
       event.preventDefault();
       if (focusedIndex.value >= 0 && focusedIndex.value < displayItems.value.length) {
         const item = displayItems.value[focusedIndex.value];
-        handleItemClick(item, focusedIndex.value);
+        if (item) {
+          handleItemClick(item, focusedIndex.value);
+        }
       }
     }
   }