From 603c1e0a1b57a60dc726339a2368d821dad09364 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 29 Sep 2026 16:50:13 +0200
Subject: [PATCH 1/7] feat(objectTreeContextMenu): Add logic for context menu
 to interact with headers of object tree [skip ci]

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 60 +++++++--------
 .../Viewer/ObjectTree/Views/GlobalObjects.vue | 33 ++++++--
 .../Viewer/Options/AttributeColorBar.vue      |  7 ++
 .../Viewer/Options/AttributeSelector.vue      | 64 ++++++++++++++-
 app/components/Viewer/Options/TextureItem.vue | 32 +++++---
 app/composables/batch_style.ts                | 44 ++++++++++-
 app/stores/menu.ts                            |  1 +
 app/utils/attributes.ts                       | 27 ++++++-
 .../unit/composables/batch_style.nuxt.test.ts | 77 +++++++++++++++++++
 tests/unit/utils/attributes.nuxt.test.ts      | 38 +++++++++
 10 files changed, 331 insertions(+), 52 deletions(-)
 create mode 100644 tests/unit/composables/batch_style.nuxt.test.ts
 create mode 100644 tests/unit/utils/attributes.nuxt.test.ts

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 48d2237b6..f7c2964c2 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -9,23 +9,15 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import SurfacesOptions from "./SurfacesOptions.vue";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
+import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const dataStore = useDataStore();
-const treeviewStore = useTreeviewStore();
-
-function getBatchComponentIds(currentId: string): string[] {
-  const { activeItems } = treeviewStore;
-  if (activeItems.includes(currentId) && activeItems.length > 1) {
-    return activeItems;
-  }
-  return [currentId];
-}
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: Record<string, unknown>;
@@ -35,9 +27,9 @@ const { itemProps } = defineProps<Props>();
 
 const modelId = computed<string>(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed<string | undefined>(() => itemProps.meta_data.pickedComponentId);
-const selection = computed<string[]>(
-  () => dataStyleStore.visibleMeshComponents(modelId.value).value || [],
-);
+function visibleComponents(targetId: string): string[] {
+  return dataStyleStore.visibleMeshComponents(targetId).value || [];
+}
 const componentType = ref<string | undefined>(undefined);
 const collections = ref<CollectionComponent[] | undefined>(undefined);
 
@@ -105,7 +97,9 @@ const modelVisibility = computed<boolean | undefined>({
     if (newValue === undefined) {
       return;
     }
-    await dataStyleStore.setModelVisibility(modelId.value, newValue);
+    await applyBatchStyle(modelId.value, (targetId: string) =>
+      dataStyleStore.setModelVisibility(targetId, newValue),
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -113,16 +107,18 @@ const modelVisibility = computed<boolean | undefined>({
 const modelComponentsColor = computed<RGBAColor | undefined>({
   get: () => dataStyleStore.getModelColor(modelId.value) as RGBAColor | undefined,
   set: async (color) => {
-    await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { constant: color },
+    await applyBatchStyle(modelId.value, async (targetId: string) => {
+      await dataStyleStore.mutateStyle(targetId, {
+        coloring: { constant: color },
+      });
+      const activeColoring = dataStyleStore.getModelActiveColoring(targetId);
+      await dataStyleStore.setModelComponentsColor(
+        targetId,
+        visibleComponents(targetId),
+        color,
+        typeof activeColoring === "string" ? activeColoring : undefined,
+      );
     });
-    const activeColoring = dataStyleStore.getModelActiveColoring(modelId.value);
-    await dataStyleStore.setModelComponentsColor(
-      modelId.value,
-      selection.value,
-      color,
-      typeof activeColoring === "string" ? activeColoring : undefined,
-    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -133,15 +129,17 @@ const modelComponentsActiveColoring = computed<string | undefined>({
     if (typeof coloringType !== "string") {
       return;
     }
-    await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { active: coloringType },
+    await applyBatchStyle(modelId.value, async (targetId: string) => {
+      await dataStyleStore.mutateStyle(targetId, {
+        coloring: { active: coloringType },
+      });
+      await dataStyleStore.setModelComponentsColor(
+        targetId,
+        visibleComponents(targetId),
+        dataStyleStore.getModelColor(targetId),
+        coloringType,
+      );
     });
-    await dataStyleStore.setModelComponentsColor(
-      modelId.value,
-      selection.value,
-      dataStyleStore.getModelColor(modelId.value),
-      coloringType,
-    );
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index ef8f1ad24..52d9d339f 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -17,8 +17,15 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 
+interface ShowMenuPayload {
+  event: MouseEvent;
+  itemId: string;
+  context_type?: "geode_object_type";
+  targetIds?: string[];
+}
+
 interface Emits {
-  "show-menu": [payload: { event: MouseEvent; itemId: string }];
+  "show-menu": [payload: ShowMenuPayload];
 }
 
 const emit = defineEmits<Emits>();
@@ -82,6 +89,21 @@ watch(
   },
 );
 
+function showMenu(event: MouseEvent, item: TreeGroupItem): void {
+  const actualItem = item.raw || item;
+  if (!actualItem.children) {
+    emit("show-menu", { event, itemId: actualItem.id });
+    return;
+  }
+  const childIds = actualItem.children.map((child) => child.id);
+  emit("show-menu", {
+    event,
+    itemId: actualItem.id,
+    context_type: "geode_object_type",
+    targetIds: applySearchFilter(childIds) as string[],
+  });
+}
+
 function isModel(item: TreeGroupItem): boolean {
   const actualItem = item.raw || item;
   return (
@@ -190,18 +212,13 @@ function expandAll(): void {
       @update:scroll-top="treeviewStore.setScrollTop(mainView?.id ?? '', $event)"
       @hover:enter="({ item }) => handleHoverEnter({ item: item as unknown as TreeGroupItem })"
       @hover:leave="({ item }) => handleHoverLeave({ item: item as unknown as TreeGroupItem })"
-      @contextmenu="
-        emit('show-menu', {
-          event: $event.event,
-          itemId: $event.item.id as string,
-        })
-      "
+      @contextmenu="showMenu($event.event, $event.item as unknown as TreeGroupItem)"
     >
       <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel
           :item="item as unknown as DisplayItem"
           :is-leaf="isLeaf"
-          @contextmenu="emit('show-menu', { event: $event, itemId: item.id as string })"
+          @contextmenu="showMenu($event, item as unknown as TreeGroupItem)"
         />
       </template>
 
diff --git a/app/components/Viewer/Options/AttributeColorBar.vue b/app/components/Viewer/Options/AttributeColorBar.vue
index caf4c07c2..f2833371e 100644
--- a/app/components/Viewer/Options/AttributeColorBar.vue
+++ b/app/components/Viewer/Options/AttributeColorBar.vue
@@ -8,6 +8,12 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+interface Props {
+  hideRange?: boolean;
+}
+
+const { hideRange = false } = defineProps<Props>();
+
 const minimum = defineModel<number>("minimum");
 const maximum = defineModel<number>("maximum");
 const colorMap = defineModel<string>("colorMap");
@@ -21,6 +27,7 @@ const colorMap = defineModel<string>("colorMap");
       :max="maximum ?? 0"
     />
     <AttributeRangeSelector
+      v-if="!hideRange"
       v-model:minimum="minimum"
       v-model:maximum="maximum"
       class="mt-2"
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index b082ed7f9..e95c9efe8 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { getAttributeRange, intersectAttributes } from "@ogw_front/utils/attributes";
+import { menuGroupTargets, runWithBatchTargets } from "@ogw_front/composables/batch_style";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
-import { getAttributeRange } from "@ogw_front/utils/attributes";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
@@ -22,6 +23,12 @@ interface Props {
 
 const { id, componentIds = undefined, schema } = defineProps<Props>();
 
+interface Emits {
+  "update:attributeColorMap": [colorMap: string];
+}
+
+const emit = defineEmits<Emits>();
+
 interface AttributeInfo {
   attribute_name: string;
   nb_items: number;
@@ -30,6 +37,9 @@ interface AttributeInfo {
 }
 
 const attributes = ref<AttributeInfo[]>([]);
+const attributesPerTarget = ref<Record<string, AttributeInfo[]>>({});
+
+const groupTargetIds = computed<string[] | undefined>(() => menuGroupTargets(id));
 
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
@@ -103,7 +113,49 @@ function hasSelectedComponent(components: unknown): boolean {
   return Array.isArray(components) && components.length > 0;
 }
 
+function getGroupAttributes(targetIds: string[]): void {
+  for (const targetId of targetIds) {
+    backStore.request(
+      { schema, params: { id: targetId } },
+      {
+        response_function: (response: unknown) => {
+          attributesPerTarget.value[targetId] = (
+            response as { attributes: AttributeInfo[] }
+          ).attributes;
+          if (targetIds.every((target) => attributesPerTarget.value[target] !== undefined)) {
+            attributes.value = intersectAttributes(
+              targetIds.map((target) => attributesPerTarget.value[target] ?? []),
+            );
+          }
+        },
+      },
+    );
+  }
+}
+
+function initGroupAttribute(targetIds: string[], name: string, item: number): void {
+  emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
+  for (const targetId of targetIds) {
+    const attribute = attributesPerTarget.value[targetId]?.find(
+      (candidate) => candidate.attribute_name === name,
+    );
+    if (attribute) {
+      const { min, max } = getAttributeRange(
+        attribute as unknown as Parameters<typeof getAttributeRange>[0],
+        item,
+      );
+      runWithBatchTargets([targetId], () => {
+        attributeRange.value = [min, max];
+      });
+    }
+  }
+}
+
 function getAttributes(): void {
+  if (groupTargetIds.value) {
+    getGroupAttributes(groupTargetIds.value);
+    return;
+  }
   const schemaProperties = schema.properties as Record<string, unknown> | undefined;
   const requiresComponent = schemaProperties?.component_ids !== undefined;
   if (requiresComponent && !hasSelectedComponent(componentIds)) {
@@ -136,7 +188,16 @@ watch(
   },
 );
 
+watch([attributeName, attributeItem], ([name, item]) => {
+  if (groupTargetIds.value && name !== undefined) {
+    initGroupAttribute(groupTargetIds.value, name, item ?? 0);
+  }
+});
+
 watch([attributeName, attributeItem, currentAttribute], () => {
+  if (groupTargetIds.value) {
+    return;
+  }
   if (attributeColorMap.value === undefined) {
     attributeColorMap.value = "batlow";
   }
@@ -200,6 +261,7 @@ watch([attributeName, attributeItem, currentAttribute], () => {
     v-model:minimum="rangeMin"
     v-model:maximum="rangeMax"
     v-model:colorMap="attributeColorMap"
+    :hide-range="groupTargetIds !== undefined"
     @reset="resetRange"
   />
 </template>
diff --git a/app/components/Viewer/Options/TextureItem.vue b/app/components/Viewer/Options/TextureItem.vue
index 2d6c9bf18..a3e3a5fc3 100644
--- a/app/components/Viewer/Options/TextureItem.vue
+++ b/app/components/Viewer/Options/TextureItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import FileUploader from "@ogw_front/components/FileUploader.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
+import { menuGroupTargets } from "@ogw_front/composables/batch_style";
 import { useBackStore } from "@ogw_front/stores/back";
 
 // Mirrors FileUploader's own (unexported) UploadFile type.
@@ -42,17 +43,28 @@ const backStore = useBackStore();
 
 function getTextureCoordinates(): void {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
-  const params = { id };
-  backStore.request(
-    { schema, params },
-    {
-      response_function: (response: unknown) => {
-        textureCoordinates.value = (
-          response as { texture_coordinates: string[] }
-        ).texture_coordinates;
+  const targetIds = menuGroupTargets(id) ?? [id];
+  const coordinatesPerData: Record<string, string[]> = {};
+  for (const targetId of targetIds) {
+    backStore.request(
+      { schema, params: { id: targetId } },
+      {
+        response_function: (response: unknown) => {
+          coordinatesPerData[targetId] = (
+            response as { texture_coordinates: string[] }
+          ).texture_coordinates;
+          if (targetIds.every((target) => coordinatesPerData[target] !== undefined)) {
+            const [first = [], ...others] = targetIds.map(
+              (target) => coordinatesPerData[target] ?? [],
+            );
+            textureCoordinates.value = first.filter((name) =>
+              others.every((coordinates) => coordinates.includes(name)),
+            );
+          }
+        },
       },
-    },
-  );
+    );
+  }
 }
 
 onMounted(() => {
diff --git a/app/composables/batch_style.ts b/app/composables/batch_style.ts
index 4ebf59b2d..6a3e8b8f8 100644
--- a/app/composables/batch_style.ts
+++ b/app/composables/batch_style.ts
@@ -1,7 +1,36 @@
 import { useDataStore } from "@ogw_front/stores/data";
+import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-export function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
+let forcedTargets: readonly string[] | undefined = undefined;
+
+function runWithBatchTargets(targets: readonly string[], styleChange: () => void): void {
+  const previous = forcedTargets;
+  forcedTargets = targets;
+  try {
+    styleChange();
+  } finally {
+    forcedTargets = previous;
+  }
+}
+
+async function applyActionOn(
+  targets: readonly string[],
+  action: (id: string) => Promise<unknown>,
+): Promise<void> {
+  await Promise.all(
+    targets.map(async (targetId) => {
+      await action(targetId);
+    }),
+  );
+}
+
+function menuGroupTargets(id: string): string[] | undefined {
+  const { targetIds } = useMenuStore().current_meta_data;
+  return targetIds?.includes(id) ? targetIds : undefined;
+}
+
+function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
   const treeviewStore = useTreeviewStore();
   const dataStore = useDataStore();
 
@@ -9,6 +38,17 @@ export function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
     id: string,
     action: (id: string) => Promise<unknown>,
   ): Promise<void> {
+    if (forcedTargets !== undefined) {
+      await applyActionOn(forcedTargets, action);
+      return;
+    }
+
+    const groupTargets = menuGroupTargets(id);
+    if (groupTargets) {
+      await applyActionOn(groupTargets, action);
+      return;
+    }
+
     const isActive = treeviewStore.activeItems.includes(id);
     if (!isActive || treeviewStore.activeItems.length <= 1) {
       await action(id);
@@ -38,3 +78,5 @@ export function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
 
   return { applyBatchStyle };
 }
+
+export { menuGroupTargets, runWithBatchTargets, useBatchStyle };
diff --git a/app/stores/menu.ts b/app/stores/menu.ts
index 4f7def9f8..0e1261fa8 100644
--- a/app/stores/menu.ts
+++ b/app/stores/menu.ts
@@ -45,6 +45,7 @@ type MenuItems = Component[];
 interface MenuMetaData {
   viewer_type?: string;
   geode_object_type?: string;
+  targetIds?: string[];
   [key: string]: unknown;
 }
 
diff --git a/app/utils/attributes.ts b/app/utils/attributes.ts
index 35b44b9cf..e0fcff1e3 100644
--- a/app/utils/attributes.ts
+++ b/app/utils/attributes.ts
@@ -62,4 +62,29 @@ const MODEL_COMPONENT_KINDS: Record<string, string[]> = {
   Block: ["vertex", "polyhedron"],
 };
 
-export { MESH_ELEMENT_KINDS, MODEL_COMPONENT_KINDS, getAttributeRange };
+interface NamedAttribute {
+  attribute_name: string;
+  nb_items: number;
+}
+
+function intersectAttributes<TAttribute extends NamedAttribute>(
+  attributesPerData: readonly (readonly TAttribute[])[],
+): TAttribute[] {
+  const [first, ...others] = attributesPerData;
+  if (!first) {
+    return [];
+  }
+  const common: TAttribute[] = [];
+  for (const attribute of first) {
+    const matches = others.map((attributes) =>
+      attributes.find((other) => other.attribute_name === attribute.attribute_name),
+    );
+    if (matches.every((match) => match !== undefined)) {
+      const nb_items = Math.min(attribute.nb_items, ...matches.map((match) => match.nb_items));
+      common.push({ ...attribute, nb_items });
+    }
+  }
+  return common;
+}
+
+export { MESH_ELEMENT_KINDS, MODEL_COMPONENT_KINDS, getAttributeRange, intersectAttributes };
diff --git a/tests/unit/composables/batch_style.nuxt.test.ts b/tests/unit/composables/batch_style.nuxt.test.ts
new file mode 100644
index 000000000..382857109
--- /dev/null
+++ b/tests/unit/composables/batch_style.nuxt.test.ts
@@ -0,0 +1,77 @@
+// Third party imports
+import { type Mock, beforeEach, describe, expect, test, vi } from "vitest";
+
+// Local imports
+import { runWithBatchTargets, useBatchStyle } from "@ogw_front/composables/batch_style";
+import { setupActivePinia } from "@ogw_tests/utils";
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+const GROUP_IDS = ["surface_1", "surface_2", "surface_3"];
+
+type StyleAction = (id: string) => Promise<unknown>;
+
+function openGroupMenu(): void {
+  const menuStore = useMenuStore();
+  menuStore.current_meta_data = {
+    viewer_type: "mesh",
+    geode_object_type: "TriangulatedSurface3D",
+    targetIds: GROUP_IDS,
+  };
+}
+
+function styleAction(): Mock<StyleAction> {
+  return vi.fn<StyleAction>().mockResolvedValue(undefined);
+}
+
+function styledIds(action: ReturnType<typeof styleAction>): string[] {
+  return action.mock.calls.map(([styledId]) => styledId).toSorted();
+}
+
+describe("batch style composable", () => {
+  beforeEach(() => {
+    setupActivePinia();
+  });
+
+  test("applies the action to every data of the group when the menu targets a group", async () => {
+    openGroupMenu();
+    const { applyBatchStyle } = useBatchStyle();
+    const action = styleAction();
+
+    await applyBatchStyle("surface_1", action);
+
+    expect(styledIds(action)).toStrictEqual(GROUP_IDS);
+  });
+
+  test("applies the action only to the given data when the menu targets a single data", async () => {
+    const { applyBatchStyle } = useBatchStyle();
+    const action = styleAction();
+
+    await applyBatchStyle("surface_1", action);
+
+    expect(styledIds(action)).toStrictEqual(["surface_1"]);
+  });
+
+  test("ignores the group targets when the styled data is not part of the group", async () => {
+    openGroupMenu();
+    const { applyBatchStyle } = useBatchStyle();
+    const action = styleAction();
+
+    await applyBatchStyle("other_data", action);
+
+    expect(styledIds(action)).toStrictEqual(["other_data"]);
+  });
+
+  test("runWithBatchTargets restricts the action to the given targets", async () => {
+    openGroupMenu();
+    const { applyBatchStyle } = useBatchStyle();
+    const action = styleAction();
+
+    let pending: Promise<void> = Promise.resolve();
+    runWithBatchTargets(["surface_2"], () => {
+      pending = applyBatchStyle("surface_1", action);
+    });
+    await pending;
+
+    expect(styledIds(action)).toStrictEqual(["surface_2"]);
+  });
+});
diff --git a/tests/unit/utils/attributes.nuxt.test.ts b/tests/unit/utils/attributes.nuxt.test.ts
new file mode 100644
index 000000000..285afa5bc
--- /dev/null
+++ b/tests/unit/utils/attributes.nuxt.test.ts
@@ -0,0 +1,38 @@
+// Third party imports
+import { describe, expect, test } from "vitest";
+
+// Local imports
+import { intersectAttributes } from "@ogw_front/utils/attributes";
+
+describe("attributes intersection", () => {
+  test("keeps only the attributes shared by every data", () => {
+    const common = intersectAttributes([
+      [
+        { attribute_name: "porosity", nb_items: 1 },
+        { attribute_name: "depth", nb_items: 1 },
+      ],
+      [{ attribute_name: "porosity", nb_items: 1 }],
+    ]);
+
+    expect(common.map((attribute) => attribute.attribute_name)).toStrictEqual(["porosity"]);
+  });
+
+  test("keeps the smallest number of items of a shared attribute", () => {
+    const common = intersectAttributes([
+      [{ attribute_name: "velocity", nb_items: 3 }],
+      [{ attribute_name: "velocity", nb_items: 2 }],
+    ]);
+
+    expect(common).toStrictEqual([{ attribute_name: "velocity", nb_items: 2 }]);
+  });
+
+  test("returns no attribute when a data has none", () => {
+    const common = intersectAttributes([[{ attribute_name: "porosity", nb_items: 1 }], []]);
+
+    expect(common).toStrictEqual([]);
+  });
+
+  test("returns no attribute when there is no data", () => {
+    expect(intersectAttributes([])).toStrictEqual([]);
+  });
+});

From 6f36ad5699a80c873809b9f3689c05a3bd0893c9 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 30 Sep 2026 11:16:49 +0200
Subject: [PATCH 2/7] enforce type and logic

---
 .../Viewer/ContextMenu/ContextMenu.vue        |   2 +
 .../EdgedCurve/SpecificEdgesOptions.vue       |  10 +-
 .../Viewer/Generic/Mesh/CellsOptions.vue      |  10 +-
 .../Viewer/Generic/Mesh/EdgesOptions.vue      |  10 +-
 .../Viewer/Generic/Mesh/PointsOptions.vue     |   6 +-
 .../Viewer/Generic/Mesh/PolygonsOptions.vue   |  14 +--
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  |  14 +--
 app/components/Viewer/ObjectTree/Layout.vue   |   3 +-
 .../Viewer/ObjectTree/Views/GlobalObjects.vue |  19 ++-
 .../Viewer/ObjectTree/Views/ModelTree.vue     |  20 +--
 .../Viewer/Options/AttributeSelector.vue      |  61 ++++------
 app/components/Viewer/Options/TextureItem.vue |  41 +++----
 .../Viewer/PointSet/SpecificPointsOptions.vue |   6 +-
 .../Viewer/Solid/SpecificPolyhedraOptions.vue |  14 +--
 .../Viewer/Surface/PolygonsOptions.vue        |  14 +--
 app/components/Viewer/Ui.vue                  |   3 +-
 app/composables/batch_style.ts                | 114 ++++++++++++++----
 app/composables/tree_filter.ts                |  16 +--
 app/stores/menu.ts                            |   2 +
 app/utils/attributes.ts                       |  36 ++++--
 app/utils/treeview.ts                         |  30 +++++
 .../unit/composables/batch_style.nuxt.test.ts |  57 ++++-----
 22 files changed, 282 insertions(+), 220 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index a98188dc6..b265eb262 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -3,6 +3,7 @@ import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton.
 import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems.vue";
 import type { Component } from "vue";
 import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard.vue";
+import { provideBatchGroup } from "@ogw_front/composables/batch_style";
 import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
@@ -30,6 +31,7 @@ const menuStore = useMenuStore();
 const treeviewStore = useTreeviewStore();
 
 const meta_data = computed(() => menuStore.current_meta_data || {});
+provideBatchGroup(() => meta_data.value.targetIds);
 
 const show_menu = ref<boolean>(true);
 const showName = ref<boolean>(false);
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index ef3eb6913..4ec904dd3 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -13,7 +13,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -87,8 +87,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -139,8 +139,8 @@ const edge_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index a9e40562f..5f50dfdd5 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -16,7 +16,7 @@ interface Texture {
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -93,8 +93,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshCellsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -145,8 +145,8 @@ const cell_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshCellsCellAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index e7ca8314c..0484b00bc 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -12,7 +12,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -88,8 +88,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -140,8 +140,8 @@ const edge_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index c50fd75ef..884b4e346 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -12,7 +12,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -88,8 +88,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
index c6f01a973..c9d5086fe 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -21,7 +21,7 @@ interface CapabilityConfig {
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -104,10 +104,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -159,10 +157,8 @@ const polygon_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index f5d67ee97..c5eece40c 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -11,7 +11,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -78,10 +78,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -133,10 +131,8 @@ const polyhedron_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index e90e8ecb0..566908c0c 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
 import ModelTree from "@ogw_front/components/Viewer/ObjectTree/Views/ModelTree.vue";
+import type { TreeMenuPayload } from "@ogw_front/utils/treeview";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
@@ -24,7 +25,7 @@ const { containerWidth } = defineProps<Props>();
 const treeviewStore = useTreeviewStore();
 
 interface Emits {
-  "show-menu": [payload: Record<string, unknown>];
+  "show-menu": [payload: TreeMenuPayload];
 }
 
 const emit = defineEmits<Emits>();
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index 52d9d339f..073721b0f 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import {
+  type DataMenuPayload,
+  type GeodeObjectTypeMenuPayload,
+  compareSelections,
+} from "@ogw_front/utils/treeview";
 import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
 import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
-import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
@@ -17,15 +21,8 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 
-interface ShowMenuPayload {
-  event: MouseEvent;
-  itemId: string;
-  context_type?: "geode_object_type";
-  targetIds?: string[];
-}
-
 interface Emits {
-  "show-menu": [payload: ShowMenuPayload];
+  "show-menu": [payload: DataMenuPayload | GeodeObjectTypeMenuPayload];
 }
 
 const emit = defineEmits<Emits>();
@@ -57,7 +54,7 @@ const {
 } = useTreeFilter(() => treeviewStore.items, { recursiveSort: true });
 
 function onUpdateSelection(val: string[]): void {
-  treeviewStore.selection = applySearchFilter(val, treeviewStore.selection) as string[];
+  treeviewStore.selection = applySearchFilter(val, treeviewStore.selection);
 }
 
 const visibleSelection = computed<string[]>(() => applySearchFilter(treeviewStore.selection, []));
@@ -100,7 +97,7 @@ function showMenu(event: MouseEvent, item: TreeGroupItem): void {
     event,
     itemId: actualItem.id,
     context_type: "geode_object_type",
-    targetIds: applySearchFilter(childIds) as string[],
+    targetIds: applySearchFilter(childIds),
   });
 }
 
diff --git a/app/components/Viewer/ObjectTree/Views/ModelTree.vue b/app/components/Viewer/ObjectTree/Views/ModelTree.vue
index 3d79b6b68..7c46c088a 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelTree.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelTree.vue
@@ -4,6 +4,7 @@ import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonT
 import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import FetchingData from "@ogw_front/components/FetchingData.vue";
 import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
+import type { ModelComponentMenuPayload } from "@ogw_front/utils/treeview";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
@@ -33,16 +34,7 @@ interface CollectionTreeItem {
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 const hybridViewerStore = useHybridViewerStore();
 interface Emits {
-  "show-menu": [
-    payload: {
-      event: unknown;
-      itemId: string;
-      context_type: "model_component" | "model_component_type";
-      modelId: string;
-      modelComponentType?: string;
-      targetComponentIds?: string[];
-    },
-  ];
+  "show-menu": [payload: ModelComponentMenuPayload];
 }
 
 const emit = defineEmits<Emits>();
@@ -87,12 +79,10 @@ const {
 
 function onUpdateSelection(newSelection: string[]): void {
   const finalSelection = applySearchFilter(newSelection, visibleComponents.value);
-  updateVisibility(finalSelection as string[]);
+  updateVisibility(finalSelection);
 }
 
-const visibleSelection = computed<string[]>(
-  () => applySearchFilter(visibleComponents.value, []) as string[],
-);
+const visibleSelection = computed<string[]>(() => applySearchFilter(visibleComponents.value, []));
 
 const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
   if (search.value && cache.value) {
@@ -137,7 +127,7 @@ function extractComponentIds(node: CollectionTreeItem): string[] {
   return [node.id];
 }
 
-function showContextMenu(event: unknown, item: CollectionTreeItem): void {
+function showContextMenu(event: MouseEvent, item: CollectionTreeItem): void {
   const actualItem = item.raw || item;
   if (isCollections.value && !MESH_COMPONENT_TYPES.includes(actualItem.category ?? "")) {
     emit("show-menu", {
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index e95c9efe8..2284c23d5 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getAttributeRange, intersectAttributes } from "@ogw_front/utils/attributes";
-import { menuGroupTargets, runWithBatchTargets } from "@ogw_front/composables/batch_style";
+import { requestForTargets, useBatchGroup } from "@ogw_front/composables/batch_style";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
@@ -37,9 +37,9 @@ interface AttributeInfo {
 }
 
 const attributes = ref<AttributeInfo[]>([]);
-const attributesPerTarget = ref<Record<string, AttributeInfo[]>>({});
+let attributesPerTarget = new Map<string, AttributeInfo[]>();
 
-const groupTargetIds = computed<string[] | undefined>(() => menuGroupTargets(id));
+const { targetIds: groupTargetIds, ranges: groupRanges } = useBatchGroup(() => id);
 
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
@@ -113,47 +113,32 @@ function hasSelectedComponent(components: unknown): boolean {
   return Array.isArray(components) && components.length > 0;
 }
 
-function getGroupAttributes(targetIds: string[]): void {
-  for (const targetId of targetIds) {
-    backStore.request(
-      { schema, params: { id: targetId } },
-      {
-        response_function: (response: unknown) => {
-          attributesPerTarget.value[targetId] = (
-            response as { attributes: AttributeInfo[] }
-          ).attributes;
-          if (targetIds.every((target) => attributesPerTarget.value[target] !== undefined)) {
-            attributes.value = intersectAttributes(
-              targetIds.map((target) => attributesPerTarget.value[target] ?? []),
-            );
-          }
-        },
-      },
-    );
-  }
+async function getGroupAttributes(targetIds: string[]): Promise<void> {
+  const responses = await requestForTargets<{ attributes: AttributeInfo[] }>(schema, targetIds);
+  attributesPerTarget = new Map(
+    [...responses].map(([targetId, response]) => [targetId, response.attributes]),
+  );
+  attributes.value = intersectAttributes([...attributesPerTarget.values()]);
 }
 
-function initGroupAttribute(targetIds: string[], name: string, item: number): void {
-  emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
-  for (const targetId of targetIds) {
-    const attribute = attributesPerTarget.value[targetId]?.find(
-      (candidate) => candidate.attribute_name === name,
-    );
+function initGroupAttribute(name: string, item: number): void {
+  for (const [targetId, targetAttributes] of attributesPerTarget) {
+    const attribute = targetAttributes.find((candidate) => candidate.attribute_name === name);
     if (attribute) {
       const { min, max } = getAttributeRange(
         attribute as unknown as Parameters<typeof getAttributeRange>[0],
         item,
       );
-      runWithBatchTargets([targetId], () => {
-        attributeRange.value = [min, max];
-      });
+      groupRanges.value?.set(targetId, [min, max]);
     }
   }
+  emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
+  resetRange();
 }
 
-function getAttributes(): void {
+async function getAttributes(): Promise<void> {
   if (groupTargetIds.value) {
-    getGroupAttributes(groupTargetIds.value);
+    await getGroupAttributes(groupTargetIds.value);
     return;
   }
   const schemaProperties = schema.properties as Record<string, unknown> | undefined;
@@ -167,7 +152,7 @@ function getAttributes(): void {
     params.component_ids = componentIds;
   }
 
-  backStore.request(
+  await backStore.request(
     { schema, params },
     {
       response_function: (response: unknown) => {
@@ -177,20 +162,20 @@ function getAttributes(): void {
   );
 }
 
-onMounted(() => {
-  getAttributes();
+onMounted(async () => {
+  await getAttributes();
 });
 
 watch(
   () => [id, componentIds, schema],
-  () => {
-    getAttributes();
+  async () => {
+    await getAttributes();
   },
 );
 
 watch([attributeName, attributeItem], ([name, item]) => {
   if (groupTargetIds.value && name !== undefined) {
-    initGroupAttribute(groupTargetIds.value, name, item ?? 0);
+    initGroupAttribute(name, item ?? 0);
   }
 });
 
diff --git a/app/components/Viewer/Options/TextureItem.vue b/app/components/Viewer/Options/TextureItem.vue
index a3e3a5fc3..98b856829 100644
--- a/app/components/Viewer/Options/TextureItem.vue
+++ b/app/components/Viewer/Options/TextureItem.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { requestForTargets, useBatchGroup } from "@ogw_front/composables/batch_style";
 import FileUploader from "@ogw_front/components/FileUploader.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
-import { menuGroupTargets } from "@ogw_front/composables/batch_style";
+import { intersectBy } from "@ogw_front/utils/attributes";
 import { useBackStore } from "@ogw_front/stores/back";
 
 // Mirrors FileUploader's own (unexported) UploadFile type.
@@ -41,34 +42,22 @@ watch(
 const textureCoordinates = ref<string[]>([]);
 const backStore = useBackStore();
 
-function getTextureCoordinates(): void {
+const { targetIds: groupTargetIds } = useBatchGroup(() => id);
+
+async function getTextureCoordinates(): Promise<void> {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
-  const targetIds = menuGroupTargets(id) ?? [id];
-  const coordinatesPerData: Record<string, string[]> = {};
-  for (const targetId of targetIds) {
-    backStore.request(
-      { schema, params: { id: targetId } },
-      {
-        response_function: (response: unknown) => {
-          coordinatesPerData[targetId] = (
-            response as { texture_coordinates: string[] }
-          ).texture_coordinates;
-          if (targetIds.every((target) => coordinatesPerData[target] !== undefined)) {
-            const [first = [], ...others] = targetIds.map(
-              (target) => coordinatesPerData[target] ?? [],
-            );
-            textureCoordinates.value = first.filter((name) =>
-              others.every((coordinates) => coordinates.includes(name)),
-            );
-          }
-        },
-      },
-    );
-  }
+  const responses = await requestForTargets<{ texture_coordinates: string[] }>(
+    schema,
+    groupTargetIds.value ?? [id],
+  );
+  textureCoordinates.value = intersectBy(
+    [...responses.values()].map((response) => response.texture_coordinates),
+    (coordinate) => coordinate,
+  );
 }
 
-onMounted(() => {
-  getTextureCoordinates();
+onMounted(async () => {
+  await getTextureCoordinates();
 });
 
 async function files_uploaded_event(value: UploadFile[]): Promise<void> {
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index 6285c9b14..aa5ae8830 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -13,7 +13,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index: number };
@@ -87,8 +87,8 @@ const vertex_attribute_range = computed({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum)),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index 136fb2488..7e8af9d78 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -12,7 +12,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index: number };
@@ -78,10 +78,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -133,10 +131,8 @@ const polyhedron_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Surface/PolygonsOptions.vue b/app/components/Viewer/Surface/PolygonsOptions.vue
index 9562af274..7da6f3224 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -12,7 +12,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchStyle } = useBatchStyle();
+const { applyBatchRange, applyBatchStyle } = useBatchStyle();
 
 interface Texture {
   id: string;
@@ -92,10 +92,8 @@ const vertex_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -147,10 +145,8 @@ const polygon_attribute_range = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await applyBatchStyle(id.value, (targetId: string) =>
-      Promise.resolve(
-        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
-      ),
+    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, rangeMinimum, rangeMaximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 29e2fc8b2..4ee435106 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker.vue";
 import ToolActiveChip from "@ogw_front/components/Viewer/ToolActiveChip.vue";
+import type { TreeMenuPayload } from "@ogw_front/utils/treeview";
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu.vue";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout.vue";
 import { getCurrentInstance } from "vue";
@@ -18,7 +19,7 @@ interface Props {
 const { displayMenu, containerWidth, containerHeight } = defineProps<Props>();
 
 const emit = defineEmits<{
-  "show-menu": [args: unknown];
+  "show-menu": [payload: TreeMenuPayload];
 }>();
 const menuStore = useMenuStore();
 const viewerStore = useViewerStore();
diff --git a/app/composables/batch_style.ts b/app/composables/batch_style.ts
index 6a3e8b8f8..359ee10d6 100644
--- a/app/composables/batch_style.ts
+++ b/app/composables/batch_style.ts
@@ -1,17 +1,70 @@
+import {
+  type ComputedRef,
+  type InjectionKey,
+  type MaybeRefOrGetter,
+  computed,
+  inject,
+  provide,
+  toValue,
+} from "vue";
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import { useBackStore } from "@ogw_front/stores/back";
 import { useDataStore } from "@ogw_front/stores/data";
-import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-let forcedTargets: readonly string[] | undefined = undefined;
+type AttributeRange = [number, number];
 
-function runWithBatchTargets(targets: readonly string[], styleChange: () => void): void {
-  const previous = forcedTargets;
-  forcedTargets = targets;
-  try {
-    styleChange();
-  } finally {
-    forcedTargets = previous;
-  }
+interface BatchGroup {
+  targetIds: string[];
+  ranges: Map<string, AttributeRange>;
+}
+
+const BATCH_GROUP_KEY: InjectionKey<ComputedRef<BatchGroup | undefined>> = Symbol("batch_group");
+
+function createBatchGroup(
+  targetIds: () => string[] | undefined,
+): ComputedRef<BatchGroup | undefined> {
+  return computed(() => {
+    const ids = targetIds();
+    return ids ? { targetIds: ids, ranges: new Map() } : undefined;
+  });
+}
+
+function provideBatchGroup(targetIds: () => string[] | undefined): void {
+  provide(BATCH_GROUP_KEY, createBatchGroup(targetIds));
+}
+
+function injectBatchGroup(): ComputedRef<BatchGroup | undefined> | undefined {
+  return inject(BATCH_GROUP_KEY, undefined);
+}
+
+function groupTargetsOf(group: BatchGroup | undefined, id: string): string[] | undefined {
+  return group?.targetIds.includes(id) === true ? group.targetIds : undefined;
+}
+
+function useBatchGroup(id: MaybeRefOrGetter<string>): {
+  targetIds: ComputedRef<string[] | undefined>;
+  ranges: ComputedRef<Map<string, AttributeRange> | undefined>;
+} {
+  const group = injectBatchGroup();
+  const targetIds = computed(() => groupTargetsOf(group?.value, toValue(id)));
+  const ranges = computed(() => (targetIds.value ? group?.value?.ranges : undefined));
+  return { targetIds, ranges };
+}
+
+async function requestForTargets<TResponse>(
+  schema: JsonRpcSchema,
+  targetIds: readonly string[],
+): Promise<Map<string, TResponse>> {
+  const backStore = useBackStore();
+  const responses = await Promise.all(
+    targetIds.map(async (targetId) => {
+      // oxlint-disable-next-line no-unsafe-type-assertion -- this is the trusted API boundary.
+      const response = (await backStore.request({ schema, params: { id: targetId } })) as TResponse;
+      return [targetId, response] as const;
+    }),
+  );
+  return new Map(responses);
 }
 
 async function applyActionOn(
@@ -25,25 +78,19 @@ async function applyActionOn(
   );
 }
 
-function menuGroupTargets(id: string): string[] | undefined {
-  const { targetIds } = useMenuStore().current_meta_data;
-  return targetIds?.includes(id) ? targetIds : undefined;
-}
-
-function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
+function useBatchStyle(): {
+  applyBatchStyle: typeof applyBatchStyle;
+  applyBatchRange: typeof applyBatchRange;
+} {
   const treeviewStore = useTreeviewStore();
   const dataStore = useDataStore();
+  const group = injectBatchGroup();
 
   async function applyBatchStyle(
     id: string,
     action: (id: string) => Promise<unknown>,
   ): Promise<void> {
-    if (forcedTargets !== undefined) {
-      await applyActionOn(forcedTargets, action);
-      return;
-    }
-
-    const groupTargets = menuGroupTargets(id);
+    const groupTargets = groupTargetsOf(group?.value, id);
     if (groupTargets) {
       await applyActionOn(groupTargets, action);
       return;
@@ -76,7 +123,26 @@ function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
     }
   }
 
-  return { applyBatchStyle };
+  async function applyBatchRange(
+    id: string,
+    range: AttributeRange,
+    setRange: (id: string, minimum: number, maximum: number) => unknown,
+  ): Promise<void> {
+    await applyBatchStyle(id, async (targetId: string) => {
+      const [minimum, maximum] = group?.value?.ranges.get(targetId) ?? range;
+      await setRange(targetId, minimum, maximum);
+    });
+  }
+
+  return { applyBatchStyle, applyBatchRange };
 }
 
-export { menuGroupTargets, runWithBatchTargets, useBatchStyle };
+export {
+  BATCH_GROUP_KEY,
+  createBatchGroup,
+  provideBatchGroup,
+  requestForTargets,
+  useBatchGroup,
+  useBatchStyle,
+};
+export type { AttributeRange };
diff --git a/app/composables/tree_filter.ts b/app/composables/tree_filter.ts
index 23a433d6f..dac299dab 100644
--- a/app/composables/tree_filter.ts
+++ b/app/composables/tree_filter.ts
@@ -28,10 +28,10 @@ interface UseTreeFilterReturn {
   availableFilterOptions: ComputedRef<string[]>;
   toggleSort: () => void;
   customFilter: typeof customFilter;
-  applySearchFilter: (
-    newSelection: readonly unknown[],
-    previousSelection?: readonly unknown[],
-  ) => unknown[];
+  applySearchFilter: <TId>(
+    newSelection: readonly TId[],
+    previousSelection?: readonly TId[],
+  ) => TId[];
 }
 
 function customFilter(
@@ -161,10 +161,10 @@ function useTreeFilter(
     return map;
   });
 
-  function applySearchFilter(
-    newSelection: readonly unknown[],
-    previousSelection: readonly unknown[] = [],
-  ): unknown[] {
+  function applySearchFilter<TId>(
+    newSelection: readonly TId[],
+    previousSelection: readonly TId[] = [],
+  ): TId[] {
     if (!search.value) {
       return [...newSelection];
     }
diff --git a/app/stores/menu.ts b/app/stores/menu.ts
index 0e1261fa8..c66dd1c83 100644
--- a/app/stores/menu.ts
+++ b/app/stores/menu.ts
@@ -247,3 +247,5 @@ export const useMenuStore = defineStore("menu", () => {
     toggleItemOptions,
   };
 });
+
+export type { MenuMetaData };
diff --git a/app/utils/attributes.ts b/app/utils/attributes.ts
index e0fcff1e3..b7c3580f8 100644
--- a/app/utils/attributes.ts
+++ b/app/utils/attributes.ts
@@ -62,6 +62,16 @@ const MODEL_COMPONENT_KINDS: Record<string, string[]> = {
   Block: ["vertex", "polyhedron"],
 };
 
+function intersectBy<TItem>(
+  lists: readonly (readonly TItem[])[],
+  key: (item: TItem) => string,
+): TItem[] {
+  const [first = [], ...others] = lists;
+  return first.filter((item) =>
+    others.every((list) => list.some((other) => key(other) === key(item))),
+  );
+}
+
 interface NamedAttribute {
   attribute_name: string;
   nb_items: number;
@@ -70,21 +80,23 @@ interface NamedAttribute {
 function intersectAttributes<TAttribute extends NamedAttribute>(
   attributesPerData: readonly (readonly TAttribute[])[],
 ): TAttribute[] {
-  const [first, ...others] = attributesPerData;
-  if (!first) {
-    return [];
-  }
+  const allAttributes = attributesPerData.flat();
   const common: TAttribute[] = [];
-  for (const attribute of first) {
-    const matches = others.map((attributes) =>
-      attributes.find((other) => other.attribute_name === attribute.attribute_name),
+  for (const attribute of intersectBy(attributesPerData, (item) => item.attribute_name)) {
+    const nb_items = Math.min(
+      ...allAttributes
+        .filter((other) => other.attribute_name === attribute.attribute_name)
+        .map((other) => other.nb_items),
     );
-    if (matches.every((match) => match !== undefined)) {
-      const nb_items = Math.min(attribute.nb_items, ...matches.map((match) => match.nb_items));
-      common.push({ ...attribute, nb_items });
-    }
+    common.push({ ...attribute, nb_items });
   }
   return common;
 }
 
-export { MESH_ELEMENT_KINDS, MODEL_COMPONENT_KINDS, getAttributeRange, intersectAttributes };
+export {
+  MESH_ELEMENT_KINDS,
+  MODEL_COMPONENT_KINDS,
+  getAttributeRange,
+  intersectAttributes,
+  intersectBy,
+};
diff --git a/app/utils/treeview.ts b/app/utils/treeview.ts
index d9373a85d..a335d5a0b 100644
--- a/app/utils/treeview.ts
+++ b/app/utils/treeview.ts
@@ -7,4 +7,34 @@ function compareSelections<Item>(
   return { added, removed };
 }
 
+interface DataMenuPayload {
+  event: MouseEvent;
+  itemId: string;
+  context_type?: undefined;
+}
+
+interface GeodeObjectTypeMenuPayload {
+  event: MouseEvent;
+  itemId: string;
+  context_type: "geode_object_type";
+  targetIds: string[];
+}
+
+interface ModelComponentMenuPayload {
+  event: MouseEvent;
+  itemId: string;
+  context_type: "model_component" | "model_component_type";
+  modelId: string;
+  modelComponentType?: string;
+  targetComponentIds?: string[];
+}
+
+type TreeMenuPayload = DataMenuPayload | GeodeObjectTypeMenuPayload | ModelComponentMenuPayload;
+
 export { compareSelections };
+export type {
+  DataMenuPayload,
+  GeodeObjectTypeMenuPayload,
+  ModelComponentMenuPayload,
+  TreeMenuPayload,
+};
diff --git a/tests/unit/composables/batch_style.nuxt.test.ts b/tests/unit/composables/batch_style.nuxt.test.ts
index 382857109..702f99e11 100644
--- a/tests/unit/composables/batch_style.nuxt.test.ts
+++ b/tests/unit/composables/batch_style.nuxt.test.ts
@@ -1,29 +1,36 @@
 // Third party imports
 import { type Mock, beforeEach, describe, expect, test, vi } from "vitest";
+import { createApp } from "vue";
 
 // Local imports
-import { runWithBatchTargets, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  BATCH_GROUP_KEY,
+  createBatchGroup,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import { setupActivePinia } from "@ogw_tests/utils";
-import { useMenuStore } from "@ogw_front/stores/menu";
 
 const GROUP_IDS = ["surface_1", "surface_2", "surface_3"];
+const SECOND_MAXIMUM = 20;
+const REFERENCE_RANGE: [number, number] = [0, 1];
+const SECOND_RANGE: [number, number] = [0, SECOND_MAXIMUM];
 
 type StyleAction = (id: string) => Promise<unknown>;
 
-function openGroupMenu(): void {
-  const menuStore = useMenuStore();
-  menuStore.current_meta_data = {
-    viewer_type: "mesh",
-    geode_object_type: "TriangulatedSurface3D",
-    targetIds: GROUP_IDS,
-  };
+function batchStyleIn(
+  targetIds: string[] | undefined,
+): ReturnType<typeof useBatchStyle> & { group: ReturnType<typeof createBatchGroup> } {
+  const app = createApp({});
+  const group = createBatchGroup(() => targetIds);
+  app.provide(BATCH_GROUP_KEY, group);
+  return { ...app.runWithContext(() => useBatchStyle()), group };
 }
 
 function styleAction(): Mock<StyleAction> {
   return vi.fn<StyleAction>().mockResolvedValue(undefined);
 }
 
-function styledIds(action: ReturnType<typeof styleAction>): string[] {
+function styledIds(action: Mock<StyleAction>): string[] {
   return action.mock.calls.map(([styledId]) => styledId).toSorted();
 }
 
@@ -32,9 +39,8 @@ describe("batch style composable", () => {
     setupActivePinia();
   });
 
-  test("applies the action to every data of the group when the menu targets a group", async () => {
-    openGroupMenu();
-    const { applyBatchStyle } = useBatchStyle();
+  test("applies the action to every data of the group", async () => {
+    const { applyBatchStyle } = batchStyleIn(GROUP_IDS);
     const action = styleAction();
 
     await applyBatchStyle("surface_1", action);
@@ -42,8 +48,8 @@ describe("batch style composable", () => {
     expect(styledIds(action)).toStrictEqual(GROUP_IDS);
   });
 
-  test("applies the action only to the given data when the menu targets a single data", async () => {
-    const { applyBatchStyle } = useBatchStyle();
+  test("applies the action only to the given data outside of a group", async () => {
+    const { applyBatchStyle } = batchStyleIn(undefined);
     const action = styleAction();
 
     await applyBatchStyle("surface_1", action);
@@ -51,9 +57,8 @@ describe("batch style composable", () => {
     expect(styledIds(action)).toStrictEqual(["surface_1"]);
   });
 
-  test("ignores the group targets when the styled data is not part of the group", async () => {
-    openGroupMenu();
-    const { applyBatchStyle } = useBatchStyle();
+  test("ignores the group when the styled data is not part of it", async () => {
+    const { applyBatchStyle } = batchStyleIn(GROUP_IDS);
     const action = styleAction();
 
     await applyBatchStyle("other_data", action);
@@ -61,17 +66,15 @@ describe("batch style composable", () => {
     expect(styledIds(action)).toStrictEqual(["other_data"]);
   });
 
-  test("runWithBatchTargets restricts the action to the given targets", async () => {
-    openGroupMenu();
-    const { applyBatchStyle } = useBatchStyle();
-    const action = styleAction();
+  test("applies each data its own range of the group", async () => {
+    const { applyBatchRange, group } = batchStyleIn(["surface_1", "surface_2"]);
+    group.value?.ranges.set("surface_2", SECOND_RANGE);
+    const rangePerData: Record<string, [number, number]> = {};
 
-    let pending: Promise<void> = Promise.resolve();
-    runWithBatchTargets(["surface_2"], () => {
-      pending = applyBatchStyle("surface_1", action);
+    await applyBatchRange("surface_1", REFERENCE_RANGE, (targetId, minimum, maximum) => {
+      rangePerData[targetId] = [minimum, maximum];
     });
-    await pending;
 
-    expect(styledIds(action)).toStrictEqual(["surface_2"]);
+    expect(rangePerData).toStrictEqual({ surface_1: REFERENCE_RANGE, surface_2: SECOND_RANGE });
   });
 });

From 581550dd12919ed3d21a00dd709dc1c96786390c Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 30 Sep 2026 11:30:34 +0200
Subject: [PATCH 3/7] refacto

---
 .../EdgedCurve/SpecificEdgesOptions.vue       | 22 ++----
 .../Viewer/Generic/Mesh/CellsOptions.vue      | 22 ++----
 .../Viewer/Generic/Mesh/EdgesOptions.vue      | 22 ++----
 .../Viewer/Generic/Mesh/PointsOptions.vue     | 12 +--
 .../Viewer/Generic/Mesh/PolygonsOptions.vue   | 22 ++----
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  | 22 ++----
 .../Viewer/Options/AttributeSelector.vue      | 21 +++--
 .../Viewer/Options/ColoringTypeSelector.vue   | 13 ++--
 app/components/Viewer/Options/TextureItem.vue | 13 ++--
 .../Viewer/PointSet/SpecificPointsOptions.vue | 12 +--
 .../Viewer/Solid/SpecificPolyhedraOptions.vue | 22 ++----
 .../Viewer/Surface/PolygonsOptions.vue        | 22 ++----
 app/composables/batch_style.ts                | 78 +++++--------------
 app/utils/request_for_targets.ts              | 21 +++++
 .../unit/composables/batch_style.nuxt.test.ts | 52 ++++++++-----
 15 files changed, 157 insertions(+), 219 deletions(-)
 create mode 100644 app/utils/request_for_targets.ts

diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index 4ec904dd3..d7d552c6a 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -7,7 +8,6 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -80,15 +80,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -132,15 +128,11 @@ const edge_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed<[number, number] | undefined>({
+const edge_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index 5f50dfdd5..00db38b71 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -86,15 +86,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshCellsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -138,15 +134,11 @@ const cell_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const cell_attribute_range = computed<[number, number] | undefined>({
+const cell_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshCellsCellAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index 0484b00bc..296270852 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +7,6 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -81,15 +81,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -133,15 +129,11 @@ const edge_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed<[number, number] | undefined>({
+const edge_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 884b4e346..234b9e410 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +7,6 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -81,15 +81,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
index c9d5086fe..41d43aaf6 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -97,15 +97,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -150,15 +146,11 @@ const polygon_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed<[number, number] | undefined>({
+const polygon_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index c5eece40c..436984ba6 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -71,15 +71,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -124,15 +120,11 @@ const polyhedron_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed<[number, number] | undefined>({
+const polyhedron_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index 2284c23d5..81a203e47 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
+import {
+  type AttributeRange,
+  type BatchRange,
+  useBatchGroup,
+} from "@ogw_front/composables/batch_style";
 import { getAttributeRange, intersectAttributes } from "@ogw_front/utils/attributes";
-import { requestForTargets, useBatchGroup } from "@ogw_front/composables/batch_style";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+import { requestForTargets } from "@ogw_front/utils/request_for_targets";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
 const attributeName = defineModel<string>("attributeName");
 const attributeItem = defineModel<number>("attributeItem");
-const attributeRange = defineModel<(number | undefined)[]>("attributeRange");
+const attributeRange = defineModel<BatchRange>("attributeRange");
 const attributeColorMap = defineModel<string>("attributeColorMap");
 const attributeNoDataColor = defineModel<typeof DEFAULT_NO_DATA_COLOR>("attributeNoDataColor");
 
@@ -39,7 +44,7 @@ interface AttributeInfo {
 const attributes = ref<AttributeInfo[]>([]);
 let attributesPerTarget = new Map<string, AttributeInfo[]>();
 
-const { targetIds: groupTargetIds, ranges: groupRanges } = useBatchGroup(() => id);
+const groupTargetIds = useBatchGroup(() => id);
 
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
@@ -116,12 +121,13 @@ function hasSelectedComponent(components: unknown): boolean {
 async function getGroupAttributes(targetIds: string[]): Promise<void> {
   const responses = await requestForTargets<{ attributes: AttributeInfo[] }>(schema, targetIds);
   attributesPerTarget = new Map(
-    [...responses].map(([targetId, response]) => [targetId, response.attributes]),
+    targetIds.map((targetId) => [targetId, responses.get(targetId)?.attributes ?? []]),
   );
   attributes.value = intersectAttributes([...attributesPerTarget.values()]);
 }
 
 function initGroupAttribute(name: string, item: number): void {
+  const ranges = new Map<string, AttributeRange>();
   for (const [targetId, targetAttributes] of attributesPerTarget) {
     const attribute = targetAttributes.find((candidate) => candidate.attribute_name === name);
     if (attribute) {
@@ -129,11 +135,11 @@ function initGroupAttribute(name: string, item: number): void {
         attribute as unknown as Parameters<typeof getAttributeRange>[0],
         item,
       );
-      groupRanges.value?.set(targetId, [min, max]);
+      ranges.set(targetId, [min, max]);
     }
   }
   emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
-  resetRange();
+  attributeRange.value = ranges;
 }
 
 async function getAttributes(): Promise<void> {
@@ -189,7 +195,8 @@ watch([attributeName, attributeItem, currentAttribute], () => {
   if (attributeNoDataColor.value === undefined) {
     attributeNoDataColor.value = DEFAULT_NO_DATA_COLOR;
   }
-  if (!attributeRange.value || attributeRange.value[0] === undefined) {
+  const range = attributeRange.value as number[] | undefined;
+  if (range?.[0] === undefined) {
     resetRange();
   }
 });
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index 618178fe4..e1d84631b 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { BatchRange } from "@ogw_front/composables/batch_style";
 import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsAttributeSelector from "@ogw_front/components/Viewer/Options/AttributeSelector.vue";
@@ -31,33 +32,31 @@ const textures = defineModel<Texture[]>("textures");
 
 const vertex_attribute_name = defineModel<string>("vertex_attribute_name");
 const vertex_attribute_item = defineModel<number>("vertex_attribute_item");
-const vertex_attribute_range = defineModel<(number | undefined)[]>("vertex_attribute_range");
+const vertex_attribute_range = defineModel<BatchRange>("vertex_attribute_range");
 const vertex_attribute_color_map = defineModel<string>("vertex_attribute_color_map");
 const vertex_attribute_no_data_color = defineModel<RGBAColor>("vertex_attribute_no_data_color");
 
 const edge_attribute_name = defineModel<string>("edge_attribute_name");
 const edge_attribute_item = defineModel<number>("edge_attribute_item");
-const edge_attribute_range = defineModel<(number | undefined)[]>("edge_attribute_range");
+const edge_attribute_range = defineModel<BatchRange>("edge_attribute_range");
 const edge_attribute_color_map = defineModel<string>("edge_attribute_color_map");
 const edge_attribute_no_data_color = defineModel<RGBAColor>("edge_attribute_no_data_color");
 
 const cell_attribute_name = defineModel<string>("cell_attribute_name");
 const cell_attribute_item = defineModel<number>("cell_attribute_item");
-const cell_attribute_range = defineModel<(number | undefined)[]>("cell_attribute_range");
+const cell_attribute_range = defineModel<BatchRange>("cell_attribute_range");
 const cell_attribute_color_map = defineModel<string>("cell_attribute_color_map");
 const cell_attribute_no_data_color = defineModel<RGBAColor>("cell_attribute_no_data_color");
 
 const polygon_attribute_name = defineModel<string>("polygon_attribute_name");
 const polygon_attribute_item = defineModel<number>("polygon_attribute_item");
-const polygon_attribute_range = defineModel<(number | undefined)[]>("polygon_attribute_range");
+const polygon_attribute_range = defineModel<BatchRange>("polygon_attribute_range");
 const polygon_attribute_color_map = defineModel<string>("polygon_attribute_color_map");
 const polygon_attribute_no_data_color = defineModel<RGBAColor>("polygon_attribute_no_data_color");
 
 const polyhedron_attribute_name = defineModel<string>("polyhedron_attribute_name");
 const polyhedron_attribute_item = defineModel<number>("polyhedron_attribute_item");
-const polyhedron_attribute_range = defineModel<(number | undefined)[]>(
-  "polyhedron_attribute_range",
-);
+const polyhedron_attribute_range = defineModel<BatchRange>("polyhedron_attribute_range");
 const polyhedron_attribute_color_map = defineModel<string>("polyhedron_attribute_color_map");
 const polyhedron_attribute_no_data_color = defineModel<RGBAColor>(
   "polyhedron_attribute_no_data_color",
diff --git a/app/components/Viewer/Options/TextureItem.vue b/app/components/Viewer/Options/TextureItem.vue
index 98b856829..908cf96a2 100644
--- a/app/components/Viewer/Options/TextureItem.vue
+++ b/app/components/Viewer/Options/TextureItem.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { requestForTargets, useBatchGroup } from "@ogw_front/composables/batch_style";
 import FileUploader from "@ogw_front/components/FileUploader.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { intersectBy } from "@ogw_front/utils/attributes";
+import { requestForTargets } from "@ogw_front/utils/request_for_targets";
 import { useBackStore } from "@ogw_front/stores/back";
+import { useBatchGroup } from "@ogw_front/composables/batch_style";
 
 // Mirrors FileUploader's own (unexported) UploadFile type.
 type UploadFile = File & { isConfigured?: boolean; displayName?: string };
@@ -42,16 +43,14 @@ watch(
 const textureCoordinates = ref<string[]>([]);
 const backStore = useBackStore();
 
-const { targetIds: groupTargetIds } = useBatchGroup(() => id);
+const groupTargetIds = useBatchGroup(() => id);
 
 async function getTextureCoordinates(): Promise<void> {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
-  const responses = await requestForTargets<{ texture_coordinates: string[] }>(
-    schema,
-    groupTargetIds.value ?? [id],
-  );
+  const targetIds = groupTargetIds.value ?? [id];
+  const responses = await requestForTargets<{ texture_coordinates: string[] }>(schema, targetIds);
   textureCoordinates.value = intersectBy(
-    [...responses.values()].map((response) => response.texture_coordinates),
+    targetIds.map((targetId) => responses.get(targetId)?.texture_coordinates ?? []),
     (coordinate) => coordinate,
   );
 }
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index aa5ae8830..a7252842e 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -7,7 +8,6 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -80,15 +80,11 @@ const vertex_attribute_item = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index 7e8af9d78..b048f0b87 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +7,6 @@ import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import SolidPolyhedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -71,15 +71,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -124,15 +120,11 @@ const polyhedron_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed<[number, number] | undefined>({
+const polyhedron_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Surface/PolygonsOptions.vue b/app/components/Viewer/Surface/PolygonsOptions.vue
index 7da6f3224..eedcee71c 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +7,6 @@ import PolygonalSurfacePolygons from "@ogw_front/assets/viewer_svgs/surface_tria
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
-import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -85,15 +85,11 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<[number, number] | undefined>({
+const vertex_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
@@ -138,15 +134,11 @@ const polygon_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed<[number, number] | undefined>({
+const polygon_attribute_range = computed<BatchRange | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
-    const [minimum, maximum] = newValue;
-    if (minimum === undefined || maximum === undefined) {
-      return;
-    }
-    await applyBatchRange(id.value, [minimum, maximum], (targetId, rangeMinimum, rangeMaximum) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, rangeMinimum, rangeMaximum),
+    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/composables/batch_style.ts b/app/composables/batch_style.ts
index 359ee10d6..f04497b90 100644
--- a/app/composables/batch_style.ts
+++ b/app/composables/batch_style.ts
@@ -7,64 +7,32 @@ import {
   provide,
   toValue,
 } from "vue";
-import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
-import { useBackStore } from "@ogw_front/stores/back";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 type AttributeRange = [number, number];
+type BatchRange = readonly (number | undefined)[] | Map<string, AttributeRange>;
 
-interface BatchGroup {
-  targetIds: string[];
-  ranges: Map<string, AttributeRange>;
-}
-
-const BATCH_GROUP_KEY: InjectionKey<ComputedRef<BatchGroup | undefined>> = Symbol("batch_group");
-
-function createBatchGroup(
-  targetIds: () => string[] | undefined,
-): ComputedRef<BatchGroup | undefined> {
-  return computed(() => {
-    const ids = targetIds();
-    return ids ? { targetIds: ids, ranges: new Map() } : undefined;
-  });
-}
+const BATCH_GROUP_KEY: InjectionKey<ComputedRef<string[] | undefined>> = Symbol("batch_group");
 
 function provideBatchGroup(targetIds: () => string[] | undefined): void {
-  provide(BATCH_GROUP_KEY, createBatchGroup(targetIds));
-}
-
-function injectBatchGroup(): ComputedRef<BatchGroup | undefined> | undefined {
-  return inject(BATCH_GROUP_KEY, undefined);
+  provide(BATCH_GROUP_KEY, computed(targetIds));
 }
 
-function groupTargetsOf(group: BatchGroup | undefined, id: string): string[] | undefined {
-  return group?.targetIds.includes(id) === true ? group.targetIds : undefined;
+function groupTargetsOf(targetIds: string[] | undefined, id: string): string[] | undefined {
+  return targetIds?.includes(id) === true ? targetIds : undefined;
 }
 
-function useBatchGroup(id: MaybeRefOrGetter<string>): {
-  targetIds: ComputedRef<string[] | undefined>;
-  ranges: ComputedRef<Map<string, AttributeRange> | undefined>;
-} {
-  const group = injectBatchGroup();
-  const targetIds = computed(() => groupTargetsOf(group?.value, toValue(id)));
-  const ranges = computed(() => (targetIds.value ? group?.value?.ranges : undefined));
-  return { targetIds, ranges };
+function useBatchGroup(id: MaybeRefOrGetter<string>): ComputedRef<string[] | undefined> {
+  const group = inject(BATCH_GROUP_KEY, undefined);
+  return computed(() => groupTargetsOf(group?.value, toValue(id)));
 }
 
-async function requestForTargets<TResponse>(
-  schema: JsonRpcSchema,
-  targetIds: readonly string[],
-): Promise<Map<string, TResponse>> {
-  const backStore = useBackStore();
-  const responses = await Promise.all(
-    targetIds.map(async (targetId) => {
-      // oxlint-disable-next-line no-unsafe-type-assertion -- this is the trusted API boundary.
-      const response = (await backStore.request({ schema, params: { id: targetId } })) as TResponse;
-      return [targetId, response] as const;
-    }),
-  );
-  return new Map(responses);
+function rangeOf(range: BatchRange | undefined, targetId: string): readonly (number | undefined)[] {
+  if (range instanceof Map) {
+    return range.get(targetId) ?? [];
+  }
+  return range ?? [];
 }
 
 async function applyActionOn(
@@ -84,7 +52,7 @@ function useBatchStyle(): {
 } {
   const treeviewStore = useTreeviewStore();
   const dataStore = useDataStore();
-  const group = injectBatchGroup();
+  const group = inject(BATCH_GROUP_KEY, undefined);
 
   async function applyBatchStyle(
     id: string,
@@ -125,11 +93,14 @@ function useBatchStyle(): {
 
   async function applyBatchRange(
     id: string,
-    range: AttributeRange,
+    range: BatchRange | undefined,
     setRange: (id: string, minimum: number, maximum: number) => unknown,
   ): Promise<void> {
     await applyBatchStyle(id, async (targetId: string) => {
-      const [minimum, maximum] = group?.value?.ranges.get(targetId) ?? range;
+      const [minimum, maximum] = rangeOf(range, targetId);
+      if (minimum === undefined || maximum === undefined) {
+        return;
+      }
       await setRange(targetId, minimum, maximum);
     });
   }
@@ -137,12 +108,5 @@ function useBatchStyle(): {
   return { applyBatchStyle, applyBatchRange };
 }
 
-export {
-  BATCH_GROUP_KEY,
-  createBatchGroup,
-  provideBatchGroup,
-  requestForTargets,
-  useBatchGroup,
-  useBatchStyle,
-};
-export type { AttributeRange };
+export { BATCH_GROUP_KEY, provideBatchGroup, useBatchGroup, useBatchStyle };
+export type { AttributeRange, BatchRange };
diff --git a/app/utils/request_for_targets.ts b/app/utils/request_for_targets.ts
new file mode 100644
index 000000000..fd9a2bb25
--- /dev/null
+++ b/app/utils/request_for_targets.ts
@@ -0,0 +1,21 @@
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import { useBackStore } from "@ogw_front/stores/back";
+
+async function requestForTargets<TResponse>(
+  schema: JsonRpcSchema,
+  targetIds: readonly string[],
+): Promise<Map<string, TResponse>> {
+  const backStore = useBackStore();
+  const results = await Promise.allSettled(
+    targetIds.map(async (targetId) => {
+      // oxlint-disable-next-line no-unsafe-type-assertion -- this is the trusted API boundary.
+      const response = (await backStore.request({ schema, params: { id: targetId } })) as TResponse;
+      return [targetId, response] as const;
+    }),
+  );
+  return new Map(
+    results.flatMap((result) => (result.status === "fulfilled" ? [result.value] : [])),
+  );
+}
+
+export { requestForTargets };
diff --git a/tests/unit/composables/batch_style.nuxt.test.ts b/tests/unit/composables/batch_style.nuxt.test.ts
index 702f99e11..4f0fe5722 100644
--- a/tests/unit/composables/batch_style.nuxt.test.ts
+++ b/tests/unit/composables/batch_style.nuxt.test.ts
@@ -1,29 +1,27 @@
 // Third party imports
 import { type Mock, beforeEach, describe, expect, test, vi } from "vitest";
-import { createApp } from "vue";
+import { computed, createApp } from "vue";
 
 // Local imports
-import {
-  BATCH_GROUP_KEY,
-  createBatchGroup,
-  useBatchStyle,
-} from "@ogw_front/composables/batch_style";
+import { BATCH_GROUP_KEY, useBatchStyle } from "@ogw_front/composables/batch_style";
 import { setupActivePinia } from "@ogw_tests/utils";
 
 const GROUP_IDS = ["surface_1", "surface_2", "surface_3"];
-const SECOND_MAXIMUM = 20;
-const REFERENCE_RANGE: [number, number] = [0, 1];
-const SECOND_RANGE: [number, number] = [0, SECOND_MAXIMUM];
+const FIRST_MAXIMUM = 10;
+const SECOND_MINIMUM = 100;
+const SECOND_MAXIMUM = 200;
+const FIRST_RANGE: [number, number] = [0, FIRST_MAXIMUM];
+const SECOND_RANGE: [number, number] = [SECOND_MINIMUM, SECOND_MAXIMUM];
 
 type StyleAction = (id: string) => Promise<unknown>;
 
-function batchStyleIn(
-  targetIds: string[] | undefined,
-): ReturnType<typeof useBatchStyle> & { group: ReturnType<typeof createBatchGroup> } {
+function batchStyleIn(targetIds: string[] | undefined): ReturnType<typeof useBatchStyle> {
   const app = createApp({});
-  const group = createBatchGroup(() => targetIds);
-  app.provide(BATCH_GROUP_KEY, group);
-  return { ...app.runWithContext(() => useBatchStyle()), group };
+  app.provide(
+    BATCH_GROUP_KEY,
+    computed(() => targetIds),
+  );
+  return app.runWithContext(() => useBatchStyle());
 }
 
 function styleAction(): Mock<StyleAction> {
@@ -66,15 +64,29 @@ describe("batch style composable", () => {
     expect(styledIds(action)).toStrictEqual(["other_data"]);
   });
 
-  test("applies each data its own range of the group", async () => {
-    const { applyBatchRange, group } = batchStyleIn(["surface_1", "surface_2"]);
-    group.value?.ranges.set("surface_2", SECOND_RANGE);
+  test("applies each data of the group its own range", async () => {
+    const { applyBatchRange } = batchStyleIn(["surface_1", "surface_2"]);
+    const ranges = new Map([
+      ["surface_1", FIRST_RANGE],
+      ["surface_2", SECOND_RANGE],
+    ]);
     const rangePerData: Record<string, [number, number]> = {};
 
-    await applyBatchRange("surface_1", REFERENCE_RANGE, (targetId, minimum, maximum) => {
+    await applyBatchRange("surface_1", ranges, (targetId, minimum, maximum) => {
       rangePerData[targetId] = [minimum, maximum];
     });
 
-    expect(rangePerData).toStrictEqual({ surface_1: REFERENCE_RANGE, surface_2: SECOND_RANGE });
+    expect(rangePerData).toStrictEqual({ surface_1: FIRST_RANGE, surface_2: SECOND_RANGE });
+  });
+
+  test("applies the same range to every data of the group", async () => {
+    const { applyBatchRange } = batchStyleIn(["surface_1", "surface_2"]);
+    const rangePerData: Record<string, [number, number]> = {};
+
+    await applyBatchRange("surface_1", FIRST_RANGE, (targetId, minimum, maximum) => {
+      rangePerData[targetId] = [minimum, maximum];
+    });
+
+    expect(rangePerData).toStrictEqual({ surface_1: FIRST_RANGE, surface_2: FIRST_RANGE });
   });
 });

From 35414c00079a97304535a1a05defe91d9a891b2b Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 30 Sep 2026 11:42:35 +0200
Subject: [PATCH 4/7] refacto [skip ci]

---
 .../Viewer/ContextMenu/ContextMenu.vue        |  2 +-
 .../EdgedCurve/SpecificEdgesOptions.vue       |  4 +-
 .../Viewer/Generic/Mesh/CellsOptions.vue      |  4 +-
 .../Viewer/Generic/Mesh/EdgesOptions.vue      |  4 +-
 .../Viewer/Generic/Mesh/PointsOptions.vue     |  2 +-
 .../Viewer/Generic/Mesh/PolygonsOptions.vue   |  4 +-
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  |  4 +-
 .../Viewer/Options/AttributeSelector.vue      | 31 ++++------
 app/components/Viewer/Options/TextureItem.vue |  8 ++-
 .../Viewer/PointSet/SpecificPointsOptions.vue |  2 +-
 .../Viewer/Solid/SpecificPolyhedraOptions.vue |  4 +-
 .../Viewer/Surface/PolygonsOptions.vue        |  4 +-
 app/composables/batch_style.ts                | 58 +++++++++++++------
 app/utils/request_for_targets.ts              | 21 ++++---
 .../unit/composables/batch_style.nuxt.test.ts | 24 +++++---
 15 files changed, 102 insertions(+), 74 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index b265eb262..8d4f96f6b 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -31,7 +31,7 @@ const menuStore = useMenuStore();
 const treeviewStore = useTreeviewStore();
 
 const meta_data = computed(() => menuStore.current_meta_data || {});
-provideBatchGroup(() => meta_data.value.targetIds);
+provideBatchGroup(() => meta_data.value.targetIds ?? []);
 
 const show_menu = ref<boolean>(true);
 const showName = ref<boolean>(false);
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index d7d552c6a..db5b5f3ef 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -80,7 +80,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
@@ -128,7 +128,7 @@ const edge_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed<BatchRange | undefined>({
+const edge_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index 00db38b71..781315d6c 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -86,7 +86,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
@@ -134,7 +134,7 @@ const cell_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const cell_attribute_range = computed<BatchRange | undefined>({
+const cell_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index 296270852..ddfa4e142 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -81,7 +81,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
@@ -129,7 +129,7 @@ const edge_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed<BatchRange | undefined>({
+const edge_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 234b9e410..feebc8dd3 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -81,7 +81,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
index 41d43aaf6..a9d6e08fa 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -97,7 +97,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
@@ -146,7 +146,7 @@ const polygon_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed<BatchRange | undefined>({
+const polygon_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index 436984ba6..59f4845da 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -71,7 +71,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
@@ -120,7 +120,7 @@ const polyhedron_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed<BatchRange | undefined>({
+const polyhedron_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index 81a203e47..2162f437d 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -16,7 +16,7 @@ const backStore = useBackStore();
 
 const attributeName = defineModel<string>("attributeName");
 const attributeItem = defineModel<number>("attributeItem");
-const attributeRange = defineModel<BatchRange>("attributeRange");
+const attributeRange = defineModel<BatchRange>("attributeRange", { default: () => [] });
 const attributeColorMap = defineModel<string>("attributeColorMap");
 const attributeNoDataColor = defineModel<typeof DEFAULT_NO_DATA_COLOR>("attributeNoDataColor");
 
@@ -44,7 +44,7 @@ interface AttributeInfo {
 const attributes = ref<AttributeInfo[]>([]);
 let attributesPerTarget = new Map<string, AttributeInfo[]>();
 
-const groupTargetIds = useBatchGroup(() => id);
+const { targetIds: groupTargetIds, withRangesPerData } = useBatchGroup(() => id);
 
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
@@ -54,16 +54,12 @@ const cssNoDataColor = computed<string>(() => {
   return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 });
 const rangeMin = computed<number | undefined>({
-  get: () => {
-    const range = attributeRange.value as number[] | undefined;
-    return range ? range[0] : undefined;
-  },
+  get: () => attributeRange.value[0],
   set: (val: number | undefined) => {
     if (val === undefined) {
       return;
     }
-    const range = attributeRange.value as number[] | undefined;
-    const currentMax = range ? range[1] : undefined;
+    const [, currentMax] = attributeRange.value;
     let newMin = val;
     if (typeof currentMax === "number" && val > currentMax) {
       newMin = currentMax;
@@ -72,16 +68,12 @@ const rangeMin = computed<number | undefined>({
   },
 });
 const rangeMax = computed<number | undefined>({
-  get: () => {
-    const range = attributeRange.value as number[] | undefined;
-    return range ? range[1] : undefined;
-  },
+  get: () => attributeRange.value[1],
   set: (val: number | undefined) => {
     if (val === undefined) {
       return;
     }
-    const range = attributeRange.value as number[] | undefined;
-    const currentMin = range ? range[0] : undefined;
+    const [currentMin] = attributeRange.value;
     let newMax = val;
     if (typeof currentMin === "number" && val < currentMin) {
       newMax = currentMin;
@@ -119,9 +111,11 @@ function hasSelectedComponent(components: unknown): boolean {
 }
 
 async function getGroupAttributes(targetIds: string[]): Promise<void> {
-  const responses = await requestForTargets<{ attributes: AttributeInfo[] }>(schema, targetIds);
+  const responses = await requestForTargets<{ attributes: AttributeInfo[] }>(schema, targetIds, {
+    attributes: [],
+  });
   attributesPerTarget = new Map(
-    targetIds.map((targetId) => [targetId, responses.get(targetId)?.attributes ?? []]),
+    responses.map(([targetId, response]) => [targetId, response.attributes]),
   );
   attributes.value = intersectAttributes([...attributesPerTarget.values()]);
 }
@@ -139,7 +133,7 @@ function initGroupAttribute(name: string, item: number): void {
     }
   }
   emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
-  attributeRange.value = ranges;
+  attributeRange.value = withRangesPerData([...(ranges.get(id) ?? [])], ranges);
 }
 
 async function getAttributes(): Promise<void> {
@@ -195,8 +189,7 @@ watch([attributeName, attributeItem, currentAttribute], () => {
   if (attributeNoDataColor.value === undefined) {
     attributeNoDataColor.value = DEFAULT_NO_DATA_COLOR;
   }
-  const range = attributeRange.value as number[] | undefined;
-  if (range?.[0] === undefined) {
+  if (attributeRange.value[0] === undefined) {
     resetRange();
   }
 });
diff --git a/app/components/Viewer/Options/TextureItem.vue b/app/components/Viewer/Options/TextureItem.vue
index 908cf96a2..f49a709c6 100644
--- a/app/components/Viewer/Options/TextureItem.vue
+++ b/app/components/Viewer/Options/TextureItem.vue
@@ -43,14 +43,16 @@ watch(
 const textureCoordinates = ref<string[]>([]);
 const backStore = useBackStore();
 
-const groupTargetIds = useBatchGroup(() => id);
+const { targetIds: groupTargetIds } = useBatchGroup(() => id);
 
 async function getTextureCoordinates(): Promise<void> {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
   const targetIds = groupTargetIds.value ?? [id];
-  const responses = await requestForTargets<{ texture_coordinates: string[] }>(schema, targetIds);
+  const responses = await requestForTargets<{ texture_coordinates: string[] }>(schema, targetIds, {
+    texture_coordinates: [],
+  });
   textureCoordinates.value = intersectBy(
-    targetIds.map((targetId) => responses.get(targetId)?.texture_coordinates ?? []),
+    responses.map(([, response]) => response.texture_coordinates),
     (coordinate) => coordinate,
   );
 }
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index a7252842e..2ea8bfb48 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -80,7 +80,7 @@ const vertex_attribute_item = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index b048f0b87..ec193de37 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -71,7 +71,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
@@ -120,7 +120,7 @@ const polyhedron_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed<BatchRange | undefined>({
+const polyhedron_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/components/Viewer/Surface/PolygonsOptions.vue b/app/components/Viewer/Surface/PolygonsOptions.vue
index eedcee71c..d059f9bb2 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -85,7 +85,7 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange | undefined>({
+const vertex_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
@@ -134,7 +134,7 @@ const polygon_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed<BatchRange | undefined>({
+const polygon_attribute_range = computed<BatchRange>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
     await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
diff --git a/app/composables/batch_style.ts b/app/composables/batch_style.ts
index f04497b90..77501b101 100644
--- a/app/composables/batch_style.ts
+++ b/app/composables/batch_style.ts
@@ -11,28 +11,48 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 type AttributeRange = [number, number];
-type BatchRange = readonly (number | undefined)[] | Map<string, AttributeRange>;
+type BatchRange = readonly (number | undefined)[];
 
-const BATCH_GROUP_KEY: InjectionKey<ComputedRef<string[] | undefined>> = Symbol("batch_group");
+interface BatchGroup {
+  targetIds: ComputedRef<string[]>;
+  rangesPerData: WeakMap<BatchRange, ReadonlyMap<string, AttributeRange>>;
+}
+
+const BATCH_GROUP_KEY: InjectionKey<BatchGroup> = Symbol("batch_group");
+
+function createBatchGroup(targetIds: () => string[]): BatchGroup {
+  return { targetIds: computed(targetIds), rangesPerData: new WeakMap() };
+}
 
-function provideBatchGroup(targetIds: () => string[] | undefined): void {
-  provide(BATCH_GROUP_KEY, computed(targetIds));
+function provideBatchGroup(targetIds: () => string[]): void {
+  provide(BATCH_GROUP_KEY, createBatchGroup(targetIds));
 }
 
-function groupTargetsOf(targetIds: string[] | undefined, id: string): string[] | undefined {
-  return targetIds?.includes(id) === true ? targetIds : undefined;
+function injectBatchGroup(): BatchGroup {
+  return inject(BATCH_GROUP_KEY, () => createBatchGroup(() => []), true);
 }
 
-function useBatchGroup(id: MaybeRefOrGetter<string>): ComputedRef<string[] | undefined> {
-  const group = inject(BATCH_GROUP_KEY, undefined);
-  return computed(() => groupTargetsOf(group?.value, toValue(id)));
+function groupTargetsOf(group: BatchGroup, id: string): string[] | undefined {
+  const targetIds = group.targetIds.value;
+  return targetIds.includes(id) ? targetIds : undefined;
 }
 
-function rangeOf(range: BatchRange | undefined, targetId: string): readonly (number | undefined)[] {
-  if (range instanceof Map) {
-    return range.get(targetId) ?? [];
+function useBatchGroup(id: MaybeRefOrGetter<string>): {
+  targetIds: ComputedRef<string[] | undefined>;
+  withRangesPerData: (range: BatchRange, ranges: ReadonlyMap<string, AttributeRange>) => BatchRange;
+} {
+  const group = injectBatchGroup();
+  const targetIds = computed(() => groupTargetsOf(group, toValue(id)));
+
+  function withRangesPerData(
+    range: BatchRange,
+    ranges: ReadonlyMap<string, AttributeRange>,
+  ): BatchRange {
+    group.rangesPerData.set(range, ranges);
+    return range;
   }
-  return range ?? [];
+
+  return { targetIds, withRangesPerData };
 }
 
 async function applyActionOn(
@@ -52,13 +72,13 @@ function useBatchStyle(): {
 } {
   const treeviewStore = useTreeviewStore();
   const dataStore = useDataStore();
-  const group = inject(BATCH_GROUP_KEY, undefined);
+  const group = injectBatchGroup();
 
   async function applyBatchStyle(
     id: string,
     action: (id: string) => Promise<unknown>,
   ): Promise<void> {
-    const groupTargets = groupTargetsOf(group?.value, id);
+    const groupTargets = groupTargetsOf(group, id);
     if (groupTargets) {
       await applyActionOn(groupTargets, action);
       return;
@@ -93,11 +113,13 @@ function useBatchStyle(): {
 
   async function applyBatchRange(
     id: string,
-    range: BatchRange | undefined,
+    range: BatchRange,
     setRange: (id: string, minimum: number, maximum: number) => unknown,
   ): Promise<void> {
+    const rangesPerData = group.rangesPerData.get(range);
     await applyBatchStyle(id, async (targetId: string) => {
-      const [minimum, maximum] = rangeOf(range, targetId);
+      const [minimum, maximum] =
+        rangesPerData === undefined ? range : (rangesPerData.get(targetId) ?? range);
       if (minimum === undefined || maximum === undefined) {
         return;
       }
@@ -108,5 +130,5 @@ function useBatchStyle(): {
   return { applyBatchStyle, applyBatchRange };
 }
 
-export { BATCH_GROUP_KEY, provideBatchGroup, useBatchGroup, useBatchStyle };
+export { BATCH_GROUP_KEY, createBatchGroup, provideBatchGroup, useBatchGroup, useBatchStyle };
 export type { AttributeRange, BatchRange };
diff --git a/app/utils/request_for_targets.ts b/app/utils/request_for_targets.ts
index fd9a2bb25..e2e55fedf 100644
--- a/app/utils/request_for_targets.ts
+++ b/app/utils/request_for_targets.ts
@@ -4,18 +4,21 @@ import { useBackStore } from "@ogw_front/stores/back";
 async function requestForTargets<TResponse>(
   schema: JsonRpcSchema,
   targetIds: readonly string[],
-): Promise<Map<string, TResponse>> {
+  fallback: TResponse,
+): Promise<[string, TResponse][]> {
   const backStore = useBackStore();
-  const results = await Promise.allSettled(
-    targetIds.map(async (targetId) => {
-      // oxlint-disable-next-line no-unsafe-type-assertion -- this is the trusted API boundary.
-      const response = (await backStore.request({ schema, params: { id: targetId } })) as TResponse;
-      return [targetId, response] as const;
+  const responses = await Promise.all(
+    targetIds.map(async (targetId): Promise<[string, TResponse]> => {
+      try {
+        const response = await backStore.request({ schema, params: { id: targetId } });
+        // oxlint-disable-next-line no-unsafe-type-assertion -- this is the trusted API boundary.
+        return [targetId, response as TResponse];
+      } catch {
+        return [targetId, fallback];
+      }
     }),
   );
-  return new Map(
-    results.flatMap((result) => (result.status === "fulfilled" ? [result.value] : [])),
-  );
+  return responses;
 }
 
 export { requestForTargets };
diff --git a/tests/unit/composables/batch_style.nuxt.test.ts b/tests/unit/composables/batch_style.nuxt.test.ts
index 4f0fe5722..b2c817dfa 100644
--- a/tests/unit/composables/batch_style.nuxt.test.ts
+++ b/tests/unit/composables/batch_style.nuxt.test.ts
@@ -1,9 +1,14 @@
 // Third party imports
 import { type Mock, beforeEach, describe, expect, test, vi } from "vitest";
-import { computed, createApp } from "vue";
+import { createApp } from "vue";
 
 // Local imports
-import { BATCH_GROUP_KEY, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  BATCH_GROUP_KEY,
+  createBatchGroup,
+  useBatchGroup,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import { setupActivePinia } from "@ogw_tests/utils";
 
 const GROUP_IDS = ["surface_1", "surface_2", "surface_3"];
@@ -15,13 +20,15 @@ const SECOND_RANGE: [number, number] = [SECOND_MINIMUM, SECOND_MAXIMUM];
 
 type StyleAction = (id: string) => Promise<unknown>;
 
-function batchStyleIn(targetIds: string[] | undefined): ReturnType<typeof useBatchStyle> {
+function batchStyleIn(
+  targetIds: string[],
+): ReturnType<typeof useBatchStyle> & ReturnType<typeof useBatchGroup> {
   const app = createApp({});
   app.provide(
     BATCH_GROUP_KEY,
-    computed(() => targetIds),
+    createBatchGroup(() => targetIds),
   );
-  return app.runWithContext(() => useBatchStyle());
+  return app.runWithContext(() => ({ ...useBatchStyle(), ...useBatchGroup("surface_1") }));
 }
 
 function styleAction(): Mock<StyleAction> {
@@ -47,7 +54,7 @@ describe("batch style composable", () => {
   });
 
   test("applies the action only to the given data outside of a group", async () => {
-    const { applyBatchStyle } = batchStyleIn(undefined);
+    const { applyBatchStyle } = batchStyleIn([]);
     const action = styleAction();
 
     await applyBatchStyle("surface_1", action);
@@ -65,14 +72,15 @@ describe("batch style composable", () => {
   });
 
   test("applies each data of the group its own range", async () => {
-    const { applyBatchRange } = batchStyleIn(["surface_1", "surface_2"]);
+    const { applyBatchRange, withRangesPerData } = batchStyleIn(["surface_1", "surface_2"]);
     const ranges = new Map([
       ["surface_1", FIRST_RANGE],
       ["surface_2", SECOND_RANGE],
     ]);
+    const range = withRangesPerData([...FIRST_RANGE], ranges);
     const rangePerData: Record<string, [number, number]> = {};
 
-    await applyBatchRange("surface_1", ranges, (targetId, minimum, maximum) => {
+    await applyBatchRange("surface_1", range, (targetId, minimum, maximum) => {
       rangePerData[targetId] = [minimum, maximum];
     });
 

From 2329da1b0ba3c9bfcd5776a76a9d3fd5da53ff6c Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 30 Sep 2026 11:51:30 +0200
Subject: [PATCH 5/7] useBatchGroup [skip ci]

---
 .../EdgedCurve/SpecificEdgesOptions.vue       | 44 +++++++++--
 .../Viewer/Generic/Mesh/CellsOptions.vue      | 44 +++++++++--
 .../Viewer/Generic/Mesh/EdgesOptions.vue      | 44 +++++++++--
 .../Viewer/Generic/Mesh/PointsOptions.vue     | 26 +++++--
 .../Viewer/Generic/Mesh/PolygonsOptions.vue   | 48 ++++++++++--
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  | 48 ++++++++++--
 .../Viewer/Options/AttributeSelector.vue      | 11 ++-
 .../Viewer/Options/ColoringTypeSelector.vue   | 29 +++++--
 app/components/Viewer/Options/TextureItem.vue |  2 +-
 .../Viewer/PointSet/SpecificPointsOptions.vue | 26 +++++--
 .../Viewer/Solid/SpecificPolyhedraOptions.vue | 48 ++++++++++--
 .../Viewer/Surface/PolygonsOptions.vue        | 48 ++++++++++--
 app/composables/batch_style.ts                | 77 ++++++-------------
 .../unit/composables/batch_style.nuxt.test.ts | 30 ++------
 14 files changed, 371 insertions(+), 154 deletions(-)

diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index db5b5f3ef..8af83f092 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -13,7 +17,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -80,11 +84,15 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -128,11 +136,15 @@ const edge_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed<BatchRange>({
+const edge_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -155,6 +167,20 @@ const edge_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -177,11 +203,13 @@ const edge_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:edge_attribute_name="edge_attribute_name"
           v-model:edge_attribute_item="edge_attribute_item"
           v-model:edge_attribute_range="edge_attribute_range"
+          @edge_attribute_ranges_per_data="setEdgeAttributeRangesPerData"
           v-model:edge_attribute_color_map="edge_attribute_color_map"
           v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
         />
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index 781315d6c..cc8bac02b 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -16,7 +20,7 @@ interface Texture {
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -86,11 +90,15 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -134,11 +142,15 @@ const cell_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const cell_attribute_range = computed<BatchRange>({
+const cell_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -161,6 +173,20 @@ const cell_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshCellsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setCellAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshCellsCellAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -183,11 +209,13 @@ const cell_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:cell_attribute_name="cell_attribute_name"
           v-model:cell_attribute_item="cell_attribute_item"
           v-model:cell_attribute_range="cell_attribute_range"
+          @cell_attribute_ranges_per_data="setCellAttributeRangesPerData"
           v-model:cell_attribute_color_map="cell_attribute_color_map"
           v-model:cell_attribute_no_data_color="cell_attribute_no_data_color"
         />
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index ddfa4e142..964dfce76 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -12,7 +16,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -81,11 +85,15 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -129,11 +137,15 @@ const edge_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed<BatchRange>({
+const edge_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -156,6 +168,20 @@ const edge_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setEdgeAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -185,11 +211,13 @@ const edge_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:edge_attribute_name="edge_attribute_name"
           v-model:edge_attribute_item="edge_attribute_item"
           v-model:edge_attribute_range="edge_attribute_range"
+          @edge_attribute_ranges_per_data="setEdgeAttributeRangesPerData"
           v-model:edge_attribute_color_map="edge_attribute_color_map"
           v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
         />
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index feebc8dd3..86e119046 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -12,7 +16,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -81,11 +85,15 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -108,6 +116,13 @@ const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -137,6 +152,7 @@ const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           :capabilities="{ vertex: { available: false } }"
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
index a9d6e08fa..6914fa806 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -21,7 +25,7 @@ interface CapabilityConfig {
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -97,11 +101,17 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -146,11 +156,17 @@ const polygon_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed<BatchRange>({
+const polygon_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -174,6 +190,20 @@ const polygon_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -199,11 +229,13 @@ const polygon_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:polygon_attribute_name="polygon_attribute_name"
           v-model:polygon_attribute_item="polygon_attribute_item"
           v-model:polygon_attribute_range="polygon_attribute_range"
+          @polygon_attribute_ranges_per_data="setPolygonAttributeRangesPerData"
           v-model:polygon_attribute_color_map="polygon_attribute_color_map"
           v-model:polygon_attribute_no_data_color="polygon_attribute_no_data_color"
           :capabilities="capabilities"
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index 59f4845da..8439818ac 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -11,7 +15,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index?: number };
@@ -71,11 +75,17 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -120,11 +130,17 @@ const polyhedron_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed<BatchRange>({
+const polyhedron_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -150,6 +166,20 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -174,11 +204,13 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:polyhedron_attribute_name="polyhedron_attribute_name"
           v-model:polyhedron_attribute_item="polyhedron_attribute_item"
           v-model:polyhedron_attribute_range="polyhedron_attribute_range"
+          @polyhedron_attribute_ranges_per_data="setPolyhedronAttributeRangesPerData"
           v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
           v-model:polyhedron_attribute_no_data_color="polyhedron_attribute_no_data_color"
           :capabilities="{
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index 2162f437d..df32ae483 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
   type AttributeRange,
-  type BatchRange,
+  type RangesPerData,
   useBatchGroup,
 } from "@ogw_front/composables/batch_style";
 import { getAttributeRange, intersectAttributes } from "@ogw_front/utils/attributes";
@@ -16,7 +16,9 @@ const backStore = useBackStore();
 
 const attributeName = defineModel<string>("attributeName");
 const attributeItem = defineModel<number>("attributeItem");
-const attributeRange = defineModel<BatchRange>("attributeRange", { default: () => [] });
+const attributeRange = defineModel<(number | undefined)[]>("attributeRange", {
+  default: () => [],
+});
 const attributeColorMap = defineModel<string>("attributeColorMap");
 const attributeNoDataColor = defineModel<typeof DEFAULT_NO_DATA_COLOR>("attributeNoDataColor");
 
@@ -30,6 +32,7 @@ const { id, componentIds = undefined, schema } = defineProps<Props>();
 
 interface Emits {
   "update:attributeColorMap": [colorMap: string];
+  ranges_per_data: [ranges: RangesPerData];
 }
 
 const emit = defineEmits<Emits>();
@@ -44,7 +47,7 @@ interface AttributeInfo {
 const attributes = ref<AttributeInfo[]>([]);
 let attributesPerTarget = new Map<string, AttributeInfo[]>();
 
-const { targetIds: groupTargetIds, withRangesPerData } = useBatchGroup(() => id);
+const groupTargetIds = useBatchGroup(() => id);
 
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
@@ -133,7 +136,7 @@ function initGroupAttribute(name: string, item: number): void {
     }
   }
   emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
-  attributeRange.value = withRangesPerData([...(ranges.get(id) ?? [])], ranges);
+  emit("ranges_per_data", ranges);
 }
 
 async function getAttributes(): Promise<void> {
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index e1d84631b..9e523e575 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { BatchRange } from "@ogw_front/composables/batch_style";
 import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import type { RangesPerData } from "@ogw_front/composables/batch_style";
 import ViewerOptionsAttributeSelector from "@ogw_front/components/Viewer/Options/AttributeSelector.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import ViewerOptionsTexturesSelector from "@ogw_front/components/Viewer/Options/TexturesSelector.vue";
@@ -27,36 +27,48 @@ interface Schemas {
 
 const coloring_style_key = defineModel<string>("coloring_style_key");
 
+interface Emits {
+  vertex_attribute_ranges_per_data: [ranges: RangesPerData];
+  edge_attribute_ranges_per_data: [ranges: RangesPerData];
+  cell_attribute_ranges_per_data: [ranges: RangesPerData];
+  polygon_attribute_ranges_per_data: [ranges: RangesPerData];
+  polyhedron_attribute_ranges_per_data: [ranges: RangesPerData];
+}
+
+const emit = defineEmits<Emits>();
+
 const color = defineModel<RGBAColor>("color");
 const textures = defineModel<Texture[]>("textures");
 
 const vertex_attribute_name = defineModel<string>("vertex_attribute_name");
 const vertex_attribute_item = defineModel<number>("vertex_attribute_item");
-const vertex_attribute_range = defineModel<BatchRange>("vertex_attribute_range");
+const vertex_attribute_range = defineModel<(number | undefined)[]>("vertex_attribute_range");
 const vertex_attribute_color_map = defineModel<string>("vertex_attribute_color_map");
 const vertex_attribute_no_data_color = defineModel<RGBAColor>("vertex_attribute_no_data_color");
 
 const edge_attribute_name = defineModel<string>("edge_attribute_name");
 const edge_attribute_item = defineModel<number>("edge_attribute_item");
-const edge_attribute_range = defineModel<BatchRange>("edge_attribute_range");
+const edge_attribute_range = defineModel<(number | undefined)[]>("edge_attribute_range");
 const edge_attribute_color_map = defineModel<string>("edge_attribute_color_map");
 const edge_attribute_no_data_color = defineModel<RGBAColor>("edge_attribute_no_data_color");
 
 const cell_attribute_name = defineModel<string>("cell_attribute_name");
 const cell_attribute_item = defineModel<number>("cell_attribute_item");
-const cell_attribute_range = defineModel<BatchRange>("cell_attribute_range");
+const cell_attribute_range = defineModel<(number | undefined)[]>("cell_attribute_range");
 const cell_attribute_color_map = defineModel<string>("cell_attribute_color_map");
 const cell_attribute_no_data_color = defineModel<RGBAColor>("cell_attribute_no_data_color");
 
 const polygon_attribute_name = defineModel<string>("polygon_attribute_name");
 const polygon_attribute_item = defineModel<number>("polygon_attribute_item");
-const polygon_attribute_range = defineModel<BatchRange>("polygon_attribute_range");
+const polygon_attribute_range = defineModel<(number | undefined)[]>("polygon_attribute_range");
 const polygon_attribute_color_map = defineModel<string>("polygon_attribute_color_map");
 const polygon_attribute_no_data_color = defineModel<RGBAColor>("polygon_attribute_no_data_color");
 
 const polyhedron_attribute_name = defineModel<string>("polyhedron_attribute_name");
 const polyhedron_attribute_item = defineModel<number>("polyhedron_attribute_item");
-const polyhedron_attribute_range = defineModel<BatchRange>("polyhedron_attribute_range");
+const polyhedron_attribute_range = defineModel<(number | undefined)[]>(
+  "polyhedron_attribute_range",
+);
 const polyhedron_attribute_color_map = defineModel<string>("polyhedron_attribute_color_map");
 const polyhedron_attribute_no_data_color = defineModel<RGBAColor>(
   "polyhedron_attribute_no_data_color",
@@ -245,6 +257,7 @@ watch(
           v-model:attributeRange="vertex_attribute_range"
           v-model:attributeColorMap="vertex_attribute_color_map"
           v-model:attributeNoDataColor="vertex_attribute_no_data_color"
+          @ranges_per_data="emit('vertex_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
           :schema="vertexSchema"
@@ -257,6 +270,7 @@ watch(
           v-model:attributeRange="edge_attribute_range"
           v-model:attributeColorMap="edge_attribute_color_map"
           v-model:attributeNoDataColor="edge_attribute_no_data_color"
+          @ranges_per_data="emit('edge_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
           :schema="edgeSchema"
@@ -269,6 +283,7 @@ watch(
           v-model:attributeRange="cell_attribute_range"
           v-model:attributeColorMap="cell_attribute_color_map"
           v-model:attributeNoDataColor="cell_attribute_no_data_color"
+          @ranges_per_data="emit('cell_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
           :schema="cellSchema"
@@ -281,6 +296,7 @@ watch(
           v-model:attributeRange="polygon_attribute_range"
           v-model:attributeColorMap="polygon_attribute_color_map"
           v-model:attributeNoDataColor="polygon_attribute_no_data_color"
+          @ranges_per_data="emit('polygon_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
           :schema="polygonSchema"
@@ -293,6 +309,7 @@ watch(
           v-model:attributeRange="polyhedron_attribute_range"
           v-model:attributeColorMap="polyhedron_attribute_color_map"
           v-model:attributeNoDataColor="polyhedron_attribute_no_data_color"
+          @ranges_per_data="emit('polyhedron_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
           :schema="polyhedronSchema"
diff --git a/app/components/Viewer/Options/TextureItem.vue b/app/components/Viewer/Options/TextureItem.vue
index f49a709c6..a7a33c6f9 100644
--- a/app/components/Viewer/Options/TextureItem.vue
+++ b/app/components/Viewer/Options/TextureItem.vue
@@ -43,7 +43,7 @@ watch(
 const textureCoordinates = ref<string[]>([]);
 const backStore = useBackStore();
 
-const { targetIds: groupTargetIds } = useBatchGroup(() => id);
+const groupTargetIds = useBatchGroup(() => id);
 
 async function getTextureCoordinates(): Promise<void> {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index 2ea8bfb48..86a565042 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -13,7 +17,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index: number };
@@ -80,11 +84,15 @@ const vertex_attribute_item = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
@@ -107,6 +115,13 @@ const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 <template>
   <ViewerContextMenuItem
@@ -131,6 +146,7 @@ const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           :vertex_has_colormap="true"
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index ec193de37..599481a9c 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -12,7 +16,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Props {
   itemProps: ItemProps & { index: number };
@@ -71,11 +75,17 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -120,11 +130,17 @@ const polyhedron_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed<BatchRange>({
+const polyhedron_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -150,6 +166,20 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolyhedronAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 <template>
   <ViewerContextMenuItem
@@ -172,11 +202,13 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:polyhedron_attribute_name="polyhedron_attribute_name"
           v-model:polyhedron_attribute_item="polyhedron_attribute_item"
           v-model:polyhedron_attribute_range="polyhedron_attribute_range"
+          @polyhedron_attribute_ranges_per_data="setPolyhedronAttributeRangesPerData"
           v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
           v-model:polyhedron_attribute_no_data_color="polyhedron_attribute_no_data_color"
         />
diff --git a/app/components/Viewer/Surface/PolygonsOptions.vue b/app/components/Viewer/Surface/PolygonsOptions.vue
index d059f9bb2..78dd0251c 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { type BatchRange, useBatchStyle } from "@ogw_front/composables/batch_style";
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -12,7 +16,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
-const { applyBatchRange, applyBatchStyle } = useBatchStyle();
+const { applyBatchStyle } = useBatchStyle();
 
 interface Texture {
   id: string;
@@ -85,11 +89,17 @@ const vertex_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed<BatchRange>({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -134,11 +144,17 @@ const polygon_attribute_item = computed<string | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed<BatchRange>({
+const polygon_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchRange(id.value, newValue, (targetId, minimum, maximum) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
@@ -162,6 +178,20 @@ const polygon_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
+
+async function setPolygonAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -186,11 +216,13 @@ const polygon_attribute_no_data_color = computed<RGBAColor | undefined>({
           v-model:vertex_attribute_name="vertex_attribute_name"
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
+          @vertex_attribute_ranges_per_data="setVertexAttributeRangesPerData"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:polygon_attribute_name="polygon_attribute_name"
           v-model:polygon_attribute_item="polygon_attribute_item"
           v-model:polygon_attribute_range="polygon_attribute_range"
+          @polygon_attribute_ranges_per_data="setPolygonAttributeRangesPerData"
           v-model:polygon_attribute_color_map="polygon_attribute_color_map"
           v-model:polygon_attribute_no_data_color="polygon_attribute_no_data_color"
         />
diff --git a/app/composables/batch_style.ts b/app/composables/batch_style.ts
index 77501b101..c7ff021ab 100644
--- a/app/composables/batch_style.ts
+++ b/app/composables/batch_style.ts
@@ -11,48 +11,36 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 type AttributeRange = [number, number];
-type BatchRange = readonly (number | undefined)[];
+type RangesPerData = ReadonlyMap<string, AttributeRange>;
 
-interface BatchGroup {
-  targetIds: ComputedRef<string[]>;
-  rangesPerData: WeakMap<BatchRange, ReadonlyMap<string, AttributeRange>>;
-}
-
-const BATCH_GROUP_KEY: InjectionKey<BatchGroup> = Symbol("batch_group");
-
-function createBatchGroup(targetIds: () => string[]): BatchGroup {
-  return { targetIds: computed(targetIds), rangesPerData: new WeakMap() };
-}
+const BATCH_GROUP_KEY: InjectionKey<ComputedRef<string[]>> = Symbol("batch_group");
 
 function provideBatchGroup(targetIds: () => string[]): void {
-  provide(BATCH_GROUP_KEY, createBatchGroup(targetIds));
+  provide(BATCH_GROUP_KEY, computed(targetIds));
 }
 
-function injectBatchGroup(): BatchGroup {
-  return inject(BATCH_GROUP_KEY, () => createBatchGroup(() => []), true);
+function injectBatchGroup(): ComputedRef<string[]> {
+  return inject(BATCH_GROUP_KEY, () => computed(() => []), true);
 }
 
-function groupTargetsOf(group: BatchGroup, id: string): string[] | undefined {
-  const targetIds = group.targetIds.value;
+function groupTargetsOf(targetIds: string[], id: string): string[] | undefined {
   return targetIds.includes(id) ? targetIds : undefined;
 }
 
-function useBatchGroup(id: MaybeRefOrGetter<string>): {
-  targetIds: ComputedRef<string[] | undefined>;
-  withRangesPerData: (range: BatchRange, ranges: ReadonlyMap<string, AttributeRange>) => BatchRange;
-} {
+function useBatchGroup(id: MaybeRefOrGetter<string>): ComputedRef<string[] | undefined> {
   const group = injectBatchGroup();
-  const targetIds = computed(() => groupTargetsOf(group, toValue(id)));
-
-  function withRangesPerData(
-    range: BatchRange,
-    ranges: ReadonlyMap<string, AttributeRange>,
-  ): BatchRange {
-    group.rangesPerData.set(range, ranges);
-    return range;
-  }
+  return computed(() => groupTargetsOf(group.value, toValue(id)));
+}
 
-  return { targetIds, withRangesPerData };
+async function applyRangesPerData(
+  ranges: RangesPerData,
+  setRange: (id: string, minimum: number, maximum: number) => unknown,
+): Promise<void> {
+  await Promise.all(
+    [...ranges].map(async ([targetId, [minimum, maximum]]) => {
+      await setRange(targetId, minimum, maximum);
+    }),
+  );
 }
 
 async function applyActionOn(
@@ -66,10 +54,7 @@ async function applyActionOn(
   );
 }
 
-function useBatchStyle(): {
-  applyBatchStyle: typeof applyBatchStyle;
-  applyBatchRange: typeof applyBatchRange;
-} {
+function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
   const treeviewStore = useTreeviewStore();
   const dataStore = useDataStore();
   const group = injectBatchGroup();
@@ -78,7 +63,7 @@ function useBatchStyle(): {
     id: string,
     action: (id: string) => Promise<unknown>,
   ): Promise<void> {
-    const groupTargets = groupTargetsOf(group, id);
+    const groupTargets = groupTargetsOf(group.value, id);
     if (groupTargets) {
       await applyActionOn(groupTargets, action);
       return;
@@ -111,24 +96,8 @@ function useBatchStyle(): {
     }
   }
 
-  async function applyBatchRange(
-    id: string,
-    range: BatchRange,
-    setRange: (id: string, minimum: number, maximum: number) => unknown,
-  ): Promise<void> {
-    const rangesPerData = group.rangesPerData.get(range);
-    await applyBatchStyle(id, async (targetId: string) => {
-      const [minimum, maximum] =
-        rangesPerData === undefined ? range : (rangesPerData.get(targetId) ?? range);
-      if (minimum === undefined || maximum === undefined) {
-        return;
-      }
-      await setRange(targetId, minimum, maximum);
-    });
-  }
-
-  return { applyBatchStyle, applyBatchRange };
+  return { applyBatchStyle };
 }
 
-export { BATCH_GROUP_KEY, createBatchGroup, provideBatchGroup, useBatchGroup, useBatchStyle };
-export type { AttributeRange, BatchRange };
+export { BATCH_GROUP_KEY, applyRangesPerData, provideBatchGroup, useBatchGroup, useBatchStyle };
+export type { AttributeRange, RangesPerData };
diff --git a/tests/unit/composables/batch_style.nuxt.test.ts b/tests/unit/composables/batch_style.nuxt.test.ts
index b2c817dfa..ef02788a1 100644
--- a/tests/unit/composables/batch_style.nuxt.test.ts
+++ b/tests/unit/composables/batch_style.nuxt.test.ts
@@ -1,12 +1,11 @@
 // Third party imports
 import { type Mock, beforeEach, describe, expect, test, vi } from "vitest";
-import { createApp } from "vue";
+import { computed, createApp } from "vue";
 
 // Local imports
 import {
   BATCH_GROUP_KEY,
-  createBatchGroup,
-  useBatchGroup,
+  applyRangesPerData,
   useBatchStyle,
 } from "@ogw_front/composables/batch_style";
 import { setupActivePinia } from "@ogw_tests/utils";
@@ -20,15 +19,13 @@ const SECOND_RANGE: [number, number] = [SECOND_MINIMUM, SECOND_MAXIMUM];
 
 type StyleAction = (id: string) => Promise<unknown>;
 
-function batchStyleIn(
-  targetIds: string[],
-): ReturnType<typeof useBatchStyle> & ReturnType<typeof useBatchGroup> {
+function batchStyleIn(targetIds: string[]): ReturnType<typeof useBatchStyle> {
   const app = createApp({});
   app.provide(
     BATCH_GROUP_KEY,
-    createBatchGroup(() => targetIds),
+    computed(() => targetIds),
   );
-  return app.runWithContext(() => ({ ...useBatchStyle(), ...useBatchGroup("surface_1") }));
+  return app.runWithContext(() => useBatchStyle());
 }
 
 function styleAction(): Mock<StyleAction> {
@@ -71,30 +68,17 @@ describe("batch style composable", () => {
     expect(styledIds(action)).toStrictEqual(["other_data"]);
   });
 
-  test("applies each data of the group its own range", async () => {
-    const { applyBatchRange, withRangesPerData } = batchStyleIn(["surface_1", "surface_2"]);
+  test("applies each data its own range", async () => {
     const ranges = new Map([
       ["surface_1", FIRST_RANGE],
       ["surface_2", SECOND_RANGE],
     ]);
-    const range = withRangesPerData([...FIRST_RANGE], ranges);
     const rangePerData: Record<string, [number, number]> = {};
 
-    await applyBatchRange("surface_1", range, (targetId, minimum, maximum) => {
+    await applyRangesPerData(ranges, (targetId, minimum, maximum) => {
       rangePerData[targetId] = [minimum, maximum];
     });
 
     expect(rangePerData).toStrictEqual({ surface_1: FIRST_RANGE, surface_2: SECOND_RANGE });
   });
-
-  test("applies the same range to every data of the group", async () => {
-    const { applyBatchRange } = batchStyleIn(["surface_1", "surface_2"]);
-    const rangePerData: Record<string, [number, number]> = {};
-
-    await applyBatchRange("surface_1", FIRST_RANGE, (targetId, minimum, maximum) => {
-      rangePerData[targetId] = [minimum, maximum];
-    });
-
-    expect(rangePerData).toStrictEqual({ surface_1: FIRST_RANGE, surface_2: FIRST_RANGE });
-  });
 });

From 3f81b6d734ed728357ccb791cec7285cf6c98647 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 1 Oct 2026 08:39:18 +0000
Subject: [PATCH 6/7] Apply prepare changes

---
 .oxlintrc.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index 6808c47b6..3bc5b96f1 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -1,5 +1,5 @@
 {
-  "ignorePatterns": ["nuxt.config.ts"],
+  "ignorePatterns": ["nuxt.config.ts", "*_typed_schemas.*"],
   "categories": {
     "correctness": "error",
     "suspicious": "error",

From fe9d14f734da13f3c079fb59caa010b344f03ae0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 1 Oct 2026 10:49:00 +0200
Subject: [PATCH 7/7] composable to refacto some logic from Vease and PEGGHy

---
 app/components/Viewer/Ui.vue              |   7 +-
 app/composables/use_overlapping_picker.ts |   2 +
 app/composables/viewer_context_menu.ts    | 123 ++++++++++++++++++++++
 3 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 app/composables/viewer_context_menu.ts

diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 4ee435106..f22bdb2b0 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import {
+  type ViewerIdResult,
+  useOverlappingPicker,
+} from "@ogw_front/composables/use_overlapping_picker";
 import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker.vue";
 import ToolActiveChip from "@ogw_front/components/Viewer/ToolActiveChip.vue";
 import type { TreeMenuPayload } from "@ogw_front/utils/treeview";
@@ -7,7 +11,6 @@ import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layo
 import { getCurrentInstance } from "vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useMenuStore } from "@ogw_front/stores/menu";
-import { useOverlappingPicker } from "@ogw_front/composables/use_overlapping_picker";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 interface Props {
@@ -67,7 +70,7 @@ const {
   get_viewer_id: trigger_picker,
 } = useOverlappingPicker();
 
-function get_viewer_id(x: number, y: number): string {
+function get_viewer_id(x: number, y: number): Promise<ViewerIdResult> {
   const instance = getCurrentInstance();
   const containerRect = instance?.proxy?.$el
     ?.closest?.('[data-testid="hybridViewer"]')
diff --git a/app/composables/use_overlapping_picker.ts b/app/composables/use_overlapping_picker.ts
index f8b5cd9f8..97bf4107f 100644
--- a/app/composables/use_overlapping_picker.ts
+++ b/app/composables/use_overlapping_picker.ts
@@ -261,3 +261,5 @@ export function useOverlappingPicker(): UseOverlappingPickerReturn {
     get_viewer_id,
   };
 }
+
+export type { ViewerIdResult };
diff --git a/app/composables/viewer_context_menu.ts b/app/composables/viewer_context_menu.ts
new file mode 100644
index 000000000..c67c7c01c
--- /dev/null
+++ b/app/composables/viewer_context_menu.ts
@@ -0,0 +1,123 @@
+import { type MenuMetaData, useMenuStore } from "@ogw_front/stores/menu";
+import type { Ref, ShallowRef } from "vue";
+import type { TreeMenuPayload } from "@ogw_front/utils/treeview";
+import type { ViewerIdResult } from "@ogw_front/composables/use_overlapping_picker";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useElementSize } from "@vueuse/core";
+
+interface ViewerUIExposed {
+  get_viewer_id: (x: number, y: number) => Promise<ViewerIdResult>;
+}
+
+interface MenuTarget {
+  id: string;
+  meta_data: MenuMetaData;
+}
+
+async function treeMenuTarget(
+  dataStore: ReturnType<typeof useDataStore>,
+  payload: TreeMenuPayload,
+): Promise<MenuTarget | undefined> {
+  if (payload.context_type === "geode_object_type") {
+    const [referenceId] = payload.targetIds;
+    if (referenceId === undefined) {
+      return undefined;
+    }
+    const referenceItem = await dataStore.item(referenceId);
+    return { id: referenceId, meta_data: { ...referenceItem, targetIds: payload.targetIds } };
+  }
+  if (payload.context_type === "model_component") {
+    return {
+      id: payload.itemId,
+      meta_data: {
+        viewer_type: "model_component",
+        geode_object_type: "component",
+        modelId: payload.modelId,
+        pickedComponentId: payload.itemId,
+      },
+    };
+  }
+  if (payload.context_type === "model_component_type") {
+    return {
+      id: payload.itemId,
+      meta_data: {
+        viewer_type: "model_component_type",
+        geode_object_type: "type",
+        modelId: payload.modelId,
+        modelComponentType: payload.modelComponentType,
+        targetComponentIds: payload.targetComponentIds,
+      },
+    };
+  }
+  return { id: payload.itemId, meta_data: { ...(await dataStore.item(payload.itemId)) } };
+}
+
+async function viewerMenuTarget(
+  dataStore: ReturnType<typeof useDataStore>,
+  pickedId: string,
+  viewer_id: number | undefined,
+): Promise<MenuTarget> {
+  const item = await dataStore.item(pickedId);
+  const meta_data: MenuMetaData = { ...item };
+  if (item.viewer_type === "model" && viewer_id !== undefined) {
+    const component = await dataStore.getComponentByViewerId(pickedId, viewer_id);
+    if (component) {
+      meta_data.pickedComponentId = component.geode_id;
+    }
+  }
+  return { id: pickedId, meta_data };
+}
+
+export function useViewerContextMenu(
+  container: Readonly<ShallowRef<HTMLElement | null>>,
+  viewerUI: Readonly<ShallowRef<ViewerUIExposed | null>>,
+): {
+  containerWidth: Ref<number>;
+  containerHeight: Ref<number>;
+  openTreeMenu: (payload: TreeMenuPayload) => Promise<void>;
+  openViewerMenu: (event: MouseEvent) => Promise<void>;
+} {
+  const menuStore = useMenuStore();
+  const dataStore = useDataStore();
+  const { width: containerWidth, height: containerHeight } = useElementSize(container);
+
+  function openMenuAt(event: MouseEvent, element: HTMLElement, target: MenuTarget): void {
+    const rect = element.getBoundingClientRect();
+    menuStore.openMenu({
+      id: target.id,
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+      width: containerWidth.value,
+      height: containerHeight.value,
+      top: rect.top,
+      left: rect.left,
+      meta_data: target.meta_data,
+    });
+  }
+
+  async function openTreeMenu(payload: TreeMenuPayload): Promise<void> {
+    const element = container.value;
+    const target = await treeMenuTarget(dataStore, payload);
+    if (element && target) {
+      openMenuAt(payload.event, element, target);
+    }
+  }
+
+  async function openViewerMenu(event: MouseEvent): Promise<void> {
+    const element = container.value;
+    const viewerComponent = viewerUI.value;
+    if (!element || !viewerComponent) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const yPicking = containerHeight.value - (event.clientY - rect.top);
+    const { id: pickedId, viewer_id } = await viewerComponent.get_viewer_id(x, yPicking);
+    if (pickedId === undefined) {
+      return;
+    }
+    openMenuAt(event, element, await viewerMenuTarget(dataStore, pickedId, viewer_id));
+  }
+
+  return { containerWidth, containerHeight, openTreeMenu, openViewerMenu };
+}