@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

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

@@ -0,0 +1,155 @@
+// Third party imports
+
+// 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";
+import { useMeshEdgesWidthStyle } from "./width";
+
+// Local constants
+
+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 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 boundSetMeshEdgesActiveColoring(
+    id: string,
+    type: string | undefined,
+  ): Promise<unknown> {
+    const result = await setMeshEdgesActiveColoring(id, type, activeColoringDeps);
+    return result;
+  }
+
+  async function boundApplyMeshEdgesStyle(id: string): Promise<unknown[]> {
+    const result = await applyMeshEdgesStyle(
+      id,
+      meshEdgesVisibility,
+      meshEdgesWidthStyle,
+      meshEdgesActiveColoring(id),
+      activeColoringDeps,
+    );
+    return result;
+  }
+
+  return {
+    ...meshEdgesCommonStyle,
+    meshEdgesColoring,
+    meshEdgesActiveColoring,
+    setMeshEdgesActiveColoring: boundSetMeshEdgesActiveColoring,
+    applyMeshEdgesStyle: boundApplyMeshEdgesStyle,
+    ...meshEdgesVisibility,
+    ...meshEdgesColorStyle,
+    ...meshEdgesWidthStyle,
+    ...meshEdgesVertexAttributeStyle,
+    ...meshEdgesEdgeAttributeStyle,
+  };
+}

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

@@ -0,0 +1,285 @@
+import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useMeshEdgesCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const meshEdgesVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.edges.attribute.vertex;
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: unknown;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: unknown;
+}
+
+function isMeshEdgesVertexAttributeValid({
+  name,
+  item,
+  minimum,
+  maximum,
+  colorMap,
+}: AttributeInput): boolean {
+  return (
+    name !== undefined &&
+    item !== undefined &&
+    minimum !== undefined &&
+    maximum !== undefined &&
+    colorMap !== undefined
+  );
+}
+
+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(): UseMeshEdgesVertexAttributeStyleReturn {
+  const viewerStore = useViewerStore();
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
+  function meshEdgesVertexAttribute(id: string): 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,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshEdgesVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    const itemConfig = item === undefined ? undefined : nameConfig?.[item];
+    if (itemConfig !== undefined) {
+      return itemConfig;
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
+    };
+  }
+  async function mutateMeshEdgesVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshEdgesVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshEdgesVertexStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [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);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshEdgesVertexAttributeItem(id: string): number {
+    const { item, name } = meshEdgesVertexAttribute(id);
+    return item ?? meshEdgesVertexAttributeLastItem(id, name);
+  }
+  async function setMeshEdgesVertexAttribute(
+    id: string,
+    {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color = DEFAULT_NO_DATA_COLOR,
+    }: AttributeInput,
+  ): Promise<unknown> {
+    await mutateMeshEdgesVertexStyle(id, {
+      name,
+      item,
+    });
+    await setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    });
+    const points = getRGBPointsFromPreset(colorMap ?? "");
+    const schema = meshEdgesVertexAttributeSchemas.attribute;
+    const params = {
+      id,
+      name,
+      item,
+      points,
+      minimum,
+      maximum,
+      no_data_color,
+    };
+    return viewerStore.request({
+      schema,
+      params,
+    });
+  }
+  async function applyVertexAttribute(id: string): Promise<unknown> {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
+    const attribute = {
+      name,
+      item,
+      minimum: storedConfig.minimum,
+      maximum: storedConfig.maximum,
+      colorMap: storedConfig.colorMap,
+      no_data_color: storedConfig.no_data_color,
+    };
+    if (isMeshEdgesVertexAttributeValid(attribute)) {
+      const result = await setMeshEdgesVertexAttribute(id, attribute);
+      return result;
+    }
+    return undefined;
+  }
+  async function setMeshEdgesVertexAttributeName(id: string, name: string): Promise<unknown> {
+    const item = meshEdgesVertexAttributeLastItem(id, name);
+    await mutateMeshEdgesVertexStyle(id, {
+      name,
+      item,
+    });
+    return applyVertexAttribute(id);
+  }
+  async function setMeshEdgesVertexAttributeItem(id: string, item: number): Promise<unknown> {
+    await mutateMeshEdgesVertexStyle(id, {
+      item,
+    });
+    return applyVertexAttribute(id);
+  }
+  function meshEdgesVertexAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  async function setMeshEdgesVertexAttributeRange(
+    id: string,
+    minimum: number,
+    maximum: number,
+  ): Promise<unknown> {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    await setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
+      minimum,
+      maximum,
+    });
+    return applyVertexAttribute(id);
+  }
+  function meshEdgesVertexAttributeColorMap(id: string): string | undefined {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  async function setMeshEdgesVertexAttributeColorMap(
+    id: string,
+    colorMap: string | undefined,
+  ): Promise<unknown> {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    await setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
+      colorMap,
+    });
+    return applyVertexAttribute(id);
+  }
+  function meshEdgesVertexAttributeNoDataColor(id: string): unknown {
+    const name = meshEdgesVertexAttributeName(id);
+    const item = meshEdgesVertexAttributeItem(id);
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  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);
+    await setMeshEdgesVertexAttributeStoredConfig(id, name, item, {
+      ...storedConfig,
+      no_data_color,
+    });
+    return applyVertexAttribute(id);
+  }
+  return {
+    meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeItem,
+    meshEdgesVertexAttributeRange,
+    meshEdgesVertexAttributeColorMap,
+    meshEdgesVertexAttributeStoredConfig,
+    setMeshEdgesVertexAttribute,
+    setMeshEdgesVertexAttributeName,
+    setMeshEdgesVertexAttributeItem,
+    setMeshEdgesVertexAttributeRange,
+    setMeshEdgesVertexAttributeColorMap,
+    meshEdgesVertexAttributeNoDataColor,
+    setMeshEdgesVertexAttributeNoDataColor,
+  };
+}
+export { isMeshEdgesVertexAttributeValid, useMeshEdgesVertexAttributeStyle };

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

