@geode/opengeodeweb-front 10.36.0-rc.1 → 10.36.0-rc.3

package/app/components/ClippingPlanes.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { DEBOUNCE_DELAY, DEFAULT_NORMALS } from "@ogw_front/utils/clipping_planes";
+import {
+  DEFAULT_SLICE_AXIS,
+  SLICE_AXES,
+  type SliceAxis,
+  areAllGrids,
+} from "@ogw_front/utils/slice";
+import type { ClippingPlane } from "@ogw_front/composables/clipping_planes_widget_entries";
 import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard.vue";
+import SliceCard from "@ogw_front/components/SliceCard.vue";
 import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
 import { useDataStore } from "@ogw_front/stores/data";
@@ -18,10 +26,23 @@ const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 const targetAllVisible = ref<boolean>(true);
 const selectedDatasetIds = ref<string[]>([]);
-const planes = ref<{ origin?: number[]; normal: number[] }[]>([
-  { origin: undefined, normal: [1, 0, 0] },
-]);
+let lastItemId = 0;
+function newItemId(): number {
+  lastItemId += 1;
+  return lastItemId;
+}
+const planes = ref<ClippingPlane[]>([{ id: newItemId(), origin: undefined, normal: [1, 0, 0] }]);
 const allItems = dataStore.refAllItems();
