From 241cc18e7f2c5de17287984629459e60ac91419e Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Mon, 5 Oct 2026 15:27:24 +0200
Subject: [PATCH 1/7] feat(exploded_view):  exploded view tool [skip ci]

---
 app/components/ExplodeFilter.vue         | 188 +++++++++++++++++++++++
 app/components/ViewToolbar.vue           |  16 ++
 internal/stores/hybrid_viewer/filters.ts |  16 ++
 3 files changed, 220 insertions(+)
 create mode 100644 app/components/ExplodeFilter.vue

diff --git a/app/components/ExplodeFilter.vue b/app/components/ExplodeFilter.vue
new file mode 100644
index 00000000..1047bd2b
--- /dev/null
+++ b/app/components/ExplodeFilter.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const DEFAULT_EXPLODE_VALUE = 0.5;
+const MIN_EXPLODE_VALUE = 0;
+const MAX_EXPLODE_VALUE = 2;
+const DEBOUNCE_DELAY = 100;
+
+interface Props {
+  escapeFunction?: () => void;
+}
+
+const { escapeFunction = undefined } = defineProps<Props>();
+
+const show = defineModel<boolean>("show", { default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const targetAllVisible = ref<boolean>(true);
+const selectedDatasetIds = ref<string[]>([]);
+const explodeFactor = ref<number>(DEFAULT_EXPLODE_VALUE);
+
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed<{ title: string; value: string }[]>(() =>
+  allItems.value.map((item) => ({
+    title: item.name || item.id,
+    value: item.id,
+  })),
+);
+
+async function applyExplode(): Promise<void> {
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length === 0) {
+    return;
+  }
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+
+  if (targetIds.length > 0) {
+    await hybridViewerStore.setExplode(targetIds, Number(explodeFactor.value));
+  }
+  if (untargetedIds.length > 0) {
+    await hybridViewerStore.setExplode(untargetedIds, MIN_EXPLODE_VALUE);
+  }
+}
+
+const debouncedApply = useDebounceFn(() => applyExplode(), DEBOUNCE_DELAY);
+
+async function resetExplode(): Promise<void> {
+  explodeFactor.value = DEFAULT_EXPLODE_VALUE;
+  await applyExplode();
+}
+
+async function removeExplode(): Promise<void> {
+  explodeFactor.value = MIN_EXPLODE_VALUE;
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length > 0) {
+    await hybridViewerStore.setExplode(allIds, MIN_EXPLODE_VALUE);
+  }
+}
+
+watch(explodeFactor, () => {
+  debouncedApply();
+});
+
+watch(show, (visible) => {
+  if (visible) {
+    applyExplode();
+  }
+});
+
+watch(
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      applyExplode();
+    }
+  },
+  { deep: true },
+);
+
+watch(allItems, () => {
+  if (show.value) {
+    applyExplode();
+  }
+});
+
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      applyExplode();
+    }
+  },
+);
+</script>
+
+<template>
+  <ToolPanel
+    v-model="show"
+    title="Exploded View"
+    :width="340"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
+      <v-switch
+        v-model="targetAllVisible"
+        data-testid="explodeTargetAllVisibleSwitch"
+        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"
+        data-testid="explodeSelectedDatasetsSelect"
+        :items="availableDatasets"
+        label="Select datasets"
+        multiple
+        chips
+        closable-chips
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-divider class="my-3" />
+
+      <div class="d-flex align-center justify-space-between mb-1">
+        <span class="text-caption font-weight-bold">Explode Factor</span>
+        <span class="text-caption text-primary font-weight-bold">
+          {{ explodeFactor.toFixed(2) }}
+        </span>
+      </div>
+
+      <v-slider
+        v-model="explodeFactor"
+        data-testid="explodeFactorSlider"
+        :min="MIN_EXPLODE_VALUE"
+        :max="MAX_EXPLODE_VALUE"
+        step="0.01"
+        color="primary"
+        track-color="grey-lighten-2"
+        density="compact"
+        hide-details
+        class="my-2 px-1"
+      />
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          data-testid="removeExplodeButton"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeExplode"
+        >
+          Remove Explode
+        </v-btn>
+        <v-btn
+          data-testid="resetExplodeButton"
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetExplode"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index f86d5157..1d182bbc 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -7,6 +7,7 @@ import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.sv
 import CameraManager from "@ogw_front/components/CameraManager.vue";
 import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
 import ClippingPlanes from "@ogw_front/components/ClippingPlanes.vue";
