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

package/internal/stores/data_style/mesh/points/common.ts

@@ -0,0 +1,51 @@
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+
+export function useMeshPointsCommonStyle(): {
+  meshPointsStyle: (id: string) => StyleValues;
+  meshPointsColoring: (id: string) => StyleValues;
+  mutateMeshPointsColoring: (id: string, values: StyleValues) => Promise<string>;
+  mutateMeshPointsStyle: (id: string, values: StyleValues) => Promise<string>;
+  mutateMeshPointsVisibility: (response: { id: string; visibility: boolean }) => Promise<string>;
+} {
+  const dataStyleState = useDataStyleState();
+
+  async function mutateMeshPointsStyle(id: string, values: StyleValues): Promise<string> {
+    const result = await dataStyleState.mutateStyle(id, {
+      points: values,
+    });
+    return result;
+  }
+
+  async function mutateMeshPointsVisibility(response: {
+    id: string;
+    visibility: boolean;
+  }): Promise<string> {
+    const result = await mutateMeshPointsStyle(response.id, { visibility: response.visibility });
+    return result;
+  }
+
+  function meshPointsStyle(id: string): StyleValues {
+    return dataStyleState.getStyle(id).points ?? {};
+  }
+
+  function meshPointsColoring(id: string): StyleValues {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    return meshPointsStyle(id).coloring as StyleValues;
+  }
+
+  async function mutateMeshPointsColoring(id: string, values: StyleValues): Promise<string> {
+    const result = await mutateMeshPointsStyle(id, {
+      coloring: values,
+    });
+    return result;
+  }
+
+  return {
+    meshPointsStyle,
+    meshPointsColoring,
+    mutateMeshPointsColoring,
+    mutateMeshPointsStyle,
+    mutateMeshPointsVisibility,
+  };
+}

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

