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

package/app/components/csv-preview/CsvSettings.vue

@@ -1,22 +1,27 @@
-<script setup>
-const { separator, headerRow, firstRow, xColumn, yColumn, zColumn, headers } = defineProps({
-  separator: { type: String, required: true },
-  headerRow: { type: Number, required: true },
-  firstRow: { type: Number, required: true },
-  xColumn: { type: String, default: undefined },
-  yColumn: { type: String, default: undefined },
-  zColumn: { type: String, default: undefined },
-  headers: { type: Array, default: () => [] },
-});
+<script setup lang="ts">
+interface HeaderOption {
+  title: string;
+  key: string;
+}
+
+interface Props {
+  separator: string;
+  headers?: HeaderOption[];
+}
+
+const { separator, headers = [] } = defineProps<Props>();
 
-const emit = defineEmits([
-  "update:separator",
-  "update:headerRow",
-  "update:firstRow",
-  "update:xColumn",
-  "update:yColumn",
-  "update:zColumn",
-]);
+const headerRow = defineModel<number>("headerRow", { required: true });
+const firstRow = defineModel<number>("firstRow", { required: true });
+const xColumn = defineModel<string>("xColumn");
+const yColumn = defineModel<string>("yColumn");
+const zColumn = defineModel<string>("zColumn");
+
+interface Emits {
+  "update:separator": [value: string];
+}
+
+const emit = defineEmits<Emits>();
 
 const separators = [
   { title: "Comma (,)", value: "," },
@@ -27,8 +32,8 @@ const separators = [
   { title: "Custom", value: "custom" },
 ];
 
-const selectedType = ref(",");
-const customValue = ref("");
+const selectedType = ref<string>(",");
+const customValue = ref<string>("");
 
 watch(
   () => separator,
@@ -59,31 +64,6 @@ watch(customValue, (newVal) => {
     emit("update:separator", newVal);
   }
 });
-
-const internalHeaderRow = computed({
-  get: () => headerRow,
-  set: (value) => emit("update:headerRow", value),
-});
-
-const internalFirstRow = computed({
-  get: () => firstRow,
-  set: (value) => emit("update:firstRow", value),
-});
-
-const internalXColumn = computed({
-  get: () => xColumn,
-  set: (value) => emit("update:xColumn", value),
-});
-
-const internalYColumn = computed({
-  get: () => yColumn,
-  set: (value) => emit("update:yColumn", value),
-});
-
-const internalZColumn = computed({
-  get: () => zColumn,
-  set: (value) => emit("update:zColumn", value),
-});
 </script>
 
 <template>
@@ -118,7 +98,7 @@ const internalZColumn = computed({
     <div class="text-overline mb-4 text-primary font-weight-bold">Row Configuration</div>
 
     <v-text-field
-      v-model.number="internalHeaderRow"
+      v-model.number="headerRow"
       type="number"
       label="Header Row"
       variant="outlined"
@@ -131,7 +111,7 @@ const internalZColumn = computed({
     />
 
     <v-text-field
-      v-model.number="internalFirstRow"
+      v-model.number="firstRow"
       type="number"
       label="First Data Row"
       variant="outlined"
@@ -148,7 +128,7 @@ const internalZColumn = computed({
     <div class="text-overline mb-4 text-primary font-weight-bold">Spatial Mapping</div>
 
     <v-select
-      v-model="internalXColumn"
+      v-model="xColumn"
       :items="headers"
       item-title="title"
       item-value="key"
@@ -163,7 +143,7 @@ const internalZColumn = computed({
     />
 
     <v-select
-      v-model="internalYColumn"
+      v-model="yColumn"
       :items="headers"
       item-title="title"
       item-value="key"
@@ -178,7 +158,7 @@ const internalZColumn = computed({
     />
 
     <v-select
-      v-model="internalZColumn"
+      v-model="zColumn"
       :items="headers"
       item-title="title"
       item-value="key"

package/app/components/csv-preview/CsvTable.vue

@@ -1,18 +1,38 @@
-<script setup>
-const { headers, rows, loading, coordinates, separator, headerRow, firstRow } = defineProps({
-  headers: { type: Array, required: true },
-  rows: { type: Array, required: true },
-  loading: { type: Boolean, default: false },
-  coordinates: {
-    type: Object,
-    default: () => ({ x: undefined, y: undefined, z: undefined }),
-  },
-  separator: { type: String, default: "," },
-  headerRow: { type: Number, default: 0 },
-  firstRow: { type: Number, default: 1 },
-});
+<script setup lang="ts">
+interface CsvHeader {
+  title: string;
+  key: string;
+  align: "start" | "end" | "center";
+  sortable: boolean;
+}
+type CsvRow = Record<string, string>;
+interface CsvCoordinates {
+  x?: string;
+  y?: string;
+  z?: string;
+}
+
+interface Props {
+  headers: CsvHeader[];
+  rows: CsvRow[];
+  loading?: boolean;
+  coordinates?: CsvCoordinates;
+  separator?: string;
+  headerRow?: number;
+  firstRow?: number;
+}
+
+const {
+  headers,
+  rows,
+  loading = false,
+  coordinates = { x: undefined, y: undefined, z: undefined },
+  separator = ",",
+  headerRow = 0,
+  firstRow = 1,
+} = defineProps<Props>();
 
-function getColumnClass(key) {
+function getColumnClass(key: string): string {
   if (key === coordinates.x) {
     return "x-col-highlight";
   }

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

@@ -1,11 +1,14 @@
 import { useDataStore } from "@ogw_front/stores/data";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-export function useBatchStyle() {
+export function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
   const treeviewStore = useTreeviewStore();
   const dataStore = useDataStore();
 
-  async function applyBatchStyle(id, action) {
+  async function applyBatchStyle(
+    id: string,
+    action: (id: string) => Promise<unknown>,
+  ): Promise<void> {
     const isActive = treeviewStore.activeItems.includes(id);
     if (!isActive || treeviewStore.activeItems.length <= 1) {
       await action(id);
@@ -19,17 +22,16 @@ export function useBatchStyle() {
       const promises = treeviewStore.activeItems.map(async (selectedId) => {
         try {
           const item = await dataStore.item(selectedId);
-          if (item && item.geode_object_type === targetType) {
+          if (item.geode_object_type === targetType) {
             await action(selectedId);
           }
-        } catch (error) {
-          console.error("Failed to apply batch style to item", selectedId, error);
+        } catch {
+          // Ignore items that fail to load; batch style continues for the rest.
         }
       });
 
       await Promise.all(promises);
-    } catch (error) {
-      console.error("Failed to fetch current item for batch style", id, error);
+    } catch {
       await action(id);
     }
   }

package/app/composables/clipping_planes_widget.ts

@@ -0,0 +1,204 @@
+import {
+  CHANGE_THRESHOLD,
+  type MainCameraOptions,
+  type SceneBoundsInfo,
+  alignCameraToMainCamera,
+  computeSceneBoundsInfo,
+  resolveActiveActors,
+} from "@ogw_front/utils/clipping_planes";
+import {
+  type ClippingPlane,
+  useWidgetEntryManager,
+} from "@ogw_front/composables/clipping_planes_widget_entries";
+import {
+  type vtkWidgetManager as WidgetManagerInstance,
+  newInstance as vtkWidgetManager,
+} from "@kitware/vtk.js/Widgets/Core/WidgetManager";
+import type { vtkGenericRenderWindow as GenericRenderWindowInstance } from "@ogw_internal/stores/hybrid_viewer/vtk_types";
+import type { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import type { vtkCamera } from "@kitware/vtk.js/Rendering/Core/Camera";
+import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+
+interface DataItemLike {
+  id: string;
+}
+
+interface ClippingPlanesWidgetParams {
+  planes: Ref<ClippingPlane[]>;
+  targetAllVisible: Ref<boolean>;
+  selectedDatasetIds: Ref<string[]>;
+  allItems: Ref<DataItemLike[]>;
+  hybridViewerStore: ReturnType<typeof useHybridViewerStore>;
+  debouncedApply: (...args: readonly unknown[]) => void;
+}
+
+// oxlint-disable-next-line max-params max-lines-per-function typescript/prefer-readonly-parameter-types -- Ref-backed params are inherently mutable through .value.
+function useClippingPlanesWidget({
+  planes,
+  targetAllVisible,
+  selectedDatasetIds,
+  allItems,
+  hybridViewerStore,
+  debouncedApply,
+}: ClippingPlanesWidgetParams): {
+  getSceneCenter: typeof getSceneCenter;
+  syncWidgets: typeof syncWidgets;
+  syncLocalCamera: typeof syncLocalCamera;
+  cleanupLocalWidget: typeof cleanupLocalWidget;
+  initLocalWidget: typeof initLocalWidget;
+  updateWidgetPlacement: typeof updateWidgetPlacement;
+  isFromWidget: typeof isFromWidget;
+  setFromWidget: typeof setFromWidget;
+} {
+  let localRenderWindow: GenericRenderWindowInstance | undefined = undefined;
+  let widgetManager: WidgetManagerInstance | undefined = undefined;
+  let maxDistance = 0;
+  let isLimitingCameraZoom = false;
+  const widgetEntryManager = useWidgetEntryManager({ planes, debouncedApply });
+
+  function getSceneBoundsInfo(): SceneBoundsInfo {
+    return computeSceneBoundsInfo(
+      resolveActiveActors(
+        targetAllVisible.value,
+        allItems.value,
+        selectedDatasetIds.value,
+        hybridViewerStore.hybridDb,
+      ),
+    );
+  }
+  function getSceneCenter(): readonly number[] {
+    return getSceneBoundsInfo().center;
+  }
+
+  function syncWidgets(): void {
+    if (!widgetManager || !localRenderWindow) {
+      return;
+    }
+    widgetEntryManager.removeExtraWidgets(widgetManager);
+    const { cubicBounds } = getSceneBoundsInfo();
+    for (const [idx, plane] of planes.value.entries()) {
+      widgetEntryManager.updateWidgetEntry(idx, plane, cubicBounds, widgetManager);
+    }
+    localRenderWindow.getRenderWindow().render();
+  }
+
+  function limitCameraZoomOut(camera: vtkCamera): void {
+    if (maxDistance <= 0 || isLimitingCameraZoom) {
+      return;
+    }
+    const currentDist = camera.getDistance();
+    if (currentDist <= maxDistance + CHANGE_THRESHOLD) {
+      return;
+    }
+    isLimitingCameraZoom = true;
+    const focal = camera.getFocalPoint();
+    const pos = camera.getPosition();
+    const ratio = maxDistance / currentDist;
+    camera.setPosition(
+      focal[0] + (pos[0] - focal[0]) * ratio,
+      focal[1] + (pos[1] - focal[1]) * ratio,
+      focal[2] + (pos[2] - focal[2]) * ratio,
+    );
+    localRenderWindow?.getRenderWindow().render();
+    isLimitingCameraZoom = false;
+  }
+
+  function syncLocalCamera(): void {
+    if (!localRenderWindow) {
+      return;
+    }
+    const renderer = localRenderWindow.getRenderer();
+    const camera = renderer.getActiveCamera();
+    const mainCam = hybridViewerStore.camera_options as MainCameraOptions;
+    const { center, cubicBounds } = getSceneBoundsInfo();
+    // oxlint-disable-next-line no-unsafe-type-assertion -- cubicBounds is always a 6-element bounds tuple.
+    renderer.resetCamera(cubicBounds as [number, number, number, number, number, number]);
+    alignCameraToMainCamera(camera, mainCam, center);
+    limitCameraZoomOut(camera);
+    localRenderWindow.getRenderWindow().render();
+  }
+
+  function cleanupLocalWidget(): void {
+    maxDistance = 0;
+    isLimitingCameraZoom = false;
+    widgetEntryManager.cleanupAll(widgetManager);
+    if (localRenderWindow) {
+      localRenderWindow.delete();
+      localRenderWindow = undefined;
+      widgetManager = undefined;
+    }
+  }
+  function updateWidgetPlacement({ isReset = false }: { isReset?: boolean } = {}): void {
+    if (!widgetManager || !localRenderWindow) {
+      return;
+    }
+    if (isReset) {
+      maxDistance = 0;
+    }
+    const center = getSceneCenter();
+    for (const plane of planes.value) {
+      if (!plane.origin || isReset) {
+        plane.origin = [...center];
+      }
+    }
+    syncWidgets();
+    syncLocalCamera();
+    if (maxDistance <= 0) {
+      maxDistance = localRenderWindow.getRenderer().getActiveCamera().getDistance();
+    }
+  }
+
+  function initLocalWidget(container: HTMLElement): void {
+    cleanupLocalWidget();
+    container.addEventListener(
+      "wheel",
+      (event: WheelEvent) => {
+        event.stopPropagation();
+      },
+      { passive: true },
+    );
+    localRenderWindow = vtkGenericRenderWindow({
+      background: [0, 0, 0, 0],
+      listenWindowResize: false,
+    });
+    localRenderWindow.setContainer(container);
+    const camera = localRenderWindow.getRenderer().getActiveCamera();
+    camera.onModified(() => {
+      limitCameraZoomOut(camera);
+    });
+    // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
+    const openGLRenderWindow = localRenderWindow.getApiSpecificRenderWindow() as unknown as {
+      getCanvas: () => HTMLCanvasElement;
+    };
+    const canvas = openGLRenderWindow.getCanvas();
+    Object.assign(canvas.style, {
+      width: "100%",
+      height: "100%",
+      background: "transparent",
+    });
+    localRenderWindow.resize();
+    widgetManager = vtkWidgetManager();
+    widgetManager.setRenderer(localRenderWindow.getRenderer());
+    updateWidgetPlacement();
+  }
+
+  function isFromWidget(): boolean {
+    return widgetEntryManager.isFromWidget();
+  }
+
+  function setFromWidget(value: boolean): void {
+    widgetEntryManager.setFromWidget(value);
+  }
+
+  return {
+    getSceneCenter,
+    syncWidgets,
+    syncLocalCamera,
+    cleanupLocalWidget,
+    initLocalWidget,
+    updateWidgetPlacement,
+    isFromWidget,
+    setFromWidget,
+  };
+}
+export { useClippingPlanesWidget };

package/app/composables/clipping_planes_widget_entries.ts

@@ -0,0 +1,189 @@
+import {
+  AXIS_SCALE,
+  PLANE_COLORS,
+  SIZE_RATIO,
+  getPlaneStyle,
+  hasPlaneChanged,
+} from "@ogw_front/utils/clipping_planes";
+import type { vtkWidgetManager as WidgetManagerInstance } from "@kitware/vtk.js/Widgets/Core/WidgetManager";
+import type vtkAbstractWidget from "@kitware/vtk.js/Widgets/Core/AbstractWidget";
+import type vtkAbstractWidgetFactory from "@kitware/vtk.js/Widgets/Core/AbstractWidgetFactory";
+import { newInstance as vtkImplicitPlaneWidget } from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
+
+interface ClippingPlane {
+  origin?: number[];
+  normal: number[];
+}
+
+interface ClippingWidgetState {
+  getOrigin: () => number[];
+  setOrigin: (origin: readonly number[]) => void;
+  getNormal: () => number[];
+  setNormal: (normal: readonly number[]) => void;
+  onModified: (callback: () => void) => { unsubscribe: () => void };
+}
+
+interface PlaneWidget {
+  getWidgetState: () => ClippingWidgetState;
+  delete: () => void;
+}
+
+interface WidgetHandle {
+  setAxisScale: (scale: number) => void;
+  setHandleSizeRatio: (ratio: number) => void;
+  setRepresentationStyle: (style: unknown) => void;
+  placeWidget: (bounds: readonly number[]) => void;
+}
+
+interface WidgetEntry {
+  planeWidget: PlaneWidget;
+  widgetHandle: WidgetHandle;
+  subscription: { unsubscribe: () => void };
+}
+
+function asWidgetFactory(widget: PlaneWidget): vtkAbstractWidgetFactory<vtkAbstractWidget> {
+  // oxlint-disable-next-line no-unsafe-type-assertion -- vtk.js's WidgetManager APIs (addWidget/removeWidget) are untyped for our custom PlaneWidget shape; narrowed once here.
+  return widget as unknown as vtkAbstractWidgetFactory<vtkAbstractWidget>;
+}
+
+interface WidgetEntryManagerParams {
+  planes: Ref<ClippingPlane[]>;
+  debouncedApply: (...args: readonly unknown[]) => void;
+}
+
+// oxlint-disable-next-line max-lines-per-function typescript/prefer-readonly-parameter-types -- Ref-backed params are inherently mutable through .value.
+function useWidgetEntryManager({ planes, debouncedApply }: WidgetEntryManagerParams): {
+  removeExtraWidgets: (widgetManager: WidgetManagerInstance | undefined) => void;
+  updateWidgetEntry: (
+    idx: number,
+    plane: ClippingPlane,
+    cubicBounds: readonly number[],
+    widgetManager: WidgetManagerInstance,
+  ) => void;
+  cleanupAll: (widgetManager: WidgetManagerInstance | undefined) => void;
+  isFromWidget: () => boolean;
+  setFromWidget: (value: boolean) => void;
+} {
+  let widgetEntries: WidgetEntry[] = [];
+  let fromWidget = false;
+
+  function createWidgetEntry(
+    planeWidget: PlaneWidget,
+    widgetHandle: WidgetHandle,
+    planeIndex: number,
+  ): WidgetEntry {
+    const widgetState = planeWidget.getWidgetState();
+    const plane = planes.value[planeIndex];
+    if (plane?.origin) {
+      widgetState.setOrigin(plane.origin);
+    }
+    if (plane) {
+      widgetState.setNormal(plane.normal);
+    }
+    const subscription = widgetState.onModified(() => {
+      if (fromWidget) {
+        return;
+      }
+      const origin: number[] = widgetState.getOrigin().map((val: number) => Number(val.toFixed(4)));
+      const normal: number[] = widgetState.getNormal().map((val: number) => Number(val.toFixed(4)));
+      const currentPlane = planes.value[planeIndex];
+      if (
+        !currentPlane ||
+        !hasPlaneChanged(origin, normal, currentPlane.origin, currentPlane.normal)
+      ) {
+        return;
+      }
+      fromWidget = true;
+      currentPlane.origin = origin;
+      currentPlane.normal = normal;
+      nextTick(() => {
+        fromWidget = false;
+        // oxlint-disable-next-line promise/prefer-await-to-then -- fire-and-forget inside a sync widget callback; see codebase convention in global_attribute_style.ts.
+      }).catch(() => undefined);
+      debouncedApply();
+    });
+    return {
+      planeWidget,
+      widgetHandle,
+      subscription,
+    };
+  }
+
+  function removeExtraWidgets(widgetManager: WidgetManagerInstance | undefined): void {
+    while (widgetEntries.length > planes.value.length) {
+      const entry = widgetEntries.pop();
+      if (!entry) {
+        continue;
+      }
+      entry.subscription.unsubscribe();
+      widgetManager?.removeWidget(asWidgetFactory(entry.planeWidget));
+      entry.planeWidget.delete();
+    }
+  }
+
+  function updateWidgetEntry(
+    idx: number,
+    plane: ClippingPlane,
+    cubicBounds: readonly number[],
+    widgetManager: WidgetManagerInstance,
+  ): void {
+    // Modulo guarantees this index is within bounds of the non-empty PLANE_COLORS array.
+    const rgb = PLANE_COLORS[idx % PLANE_COLORS.length];
+    if (rgb === undefined) {
+      return;
+    }
+    if (!widgetEntries[idx]) {
+      // oxlint-disable-next-line no-unsafe-call no-unsafe-type-assertion -- vtk.js has no types for ImplicitPlaneWidget's factory; narrowed here.
+      const planeWidget = vtkImplicitPlaneWidget() as PlaneWidget;
+      const widgetHandle = widgetManager.addWidget(
+        asWidgetFactory(planeWidget),
+        // oxlint-disable-next-line no-unsafe-type-assertion -- vtk.js WidgetManager.addWidget is untyped for our custom WidgetHandle shape; narrowed here.
+      ) as unknown as WidgetHandle;
+      widgetEntries.push(createWidgetEntry(planeWidget, widgetHandle, idx));
+    }
+    const entry = widgetEntries[idx];
+    if (!entry) {
+      return;
+    }
+    entry.widgetHandle.setRepresentationStyle(getPlaneStyle(rgb));
+    fromWidget = true;
+    entry.widgetHandle.placeWidget(cubicBounds);
+    fromWidget = false;
+    entry.widgetHandle.setAxisScale(AXIS_SCALE);
+    entry.widgetHandle.setHandleSizeRatio(SIZE_RATIO);
+    const widgetState = entry.planeWidget.getWidgetState();
+    if (plane.origin) {
+      widgetState.setOrigin(plane.origin);
+    }
+    widgetState.setNormal(plane.normal);
+  }
+
+  function cleanupAll(widgetManager: WidgetManagerInstance | undefined): void {
+    for (const entry of widgetEntries) {
+      entry.subscription.unsubscribe();
+      if (widgetManager) {
+        widgetManager.removeWidget(asWidgetFactory(entry.planeWidget));
+      }
+      entry.planeWidget.delete();
+    }
+    widgetEntries = [];
+  }
+
+  function isFromWidget(): boolean {
+    return fromWidget;
+  }
+
+  function setFromWidget(value: boolean): void {
+    fromWidget = value;
+  }
+
+  return {
+    removeExtraWidgets,
+    updateWidgetEntry,
+    cleanupAll,
+    isFromWidget,
+    setFromWidget,
+  };
+}
+
+export { useWidgetEntryManager, type ClippingPlane };

package/app/composables/copy_to_clipboard.ts

@@ -0,0 +1,7 @@
+import { useClipboard } from "@vueuse/core";
+
+const COPIED_FEEDBACK_TIMEOUT = 1500;
+
+export function useCopyToClipboard(): ReturnType<typeof useClipboard> {
+  return useClipboard({ copiedDuring: COPIED_FEEDBACK_TIMEOUT });
+}