@geode/opengeodeweb-front 10.34.0-rc.8 → 10.34.0

package/internal/stores/data_style/mesh/edges/edge.ts

@@ -3,7 +3,6 @@ import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // Local imports
-import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -50,14 +49,33 @@ function isMeshEdgesEdgeAttributeValid({
 }
 
 // oxlint-disable-next-line max-lines-per-function
-function useMeshEdgesEdgeAttributeStyle() {
+function useMeshEdgesEdgeAttributeStyle(): {
+  meshEdgesEdgeAttributeName: (id: string) => string | undefined;
+  meshEdgesEdgeAttributeItem: (id: string) => number;
+  meshEdgesEdgeAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshEdgesEdgeAttributeColorMap: (id: string) => string | undefined;
+  meshEdgesEdgeAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshEdgesEdgeAttribute: (id: string, input: AttributeInput) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshEdgesEdgeAttributeColorMap: (id: string, colorMap: string | undefined) => Promise<unknown>;
+  meshEdgesEdgeAttributeNoDataColor: (id: string) => unknown;
+  setMeshEdgesEdgeAttributeNoDataColor: (id: string, no_data_color: unknown) => Promise<unknown>;
+} {
   const viewerStore = useViewerStore();
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
-  function meshEdgesColoring(id: string): StyleValues {
-    return meshEdgesCommonStyle.meshEdgesStyle(id).coloring as StyleValues;
-  }
   function meshEdgesEdgeAttribute(id: string): AttributeState {
-    return meshEdgesColoring(id).edge as AttributeState;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.edge shape is defined by the data style schema.
+    return meshEdgesCommonStyle.meshEdgesColoring(id).edge as AttributeState;
   }
   function meshEdgesEdgeAttributeStoredConfig(
     id: string,
@@ -65,14 +83,10 @@ function useMeshEdgesEdgeAttributeStyle() {
     item: number | undefined,
   ): AttributeStoredConfig {
     const { storedConfigs } = meshEdgesEdgeAttribute(id);
-    if (
-      storedConfigs &&
-      name !== undefined &&
-      name in storedConfigs &&
-      item !== undefined &&
-      item in storedConfigs[name]!
-    ) {
-      return storedConfigs[name]![item]!;
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
     }
     return {
       minimum: undefined,
@@ -81,35 +95,41 @@ function useMeshEdgesEdgeAttributeStyle() {
       no_data_color: DEFAULT_NO_DATA_COLOR,
     };
   }
-  function mutateMeshEdgesEdgeStyle(id: string, values: Record<string, unknown>) {
-    return meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+  async function mutateMeshEdgesEdgeStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
       coloring: {
         edge: values,
       },
     });
+    return result;
   }
-  function setMeshEdgesEdgeAttributeStoredConfig(
+  async function setMeshEdgesEdgeAttributeStoredConfig(
     id: string,
     name: string | undefined,
     item: number | undefined,
     config: Partial<AttributeStoredConfig>,
-  ) {
-    return mutateMeshEdgesEdgeStyle(id, {
+  ): Promise<string> {
+    const result = await mutateMeshEdgesEdgeStyle(id, {
       storedConfigs: {
-        [name as string]: {
+        [name ?? ""]: {
           lastItem: item,
-          [item as number]: config,
+          [item ?? 0]: config,
         },
       },
     });
+    return result;
   }
   function meshEdgesEdgeAttributeName(id: string): string | undefined {
     return meshEdgesEdgeAttribute(id).name;
   }
   function meshEdgesEdgeAttributeLastItem(id: string, name: string | undefined): number {
     const { storedConfigs } = meshEdgesEdgeAttribute(id);
-    if (storedConfigs && name !== undefined && name in storedConfigs) {
-      return storedConfigs[name]!.lastItem;
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
     }
     return 0;
   }
@@ -117,7 +137,7 @@ function useMeshEdgesEdgeAttributeStyle() {
     const { item, name } = meshEdgesEdgeAttribute(id);
     return item ?? meshEdgesEdgeAttributeLastItem(id, name);
   }
-  function setMeshEdgesEdgeAttribute(
+  async function setMeshEdgesEdgeAttribute(
     id: string,
     {
       name,
@@ -127,18 +147,18 @@ function useMeshEdgesEdgeAttributeStyle() {
       colorMap,
       no_data_color = DEFAULT_NO_DATA_COLOR,
     }: AttributeInput,
-  ) {
-    mutateMeshEdgesEdgeStyle(id, {
+  ): Promise<unknown> {
+    await mutateMeshEdgesEdgeStyle(id, {
       name,
       item,
     });
-    setMeshEdgesEdgeAttributeStoredConfig(id, name, item, {
+    await setMeshEdgesEdgeAttributeStoredConfig(id, name, item, {
       minimum,
       maximum,
       colorMap,
       no_data_color,
     });
-    const points = getRGBPointsFromPreset(colorMap as string);
+    const points = getRGBPointsFromPreset(colorMap ?? "");
     const schema = meshEdgesEdgeAttributeSchemas.attribute;
     const params = {
       id,
@@ -154,7 +174,7 @@ function useMeshEdgesEdgeAttributeStyle() {
       params,
     });
   }
-  function applyEdgeAttribute(id: string) {
+  async function applyEdgeAttribute(id: string): Promise<unknown> {
     const name = meshEdgesEdgeAttributeName(id);
     const item = meshEdgesEdgeAttributeItem(id);
     const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
@@ -167,19 +187,21 @@ function useMeshEdgesEdgeAttributeStyle() {
       no_data_color: storedConfig.no_data_color,
     };
     if (isMeshEdgesEdgeAttributeValid(attribute)) {
-      return setMeshEdgesEdgeAttribute(id, attribute);
+      const result = await setMeshEdgesEdgeAttribute(id, attribute);
+      return result;
     }
+    return undefined;
   }
-  function setMeshEdgesEdgeAttributeName(id: string, name: string) {
+  async function setMeshEdgesEdgeAttributeName(id: string, name: string): Promise<unknown> {
     const item = meshEdgesEdgeAttributeLastItem(id, name);
-    mutateMeshEdgesEdgeStyle(id, {
+    await mutateMeshEdgesEdgeStyle(id, {
       name,
       item,
     });
     return applyEdgeAttribute(id);
   }
-  function setMeshEdgesEdgeAttributeItem(id: string, item: number) {
-    mutateMeshEdgesEdgeStyle(id, {
+  async function setMeshEdgesEdgeAttributeItem(id: string, item: number): Promise<unknown> {
+    await mutateMeshEdgesEdgeStyle(id, {
       item,
     });
     return applyEdgeAttribute(id);
@@ -190,10 +212,14 @@ function useMeshEdgesEdgeAttributeStyle() {
     const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
     return [storedConfig.minimum, storedConfig.maximum];
   }
-  function setMeshEdgesEdgeAttributeRange(id: string, minimum: number, maximum: number) {
+  async function setMeshEdgesEdgeAttributeRange(
+    id: string,
+    minimum: number,
+    maximum: number,
+  ): Promise<unknown> {
     const name = meshEdgesEdgeAttributeName(id);
     const item = meshEdgesEdgeAttributeItem(id);
-    setMeshEdgesEdgeAttributeStoredConfig(id, name, item, {
+    await setMeshEdgesEdgeAttributeStoredConfig(id, name, item, {
       minimum,
       maximum,
     });
@@ -205,10 +231,13 @@ function useMeshEdgesEdgeAttributeStyle() {
     const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
     return storedConfig.colorMap;
   }
-  function setMeshEdgesEdgeAttributeColorMap(id: string, colorMap: string | undefined) {
+  async function setMeshEdgesEdgeAttributeColorMap(
+    id: string,
+    colorMap: string | undefined,
+  ): Promise<unknown> {
     const name = meshEdgesEdgeAttributeName(id);
     const item = meshEdgesEdgeAttributeItem(id);
-    setMeshEdgesEdgeAttributeStoredConfig(id, name, item, {
+    await setMeshEdgesEdgeAttributeStoredConfig(id, name, item, {
       colorMap,
     });
     return applyEdgeAttribute(id);
@@ -219,7 +248,10 @@ function useMeshEdgesEdgeAttributeStyle() {
     const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);
     return storedConfig.no_data_color;
   }
-  async function setMeshEdgesEdgeAttributeNoDataColor(id: string, no_data_color: unknown) {
+  async function setMeshEdgesEdgeAttributeNoDataColor(
+    id: string,
+    no_data_color: unknown,
+  ): Promise<unknown> {
     const name = meshEdgesEdgeAttributeName(id);
     const item = meshEdgesEdgeAttributeItem(id);
     const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name, item);

package/internal/stores/data_style/mesh/edges/index.ts

@@ -3,6 +3,7 @@
 // Local imports
 import { isMeshEdgesEdgeAttributeValid, useMeshEdgesEdgeAttributeStyle } from "./edge";
 import { isMeshEdgesVertexAttributeValid, useMeshEdgesVertexAttributeStyle } from "./vertex";
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
 import { useMeshEdgesColorStyle } from "./color";
 import { useMeshEdgesCommonStyle } from "./common";
 import { useMeshEdgesVisibilityStyle } from "./visibility";
@@ -10,67 +11,141 @@ import { useMeshEdgesWidthStyle } from "./width";
 
 // Local constants
 
-export function useMeshEdgesStyle() {
+interface MeshEdgesActiveColoringDeps {
+  readonly commonStyle: ReturnType<typeof useMeshEdgesCommonStyle>;
+  readonly colorStyle: ReturnType<typeof useMeshEdgesColorStyle>;
+  readonly vertexAttributeStyle: ReturnType<typeof useMeshEdgesVertexAttributeStyle>;
+  readonly edgeAttributeStyle: ReturnType<typeof useMeshEdgesEdgeAttributeStyle>;
+}
+
+function handleMeshEdgesVertexColoring(
+  id: string,
+  vertexAttributeStyle: ReturnType<typeof useMeshEdgesVertexAttributeStyle>,
+): Promise<unknown> | undefined {
+  const name = vertexAttributeStyle.meshEdgesVertexAttributeName(id);
+  const item = vertexAttributeStyle.meshEdgesVertexAttributeItem(id);
+  const [minimum, maximum] = vertexAttributeStyle.meshEdgesVertexAttributeRange(id);
+  const colorMap = vertexAttributeStyle.meshEdgesVertexAttributeColorMap(id);
+  const vertex_attribute = { name, item, minimum, maximum, colorMap };
+  if (!isMeshEdgesVertexAttributeValid(vertex_attribute)) {
+    return undefined;
+  }
+  return vertexAttributeStyle.setMeshEdgesVertexAttribute(id, vertex_attribute);
+}
+
+function handleMeshEdgesEdgeColoring(
+  id: string,
+  edgeAttributeStyle: ReturnType<typeof useMeshEdgesEdgeAttributeStyle>,
+): Promise<unknown> | undefined {
+  const name = edgeAttributeStyle.meshEdgesEdgeAttributeName(id);
+  const item = edgeAttributeStyle.meshEdgesEdgeAttributeItem(id);
+  const [minimum, maximum] = edgeAttributeStyle.meshEdgesEdgeAttributeRange(id);
+  const colorMap = edgeAttributeStyle.meshEdgesEdgeAttributeColorMap(id);
+  const edge_attribute = { name, item, minimum, maximum, colorMap };
+  if (!isMeshEdgesEdgeAttributeValid(edge_attribute)) {
+    return undefined;
+  }
+  return edgeAttributeStyle.setMeshEdgesEdgeAttribute(id, edge_attribute);
+}
+
+async function setMeshEdgesActiveColoring(
+  id: string,
+  type: string | undefined,
+  deps: MeshEdgesActiveColoringDeps,
+): Promise<unknown> {
+  await deps.commonStyle.mutateMeshEdgesStyle(id, {
+    coloring: { active: type },
+  });
+  if (type === "constant") {
+    const result = await deps.colorStyle.setMeshEdgesColor(id, deps.colorStyle.meshEdgesColor(id));
+    return result;
+  }
+  if (type === "vertex") {
+    const result = await handleMeshEdgesVertexColoring(id, deps.vertexAttributeStyle);
+    return result;
+  }
+  if (type === "edge") {
+    const result = await handleMeshEdgesEdgeColoring(id, deps.edgeAttributeStyle);
+    return result;
+  }
+  throw new Error(`Unknown mesh edges coloring type: ${type}`);
+}
+
+async function applyMeshEdgesStyle(
+  id: string,
+  visibilityStyle: ReturnType<typeof useMeshEdgesVisibilityStyle>,
+  widthStyle: ReturnType<typeof useMeshEdgesWidthStyle>,
+  activeColoringType: string | undefined,
+  deps: MeshEdgesActiveColoringDeps,
+): Promise<unknown[]> {
+  const result = await Promise.all([
+    visibilityStyle.setMeshEdgesVisibility(id, visibilityStyle.meshEdgesVisibility(id)),
+    widthStyle.setMeshEdgesWidth(id, widthStyle.meshEdgesWidth(id)),
+    setMeshEdgesActiveColoring(id, activeColoringType, deps),
+  ]);
+  return result;
+}
+
+type UseMeshEdgesStyleReturn = ReturnType<typeof useMeshEdgesCommonStyle> & {
+  meshEdgesColoring: (id: string) => StyleValues;
+  meshEdgesActiveColoring: (id: string) => string | undefined;
+  setMeshEdgesActiveColoring: (id: string, type: string | undefined) => Promise<unknown>;
+  applyMeshEdgesStyle: (id: string) => Promise<unknown[]>;
+} & ReturnType<typeof useMeshEdgesVisibilityStyle> &
+  ReturnType<typeof useMeshEdgesColorStyle> &
+  ReturnType<typeof useMeshEdgesWidthStyle> &
+  ReturnType<typeof useMeshEdgesVertexAttributeStyle> &
+  ReturnType<typeof useMeshEdgesEdgeAttributeStyle>;
+
+export function useMeshEdgesStyle(): UseMeshEdgesStyleReturn {
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
   const meshEdgesVisibility = useMeshEdgesVisibilityStyle();
   const meshEdgesColorStyle = useMeshEdgesColorStyle();
   const meshEdgesWidthStyle = useMeshEdgesWidthStyle();
   const meshEdgesVertexAttributeStyle = useMeshEdgesVertexAttributeStyle();
   const meshEdgesEdgeAttributeStyle = useMeshEdgesEdgeAttributeStyle();
-  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
 
-  function meshEdgesColoring(id: string) {
+  const activeColoringDeps: MeshEdgesActiveColoringDeps = {
+    commonStyle: meshEdgesCommonStyle,
+    colorStyle: meshEdgesColorStyle,
+    vertexAttributeStyle: meshEdgesVertexAttributeStyle,
+    edgeAttributeStyle: meshEdgesEdgeAttributeStyle,
+  };
+
+  function meshEdgesColoring(id: string): StyleValues {
     return meshEdgesCommonStyle.meshEdgesColoring(id);
   }
 
   function meshEdgesActiveColoring(id: string): string | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.active is defined as string in the data style schema.
     return meshEdgesColoring(id).active as string | undefined;
   }
 
-  async function setMeshEdgesActiveColoring(id: string, type: string | undefined) {
-    await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
-      coloring: { active: type },
-    });
-    if (type === "constant") {
-      return meshEdgesColorStyle.setMeshEdgesColor(id, meshEdgesColorStyle.meshEdgesColor(id));
-    }
-    if (type === "vertex") {
-      const name = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeName(id);
-      const item = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeItem(id);
-      const [minimum, maximum] = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeRange(id);
-      const colorMap = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeColorMap(id);
-      const vertex_attribute = { name, item, minimum, maximum, colorMap };
-      if (!isMeshEdgesVertexAttributeValid(vertex_attribute)) {
-        return;
-      }
-      return meshEdgesVertexAttributeStyle.setMeshEdgesVertexAttribute(id, vertex_attribute);
-    }
-    if (type === "edge") {
-      const name = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeName(id);
-      const item = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeItem(id);
-      const [minimum, maximum] = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeRange(id);
-      const colorMap = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeColorMap(id);
-      const edge_attribute = { name, item, minimum, maximum, colorMap };
-      if (!isMeshEdgesEdgeAttributeValid(edge_attribute)) {
-        return;
-      }
-      return meshEdgesEdgeAttributeStyle.setMeshEdgesEdgeAttribute(id, edge_attribute);
-    }
-    throw new Error(`Unknown mesh edges coloring type: ${type}`);
+  async function boundSetMeshEdgesActiveColoring(
+    id: string,
+    type: string | undefined,
+  ): Promise<unknown> {
+    const result = await setMeshEdgesActiveColoring(id, type, activeColoringDeps);
+    return result;
   }
 
-  function applyMeshEdgesStyle(id: string) {
-    return Promise.all([
-      meshEdgesVisibility.setMeshEdgesVisibility(id, meshEdgesVisibility.meshEdgesVisibility(id)),
-      meshEdgesWidthStyle.setMeshEdgesWidth(id, meshEdgesWidthStyle.meshEdgesWidth(id)),
-      setMeshEdgesActiveColoring(id, meshEdgesActiveColoring(id)),
-    ]);
+  async function boundApplyMeshEdgesStyle(id: string): Promise<unknown[]> {
+    const result = await applyMeshEdgesStyle(
+      id,
+      meshEdgesVisibility,
+      meshEdgesWidthStyle,
+      meshEdgesActiveColoring(id),
+      activeColoringDeps,
+    );
+    return result;
   }
 
   return {
-    meshEdgesActiveColoring,
-    setMeshEdgesActiveColoring,
-    applyMeshEdgesStyle,
     ...meshEdgesCommonStyle,
+    meshEdgesColoring,
+    meshEdgesActiveColoring,
+    setMeshEdgesActiveColoring: boundSetMeshEdgesActiveColoring,
+    applyMeshEdgesStyle: boundApplyMeshEdgesStyle,
     ...meshEdgesVisibility,
     ...meshEdgesColorStyle,
     ...meshEdgesWidthStyle,

package/internal/stores/data_style/mesh/edges/vertex.ts

@@ -3,7 +3,6 @@ import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // Local imports
-import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
 import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -50,15 +49,39 @@ function isMeshEdgesVertexAttributeValid({
   );
 }
 
+interface UseMeshEdgesVertexAttributeStyleReturn {
+  meshEdgesVertexAttributeName: (id: string) => string | undefined;
+  meshEdgesVertexAttributeItem: (id: string) => number;
+  meshEdgesVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshEdgesVertexAttributeColorMap: (id: string) => string | undefined;
+  meshEdgesVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshEdgesVertexAttribute: (id: string, input: AttributeInput) => Promise<unknown>;
+  setMeshEdgesVertexAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshEdgesVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshEdgesVertexAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshEdgesVertexAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshEdgesVertexAttributeNoDataColor: (id: string) => unknown;
+  setMeshEdgesVertexAttributeNoDataColor: (id: string, no_data_color: unknown) => Promise<unknown>;
+}
+
 // oxlint-disable-next-line max-lines-per-function
-function useMeshEdgesVertexAttributeStyle() {
+function useMeshEdgesVertexAttributeStyle(): UseMeshEdgesVertexAttributeStyleReturn {
   const viewerStore = useViewerStore();
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
-  function meshEdgesColoring(id: string): StyleValues {
-    return meshEdgesCommonStyle.meshEdgesStyle(id).coloring as StyleValues;
-  }
   function meshEdgesVertexAttribute(id: string): AttributeState {
-    return meshEdgesColoring(id).vertex as AttributeState;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return meshEdgesCommonStyle.meshEdgesColoring(id).vertex as AttributeState;
   }
   function meshEdgesVertexAttributeStoredConfig(
     id: string,
@@ -66,14 +89,10 @@ function useMeshEdgesVertexAttributeStyle() {
     item: number | undefined,
   ): AttributeStoredConfig {
     const { storedConfigs } = meshEdgesVertexAttribute(id);
-    if (
-      storedConfigs &&
-      name !== undefined &&
-      name in storedConfigs &&
-      item !== undefined &&
-      item in storedConfigs[name]!
-    ) {
-      return storedConfigs[name]![item]!;
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
     }
     return {
       minimum: undefined,
@@ -82,35 +101,41 @@ function useMeshEdgesVertexAttributeStyle() {
       no_data_color: DEFAULT_NO_DATA_COLOR,
     };
   }
-  function mutateMeshEdgesVertexStyle(id: string, values: Record<string, unknown>) {
-    return meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+  async function mutateMeshEdgesVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
       coloring: {
         vertex: values,
       },
     });
+    return result;
   }
-  function setMeshEdgesVertexAttributeStoredConfig(
+  async function setMeshEdgesVertexAttributeStoredConfig(
     id: string,
     name: string | undefined,
     item: number | undefined,
     config: Partial<AttributeStoredConfig>,
-  ) {
-    return mutateMeshEdgesVertexStyle(id, {
+  ): Promise<string> {
+    const result = await mutateMeshEdgesVertexStyle(id, {
       storedConfigs: {
-        [name as string]: {
+        [name ?? ""]: {
           lastItem: item,
-          [item as number]: config,
+          [item ?? 0]: config,
         },
       },
     });
+    return result;
   }
   function meshEdgesVertexAttributeName(id: string): string | undefined {
     return meshEdgesVertexAttribute(id).name;
   }
   function meshEdgesVertexAttributeLastItem(id: string, name: string | undefined): number {
     const { storedConfigs } = meshEdgesVertexAttribute(id);
-    if (storedConfigs && name !== undefined && name in storedConfigs) {
-      return storedConfigs[name]!.lastItem;
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
     }
     return 0;
   }
@@ -118,7 +143,7 @@ function useMeshEdgesVertexAttributeStyle() {
     const { item, name } = meshEdgesVertexAttribute(id);
     return item ?? meshEdgesVertexAttributeLastItem(id, name);
   }
-  function setMeshEdgesVertexAttribute(
+  async function setMeshEdgesVertexAttribute(
     id: string,
     {
       name,
@@ -128,18 +153,18 @@ function useMeshEdgesVertexAttributeStyle() {
       colorMap,
       no_data_color = DEFAULT_NO_DATA_COLOR,
     }: AttributeInput,
-  ) {
-    mutateMeshEdgesVertexStyle(id, {
+  ): Promise<unknown> {
+    await mutateMeshEdgesVertexStyle(id, {
       name,
       item,
     });
-    setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
+    await setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
       minimum,
       maximum,
       colorMap,
       no_data_color,
     });
-    const points = getRGBPointsFromPreset(colorMap as string);
+    const points = getRGBPointsFromPreset(colorMap ?? "");
     const schema = meshEdgesVertexAttributeSchemas.attribute;
     const params = {
       id,
@@ -155,7 +180,7 @@ function useMeshEdgesVertexAttributeStyle() {
       params,
     });
   }
-  function applyVertexAttribute(id: string) {
+  async function applyVertexAttribute(id: string): Promise<unknown> {
     const name = meshEdgesVertexAttributeName(id);
     const item = meshEdgesVertexAttributeItem(id);
     const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
@@ -168,19 +193,21 @@ function useMeshEdgesVertexAttributeStyle() {
       no_data_color: storedConfig.no_data_color,
     };
     if (isMeshEdgesVertexAttributeValid(attribute)) {
-      return setMeshEdgesVertexAttribute(id, attribute);
+      const result = await setMeshEdgesVertexAttribute(id, attribute);
+      return result;
     }
+    return undefined;
   }
-  function setMeshEdgesVertexAttributeName(id: string, name: string) {
+  async function setMeshEdgesVertexAttributeName(id: string, name: string): Promise<unknown> {
     const item = meshEdgesVertexAttributeLastItem(id, name);
-    mutateMeshEdgesVertexStyle(id, {
+    await mutateMeshEdgesVertexStyle(id, {
       name,
       item,
     });
     return applyVertexAttribute(id);
   }
-  function setMeshEdgesVertexAttributeItem(id: string, item: number) {
-    mutateMeshEdgesVertexStyle(id, {
+  async function setMeshEdgesVertexAttributeItem(id: string, item: number): Promise<unknown> {
+    await mutateMeshEdgesVertexStyle(id, {
       item,
     });
     return applyVertexAttribute(id);
@@ -191,10 +218,14 @@ function useMeshEdgesVertexAttributeStyle() {
     const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
     return [storedConfig.minimum, storedConfig.maximum];
   }
-  function setMeshEdgesVertexAttributeRange(id: string, minimum: number, maximum: number) {
+  async function setMeshEdgesVertexAttributeRange(
+    id: string,
+    minimum: number,
+    maximum: number,
+  ): Promise<unknown> {
     const name = meshEdgesVertexAttributeName(id);
     const item = meshEdgesVertexAttributeItem(id);
-    setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
+    await setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
       minimum,
       maximum,
     });
@@ -206,10 +237,13 @@ function useMeshEdgesVertexAttributeStyle() {
     const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
     return storedConfig.colorMap;
   }
-  function setMeshEdgesVertexAttributeColorMap(id: string, colorMap: string | undefined) {
+  async function setMeshEdgesVertexAttributeColorMap(
+    id: string,
+    colorMap: string | undefined,
+  ): Promise<unknown> {
     const name = meshEdgesVertexAttributeName(id);
     const item = meshEdgesVertexAttributeItem(id);
-    setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
+    await setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
       colorMap,
     });
     return applyVertexAttribute(id);
@@ -220,7 +254,10 @@ function useMeshEdgesVertexAttributeStyle() {
     const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
     return storedConfig.no_data_color;
   }
-  async function setMeshEdgesVertexAttributeNoDataColor(id: string, no_data_color: unknown) {
+  async function setMeshEdgesVertexAttributeNoDataColor(
+    id: string,
+    no_data_color: unknown,
+  ): Promise<unknown> {
     const name = meshEdgesVertexAttributeName(id);
     const item = meshEdgesVertexAttributeItem(id);
     const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);