+import ExplodeFilter from "@ogw_front/components/ExplodeFilter.vue";
 import Ruler from "@ogw_front/components/Ruler.vue";
 import Screenshot from "@ogw_front/components/Screenshot.vue";
 import ShrinkFilter from "@ogw_front/components/ShrinkFilter.vue";
@@ -26,6 +27,7 @@ const showCameraOrientation = ref<boolean>(false);
 const showZScaling = ref<boolean>(false);
 const showClippingPlanes = ref<boolean>(false);
 const showShrinkFilter = ref<boolean>(false);
+const showExplodeFilter = ref<boolean>(false);
 const showThresholdFilter = ref<boolean>(false);
 const showRuler = ref<boolean>(false);
 const gridScale = ref<boolean>(false);
@@ -77,6 +79,7 @@ function closeAllToolsExcept(toolRef: Ref<boolean>): void {
     showZScaling,
     showClippingPlanes,
     showShrinkFilter,
+    showExplodeFilter,
     showThresholdFilter,
     showRuler,
     is_picking,
@@ -236,6 +239,15 @@ const camera_options = computed<CameraOptionAction[]>(() => [
       toggleTool(showShrinkFilter);
     },
   },
+  {
+    testId: "explodeFilterButton",
+    tooltip: "Exploded View",
+    icon: "mdi-arrow-expand-all",
+    color: showExplodeFilter.value ? "primary" : undefined,
+    action: (): void => {
+      toggleTool(showExplodeFilter);
+    },
+  },
   {
     testId: "thresholdFilterButton",
     tooltip: "Threshold Filter",
@@ -334,6 +346,10 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     v-model:show="showShrinkFilter"
     :escapeFunction="() => (showShrinkFilter = false)"
   />
+  <ExplodeFilter
+    v-model:show="showExplodeFilter"
+    :escapeFunction="() => (showExplodeFilter = false)"
+  />
   <ThresholdFilter
     v-model:show="showThresholdFilter"
     :escapeFunction="() => (showThresholdFilter = false)"
diff --git a/internal/stores/hybrid_viewer/filters.ts b/internal/stores/hybrid_viewer/filters.ts
index 2433d8bd..b40af3d2 100644
--- a/internal/stores/hybrid_viewer/filters.ts
+++ b/internal/stores/hybrid_viewer/filters.ts
@@ -36,6 +36,20 @@ async function setShrink(ids: string[], shrink_factor: number): Promise<void> {
   });
   await remoteRender();
 }