@@ -0,0 +1,45 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+import { useMeshEdgesCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.mesh.edges.visibility;
+
+export function useMeshEdgesVisibilityStyle(): {
+  meshEdgesVisibility: (id: string) => boolean | undefined;
+  setMeshEdgesVisibility: (id: string, visibility: boolean | undefined) => Promise<unknown>;
+} {
+  const viewerStore = useViewerStore();
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
+
+  function meshEdgesVisibility(id: string): boolean | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- visibility is defined as boolean in the data style schema.
+    return meshEdgesCommonStyle.meshEdgesStyle(id).visibility as boolean | undefined;
+  }
+  async function setMeshEdgesVisibility(
+    id: string,
+    visibility: boolean | undefined,
+  ): Promise<unknown> {
+    const params = { id, visibility };
+    const result = await viewerStore.request(
+      {
+        schema,
+        params,
+      },
+      {
+        response_function: async () => {
+          const mutateResult = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, { visibility });
+          return mutateResult;
+        },
+      },
+    );
+    return result;
+  }
+
+  return {
+    meshEdgesVisibility,
+    setMeshEdgesVisibility,
+  };
+}

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

@@ -0,0 +1,42 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+import { useMeshEdgesCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.mesh.edges.width;
+
+export function useMeshEdgesWidthStyle(): {
+  meshEdgesWidth: (id: string) => number | undefined;
+  setMeshEdgesWidth: (id: string, width: number | undefined) => Promise<unknown>;
+} {
+  const viewerStore = useViewerStore();
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
+
+  function meshEdgesWidth(id: string): number | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- width is defined as number in the data style schema.
+    return meshEdgesCommonStyle.meshEdgesStyle(id).width as number | undefined;
+  }
+  async function setMeshEdgesWidth(id: string, width: number | undefined): Promise<unknown> {
+    const params = { id, width };
+    const result = await viewerStore.request(
+      {
+        schema,
+        params,
+      },
+      {
+        response_function: async () => {
+          const mutateResult = await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, { width });
+          return mutateResult;
+        },
+      },
+    );
+    return result;
+  }
+
+  return {
+    meshEdgesWidth,
+    setMeshEdgesWidth,
+  };
+}

package/internal/stores/data_style/mesh/{index.js → index.ts}

@@ -15,7 +15,18 @@ import { useMeshPolyhedraStyle } from "./polyhedra";
 // Local constants
 const meshSchemas = viewer_schemas.opengeodeweb_viewer.mesh;
 
