@geode/opengeodeweb-front 10.28.1-rc.4 → 10.29.0-rc.2

package/app/components/Viewer/ContextMenu/InfoCard.vue

@@ -23,28 +23,24 @@ const menuStore = useMenuStore();
 const dataStore = useDataStore();
 
 const componentName = ref("");
+const componentItem = ref(undefined);
 
 watch(
   () => menuStore.current_meta_data,
   async (newMeta) => {
     componentName.value = "";
+    componentItem.value = undefined;
     if (!newMeta) {
       return;
     }
 
-    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
-      try {
-        const comp = await dataStore.getComponentByViewerId(
-          newMeta.modelId,
-          newMeta.pickedComponentId,
-        );
-        if (comp && comp.name) {
-          componentName.value = comp.name;
-        } else {
-          componentName.value = newMeta.pickedComponentId;
-        }
-      } catch {
-        componentName.value = newMeta.pickedComponentId;
+    const modelId = newMeta.modelId || newMeta.id;
+    if (newMeta.pickedComponentId && modelId) {
+      const components = await dataStore.getAllMeshComponents(modelId);
+      const comp = components.find((component) => component.id === newMeta.pickedComponentId);
+      if (comp) {
+        componentName.value = comp.title;
+        componentItem.value = comp;
       }
     }
   },
@@ -56,7 +52,7 @@ const cleanName = computed(() => {
   if (!meta) {
     return "Unnamed Object";
   }
-  if (componentName.value) {
+  if (componentName.value && meta.viewer_type === "model_component") {
     return componentName.value;
   }
   return meta.name || "Unnamed Object";
@@ -70,6 +66,18 @@ const displayTitle = computed(() => {
   return middleTruncate(name, TRUNCATE_MAX_LENGTH, TRUNCATE_START_CHARS, TRUNCATE_END_CHARS);
 });
 
+const displayComponentTitle = computed(() => {
+  if (!componentItem.value) {
+    return "";
+  }
+  return middleTruncate(
+    componentItem.value.title,
+    TRUNCATE_MAX_LENGTH,
+    TRUNCATE_START_CHARS,
+    TRUNCATE_END_CHARS,
+  );
+});
+
 const copied = ref(false);
 async function copyId(targetId) {
   if (!targetId) {
@@ -86,16 +94,17 @@ async function copyId(targetId) {
   }
 }
 
-const formattedId = computed(() => {
-  const metaId = metaData?.id;
-  if (!metaId) {
+function formatId(id) {
+  if (!id) {
     return "";
   }
-  if (metaId.length <= MAX_SHORT_ID_LENGTH) {
-    return metaId;
+  if (id.length <= MAX_SHORT_ID_LENGTH) {
+    return id;
   }
-  return `${metaId.slice(0, ID_SLICE_START)}...${metaId.slice(metaId.length - ID_SLICE_END_OFFSET)}`;
-});
+  return `${id.slice(0, ID_SLICE_START)}...${id.slice(id.length - ID_SLICE_END_OFFSET)}`;
+}
+
+const formattedId = computed(() => formatId(metaData?.id));
 </script>
 
 <template>
@@ -138,6 +147,32 @@ const formattedId = computed(() => {
               class="ml-1"
             />
           </v-col>
+
+          <template v-if="componentItem">
+            <v-divider class="w-100 my-2" opacity="0.2" />
+            <v-col
+              class="text-subtitle-2 font-weight-bold text-truncate text-white w-100 pa-0"
+              cols="auto"
+              style="line-height: 1.3"
+            >
+              {{ displayComponentTitle }}
+            </v-col>
+            <v-col
+              class="text-caption font-weight-black text-uppercase text-secondary pa-0"
+              style="font-size: 0.68rem; line-height: 1.2"
+            >
+              {{ componentItem.category }}
+            </v-col>
+            <v-col
+              class="id-badge-container mt-1 d-inline-flex align-center px-2 py-0.5"
+              @click.stop="copyId(componentItem.id)"
+            >
+              <span class="id-text">
+                {{ formatId(componentItem.id) }}
+              </span>
+              <v-icon icon="mdi-content-copy" size="10" color="white" class="ml-1" />
+            </v-col>
+          </template>
         </v-row>
       </GlassCard>
     </v-sheet>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -64,6 +64,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -91,6 +100,15 @@ const edge_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const edge_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const edge_attribute_range = computed({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
@@ -110,6 +128,7 @@ const edge_attribute_color_map = computed({
   },
 });
 </script>
+
 <template>
   <ViewerContextMenuItem
     data-testid="meshEdgesMenu"
@@ -127,9 +146,11 @@ const edge_attribute_color_map = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:edge_attribute_name="edge_attribute_name"
+          v-model:edge_attribute_item="edge_attribute_item"
           v-model:edge_attribute_range="edge_attribute_range"
           v-model:edge_attribute_color_map="edge_attribute_color_map"
         />

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -55,6 +55,7 @@ const textures = computed({
     hybridViewerStore.remoteRender();
   },
 });
+
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
   set: async (newValue) => {
@@ -64,6 +65,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshCellsVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -91,6 +101,15 @@ const cell_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const cell_attribute_item = computed({
+  get: () => dataStyleStore.meshCellsCellAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsCellAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const cell_attribute_range = computed({
   get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
   set: async (newValue) => {
@@ -128,9 +147,11 @@ const cell_attribute_color_map = computed({
           v-model:color="color"
           v-model:textures="textures"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:cell_attribute_name="cell_attribute_name"
+          v-model:cell_attribute_item="cell_attribute_item"
           v-model:cell_attribute_range="cell_attribute_range"
           v-model:cell_attribute_color_map="cell_attribute_color_map"
         />

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -56,6 +56,78 @@ const color = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_name = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_name = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_range = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_color_map = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -81,6 +153,14 @@ const color = computed({
           :id="id"
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:edge_attribute_name="edge_attribute_name"
+          v-model:edge_attribute_item="edge_attribute_item"
+          v-model:edge_attribute_range="edge_attribute_range"
+          v-model:edge_attribute_color_map="edge_attribute_color_map"
         />
       </template>
     </template>

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -65,6 +65,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshPointsVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -109,6 +118,7 @@ const vertex_attribute_color_map = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           :capabilities="{ vertex: { available: false } }"

package/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -56,6 +56,79 @@ const textures = computed({
     hybridViewerStore.remoteRender();
   },
 });
+
+const vertex_attribute_name = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_name = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_item = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_range = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -77,6 +150,14 @@ const textures = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:polygon_attribute_name="polygon_attribute_name"
+          v-model:polygon_attribute_item="polygon_attribute_item"
+          v-model:polygon_attribute_range="polygon_attribute_range"
+          v-model:polygon_attribute_color_map="polygon_attribute_color_map"
           :capabilities="capabilities"
         />
       </template>

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -55,6 +55,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -82,6 +91,15 @@ const polyhedron_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const polyhedron_attribute_item = computed({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const polyhedron_attribute_range = computed({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
@@ -123,9 +141,11 @@ const polyhedron_attribute_color_map = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:polyhedron_attribute_name="polyhedron_attribute_name"
+          v-model:polyhedron_attribute_item="polyhedron_attribute_item"
           v-model:polyhedron_attribute_range="polyhedron_attribute_range"
           v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
           :capabilities="{

package/app/components/Viewer/Generic/Model/BlocksOptions.vue

@@ -74,6 +74,14 @@ const blocksVertexAttributeName = computed({
   },
 });
 
+const blocksVertexAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeItem(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const blocksVertexAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, targetBlockIds[0]),
   set: async (newValue) => {
@@ -103,6 +111,14 @@ const blocksPolyhedronAttributeName = computed({
   },
 });
 
+const blocksPolyhedronAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const blocksPolyhedronAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, targetBlockIds[0]),
   set: async (newValue) => {
@@ -137,6 +153,14 @@ const vertexAttributeName = computed({
   },
 });
 
+const vertexAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeItem(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, blockId),
   set: async (newValue) => {
@@ -166,6 +190,14 @@ const polyhedronAttributeName = computed({
   },
 });
 
+const polyhedronAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const polyhedronAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, blockId),
   set: async (newValue) => {
@@ -210,9 +242,11 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:coloring_style_key="blocksActiveColoring"
       v-model:color="blocksColor"
       v-model:vertex_attribute_name="blocksVertexAttributeName"
+      v-model:vertex_attribute_item="blocksVertexAttributeItem"
       v-model:vertex_attribute_range="blocksVertexAttributeRange"
       v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
       v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
+      v-model:polyhedron_attribute_item="blocksPolyhedronAttributeItem"
       v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
       :capabilities="capabilities"
@@ -229,9 +263,11 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:coloring_style_key="blockActiveColoring"
       v-model:color="blockColor"
       v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
       v-model:polyhedron_attribute_name="polyhedronAttributeName"
+      v-model:polyhedron_attribute_item="polyhedronAttributeItem"
       v-model:polyhedron_attribute_range="polyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
       :capabilities="capabilities"

package/app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -75,6 +75,14 @@ const cornersVertexAttributeName = computed({
   },
 });
 
+const cornersVertexAttributeItem = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, targetCornerIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const cornersVertexAttributeRange = computed({
   get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, targetCornerIds[0]),
   set: async (newValue) => {
@@ -105,6 +113,14 @@ const vertexAttributeName = computed({
   },
 });
 
+const vertexAttributeItem = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, cornerId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeRange = computed({
   get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, cornerId),
   set: async (newValue) => {
@@ -148,6 +164,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:coloring_style_key="cornersActiveColoring"
       v-model:color="cornersColor"
       v-model:vertex_attribute_name="cornersVertexAttributeName"
+      v-model:vertex_attribute_item="cornersVertexAttributeItem"
       v-model:vertex_attribute_range="cornersVertexAttributeRange"
       v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
       :capabilities="capabilities"
@@ -164,6 +181,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:coloring_style_key="cornerActiveColoring"
       v-model:color="cornerColor"
       v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
       :capabilities="capabilities"