+async function setExplode(ids: string[], explode_factor: number): Promise<void> {
+  const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerCore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.explode;
+  const params = {
+    ids,
+    explode_factor,
+  };
+  await viewerStore.request({
+    schema,
+    params,
+  });
+  await remoteRender();
+}
 async function setSlice(
   ids: string[],
   slices: { axis: SliceAxis; index: number }[],
@@ -80,6 +94,7 @@ async function setThreshold(ids: string[], attribute?: ThresholdAttribute): Prom
 function useHybridViewerFilters(): {
   setClippingPlanes: (ids: string[], planes: ViewerClippingPlanesParams["planes"]) => Promise<void>;
   setShrink: (ids: string[], shrink_factor: number) => Promise<void>;
+  setExplode: (ids: string[], explode_factor: number) => Promise<void>;
   setSlice: (
     ids: string[],
     slices: { axis: SliceAxis; index: number }[],
@@ -89,6 +104,7 @@ function useHybridViewerFilters(): {
   return {
     setClippingPlanes,
     setShrink,
+    setExplode,
     setSlice,
     setThreshold,
   };

From 1721411c58d7fcac1457a789966938f519020db0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Mon, 5 Oct 2026 17:06:03 +0200
Subject: [PATCH 2/7] trigger


From bd8b093586060659ae47811522aa5e913a70a526 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 6 Oct 2026 10:10:19 +0200
Subject: [PATCH 3/7] refacto shrink and explode components and filter store

---
 app/components/ExplodeFilter.vue              | 180 ++-------------
 app/components/FactorFilterPanel.vue          | 211 ++++++++++++++++++
 app/components/ShrinkFilter.vue               | 183 ++-------------
 internal/stores/hybrid_viewer/filters.ts      |  69 ++----
 .../components/FactorFilterPanel.nuxt.test.ts |  90 ++++++++
 5 files changed, 354 insertions(+), 379 deletions(-)
 create mode 100644 app/components/FactorFilterPanel.vue
 create mode 100644 tests/unit/components/FactorFilterPanel.nuxt.test.ts

diff --git a/app/components/ExplodeFilter.vue b/app/components/ExplodeFilter.vue
index 1047bd2b..d2fcf2a4 100644
--- a/app/components/ExplodeFilter.vue
+++ b/app/components/ExplodeFilter.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import ToolPanel from "@ogw_front/components/ToolPanel.vue";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDebounceFn } from "@vueuse/core";
+import FactorFilterPanel from "@ogw_front/components/FactorFilterPanel.vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const DEFAULT_EXPLODE_VALUE = 0.5;
 const MIN_EXPLODE_VALUE = 0;
 const MAX_EXPLODE_VALUE = 2;
-const DEBOUNCE_DELAY = 100;
 
 interface Props {
   escapeFunction?: () => void;
@@ -16,173 +13,22 @@ interface Props {
 const { escapeFunction = undefined } = defineProps<Props>();
 
 const show = defineModel<boolean>("show", { default: false });
-const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
-const targetAllVisible = ref<boolean>(true);
-const selectedDatasetIds = ref<string[]>([]);
-const explodeFactor = ref<number>(DEFAULT_EXPLODE_VALUE);
-
-const allItems = dataStore.refAllItems();
-const availableDatasets = computed<{ title: string; value: string }[]>(() =>
-  allItems.value.map((item) => ({
-    title: item.name || item.id,
-    value: item.id,
-  })),
-);
-
-async function applyExplode(): Promise<void> {
-  const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length === 0) {
-    return;
-  }
-  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
-  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
-
-  if (targetIds.length > 0) {
-    await hybridViewerStore.setExplode(targetIds, Number(explodeFactor.value));
-  }
-  if (untargetedIds.length > 0) {
-    await hybridViewerStore.setExplode(untargetedIds, MIN_EXPLODE_VALUE);
-  }
-}
-
-const debouncedApply = useDebounceFn(() => applyExplode(), DEBOUNCE_DELAY);
-
-async function resetExplode(): Promise<void> {
-  explodeFactor.value = DEFAULT_EXPLODE_VALUE;
-  await applyExplode();
-}
-
-async function removeExplode(): Promise<void> {
-  explodeFactor.value = MIN_EXPLODE_VALUE;
-  const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length > 0) {
-    await hybridViewerStore.setExplode(allIds, MIN_EXPLODE_VALUE);
-  }
-}
-
-watch(explodeFactor, () => {
-  debouncedApply();
-});
-
-watch(show, (visible) => {
-  if (visible) {
-    applyExplode();
-  }
-});
-
-watch(
-  [targetAllVisible, selectedDatasetIds],
-  () => {
-    if (show.value) {
-      applyExplode();
-    }
-  },
-  { deep: true },
-);
-
-watch(allItems, () => {
-  if (show.value) {
-    applyExplode();
-  }
-});
-
-watch(
-  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
-  (actorCount) => {
-    if (show.value && actorCount > 0) {
-      applyExplode();
-    }
-  },
-);
 </script>
 
 <template>
-  <ToolPanel
-    v-model="show"
+  <FactorFilterPanel
+    v-model:show="show"
     title="Exploded View"
-    :width="340"
-    :click-outside="false"
+    label="Explode Factor"
+    test-id-prefix="explode"
+    :set-factor="hybridViewerStore.setExplode"
+    :factor-range="{
+      min: MIN_EXPLODE_VALUE,
+      max: MAX_EXPLODE_VALUE,
+      defaultValue: DEFAULT_EXPLODE_VALUE,
+      neutralValue: MIN_EXPLODE_VALUE,
+    }"
     :escapeFunction="escapeFunction"
-  >
-    <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
-      <v-switch
-        v-model="targetAllVisible"
-        data-testid="explodeTargetAllVisibleSwitch"
-        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"
-        data-testid="explodeSelectedDatasetsSelect"
-        :items="availableDatasets"
-        label="Select datasets"
-        multiple
-        chips
-        closable-chips
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="mb-3 text-caption"
-      />
-
-      <v-divider class="my-3" />
-
-      <div class="d-flex align-center justify-space-between mb-1">
-        <span class="text-caption font-weight-bold">Explode Factor</span>
-        <span class="text-caption text-primary font-weight-bold">
-          {{ explodeFactor.toFixed(2) }}
-        </span>
-      </div>
-
-      <v-slider
-        v-model="explodeFactor"
-        data-testid="explodeFactorSlider"
-        :min="MIN_EXPLODE_VALUE"
-        :max="MAX_EXPLODE_VALUE"
-        step="0.01"
-        color="primary"
-        track-color="grey-lighten-2"
-        density="compact"
-        hide-details
-        class="my-2 px-1"
-      />
-    </v-card-text>
-
-    <template #actions>
-      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
-        <v-btn
-          data-testid="removeExplodeButton"
-          variant="text"
-          size="small"
-          color="error"
-          class="text-caption text-none"
-          @click="removeExplode"
-        >
-          Remove Explode
-        </v-btn>
-        <v-btn
-          data-testid="resetExplodeButton"
-          variant="tonal"
-          size="small"
-          color="secondary"
-          class="text-caption text-none"
-          @click="resetExplode"
-        >
-          Reset
-        </v-btn>
-      </v-card-actions>
-    </template>
-  </ToolPanel>
+  />
 </template>
-
-<style scoped>
-.max-panel-height {
-  max-height: 520px;
-}
-</style>
diff --git a/app/components/FactorFilterPanel.vue b/app/components/FactorFilterPanel.vue
new file mode 100644
index 00000000..33385806
--- /dev/null
+++ b/app/components/FactorFilterPanel.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const DEBOUNCE_DELAY = 100;
+
+interface FactorRange {
+  min: number;
+  max: number;
+  defaultValue: number;
+  neutralValue: number;
+}
+
+interface Props {
+  title: string;
+  label: string;
+  testIdPrefix: string;
+  setFactor: (ids: string[], factor: number) => Promise<void>;
+  factorRange: FactorRange;
+  formatValue?: (value: number) => string;
+  escapeFunction?: () => void;
+}
+
+const {
+  title,
+  label,
+  testIdPrefix,
+  setFactor,
+  factorRange,
+  formatValue = (value: number): string => value.toFixed(2),
+  escapeFunction = undefined,
+} = defineProps<Props>();
+
+const capitalizedPrefix = computed<string>(
+  () => `${testIdPrefix.charAt(0).toUpperCase()}${testIdPrefix.slice(1)}`,
+);
+const show = defineModel<boolean>("show", { default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const targetAllVisible = ref<boolean>(true);
+const selectedDatasetIds = ref<string[]>([]);
+const factor = ref<number>(factorRange.defaultValue);
+
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed<{ title: string; value: string }[]>(() =>
+  allItems.value.map((item) => ({
+    title: item.name || item.id,
+    value: item.id,
+  })),
+);
+
+let appliedFactor: number | undefined = undefined;
+
+async function applyFactor(): Promise<void> {
+  appliedFactor = factor.value;
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length === 0) {
+    return;
+  }
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+
+  if (targetIds.length > 0) {
+    await setFactor(targetIds, Number(factor.value));
+  }
+  if (untargetedIds.length > 0) {
+    await setFactor(untargetedIds, factorRange.neutralValue);
+  }
+}
+
+const debouncedApply = useDebounceFn(() => applyFactor(), DEBOUNCE_DELAY);
+
+async function resetFactor(): Promise<void> {
+  factor.value = factorRange.defaultValue;
+  await applyFactor();
+}
+
+async function removeFactor(): Promise<void> {
+  factor.value = factorRange.neutralValue;
+  await applyFactor();
+}
+
+watch(factor, (value) => {
+  if (value !== appliedFactor) {
+    debouncedApply();
+  }
+});
+
+watch(show, (visible) => {
+  if (visible) {
+    applyFactor();
+  }
+});
+
+watch(
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      applyFactor();
+    }
+  },
+  { deep: true },
+);
+
+watch(allItems, () => {
+  if (show.value) {
+    applyFactor();
+  }
+});
+
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      applyFactor();
+    }
+  },
+);
+</script>
+
+<template>
+  <ToolPanel
+    v-model="show"
+    :title="title"
+    :width="340"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
+      <v-switch
+        v-model="targetAllVisible"
+        :data-testid="`${testIdPrefix}TargetAllVisibleSwitch`"
+        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"
+        :data-testid="`${testIdPrefix}SelectedDatasetsSelect`"
+        :items="availableDatasets"
+        label="Select datasets"
+        multiple
+        chips
+        closable-chips
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-divider class="my-3" />
+
+      <div class="d-flex align-center justify-space-between mb-1">
+        <span class="text-caption font-weight-bold">{{ label }}</span>
+        <span class="text-caption text-primary font-weight-bold">
+          {{ formatValue(factor) }}
+        </span>
+      </div>
+
+      <v-slider
+        v-model="factor"
+        :data-testid="`${testIdPrefix}FactorSlider`"
+        :min="factorRange.min"
+        :max="factorRange.max"
+        step="0.01"
+        color="primary"
+        track-color="grey-lighten-2"
+        density="compact"
+        hide-details
+        class="my-2 px-1"
+      />
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          :data-testid="`remove${capitalizedPrefix}Button`"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeFactor"
+        >
+          Remove {{ capitalizedPrefix }}
+        </v-btn>
+        <v-btn
+          :data-testid="`reset${capitalizedPrefix}Button`"
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetFactor"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>
diff --git a/app/components/ShrinkFilter.vue b/app/components/ShrinkFilter.vue
index dd50754e..b4459d8f 100644
--- a/app/components/ShrinkFilter.vue
+++ b/app/components/ShrinkFilter.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import ToolPanel from "@ogw_front/components/ToolPanel.vue";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDebounceFn } from "@vueuse/core";
+import FactorFilterPanel from "@ogw_front/components/FactorFilterPanel.vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const DEFAULT_SHRINK_VALUE = 0.8;
+const MIN_SHRINK_VALUE = 0;
 const MAX_SHRINK_VALUE = 1;