-export function useMeshStyle() {
+// oxlint-disable-next-line max-lines-per-function
+export function useMeshStyle(): {
+  meshVisibility: (id: string) => boolean | undefined;
+  setMeshVisibility: (id: string, visibility: boolean | undefined) => Promise<unknown>;
+  meshColor: (id: string) => unknown;
+  setMeshColor: (id: string, color: unknown) => Promise<unknown>;
+  applyMeshStyle: (id: string) => Promise<unknown[]>;
+} & ReturnType<typeof useMeshPointsStyle> &
+  ReturnType<typeof useMeshEdgesStyle> &
+  ReturnType<typeof useMeshCellsStyle> &
+  ReturnType<typeof useMeshPolygonsStyle> &
+  ReturnType<typeof useMeshPolyhedraStyle> {
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
   const dataStyleState = useDataStyleState();
@@ -25,50 +36,58 @@ export function useMeshStyle() {
   const meshPolygonsStyle = useMeshPolygonsStyle();
   const meshPolyhedraStyle = useMeshPolyhedraStyle();
 
-  function meshVisibility(id) {
+  function meshVisibility(id: string): boolean | undefined {
     return dataStyleState.getStyle(id).visibility;
   }
-  function setMeshVisibility(id, visibility) {
+  async function setMeshVisibility(id: string, visibility: boolean | undefined): Promise<unknown> {
     const schema = meshSchemas.visibility;
     const params = { id, visibility };
-    return viewerStore.request(
+    const result = await viewerStore.request(
       {
         schema,
         params,
       },
       {
         response_function: async () => {
-          await hybridViewerStore.setVisibility(id, visibility);
-          return dataStyleState.mutateStyle(id, { visibility });
+          if (visibility !== undefined) {
+            hybridViewerStore.setVisibility(id, visibility);
+          }
+          const mutatedId = await dataStyleState.mutateStyle(id, { visibility });
+          return mutatedId;
         },
       },
     );
+    return result;
   }
 
-  function meshColor(id) {
+  function meshColor(id: string): unknown {
     return dataStyleState.getStyle(id).color;
   }
 
-  function setMeshColor(id, color) {
+  async function setMeshColor(id: string, color: unknown): Promise<unknown> {
     const schema = meshSchemas.color;
     const params = { id, color };
-    return viewerStore.request(
+    const result = await viewerStore.request(
       {
         schema,
         params,
       },
       {
-        response_function: () => dataStyleState.mutateStyle(id, { color }),
+        response_function: async () => {
+          const mutatedId = await dataStyleState.mutateStyle(id, { color });
+          return mutatedId;
+        },
       },
     );
+    return result;
   }
 
-  function applyMeshStyle(id) {
+  async function applyMeshStyle(id: string): Promise<unknown[]> {
     const style = dataStyleState.getStyle(id);
-    const promise_array = [];
+    const promise_array: unknown[] = [];
     for (const [key, value] of Object.entries(style)) {
       if (key === "visibility") {
-        promise_array.push(setMeshVisibility(id, value));
+        promise_array.push(setMeshVisibility(id, style.visibility));
       } else if (key === "color") {
         promise_array.push(setMeshColor(id, value));
       } else if (key === "points") {
@@ -95,7 +114,8 @@ export function useMeshStyle() {
         throw new Error(`Unknown mesh key: ${key}`);
       }
     }
-    return Promise.all(promise_array);
+    const results = await Promise.all(promise_array);
+    return results;
   }
 
   return {

package/internal/stores/data_style/mesh/points/{color.js → color.ts}

@@ -8,27 +8,33 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 // Local constants
 const schema = viewer_schemas.opengeodeweb_viewer.mesh.points.color;
 
-export function useMeshPointsColorStyle() {
+export function useMeshPointsColorStyle(): {
+  meshPointsColor: (id: string) => unknown;
+  setMeshPointsColor: (id: string, color: unknown) => Promise<unknown>;
+} {
   const viewerStore = useViewerStore();
   const meshPointsCommonStyle = useMeshPointsCommonStyle();
 
-  function meshPointsColor(id) {
+  function meshPointsColor(id: string): unknown {
     return meshPointsCommonStyle.meshPointsColoring(id).constant;
   }
-  function setMeshPointsColor(id, color) {
+  async function setMeshPointsColor(id: string, color: unknown): Promise<unknown> {
     const params = { id, color };
-    return viewerStore.request(
+    const result = await viewerStore.request(
       {
         schema,
         params,
       },
       {
-        response_function: () =>
-          meshPointsCommonStyle.mutateMeshPointsColoring(id, {
+        response_function: async () => {
+          const mutateResult = await meshPointsCommonStyle.mutateMeshPointsColoring(id, {
             constant: color,
-          }),
+          });
+          return mutateResult;
+        },
       },
     );
+    return result;
   }
 
   return {