From 5fc01b1b231f334ea7d94d00e6bde8fbb3e26a7b Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Tue, 7 Jul 2026 17:00:06 +0200
Subject: [PATCH 1/2] feat(attributes): Update attribute metadata to support
 vectorial attributes

---
 .../EdgedCurve/SpecificEdgesOptions.vue       | 14 ++--
 .../Viewer/Generic/Mesh/CellsOptions.vue      | 14 ++--
 .../Viewer/Generic/Mesh/PointsOptions.vue     |  7 +-
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  | 14 ++--
 .../Viewer/Generic/Model/BlocksOptions.vue    | 28 +++++---
 .../Viewer/Generic/Model/CornersOptions.vue   | 14 ++--
 .../Viewer/Generic/Model/LinesOptions.vue     | 28 +++++---
 .../Viewer/Generic/Model/SurfacesOptions.vue  | 28 +++++---
 .../Viewer/Options/AttributeSelector.vue      | 64 +++++++++++++++----
 .../Viewer/Options/ColoringTypeSelector.vue   | 32 +++++-----
 .../Viewer/PointSet/SpecificPointsOptions.vue |  7 +-
 .../Viewer/Solid/SpecificPolyhedraOptions.vue | 14 ++--
 .../Viewer/Surface/PolygonsOptions.vue        | 14 ++--
 app/utils/default_styles/meshes.js            |  9 +++
 app/utils/default_styles/models.js            |  7 ++
 internal/stores/data_style/mesh/cells/cell.js | 12 +++-
 .../stores/data_style/mesh/cells/vertex.js    | 12 +++-
 internal/stores/data_style/mesh/edges/edge.js | 12 +++-
 .../stores/data_style/mesh/edges/vertex.js    | 12 +++-
 .../stores/data_style/mesh/points/vertex.js   | 12 +++-
 .../data_style/mesh/polygons/polygon.js       | 12 +++-
 .../stores/data_style/mesh/polygons/vertex.js | 12 +++-
 .../data_style/mesh/polyhedra/polyhedron.js   | 12 +++-
 .../data_style/mesh/polyhedra/vertex.js       | 12 +++-
 .../data_style/model/blocks/polyhedron.js     | 12 +++-
 .../stores/data_style/model/blocks/vertex.js  | 12 +++-
 .../stores/data_style/model/corners/vertex.js | 12 +++-
 .../stores/data_style/model/lines/edge.js     | 12 +++-
 .../stores/data_style/model/lines/vertex.js   | 12 +++-
 .../data_style/model/surfaces/polygon.js      | 12 +++-
 .../data_style/model/surfaces/vertex.js       | 12 +++-
 .../stores/data_style/mesh/cells.nuxt.test.js |  4 +-
 .../stores/data_style/mesh/edges.nuxt.test.js |  4 +-
 .../data_style/mesh/points.nuxt.test.js       |  2 +-
 .../data_style/mesh/polygons.nuxt.test.js     |  4 +-
 .../data_style/mesh/polyhedra.nuxt.test.js    |  4 +-
 .../data_style/model/blocks.nuxt.test.js      |  2 +
 .../data_style/model/corners.nuxt.test.js     |  1 +
 .../data_style/model/lines.nuxt.test.js       |  2 +
 .../data_style/model/surfaces.nuxt.test.js    |  2 +
 40 files changed, 373 insertions(+), 138 deletions(-)

diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index dd1c1282..1bebe1e2 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -56,10 +56,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshEdgesVertexAttributeName(id.value),
+    item: dataStyleStore.meshEdgesVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -83,10 +86,13 @@ const vertex_attribute_color_map = computed({
   },
 });
 const edge_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+    item: dataStyleStore.meshEdgesEdgeAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue),
+      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index 6048f667..d58de3dc 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -56,10 +56,13 @@ const textures = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshCellsVertexAttributeName(id.value),
+    item: dataStyleStore.meshCellsVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshCellsVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshCellsVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -83,10 +86,13 @@ const vertex_attribute_color_map = computed({
   },
 });
 const cell_attribute_name = computed({
-  get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshCellsCellAttributeName(id.value),
+    item: dataStyleStore.meshCellsCellAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshCellsCellAttributeName(targetId, newValue),
+      dataStyleStore.setMeshCellsCellAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 6e3d6f3b..83664b67 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -57,10 +57,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPointsVertexAttributeName(id.value),
+    item: dataStyleStore.meshPointsVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index dcfabc0b..a7b12164 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -47,10 +47,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+    item: dataStyleStore.meshPolyhedraVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -74,10 +77,13 @@ const vertex_attribute_color_map = computed({
   },
 });
 const polyhedron_attribute_name = computed({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+    item: dataStyleStore.meshPolyhedraPolyhedronAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index 6e84c2cc..30c5e2b0 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -67,9 +67,12 @@ const blockActiveColoring = computed({
 
 // Group Attributes
 const blocksVertexAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, targetBlockIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelBlocksVertexAttributeName(modelId, targetBlockIds[0]),
+    item: dataStyleStore.modelBlocksVertexAttributeValue(modelId, targetBlockIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, targetBlockIds, newValue);
+    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, targetBlockIds, newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -96,9 +99,12 @@ const blocksVertexAttributeColorMap = computed({
 });
 
 const blocksPolyhedronAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, targetBlockIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, targetBlockIds[0]),
+    item: dataStyleStore.modelBlocksPolyhedronAttributeValue(modelId, targetBlockIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, targetBlockIds, newValue);
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, targetBlockIds, newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -130,9 +136,12 @@ const blocksPolyhedronAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, blockId),
+  get: () => ({
+    name: dataStyleStore.modelBlocksVertexAttributeName(modelId, blockId),
+    item: dataStyleStore.modelBlocksVertexAttributeValue(modelId, blockId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, [blockId], newValue);
+    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, [blockId], newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -159,9 +168,12 @@ const vertexAttributeColorMap = computed({
 });
 
 const polyhedronAttributeName = computed({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, blockId),
+  get: () => ({
+    name: dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, blockId),
+    item: dataStyleStore.modelBlocksPolyhedronAttributeValue(modelId, blockId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, [blockId], newValue);
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, [blockId], newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index f08688f0..2ca169a1 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -68,9 +68,12 @@ const cornerActiveColoring = computed({
 
 // Group Attributes
 const cornersVertexAttributeName = computed({
-  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, targetCornerIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelCornersVertexAttributeName(modelId, targetCornerIds[0]),
+    item: dataStyleStore.modelCornersVertexAttributeValue(modelId, targetCornerIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue);
+    await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -98,9 +101,12 @@ const cornersVertexAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
+  get: () => ({
+    name: dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
+    item: dataStyleStore.modelCornersVertexAttributeValue(modelId, cornerId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue);
+    await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index 6c0e7f47..986f72db 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -67,9 +67,12 @@ const lineActiveColoring = computed({
 
 // Group Attributes
 const linesVertexAttributeName = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, targetLineIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelLinesVertexAttributeName(modelId, targetLineIds[0]),
+    item: dataStyleStore.modelLinesVertexAttributeValue(modelId, targetLineIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue);
+    await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -96,9 +99,12 @@ const linesVertexAttributeColorMap = computed({
 });
 
 const linesEdgeAttributeName = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, targetLineIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelLinesEdgeAttributeName(modelId, targetLineIds[0]),
+    item: dataStyleStore.modelLinesEdgeAttributeValue(modelId, targetLineIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue);
+    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -126,9 +132,12 @@ const linesEdgeAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
+  get: () => ({
+    name: dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
+    item: dataStyleStore.modelLinesVertexAttributeValue(modelId, lineId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue);
+    await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -155,9 +164,12 @@ const vertexAttributeColorMap = computed({
 });
 
 const edgeAttributeName = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
+  get: () => ({
+    name: dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
+    item: dataStyleStore.modelLinesEdgeAttributeValue(modelId, lineId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue);
+    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index b282ad24..11b72dfd 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -67,9 +67,12 @@ const surfaceActiveColoring = computed({
 
 // Group Attributes
 const surfacesVertexAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, targetSurfaceIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesVertexAttributeName(modelId, targetSurfaceIds[0]),
+    item: dataStyleStore.modelSurfacesVertexAttributeValue(modelId, targetSurfaceIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, targetSurfaceIds, newValue);
+    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, targetSurfaceIds, newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -100,9 +103,12 @@ const surfacesVertexAttributeColorMap = computed({
 });
 
 const surfacesPolygonAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, targetSurfaceIds[0]),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesPolygonAttributeName(modelId, targetSurfaceIds[0]),
+    item: dataStyleStore.modelSurfacesPolygonAttributeValue(modelId, targetSurfaceIds[0]).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, targetSurfaceIds, newValue);
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, targetSurfaceIds, newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -134,9 +140,12 @@ const surfacesPolygonAttributeColorMap = computed({
 
 // Individual Attributes
 const vertexAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
+    item: dataStyleStore.modelSurfacesVertexAttributeValue(modelId, surfaceId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, [surfaceId], newValue);
+    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, [surfaceId], newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
@@ -163,9 +172,12 @@ const vertexAttributeColorMap = computed({
 });
 
 const polygonAttributeName = computed({
-  get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
+  get: () => ({
+    name: dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
+    item: dataStyleStore.modelSurfacesPolygonAttributeValue(modelId, surfaceId).item,
+  }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, [surfaceId], newValue);
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, [surfaceId], newValue.name, newValue.item);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index 62e8a35d..e01b1b5f 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -4,10 +4,9 @@ import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
-const name = defineModel("name", {
-  type: String,
+const attribute = defineModel("attribute", {
+  type: Object,
   default: undefined,
-  set: (value) => value ?? name.value,
 });
 
 const range = defineModel("range", { type: Array });
@@ -44,18 +43,46 @@ const rangeMax = computed({
   },
 });
 
+const selectedAttributeName = computed({
+  get: () => (attribute.value ? attribute.value.name : undefined),
+  set: (val) => {
+    attribute.value = { name: val, item: 0 };
+  },
+});
+
+const selectedComponent = computed({
+  get: () => (attribute.value ? attribute.value.item : 0),
+  set: (val) => {
+    attribute.value = { name: selectedAttributeName.value, item: val };
+  },
+});
+
+const componentItems = computed(() => {
+  if (!currentAttribute.value) {
+    return [];
+  }
+  return Array.from({ length: currentAttribute.value.nb_items }, (_, index) => ({
+    title: `Component ${index}`,
+    value: index,
+  }));
+});
+
 const currentAttribute = computed(() =>
-  attributes.value.find((attr) => attr.attribute_name === name.value),
+  attributes.value.find((attr) => attr.attribute_name === selectedAttributeName.value),
 );
 
 function resetRange() {
   if (currentAttribute.value) {
-    range.value = [currentAttribute.value.min_value, currentAttribute.value.max_value];
+    const comp = attribute.value ? attribute.value.item : 0;
+    range.value = [
+      currentAttribute.value.min_values[comp],
+      currentAttribute.value.max_values[comp],
+    ];
   }
 }
 
 function getAttributes() {
-  if (schema.properties?.component_id && componentId === undefined) {
+  if (schema.properties.component_id && componentId === undefined) {
     return;
   }
   const params = { id };
@@ -84,10 +111,10 @@ watch(
 );
 
 watch(
-  () => [name.value, attributes.value],
+  () => [selectedAttributeName.value, attributes.value],
   () => {
     if (
-      name.value &&
+      selectedAttributeName.value &&
       attributes.value.length > 0 &&
       (range.value === undefined || range.value[0] === undefined || colorMap.value === undefined)
     ) {
@@ -99,17 +126,15 @@ watch(
   },
 );
 
-watch(name, (newName, oldName) => {
-  if (newName !== oldName) {
-    resetRange();
-  }
+watch([selectedAttributeName, selectedComponent], () => {
+  resetRange();
 });
 </script>
 
 <template>
   <v-select
     data-testid="attributeSelector"
-    v-model="name"
+    v-model="selectedAttributeName"
     :items="attributes.map((attribute) => attribute.attribute_name)"
     item-title="attribute_name"
     item-value="attribute_name"
@@ -117,8 +142,19 @@ watch(name, (newName, oldName) => {
     label="Select an attribute"
     hide-details
   />
+  <v-select
+    v-if="currentAttribute && currentAttribute.nb_items > 1"
+    v-model="selectedComponent"
+    :items="componentItems"
+    item-title="title"
+    item-value="value"
+    density="compact"
+    label="Select a component"
+    class="mt-3"
+    hide-details
+  />
   <ViewerOptionsAttributeColorBar
-    v-if="name"
+    v-if="selectedAttributeName"
     v-model:minimum="rangeMin"
     v-model:maximum="rangeMax"
     v-model:colorMap="colorMap"
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index c9a70146..c3d409a6 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -9,23 +9,23 @@ const coloring_style_key = defineModel("coloring_style_key", { type: String });
 const color = defineModel("color", { type: Object });
 const textures = defineModel("textures", { type: Array });
 
-const vertex_attribute_name = defineModel("vertex_attribute_name", { type: String });
+const vertex_attribute_name = defineModel("vertex_attribute_name", { type: Object });
 const vertex_attribute_range = defineModel("vertex_attribute_range", { type: Array });
 const vertex_attribute_color_map = defineModel("vertex_attribute_color_map", { type: String });
 
-const edge_attribute_name = defineModel("edge_attribute_name", { type: String });
+const edge_attribute_name = defineModel("edge_attribute_name", { type: Object });
 const edge_attribute_range = defineModel("edge_attribute_range", { type: Array });
 const edge_attribute_color_map = defineModel("edge_attribute_color_map", { type: String });
 
-const cell_attribute_name = defineModel("cell_attribute_name", { type: String });
+const cell_attribute_name = defineModel("cell_attribute_name", { type: Object });
 const cell_attribute_range = defineModel("cell_attribute_range", { type: Array });
 const cell_attribute_color_map = defineModel("cell_attribute_color_map", { type: String });
 
-const polygon_attribute_name = defineModel("polygon_attribute_name", { type: String });
+const polygon_attribute_name = defineModel("polygon_attribute_name", { type: Object });
 const polygon_attribute_range = defineModel("polygon_attribute_range", { type: Array });
 const polygon_attribute_color_map = defineModel("polygon_attribute_color_map", { type: String });
 
-const polyhedron_attribute_name = defineModel("polyhedron_attribute_name", { type: String });
+const polyhedron_attribute_name = defineModel("polyhedron_attribute_name", { type: Object });
 const polyhedron_attribute_range = defineModel("polyhedron_attribute_range", { type: Array });
 const polyhedron_attribute_color_map = defineModel("polyhedron_attribute_color_map", {
   type: String,
@@ -161,11 +161,13 @@ watch(
   () => {
     const key = active_key.value;
     const names = {
-      vertex: vertex_attribute_name.value,
-      edge: edge_attribute_name.value,
-      cell: cell_attribute_name.value,
-      polygon: polygon_attribute_name.value,
-      polyhedron: polyhedron_attribute_name.value,
+      vertex: vertex_attribute_name.value ? vertex_attribute_name.value.name : undefined,
+      edge: edge_attribute_name.value ? edge_attribute_name.value.name : undefined,
+      cell: cell_attribute_name.value ? cell_attribute_name.value.name : undefined,
+      polygon: polygon_attribute_name.value ? polygon_attribute_name.value.name : undefined,
+      polyhedron: polyhedron_attribute_name.value
+        ? polyhedron_attribute_name.value.name
+        : undefined,
     };
     if (!(key in names) || names[key]) {
       coloring_style_key.value = key;
@@ -211,7 +213,7 @@ watch(
       </template>
       <template v-if="active_key === vertex_dict['value'] && hasColorMap('vertex')">
         <ViewerOptionsAttributeSelector
-          v-model:name="vertex_attribute_name"
+          v-model:attribute="vertex_attribute_name"
           v-model:range="vertex_attribute_range"
           v-model:colorMap="vertex_attribute_color_map"
           :id="id"
@@ -221,7 +223,7 @@ watch(
       </template>
       <template v-if="active_key === edge_dict['value'] && hasColorMap('edge')">
         <ViewerOptionsAttributeSelector
-          v-model:name="edge_attribute_name"
+          v-model:attribute="edge_attribute_name"
           v-model:range="edge_attribute_range"
           v-model:colorMap="edge_attribute_color_map"
           :id="id"
@@ -231,7 +233,7 @@ watch(
       </template>
       <template v-if="active_key === cell_dict['value'] && hasColorMap('cell')">
         <ViewerOptionsAttributeSelector
-          v-model:name="cell_attribute_name"
+          v-model:attribute="cell_attribute_name"
           v-model:range="cell_attribute_range"
           v-model:colorMap="cell_attribute_color_map"
           :id="id"
@@ -241,7 +243,7 @@ watch(
       </template>
       <template v-if="active_key === polygon_dict['value'] && hasColorMap('polygon')">
         <ViewerOptionsAttributeSelector
-          v-model:name="polygon_attribute_name"
+          v-model:attribute="polygon_attribute_name"
           v-model:range="polygon_attribute_range"
           v-model:colorMap="polygon_attribute_color_map"
           :id="id"
@@ -251,7 +253,7 @@ watch(
       </template>
       <template v-if="active_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
         <ViewerOptionsAttributeSelector
-          v-model:name="polyhedron_attribute_name"
+          v-model:attribute="polyhedron_attribute_name"
           v-model:range="polyhedron_attribute_range"
           v-model:colorMap="polyhedron_attribute_color_map"
           :id="id"
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index e01f1ff2..f27b710e 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -56,10 +56,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPointsVertexAttributeName(id.value),
+    item: dataStyleStore.meshPointsVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index e6c92b0d..b461928c 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -47,10 +47,13 @@ const color = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+    item: dataStyleStore.meshPolyhedraVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -74,10 +77,13 @@ const vertex_attribute_color_map = computed({
   },
 });
 const polyhedron_attribute_name = computed({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+    item: dataStyleStore.meshPolyhedraPolyhedronAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Surface/PolygonsOptions.vue b/app/components/Viewer/Surface/PolygonsOptions.vue
index 9f39c616..9026a8da 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -56,10 +56,13 @@ const textures = computed({
   },
 });
 const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolygonsVertexAttributeName(id.value),
+    item: dataStyleStore.meshPolygonsVertexAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
@@ -83,10 +86,13 @@ const vertex_attribute_color_map = computed({
   },
 });
 const polygon_attribute_name = computed({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+  get: () => ({
+    name: dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+    item: dataStyleStore.meshPolygonsPolygonAttributeValue(id.value).item,
+  }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue),
+      dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue.name, newValue.item),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/utils/default_styles/meshes.js b/app/utils/default_styles/meshes.js
index 8a3afc7c..2412f8c3 100644
--- a/app/utils/default_styles/meshes.js
+++ b/app/utils/default_styles/meshes.js
@@ -26,6 +26,7 @@ function meshPointsDefaultStyle(
       constant,
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
@@ -45,10 +46,12 @@ function meshEdgesDefaultStyle(
       constant,
       edge: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
@@ -66,6 +69,7 @@ function meshCellsDefaultStyle(
       active: MESH_DEFAULT_ACTIVE_COLORING,
       cell: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
       constant,
@@ -73,6 +77,7 @@ function meshCellsDefaultStyle(
       textures: null,
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
@@ -92,10 +97,12 @@ function meshPolygonsDefaultStyle(
       textures: null,
       polygon: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
@@ -113,10 +120,12 @@ function meshPolyhedraDefaultStyle(
       constant,
       polyhedron: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index 69ba74e5..31cf089c 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -30,6 +30,7 @@ function modelCornersDefaultStyle(
       constant,
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
@@ -47,10 +48,12 @@ function modelLinesDefaultStyle(
       constant,
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
       edge: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
@@ -68,10 +71,12 @@ function modelSurfacesDefaultStyle(
       constant,
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
       polygon: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
@@ -89,10 +94,12 @@ function modelBlocksDefaultStyle(
       constant,
       vertex: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
       polyhedron: {
         name: undefined,
+        item: 0,
         storedConfigs: {},
       },
     },
diff --git a/internal/stores/data_style/mesh/cells/cell.js b/internal/stores/data_style/mesh/cells/cell.js
index 4a39b121..ec703c5b 100644
--- a/internal/stores/data_style/mesh/cells/cell.js
+++ b/internal/stores/data_style/mesh/cells/cell.js
@@ -42,16 +42,21 @@ export function useMeshCellsCellAttributeStyle() {
     return meshCellsCellAttribute(id).name;
   }
 
-  function setMeshCellsCellAttributeName(id, name) {
+  function meshCellsCellAttributeValue(id) {
+    const attr = meshCellsCellAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  function setMeshCellsCellAttributeName(id, name, item = 0) {
     const schema = meshCellsCellAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       {
         schema,
         params,
       },
       {
-        response_function: () => meshCellsCommonStyle.mutateMeshCellsCellStyle(id, { name }),
+        response_function: () => meshCellsCommonStyle.mutateMeshCellsCellStyle(id, { name, item }),
       },
     );
   }
@@ -113,6 +118,7 @@ export function useMeshCellsCellAttributeStyle() {
 
   return {
     meshCellsCellAttributeName,
+    meshCellsCellAttributeValue,
     meshCellsCellAttributeRange,
     meshCellsCellAttributeColorMap,
     meshCellsCellAttributeStoredConfig,
diff --git a/internal/stores/data_style/mesh/cells/vertex.js b/internal/stores/data_style/mesh/cells/vertex.js
index a55671c7..3983e0ce 100644
--- a/internal/stores/data_style/mesh/cells/vertex.js
+++ b/internal/stores/data_style/mesh/cells/vertex.js
@@ -51,14 +51,19 @@ export function useMeshCellsVertexAttributeStyle() {
     return meshCellsVertexAttribute(id).name;
   }
 
-  function setMeshCellsVertexAttributeName(id, name) {
+  function meshCellsVertexAttributeValue(id) {
+    const attr = meshCellsVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  function setMeshCellsVertexAttributeName(id, name, item = 0) {
     const schema = meshCellsVertexAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       { schema, params },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const vertex = meshCellsVertexAttribute(id);
           if (!(name in vertex.storedConfigs)) {
             updates.storedConfigs = {
@@ -129,6 +134,7 @@ export function useMeshCellsVertexAttributeStyle() {
 
   return {
     meshCellsVertexAttributeName,
+    meshCellsVertexAttributeValue,
     meshCellsVertexAttributeRange,
     meshCellsVertexAttributeColorMap,
     meshCellsVertexAttributeStoredConfig,
diff --git a/internal/stores/data_style/mesh/edges/edge.js b/internal/stores/data_style/mesh/edges/edge.js
index 61e13631..4b932d8e 100644
--- a/internal/stores/data_style/mesh/edges/edge.js
+++ b/internal/stores/data_style/mesh/edges/edge.js
@@ -54,9 +54,14 @@ export function useMeshEdgesEdgeAttributeStyle() {
     return meshEdgesEdgeAttribute(id).name;
   }
 
-  function setMeshEdgesEdgeAttributeName(id, name) {
+  function meshEdgesEdgeAttributeValue(id) {
+    const attr = meshEdgesEdgeAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  function setMeshEdgesEdgeAttributeName(id, name, item = 0) {
     const schema = meshEdgesEdgeAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       {
         schema,
@@ -64,7 +69,7 @@ export function useMeshEdgesEdgeAttributeStyle() {
       },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const edge = meshEdgesEdgeAttribute(id);
           if (!(name in edge.storedConfigs)) {
             updates.storedConfigs = {
@@ -135,6 +140,7 @@ export function useMeshEdgesEdgeAttributeStyle() {
 
   return {
     meshEdgesEdgeAttributeName,
+    meshEdgesEdgeAttributeValue,
     meshEdgesEdgeAttributeRange,
     meshEdgesEdgeAttributeColorMap,
     meshEdgesEdgeAttributeStoredConfig,
diff --git a/internal/stores/data_style/mesh/edges/vertex.js b/internal/stores/data_style/mesh/edges/vertex.js
index 611eea38..dd75b79f 100644
--- a/internal/stores/data_style/mesh/edges/vertex.js
+++ b/internal/stores/data_style/mesh/edges/vertex.js
@@ -54,14 +54,19 @@ export function useMeshEdgesVertexAttributeStyle() {
   function meshEdgesVertexAttributeName(id) {
     return meshEdgesVertexAttribute(id).name;
   }
-  function setMeshEdgesVertexAttributeName(id, name) {
+
+  function meshEdgesVertexAttributeValue(id) {
+    const attr = meshEdgesVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+  function setMeshEdgesVertexAttributeName(id, name, item = 0) {
     const schema = meshEdgesVertexAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       { schema, params },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const vertex = meshEdgesVertexAttribute(id);
           if (!(name in vertex.storedConfigs)) {
             updates.storedConfigs = {
@@ -130,6 +135,7 @@ export function useMeshEdgesVertexAttributeStyle() {
 
   return {
     meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeValue,
     meshEdgesVertexAttributeRange,
     meshEdgesVertexAttributeColorMap,
     meshEdgesVertexAttributeStoredConfig,
diff --git a/internal/stores/data_style/mesh/points/vertex.js b/internal/stores/data_style/mesh/points/vertex.js
index 0476374d..26d799c2 100644
--- a/internal/stores/data_style/mesh/points/vertex.js
+++ b/internal/stores/data_style/mesh/points/vertex.js
@@ -50,6 +50,11 @@ function useMeshPointsVertexAttributeConfig() {
     return meshPointsVertexAttribute(id).name;
   }
 
+  function meshPointsVertexAttributeValue(id) {
+    const attr = meshPointsVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
   function meshPointsVertexAttributeRange(id) {
     const name = meshPointsVertexAttributeName(id);
     const storedConfig = meshPointsVertexAttributeStoredConfig(id, name);
@@ -70,6 +75,7 @@ function useMeshPointsVertexAttributeConfig() {
     setMeshPointsVertexAttributeStoredConfig,
     mutateMeshPointsVertexStyle,
     meshPointsVertexAttributeName,
+    meshPointsVertexAttributeValue,
     meshPointsVertexAttributeRange,
     meshPointsVertexAttributeColorMap,
   };
@@ -80,14 +86,14 @@ function useMeshPointsVertexAttributeActions() {
   const viewerStore = useViewerStore();
   const config = useMeshPointsVertexAttributeConfig();
 
-  function setMeshPointsVertexAttributeName(id, name) {
+  function setMeshPointsVertexAttributeName(id, name, item = 0) {
     const schema = meshPointsVertexAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       { schema, params },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const vertex = config.meshPointsVertexAttribute(id);
           if (!(name in vertex.storedConfigs)) {
             updates.storedConfigs = {
diff --git a/internal/stores/data_style/mesh/polygons/polygon.js b/internal/stores/data_style/mesh/polygons/polygon.js
index 447db461..b95ef87d 100644
--- a/internal/stores/data_style/mesh/polygons/polygon.js
+++ b/internal/stores/data_style/mesh/polygons/polygon.js
@@ -51,14 +51,19 @@ export function useMeshPolygonsPolygonAttributeStyle() {
     return meshPolygonsPolygonAttribute(id).name;
   }
 
-  function setMeshPolygonsPolygonAttributeName(id, name) {
+  function meshPolygonsPolygonAttributeValue(id) {
+    const attr = meshPolygonsPolygonAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  function setMeshPolygonsPolygonAttributeName(id, name, item = 0) {
     const schema = meshPolygonsPolygonAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       { schema, params },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const polygon = meshPolygonsPolygonAttribute(id);
           if (!(name in polygon.storedConfigs)) {
             updates.storedConfigs = {
@@ -130,6 +135,7 @@ export function useMeshPolygonsPolygonAttributeStyle() {
 
   return {
     meshPolygonsPolygonAttributeName,
+    meshPolygonsPolygonAttributeValue,
     meshPolygonsPolygonAttributeRange,
     meshPolygonsPolygonAttributeColorMap,
     meshPolygonsPolygonAttributeStoredConfig,
diff --git a/internal/stores/data_style/mesh/polygons/vertex.js b/internal/stores/data_style/mesh/polygons/vertex.js
index c27d8008..17daf4b5 100644
--- a/internal/stores/data_style/mesh/polygons/vertex.js
+++ b/internal/stores/data_style/mesh/polygons/vertex.js
@@ -51,14 +51,19 @@ export function useMeshPolygonsVertexAttributeStyle() {
     return meshPolygonsVertexAttribute(id).name;
   }
 
-  function setMeshPolygonsVertexAttributeName(id, name) {
+  function meshPolygonsVertexAttributeValue(id) {
+    const attr = meshPolygonsVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  function setMeshPolygonsVertexAttributeName(id, name, item = 0) {
     const schema = meshPolygonsVertexAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       { schema, params },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const vertex = meshPolygonsVertexAttribute(id);
           if (!(name in vertex.storedConfigs)) {
             updates.storedConfigs = {
@@ -130,6 +135,7 @@ export function useMeshPolygonsVertexAttributeStyle() {
 
   return {
     meshPolygonsVertexAttributeName,
+    meshPolygonsVertexAttributeValue,
     meshPolygonsVertexAttributeRange,
     meshPolygonsVertexAttributeColorMap,
     meshPolygonsVertexAttributeStoredConfig,
diff --git a/internal/stores/data_style/mesh/polyhedra/polyhedron.js b/internal/stores/data_style/mesh/polyhedra/polyhedron.js
index cecbe948..dafb20b7 100644
--- a/internal/stores/data_style/mesh/polyhedra/polyhedron.js
+++ b/internal/stores/data_style/mesh/polyhedra/polyhedron.js
@@ -50,6 +50,11 @@ function useMeshPolyhedraPolyhedronAttributeConfig() {
     return meshPolyhedraPolyhedronAttribute(id).name;
   }
 
+  function meshPolyhedraPolyhedronAttributeValue(id) {
+    const attr = meshPolyhedraPolyhedronAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
   function meshPolyhedraPolyhedronAttributeRange(id) {
     const name = meshPolyhedraPolyhedronAttributeName(id);
     const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
@@ -70,6 +75,7 @@ function useMeshPolyhedraPolyhedronAttributeConfig() {
     setMeshPolyhedraPolyhedronAttributeStoredConfig,
     mutateMeshPolyhedraPolyhedronStyle,
     meshPolyhedraPolyhedronAttributeName,
+    meshPolyhedraPolyhedronAttributeValue,
     meshPolyhedraPolyhedronAttributeRange,
     meshPolyhedraPolyhedronAttributeColorMap,
   };
@@ -80,9 +86,9 @@ function useMeshPolyhedraPolyhedronAttributeActions() {
   const viewerStore = useViewerStore();
   const config = useMeshPolyhedraPolyhedronAttributeConfig();
 
-  function setMeshPolyhedraPolyhedronAttributeName(id, name) {
+  function setMeshPolyhedraPolyhedronAttributeName(id, name, item = 0) {
     const schema = meshPolyhedraPolyhedronAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       {
         schema,
@@ -90,7 +96,7 @@ function useMeshPolyhedraPolyhedronAttributeActions() {
       },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const polyhedron = config.meshPolyhedraPolyhedronAttribute(id);
           if (!(name in polyhedron.storedConfigs)) {
             updates.storedConfigs = {
diff --git a/internal/stores/data_style/mesh/polyhedra/vertex.js b/internal/stores/data_style/mesh/polyhedra/vertex.js
index 4fdbaeb7..acc11bd8 100644
--- a/internal/stores/data_style/mesh/polyhedra/vertex.js
+++ b/internal/stores/data_style/mesh/polyhedra/vertex.js
@@ -50,6 +50,11 @@ function useMeshPolyhedraVertexAttributeConfig() {
     return meshPolyhedraVertexAttribute(id).name;
   }
 
+  function meshPolyhedraVertexAttributeValue(id) {
+    const attr = meshPolyhedraVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
   function meshPolyhedraVertexAttributeRange(id) {
     const name = meshPolyhedraVertexAttributeName(id);
     const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name);
@@ -70,6 +75,7 @@ function useMeshPolyhedraVertexAttributeConfig() {
     setMeshPolyhedraVertexAttributeStoredConfig,
     mutateMeshPolyhedraVertexStyle,
     meshPolyhedraVertexAttributeName,
+    meshPolyhedraVertexAttributeValue,
     meshPolyhedraVertexAttributeRange,
     meshPolyhedraVertexAttributeColorMap,
   };
@@ -80,9 +86,9 @@ function useMeshPolyhedraVertexAttributeActions() {
   const viewerStore = useViewerStore();
   const config = useMeshPolyhedraVertexAttributeConfig();
 
-  function setMeshPolyhedraVertexAttributeName(id, name) {
+  function setMeshPolyhedraVertexAttributeName(id, name, item = 0) {
     const schema = meshPolyhedraVertexAttributeSchemas.name;
-    const params = { id, name };
+    const params = { id, name, item };
     return viewerStore.request(
       {
         schema,
@@ -90,7 +96,7 @@ function useMeshPolyhedraVertexAttributeActions() {
       },
       {
         response_function: () => {
-          const updates = { name };
+          const updates = { name, item };
           const vertex = config.meshPolyhedraVertexAttribute(id);
           if (!(name in vertex.storedConfigs)) {
             updates.storedConfigs = {
diff --git a/internal/stores/data_style/model/blocks/polyhedron.js b/internal/stores/data_style/model/blocks/polyhedron.js
index c13838eb..0c41fc2a 100644
--- a/internal/stores/data_style/model/blocks/polyhedron.js
+++ b/internal/stores/data_style/model/blocks/polyhedron.js
@@ -49,13 +49,18 @@ export function useModelBlocksPolyhedronAttribute() {
     return modelBlocksPolyhedronAttribute(modelId, blockId).name;
   }
 
-  async function setModelBlocksPolyhedronAttributeName(modelId, blockIds, name) {
+  function modelBlocksPolyhedronAttributeValue(id) {
+    const attr = modelBlocksPolyhedronAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  async function setModelBlocksPolyhedronAttributeName(modelId, blockIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
-    const params = { id: modelId, block_ids: viewer_ids, name };
+    const params = { id: modelId, block_ids: viewer_ids, name , item};
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelBlocksPolyhedronStyle(modelId, blockIds, { name }),
+        response_function: () => mutateModelBlocksPolyhedronStyle(modelId, blockIds, { name, item }),
       },
     );
   }
@@ -121,6 +126,7 @@ export function useModelBlocksPolyhedronAttribute() {
 
   return {
     modelBlocksPolyhedronAttributeName,
+    modelBlocksPolyhedronAttributeValue,
     modelBlocksPolyhedronAttributeRange,
     modelBlocksPolyhedronAttributeColorMap,
     modelBlocksPolyhedronAttributeStoredConfig,
diff --git a/internal/stores/data_style/model/blocks/vertex.js b/internal/stores/data_style/model/blocks/vertex.js
index 2e95386f..f2b14c37 100644
--- a/internal/stores/data_style/model/blocks/vertex.js
+++ b/internal/stores/data_style/model/blocks/vertex.js
@@ -49,13 +49,18 @@ export function useModelBlocksVertexAttribute() {
     return modelBlocksVertexAttribute(modelId, blockId).name;
   }
 
-  async function setModelBlocksVertexAttributeName(modelId, blockIds, name) {
+  function modelBlocksVertexAttributeValue(id) {
+    const attr = modelBlocksVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  async function setModelBlocksVertexAttributeName(modelId, blockIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
-    const params = { id: modelId, block_ids: viewer_ids, name };
+    const params = { id: modelId, block_ids: viewer_ids, name , item};
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelBlocksVertexStyle(modelId, blockIds, { name }),
+        response_function: () => mutateModelBlocksVertexStyle(modelId, blockIds, { name, item }),
       },
     );
   }
@@ -118,6 +123,7 @@ export function useModelBlocksVertexAttribute() {
 
   return {
     modelBlocksVertexAttributeName,
+    modelBlocksVertexAttributeValue,
     modelBlocksVertexAttributeRange,
     modelBlocksVertexAttributeColorMap,
     modelBlocksVertexAttributeStoredConfig,
diff --git a/internal/stores/data_style/model/corners/vertex.js b/internal/stores/data_style/model/corners/vertex.js
index a332a14c..ba0b6a88 100644
--- a/internal/stores/data_style/model/corners/vertex.js
+++ b/internal/stores/data_style/model/corners/vertex.js
@@ -49,13 +49,18 @@ export function useModelCornersVertexAttribute() {
     return modelCornersVertexAttribute(modelId, cornerId).name;
   }
 
-  async function setModelCornersVertexAttributeName(modelId, cornerIds, name) {
+  function modelCornersVertexAttributeValue(id) {
+    const attr = modelCornersVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  async function setModelCornersVertexAttributeName(modelId, cornerIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, cornerIds);
-    const params = { id: modelId, block_ids: viewer_ids, name };
+    const params = { id: modelId, block_ids: viewer_ids, name , item};
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelCornersVertexStyle(modelId, cornerIds, { name }),
+        response_function: () => mutateModelCornersVertexStyle(modelId, cornerIds, { name, item }),
       },
     );
   }
@@ -121,6 +126,7 @@ export function useModelCornersVertexAttribute() {
 
   return {
     modelCornersVertexAttributeName,
+    modelCornersVertexAttributeValue,
     modelCornersVertexAttributeRange,
     modelCornersVertexAttributeColorMap,
     modelCornersVertexAttributeStoredConfig,
diff --git a/internal/stores/data_style/model/lines/edge.js b/internal/stores/data_style/model/lines/edge.js
index ce5ea006..d79cce90 100644
--- a/internal/stores/data_style/model/lines/edge.js
+++ b/internal/stores/data_style/model/lines/edge.js
@@ -49,13 +49,18 @@ export function useModelLinesEdgeAttribute() {
     return modelLinesEdgeAttribute(modelId, lineId).name;
   }
 
-  async function setModelLinesEdgeAttributeName(modelId, lineIds, name) {
+  function modelLinesEdgeAttributeValue(id) {
+    const attr = modelLinesEdgeAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  async function setModelLinesEdgeAttributeName(modelId, lineIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-    const params = { id: modelId, block_ids: viewer_ids, name };
+    const params = { id: modelId, block_ids: viewer_ids, name , item};
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, { name }),
+        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, { name, item }),
       },
     );
   }
@@ -115,6 +120,7 @@ export function useModelLinesEdgeAttribute() {
 
   return {
     modelLinesEdgeAttributeName,
+    modelLinesEdgeAttributeValue,
     modelLinesEdgeAttributeRange,
     modelLinesEdgeAttributeColorMap,
     modelLinesEdgeAttributeStoredConfig,
diff --git a/internal/stores/data_style/model/lines/vertex.js b/internal/stores/data_style/model/lines/vertex.js
index 6efecfb2..b30bbc60 100644
--- a/internal/stores/data_style/model/lines/vertex.js
+++ b/internal/stores/data_style/model/lines/vertex.js
@@ -49,13 +49,18 @@ export function useModelLinesVertexAttribute() {
     return modelLinesVertexAttribute(modelId, lineId).name;
   }
 
-  async function setModelLinesVertexAttributeName(modelId, lineIds, name) {
+  function modelLinesVertexAttributeValue(id) {
+    const attr = modelLinesVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  async function setModelLinesVertexAttributeName(modelId, lineIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-    const params = { id: modelId, block_ids: viewer_ids, name };
+    const params = { id: modelId, block_ids: viewer_ids, name , item};
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, { name }),
+        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, { name, item }),
       },
     );
   }
@@ -115,6 +120,7 @@ export function useModelLinesVertexAttribute() {
 
   return {
     modelLinesVertexAttributeName,
+    modelLinesVertexAttributeValue,
     modelLinesVertexAttributeRange,
     modelLinesVertexAttributeColorMap,
     modelLinesVertexAttributeStoredConfig,
diff --git a/internal/stores/data_style/model/surfaces/polygon.js b/internal/stores/data_style/model/surfaces/polygon.js
index faf1964d..655cbc70 100644
--- a/internal/stores/data_style/model/surfaces/polygon.js
+++ b/internal/stores/data_style/model/surfaces/polygon.js
@@ -49,13 +49,18 @@ export function useModelSurfacesPolygonAttribute() {
     return modelSurfacesPolygonAttribute(modelId, surfaceId).name;
   }
 
-  async function setModelSurfacesPolygonAttributeName(modelId, surfaceIds, name) {
+  function modelSurfacesPolygonAttributeValue(id) {
+    const attr = modelSurfacesPolygonAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  async function setModelSurfacesPolygonAttributeName(modelId, surfaceIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-    const params = { id: modelId, block_ids: viewer_ids, name };
+    const params = { id: modelId, block_ids: viewer_ids, name , item};
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, { name }),
+        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, { name, item }),
       },
     );
   }
@@ -121,6 +126,7 @@ export function useModelSurfacesPolygonAttribute() {
 
   return {
     modelSurfacesPolygonAttributeName,
+    modelSurfacesPolygonAttributeValue,
     modelSurfacesPolygonAttributeRange,
     modelSurfacesPolygonAttributeColorMap,
     modelSurfacesPolygonAttributeStoredConfig,
diff --git a/internal/stores/data_style/model/surfaces/vertex.js b/internal/stores/data_style/model/surfaces/vertex.js
index c7e1369f..537e1551 100644
--- a/internal/stores/data_style/model/surfaces/vertex.js
+++ b/internal/stores/data_style/model/surfaces/vertex.js
@@ -49,13 +49,18 @@ export function useModelSurfacesVertexAttribute() {
     return modelSurfacesVertexAttribute(modelId, surfaceId).name;
   }
 
-  async function setModelSurfacesVertexAttributeName(modelId, surfaceIds, name) {
+  function modelSurfacesVertexAttributeValue(id) {
+    const attr = modelSurfacesVertexAttribute(id);
+    return { name: attr.name, item: attr.item };
+  }
+
+  async function setModelSurfacesVertexAttributeName(modelId, surfaceIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-    const params = { id: modelId, block_ids: viewer_ids, name };
+    const params = { id: modelId, block_ids: viewer_ids, name , item};
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, { name }),
+        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, { name, item }),
       },
     );
   }
@@ -121,6 +126,7 @@ export function useModelSurfacesVertexAttribute() {
 
   return {
     modelSurfacesVertexAttributeName,
+    modelSurfacesVertexAttributeValue,
     modelSurfacesVertexAttributeRange,
     modelSurfacesVertexAttributeColorMap,
     modelSurfacesVertexAttributeStoredConfig,
diff --git a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
index 643750d2..babce343 100644
--- a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
@@ -13,8 +13,8 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells;
 const file_name = "test.og_rgd2d";
 const geode_object = "RegularGrid2D";
-const vertex_attribute = { name: "points" };
-const cell_attribute = { name: "RGB_data" };
+const vertex_attribute = { name: "points", item: 0 };
+const cell_attribute = { name: "RGB_data", item: 0 };
 
 let id = "",
   projectFolderPath = "";
diff --git a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
index 5ce86900..6135ce1e 100644
--- a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
@@ -13,8 +13,8 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const mesh_edges_schemas = viewer_schemas.opengeodeweb_viewer.mesh.edges;
 const file_name = "test.og_edc3d";
 const geode_object = "EdgedCurve3D";
-const vertex_attribute = { name: "vertex_attribute" };
-const edge_attribute = { name: "edge_attribute" };
+const vertex_attribute = { name: "vertex_attribute", item: 0 };
+const edge_attribute = { name: "edge_attribute", item: 0 };
 
 let id = "",
   projectFolderPath = "";
diff --git a/tests/integration/stores/data_style/mesh/points.nuxt.test.js b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
index 09a4debe..6095a986 100644
--- a/tests/integration/stores/data_style/mesh/points.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
@@ -13,7 +13,7 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points;
 const file_name = "test.og_edc2d";
 const geode_object = "EdgedCurve2D";
-const vertex_attribute = { name: "points" };
+const vertex_attribute = { name: "points", item: 0 };
 
 let id = "",
   projectFolderPath = "";
diff --git a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
index 13c61ad4..356a268c 100644
--- a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
@@ -13,8 +13,8 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const mesh_polygons_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polygons;
 const file_name = "test.og_psf3d";
 const geode_object = "PolygonalSurface3D";
-const vertex_attribute = { name: "points" };
-const polygon_attribute = { name: "test_attribute" };
+const vertex_attribute = { name: "points", item: 0 };
+const polygon_attribute = { name: "test_attribute", item: 0 };
 
 let id = "",
   projectFolderPath = "";
diff --git a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
index 8c41c22c..c1c007a2 100644
--- a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
@@ -13,8 +13,8 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const mesh_polyhedra_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polyhedra;
 const file_name = "test.vtu";
 const geode_object = "HybridSolid3D";
-const vertex_attribute = { name: "toto_on_vertices" };
-const polyhedron_attribute = { name: "toto_on_polyhedra" };
+const vertex_attribute = { name: "toto_on_vertices", item: 0 };
+const polyhedron_attribute = { name: "toto_on_polyhedra", item: 0 };
 
 let id = "",
   projectFolderPath = "";
diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index 650722c0..23d71cf1 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -110,6 +110,7 @@ describe("model blocks", () => {
             id,
             block_ids: block_viewer_ids,
             name: "points",
+            item: 0,
           },
         },
         {
@@ -147,6 +148,7 @@ describe("model blocks", () => {
             id,
             block_ids: block_viewer_ids,
             name: "test_attribute",
+            item: 0,
           },
         },
         {
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index d9fc2b0f..5f1eaca0 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -114,6 +114,7 @@ describe("model corners", () => {
             id,
             block_ids: corner_viewer_ids,
             name: "points",
+            item: 0,
           },
         },
         {
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index 72fa174c..966a8974 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -114,6 +114,7 @@ describe("model lines", () => {
             id,
             block_ids: lines_viewer_ids,
             name: "points",
+            item: 0,
           },
         },
         {
@@ -147,6 +148,7 @@ describe("model lines", () => {
             id,
             block_ids: lines_viewer_ids,
             name: "test_attribute",
+            item: 0,
           },
         },
         {
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index 65493ae4..09a4d8a2 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -112,6 +112,7 @@ describe("model surfaces", () => {
             id,
             block_ids: surface_viewer_ids,
             name: "points",
+            item: 0,
           },
         },
         {
@@ -149,6 +150,7 @@ describe("model surfaces", () => {
             id,
             block_ids: surface_viewer_ids,
             name: "test_attribute",
+            item: 0,
           },
         },
         {

From 51a6c6b0f25bd9866995b6ef26faa2085e8300b9 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:01:15 +0000
Subject: [PATCH 2/2] Apply prepare changes

---
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  |  6 +++-
 .../Viewer/Generic/Model/BlocksOptions.vue    | 28 ++++++++++++++++---
 .../Viewer/Generic/Model/CornersOptions.vue   | 14 ++++++++--
 .../Viewer/Generic/Model/LinesOptions.vue     | 28 ++++++++++++++++---
 .../Viewer/Generic/Model/SurfacesOptions.vue  | 28 ++++++++++++++++---
 .../Viewer/Solid/SpecificPolyhedraOptions.vue |  6 +++-
 .../data_style/model/blocks/polyhedron.js     |  5 ++--
 .../stores/data_style/model/blocks/vertex.js  |  2 +-
 .../stores/data_style/model/corners/vertex.js |  2 +-
 .../stores/data_style/model/lines/edge.js     |  2 +-
 .../stores/data_style/model/lines/vertex.js   |  2 +-
 .../data_style/model/surfaces/polygon.js      |  5 ++--
 .../data_style/model/surfaces/vertex.js       |  5 ++--
 13 files changed, 107 insertions(+), 26 deletions(-)

diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index a7b12164..6928cab5 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -83,7 +83,11 @@ const polyhedron_attribute_name = computed({
   }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue.name, newValue.item),
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
+        targetId,
+        newValue.name,
+        newValue.item,
+      ),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index 30c5e2b0..1e8b6b9a 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -72,7 +72,12 @@ const blocksVertexAttributeName = computed({
     item: dataStyleStore.modelBlocksVertexAttributeValue(modelId, targetBlockIds[0]).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, targetBlockIds, newValue.name, newValue.item);
+    await dataStyleStore.setModelBlocksVertexAttributeName(
+      modelId,
+      targetBlockIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -104,7 +109,12 @@ const blocksPolyhedronAttributeName = computed({
     item: dataStyleStore.modelBlocksPolyhedronAttributeValue(modelId, targetBlockIds[0]).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, targetBlockIds, newValue.name, newValue.item);
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(
+      modelId,
+      targetBlockIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -141,7 +151,12 @@ const vertexAttributeName = computed({
     item: dataStyleStore.modelBlocksVertexAttributeValue(modelId, blockId).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksVertexAttributeName(modelId, [blockId], newValue.name, newValue.item);
+    await dataStyleStore.setModelBlocksVertexAttributeName(
+      modelId,
+      [blockId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -173,7 +188,12 @@ const polyhedronAttributeName = computed({
     item: dataStyleStore.modelBlocksPolyhedronAttributeValue(modelId, blockId).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, [blockId], newValue.name, newValue.item);
+    await dataStyleStore.setModelBlocksPolyhedronAttributeName(
+      modelId,
+      [blockId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 2ca169a1..f7e61060 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -73,7 +73,12 @@ const cornersVertexAttributeName = computed({
     item: dataStyleStore.modelCornersVertexAttributeValue(modelId, targetCornerIds[0]).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue.name, newValue.item);
+    await dataStyleStore.setModelCornersVertexAttributeName(
+      modelId,
+      targetCornerIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -106,7 +111,12 @@ const vertexAttributeName = computed({
     item: dataStyleStore.modelCornersVertexAttributeValue(modelId, cornerId).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue.name, newValue.item);
+    await dataStyleStore.setModelCornersVertexAttributeName(
+      modelId,
+      [cornerId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index 986f72db..a8781568 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -72,7 +72,12 @@ const linesVertexAttributeName = computed({
     item: dataStyleStore.modelLinesVertexAttributeValue(modelId, targetLineIds[0]).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue.name, newValue.item);
+    await dataStyleStore.setModelLinesVertexAttributeName(
+      modelId,
+      targetLineIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -104,7 +109,12 @@ const linesEdgeAttributeName = computed({
     item: dataStyleStore.modelLinesEdgeAttributeValue(modelId, targetLineIds[0]).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue.name, newValue.item);
+    await dataStyleStore.setModelLinesEdgeAttributeName(
+      modelId,
+      targetLineIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -137,7 +147,12 @@ const vertexAttributeName = computed({
     item: dataStyleStore.modelLinesVertexAttributeValue(modelId, lineId).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue.name, newValue.item);
+    await dataStyleStore.setModelLinesVertexAttributeName(
+      modelId,
+      [lineId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -169,7 +184,12 @@ const edgeAttributeName = computed({
     item: dataStyleStore.modelLinesEdgeAttributeValue(modelId, lineId).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue.name, newValue.item);
+    await dataStyleStore.setModelLinesEdgeAttributeName(
+      modelId,
+      [lineId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index 11b72dfd..bd33555f 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -72,7 +72,12 @@ const surfacesVertexAttributeName = computed({
     item: dataStyleStore.modelSurfacesVertexAttributeValue(modelId, targetSurfaceIds[0]).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, targetSurfaceIds, newValue.name, newValue.item);
+    await dataStyleStore.setModelSurfacesVertexAttributeName(
+      modelId,
+      targetSurfaceIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -108,7 +113,12 @@ const surfacesPolygonAttributeName = computed({
     item: dataStyleStore.modelSurfacesPolygonAttributeValue(modelId, targetSurfaceIds[0]).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, targetSurfaceIds, newValue.name, newValue.item);
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(
+      modelId,
+      targetSurfaceIds,
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -145,7 +155,12 @@ const vertexAttributeName = computed({
     item: dataStyleStore.modelSurfacesVertexAttributeValue(modelId, surfaceId).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesVertexAttributeName(modelId, [surfaceId], newValue.name, newValue.item);
+    await dataStyleStore.setModelSurfacesVertexAttributeName(
+      modelId,
+      [surfaceId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
@@ -177,7 +192,12 @@ const polygonAttributeName = computed({
     item: dataStyleStore.modelSurfacesPolygonAttributeValue(modelId, surfaceId).item,
   }),
   set: async (newValue) => {
-    await dataStyleStore.setModelSurfacesPolygonAttributeName(modelId, [surfaceId], newValue.name, newValue.item);
+    await dataStyleStore.setModelSurfacesPolygonAttributeName(
+      modelId,
+      [surfaceId],
+      newValue.name,
+      newValue.item,
+    );
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index b461928c..fbb3f917 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -83,7 +83,11 @@ const polyhedron_attribute_name = computed({
   }),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue.name, newValue.item),
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
+        targetId,
+        newValue.name,
+        newValue.item,
+      ),
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/internal/stores/data_style/model/blocks/polyhedron.js b/internal/stores/data_style/model/blocks/polyhedron.js
index 0c41fc2a..20d5f0e6 100644
--- a/internal/stores/data_style/model/blocks/polyhedron.js
+++ b/internal/stores/data_style/model/blocks/polyhedron.js
@@ -56,11 +56,12 @@ export function useModelBlocksPolyhedronAttribute() {
 
   async function setModelBlocksPolyhedronAttributeName(modelId, blockIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
-    const params = { id: modelId, block_ids: viewer_ids, name , item};
+    const params = { id: modelId, block_ids: viewer_ids, name, item };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelBlocksPolyhedronStyle(modelId, blockIds, { name, item }),
+        response_function: () =>
+          mutateModelBlocksPolyhedronStyle(modelId, blockIds, { name, item }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/blocks/vertex.js b/internal/stores/data_style/model/blocks/vertex.js
index f2b14c37..0e2848ab 100644
--- a/internal/stores/data_style/model/blocks/vertex.js
+++ b/internal/stores/data_style/model/blocks/vertex.js
@@ -56,7 +56,7 @@ export function useModelBlocksVertexAttribute() {
 
   async function setModelBlocksVertexAttributeName(modelId, blockIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
-    const params = { id: modelId, block_ids: viewer_ids, name , item};
+    const params = { id: modelId, block_ids: viewer_ids, name, item };
     return viewerStore.request(
       { schema: schema.name, params },
       {
diff --git a/internal/stores/data_style/model/corners/vertex.js b/internal/stores/data_style/model/corners/vertex.js
index ba0b6a88..88c25580 100644
--- a/internal/stores/data_style/model/corners/vertex.js
+++ b/internal/stores/data_style/model/corners/vertex.js
@@ -56,7 +56,7 @@ export function useModelCornersVertexAttribute() {
 
   async function setModelCornersVertexAttributeName(modelId, cornerIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, cornerIds);
-    const params = { id: modelId, block_ids: viewer_ids, name , item};
+    const params = { id: modelId, block_ids: viewer_ids, name, item };
     return viewerStore.request(
       { schema: schema.name, params },
       {
diff --git a/internal/stores/data_style/model/lines/edge.js b/internal/stores/data_style/model/lines/edge.js
index d79cce90..85bc7f5d 100644
--- a/internal/stores/data_style/model/lines/edge.js
+++ b/internal/stores/data_style/model/lines/edge.js
@@ -56,7 +56,7 @@ export function useModelLinesEdgeAttribute() {
 
   async function setModelLinesEdgeAttributeName(modelId, lineIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-    const params = { id: modelId, block_ids: viewer_ids, name , item};
+    const params = { id: modelId, block_ids: viewer_ids, name, item };
     return viewerStore.request(
       { schema: schema.name, params },
       {
diff --git a/internal/stores/data_style/model/lines/vertex.js b/internal/stores/data_style/model/lines/vertex.js
index b30bbc60..0d8192b9 100644
--- a/internal/stores/data_style/model/lines/vertex.js
+++ b/internal/stores/data_style/model/lines/vertex.js
@@ -56,7 +56,7 @@ export function useModelLinesVertexAttribute() {
 
   async function setModelLinesVertexAttributeName(modelId, lineIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-    const params = { id: modelId, block_ids: viewer_ids, name , item};
+    const params = { id: modelId, block_ids: viewer_ids, name, item };
     return viewerStore.request(
       { schema: schema.name, params },
       {
diff --git a/internal/stores/data_style/model/surfaces/polygon.js b/internal/stores/data_style/model/surfaces/polygon.js
index 655cbc70..1eedffb6 100644
--- a/internal/stores/data_style/model/surfaces/polygon.js
+++ b/internal/stores/data_style/model/surfaces/polygon.js
@@ -56,11 +56,12 @@ export function useModelSurfacesPolygonAttribute() {
 
   async function setModelSurfacesPolygonAttributeName(modelId, surfaceIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-    const params = { id: modelId, block_ids: viewer_ids, name , item};
+    const params = { id: modelId, block_ids: viewer_ids, name, item };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, { name, item }),
+        response_function: () =>
+          mutateModelSurfacesPolygonStyle(modelId, surfaceIds, { name, item }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/surfaces/vertex.js b/internal/stores/data_style/model/surfaces/vertex.js
index 537e1551..a3229c24 100644
--- a/internal/stores/data_style/model/surfaces/vertex.js
+++ b/internal/stores/data_style/model/surfaces/vertex.js
@@ -56,11 +56,12 @@ export function useModelSurfacesVertexAttribute() {
 
   async function setModelSurfacesVertexAttributeName(modelId, surfaceIds, name, item = 0) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-    const params = { id: modelId, block_ids: viewer_ids, name , item};
+    const params = { id: modelId, block_ids: viewer_ids, name, item };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, { name, item }),
+        response_function: () =>
+          mutateModelSurfacesVertexStyle(modelId, surfaceIds, { name, item }),
       },
     );
   }