-const DEBOUNCE_DELAY = 100;
+const PERCENT = 100;
 
 interface Props {
   escapeFunction?: () => void;
@@ -15,173 +14,27 @@ interface Props {
 const { escapeFunction = undefined } = defineProps<Props>();
 
 const show = defineModel<boolean>("show", { default: false });
-const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
-const targetAllVisible = ref<boolean>(true);
-const selectedDatasetIds = ref<string[]>([]);
-const shrinkFactor = ref<number>(DEFAULT_SHRINK_VALUE);
 
-const allItems = dataStore.refAllItems();
-const availableDatasets = computed<{ title: string; value: string }[]>(() =>
-  allItems.value.map((item) => ({
-    title: item.name || item.id,
-    value: item.id,
-  })),
-);
-
-async function applyShrink(): Promise<void> {
-  const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length === 0) {
-    return;
-  }
-  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
-  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
-
-  if (targetIds.length > 0) {
-    await hybridViewerStore.setShrink(targetIds, Number(shrinkFactor.value));
-  }
-  if (untargetedIds.length > 0) {
-    await hybridViewerStore.setShrink(untargetedIds, MAX_SHRINK_VALUE);
-  }
-}
-
-const debouncedApply = useDebounceFn(() => applyShrink(), DEBOUNCE_DELAY);
-
-async function resetShrink(): Promise<void> {
-  shrinkFactor.value = DEFAULT_SHRINK_VALUE;
-  await applyShrink();
+function formatShrinkFactor(value: number): string {
+  return `${(value * PERCENT).toFixed(0)}% (${value.toFixed(2)})`;
 }
-
-async function removeShrink(): Promise<void> {
-  shrinkFactor.value = MAX_SHRINK_VALUE;
-  const allIds = allItems.value.map((item) => item.id);
-  if (allIds.length > 0) {
-    await hybridViewerStore.setShrink(allIds, MAX_SHRINK_VALUE);
-  }
-}
-
-watch(shrinkFactor, () => {
-  debouncedApply();
-});
-
-watch(show, (visible) => {
-  if (visible) {
-    applyShrink();
-  }
-});
-
-watch(
-  [targetAllVisible, selectedDatasetIds],
-  () => {
-    if (show.value) {
-      applyShrink();
-    }
-  },
-  { deep: true },
-);
-
-watch(allItems, () => {
-  if (show.value) {
-    applyShrink();
-  }
-});
-
-watch(
-  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
-  (actorCount) => {
-    if (show.value && actorCount > 0) {
-      applyShrink();
-    }
-  },
-);
 </script>
 
 <template>
-  <ToolPanel
-    v-model="show"
+  <FactorFilterPanel
+    v-model:show="show"
     title="Shrink Filter"
-    :width="340"
-    :click-outside="false"
+    label="Shrink Factor"
+    test-id-prefix="shrink"
+    :set-factor="hybridViewerStore.setShrink"
+    :factor-range="{
+      min: MIN_SHRINK_VALUE,
+      max: MAX_SHRINK_VALUE,
+      defaultValue: DEFAULT_SHRINK_VALUE,
+      neutralValue: MAX_SHRINK_VALUE,
+    }"
+    :format-value="formatShrinkFactor"
     :escapeFunction="escapeFunction"
-  >
-    <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
-      <v-switch
-        v-model="targetAllVisible"
-        data-testid="shrinkTargetAllVisibleSwitch"
-        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"
-        data-testid="shrinkSelectedDatasetsSelect"
-        :items="availableDatasets"
-        label="Select datasets"
-        multiple
-        chips
-        closable-chips
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="mb-3 text-caption"
-      />
-
-      <v-divider class="my-3" />
-
-      <div class="d-flex align-center justify-space-between mb-1">
-        <span class="text-caption font-weight-bold">Shrink Factor</span>
-        <span class="text-caption text-primary font-weight-bold">
-          {{ (shrinkFactor * 100).toFixed(0) }}% ({{ shrinkFactor.toFixed(2) }})
-        </span>
-      </div>
-
-      <v-slider
-        v-model="shrinkFactor"
-        data-testid="shrinkFactorSlider"
-        min="0.0"
-        max="1.0"
-        step="0.01"
-        color="primary"
-        track-color="grey-lighten-2"
-        density="compact"
-        hide-details
-        class="my-2 px-1"
-      />
-    </v-card-text>
-
-    <template #actions>
-      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
-        <v-btn
-          data-testid="removeShrinkButton"
-          variant="text"
-          size="small"
-          color="error"
-          class="text-caption text-none"
-          @click="removeShrink"
-        >
-          Remove Shrink
-        </v-btn>
-        <v-btn
-          data-testid="resetShrinkButton"
-          variant="tonal"
-          size="small"
-          color="secondary"
-          class="text-caption text-none"
-          @click="resetShrink"
-        >
-          Reset
-        </v-btn>
-      </v-card-actions>
-    </template>
-  </ToolPanel>
+  />
 </template>
-
-<style scoped>
-.max-panel-height {
-  max-height: 520px;
-}
-</style>
diff --git a/internal/stores/hybrid_viewer/filters.ts b/internal/stores/hybrid_viewer/filters.ts
index b40af3d2..6a106c53 100644
--- a/internal/stores/hybrid_viewer/filters.ts
+++ b/internal/stores/hybrid_viewer/filters.ts
@@ -1,3 +1,4 @@
+import type { JsonRpcSchema, ParamsOf, ResponseOf } from "@ogw_shared/utils/types.js";
 import viewer_schemas, {
   type ViewerClippingPlanesParams,
 } from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
@@ -5,69 +6,51 @@ import type { SliceAxis } from "@ogw_front/utils/slice";
 import { useHybridViewerCore } from "./core";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
+async function requestAndRender<Schema extends JsonRpcSchema>(
+  schema: Schema,
+  params: ParamsOf<Schema>,
+): Promise<ResponseOf<Schema>> {
+  const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerCore();
+  const response = await viewerStore.request({
+    schema,
+    params,
+  });
+  await remoteRender();
+  return response;
+}
+
 async function setClippingPlanes(
   ids: string[],
   planes: ViewerClippingPlanesParams["planes"],
 ): Promise<void> {
-  const viewerStore = useViewerStore();
-  const { remoteRender } = useHybridViewerCore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
-  const params = {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes, {
     ids,
     planes,
-  };
-  await viewerStore.request({
-    schema,
-    params,
   });
-  await remoteRender();
 }
 async function setShrink(ids: string[], shrink_factor: number): Promise<void> {
-  const viewerStore = useViewerStore();
-  const { remoteRender } = useHybridViewerCore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
-  const params = {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.shrink, {
     ids,
     shrink_factor,
-  };
-  await viewerStore.request({
-    schema,
-    params,
   });
-  await remoteRender();
 }
 async function setExplode(ids: string[], explode_factor: number): Promise<void> {
-  const viewerStore = useViewerStore();
-  const { remoteRender } = useHybridViewerCore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.explode;
-  const params = {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.explode, {
     ids,
     explode_factor,
-  };
-  await viewerStore.request({
-    schema,
-    params,
   });
-  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 {
     max_indices: [max_i = 0, max_j = 0, max_k = 0],
-  } = await viewerStore.request({
-    schema,
-    params,
+  } = await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.slice, {
+    ids,
+    slices,
   });
-  await remoteRender();
   return [max_i, max_j, max_k];
 }
 interface ThresholdAttribute {
@@ -78,18 +61,10 @@ interface ThresholdAttribute {
   maximum: number;
 }
 async function setThreshold(ids: string[], attribute?: ThresholdAttribute): Promise<void> {
-  const viewerStore = useViewerStore();
-  const { remoteRender } = useHybridViewerCore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.threshold;
-  const params = {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.threshold, {
     ids,
     attribute,
-  };
-  await viewerStore.request({
-    schema,
-    params,
   });
-  await remoteRender();
 }
 function useHybridViewerFilters(): {
   setClippingPlanes: (ids: string[], planes: ViewerClippingPlanesParams["planes"]) => Promise<void>;
diff --git a/tests/unit/components/FactorFilterPanel.nuxt.test.ts b/tests/unit/components/FactorFilterPanel.nuxt.test.ts
new file mode 100644
index 00000000..e05b57fd
--- /dev/null
+++ b/tests/unit/components/FactorFilterPanel.nuxt.test.ts
@@ -0,0 +1,90 @@
+// Node imports
+import { setTimeout as wait } from "node:timers/promises";
+
+// Third party imports
+import { type Mock, describe, expect, test, vi } from "vitest";
+import { type VueWrapper, flushPromises } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+
+// Local imports
+import FactorFilterPanel from "@ogw_front/components/FactorFilterPanel.vue";
+import { vuetify } from "@ogw_tests/utils";
+
+const DATA_ID = "12345678901234567890123456789012";
+const DEFAULT_VALUE = 0.5;
+const NEUTRAL_VALUE = 0;
+const DEBOUNCE_WAIT = 300;
+const TIMEOUT = 5000;
+
+type SetFactor = (ids: string[], factor: number) => Promise<void>;
+
+vi.mock(import("@ogw_front/stores/data") as Promise<unknown>, () => ({
+  useDataStore: (): { refAllItems: () => Ref<{ id: string; name: string }[]> } => ({
+    refAllItems: (): Ref<{ id: string; name: string }[]> => ref([{ id: DATA_ID, name: "model" }]),
+  }),
+}));
+vi.mock(import("@ogw_front/stores/hybrid_viewer") as Promise<unknown>, () => ({
+  useHybridViewerStore: (): { hybridDb: Record<string, never> } => ({ hybridDb: {} }),
+}));
+
+function mockSetFactor(): Mock<SetFactor> {
+  return vi.fn<SetFactor>().mockResolvedValue();
+}
+
+async function mountOpenedPanel(setFactor: SetFactor): Promise<VueWrapper> {
+  const wrapper = await mountSuspended(FactorFilterPanel, {
+    global: { plugins: [vuetify] },
+    props: {
+      show: false,
+      title: "Exploded View",
+      label: "Explode Factor",
+      testIdPrefix: "explode",
+      setFactor,
+      factorRange: {
+        min: 0,
+        max: 2,
+        defaultValue: DEFAULT_VALUE,
+        neutralValue: NEUTRAL_VALUE,
+      },
+    },
+  });
+  await wrapper.setProps({ show: true });
+  await flushPromises();
+  return wrapper;
+}
+
+async function settle(): Promise<void> {
+  await wait(DEBOUNCE_WAIT);
+  await flushPromises();
+}
+
+describe("factor filter panel", () => {
+  test("applies the default factor once when opened", async () => {
+    const setFactor = mockSetFactor();
+    await mountOpenedPanel(setFactor);
+    await settle();
+    expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], DEFAULT_VALUE]]);
+  }, TIMEOUT);
+
+  test("remove sends a single request with the neutral factor", async () => {
+    const setFactor = mockSetFactor();
+    const wrapper = await mountOpenedPanel(setFactor);
+    await settle();
+    setFactor.mockClear();
+    await wrapper.find('[data-testid="removeExplodeButton"]').trigger("click");
+    await settle();
+    expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], NEUTRAL_VALUE]]);
+  }, TIMEOUT);
+
+  test("reset sends a single request with the default factor", async () => {
+    const setFactor = mockSetFactor();
+    const wrapper = await mountOpenedPanel(setFactor);
+    await settle();
+    await wrapper.find('[data-testid="removeExplodeButton"]').trigger("click");
+    await settle();
+    setFactor.mockClear();
+    await wrapper.find('[data-testid="resetExplodeButton"]').trigger("click");
+    await settle();
+    expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], DEFAULT_VALUE]]);
+  }, TIMEOUT);
+});