+const sliceEnabled = ref<boolean>(false);
+const slices = ref<{ id: number; axis: SliceAxis; index: number }[]>([
+  { id: newItemId(), axis: DEFAULT_SLICE_AXIS, index: 0 },
+]);
+const sliceMaxIndices = ref<[number, number, number]>([0, 0, 0]);
+const targetIds = computed<string[]>(() =>
+  targetAllVisible.value ? allItems.value.map((item) => item.id) : selectedDatasetIds.value,
+);
+const isAllGrid = computed<boolean>(() => areAllGrids(allItems.value, targetIds.value));
+const isSliceActive = computed<boolean>(() => isAllGrid.value && sliceEnabled.value);
 const availableDatasets = computed<{ title: string; value: string }[]>(() =>
   allItems.value.map((item) => ({
     title: item.name || item.id,
@@ -30,6 +51,8 @@ const availableDatasets = computed<{ title: string; value: string }[]>(() =>
 );
 const widgetContainer = useTemplateRef("widgetContainer");
 let debouncedApply: ((...args: unknown[]) => void) | undefined = undefined;
+let areSlicesApplied = false;
+let pendingSlices: Promise<void> = Promise.resolve();
 
 const {
   getSceneCenter,
@@ -49,41 +72,103 @@ const {
   debouncedApply: (...args: unknown[]) => debouncedApply?.(...args),
 });
 
+function getUntargetedIds(): string[] {
+  return allItems.value.map((item) => item.id).filter((id) => !targetIds.value.includes(id));
+}
+
 async function applyClippingPlanes(): Promise<void> {
-  const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length === 0) {
+  if (allItems.value.length === 0) {
     return;
   }
   const center = getSceneCenter();
-  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
-  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+  const untargetedIds = getUntargetedIds();
   const planesData = planes.value.map((plane) => ({
     origin: (plane.origin || center).map(Number),
     normal: plane.normal.map(Number),
   }));
-
-  if (targetIds.length > 0) {
-    await hybridViewerStore.setClippingPlanes(targetIds, planesData);
+  if (targetIds.value.length > 0) {
+    await hybridViewerStore.setClippingPlanes(
+      targetIds.value,
+      isSliceActive.value ? [] : planesData,
+    );
   }
   if (untargetedIds.length > 0) {
     await hybridViewerStore.setClippingPlanes(untargetedIds, []);
   }
 }
 
+async function sendSlices(): Promise<void> {
+  if (!isAllGrid.value && !areSlicesApplied) {
+    return;
+  }
+  const isActive = isSliceActive.value;
+  const untargetedIds = getUntargetedIds();
+  if (targetIds.value.length > 0) {
+    const maxIndices = await hybridViewerStore.setSlice(
+      targetIds.value,
+      isActive ? slices.value.map(({ axis, index }) => ({ axis, index })) : [],
+    );
+    if (isAllGrid.value) {
+      sliceMaxIndices.value = maxIndices;
+    }
+    if (isActive) {
+      for (const slice of slices.value) {
+        slice.index = Math.min(slice.index, maxIndices[slice.axis]);
+      }
+    }
+  }
+  if (areSlicesApplied && untargetedIds.length > 0) {
+    await hybridViewerStore.setSlice(untargetedIds, []);
+  }
+  areSlicesApplied = isActive;
+}
+
+function queueSliceTask(task: () => Promise<void>): Promise<void> {
+  const previous = pendingSlices;
+  pendingSlices = (async (): Promise<void> => {
+    await Promise.allSettled([previous]);
+    await task();
+  })();
+  return pendingSlices;
+}
+
+function applySlices(): Promise<void> {
+  return queueSliceTask(sendSlices);
+}
+
+async function applyAll(): Promise<void> {
+  await applyClippingPlanes();
+  await applySlices();
+}
+
 debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
+const debouncedApplySlices = useDebounceFn(() => applySlices(), DEBOUNCE_DELAY);
 
 function addPlane(): void {
   // Index is always in-bounds (modulo the fixed-size list); the fallbacks only
   // Satisfy noUncheckedIndexedAccess and are never hit at runtime.
   const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length] ??
     DEFAULT_NORMALS[0] ?? [1, 0, 0];
-  planes.value.push({ origin: getSceneCenter(), normal });
+  planes.value.push({ id: newItemId(), origin: getSceneCenter(), normal });
 }
 
 function removePlane(index: number): void {
   planes.value.splice(index, 1);
 }
 
+function addSlice(): void {
+  const lastSlice = slices.value.at(-1);
+  slices.value.push({
+    id: newItemId(),
+    axis: lastSlice ? SLICE_AXES[lastSlice.axis].next : DEFAULT_SLICE_AXIS,
+    index: 0,
+  });
+}
+
+function removeSlice(index: number): void {
+  slices.value.splice(index, 1);
+}
+
 function flipNormal(plane: { normal: number[] }): void {
   plane.normal = plane.normal.map((component) => -component);
   syncWidgets();
@@ -92,15 +177,23 @@ function flipNormal(plane: { normal: number[] }): void {
 
 async function resetClippingPlanes(): Promise<void> {
   setFromWidget(true);
-  planes.value = [{ origin: undefined, normal: [1, 0, 0] }];
+  planes.value = [{ id: newItemId(), origin: undefined, normal: [1, 0, 0] }];
+  sliceEnabled.value = false;
+  slices.value = [{ id: newItemId(), axis: DEFAULT_SLICE_AXIS, index: 0 }];
   updateWidgetPlacement({ isReset: true });
   setFromWidget(false);
-  await applyClippingPlanes();
+  await applyAll();
 }
 
 async function removeClippingPlanes(): Promise<void> {
   const allIds = allItems.value.map((item) => item.id);
   await hybridViewerStore.setClippingPlanes(allIds, []);
+  await queueSliceTask(async () => {
+    if (areSlicesApplied) {
+      await hybridViewerStore.setSlice(allIds, []);
+      areSlicesApplied = false;
+    }
+  });
 }
 
 watch(widgetContainer, (container) => {
@@ -124,7 +217,7 @@ watch(
 watch(show, (visible) => {
   if (visible) {
     updateWidgetPlacement({ isReset: true });
-    applyClippingPlanes();
+    applyAll();
   }
 });
 
@@ -133,7 +226,23 @@ watch(
   () => {
     if (show.value) {
       updateWidgetPlacement({ isReset: true });
-      applyClippingPlanes();
+      applyAll();
+    }
+  },
+  { deep: true },
+);
+
+watch(sliceEnabled, () => {
+  if (show.value) {
+    applyAll();
+  }
+});
+
+watch(
+  slices,
+  () => {
+    if (show.value) {
+      debouncedApplySlices();
     }
   },
   { deep: true },
@@ -142,7 +251,7 @@ watch(
 watch(allItems, () => {
   if (show.value) {
     updateWidgetPlacement({ isReset: true });
-    applyClippingPlanes();
+    applyAll();
   }
 });
 
@@ -151,7 +260,7 @@ watch(
   (actorCount) => {
     if (show.value && actorCount > 0) {
       updateWidgetPlacement({ isReset: true });
-      applyClippingPlanes();
+      applyAll();
     }
   },
 );
@@ -171,6 +280,7 @@ onBeforeUnmount(cleanupLocalWidget);
   >
     <v-card-text class="pa-3 max-panel-height overflow-y-auto">
       <v-sheet
+        v-show="!isSliceActive"
         ref="widgetContainer"
         height="180"
         color="transparent"
@@ -203,28 +313,66 @@ onBeforeUnmount(cleanupLocalWidget);
 
       <v-divider class="my-2" />
 
-      <v-row align="center" justify="space-between" no-gutters class="mb-2">
-        <v-col class="text-caption font-weight-bold">Planes ({{ planes.length }})</v-col>
-        <v-col cols="auto">
-          <v-btn
-            data-testid="addPlaneButton"
-            size="x-small"
-            variant="tonal"
-            color="primary"
-            icon="mdi-plus"
-            @click="addPlane"
+      <template v-if="isAllGrid">
+        <v-switch
+          v-model="sliceEnabled"
+          data-testid="sliceSwitch"
+          label="Slice"
+          color="primary"
+          density="compact"
+          hide-details
+          class="mb-2 text-caption"
+        />
+        <template v-if="sliceEnabled">
+          <v-row align="center" justify="space-between" no-gutters class="mb-2">
+            <v-col class="text-caption font-weight-bold">Slices ({{ slices.length }})</v-col>
+            <v-col cols="auto">
+              <v-btn
+                data-testid="addSliceButton"
+                size="x-small"
+                variant="tonal"
+                color="primary"
+                icon="mdi-plus"
+                @click="addSlice"
+              />
+            </v-col>
+          </v-row>
+          <SliceCard
+            v-for="(slice, idx) in slices"
+            :key="slice.id"
+            :slice="slice"
+            :index="idx"
+            :max-index="sliceMaxIndices[slice.axis]"
+            @remove="removeSlice(idx)"
           />
-        </v-col>
-      </v-row>
-
-      <ClippingPlaneCard
-        v-for="(plane, idx) in planes"
-        :key="idx"
-        :plane="plane"
-        :index="idx"
-        @remove="removePlane(idx)"
-        @flip-normal="flipNormal(plane)"
-      />
+        </template>
+        <v-divider class="my-2" />
+      </template>
+
+      <template v-if="!isSliceActive">
+        <v-row align="center" justify="space-between" no-gutters class="mb-2">
+          <v-col class="text-caption font-weight-bold">Planes ({{ planes.length }})</v-col>
+          <v-col cols="auto">
+            <v-btn
+              data-testid="addPlaneButton"
+              size="x-small"
+              variant="tonal"
+              color="primary"
+              icon="mdi-plus"
+              @click="addPlane"
+            />
+          </v-col>
+        </v-row>
+
+        <ClippingPlaneCard
+          v-for="(plane, idx) in planes"
+          :key="plane.id"
+          :plane="plane"
+          :index="idx"
+          @remove="removePlane(idx)"
+          @flip-normal="flipNormal(plane)"
+        />
+      </template>
     </v-card-text>
 
     <template #actions>

package/app/components/SliceCard.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { SLICE_AXES, type SliceAxis } from "@ogw_front/utils/slice";
+
+interface Props {
+  slice: { axis: SliceAxis; index: number };
+  index: number;
+  maxIndex: number;
+}
+
+const { slice, index, maxIndex } = defineProps<Props>();
+
+interface Emits {
+  remove: [];
+}
+
+const emit = defineEmits<Emits>();
+</script>
+
+<template>
+  <v-card data-testid="sliceCard" variant="outlined" class="pa-2 mb-3 rounded-lg border-opacity-50">
+    <v-row align="center" no-gutters class="mb-1">
+      <v-col cols="auto">
+        <v-chip size="x-small" variant="flat" color="primary" class="font-weight-bold">
+          Slice #{{ index + 1 }}
+        </v-chip>
+      </v-col>
+      <v-col class="px-2">
+        <v-slider
+          v-model="slice.index"
+          data-testid="sliceIndexSlider"
+          :min="0"
+          :max="maxIndex"
+          :step="1"
+          color="primary"
+          track-color="grey-lighten-2"
+          density="compact"
+          hide-details
+        />
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          data-testid="removeSliceButton"
+          icon="mdi-trash-can-outline"
+          size="x-small"
+          variant="text"
+          color="error"
+          @click="emit('remove')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row align="center" justify="space-between" no-gutters>
+      <v-col cols="auto">
+        <v-btn-toggle
+          v-model="slice.axis"
+          data-testid="sliceAxisToggle"
+          mandatory
+          density="compact"
+          color="primary"
+          variant="outlined"
+          divided
+        >
+          <v-btn
+            v-for="axis in SLICE_AXES"
+            :key="axis.value"
+            :value="axis.value"
+            size="small"
+            class="text-caption"
+          >
+            {{ axis.title }}
+          </v-btn>
+        </v-btn-toggle>
+      </v-col>
+      <v-col cols="auto" class="text-caption text-primary font-weight-bold">
+        {{ slice.index }} / {{ maxIndex }}
+      </v-col>
+    </v-row>
+  </v-card>
+</template>

package/app/composables/clipping_planes_widget_entries.ts

@@ -11,6 +11,7 @@ import type vtkAbstractWidgetFactory from "@kitware/vtk.js/Widgets/Core/Abstract
 import { newInstance as vtkImplicitPlaneWidget } from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
 
 interface ClippingPlane {
+  id: number;
   origin?: number[];
   normal: number[];
 }

package/app/utils/slice.ts

@@ -0,0 +1,24 @@
+const GRID_TYPES = new Set([
+  "RegularGrid2D",
+  "LightRegularGrid2D",
+  "RegularGrid3D",
+  "LightRegularGrid3D",
+]);
+type SliceAxis = 0 | 1 | 2;
+const SLICE_AXES = [
+  { title: "YZ", value: 0, next: 1 },
+  { title: "XZ", value: 1, next: 2 },
+  { title: "XY", value: 2, next: 0 },
+] as const satisfies readonly { title: string; value: SliceAxis; next: SliceAxis }[];
+const DEFAULT_SLICE_AXIS: SliceAxis = 2;
+
+function areAllGrids(items: { id: string; geode_object_type: string }[], ids: string[]): boolean {
+  const targetedItems = items.filter((item) => ids.includes(item.id));
+  return (
+    targetedItems.length > 0 &&
+    targetedItems.every((item) => GRID_TYPES.has(item.geode_object_type))
+  );
+}
+
+export { SLICE_AXES, DEFAULT_SLICE_AXIS, areAllGrids };
+export type { SliceAxis };

package/internal/stores/hybrid_viewer/base64.ts

@@ -0,0 +1,6 @@
+// Decodes a base64 string (the back's binary_light_viewable) into raw bytes for vtk.js readers.
+// Uint8Array.fromBase64 would do this natively but is unavailable in Node 22, which runs the tests.
+export function base64ToArrayBuffer(b64: string): ArrayBuffer {
+  // Atob returns a "binary string": one char per byte, so each code point is the byte value.
+  return Uint8Array.from(atob(b64), (char) => char.codePointAt(0) ?? 0).buffer;
+}

package/internal/stores/hybrid_viewer/filters.ts

@@ -1,3 +1,4 @@
+import type { SliceAxis } from "@ogw_front/utils/slice";
 import { useHybridViewerCore } from "./core";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
@@ -30,6 +31,25 @@ async function setShrink(ids: string[], shrink_factor: number): Promise<void> {
   });
   await remoteRender();
 }
+async function setSlice(
+  ids: string[],
+  slices: { axis: SliceAxis; index: number }[],
+): Promise<[number, number, number]> {
+  const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerCore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.slice;
+  const params = {
+    ids,
+    slices,
+  };
+  const response = await viewerStore.request({
+    schema,
+    params,
+  });
+  await remoteRender();
+  // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the slice schema.
+  return (response as { max_indices: [number, number, number] }).max_indices;
+}
 interface ThresholdAttribute {
   name: string;
   location: "point" | "cell";
@@ -54,11 +74,16 @@ async function setThreshold(ids: string[], attribute?: ThresholdAttribute): Prom
 function useHybridViewerFilters(): {
   setClippingPlanes: (ids: string[], planes: unknown) => Promise<void>;
   setShrink: (ids: string[], shrink_factor: number) => Promise<void>;
+  setSlice: (
+    ids: string[],
+    slices: { axis: SliceAxis; index: number }[],
+  ) => Promise<[number, number, number]>;
   setThreshold: (ids: string[], attribute?: ThresholdAttribute) => Promise<void>;
 } {
   return {
     setClippingPlanes,
     setShrink,
+    setSlice,
     setThreshold,
   };
 }

package/internal/stores/hybrid_viewer/scene.ts

@@ -1,6 +1,7 @@
 import type { HybridDb, vtkActor as VtkActorInstance } from "./vtk_types";
 import { requireRenderWindow, useHybridViewerCore } from "./core";
 import { ACTOR_COLOR } from "./constants";
+import { base64ToArrayBuffer } from "./base64";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
@@ -25,8 +26,11 @@ const useHybridViewerScene = createSharedComposable(() => {
       return;
     }
     const value = await dataStore.item(id);
+    if (value.binary_light_viewable === undefined) {
+      return;
+    }
     const reader = vtkXMLPolyDataReader();
-    reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable).buffer);
+    reader.parseAsArrayBuffer(base64ToArrayBuffer(value.binary_light_viewable));
     const actor = vtkActor();
     const mapper = vtkMapper();
     // oxlint-disable-next-line no-unsafe-type-assertion -- vtk.js's algorithm interface types getOutputData as `any`; this reader always produces polydata.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.36.0-rc.1",
+  "version": "10.36.0-rc.3",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {