@geode/opengeodeweb-front 10.25.0-rc.7 → 10.25.0

package/internal/stores/data_style/model/lines/color.js

@@ -1,5 +1,7 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelLinesCommonStyle } from "./common";
+import { useModelLinesEdgeAttribute } from "./edge";
+import { useModelLinesVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
@@ -7,19 +9,81 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
 export function useModelLinesColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const modelLinesVertexAttribute = useModelLinesVertexAttribute();
+  const modelLinesEdgeAttribute = useModelLinesEdgeAttribute();
+
+  function modelLineColoring(id, line_id) {
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring;
+  }
 
   function modelLineColor(id, line_id) {
-    return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
+    return modelLineColoring(id, line_id).constant;
   }
 
-  function setModelLinesColor(modelId, lines_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, color_mode);
+  function setModelLinesColor(modelId, lines_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, activeColoring);
   }
 
-  function modelLineColorMode(id, line_id) {
-    const mode = modelLinesCommonStyle.modelLineStyle(id, line_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function modelLineActiveColoring(id, line_id) {
+    return modelLineColoring(id, line_id).active;
+  }
+
+  async function setModelLinesActiveColoring(modelId, lines_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, lines_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelLineColor(modelId, lines_ids[0]);
+      return setModelLinesColor(modelId, lines_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelLinesVertexAttribute.modelLinesVertexAttributeName(modelId, lines_ids[0]);
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeName(modelId, lines_ids, name);
+      const [min, max] = modelLinesVertexAttribute.modelLinesVertexAttributeRange(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeRange(
+        modelId,
+        lines_ids,
+        min,
+        max,
+      );
+      const colorMap = modelLinesVertexAttribute.modelLinesVertexAttributeColorMap(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeColorMap(
+        modelId,
+        lines_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "edge") {
+      const name = modelLinesEdgeAttribute.modelLinesEdgeAttributeName(modelId, lines_ids[0]);
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeName(modelId, lines_ids, name);
+      const [min, max] = modelLinesEdgeAttribute.modelLinesEdgeAttributeRange(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeRange(modelId, lines_ids, min, max);
+      const colorMap = modelLinesEdgeAttribute.modelLinesEdgeAttributeColorMap(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeColorMap(
+        modelId,
+        lines_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelLinesColor, modelLineColor, modelLineColorMode };
+  return {
+    setModelLinesColor,
+    modelLineColoring,
+    modelLineColor,
+    modelLineActiveColoring,
+    setModelLinesActiveColoring,
+  };
 }

package/internal/stores/data_style/model/lines/common.js

@@ -16,18 +16,27 @@ export function useModelLinesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelLinesStyle(id, lines_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, lines_ids, values);
+  function modelLineColoring(id, line_id) {
+    return modelLineStyle(id, line_id).coloring;
   }
 
-  function mutateModelLineStyle(id, line_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, line_id, values);
+  function mutateModelLinesColoring(id, lines_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, lines_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelLineColoring(id, line_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, line_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelLinesStyle,
     modelLineStyle,
-    mutateModelLinesStyle,
-    mutateModelLineStyle,
+    modelLineColoring,
+    mutateModelLinesColoring,
+    mutateModelLineColoring,
   };
 }

package/internal/stores/data_style/model/lines/edge.js

@@ -16,24 +16,24 @@ export function useModelLinesEdgeAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesEdgeAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).edge_attribute;
+    return modelLinesCommonStyle.modelLineColoring(modelId, lineId).edge;
   }
 
   function modelLinesEdgeAttributeStoredConfig(modelId, lineId, name) {
     const { storedConfigs } = modelLinesEdgeAttribute(modelId, lineId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelLinesEdgeAttributeStoredConfig(modelId, [lineId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelLinesEdgeStyle(modelId, lineIds, values) {
-    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      edge_attribute: values,
+    return modelLinesCommonStyle.mutateModelLinesColoring(modelId, lineIds, {
+      edge: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelLinesEdgeAttribute() {
 
   async function setModelLinesEdgeAttributeName(modelId, lineIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-
-    const updates = { name };
-    const edge = modelLinesEdgeAttribute(modelId, lineIds[0]);
-    if (!(name in edge.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, updates),
+        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, { name }),
       },
     );
   }

package/internal/stores/data_style/model/lines/index.js

@@ -36,34 +36,36 @@ export function useModelLinesStyle() {
       }
       visibilityGroups[visibility].push(line_id);
 
-      const color_mode = style.color_mode || "constant";
-      if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      const coloring = modelColorStyle.modelLineColoring(modelId, line_id);
+      const activeColoring = modelColorStyle.modelLineActiveColoring(modelId, line_id);
+      if (activeColoring === "constant") {
+        const color = modelColorStyle.modelLineColor(modelId, line_id);
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, lines_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, lines_ids: [] };
         }
         colorGroups[color_key].lines_ids.push(line_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, lines_ids: [] };
+        }
+        colorGroups["random"].lines_ids.push(line_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
-          const { minimum, maximum, colorMap } = storedConfig;
-          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
-          if (!attributeGroups[attributeGroupKey]) {
-            attributeGroups[attributeGroupKey] = {
-              color_mode,
-              name,
-              minimum,
-              maximum,
-              colorMap,
-              lines_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].lines_ids.push(line_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            lines_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].lines_ids.push(line_id);
       }
     }
 
@@ -71,12 +73,12 @@ export function useModelLinesStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelLinesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, lines_ids: ids }) =>
-        modelColorStyle.setModelLinesColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, lines_ids: ids }) =>
+        modelColorStyle.setModelLinesColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, lines_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, lines_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex ? modelLinesVertexAttribute : modelLinesEdgeAttribute;
           const setAttributeName = isVertex
             ? attributeStyle.setModelLinesVertexAttributeName

package/internal/stores/data_style/model/lines/vertex.js

@@ -16,24 +16,24 @@ export function useModelLinesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesVertexAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).vertex_attribute;
+    return modelLinesCommonStyle.modelLineColoring(modelId, lineId).vertex;
   }
 
   function modelLinesVertexAttributeStoredConfig(modelId, lineId, name) {
     const { storedConfigs } = modelLinesVertexAttribute(modelId, lineId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelLinesVertexAttributeStoredConfig(modelId, [lineId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelLinesVertexStyle(modelId, lineIds, values) {
-    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      vertex_attribute: values,
+    return modelLinesCommonStyle.mutateModelLinesColoring(modelId, lineIds, {
+      vertex: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelLinesVertexAttribute() {
 
   async function setModelLinesVertexAttributeName(modelId, lineIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-
-    const updates = { name };
-    const vertex = modelLinesVertexAttribute(modelId, lineIds[0]);
-    if (!(name in vertex.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, updates),
+        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, { name }),
       },
     );
   }

package/internal/stores/data_style/model/surfaces/color.js

@@ -1,5 +1,7 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelSurfacesCommonStyle } from "./common";
+import { useModelSurfacesPolygonAttribute } from "./polygon";
+import { useModelSurfacesVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
@@ -7,24 +9,100 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
 export function useModelSurfacesColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+  const modelSurfacesVertexAttribute = useModelSurfacesVertexAttribute();
+  const modelSurfacesPolygonAttribute = useModelSurfacesPolygonAttribute();
+
+  function modelSurfaceColoring(id, surface_id) {
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring;
+  }
 
   function modelSurfaceColor(id, surface_id) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
+    return modelSurfaceColoring(id, surface_id).constant;
   }
 
-  function setModelSurfacesColor(modelId, surfaces_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, color_mode);
+  function setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, activeColoring);
   }
 
-  function modelSurfaceColorMode(id, surface_id) {
-    const mode =
-      modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function modelSurfaceActiveColoring(id, surface_id) {
+    return modelSurfaceColoring(id, surface_id).active;
+  }
+
+  async function setModelSurfacesActiveColoring(modelId, surfaces_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, surfaces_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelSurfaceColor(modelId, surfaces_ids[0]);
+      return setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeName(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeName(
+        modelId,
+        surfaces_ids,
+        name,
+      );
+      const [min, max] = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeRange(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeRange(
+        modelId,
+        surfaces_ids,
+        min,
+        max,
+      );
+      const colorMap = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeColorMap(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeColorMap(
+        modelId,
+        surfaces_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "polygon") {
+      const name = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeName(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeName(
+        modelId,
+        surfaces_ids,
+        name,
+      );
+      const [min, max] = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeRange(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeRange(
+        modelId,
+        surfaces_ids,
+        min,
+        max,
+      );
+      const colorMap = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeColorMap(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeColorMap(
+        modelId,
+        surfaces_ids,
+        colorMap,
+      );
+    }
   }
 
   return {
     setModelSurfacesColor,
+    modelSurfaceColoring,
     modelSurfaceColor,
-    modelSurfaceColorMode,
+    modelSurfaceActiveColoring,
+    setModelSurfacesActiveColoring,
   };
 }

package/internal/stores/data_style/model/surfaces/common.js

@@ -16,18 +16,27 @@ export function useModelSurfacesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelSurfacesStyle(id, surfaces_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, values);
+  function modelSurfaceColoring(id, surface_id) {
+    return modelSurfaceStyle(id, surface_id).coloring;
   }
 
-  function mutateModelSurfaceStyle(id, surface_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, surface_id, values);
+  function mutateModelSurfacesColoring(id, surfaces_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelSurfaceColoring(id, surface_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, surface_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,
-    mutateModelSurfacesStyle,
-    mutateModelSurfaceStyle,
+    modelSurfaceColoring,
+    mutateModelSurfacesColoring,
+    mutateModelSurfaceColoring,
   };
 }

package/internal/stores/data_style/model/surfaces/index.js

@@ -36,34 +36,36 @@ export function useModelSurfacesStyle() {
       }
       visibilityGroups[visibility].push(surfaces_id);
 
-      const color_mode = style.color_mode || "constant";
-      if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      const coloring = modelColorStyle.modelSurfaceColoring(modelId, surfaces_id);
+      const activeColoring = modelColorStyle.modelSurfaceActiveColoring(modelId, surfaces_id);
+      if (activeColoring === "constant") {
+        const color = modelColorStyle.modelSurfaceColor(modelId, surfaces_id);
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, surfaces_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, surfaces_ids: [] };
         }
         colorGroups[color_key].surfaces_ids.push(surfaces_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, surfaces_ids: [] };
+        }
+        colorGroups["random"].surfaces_ids.push(surfaces_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
-          const { minimum, maximum, colorMap } = storedConfig;
-          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
-          if (!attributeGroups[attributeGroupKey]) {
-            attributeGroups[attributeGroupKey] = {
-              color_mode,
-              name,
-              minimum,
-              maximum,
-              colorMap,
-              surfaces_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].surfaces_ids.push(surfaces_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            surfaces_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].surfaces_ids.push(surfaces_id);
       }
     }
 
@@ -71,12 +73,12 @@ export function useModelSurfacesStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelSurfacesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, surfaces_ids: ids }) =>
-        modelColorStyle.setModelSurfacesColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, surfaces_ids: ids }) =>
+        modelColorStyle.setModelSurfacesColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, surfaces_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, surfaces_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex
             ? modelSurfacesVertexAttribute
             : modelSurfacesPolygonAttribute;

package/internal/stores/data_style/model/surfaces/polygon.js

@@ -16,24 +16,24 @@ export function useModelSurfacesPolygonAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesPolygonAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).polygon_attribute;
+    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId).polygon;
   }
 
   function modelSurfacesPolygonAttributeStoredConfig(modelId, surfaceId, name) {
     const { storedConfigs } = modelSurfacesPolygonAttribute(modelId, surfaceId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelSurfacesPolygonAttributeStoredConfig(modelId, [surfaceId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelSurfacesPolygonStyle(modelId, surfaceIds, values) {
-    return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      polygon_attribute: values,
+    return modelSurfacesCommonStyle.mutateModelSurfacesColoring(modelId, surfaceIds, {
+      polygon: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelSurfacesPolygonAttribute() {
 
   async function setModelSurfacesPolygonAttributeName(modelId, surfaceIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-
-    const updates = { name };
-    const polygon = modelSurfacesPolygonAttribute(modelId, surfaceIds[0]);
-    if (!(name in polygon.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, updates),
+        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, { name }),
       },
     );
   }

package/internal/stores/data_style/model/surfaces/vertex.js

@@ -16,24 +16,24 @@ export function useModelSurfacesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesVertexAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).vertex_attribute;
+    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId).vertex;
   }
 
   function modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name) {
     const { storedConfigs } = modelSurfacesVertexAttribute(modelId, surfaceId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelSurfacesVertexAttributeStoredConfig(modelId, [surfaceId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelSurfacesVertexStyle(modelId, surfaceIds, values) {
-    return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      vertex_attribute: values,
+    return modelSurfacesCommonStyle.mutateModelSurfacesColoring(modelId, surfaceIds, {
+      vertex: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelSurfacesVertexAttribute() {
 
   async function setModelSurfacesVertexAttributeName(modelId, surfaceIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-
-    const updates = { name };
-    const vertex = modelSurfacesVertexAttribute(modelId, surfaceIds[0]);
-    if (!(name in vertex.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, updates),
+        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, { name }),
       },
     );
   }