From 91c8559b32339b2058646a1feb5c2cc2ca3319fc Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Tue, 6 Oct 2026 08:11:17 +0000
Subject: [PATCH 4/7] Apply prepare changes

---
 .../components/FactorFilterPanel.nuxt.test.ts | 64 +++++++++++--------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/tests/unit/components/FactorFilterPanel.nuxt.test.ts b/tests/unit/components/FactorFilterPanel.nuxt.test.ts
index e05b57fd..0bf69e59 100644
--- a/tests/unit/components/FactorFilterPanel.nuxt.test.ts
+++ b/tests/unit/components/FactorFilterPanel.nuxt.test.ts
@@ -59,32 +59,44 @@ async function settle(): Promise<void> {
 }
 
 describe("factor filter panel", () => {
-  test("applies the default factor once when opened", async () => {
-    const setFactor = mockSetFactor();
-    await mountOpenedPanel(setFactor);
-    await settle();
-    expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], DEFAULT_VALUE]]);
-  }, TIMEOUT);
+  test(
+    "applies the default factor once when opened",
+    async () => {
+      const setFactor = mockSetFactor();
+      await mountOpenedPanel(setFactor);
+      await settle();
+      expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], DEFAULT_VALUE]]);
+    },
+    TIMEOUT,
+  );
 
-  test("remove sends a single request with the neutral factor", async () => {
-    const setFactor = mockSetFactor();
-    const wrapper = await mountOpenedPanel(setFactor);
-    await settle();
-    setFactor.mockClear();
-    await wrapper.find('[data-testid="removeExplodeButton"]').trigger("click");
-    await settle();
-    expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], NEUTRAL_VALUE]]);
-  }, TIMEOUT);
+  test(
+    "remove sends a single request with the neutral factor",
+    async () => {
+      const setFactor = mockSetFactor();
+      const wrapper = await mountOpenedPanel(setFactor);
+      await settle();
+      setFactor.mockClear();
+      await wrapper.find('[data-testid="removeExplodeButton"]').trigger("click");
+      await settle();
+      expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], NEUTRAL_VALUE]]);
+    },
+    TIMEOUT,
+  );
 
-  test("reset sends a single request with the default factor", async () => {
-    const setFactor = mockSetFactor();
-    const wrapper = await mountOpenedPanel(setFactor);
-    await settle();
-    await wrapper.find('[data-testid="removeExplodeButton"]').trigger("click");
-    await settle();
-    setFactor.mockClear();
-    await wrapper.find('[data-testid="resetExplodeButton"]').trigger("click");
-    await settle();
-    expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], DEFAULT_VALUE]]);
-  }, TIMEOUT);
+  test(
+    "reset sends a single request with the default factor",
+    async () => {
+      const setFactor = mockSetFactor();
+      const wrapper = await mountOpenedPanel(setFactor);
+      await settle();
+      await wrapper.find('[data-testid="removeExplodeButton"]').trigger("click");
+      await settle();
+      setFactor.mockClear();
+      await wrapper.find('[data-testid="resetExplodeButton"]').trigger("click");
+      await settle();
+      expect(setFactor.mock.calls).toStrictEqual([[[DATA_ID], DEFAULT_VALUE]]);
+    },
+    TIMEOUT,
+  );
 });

