From 1f0ee0739a4ec675be0b785896eff75801890ed0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 28 Jul 2026 17:20:24 +0200
Subject: [PATCH 01/14] near model attribute still

---
 app/components/ClippingPlanes.vue | 354 ++++++++++++++++++++++++++++++
 app/components/ViewToolbar.vue    |  12 +
 app/stores/hybrid_viewer.js       |   8 +
 3 files changed, 374 insertions(+)
 create mode 100644 app/components/ClippingPlanes.vue

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
new file mode 100644
index 00000000..ae01c34d
--- /dev/null
+++ b/app/components/ClippingPlanes.vue
@@ -0,0 +1,354 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer_camera";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+import vtkImplicitPlaneWidget from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
+import vtkWidgetManager from "@kitware/vtk.js/Widgets/Core/WidgetManager";
+
+const show = defineModel("show", { type: Boolean, default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const isExpanded = ref(true);
+const targetAllVisible = ref(true);
+const selectedDatasetIds = ref([]);
+const planes = ref([{ origin: [0, 0, 0], normal: [1, 0, 0] }]);
+
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed(() =>
+  allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
+);
+
+const widgetContainer = useTemplateRef("widgetContainer");
+let localRenderWindow = undefined;
+let widgetManager = undefined;
+let planeWidget = undefined;
+let fromWidget = false;
+
+function getSceneBounds() {
+  const actors = Object.values(hybridViewerStore.hybridDb)
+    .map((entry) => entry.actor)
+    .filter(Boolean);
+  if (!actors.length) return [-1, 1, -1, 1, -1, 1];
+
+  return actors.reduce(
+    (acc, actor) => {
+      const bounds = actor.getBounds();
+      return [
+        Math.min(acc[0], bounds[0]),
+        Math.max(acc[1], bounds[1]),
+        Math.min(acc[2], bounds[2]),
+        Math.max(acc[3], bounds[3]),
+        Math.min(acc[4], bounds[4]),
+        Math.max(acc[5], bounds[5]),
+      ];
+    },
+    [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity],
+  );
+}
+
+function getSceneCenter() {
+  const b = getSceneBounds();
+  return [0, 2, 4].map((i) => Number(((b[i] + b[i + 1]) / 2).toFixed(4)));
+}
+
+function initLocalWidget(container) {
+  container.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
+
+  localRenderWindow = vtkGenericRenderWindow({
+    background: [0, 0, 0, 0],
+    listenWindowResize: false,
+  });
+  localRenderWindow.setContainer(container);
+  const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.background = "transparent";
+  localRenderWindow.resize();
+
+  widgetManager = vtkWidgetManager.newInstance();
+  widgetManager.setRenderer(localRenderWindow.getRenderer());
+
+  planeWidget = vtkImplicitPlaneWidget.newInstance();
+  const handle = widgetManager.addWidget(planeWidget);
+  handle.setAxisScale(0.45);
+  handle.setHandleSizeRatio(0.1);
+  handle.placeWidget(getSceneBounds());
+
+  if (planes.value[0].origin.every((val) => val === 0)) {
+    planes.value[0].origin = getSceneCenter();
+  }
+
+  const widgetState = planeWidget.getWidgetState();
+  widgetState.setOrigin(planes.value[0].origin);
+  widgetState.setNormal(planes.value[0].normal);
+
+  widgetState.onModified(() => {
+    fromWidget = true;
+    const origin = widgetState.getOrigin();
+    const normal = widgetState.getNormal();
+    planes.value[0].origin = origin.map((val) => Number(val.toFixed(4)));
+    planes.value[0].normal = normal.map((val) => Number(val.toFixed(4)));
+    fromWidget = false;
+    debouncedApply();
+  });
+
+  syncLocalCamera();
+}
+
+watch(widgetContainer, (container) => {
+  if (container) initLocalWidget(container);
+});
+
+watch(
+  planes,
+  () => {
+    if (fromWidget || !planeWidget) return;
+    const widgetState = planeWidget.getWidgetState();
+    widgetState.setOrigin(planes.value[0].origin);
+    widgetState.setNormal(planes.value[0].normal);
+    localRenderWindow.getRenderWindow().render();
+    debouncedApply();
+  },
+  { deep: true },
+);
+
+onBeforeUnmount(() => {
+  localRenderWindow?.delete();
+});
+
+function syncLocalCamera() {
+  if (!localRenderWindow) return;
+  const renderer = localRenderWindow.getRenderer();
+  applyCameraOptions(renderer.getActiveCamera(), hybridViewerStore.camera_options);
+  renderer.resetCamera();
+  localRenderWindow.getRenderWindow().render();
+}
+
+watch(() => hybridViewerStore.camera_options, syncLocalCamera, { deep: true });
+
+function addPlane() {
+  planes.value.push({ origin: getSceneCenter(), normal: [1, 0, 0] });
+}
+
+function removePlane(index) {
+  planes.value.splice(index, 1);
+}
+
+function flipNormal(plane) {
+  plane.normal = plane.normal.map((n) => -n);
+}
+
+const debouncedApply = useDebounceFn(() => applyClippingPlanes(), 200);
+
+watch(
+  [show, targetAllVisible, selectedDatasetIds, allItems],
+  ([visible]) => {
+    if (visible) debouncedApply();
+  },
+  { immediate: true },
+);
+
+async function applyClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  if (!allIds.length) return;
+
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+  const planesData = planes.value.map((plane) => ({
+    origin: plane.origin.map(Number),
+    normal: plane.normal.map(Number),
+  }));
+
+  if (targetIds.length) {
+    await hybridViewerStore.setClippingPlanes(targetIds, planesData);
+  }
+  if (untargetedIds.length) {
+    await hybridViewerStore.setClippingPlanes(untargetedIds, []);
+  }
+}
+
+async function resetClippingPlanes() {
+  fromWidget = true;
+  const center = getSceneCenter();
+  planes.value = [{ origin: center, normal: [1, 0, 0] }];
+  if (planeWidget) {
+    const widgetState = planeWidget.getWidgetState();
+    widgetState.setOrigin(center);
+    widgetState.setNormal([1, 0, 0]);
+    localRenderWindow.getRenderWindow().render();
+  }
+  fromWidget = false;
+  await applyClippingPlanes();
+}
+
+async function removeClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length) {
+    await hybridViewerStore.setClippingPlanes(allIds, []);
+  }
+}
+
+function close() {
+  show.value = false;
+}
+</script>
+
+<template>
+  <GlassCard
+    v-if="show"
+    title="Clipping Planes"
+    :width="360"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute rounded-xl elevation-24 clipping-planes-panel"
+  >
+    <template #header-actions>
+      <v-btn
+        icon="mdi-chevron-down"
+        variant="text"
+        density="compact"
+        size="small"
+        class="mr-1"
+        :style="{ transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)' }"
+        @click="isExpanded = !isExpanded"
+      />
+      <v-btn icon="mdi-close" variant="text" density="compact" size="small" @click="close" />
+    </template>
+
+    <v-card-text v-if="isExpanded" class="pa-3 max-panel-height overflow-y-auto">
+      <div
+        ref="widgetContainer"
+        class="rounded-lg mb-3 overflow-hidden"
+        style="height: 180px; background: transparent"
+      />
+      <v-switch
+        v-model="targetAllVisible"
+        label="Apply to all visible datasets"
+        color="primary"
+        density="compact"
+        hide-details
+        class="mb-2 text-caption"
+      />
+
+      <v-select
+        v-if="!targetAllVisible"
+        v-model="selectedDatasetIds"
+        :items="availableDatasets"
+        label="Select datasets"
+        multiple
+        chips
+        closable-chips
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-divider class="my-2" />
+
+      <div class="d-flex align-center justify-space-between mb-2">
+        <span class="text-caption font-weight-bold">Planes ({{ planes.length }})</span>
+        <v-btn size="x-small" variant="tonal" color="primary" icon="mdi-plus" @click="addPlane" />
+      </div>
+
+      <v-card
+        v-for="(plane, idx) in planes"
+        :key="idx"
+        variant="outlined"
+        class="pa-2 mb-3 rounded-lg border-opacity-25"
+      >
+        <div class="d-flex align-center justify-space-between mb-1">
+          <span class="text-caption font-weight-medium">Plane #{{ idx + 1 }}</span>
+          <v-btn
+            icon="mdi-trash-can-outline"
+            size="x-small"
+            variant="text"
+            color="error"
+            @click="removePlane(idx)"
+          />
+        </div>
+
+        <div class="text-caption text-medium-emphasis mb-1">Origin [X, Y, Z]</div>
+        <v-row dense class="mb-2">
+          <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
+            <v-text-field
+              v-model.number="plane.origin[axis - 1]"
+              type="number"
+              variant="outlined"
+              density="compact"
+              hide-details
+              step="any"
+              class="text-caption"
+            />
+          </v-col>
+        </v-row>
+
+        <div class="d-flex align-center justify-space-between mb-1">
+          <span class="text-caption text-medium-emphasis">Normal [X, Y, Z]</span>
+          <v-btn
+            size="x-small"
+            variant="text"
+            color="primary"
+            prepend-icon="mdi-swap-horizontal"
+            class="text-none text-caption px-1"
+            @click="flipNormal(plane)"
+          >
+            Invert Normal
+          </v-btn>
+        </div>
+        <v-row dense>
+          <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
+            <v-text-field
+              v-model.number="plane.normal[axis - 1]"
+              type="number"
+              variant="outlined"
+              density="compact"
+              hide-details
+              step="any"
+              class="text-caption"
+            />
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions v-if="isExpanded" class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeClippingPlanes"
+        >
+          Remove Clipping
+        </v-btn>
+        <v-btn
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetClippingPlanes"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </GlassCard>
+</template>
+
+<style scoped>
+.clipping-planes-panel {
+  z-index: 2;
+  bottom: 20px;
+  right: 65px;
+}
+
+.max-panel-height {
+  max-height: 520px;
+}
+</style>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index b0d2ff26..821e2b7e 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -3,6 +3,7 @@ import ActionButton from "@ogw_front/components/ActionButton";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation";
+import ClippingPlanes from "@ogw_front/components/ClippingPlanes";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
@@ -15,6 +16,7 @@ const take_screenshot = ref(false);
 const show_camera_manager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
