diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index a98188dc..8d4f96f6 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 a8dcf0a9..1c7b130f 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -7,7 +12,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";
 
@@ -166,6 +170,20 @@ const edge_attribute_no_data_color = computed<RGBAColor>({
     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>
@@ -188,11 +206,13 @@ const edge_attribute_no_data_color = computed<RGBAColor>({
           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 76a1e306..913d07bc 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  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";
 
@@ -175,6 +179,20 @@ const cell_attribute_no_data_color = computed<RGBAColor>({
     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>
@@ -197,11 +215,13 @@ const cell_attribute_no_data_color = computed<RGBAColor>({
           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 63fbf15e..ed45a290 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +11,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";
 
@@ -167,6 +171,20 @@ const edge_attribute_no_data_color = computed<RGBAColor>({
     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>
@@ -196,11 +214,13 @@ const edge_attribute_no_data_color = computed<RGBAColor>({
           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 beec9213..a8212549 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +11,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";
 
@@ -115,6 +119,13 @@ const vertex_attribute_no_data_color = computed<RGBAColor>({
     hybridViewerStore.remoteRender();
   },
 });
+
+async function setVertexAttributeRangesPerData(ranges: RangesPerData): Promise<void> {
+  await applyRangesPerData(ranges, (targetId, minimum, maximum) =>
+    dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum),
+  );
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
@@ -144,6 +155,7 @@ const vertex_attribute_no_data_color = computed<RGBAColor>({
           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 1102ca78..b5fbf8c5 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  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";
 
@@ -190,6 +194,20 @@ const polygon_attribute_no_data_color = computed<RGBAColor>({
     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>
@@ -215,11 +233,13 @@ const polygon_attribute_no_data_color = computed<RGBAColor>({
           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 79681318..811de06f 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  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";
 
@@ -163,6 +167,20 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor>({
     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>
@@ -187,11 +205,13 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor>({
           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/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 48d2237b..f7c2964c 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/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index e90e8ecb..566908c0 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 7ddbe409..310ff847 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 { consola } from "consola";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -19,7 +23,7 @@ const hybridViewerStore = useHybridViewerStore();
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 
 interface Emits {
-  "show-menu": [payload: { event: MouseEvent; itemId: string }];
+  "show-menu": [payload: DataMenuPayload | GeodeObjectTypeMenuPayload];
 }
 
 const emit = defineEmits<Emits>();
@@ -51,7 +55,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, []));
@@ -83,6 +87,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),
+  });
+}
+
 function isModel(item: TreeGroupItem): boolean {
   const actualItem = item.raw || item;
   return (
@@ -191,18 +210,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/ObjectTree/Views/ModelTree.vue b/app/components/Viewer/ObjectTree/Views/ModelTree.vue
index 4f041aae..9cf7c024 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/AttributeColorBar.vue b/app/components/Viewer/Options/AttributeColorBar.vue
index caf4c07c..f2833371 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 b082ed7f..df32ae48 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
+import {
+  type AttributeRange,
+  type RangesPerData,
+  useBatchGroup,
+} from "@ogw_front/composables/batch_style";
+import { getAttributeRange, intersectAttributes } from "@ogw_front/utils/attributes";
 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 { 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<(number | undefined)[]>("attributeRange", {
+  default: () => [],
+});
 const attributeColorMap = defineModel<string>("attributeColorMap");
 const attributeNoDataColor = defineModel<typeof DEFAULT_NO_DATA_COLOR>("attributeNoDataColor");
 
@@ -22,6 +30,13 @@ interface Props {
 
 const { id, componentIds = undefined, schema } = defineProps<Props>();
 
+interface Emits {
+  "update:attributeColorMap": [colorMap: string];
+  ranges_per_data: [ranges: RangesPerData];
+}
+
+const emit = defineEmits<Emits>();
+
 interface AttributeInfo {
   attribute_name: string;
   nb_items: number;
@@ -30,6 +45,9 @@ interface AttributeInfo {
 }
 
 const attributes = ref<AttributeInfo[]>([]);
+let attributesPerTarget = new Map<string, AttributeInfo[]>();
+
+const groupTargetIds = useBatchGroup(() => id);
 
 const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
@@ -39,16 +57,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;
@@ -57,16 +71,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;
@@ -103,7 +113,37 @@ function hasSelectedComponent(components: unknown): boolean {
   return Array.isArray(components) && components.length > 0;
 }
 
-function getAttributes(): void {
+async function getGroupAttributes(targetIds: string[]): Promise<void> {
+  const responses = await requestForTargets<{ attributes: AttributeInfo[] }>(schema, targetIds, {
+    attributes: [],
+  });
+  attributesPerTarget = new Map(
+    responses.map(([targetId, response]) => [targetId, response.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) {
+      const { min, max } = getAttributeRange(
+        attribute as unknown as Parameters<typeof getAttributeRange>[0],
+        item,
+      );
+      ranges.set(targetId, [min, max]);
+    }
+  }
+  emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
+  emit("ranges_per_data", ranges);
+}
+
+async function getAttributes(): Promise<void> {
+  if (groupTargetIds.value) {
+    await getGroupAttributes(groupTargetIds.value);
+    return;
+  }
   const schemaProperties = schema.properties as Record<string, unknown> | undefined;
   const requiresComponent = schemaProperties?.component_ids !== undefined;
   if (requiresComponent && !hasSelectedComponent(componentIds)) {
@@ -115,7 +155,7 @@ function getAttributes(): void {
     params.component_ids = componentIds;
   }
 
-  backStore.request(
+  await backStore.request(
     { schema, params },
     {
       response_function: (response: unknown) => {
@@ -125,25 +165,34 @@ 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(name, item ?? 0);
+  }
+});
+
 watch([attributeName, attributeItem, currentAttribute], () => {
+  if (groupTargetIds.value) {
+    return;
+  }
   if (attributeColorMap.value === undefined) {
     attributeColorMap.value = "batlow";
   }
   if (attributeNoDataColor.value === undefined) {
     attributeNoDataColor.value = DEFAULT_NO_DATA_COLOR;
   }
-  if (!attributeRange.value || attributeRange.value[0] === undefined) {
+  if (attributeRange.value[0] === undefined) {
     resetRange();
   }
 });
@@ -200,6 +249,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/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index cf08fb1e..5e435085 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 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";
@@ -26,6 +27,16 @@ 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");
 
@@ -246,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"
@@ -258,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"
@@ -270,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"
@@ -282,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"
@@ -294,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 0a37e655..823202f4 100644
--- a/app/components/Viewer/Options/TextureItem.vue
+++ b/app/components/Viewer/Options/TextureItem.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import FileUploader from "@ogw_front/components/FileUploader.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+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 };
@@ -40,21 +43,22 @@ watch(
 const textureCoordinates = ref<string[]>([]);
 const backStore = useBackStore();
 
-function getTextureCoordinates(): void {
+const groupTargetIds = useBatchGroup(() => id);
+
+async function getTextureCoordinates(): Promise<void> {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
-  const params = { id };
-  backStore.request(
-    { schema, params },
-    {
-      response_function: (response) => {
-        textureCoordinates.value = response.texture_coordinates;
-      },
-    },
+  const targetIds = groupTargetIds.value ?? [id];
+  const responses = await requestForTargets<{ texture_coordinates: string[] }>(schema, targetIds, {
+    texture_coordinates: [],
+  });
+  textureCoordinates.value = intersectBy(
+    responses.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 f14a8183..d272cb84 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -7,7 +12,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";
 
@@ -120,6 +124,13 @@ const vertex_attribute_no_data_color = computed<RGBAColor>({
     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
@@ -144,6 +155,7 @@ const vertex_attribute_no_data_color = computed<RGBAColor>({
           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 a3bb70aa..eeb8871e 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +11,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";
 
@@ -163,6 +167,20 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor>({
     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
@@ -185,11 +203,13 @@ const polyhedron_attribute_no_data_color = computed<RGBAColor>({
           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 f9cbba50..5ede01b8 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  type RangesPerData,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
@@ -6,7 +11,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";
 
@@ -178,6 +182,20 @@ const polygon_attribute_no_data_color = computed<RGBAColor>({
     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>
@@ -202,11 +220,13 @@ const polygon_attribute_no_data_color = computed<RGBAColor>({
           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/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 29e2fc8b..f22bdb2b 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,12 +1,16 @@
 <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";
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu.vue";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout.vue";
 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 {
@@ -18,7 +22,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();
@@ -66,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/batch_style.ts b/app/composables/batch_style.ts
index 4ebf59b2..c7ff021a 100644
--- a/app/composables/batch_style.ts
+++ b/app/composables/batch_style.ts
@@ -1,14 +1,74 @@
+import {
+  type ComputedRef,
+  type InjectionKey,
+  type MaybeRefOrGetter,
+  computed,
+  inject,
+  provide,
+  toValue,
+} from "vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-export function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
+type AttributeRange = [number, number];
+type RangesPerData = ReadonlyMap<string, AttributeRange>;
+
+const BATCH_GROUP_KEY: InjectionKey<ComputedRef<string[]>> = Symbol("batch_group");
+
+function provideBatchGroup(targetIds: () => string[]): void {
+  provide(BATCH_GROUP_KEY, computed(targetIds));
+}
+
+function injectBatchGroup(): ComputedRef<string[]> {
+  return inject(BATCH_GROUP_KEY, () => computed(() => []), true);
+}
+
+function groupTargetsOf(targetIds: string[], id: string): string[] | undefined {
+  return targetIds.includes(id) ? targetIds : undefined;
+}
+
+function useBatchGroup(id: MaybeRefOrGetter<string>): ComputedRef<string[] | undefined> {
+  const group = injectBatchGroup();
+  return computed(() => groupTargetsOf(group.value, toValue(id)));
+}
+
+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(
+  targets: readonly string[],
+  action: (id: string) => Promise<unknown>,
+): Promise<void> {
+  await Promise.all(
+    targets.map(async (targetId) => {
+      await action(targetId);
+    }),
+  );
+}
+
+function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
   const treeviewStore = useTreeviewStore();
   const dataStore = useDataStore();
+  const group = injectBatchGroup();
 
   async function applyBatchStyle(
     id: string,
     action: (id: string) => Promise<unknown>,
   ): Promise<void> {
+    const groupTargets = groupTargetsOf(group.value, 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 +98,6 @@ export function useBatchStyle(): { applyBatchStyle: typeof applyBatchStyle } {
 
   return { applyBatchStyle };
 }
+
+export { BATCH_GROUP_KEY, applyRangesPerData, provideBatchGroup, useBatchGroup, useBatchStyle };
+export type { AttributeRange, RangesPerData };
diff --git a/app/composables/tree_filter.ts b/app/composables/tree_filter.ts
index 147c3821..eb7767f6 100644
--- a/app/composables/tree_filter.ts
+++ b/app/composables/tree_filter.ts
@@ -30,10 +30,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(
@@ -163,10 +163,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/composables/use_overlapping_picker.ts b/app/composables/use_overlapping_picker.ts
index bd74daba..6d9daf34 100644
--- a/app/composables/use_overlapping_picker.ts
+++ b/app/composables/use_overlapping_picker.ts
@@ -192,3 +192,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 00000000..c67c7c01
--- /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 };
+}
diff --git a/app/stores/menu.ts b/app/stores/menu.ts
index 4f7def9f..c66dd1c8 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;
 }
 
@@ -246,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 35b44b9c..b7c3580f 100644
--- a/app/utils/attributes.ts
+++ b/app/utils/attributes.ts
@@ -62,4 +62,41 @@ const MODEL_COMPONENT_KINDS: Record<string, string[]> = {
   Block: ["vertex", "polyhedron"],
 };
 
-export { MESH_ELEMENT_KINDS, MODEL_COMPONENT_KINDS, getAttributeRange };
+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;
+}
+
+function intersectAttributes<TAttribute extends NamedAttribute>(
+  attributesPerData: readonly (readonly TAttribute[])[],
+): TAttribute[] {
+  const allAttributes = attributesPerData.flat();
+  const common: TAttribute[] = [];
+  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),
+    );
+    common.push({ ...attribute, nb_items });
+  }
+  return common;
+}
+
+export {
+  MESH_ELEMENT_KINDS,
+  MODEL_COMPONENT_KINDS,
+  getAttributeRange,
+  intersectAttributes,
+  intersectBy,
+};
diff --git a/app/utils/request_for_targets.ts b/app/utils/request_for_targets.ts
new file mode 100644
index 00000000..e2e55fed
--- /dev/null
+++ b/app/utils/request_for_targets.ts
@@ -0,0 +1,24 @@
+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[],
+  fallback: TResponse,
+): Promise<[string, TResponse][]> {
+  const backStore = useBackStore();
+  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 responses;
+}
+
+export { requestForTargets };
diff --git a/app/utils/treeview.ts b/app/utils/treeview.ts
index d9373a85..a335d5a0 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
new file mode 100644
index 00000000..ef02788a
--- /dev/null
+++ b/tests/unit/composables/batch_style.nuxt.test.ts
@@ -0,0 +1,84 @@
+// Third party imports
+import { type Mock, beforeEach, describe, expect, test, vi } from "vitest";
+import { computed, createApp } from "vue";
+
+// Local imports
+import {
+  BATCH_GROUP_KEY,
+  applyRangesPerData,
+  useBatchStyle,
+} from "@ogw_front/composables/batch_style";
+import { setupActivePinia } from "@ogw_tests/utils";
+
+const GROUP_IDS = ["surface_1", "surface_2", "surface_3"];
+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[]): ReturnType<typeof useBatchStyle> {
+  const app = createApp({});
+  app.provide(
+    BATCH_GROUP_KEY,
+    computed(() => targetIds),
+  );
+  return app.runWithContext(() => useBatchStyle());
+}
+
+function styleAction(): Mock<StyleAction> {
+  return vi.fn<StyleAction>().mockResolvedValue(undefined);
+}
+
+function styledIds(action: Mock<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", async () => {
+    const { applyBatchStyle } = batchStyleIn(GROUP_IDS);
+    const action = styleAction();
+
+    await applyBatchStyle("surface_1", action);
+
+    expect(styledIds(action)).toStrictEqual(GROUP_IDS);
+  });
+
+  test("applies the action only to the given data outside of a group", async () => {
+    const { applyBatchStyle } = batchStyleIn([]);
+    const action = styleAction();
+
+    await applyBatchStyle("surface_1", action);
+
+    expect(styledIds(action)).toStrictEqual(["surface_1"]);
+  });
+
+  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);
+
+    expect(styledIds(action)).toStrictEqual(["other_data"]);
+  });
+
+  test("applies each data its own range", async () => {
+    const ranges = new Map([
+      ["surface_1", FIRST_RANGE],
+      ["surface_2", SECOND_RANGE],
+    ]);
+    const rangePerData: Record<string, [number, number]> = {};
+
+    await applyRangesPerData(ranges, (targetId, minimum, maximum) => {
+      rangePerData[targetId] = [minimum, maximum];
+    });
+
+    expect(rangePerData).toStrictEqual({ surface_1: FIRST_RANGE, surface_2: SECOND_RANGE });
+  });
+});
diff --git a/tests/unit/utils/attributes.nuxt.test.ts b/tests/unit/utils/attributes.nuxt.test.ts
new file mode 100644
index 00000000..285afa5b
--- /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([]);
+  });
+});