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

package/internal/stores/data_style/model/color.ts

@@ -1,3 +1,4 @@
+// oxlint-disable eslint/max-lines
 import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
@@ -5,7 +6,7 @@ import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 
 // The four per-component-type style composables (Surface/Line/Block/Corner) each expose a different, large set of methods (color, visibility, per-attribute-kind getters/setters...). This module only cares about looking a handful of them up dynamically by name (built into ATTRIBUTE_FUNCTIONS below), so a precise structural type for componentStyleFunctions isn't worth modelling here; `any` keeps the dynamic dispatch table honest about that.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line @typescript-eslint/no-explicit-any
 type ComponentStyleFunctions = Record<"Surface" | "Line" | "Block" | "Corner", any>;
 
 interface AttributeAccessors {
@@ -17,92 +18,163 @@ interface AttributeAccessors {
   setColorMap: (modelId: string, componentIds: string[], colorMap: string) => unknown;
 }
 
+// The signatures below describe just the per-attribute-kind methods this module reads off each dynamically-typed composable (see the `any` in ComponentStyleFunctions above). `attributeFn` narrows one such method to its known signature so every downstream read/call is a real, checked type instead of `any`.
+type AttributeNameFn = (modelId: string, componentId: string) => string | undefined;
+type SetAttributeNameFn = (modelId: string, componentIds: string[], name: string) => unknown;
+type AttributeRangeFn = (
+  modelId: string,
+  componentId: string,
+) => [number | undefined, number | undefined];
+type SetAttributeRangeFn = (
+  modelId: string,
+  componentIds: string[],
+  minimum: number,
+  maximum: number,
+) => unknown;
+type AttributeColorMapFn = (modelId: string, componentId: string) => string | undefined;
+type SetAttributeColorMapFn = (
+  modelId: string,
+  componentIds: string[],
+  colorMap: string,
+) => unknown;
+type DynamicStyleFunctions = Record<string, unknown>;
+
+// oxlint-disable-next-line no-unnecessary-type-parameters -- Signature narrows a dynamically-looked-up method to its known call signature; see comment above.
+function attributeFn<Signature>(method: unknown): Signature {
+  // oxlint-disable-next-line no-unsafe-type-assertion -- narrowing a dynamically-looked-up method to its known call signature; see comment above.
+  return method as Signature;
+}
+
 // oxlint-disable-next-line max-lines-per-function
-function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions) {
+function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions): {
+  getModelColor: (modelId: string) => unknown;
+  getModelActiveColoring: (modelId: string) => unknown;
+  getModelComponentColor: (modelId: string, componentId: string) => unknown;
+  getModelComponentEffectiveColor: (modelId: string, componentId: string, type: string) => unknown;
+  getModelComponentActiveColoring: (modelId: string, componentId: string) => unknown;
+  modelComponentTypeColor: (modelId: string, type: string) => unknown;
+  getModelComponentTypeActiveColoring: (modelId: string, type: string) => unknown;
+  setModelComponentTypeColor: (modelId: string, type: string, color: unknown) => Promise<void>;
+  setModelComponentTypeActiveColoring: (
+    modelId: string,
+    type: string,
+    activeColoring: string,
+  ) => Promise<void>;
+  setModelComponentActiveColoring: (
+    modelId: string,
+    componentId: string,
+    activeColoring: string,
+  ) => Promise<void>;
+  setModelComponentsColor: (
+    modelId: string,
+    componentIds: string[],
+    color: unknown,
+    activeColoring?: string,
+  ) => Promise<unknown[]>;
+} {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const modelCommonStyle = useModelCommonStyle();
-  const { Surface, Line, Block, Corner } = componentStyleFunctions;
+  // oxlint-disable-next-line no-unsafe-type-assertion -- componentStyleFunctions is a dynamic dispatch table typed any by design; see ComponentStyleFunctions comment above.
+  const Surface = componentStyleFunctions.Surface as DynamicStyleFunctions;
+  // oxlint-disable-next-line no-unsafe-type-assertion -- componentStyleFunctions is a dynamic dispatch table typed any by design; see ComponentStyleFunctions comment above.
+  const Line = componentStyleFunctions.Line as DynamicStyleFunctions;
+  // oxlint-disable-next-line no-unsafe-type-assertion -- componentStyleFunctions is a dynamic dispatch table typed any by design; see ComponentStyleFunctions comment above.
+  const Block = componentStyleFunctions.Block as DynamicStyleFunctions;
+  // oxlint-disable-next-line no-unsafe-type-assertion -- componentStyleFunctions is a dynamic dispatch table typed any by design; see ComponentStyleFunctions comment above.
+  const Corner = componentStyleFunctions.Corner as DynamicStyleFunctions;
   const ATTRIBUTE_FUNCTIONS: Record<string, Record<string, AttributeAccessors>> = {
     Surface: {
       vertex: {
-        getName: Surface.modelSurfacesVertexAttributeName,
-        setName: Surface.setModelSurfacesVertexAttributeName,
-        getRange: Surface.modelSurfacesVertexAttributeRange,
-        setRange: Surface.setModelSurfacesVertexAttributeRange,
-        getColorMap: Surface.modelSurfacesVertexAttributeColorMap,
-        setColorMap: Surface.setModelSurfacesVertexAttributeColorMap,
+        getName: attributeFn<AttributeNameFn>(Surface.modelSurfacesVertexAttributeName),
+        setName: attributeFn<SetAttributeNameFn>(Surface.setModelSurfacesVertexAttributeName),
+        getRange: attributeFn<AttributeRangeFn>(Surface.modelSurfacesVertexAttributeRange),
+        setRange: attributeFn<SetAttributeRangeFn>(Surface.setModelSurfacesVertexAttributeRange),
+        getColorMap: attributeFn<AttributeColorMapFn>(Surface.modelSurfacesVertexAttributeColorMap),
+        setColorMap: attributeFn<SetAttributeColorMapFn>(
+          Surface.setModelSurfacesVertexAttributeColorMap,
+        ),
       },
       polygon: {
-        getName: Surface.modelSurfacesPolygonAttributeName,
-        setName: Surface.setModelSurfacesPolygonAttributeName,
-        getRange: Surface.modelSurfacesPolygonAttributeRange,
-        setRange: Surface.setModelSurfacesPolygonAttributeRange,
-        getColorMap: Surface.modelSurfacesPolygonAttributeColorMap,
-        setColorMap: Surface.setModelSurfacesPolygonAttributeColorMap,
+        getName: attributeFn<AttributeNameFn>(Surface.modelSurfacesPolygonAttributeName),
+        setName: attributeFn<SetAttributeNameFn>(Surface.setModelSurfacesPolygonAttributeName),
+        getRange: attributeFn<AttributeRangeFn>(Surface.modelSurfacesPolygonAttributeRange),
+        setRange: attributeFn<SetAttributeRangeFn>(Surface.setModelSurfacesPolygonAttributeRange),
+        getColorMap: attributeFn<AttributeColorMapFn>(
+          Surface.modelSurfacesPolygonAttributeColorMap,
+        ),
+        setColorMap: attributeFn<SetAttributeColorMapFn>(
+          Surface.setModelSurfacesPolygonAttributeColorMap,
+        ),
       },
     },
     Line: {
       vertex: {
-        getName: Line.modelLinesVertexAttributeName,
-        setName: Line.setModelLinesVertexAttributeName,
-        getRange: Line.modelLinesVertexAttributeRange,
-        setRange: Line.setModelLinesVertexAttributeRange,
-        getColorMap: Line.modelLinesVertexAttributeColorMap,
-        setColorMap: Line.setModelLinesVertexAttributeColorMap,
+        getName: attributeFn<AttributeNameFn>(Line.modelLinesVertexAttributeName),
+        setName: attributeFn<SetAttributeNameFn>(Line.setModelLinesVertexAttributeName),
+        getRange: attributeFn<AttributeRangeFn>(Line.modelLinesVertexAttributeRange),
+        setRange: attributeFn<SetAttributeRangeFn>(Line.setModelLinesVertexAttributeRange),
+        getColorMap: attributeFn<AttributeColorMapFn>(Line.modelLinesVertexAttributeColorMap),
+        setColorMap: attributeFn<SetAttributeColorMapFn>(Line.setModelLinesVertexAttributeColorMap),
       },
       edge: {
-        getName: Line.modelLinesEdgeAttributeName,
-        setName: Line.setModelLinesEdgeAttributeName,
-        getRange: Line.modelLinesEdgeAttributeRange,
-        setRange: Line.setModelLinesEdgeAttributeRange,
-        getColorMap: Line.modelLinesEdgeAttributeColorMap,
-        setColorMap: Line.setModelLinesEdgeAttributeColorMap,
+        getName: attributeFn<AttributeNameFn>(Line.modelLinesEdgeAttributeName),
+        setName: attributeFn<SetAttributeNameFn>(Line.setModelLinesEdgeAttributeName),
+        getRange: attributeFn<AttributeRangeFn>(Line.modelLinesEdgeAttributeRange),
+        setRange: attributeFn<SetAttributeRangeFn>(Line.setModelLinesEdgeAttributeRange),
+        getColorMap: attributeFn<AttributeColorMapFn>(Line.modelLinesEdgeAttributeColorMap),
+        setColorMap: attributeFn<SetAttributeColorMapFn>(Line.setModelLinesEdgeAttributeColorMap),
       },
     },
     Block: {
       vertex: {
-        getName: Block.modelBlocksVertexAttributeName,
-        setName: Block.setModelBlocksVertexAttributeName,
-        getRange: Block.modelBlocksVertexAttributeRange,
-        setRange: Block.setModelBlocksVertexAttributeRange,
-        getColorMap: Block.modelBlocksVertexAttributeColorMap,
-        setColorMap: Block.setModelBlocksVertexAttributeColorMap,
+        getName: attributeFn<AttributeNameFn>(Block.modelBlocksVertexAttributeName),
+        setName: attributeFn<SetAttributeNameFn>(Block.setModelBlocksVertexAttributeName),
+        getRange: attributeFn<AttributeRangeFn>(Block.modelBlocksVertexAttributeRange),
+        setRange: attributeFn<SetAttributeRangeFn>(Block.setModelBlocksVertexAttributeRange),
+        getColorMap: attributeFn<AttributeColorMapFn>(Block.modelBlocksVertexAttributeColorMap),
+        setColorMap: attributeFn<SetAttributeColorMapFn>(
+          Block.setModelBlocksVertexAttributeColorMap,
+        ),
       },
       polyhedron: {
-        getName: Block.modelBlocksPolyhedronAttributeName,
-        setName: Block.setModelBlocksPolyhedronAttributeName,
-        getRange: Block.modelBlocksPolyhedronAttributeRange,
-        setRange: Block.setModelBlocksPolyhedronAttributeRange,
-        getColorMap: Block.modelBlocksPolyhedronAttributeColorMap,
-        setColorMap: Block.setModelBlocksPolyhedronAttributeColorMap,
+        getName: attributeFn<AttributeNameFn>(Block.modelBlocksPolyhedronAttributeName),
+        setName: attributeFn<SetAttributeNameFn>(Block.setModelBlocksPolyhedronAttributeName),
+        getRange: attributeFn<AttributeRangeFn>(Block.modelBlocksPolyhedronAttributeRange),
+        setRange: attributeFn<SetAttributeRangeFn>(Block.setModelBlocksPolyhedronAttributeRange),
+        getColorMap: attributeFn<AttributeColorMapFn>(Block.modelBlocksPolyhedronAttributeColorMap),
+        setColorMap: attributeFn<SetAttributeColorMapFn>(
+          Block.setModelBlocksPolyhedronAttributeColorMap,
+        ),
       },
     },
     Corner: {
       vertex: {
-        getName: Corner.modelCornersVertexAttributeName,
-        setName: Corner.setModelCornersVertexAttributeName,
-        getRange: Corner.modelCornersVertexAttributeRange,
-        setRange: Corner.setModelCornersVertexAttributeRange,
-        getColorMap: Corner.modelCornersVertexAttributeColorMap,
-        setColorMap: Corner.setModelCornersVertexAttributeColorMap,
+        getName: attributeFn<AttributeNameFn>(Corner.modelCornersVertexAttributeName),
+        setName: attributeFn<SetAttributeNameFn>(Corner.setModelCornersVertexAttributeName),
+        getRange: attributeFn<AttributeRangeFn>(Corner.modelCornersVertexAttributeRange),
+        setRange: attributeFn<SetAttributeRangeFn>(Corner.setModelCornersVertexAttributeRange),
+        getColorMap: attributeFn<AttributeColorMapFn>(Corner.modelCornersVertexAttributeColorMap),
+        setColorMap: attributeFn<SetAttributeColorMapFn>(
+          Corner.setModelCornersVertexAttributeColorMap,
+        ),
       },
     },
   };
   function getModelComponentColor(modelId: string, componentId: string): unknown {
-    return (
-      dataStyleState.getComponentStyle(modelId, componentId).coloring as StyleValues | undefined
-    )?.constant;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    const coloring = dataStyleState.getComponentStyle(modelId, componentId).coloring as StyleValues;
+    return coloring.constant;
   }
   function modelComponentTypeColor(modelId: string, type: string): unknown {
-    return (
-      (dataStyleState.getModelComponentTypeStyle(modelId, type).coloring as StyleValues | undefined)
-        ?.constant ||
-      (
-        (dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`] as StyleValues)
-          .coloring as StyleValues
-      ).constant
-    );
+    const groupStyle = dataStyleState.getModelComponentTypeStyle(modelId, type);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    const groupColoring = groupStyle.coloring as StyleValues;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- style values are stored as loosely-typed StyleValues records; see StyleValues definition.
+    const typeStyle = dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`] as StyleValues;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    const typeColoring = typeStyle.coloring as StyleValues;
+    return groupColoring.constant ?? typeColoring.constant;
   }
   function getModelComponentEffectiveColor(
     modelId: string,
@@ -116,33 +188,33 @@ function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions) {
     return modelComponentTypeColor(modelId, type);
   }
   function getModelComponentActiveColoring(modelId: string, componentId: string): unknown {
-    return (
-      dataStyleState.getComponentStyle(modelId, componentId).coloring as StyleValues | undefined
-    )?.active;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    const coloring = dataStyleState.getComponentStyle(modelId, componentId).coloring as StyleValues;
+    return coloring.active;
   }
   function getModelComponentTypeActiveColoring(modelId: string, type: string): unknown {
-    return (
-      (dataStyleState.getModelComponentTypeStyle(modelId, type).coloring as StyleValues | undefined)
-        ?.active ||
-      (
-        (dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`] as StyleValues)
-          .coloring as StyleValues
-      ).active
-    );
+    const groupStyle = dataStyleState.getModelComponentTypeStyle(modelId, type);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    const groupColoring = groupStyle.coloring as StyleValues;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- style values are stored as loosely-typed StyleValues records; see StyleValues definition.
+    const typeStyle = dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`] as StyleValues;
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    const typeColoring = typeStyle.coloring as StyleValues;
+    return groupColoring.active ?? typeColoring.active;
   }
   async function setModelComponentsColor(
     modelId: string,
     componentIds: string[],
     color: unknown,
     activeColoring = "constant",
-  ) {
+  ): Promise<unknown[]> {
     await modelCommonStyle.mutateComponentStyles(modelId, componentIds, {
       coloring: {
         constant: color,
         active: activeColoring,
       },
     });
-    return await dispatchToComponentTypes(
+    return dispatchToComponentTypes(
       modelId,
       componentIds,
       "Color",
@@ -153,7 +225,11 @@ function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions) {
       activeColoring,
     );
   }
-  async function setModelComponentTypeColor(modelId: string, type: string, color: unknown) {
+  async function setModelComponentTypeColor(
+    modelId: string,
+    type: string,
+    color: unknown,
+  ): Promise<void> {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
       coloring: {
         constant: color,
@@ -170,7 +246,7 @@ function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions) {
     modelId: string,
     type: string,
     activeColoring: string,
-  ) {
+  ): Promise<void> {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
       coloring: {
         active: activeColoring,
@@ -189,17 +265,24 @@ function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions) {
         active: activeColoring,
       },
     });
-    const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type]![activeColoring]!;
-    const name = getName(modelId, idsForType[0]!);
-    if (name) {
+    const attributeFunctions = ATTRIBUTE_FUNCTIONS[type]?.[activeColoring];
+    if (attributeFunctions === undefined) {
+      return;
+    }
+    const { getName, setName, getRange, setRange, getColorMap, setColorMap } = attributeFunctions;
+    const [firstId] = idsForType;
+    if (firstId === undefined) {
+      return;
+    }
+    const name = getName(modelId, firstId);
+    if (name !== undefined && name !== "") {
       await setName(modelId, idsForType, name);
-      const [minimum, maximum] = getRange(modelId, idsForType[0]!);
+      const [minimum, maximum] = getRange(modelId, firstId);
       if (minimum !== undefined && maximum !== undefined) {
         await setRange(modelId, idsForType, minimum, maximum);
       }
-      const colorMap = getColorMap(modelId, idsForType[0]!);
-      if (colorMap) {
+      const colorMap = getColorMap(modelId, firstId);
+      if (colorMap !== undefined && colorMap !== "") {
         await setColorMap(modelId, idsForType, colorMap);
       }
     }
@@ -208,7 +291,7 @@ function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions) {
     modelId: string,
     componentId: string,
     activeColoring: string,
-  ) {
+  ): Promise<void> {
     await modelCommonStyle.mutateComponentStyle(modelId, componentId, {
       coloring: {
         active: activeColoring,
@@ -222,25 +305,30 @@ function useModelColorStyle(componentStyleFunctions: ComponentStyleFunctions) {
     if (type === undefined) {
       return;
     }
-    const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type]![activeColoring]!;
+    const attributeFunctions = ATTRIBUTE_FUNCTIONS[type]?.[activeColoring];
+    if (attributeFunctions === undefined) {
+      return;
+    }
+    const { getName, setName, getRange, setRange, getColorMap, setColorMap } = attributeFunctions;
     const name = getName(modelId, componentId);
-    if (name) {
+    if (name !== undefined && name !== "") {
       await setName(modelId, [componentId], name);
       const [minimum, maximum] = getRange(modelId, componentId);
       if (minimum !== undefined && maximum !== undefined) {
         await setRange(modelId, [componentId], minimum, maximum);
       }
       const colorMap = getColorMap(modelId, componentId);
-      if (colorMap) {
+      if (colorMap !== undefined && colorMap !== "") {
         await setColorMap(modelId, [componentId], colorMap);
       }
     }
   }
   function getModelColor(modelId: string): unknown {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
     return (dataStyleState.getStyle(modelId).coloring as StyleValues).constant;
   }
   function getModelActiveColoring(modelId: string): unknown {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
     return (dataStyleState.getStyle(modelId).coloring as StyleValues).active;
   }
   return {

package/internal/stores/data_style/model/common.ts

@@ -1,12 +1,10 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
+import type { Dexie, Table } from "dexie";
 import type {
   ModelComponentStyle,
   ModelComponentTypeStyle,
   StyleValues,
 } from "@ogw_internal/stores/data_style/types.js";
 import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
-import type { Dexie, Table } from "dexie";
 import { database } from "@ogw_internal/database/database";
 import merge from "lodash/merge";
 import { useDataStore } from "@ogw_front/stores/data";
@@ -24,20 +22,62 @@ interface ComponentStyleUpdate {
   values: StyleValues;
 }
 
+interface UseModelCommonStyleReturn {
+  mutateComponentStyle: (
+    id_model: string,
+    id_component: string,
+    values: StyleValues,
+  ) => Promise<unknown>;
+  mutateModelComponentTypeStyle: (
+    id_model: string,
+    type: string,
+    values: StyleValues,
+  ) => Promise<void>;
+  mutateComponentStyles: (
+    id_model: string,
+    id_components: string[],
+    values: StyleValues,
+  ) => Promise<void>;
+  bulkMutateComponentStylesPerComponent: (
+    id_model: string,
+    component_updates: ComponentStyleUpdate[],
+  ) => Promise<void>;
+  setModelTypeColor: (
+    id: string,
+    component_ids: string[],
+    color: unknown,
+    schema: JsonRpcSchema,
+    activeColoring?: string,
+    collectionId?: string,
+  ) => Promise<unknown>;
+  setModelTypeVisibility: (
+    id: string,
+    component_ids: string[],
+    visibility: boolean | undefined,
+    schema: JsonRpcSchema,
+  ) => Promise<unknown>;
+}
+
 // oxlint-disable-next-line max-lines-per-function
-export function useModelCommonStyle() {
+export function useModelCommonStyle(): UseModelCommonStyleReturn {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const dataStyleState = useDataStyleState();
   const model_component_datastyle_db =
+    // oxlint-disable-next-line no-unsafe-type-assertion -- compound-key table cast; see comment above.
     database.model_component_datastyle as unknown as ComponentTable;
   const model_component_type_datastyle_db =
+    // oxlint-disable-next-line no-unsafe-type-assertion -- compound-key table cast; see comment above.
     database.model_component_type_datastyle as unknown as ComponentTypeTable;
 
-  async function mutateComponentStyle(id_model: string, id_component: string, values: StyleValues) {
+  async function mutateComponentStyle(
+    id_model: string,
+    id_component: string,
+    values: StyleValues,
+  ): Promise<unknown> {
     dataStyleState.updateComponentStyleCache(id_model, id_component, values);
     const key: [string, string] = [id_model, id_component];
-    const entry: ModelComponentStyle = (await model_component_datastyle_db.get(key)) || {
+    const entry: ModelComponentStyle = (await model_component_datastyle_db.get(key)) ?? {
       id_model,
       id_component,
     };
@@ -49,8 +89,9 @@ export function useModelCommonStyle() {
     id_model: string,
     type: string,
     values: StyleValues,
-  ) {
+  ): Promise<void> {
     dataStyleState.updateModelComponentTypeStyleCache(id_model, type, values);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
     await (database as unknown as Dexie).transaction(
       "rw",
       model_component_type_datastyle_db,
@@ -58,7 +99,7 @@ export function useModelCommonStyle() {
         const key: [string, string] = [id_model, type];
         const entry: ModelComponentTypeStyle = (await model_component_type_datastyle_db.get(
           key,
-        )) || {
+        )) ?? {
           id_model,
           type,
         };
@@ -72,8 +113,9 @@ export function useModelCommonStyle() {
     id_model: string,
     id_components: string[],
     values: StyleValues,
-  ) {
+  ): Promise<void> {
     dataStyleState.bulkUpdateComponentStylesCache(id_model, id_components, values);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
     await (database as unknown as Dexie).transaction(
       "rw",
       model_component_datastyle_db,
@@ -84,7 +126,7 @@ export function useModelCommonStyle() {
         ]);
         const existing = await model_component_datastyle_db.bulkGet(keys);
         const updates = id_components.map((id_component, index) => {
-          const style: ModelComponentStyle = existing[index] || { id_model, id_component };
+          const style: ModelComponentStyle = existing[index] ?? { id_model, id_component };
           merge(style, values);
           return toRaw(style);
         });
@@ -97,8 +139,9 @@ export function useModelCommonStyle() {
   async function bulkMutateComponentStylesPerComponent(
     id_model: string,
     component_updates: ComponentStyleUpdate[],
-  ) {
+  ): Promise<void> {
     dataStyleState.bulkUpdateComponentStyleCache(id_model, component_updates);
+    // oxlint-disable-next-line no-unsafe-type-assertion -- the shared database proxy types every table as Dexie; see comment above.
     await (database as unknown as Dexie).transaction(
       "rw",
       model_component_datastyle_db,
@@ -109,7 +152,7 @@ export function useModelCommonStyle() {
         ]);
         const existing = await model_component_datastyle_db.bulkGet(keys);
         const updates = component_updates.map(({ id_component, values }, index) => {
-          const style: ModelComponentStyle = existing[index] || { id_model, id_component };
+          const style: ModelComponentStyle = existing[index] ?? { id_model, id_component };
           merge(style, values);
           return toRaw(style);
         });
@@ -124,20 +167,22 @@ export function useModelCommonStyle() {
     color: unknown,
     schema: JsonRpcSchema,
     activeColoring = "constant",
-  ) {
+    collectionId?: string,
+  ): Promise<unknown> {
     if (!component_ids?.length) {
-      return;
+      return undefined;
     }
 
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
     if (!viewer_ids?.length) {
-      return;
+      return undefined;
     }
 
     const params: Record<string, unknown> = {
       id,
       block_ids: viewer_ids,
       color_mode: activeColoring,
+      collection_id: collectionId,
     };
     if (activeColoring === "constant") {
       await mutateComponentStyles(id, component_ids, {
@@ -152,6 +197,7 @@ export function useModelCommonStyle() {
       { schema, params },
       {
         response_function: async (response: unknown) => {
+          // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the color-set schema.
           const colors = response as { geode_id: string; color: unknown }[] | undefined;
           if (activeColoring === "constant") {
             await mutateComponentStyles(id, component_ids, {
@@ -162,7 +208,7 @@ export function useModelCommonStyle() {
             return;
           }
 
-          if (!colors?.length) {
+          if (colors === undefined || colors.length === 0) {
             return;
           }
 
@@ -187,22 +233,25 @@ export function useModelCommonStyle() {
     component_ids: string[],
     visibility: boolean | undefined,
     schema: JsonRpcSchema,
-  ) {
+  ): Promise<unknown> {
     if (!component_ids?.length) {
-      return;
+      return undefined;
     }
 
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
     if (!viewer_ids?.length) {
-      return;
+      return undefined;
     }
     const params = { id, block_ids: viewer_ids, visibility };
-    return viewerStore.request(
+    const result = await viewerStore.request(
       { schema, params },
       {
-        response_function: () => mutateComponentStyles(id, component_ids, { visibility }),
+        response_function: async () => {
+          await mutateComponentStyles(id, component_ids, { visibility });
+        },
       },
     );
+    return result;
   }
 
   return {