From 97438ae2627a9e614d58e3bd89af2c5fcb87d215 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 6 Oct 2026 13:38:36 +0200
Subject: [PATCH 5/7] new vizualisation of explode [skip ci]

---
 app/components/ExplodeFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/ExplodeFilter.vue b/app/components/ExplodeFilter.vue
index d2fcf2a4..823bb79f 100644
--- a/app/components/ExplodeFilter.vue
+++ b/app/components/ExplodeFilter.vue
@@ -2,9 +2,9 @@
 import FactorFilterPanel from "@ogw_front/components/FactorFilterPanel.vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-const DEFAULT_EXPLODE_VALUE = 0.5;
+const DEFAULT_EXPLODE_VALUE = 0.2;
 const MIN_EXPLODE_VALUE = 0;
-const MAX_EXPLODE_VALUE = 2;
+const MAX_EXPLODE_VALUE = 1;
 
 interface Props {
   escapeFunction?: () => void;

From 313a9c1c5424a4221e232a69e4c3025d6fd3e5e1 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 6 Oct 2026 15:03:29 +0200
Subject: [PATCH 6/7] trigger


From db04b40575c12881d257d2ab3b30e8b773e7b23f Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 6 Oct 2026 15:56:55 +0200
Subject: [PATCH 7/7] trigger