@@ -0,0 +1,133 @@
+// Third party imports
+
+// Local imports
+import { isMeshPointsVertexAttributeValid, useMeshPointsVertexAttributeStyle } from "./vertex";
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
+import { useMeshPointsColorStyle } from "./color";
+import { useMeshPointsCommonStyle } from "./common";
+import { useMeshPointsSizeStyle } from "./size";
+import { useMeshPointsVisibilityStyle } from "./visibility";
+
+// Local constants
+
+interface MeshPointsActiveColoringDeps {
+  readonly commonStyle: ReturnType<typeof useMeshPointsCommonStyle>;
+  readonly colorStyle: ReturnType<typeof useMeshPointsColorStyle>;
+  readonly vertexAttributeStyle: ReturnType<typeof useMeshPointsVertexAttributeStyle>;
+}
+
+function handleMeshPointsVertexColoring(
+  id: string,
+  vertexAttributeStyle: ReturnType<typeof useMeshPointsVertexAttributeStyle>,
+): Promise<unknown> | undefined {
+  const name = vertexAttributeStyle.meshPointsVertexAttributeName(id);
+  const item = vertexAttributeStyle.meshPointsVertexAttributeItem(id);
+  const [minimum, maximum] = vertexAttributeStyle.meshPointsVertexAttributeRange(id);
+  const colorMap = vertexAttributeStyle.meshPointsVertexAttributeColorMap(id);
+  const vertex_attribute = { name, item, minimum, maximum, colorMap };
+  if (!isMeshPointsVertexAttributeValid(vertex_attribute)) {
+    return undefined;
+  }
+  return vertexAttributeStyle.setMeshPointsVertexAttribute(id, vertex_attribute);
+}
+
+async function setMeshPointsActiveColoring(
+  id: string,
+  type: string | undefined,
+  deps: MeshPointsActiveColoringDeps,
+): Promise<unknown> {
+  await deps.commonStyle.mutateMeshPointsStyle(id, {
+    coloring: { active: type },
+  });
+  if (type === "constant") {
+    const result = await deps.colorStyle.setMeshPointsColor(
+      id,
+      deps.colorStyle.meshPointsColor(id),
+    );
+    return result;
+  }
+  if (type === "vertex") {
+    const result = await handleMeshPointsVertexColoring(id, deps.vertexAttributeStyle);
+    return result;
+  }
+  throw new Error(`Unknown mesh points coloring type: ${type}`);
+}
+
+async function applyMeshPointsStyle(
+  id: string,
+  visibilityStyle: ReturnType<typeof useMeshPointsVisibilityStyle>,
+  sizeStyle: ReturnType<typeof useMeshPointsSizeStyle>,
+  activeColoringType: string | undefined,
+  deps: MeshPointsActiveColoringDeps,
+): Promise<unknown[]> {
+  const result = await Promise.all([
+    visibilityStyle.setMeshPointsVisibility(id, visibilityStyle.meshPointsVisibility(id)),
+    sizeStyle.setMeshPointsSize(id, sizeStyle.meshPointsSize(id)),
+    setMeshPointsActiveColoring(id, activeColoringType, deps),
+  ]);
+  return result;
+}
+
+type UseMeshPointsStyleReturn = ReturnType<typeof useMeshPointsCommonStyle> & {
+  meshPointsColoring: (id: string) => StyleValues;
+  meshPointsActiveColoring: (id: string) => string | undefined;
+  setMeshPointsActiveColoring: (id: string, type: string | undefined) => Promise<unknown>;
+  applyMeshPointsStyle: (id: string) => Promise<unknown[]>;
+} & ReturnType<typeof useMeshPointsVisibilityStyle> &
+  ReturnType<typeof useMeshPointsColorStyle> &
+  ReturnType<typeof useMeshPointsSizeStyle> &
+  ReturnType<typeof useMeshPointsVertexAttributeStyle>;
+
+export function useMeshPointsStyle(): UseMeshPointsStyleReturn {
+  const meshPointsCommonStyle = useMeshPointsCommonStyle();
+  const meshPointsVisibility = useMeshPointsVisibilityStyle();
+  const meshPointsColorStyle = useMeshPointsColorStyle();
+  const meshPointsSizeStyle = useMeshPointsSizeStyle();
+  const meshPointsVertexAttributeStyle = useMeshPointsVertexAttributeStyle();
+
+  const activeColoringDeps: MeshPointsActiveColoringDeps = {
+    commonStyle: meshPointsCommonStyle,
+    colorStyle: meshPointsColorStyle,
+    vertexAttributeStyle: meshPointsVertexAttributeStyle,
+  };
+
+  function meshPointsColoring(id: string): StyleValues {
+    return meshPointsCommonStyle.meshPointsColoring(id);
+  }
+
+  function meshPointsActiveColoring(id: string): string | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.active is defined as string in the data style schema.
+    return meshPointsColoring(id).active as string | undefined;
+  }
+
+  async function boundSetMeshPointsActiveColoring(
+    id: string,
+    type: string | undefined,
+  ): Promise<unknown> {
+    const result = await setMeshPointsActiveColoring(id, type, activeColoringDeps);
+    return result;
+  }
+
+  async function boundApplyMeshPointsStyle(id: string): Promise<unknown[]> {
+    const result = await applyMeshPointsStyle(
+      id,
+      meshPointsVisibility,
+      meshPointsSizeStyle,
+      meshPointsActiveColoring(id),
+      activeColoringDeps,
+    );
+    return result;
+  }
+
+  return {
+    ...meshPointsCommonStyle,
+    meshPointsColoring,
+    meshPointsActiveColoring,
+    setMeshPointsActiveColoring: boundSetMeshPointsActiveColoring,
+    applyMeshPointsStyle: boundApplyMeshPointsStyle,
+    ...meshPointsVisibility,
+    ...meshPointsColorStyle,
+    ...meshPointsSizeStyle,
+    ...meshPointsVertexAttributeStyle,
+  };
+}

package/internal/stores/data_style/mesh/points/size.ts