+const showClippingPlanes = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
 
@@ -151,6 +153,15 @@ const camera_options = computed(() => [
       showZScaling.value = !showZScaling.value;
     },
   },
+  {
+    testId: "clippingPlanesButton",
+    tooltip: "Clipping Planes",
+    icon: "mdi-content-cut",
+    color: showClippingPlanes.value ? "primary" : undefined,
+    action: () => {
+      showClippingPlanes.value = !showClippingPlanes.value;
+    },
+  },
 ]);
 </script>
 
@@ -223,6 +234,7 @@ const camera_options = computed(() => [
     :width="260"
     @apply="handleZScalingClose"
   />
+  <ClippingPlanes v-model:show="showClippingPlanes" />
 </template>
 
 <style module>
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index eee1fa49..f5f1594a 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -137,6 +137,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     });
   }
 
+  async function setClippingPlanes(ids, planes) {
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
+    const params = { ids, planes };
+    await viewerStore.request({ schema, params });
+    await remoteRender();
+  }
+
   function resetCamera() {
     genericRenderWindow.value.getRenderer().resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
@@ -307,6 +314,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     removeItem,
     setVisibility,
     setZScaling,
+    setClippingPlanes,
     syncRemoteCamera,
     setCamera,
     initHybridViewer,

From b2ad85002f1244ea432690e9c29b4953f6e39cdc Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 29 Jul 2026 12:14:13 +0200
Subject: [PATCH 02/14] oxlint

---
 app/components/ClippingPlanes.vue | 82 ++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index ae01c34d..e748ce9b 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -5,8 +5,12 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
-import vtkImplicitPlaneWidget from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
-import vtkWidgetManager from "@kitware/vtk.js/Widgets/Core/WidgetManager";
+import { newInstance as vtkImplicitPlaneWidget } from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
+import { newInstance as vtkWidgetManager } from "@kitware/vtk.js/Widgets/Core/WidgetManager";
+
+const AXIS_SCALE = 0.45;
+const SIZE_RATIO = 0.1;
+const DEBOUNCE_DELAY = 200;
 
 const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
@@ -32,27 +36,27 @@ function getSceneBounds() {
   const actors = Object.values(hybridViewerStore.hybridDb)
     .map((entry) => entry.actor)
     .filter(Boolean);
-  if (!actors.length) return [-1, 1, -1, 1, -1, 1];
-
-  return actors.reduce(
-    (acc, actor) => {
-      const bounds = actor.getBounds();
-      return [
-        Math.min(acc[0], bounds[0]),
-        Math.max(acc[1], bounds[1]),
-        Math.min(acc[2], bounds[2]),
-        Math.max(acc[3], bounds[3]),
-        Math.min(acc[4], bounds[4]),
-        Math.max(acc[5], bounds[5]),
-      ];
-    },
-    [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity],
-  );
+  if (actors.length === 0) {
+    return [-1, 1, -1, 1, -1, 1];
+  }
+  let combinedBounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
+  for (const actor of actors) {
+    const bounds = actor.getBounds();
+    combinedBounds = [
+      Math.min(combinedBounds[0], bounds[0]),
+      Math.max(combinedBounds[1], bounds[1]),
+      Math.min(combinedBounds[2], bounds[2]),
+      Math.max(combinedBounds[3], bounds[3]),
+      Math.min(combinedBounds[4], bounds[4]),
+      Math.max(combinedBounds[5], bounds[5]),
+    ];
+  }
+  return combinedBounds;
 }
 
 function getSceneCenter() {
-  const b = getSceneBounds();
-  return [0, 2, 4].map((i) => Number(((b[i] + b[i + 1]) / 2).toFixed(4)));
+  const bounds = getSceneBounds();
+  return [0, 2, 4].map((i) => Number(((bounds[i] + bounds[i + 1]) / 2).toFixed(4)));
 }
 
 function initLocalWidget(container) {
@@ -69,13 +73,13 @@ function initLocalWidget(container) {
   canvas.style.background = "transparent";
   localRenderWindow.resize();
 
-  widgetManager = vtkWidgetManager.newInstance();
+  widgetManager = vtkWidgetManager();
   widgetManager.setRenderer(localRenderWindow.getRenderer());
 
-  planeWidget = vtkImplicitPlaneWidget.newInstance();
+  planeWidget = vtkImplicitPlaneWidget();
   const handle = widgetManager.addWidget(planeWidget);
-  handle.setAxisScale(0.45);
-  handle.setHandleSizeRatio(0.1);
+  handle.setAxisScale(AXIS_SCALE);
+  handle.setHandleSizeRatio(SIZE_RATIO);
   handle.placeWidget(getSceneBounds());
 
   if (planes.value[0].origin.every((val) => val === 0)) {
@@ -100,13 +104,17 @@ function initLocalWidget(container) {
 }
 
 watch(widgetContainer, (container) => {
-  if (container) initLocalWidget(container);
+  if (container) {
+    initLocalWidget(container);
+  }
 });
 
 watch(
   planes,
   () => {
-    if (fromWidget || !planeWidget) return;
+    if (fromWidget || !planeWidget) {
+      return;
+    }
     const widgetState = planeWidget.getWidgetState();
     widgetState.setOrigin(planes.value[0].origin);
     widgetState.setNormal(planes.value[0].normal);
@@ -121,7 +129,9 @@ onBeforeUnmount(() => {
 });
 
 function syncLocalCamera() {
-  if (!localRenderWindow) return;
+  if (!localRenderWindow) {
+    return;
+  }
   const renderer = localRenderWindow.getRenderer();
   applyCameraOptions(renderer.getActiveCamera(), hybridViewerStore.camera_options);
   renderer.resetCamera();
@@ -139,22 +149,26 @@ function removePlane(index) {
 }
 
 function flipNormal(plane) {
-  plane.normal = plane.normal.map((n) => -n);
+  plane.normal = plane.normal.map((normal) => -normal);
 }
 
-const debouncedApply = useDebounceFn(() => applyClippingPlanes(), 200);
+const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
 
 watch(
   [show, targetAllVisible, selectedDatasetIds, allItems],
   ([visible]) => {
-    if (visible) debouncedApply();
+    if (visible) {
+      debouncedApply();
+    }
   },
   { immediate: true },
 );
 
 async function applyClippingPlanes() {
   const allIds = allItems.value.map((item) => item.id);
-  if (!allIds.length) return;
+  if (allIds.length === 0) {
+    return;
+  }
 
   const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
   const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
@@ -163,10 +177,10 @@ async function applyClippingPlanes() {
     normal: plane.normal.map(Number),
   }));
 
-  if (targetIds.length) {
+  if (targetIds.length > 0) {
     await hybridViewerStore.setClippingPlanes(targetIds, planesData);
   }
-  if (untargetedIds.length) {
+  if (untargetedIds.length > 0) {
     await hybridViewerStore.setClippingPlanes(untargetedIds, []);
   }
 }
@@ -187,7 +201,7 @@ async function resetClippingPlanes() {
 
 async function removeClippingPlanes() {
   const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length) {
+  if (allIds.length > 0) {
     await hybridViewerStore.setClippingPlanes(allIds, []);
   }
 }

From e00b2ff75994f4a12cac243d8630d9bfe2853821 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 30 Jul 2026 14:04:26 +0200
Subject: [PATCH 03/14] widget prevent zoom out; hover doesn't send request

---
 app/components/ClippingPlanes.vue | 58 ++++++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 8 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index e748ce9b..d6f1d96c 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -11,6 +11,7 @@ import { newInstance as vtkWidgetManager } from "@kitware/vtk.js/Widgets/Core/Wi
 const AXIS_SCALE = 0.45;
 const SIZE_RATIO = 0.1;
 const DEBOUNCE_DELAY = 200;
+const CHANGE_THRESHOLD = 1e-4;
 
 const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
@@ -31,6 +32,8 @@ let localRenderWindow = undefined;
 let widgetManager = undefined;
 let planeWidget = undefined;
 let fromWidget = false;
+let maxDistance = 0;
+let isLimitingCameraZoom = false;
 
 function getSceneBounds() {
   const actors = Object.values(hybridViewerStore.hybridDb)
@@ -59,6 +62,37 @@ function getSceneCenter() {
   return [0, 2, 4].map((i) => Number(((bounds[i] + bounds[i + 1]) / 2).toFixed(4)));
 }
 
+function isArrayDiff(arrA, arrB) {
+  return arrA.some((val, idx) => Math.abs(val - arrB[idx]) > CHANGE_THRESHOLD);
+}
+
+function hasPlaneChanged(origin, normal, currentOrigin, currentNormal) {
+  return isArrayDiff(origin, currentOrigin) || isArrayDiff(normal, currentNormal);
+}
+
+function limitCameraZoomOut(camera) {
+  if (isLimitingCameraZoom || maxDistance <= 0) {
+    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 initLocalWidget(container) {
   container.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
 
@@ -67,10 +101,12 @@ function initLocalWidget(container) {
     listenWindowResize: false,
   });
   localRenderWindow.setContainer(container);
+
+  const camera = localRenderWindow.getRenderer().getActiveCamera();
+  camera.onModified(() => limitCameraZoomOut(camera));
+
   const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
-  canvas.style.width = "100%";
-  canvas.style.height = "100%";
-  canvas.style.background = "transparent";
+  Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
   localRenderWindow.resize();
 
   widgetManager = vtkWidgetManager();
@@ -91,11 +127,15 @@ function initLocalWidget(container) {
   widgetState.setNormal(planes.value[0].normal);
 
   widgetState.onModified(() => {
+    const origin = widgetState.getOrigin().map((val) => Number(val.toFixed(4)));
+    const normal = widgetState.getNormal().map((val) => Number(val.toFixed(4)));
+    if (!hasPlaneChanged(origin, normal, planes.value[0].origin, planes.value[0].normal)) {
+      return;
+    }
+
     fromWidget = true;
-    const origin = widgetState.getOrigin();
-    const normal = widgetState.getNormal();
-    planes.value[0].origin = origin.map((val) => Number(val.toFixed(4)));
-    planes.value[0].normal = normal.map((val) => Number(val.toFixed(4)));
+    planes.value[0].origin = origin;
+    planes.value[0].normal = normal;
     fromWidget = false;
     debouncedApply();
   });
@@ -133,8 +173,10 @@ function syncLocalCamera() {
     return;
   }
   const renderer = localRenderWindow.getRenderer();
-  applyCameraOptions(renderer.getActiveCamera(), hybridViewerStore.camera_options);
+  const camera = renderer.getActiveCamera();
+  applyCameraOptions(camera, hybridViewerStore.camera_options);
   renderer.resetCamera();
+  maxDistance = camera.getDistance();
   localRenderWindow.getRenderWindow().render();
 }
 

From 471ff52158099fc4a82e36630e900d7cefe0c838 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 30 Jul 2026 14:37:42 +0200
Subject: [PATCH 04/14] calculate bounding box for when we have multiple datas
 far away so the widget doesn't stretch out

---
 app/components/ClippingPlanes.vue | 182 +++++++++++++++++++-----------
 1 file changed, 113 insertions(+), 69 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index d6f1d96c..14df7d51 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -31,19 +31,29 @@ const widgetContainer = useTemplateRef("widgetContainer");
 let localRenderWindow = undefined;
 let widgetManager = undefined;
 let planeWidget = undefined;
+let widgetHandle = undefined;
 let fromWidget = false;
 let maxDistance = 0;
 let isLimitingCameraZoom = false;
 
 function getSceneBounds() {
-  const actors = Object.values(hybridViewerStore.hybridDb)
-    .map((entry) => entry.actor)
-    .filter(Boolean);
-  if (actors.length === 0) {
+  const targetIds = targetAllVisible.value
+    ? allItems.value.map((item) => item.id)
+    : selectedDatasetIds.value;
+
+  const actors = targetIds.map((id) => hybridViewerStore.hybridDb[id]?.actor).filter(Boolean);
+  const activeActors =
+    actors.length > 0
+      ? actors
+      : Object.values(hybridViewerStore.hybridDb)
+          .map((entry) => entry.actor)
+          .filter(Boolean);
+
+  if (activeActors.length === 0) {
     return [-1, 1, -1, 1, -1, 1];
   }
   let combinedBounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
-  for (const actor of actors) {
+  for (const actor of activeActors) {
     const bounds = actor.getBounds();
     combinedBounds = [
       Math.min(combinedBounds[0], bounds[0]),
@@ -58,20 +68,38 @@ function getSceneBounds() {
 }
 
 function getSceneCenter() {
-  const bounds = getSceneBounds();
-  return [0, 2, 4].map((i) => Number(((bounds[i] + bounds[i + 1]) / 2).toFixed(4)));
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = getSceneBounds();
+  return [
+    Number(((xmin + xmax) / 2).toFixed(4)),
+    Number(((ymin + ymax) / 2).toFixed(4)),
+    Number(((zmin + zmax) / 2).toFixed(4)),
+  ];
 }
 
-function isArrayDiff(arrA, arrB) {
-  return arrA.some((val, idx) => Math.abs(val - arrB[idx]) > CHANGE_THRESHOLD);
+function getCubicBounds() {
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = getSceneBounds();
+  const center = [(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2];
+  const halfExtent = Math.max(xmax - xmin, ymax - ymin, zmax - zmin) / 2;
+
+  return [
+    center[0] - halfExtent,
+    center[0] + halfExtent,
+    center[1] - halfExtent,
+    center[1] + halfExtent,
+    center[2] - halfExtent,
+    center[2] + halfExtent,
+  ];
 }
 
 function hasPlaneChanged(origin, normal, currentOrigin, currentNormal) {
-  return isArrayDiff(origin, currentOrigin) || isArrayDiff(normal, currentNormal);
+  return (
+    origin.some((val, idx) => Math.abs(val - currentOrigin[idx]) > CHANGE_THRESHOLD) ||
+    normal.some((val, idx) => Math.abs(val - currentNormal[idx]) > CHANGE_THRESHOLD)
+  );
 }
 
 function limitCameraZoomOut(camera) {
-  if (isLimitingCameraZoom || maxDistance <= 0) {
+  if (maxDistance <= 0 || isLimitingCameraZoom) {
     return;
   }
   const currentDist = camera.getDistance();
@@ -93,59 +121,55 @@ function limitCameraZoomOut(camera) {
   isLimitingCameraZoom = false;
 }
 
+function setupWidgetStateEvents(widgetState) {
+  widgetState.onModified(() => {
+    const origin = widgetState.getOrigin().map((val) => Number(val.toFixed(4)));
+    const normal = widgetState.getNormal().map((val) => Number(val.toFixed(4)));
+    if (!hasPlaneChanged(origin, normal, planes.value[0].origin, planes.value[0].normal)) {
+      return;
+    }
+
+    fromWidget = true;
+    planes.value[0].origin = origin;
+    planes.value[0].normal = normal;
+    fromWidget = false;
+    debouncedApply();
+  });
+}
+
 function initLocalWidget(container) {
   container.addEventListener("wheel", (event) => 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));
-
   const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
   Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
   localRenderWindow.resize();
-
   widgetManager = vtkWidgetManager();
   widgetManager.setRenderer(localRenderWindow.getRenderer());
-
   planeWidget = vtkImplicitPlaneWidget();
-  const handle = widgetManager.addWidget(planeWidget);
-  handle.setAxisScale(AXIS_SCALE);
-  handle.setHandleSizeRatio(SIZE_RATIO);
-  handle.placeWidget(getSceneBounds());
-
+  widgetHandle = widgetManager.addWidget(planeWidget);
+  widgetHandle.setAxisScale(AXIS_SCALE);
+  widgetHandle.setHandleSizeRatio(SIZE_RATIO);
+  widgetHandle.placeWidget(getCubicBounds());
   if (planes.value[0].origin.every((val) => val === 0)) {
     planes.value[0].origin = getSceneCenter();
   }
-
   const widgetState = planeWidget.getWidgetState();
   widgetState.setOrigin(planes.value[0].origin);
   widgetState.setNormal(planes.value[0].normal);
-
-  widgetState.onModified(() => {
-    const origin = widgetState.getOrigin().map((val) => Number(val.toFixed(4)));
-    const normal = widgetState.getNormal().map((val) => Number(val.toFixed(4)));
-    if (!hasPlaneChanged(origin, normal, planes.value[0].origin, planes.value[0].normal)) {
-      return;
-    }
-
-    fromWidget = true;
-    planes.value[0].origin = origin;
-    planes.value[0].normal = normal;
-    fromWidget = false;
-    debouncedApply();
-  });
-
+  setupWidgetStateEvents(widgetState);
   syncLocalCamera();
 }
 
 watch(widgetContainer, (container) => {
   if (container) {
-    initLocalWidget(container);
+    const domElement = container.$el || container;
+    initLocalWidget(domElement);
   }
 });
 
@@ -194,12 +218,23 @@ function flipNormal(plane) {
   plane.normal = plane.normal.map((normal) => -normal);
 }
 
+function updateWidgetPlacement() {
+  if (!widgetHandle || !localRenderWindow) {
+    return;
+  }
+  widgetHandle.placeWidget(getCubicBounds());
+  widgetHandle.setAxisScale(AXIS_SCALE);
+  widgetHandle.setHandleSizeRatio(SIZE_RATIO);
+  syncLocalCamera();
+}
+
 const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
 
 watch(
   [show, targetAllVisible, selectedDatasetIds, allItems],
   ([visible]) => {
     if (visible) {
+      updateWidgetPlacement();
       debouncedApply();
     }
   },
@@ -276,10 +311,11 @@ function close() {
     </template>
 
     <v-card-text v-if="isExpanded" class="pa-3 max-panel-height overflow-y-auto">
-      <div
+      <v-sheet
         ref="widgetContainer"
+        height="180"
+        color="transparent"
         class="rounded-lg mb-3 overflow-hidden"
-        style="height: 180px; background: transparent"
       />
       <v-switch
         v-model="targetAllVisible"
@@ -306,10 +342,12 @@ function close() {
 
       <v-divider class="my-2" />
 
-      <div class="d-flex align-center justify-space-between mb-2">
-        <span class="text-caption font-weight-bold">Planes ({{ planes.length }})</span>
-        <v-btn size="x-small" variant="tonal" color="primary" icon="mdi-plus" @click="addPlane" />
-      </div>
+      <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 size="x-small" variant="tonal" color="primary" icon="mdi-plus" @click="addPlane" />
+        </v-col>
+      </v-row>
 
       <v-card
         v-for="(plane, idx) in planes"
@@ -317,18 +355,22 @@ function close() {
         variant="outlined"
         class="pa-2 mb-3 rounded-lg border-opacity-25"
       >
-        <div class="d-flex align-center justify-space-between mb-1">
-          <span class="text-caption font-weight-medium">Plane #{{ idx + 1 }}</span>
-          <v-btn
-            icon="mdi-trash-can-outline"
-            size="x-small"
-            variant="text"
-            color="error"
-            @click="removePlane(idx)"
-          />
-        </div>
-
-        <div class="text-caption text-medium-emphasis mb-1">Origin [X, Y, Z]</div>
+        <v-row align="center" justify="space-between" no-gutters class="mb-1">
+          <v-col class="text-caption font-weight-medium">Plane #{{ idx + 1 }}</v-col>
+          <v-col cols="auto">
+            <v-btn
+              icon="mdi-trash-can-outline"
+              size="x-small"
+              variant="text"
+              color="error"
+              @click="removePlane(idx)"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row no-gutters class="mb-1">
+          <v-col class="text-caption text-medium-emphasis">Origin [X, Y, Z]</v-col>
+        </v-row>
         <v-row dense class="mb-2">
           <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
             <v-text-field
@@ -343,19 +385,21 @@ function close() {
           </v-col>
         </v-row>
 
-        <div class="d-flex align-center justify-space-between mb-1">
-          <span class="text-caption text-medium-emphasis">Normal [X, Y, Z]</span>
-          <v-btn
-            size="x-small"
-            variant="text"
-            color="primary"
-            prepend-icon="mdi-swap-horizontal"
-            class="text-none text-caption px-1"
-            @click="flipNormal(plane)"
-          >
-            Invert Normal
-          </v-btn>
-        </div>
+        <v-row align="center" justify="space-between" no-gutters class="mb-1">
+          <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
+          <v-col cols="auto">
+            <v-btn
+              size="x-small"
+              variant="text"
+              color="primary"
+              prepend-icon="mdi-swap-horizontal"
+              class="text-none text-caption px-1"
+              @click="flipNormal(plane)"
+            >
+              Invert Normal
+            </v-btn>
+          </v-col>
+        </v-row>
         <v-row dense>
           <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
             <v-text-field

From 7f145f9aee35749cee16e3f1b6c5db256a445cf0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 30 Jul 2026 14:49:01 +0200
Subject: [PATCH 05/14] toolPanel with new prop clickOutside

---
 app/components/ClippingPlanes.vue | 32 +++----------------------------
 app/components/ToolPanel.vue      |  5 +++--
 2 files changed, 6 insertions(+), 31 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 14df7d51..8630d6d9 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -1,5 +1,5 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer_camera";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
@@ -289,27 +289,7 @@ function close() {
 </script>
 
 <template>
-  <GlassCard
-    v-if="show"
-    title="Clipping Planes"
-    :width="360"
-    variant="panel"
-    padding="pa-0"
-    class="position-absolute rounded-xl elevation-24 clipping-planes-panel"
-  >
-    <template #header-actions>
-      <v-btn
-        icon="mdi-chevron-down"
-        variant="text"
-        density="compact"
-        size="small"
-        class="mr-1"
-        :style="{ transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)' }"
-        @click="isExpanded = !isExpanded"
-      />
-      <v-btn icon="mdi-close" variant="text" density="compact" size="small" @click="close" />
-    </template>
-
+  <ToolPanel v-model="show" title="Clipping Planes" :width="360" :click-outside="false">
     <v-card-text v-if="isExpanded" class="pa-3 max-panel-height overflow-y-auto">
       <v-sheet
         ref="widgetContainer"
@@ -438,16 +418,10 @@ function close() {
         </v-btn>
       </v-card-actions>
     </template>
-  </GlassCard>
+  </ToolPanel>
 </template>
 
 <style scoped>
-.clipping-planes-panel {
-  z-index: 2;
-  bottom: 20px;
-  right: 65px;
-}
-
 .max-panel-height {
   max-height: 520px;
 }
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index af868be3..93fef2b9 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -1,11 +1,12 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 
-const { title, width, closeLabel, actionLabel } = defineProps({
+const { title, width, closeLabel, actionLabel, clickOutside } = defineProps({
   title: { type: String, default: "" },
   width: { type: Number, default: 260 },
   closeLabel: { type: String, default: "Close" },
   actionLabel: { type: String, default: undefined },
+  clickOutside: { type: Boolean, default: true },
 });
 
 const model = defineModel({ type: Boolean, default: false });
@@ -19,7 +20,7 @@ function close() {
 <template>
   <GlassCard
     v-if="model"
-    v-click-outside="close"
+    v-click-outside="{ handler: close, closeConditional: () => clickOutside }"
     :title="title"
     :width="width"
     :ripple="false"

From 07615176de25f489c8754418dd713198ff96cf67 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 30 Jul 2026 15:44:57 +0200
Subject: [PATCH 06/14] feat(viewTool): Add a clipping_plane tool to Vease

---
 app/components/ClippingPlanes.vue | 43 +++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 8630d6d9..5ba9c786 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -17,7 +17,6 @@ const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 
-const isExpanded = ref(true);
 const targetAllVisible = ref(true);
 const selectedDatasetIds = ref([]);
 const planes = ref([{ origin: [0, 0, 0], normal: [1, 0, 0] }]);
@@ -137,7 +136,20 @@ function setupWidgetStateEvents(widgetState) {
   });
 }
 
+function cleanupLocalWidget() {
+  maxDistance = 0;
+  isLimitingCameraZoom = false;
+  if (localRenderWindow) {
+    localRenderWindow.delete();
+    localRenderWindow = undefined;
+    widgetManager = undefined;
+    planeWidget = undefined;
+    widgetHandle = undefined;
+  }
+}
+
 function initLocalWidget(container) {
+  cleanupLocalWidget();
   container.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
   localRenderWindow = vtkGenericRenderWindow({
     background: [0, 0, 0, 0],
@@ -155,12 +167,12 @@ function initLocalWidget(container) {
   widgetHandle = widgetManager.addWidget(planeWidget);
   widgetHandle.setAxisScale(AXIS_SCALE);
   widgetHandle.setHandleSizeRatio(SIZE_RATIO);
-  widgetHandle.placeWidget(getCubicBounds());
-  if (planes.value[0].origin.every((val) => val === 0)) {
-    planes.value[0].origin = getSceneCenter();
-  }
+  const bounds = getCubicBounds();
+  widgetHandle.placeWidget(bounds);
+  const center = getSceneCenter();
+  planes.value[0].origin = center;
   const widgetState = planeWidget.getWidgetState();
-  widgetState.setOrigin(planes.value[0].origin);
+  widgetState.setOrigin(center);
   widgetState.setNormal(planes.value[0].normal);
   setupWidgetStateEvents(widgetState);
   syncLocalCamera();
@@ -189,7 +201,7 @@ watch(
 );
 
 onBeforeUnmount(() => {
-  localRenderWindow?.delete();
+  cleanupLocalWidget();
 });
 
 function syncLocalCamera() {
@@ -222,9 +234,16 @@ function updateWidgetPlacement() {
   if (!widgetHandle || !localRenderWindow) {
     return;
   }
-  widgetHandle.placeWidget(getCubicBounds());
+  maxDistance = 0;
+  const bounds = getCubicBounds();
+  widgetHandle.placeWidget(bounds);
   widgetHandle.setAxisScale(AXIS_SCALE);
   widgetHandle.setHandleSizeRatio(SIZE_RATIO);
+  const center = getSceneCenter();
+  planes.value[0].origin = center;
+  if (planeWidget) {
+    planeWidget.getWidgetState().setOrigin(center);
+  }
   syncLocalCamera();
 }
 
@@ -282,15 +301,11 @@ async function removeClippingPlanes() {
     await hybridViewerStore.setClippingPlanes(allIds, []);
   }
 }
-
-function close() {
-  show.value = false;
-}
 </script>
 
 <template>
   <ToolPanel v-model="show" title="Clipping Planes" :width="360" :click-outside="false">
-    <v-card-text v-if="isExpanded" class="pa-3 max-panel-height overflow-y-auto">
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto">
       <v-sheet
         ref="widgetContainer"
         height="180"
@@ -397,7 +412,7 @@ function close() {
     </v-card-text>
 
     <template #actions>
-      <v-card-actions v-if="isExpanded" class="justify-space-between px-3 pb-3 pt-0">
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
         <v-btn
           variant="text"
           size="small"

From 20aad12110705ea07b7cce7f75bf2eb73e940573 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 30 Jul 2026 15:48:25 +0200
Subject: [PATCH 07/14] refacto a bit

---
 app/components/ClippingPlanes.vue | 82 +++++++++++++------------------
 1 file changed, 34 insertions(+), 48 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 5ba9c786..37e5bba3 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -35,7 +35,7 @@ let fromWidget = false;
 let maxDistance = 0;
 let isLimitingCameraZoom = false;
 
-function getSceneBounds() {
+function getSceneBoundsInfo() {
   const targetIds = targetAllVisible.value
     ? allItems.value.map((item) => item.id)
     : selectedDatasetIds.value;
@@ -49,38 +49,33 @@ function getSceneBounds() {
           .filter(Boolean);
 
   if (activeActors.length === 0) {
-    return [-1, 1, -1, 1, -1, 1];
+    return {
+      center: [0, 0, 0],
+      cubicBounds: [-1, 1, -1, 1, -1, 1],
+    };
   }
-  let combinedBounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
+
+  let bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
   for (const actor of activeActors) {
-    const bounds = actor.getBounds();
-    combinedBounds = [
-      Math.min(combinedBounds[0], bounds[0]),
-      Math.max(combinedBounds[1], bounds[1]),
-      Math.min(combinedBounds[2], bounds[2]),
-      Math.max(combinedBounds[3], bounds[3]),
-      Math.min(combinedBounds[4], bounds[4]),
-      Math.max(combinedBounds[5], bounds[5]),
+    const actorBounds = actor.getBounds();
+    bounds = [
+      Math.min(bounds[0], actorBounds[0]),
+      Math.max(bounds[1], actorBounds[1]),
+      Math.min(bounds[2], actorBounds[2]),
+      Math.max(bounds[3], actorBounds[3]),
+      Math.min(bounds[4], actorBounds[4]),
+      Math.max(bounds[5], actorBounds[5]),
     ];
   }
-  return combinedBounds;
-}
 
-function getSceneCenter() {
-  const [xmin, xmax, ymin, ymax, zmin, zmax] = getSceneBounds();
-  return [
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = bounds;
+  const center = [
     Number(((xmin + xmax) / 2).toFixed(4)),
     Number(((ymin + ymax) / 2).toFixed(4)),
     Number(((zmin + zmax) / 2).toFixed(4)),
   ];
-}
-
-function getCubicBounds() {
-  const [xmin, xmax, ymin, ymax, zmin, zmax] = getSceneBounds();
-  const center = [(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2];
   const halfExtent = Math.max(xmax - xmin, ymax - ymin, zmax - zmin) / 2;
-
-  return [
+  const cubicBounds = [
     center[0] - halfExtent,
     center[0] + halfExtent,
     center[1] - halfExtent,
@@ -88,6 +83,12 @@ function getCubicBounds() {
     center[2] - halfExtent,
     center[2] + halfExtent,
   ];
+
+  return { center, cubicBounds };
+}
+
+function getSceneCenter() {
+  return getSceneBoundsInfo().center;
 }
 
 function hasPlaneChanged(origin, normal, currentOrigin, currentNormal) {
@@ -158,24 +159,17 @@ function initLocalWidget(container) {
   localRenderWindow.setContainer(container);
   const camera = localRenderWindow.getRenderer().getActiveCamera();
   camera.onModified(() => limitCameraZoomOut(camera));
+
   const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
   Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
   localRenderWindow.resize();
+
   widgetManager = vtkWidgetManager();
   widgetManager.setRenderer(localRenderWindow.getRenderer());
   planeWidget = vtkImplicitPlaneWidget();
   widgetHandle = widgetManager.addWidget(planeWidget);
-  widgetHandle.setAxisScale(AXIS_SCALE);
-  widgetHandle.setHandleSizeRatio(SIZE_RATIO);
-  const bounds = getCubicBounds();
-  widgetHandle.placeWidget(bounds);
-  const center = getSceneCenter();
-  planes.value[0].origin = center;
-  const widgetState = planeWidget.getWidgetState();
-  widgetState.setOrigin(center);
-  widgetState.setNormal(planes.value[0].normal);
-  setupWidgetStateEvents(widgetState);
-  syncLocalCamera();
+  updateWidgetPlacement();
+  setupWidgetStateEvents(planeWidget.getWidgetState());
 }
 
 watch(widgetContainer, (container) => {
@@ -235,15 +229,12 @@ function updateWidgetPlacement() {
     return;
   }
   maxDistance = 0;
-  const bounds = getCubicBounds();
-  widgetHandle.placeWidget(bounds);
+  const { center, cubicBounds } = getSceneBoundsInfo();
+  widgetHandle.placeWidget(cubicBounds);
   widgetHandle.setAxisScale(AXIS_SCALE);
   widgetHandle.setHandleSizeRatio(SIZE_RATIO);
-  const center = getSceneCenter();
   planes.value[0].origin = center;
-  if (planeWidget) {
-    planeWidget.getWidgetState().setOrigin(center);
-  }
+  planeWidget?.getWidgetState().setOrigin(center);
   syncLocalCamera();
 }
 
@@ -283,14 +274,9 @@ async function applyClippingPlanes() {
 
 async function resetClippingPlanes() {
   fromWidget = true;
-  const center = getSceneCenter();
-  planes.value = [{ origin: center, normal: [1, 0, 0] }];
-  if (planeWidget) {
-    const widgetState = planeWidget.getWidgetState();
-    widgetState.setOrigin(center);
-    widgetState.setNormal([1, 0, 0]);
-    localRenderWindow.getRenderWindow().render();
-  }
+  planes.value[0].normal = [1, 0, 0];
+  planeWidget?.getWidgetState().setNormal([1, 0, 0]);
+  updateWidgetPlacement();
   fromWidget = false;
   await applyClippingPlanes();
 }

From 1abcb08d274055e7512fded922f4ec5eedea5c3b Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 31 Jul 2026 11:22:51 +0200
Subject: [PATCH 08/14] utils for clipping_plane widget

---
 app/components/ClippingPlanes.vue         | 338 +++++++---------------
 app/composables/clipping_planes_widget.js | 260 +++++++++++++++++
 app/utils/clipping_planes.js              | 110 +++++++
 3 files changed, 476 insertions(+), 232 deletions(-)
 create mode 100644 app/composables/clipping_planes_widget.js
 create mode 100644 app/utils/clipping_planes.js

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 37e5bba3..d13fdda3 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -1,247 +1,112 @@
 <script setup>
+import {
+  DEBOUNCE_DELAY,
+  DEFAULT_NORMALS,
+  getPlaneCssColor,
+} from "@ogw_front/utils/clipping_planes";
 import ToolPanel from "@ogw_front/components/ToolPanel";
-import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer_camera";
+import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
-import { newInstance as vtkImplicitPlaneWidget } from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
-import { newInstance as vtkWidgetManager } from "@kitware/vtk.js/Widgets/Core/WidgetManager";
-
-const AXIS_SCALE = 0.45;
-const SIZE_RATIO = 0.1;
-const DEBOUNCE_DELAY = 200;
-const CHANGE_THRESHOLD = 1e-4;
 
 const show = defineModel("show", { type: Boolean, default: false });
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
-
 const targetAllVisible = ref(true);
 const selectedDatasetIds = ref([]);
-const planes = ref([{ origin: [0, 0, 0], normal: [1, 0, 0] }]);
-
+const planes = ref([{ origin: undefined, normal: [1, 0, 0] }]);
 const allItems = dataStore.refAllItems();
 const availableDatasets = computed(() =>
   allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
 );
-
 const widgetContainer = useTemplateRef("widgetContainer");
-let localRenderWindow = undefined;
-let widgetManager = undefined;
-let planeWidget = undefined;
-let widgetHandle = undefined;
-let fromWidget = false;
-let maxDistance = 0;
-let isLimitingCameraZoom = false;
-
-function getSceneBoundsInfo() {
-  const targetIds = targetAllVisible.value
-    ? allItems.value.map((item) => item.id)
-    : selectedDatasetIds.value;
-
-  const actors = targetIds.map((id) => hybridViewerStore.hybridDb[id]?.actor).filter(Boolean);
-  const activeActors =
-    actors.length > 0
-      ? actors
-      : Object.values(hybridViewerStore.hybridDb)
-          .map((entry) => entry.actor)
-          .filter(Boolean);
-
-  if (activeActors.length === 0) {
-    return {
-      center: [0, 0, 0],
-      cubicBounds: [-1, 1, -1, 1, -1, 1],
-    };
-  }
-
-  let bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
-  for (const actor of activeActors) {
-    const actorBounds = actor.getBounds();
-    bounds = [
-      Math.min(bounds[0], actorBounds[0]),
-      Math.max(bounds[1], actorBounds[1]),
-      Math.min(bounds[2], actorBounds[2]),
-      Math.max(bounds[3], actorBounds[3]),
-      Math.min(bounds[4], actorBounds[4]),
-      Math.max(bounds[5], actorBounds[5]),
-    ];
-  }
-
-  const [xmin, xmax, ymin, ymax, zmin, zmax] = bounds;
-  const center = [
-    Number(((xmin + xmax) / 2).toFixed(4)),
-    Number(((ymin + ymax) / 2).toFixed(4)),
-    Number(((zmin + zmax) / 2).toFixed(4)),
-  ];
-  const halfExtent = Math.max(xmax - xmin, ymax - ymin, zmax - zmin) / 2;
-  const cubicBounds = [
-    center[0] - halfExtent,
-    center[0] + halfExtent,
-    center[1] - halfExtent,
-    center[1] + halfExtent,
-    center[2] - halfExtent,
-    center[2] + halfExtent,
-  ];
+const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
+const {
+  getSceneCenter,
+  syncWidgets,
+  syncLocalCamera,
+  cleanupLocalWidget,
+  initLocalWidget,
+  updateWidgetPlacement,
+  isFromWidget,
+  setFromWidget,
+} = useClippingPlanesWidget({
+  planes,
+  targetAllVisible,
+  selectedDatasetIds,
+  allItems,
+  hybridViewerStore,
+  debouncedApply,
+});
 
-  return { center, cubicBounds };
+function addPlane() {
+  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length];
+  planes.value.push({ origin: getSceneCenter(), normal });
 }
 
-function getSceneCenter() {
-  return getSceneBoundsInfo().center;
+function removePlane(index) {
+  planes.value.splice(index, 1);
 }
 
-function hasPlaneChanged(origin, normal, currentOrigin, currentNormal) {
-  return (
-    origin.some((val, idx) => Math.abs(val - currentOrigin[idx]) > CHANGE_THRESHOLD) ||
-    normal.some((val, idx) => Math.abs(val - currentNormal[idx]) > CHANGE_THRESHOLD)
-  );
+function flipNormal(plane) {
+  plane.normal = plane.normal.map((component) => -component);
+  syncWidgets();
+  applyClippingPlanes();
 }
 
-function limitCameraZoomOut(camera) {
-  if (maxDistance <= 0 || isLimitingCameraZoom) {
-    return;
-  }
-  const currentDist = camera.getDistance();
-  if (currentDist <= maxDistance + CHANGE_THRESHOLD) {
+async function applyClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length === 0) {
     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 setupWidgetStateEvents(widgetState) {
-  widgetState.onModified(() => {
-    const origin = widgetState.getOrigin().map((val) => Number(val.toFixed(4)));
-    const normal = widgetState.getNormal().map((val) => Number(val.toFixed(4)));
-    if (!hasPlaneChanged(origin, normal, planes.value[0].origin, planes.value[0].normal)) {
-      return;
-    }
-
-    fromWidget = true;
-    planes.value[0].origin = origin;
-    planes.value[0].normal = normal;
-    fromWidget = false;
-    debouncedApply();
-  });
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+  const planesData = planes.value
+    .filter((plane) => plane.origin !== undefined && plane.origin !== null)
+    .map((plane) => ({
+      origin: plane.origin.map(Number),
+      normal: plane.normal.map(Number),
+    }));
+  await Promise.all([
+    targetIds.length > 0 && hybridViewerStore.setClippingPlanes(targetIds, planesData),
+    untargetedIds.length > 0 && hybridViewerStore.setClippingPlanes(untargetedIds, []),
+  ]);
 }
 
-function cleanupLocalWidget() {
-  maxDistance = 0;
-  isLimitingCameraZoom = false;
-  if (localRenderWindow) {
-    localRenderWindow.delete();
-    localRenderWindow = undefined;
-    widgetManager = undefined;
-    planeWidget = undefined;
-    widgetHandle = undefined;
-  }
+async function resetClippingPlanes() {
+  setFromWidget(true);
+  planes.value = [{ origin: undefined, normal: [1, 0, 0] }];
+  updateWidgetPlacement({ isReset: true });
+  setFromWidget(false);
+  await applyClippingPlanes();
 }
 
-function initLocalWidget(container) {
-  cleanupLocalWidget();
-  container.addEventListener("wheel", (event) => 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));
-
-  const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
-  Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
-  localRenderWindow.resize();
-
-  widgetManager = vtkWidgetManager();
-  widgetManager.setRenderer(localRenderWindow.getRenderer());
-  planeWidget = vtkImplicitPlaneWidget();
-  widgetHandle = widgetManager.addWidget(planeWidget);
-  updateWidgetPlacement();
-  setupWidgetStateEvents(planeWidget.getWidgetState());
+async function removeClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  await hybridViewerStore.setClippingPlanes(allIds, []);
 }
 
 watch(widgetContainer, (container) => {
   if (container) {
-    const domElement = container.$el || container;
-    initLocalWidget(domElement);
+    initLocalWidget(container.$el || container);
   }
 });
 
 watch(
   planes,
   () => {
-    if (fromWidget || !planeWidget) {
+    if (isFromWidget()) {
       return;
     }
-    const widgetState = planeWidget.getWidgetState();
-    widgetState.setOrigin(planes.value[0].origin);
-    widgetState.setNormal(planes.value[0].normal);
-    localRenderWindow.getRenderWindow().render();
+    syncWidgets();
     debouncedApply();
   },
   { deep: true },
 );
 
-onBeforeUnmount(() => {
-  cleanupLocalWidget();
-});
-
-function syncLocalCamera() {
-  if (!localRenderWindow) {
-    return;
-  }
-  const renderer = localRenderWindow.getRenderer();
-  const camera = renderer.getActiveCamera();
-  applyCameraOptions(camera, hybridViewerStore.camera_options);
-  renderer.resetCamera();
-  maxDistance = camera.getDistance();
-  localRenderWindow.getRenderWindow().render();
-}
-
-watch(() => hybridViewerStore.camera_options, syncLocalCamera, { deep: true });
-
-function addPlane() {
-  planes.value.push({ origin: getSceneCenter(), normal: [1, 0, 0] });
-}
-
-function removePlane(index) {
-  planes.value.splice(index, 1);
-}
-
-function flipNormal(plane) {
-  plane.normal = plane.normal.map((normal) => -normal);
-}
-
-function updateWidgetPlacement() {
-  if (!widgetHandle || !localRenderWindow) {
-    return;
-  }
-  maxDistance = 0;
-  const { center, cubicBounds } = getSceneBoundsInfo();
-  widgetHandle.placeWidget(cubicBounds);
-  widgetHandle.setAxisScale(AXIS_SCALE);
-  widgetHandle.setHandleSizeRatio(SIZE_RATIO);
-  planes.value[0].origin = center;
-  planeWidget?.getWidgetState().setOrigin(center);
-  syncLocalCamera();
-}
-
-const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
-
 watch(
-  [show, targetAllVisible, selectedDatasetIds, allItems],
+  [show, targetAllVisible, selectedDatasetIds],
   ([visible]) => {
     if (visible) {
       updateWidgetPlacement();
@@ -251,42 +116,26 @@ watch(
   { immediate: true },
 );
 
-async function applyClippingPlanes() {
-  const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length === 0) {
-    return;
+watch(allItems, () => {
+  if (show.value) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
   }
+});
 
-  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
-  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
-  const planesData = planes.value.map((plane) => ({
-    origin: plane.origin.map(Number),
-    normal: plane.normal.map(Number),
-  }));
-
-  if (targetIds.length > 0) {
-    await hybridViewerStore.setClippingPlanes(targetIds, planesData);
-  }
-  if (untargetedIds.length > 0) {
-    await hybridViewerStore.setClippingPlanes(untargetedIds, []);
-  }
-}
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
+    }
+  },
+);
 
-async function resetClippingPlanes() {
-  fromWidget = true;
-  planes.value[0].normal = [1, 0, 0];
-  planeWidget?.getWidgetState().setNormal([1, 0, 0]);
-  updateWidgetPlacement();
-  fromWidget = false;
-  await applyClippingPlanes();
-}
+watch(() => hybridViewerStore.camera_options, syncLocalCamera, { deep: true });
 
-async function removeClippingPlanes() {
-  const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length > 0) {
-    await hybridViewerStore.setClippingPlanes(allIds, []);
-  }
-}
+onBeforeUnmount(cleanupLocalWidget);
 </script>
 
 <template>
@@ -334,10 +183,23 @@ async function removeClippingPlanes() {
         v-for="(plane, idx) in planes"
         :key="idx"
         variant="outlined"
-        class="pa-2 mb-3 rounded-lg border-opacity-25"
+        class="pa-2 mb-3 rounded-lg border-opacity-50"
+        :style="{ borderColor: getPlaneCssColor(idx) }"
       >
         <v-row align="center" justify="space-between" no-gutters class="mb-1">
-          <v-col class="text-caption font-weight-medium">Plane #{{ idx + 1 }}</v-col>
+          <v-col cols="auto" class="d-flex align-center">
+            <v-chip
+              size="x-small"
+              variant="flat"
+              :style="{
+                backgroundColor: getPlaneCssColor(idx),
+                color: 'white',
+              }"
+              class="font-weight-bold"
+            >
+              Plane #{{ idx + 1 }}
+            </v-chip>
+          </v-col>
           <v-col cols="auto">
             <v-btn
               icon="mdi-trash-can-outline"
@@ -352,7 +214,7 @@ async function removeClippingPlanes() {
         <v-row no-gutters class="mb-1">
           <v-col class="text-caption text-medium-emphasis">Origin [X, Y, Z]</v-col>
         </v-row>
-        <v-row dense class="mb-2">
+        <v-row v-if="plane.origin" dense class="mb-2">
           <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.origin[axis - 1]"
@@ -365,6 +227,18 @@ async function removeClippingPlanes() {
             />
           </v-col>
         </v-row>
+        <v-row v-else dense class="mb-2">
+          <v-col v-for="axis in 3" :key="'orig-placeholder-' + axis" cols="4">
+            <v-text-field
+              placeholder="—"
+              variant="outlined"
+              density="compact"
+              hide-details
+              disabled
+              class="text-caption"
+            />
+          </v-col>
+        </v-row>
 
         <v-row align="center" justify="space-between" no-gutters class="mb-1">
           <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
diff --git a/app/composables/clipping_planes_widget.js b/app/composables/clipping_planes_widget.js
new file mode 100644
index 00000000..2d21565b
--- /dev/null
+++ b/app/composables/clipping_planes_widget.js
@@ -0,0 +1,260 @@
+import {
+  AXIS_SCALE,
+  CHANGE_THRESHOLD,
+  PLANE_COLORS,
+  SIZE_RATIO,
+  computeSceneBoundsInfo,
+  getPlaneStyle,
+  hasPlaneChanged,
+} from "@ogw_front/utils/clipping_planes";
+import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+import { newInstance as vtkImplicitPlaneWidget } from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
+import { newInstance as vtkWidgetManager } from "@kitware/vtk.js/Widgets/Core/WidgetManager";
+
+// oxlint-disable-next-line max-params max-lines-per-function
+export function useClippingPlanesWidget({
+  planes,
+  targetAllVisible,
+  selectedDatasetIds,
+  allItems,
+  hybridViewerStore,
+  debouncedApply,
+}) {
+  let localRenderWindow = undefined;
+  let widgetManager = undefined;
+  let widgetEntries = [];
+  let fromWidget = false;
+  let maxDistance = 0;
+  let isLimitingCameraZoom = false;
+
+  function resolveActiveActors() {
+    const targetIds = targetAllVisible.value
+      ? allItems.value.map((item) => item.id)
+      : selectedDatasetIds.value;
+    const targeted = targetIds
+      .map((id) => {
+        const item = hybridViewerStore.hybridDb[id];
+        return item ? item.actor : undefined;
+      })
+      .filter(Boolean);
+    if (targeted.length > 0) {
+      return targeted;
+    }
+    return Object.values(hybridViewerStore.hybridDb)
+      .map((entry) => entry && entry.actor)
+      .filter(Boolean);
+  }
+
+  function getSceneBoundsInfo() {
+    return computeSceneBoundsInfo(resolveActiveActors());
+  }
+
+  function getSceneCenter() {
+    return getSceneBoundsInfo().center;
+  }
+
+  function createWidgetEntry(planeWidget, widgetHandle, planeIndex) {
+    const widgetState = planeWidget.getWidgetState();
+    const plane = planes.value[planeIndex];
+    if (plane.origin) {
+      widgetState.setOrigin(plane.origin);
+    }
+    widgetState.setNormal(plane.normal);
+    const subscription = widgetState.onModified(() => {
+      if (fromWidget) {
+        return;
+      }
+      const origin = widgetState.getOrigin().map((val) => Number(val.toFixed(4)));
+      const normal = widgetState.getNormal().map((val) => Number(val.toFixed(4)));
+      if (
+        !hasPlaneChanged(
+          origin,
+          normal,
+          planes.value[planeIndex].origin,
+          planes.value[planeIndex].normal,
+        )
+      ) {
+        return;
+      }
+      fromWidget = true;
+      planes.value[planeIndex].origin = origin;
+      planes.value[planeIndex].normal = normal;
+      nextTick(() => {
+        fromWidget = false;
+      });
+      debouncedApply();
+    });
+
+    return { planeWidget, widgetHandle, subscription };
+  }
+
+  function syncWidgets() {
+    if (!widgetManager || !localRenderWindow) {
+      return;
+    }
+    while (widgetEntries.length > planes.value.length) {
+      const entry = widgetEntries.pop();
+      entry.subscription.unsubscribe();
+      widgetManager.removeWidget(entry.planeWidget);
+      entry.planeWidget.delete();
+    }
+    const { cubicBounds } = getSceneBoundsInfo();
+    for (const [idx, plane] of planes.value.entries()) {
+      const rgb = PLANE_COLORS[idx % PLANE_COLORS.length];
+      if (!widgetEntries[idx]) {
+        const planeWidget = vtkImplicitPlaneWidget();
+        const widgetHandle = widgetManager.addWidget(planeWidget);
+        widgetHandle.setAxisScale(AXIS_SCALE);
+        widgetHandle.setHandleSizeRatio(SIZE_RATIO);
+        widgetEntries.push(createWidgetEntry(planeWidget, widgetHandle, idx));
+      }
+      const entry = widgetEntries[idx];
+      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);
+    }
+    localRenderWindow.getRenderWindow().render();
+  }
+
+  function limitCameraZoomOut(camera) {
+    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() {
+    if (!localRenderWindow) {
+      return;
+    }
+    const renderer = localRenderWindow.getRenderer();
+    const camera = renderer.getActiveCamera();
+    const mainCam = hybridViewerStore.camera_options;
+    const { center, cubicBounds } = getSceneBoundsInfo();
+    renderer.resetCamera(cubicBounds);
+    if (mainCam && mainCam.focal_point && mainCam.position) {
+      const dir = [
+        mainCam.position[0] - mainCam.focal_point[0],
+        mainCam.position[1] - mainCam.focal_point[1],
+        mainCam.position[2] - mainCam.focal_point[2],
+      ];
+      const dirLen = Math.hypot(...dir);
+      if (dirLen > 0) {
+        const distance = camera.getDistance();
+        const normDir = dir.map((component) => component / dirLen);
+        camera.setFocalPoint(...center);
+        camera.setPosition(
+          center[0] + normDir[0] * distance,
+          center[1] + normDir[1] * distance,
+          center[2] + normDir[2] * distance,
+        );
+        if (mainCam.view_up) {
+          camera.setViewUp(...mainCam.view_up);
+        }
+      }
+    }
+
+    limitCameraZoomOut(camera);
+    localRenderWindow.getRenderWindow().render();
+  }
+
+  function cleanupLocalWidget() {
+    maxDistance = 0;
+    isLimitingCameraZoom = false;
+    for (const entry of widgetEntries) {
+      entry.subscription.unsubscribe();
+      if (widgetManager) {
+        widgetManager.removeWidget(entry.planeWidget);
+      }
+      entry.planeWidget.delete();
+    }
+    widgetEntries = [];
+    if (localRenderWindow) {
+      localRenderWindow.delete();
+      localRenderWindow = undefined;
+      widgetManager = undefined;
+    }
+  }
+
+  function initLocalWidget(container) {
+    cleanupLocalWidget();
+    container.addEventListener("wheel", (event) => 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));
+    const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
+    Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
+    localRenderWindow.resize();
+    widgetManager = vtkWidgetManager();
+    widgetManager.setRenderer(localRenderWindow.getRenderer());
+    updateWidgetPlacement();
+  }
+
+  function updateWidgetPlacement({ isReset = false } = {}) {
+    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 isFromWidget() {
+    return fromWidget;
+  }
+
+  function setFromWidget(value) {
+    fromWidget = value;
+  }
+
+  return {
+    getSceneCenter,
+    syncWidgets,
+    syncLocalCamera,
+    cleanupLocalWidget,
+    initLocalWidget,
+    updateWidgetPlacement,
+    isFromWidget,
+    setFromWidget,
+  };
+}
diff --git a/app/utils/clipping_planes.js b/app/utils/clipping_planes.js
new file mode 100644
index 00000000..fb55b79a
--- /dev/null
+++ b/app/utils/clipping_planes.js
@@ -0,0 +1,110 @@
+const AXIS_SCALE = 0.45;
+const SIZE_RATIO = 0.1;
+const DEBOUNCE_DELAY = 200;
+const CHANGE_THRESHOLD = 1e-4;
+// oxlint-disable no-magic-numbers
+const COLOR_BLUE = [0.12, 0.53, 0.9];
+const COLOR_GREEN = [0.26, 0.63, 0.28];
+const COLOR_ORANGE = [0.98, 0.55, 0];
+const COLOR_PURPLE = [0.55, 0.14, 0.67];
+const COLOR_RED = [0.9, 0.22, 0.21];
+// oxlint-enable no-magic-numbers
+const PLANE_COLORS = [COLOR_BLUE, COLOR_GREEN, COLOR_ORANGE, COLOR_PURPLE, COLOR_RED];
+const NORMAL_X = [1, 0, 0];
+const NORMAL_Y = [0, 1, 0];
+const NORMAL_Z = [0, 0, 1];
+const DEFAULT_NORMALS = [NORMAL_X, NORMAL_Y, NORMAL_Z];
+const RGB_MAX_VALUE = 255;
+
+function getPlaneCssColor(index) {
+  const rgb = PLANE_COLORS[index % PLANE_COLORS.length];
+  return `rgb(${rgb.map((channel) => Math.round(channel * RGB_MAX_VALUE)).join(",")})`;
+}
+
+function hasPlaneChanged(origin, normal, currentOrigin, currentNormal) {
+  if (!currentOrigin) {
+    return true;
+  }
+  return (
+    origin.some((val, idx) => Math.abs(val - currentOrigin[idx]) > CHANGE_THRESHOLD) ||
+    normal.some((val, idx) => Math.abs(val - currentNormal[idx]) > CHANGE_THRESHOLD)
+  );
+}
+
+function getPlaneStyle(rgb) {
+  return {
+    active: {
+      plane: { opacity: 1, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    inactive: {
+      plane: { opacity: 0.5, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    static: {
+      display2D: { representation: 0 },
+      outline: { color: [1, 1, 1], opacity: 1, representation: 1, interpolation: 0 },
+    },
+  };
+}
+
+function computeSceneBounds(actors) {
+  let bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
+  for (const actor of actors) {
+    const boundsOfActor = actor.getBounds();
+    bounds = [
+      Math.min(bounds[0], boundsOfActor[0]),
+      Math.max(bounds[1], boundsOfActor[1]),
+      Math.min(bounds[2], boundsOfActor[2]),
+      Math.max(bounds[3], boundsOfActor[3]),
+      Math.min(bounds[4], boundsOfActor[4]),
+      Math.max(bounds[5], boundsOfActor[5]),
+    ];
+  }
+  return bounds;
+}
+
+function computeSceneBoundsInfo(actors) {
+  if (!actors || actors.length === 0) {
+    return { center: [0, 0, 0], cubicBounds: [-1, 1, -1, 1, -1, 1] };
+  }
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = computeSceneBounds(actors);
+  const center = [
+    Number(((xmin + xmax) / 2).toFixed(4)),
+    Number(((ymin + ymax) / 2).toFixed(4)),
+    Number(((zmin + zmax) / 2).toFixed(4)),
+  ];
+
+  const maxActorExtent = Math.max(
+    ...actors.map((actor) => {
+      const bounds = actor.getBounds();
+      return Math.max(bounds[1] - bounds[0], bounds[3] - bounds[2], bounds[5] - bounds[4]);
+    }),
+  );
+  const halfExtent = maxActorExtent / 2;
+  const cubicBounds = [
+    center[0] - halfExtent,
+    center[0] + halfExtent,
+    center[1] - halfExtent,
+    center[1] + halfExtent,
+    center[2] - halfExtent,
+    center[2] + halfExtent,
+  ];
+  return { center, cubicBounds };
+}
+
+export {
+  AXIS_SCALE,
+  SIZE_RATIO,
+  DEBOUNCE_DELAY,
+  CHANGE_THRESHOLD,
+  PLANE_COLORS,
+  DEFAULT_NORMALS,
+  getPlaneCssColor,
+  hasPlaneChanged,
+  getPlaneStyle,
+  computeSceneBounds,
+  computeSceneBoundsInfo,
+};

From f1e16d8ce259045e098efc7426b21fb3487f51a3 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 31 Jul 2026 11:42:36 +0200
Subject: [PATCH 09/14] specific plan

---
 app/components/ClippingPlanes.vue | 41 +++++++++++++++++++------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index d13fdda3..5c93b2ac 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -60,18 +60,20 @@ async function applyClippingPlanes() {
   if (allIds.length === 0) {
     return;
   }
+  const center = getSceneCenter();
   const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
   const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
-  const planesData = planes.value
-    .filter((plane) => plane.origin !== undefined && plane.origin !== null)
-    .map((plane) => ({
-      origin: plane.origin.map(Number),
-      normal: plane.normal.map(Number),
-    }));
-  await Promise.all([
-    targetIds.length > 0 && hybridViewerStore.setClippingPlanes(targetIds, planesData),
-    untargetedIds.length > 0 && hybridViewerStore.setClippingPlanes(untargetedIds, []),
-  ]);
+  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 (untargetedIds.length > 0) {
+    await hybridViewerStore.setClippingPlanes(untargetedIds, []);
+  }
 }
 
 async function resetClippingPlanes() {
@@ -105,15 +107,22 @@ watch(
   { deep: true },
 );
 
+watch(show, (visible) => {
+  if (visible) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
+  }
+});
+
 watch(
-  [show, targetAllVisible, selectedDatasetIds],
-  ([visible]) => {
-    if (visible) {
-      updateWidgetPlacement();
-      debouncedApply();
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
     }
   },
-  { immediate: true },
+  { deep: true },
 );
 
 watch(allItems, () => {

From 5be3cae5e2da50f92fe5113553c93a2b46f279b8 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 31 Jul 2026 16:43:45 +0200
Subject: [PATCH 10/14] data-testId

---
 app/components/ClippingPlanes.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 5c93b2ac..093b3b0e 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -158,6 +158,7 @@ onBeforeUnmount(cleanupLocalWidget);
       />
       <v-switch
         v-model="targetAllVisible"
+        data-testid="targetAllVisibleSwitch"
         label="Apply to all visible datasets"
         color="primary"
         density="compact"
@@ -168,6 +169,7 @@ onBeforeUnmount(cleanupLocalWidget);
       <v-select
         v-if="!targetAllVisible"
         v-model="selectedDatasetIds"
+        data-testid="selectedDatasetsSelect"
         :items="availableDatasets"
         label="Select datasets"
         multiple
@@ -184,13 +186,21 @@ onBeforeUnmount(cleanupLocalWidget);
       <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 size="x-small" variant="tonal" color="primary" icon="mdi-plus" @click="addPlane" />
+          <v-btn
+            data-testid="addPlaneButton"
+            size="x-small"
+            variant="tonal"
+            color="primary"
+            icon="mdi-plus"
+            @click="addPlane"
+          />
         </v-col>
       </v-row>
 
       <v-card
         v-for="(plane, idx) in planes"
         :key="idx"
+        data-testid="planeCard"
         variant="outlined"
         class="pa-2 mb-3 rounded-lg border-opacity-50"
         :style="{ borderColor: getPlaneCssColor(idx) }"
@@ -211,6 +221,7 @@ onBeforeUnmount(cleanupLocalWidget);
           </v-col>
           <v-col cols="auto">
             <v-btn
+              data-testid="removePlaneButton"
               icon="mdi-trash-can-outline"
               size="x-small"
               variant="text"
@@ -227,6 +238,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.origin[axis - 1]"
+              data-testid="planeOriginInput"
               type="number"
               variant="outlined"
               density="compact"
@@ -253,6 +265,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
           <v-col cols="auto">
             <v-btn
+              data-testid="invertNormalButton"
               size="x-small"
               variant="text"
               color="primary"
@@ -268,6 +281,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.normal[axis - 1]"
+              data-testid="planeNormalInput"
               type="number"
               variant="outlined"
               density="compact"
@@ -283,6 +297,7 @@ onBeforeUnmount(cleanupLocalWidget);
     <template #actions>
       <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
         <v-btn
+          data-testid="removeClippingPlanesButton"
           variant="text"
           size="small"
           color="error"
@@ -292,6 +307,7 @@ onBeforeUnmount(cleanupLocalWidget);
           Remove Clipping
         </v-btn>
         <v-btn
+          data-testid="resetClippingPlanesButton"
           variant="tonal"
           size="small"
           color="secondary"

From c9552b11e3b7b917e013ce02e9dd3f7893162bfb Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 31 Jul 2026 16:54:08 +0200
Subject: [PATCH 11/14] dynamic id

---
 app/components/ClippingPlanes.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 093b3b0e..8baf2aea 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -200,7 +200,6 @@ onBeforeUnmount(cleanupLocalWidget);
       <v-card
         v-for="(plane, idx) in planes"
         :key="idx"
-        data-testid="planeCard"
         variant="outlined"
         class="pa-2 mb-3 rounded-lg border-opacity-50"
         :style="{ borderColor: getPlaneCssColor(idx) }"
@@ -221,7 +220,7 @@ onBeforeUnmount(cleanupLocalWidget);
           </v-col>
           <v-col cols="auto">
             <v-btn
-              data-testid="removePlaneButton"
+              :data-testid="`removePlaneButton_${idx}`"
               icon="mdi-trash-can-outline"
               size="x-small"
               variant="text"
@@ -238,7 +237,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.origin[axis - 1]"
-              data-testid="planeOriginInput"
+              :data-testid="`planeOriginInput_${idx}_${axis - 1}`"
               type="number"
               variant="outlined"
               density="compact"
@@ -265,7 +264,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
           <v-col cols="auto">
             <v-btn
-              data-testid="invertNormalButton"
+              :data-testid="`invertNormalButton_${idx}`"
               size="x-small"
               variant="text"
               color="primary"
@@ -281,7 +280,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.normal[axis - 1]"
-              data-testid="planeNormalInput"
+              :data-testid="`planeNormalInput_${idx}_${axis - 1}`"
               type="number"
               variant="outlined"
               density="compact"

From 0e96f1781450240c318719a06e924d033e0979d7 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 31 Jul 2026 17:00:47 +0200
Subject: [PATCH 12/14] revert

---
 app/components/ClippingPlanes.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 8baf2aea..093b3b0e 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -200,6 +200,7 @@ onBeforeUnmount(cleanupLocalWidget);
       <v-card
         v-for="(plane, idx) in planes"
         :key="idx"
+        data-testid="planeCard"
         variant="outlined"
         class="pa-2 mb-3 rounded-lg border-opacity-50"
         :style="{ borderColor: getPlaneCssColor(idx) }"
@@ -220,7 +221,7 @@ onBeforeUnmount(cleanupLocalWidget);
           </v-col>
           <v-col cols="auto">
             <v-btn
-              :data-testid="`removePlaneButton_${idx}`"
+              data-testid="removePlaneButton"
               icon="mdi-trash-can-outline"
               size="x-small"
               variant="text"
@@ -237,7 +238,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.origin[axis - 1]"
-              :data-testid="`planeOriginInput_${idx}_${axis - 1}`"
+              data-testid="planeOriginInput"
               type="number"
               variant="outlined"
               density="compact"
@@ -264,7 +265,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
           <v-col cols="auto">
             <v-btn
-              :data-testid="`invertNormalButton_${idx}`"
+              data-testid="invertNormalButton"
               size="x-small"
               variant="text"
               color="primary"
@@ -280,7 +281,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.normal[axis - 1]"
-              :data-testid="`planeNormalInput_${idx}_${axis - 1}`"
+              data-testid="planeNormalInput"
               type="number"
               variant="outlined"
               density="compact"

From bad51518bf6834393e4af4fa1d156d3db8747900 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 31 Jul 2026 17:27:30 +0200
Subject: [PATCH 13/14] ids

---
 app/components/ClippingPlanes.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 093b3b0e..8baf2aea 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -200,7 +200,6 @@ onBeforeUnmount(cleanupLocalWidget);
       <v-card
         v-for="(plane, idx) in planes"
         :key="idx"
-        data-testid="planeCard"
         variant="outlined"
         class="pa-2 mb-3 rounded-lg border-opacity-50"
         :style="{ borderColor: getPlaneCssColor(idx) }"
@@ -221,7 +220,7 @@ onBeforeUnmount(cleanupLocalWidget);
           </v-col>
           <v-col cols="auto">
             <v-btn
-              data-testid="removePlaneButton"
+              :data-testid="`removePlaneButton_${idx}`"
               icon="mdi-trash-can-outline"
               size="x-small"
               variant="text"
@@ -238,7 +237,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.origin[axis - 1]"
-              data-testid="planeOriginInput"
+              :data-testid="`planeOriginInput_${idx}_${axis - 1}`"
               type="number"
               variant="outlined"
               density="compact"
@@ -265,7 +264,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
           <v-col cols="auto">
             <v-btn
-              data-testid="invertNormalButton"
+              :data-testid="`invertNormalButton_${idx}`"
               size="x-small"
               variant="text"
               color="primary"
@@ -281,7 +280,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.normal[axis - 1]"
-              data-testid="planeNormalInput"
+              :data-testid="`planeNormalInput_${idx}_${axis - 1}`"
               type="number"
               variant="outlined"
               density="compact"

From 3702f2f69149b446c03b6960033d851d8e72e852 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 31 Jul 2026 17:33:36 +0200
Subject: [PATCH 14/14] revert

---
 app/components/ClippingPlanes.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
index 8baf2aea..093b3b0e 100644
--- a/app/components/ClippingPlanes.vue
+++ b/app/components/ClippingPlanes.vue
@@ -200,6 +200,7 @@ onBeforeUnmount(cleanupLocalWidget);
       <v-card
         v-for="(plane, idx) in planes"
         :key="idx"
+        data-testid="planeCard"
         variant="outlined"
         class="pa-2 mb-3 rounded-lg border-opacity-50"
         :style="{ borderColor: getPlaneCssColor(idx) }"
@@ -220,7 +221,7 @@ onBeforeUnmount(cleanupLocalWidget);
           </v-col>
           <v-col cols="auto">
             <v-btn
-              :data-testid="`removePlaneButton_${idx}`"
+              data-testid="removePlaneButton"
               icon="mdi-trash-can-outline"
               size="x-small"
               variant="text"
@@ -237,7 +238,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.origin[axis - 1]"
-              :data-testid="`planeOriginInput_${idx}_${axis - 1}`"
+              data-testid="planeOriginInput"
               type="number"
               variant="outlined"
               density="compact"
@@ -264,7 +265,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
           <v-col cols="auto">
             <v-btn
-              :data-testid="`invertNormalButton_${idx}`"
+              data-testid="invertNormalButton"
               size="x-small"
               variant="text"
               color="primary"
@@ -280,7 +281,7 @@ onBeforeUnmount(cleanupLocalWidget);
           <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
             <v-text-field
               v-model.number="plane.normal[axis - 1]"
-              :data-testid="`planeNormalInput_${idx}_${axis - 1}`"
+              data-testid="planeNormalInput"
               type="number"
               variant="outlined"
               density="compact"