@@ -0,0 +1,43 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { useMeshPointsCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.mesh.points.size;
+
+export function useMeshPointsSizeStyle(): {
+  meshPointsSize: (id: string) => number | undefined;
+  setMeshPointsSize: (id: string, size: number | undefined) => Promise<unknown>;
+} {
+  const viewerStore = useViewerStore();
+  const meshPointsCommonStyle = useMeshPointsCommonStyle();
+
+  function meshPointsSize(id: string): number | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- size is defined as number in the data style schema.
+    return meshPointsCommonStyle.meshPointsStyle(id).size as number | undefined;
+  }
+  async function setMeshPointsSize(id: string, size: number | undefined): Promise<unknown> {
+    const params = { id, size };
+    const result = await viewerStore.request(
+      {
+        schema,
+        params,
+      },
+      {
+        response_function: async () => {
+          const mutateResult = await meshPointsCommonStyle.mutateMeshPointsStyle(id, { size });
+          return mutateResult;
+        },
+      },
+    );
+    return result;
+  }
+
+  return {
+    meshPointsSize,
+    setMeshPointsSize,
+  };
+}

package/internal/stores/data_style/mesh/points/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 { useMeshPointsCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const meshPointsVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.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 isMeshPointsVertexAttributeValid({
+  name,
+  item,
+  minimum,
+  maximum,
+  colorMap,
+}: AttributeInput): boolean {
+  return (
+    name !== undefined &&
+    item !== undefined &&
+    minimum !== undefined &&
+    maximum !== undefined &&
+    colorMap !== undefined
+  );
+}
+
+interface UseMeshPointsVertexAttributeStyleReturn {
+  meshPointsVertexAttributeName: (id: string) => string | undefined;
+  meshPointsVertexAttributeItem: (id: string) => number;
+  meshPointsVertexAttributeRange: (id: string) => [number | undefined, number | undefined];
+  meshPointsVertexAttributeColorMap: (id: string) => string | undefined;
+  meshPointsVertexAttributeStoredConfig: (
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setMeshPointsVertexAttribute: (id: string, input: AttributeInput) => Promise<unknown>;
+  setMeshPointsVertexAttributeName: (id: string, name: string) => Promise<unknown>;
+  setMeshPointsVertexAttributeItem: (id: string, item: number) => Promise<unknown>;
+  setMeshPointsVertexAttributeRange: (
+    id: string,
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setMeshPointsVertexAttributeColorMap: (
+    id: string,
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  meshPointsVertexAttributeNoDataColor: (id: string) => unknown;
+  setMeshPointsVertexAttributeNoDataColor: (id: string, no_data_color: unknown) => Promise<unknown>;
+}
+
+// oxlint-disable-next-line max-lines-per-function
+function useMeshPointsVertexAttributeStyle(): UseMeshPointsVertexAttributeStyleReturn {
+  const viewerStore = useViewerStore();
+  const meshPointsCommonStyle = useMeshPointsCommonStyle();
+  function meshPointsVertexAttribute(id: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return meshPointsCommonStyle.meshPointsColoring(id).vertex as AttributeState;
+  }
+  function meshPointsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = meshPointsVertexAttribute(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 mutateMeshPointsVertexStyle(
+    id: string,
+    values: Record<string, unknown>,
+  ): Promise<string> {
+    const result = await meshPointsCommonStyle.mutateMeshPointsStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+    return result;
+  }
+  async function setMeshPointsVertexAttributeStoredConfig(
+    id: string,
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<string> {
+    const result = await mutateMeshPointsVertexStyle(id, {
+      storedConfigs: {
+        [name ?? ""]: {
+          lastItem: item,
+          [item ?? 0]: config,
+        },
+      },
+    });
+    return result;
+  }
+  function meshPointsVertexAttributeName(id: string): string | undefined {
+    return meshPointsVertexAttribute(id).name;
+  }
+  function meshPointsVertexAttributeLastItem(id: string, name: string | undefined): number {
+    const { storedConfigs } = meshPointsVertexAttribute(id);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function meshPointsVertexAttributeItem(id: string): number {
+    const { item, name } = meshPointsVertexAttribute(id);
+    return item ?? meshPointsVertexAttributeLastItem(id, name);
+  }
+  async function setMeshPointsVertexAttribute(
+    id: string,
+    {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color = DEFAULT_NO_DATA_COLOR,
+    }: AttributeInput,
+  ): Promise<unknown> {
+    await mutateMeshPointsVertexStyle(id, {
+      name,
+      item,
+    });
+    await setMeshPointsVertexAttributeStoredConfig(id, name, item, {
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    });
+    const points = getRGBPointsFromPreset(colorMap ?? "");
+    const schema = meshPointsVertexAttributeSchemas.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 = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    const attribute = {
+      name,
+      item,
+      minimum: storedConfig.minimum,
+      maximum: storedConfig.maximum,
+      colorMap: storedConfig.colorMap,
+      no_data_color: storedConfig.no_data_color,
+    };
+    if (isMeshPointsVertexAttributeValid(attribute)) {
+      const result = await setMeshPointsVertexAttribute(id, attribute);
+      return result;
+    }
+    return undefined;
+  }
+  async function setMeshPointsVertexAttributeName(id: string, name: string): Promise<unknown> {
+    const item = meshPointsVertexAttributeLastItem(id, name);
+    await mutateMeshPointsVertexStyle(id, {
+      name,
+      item,
+    });
+    return applyVertexAttribute(id);
+  }
+  async function setMeshPointsVertexAttributeItem(id: string, item: number): Promise<unknown> {
+    await mutateMeshPointsVertexStyle(id, {
+      item,
+    });
+    return applyVertexAttribute(id);
+  }
+  function meshPointsVertexAttributeRange(id: string): [number | undefined, number | undefined] {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    return [storedConfig.minimum, storedConfig.maximum];
+  }
+  async function setMeshPointsVertexAttributeRange(
+    id: string,
+    minimum: number,
+    maximum: number,
+  ): Promise<unknown> {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    await setMeshPointsVertexAttributeStoredConfig(id, name, item, {
+      minimum,
+      maximum,
+    });
+    return applyVertexAttribute(id);
+  }
+  function meshPointsVertexAttributeColorMap(id: string): string | undefined {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.colorMap;
+  }
+  async function setMeshPointsVertexAttributeColorMap(
+    id: string,
+    colorMap: string | undefined,
+  ): Promise<unknown> {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    await setMeshPointsVertexAttributeStoredConfig(id, name, item, {
+      colorMap,
+    });
+    return applyVertexAttribute(id);
+  }
+  function meshPointsVertexAttributeNoDataColor(id: string): unknown {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  async function setMeshPointsVertexAttributeNoDataColor(
+    id: string,
+    no_data_color: unknown,
+  ): Promise<unknown> {
+    const name = meshPointsVertexAttributeName(id);
+    const item = meshPointsVertexAttributeItem(id);
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name, item);
+    await setMeshPointsVertexAttributeStoredConfig(id, name, item, {
+      ...storedConfig,
+      no_data_color,
+    });
+    return applyVertexAttribute(id);
+  }
+  return {
+    meshPointsVertexAttributeName,
+    meshPointsVertexAttributeItem,
+    meshPointsVertexAttributeRange,
+    meshPointsVertexAttributeColorMap,
+    meshPointsVertexAttributeStoredConfig,
+    setMeshPointsVertexAttribute,
+    setMeshPointsVertexAttributeName,
+    setMeshPointsVertexAttributeItem,
+    setMeshPointsVertexAttributeRange,
+    setMeshPointsVertexAttributeColorMap,
+    meshPointsVertexAttributeNoDataColor,
+    setMeshPointsVertexAttributeNoDataColor,
+  };
+}
+export { isMeshPointsVertexAttributeValid, useMeshPointsVertexAttributeStyle };

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

@@ -0,0 +1,49 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { useMeshPointsCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.mesh.points.visibility;
+
+export function useMeshPointsVisibilityStyle(): {
+  meshPointsVisibility: (id: string) => boolean | undefined;
+  setMeshPointsVisibility: (id: string, visibility: boolean | undefined) => Promise<unknown>;
+} {
+  const viewerStore = useViewerStore();
+  const meshPointsCommonStyle = useMeshPointsCommonStyle();
+
+  function meshPointsVisibility(id: string): boolean | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- visibility is defined as boolean in the data style schema.
+    return meshPointsCommonStyle.meshPointsStyle(id).visibility as boolean | undefined;
+  }
+  async function setMeshPointsVisibility(
+    id: string,
+    visibility: boolean | undefined,
+  ): Promise<unknown> {
+    const params = { id, visibility };
+    const result = await viewerStore.request(
+      {
+        schema,
+        params,
+      },
+      {
+        response_function: async (response: unknown) => {
+          // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the viewer schema.
+          const typedResponse = response as { id: string; visibility: boolean };
+          const mutateResult =
+            await meshPointsCommonStyle.mutateMeshPointsVisibility(typedResponse);
+          return mutateResult;
+        },
+      },
+    );
+    return result;
+  }
+
+  return {
+    meshPointsVisibility,
+    setMeshPointsVisibility,
+  };
+}

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

@@ -8,27 +8,33 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 // Local constants
 const schema = viewer_schemas.opengeodeweb_viewer.mesh.polygons.color;
 
-export function useMeshPolygonsColorStyle() {
+export function useMeshPolygonsColorStyle(): {
+  meshPolygonsColor: (id: string) => unknown;
+  setMeshPolygonsColor: (id: string, color: unknown) => Promise<unknown>;
+} {
   const viewerStore = useViewerStore();
   const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
 
-  function meshPolygonsColor(id) {
+  function meshPolygonsColor(id: string): unknown {
     return meshPolygonsCommonStyle.meshPolygonsColoring(id).constant;
   }
-  function setMeshPolygonsColor(id, color) {
+  async function setMeshPolygonsColor(id: string, color: unknown): Promise<unknown> {
     const params = { id, color };
-    return viewerStore.request(
+    const result = await viewerStore.request(
       {
         schema,
         params,
       },
       {
-        response_function: () =>
-          meshPolygonsCommonStyle.mutateMeshPolygonsColoring(id, {
+        response_function: async () => {
+          const mutateResult = await meshPolygonsCommonStyle.mutateMeshPolygonsColoring(id, {
             constant: color,
-          }),
+          });
+          return mutateResult;
+        },
       },
     );
+    return result;
   }
 
   return {

package/internal/stores/data_style/mesh/polygons/common.ts

@@ -0,0 +1,50 @@
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+
+export function useMeshPolygonsCommonStyle(): {
+  meshPolygonsStyle: (id: string) => StyleValues;
+  meshPolygonsColoring: (id: string) => StyleValues;
+  mutateMeshPolygonsStyle: (id: string, values: StyleValues) => Promise<string>;
+  mutateMeshPolygonsColoring: (id: string, values: StyleValues) => Promise<string>;
+  mutateMeshPolygonsPolygonStyle: (id: string, values: StyleValues) => Promise<string>;
+} {
+  const dataStyleState = useDataStyleState();
+
+  async function mutateMeshPolygonsStyle(id: string, values: StyleValues): Promise<string> {
+    const result = await dataStyleState.mutateStyle(id, {
+      polygons: values,
+    });
+    return result;
+  }
+
+  function meshPolygonsStyle(id: string): StyleValues {
+    return dataStyleState.getStyle(id).polygons ?? {};
+  }
+
+  function meshPolygonsColoring(id: string): StyleValues {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    return meshPolygonsStyle(id).coloring as StyleValues;
+  }
+
+  async function mutateMeshPolygonsColoring(id: string, values: StyleValues): Promise<string> {
+    const result = await mutateMeshPolygonsStyle(id, {
+      coloring: values,
+    });
+    return result;
+  }
+
+  async function mutateMeshPolygonsPolygonStyle(id: string, values: StyleValues): Promise<string> {
+    const result = await mutateMeshPolygonsColoring(id, {
+      polygon: values,
+    });
+    return result;
+  }
+
+  return {
+    meshPolygonsStyle,
+    meshPolygonsColoring,
+    mutateMeshPolygonsStyle,
+    mutateMeshPolygonsColoring,
+    mutateMeshPolygonsPolygonStyle,
+  };
+}