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

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

@@ -0,0 +1,344 @@
+// oxlint-disable eslint/max-lines
+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 { useDataStore } from "@ogw_front/stores/data";
+import { useModelLinesCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const attributeSchema = viewer_schemas.opengeodeweb_viewer.model.lines.attribute.vertex.attribute;
+
+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 isModelLinesVertexAttributeValid({
+  name,
+  item,
+  minimum,
+  maximum,
+  colorMap,
+}: AttributeInput): boolean {
+  return (
+    name !== undefined &&
+    item !== undefined &&
+    minimum !== undefined &&
+    maximum !== undefined &&
+    colorMap !== undefined
+  );
+}
+
+interface UseModelLinesVertexAttributeReturn {
+  modelLinesVertexAttributeName: (modelId: string, lineId?: string) => string | undefined;
+  modelLinesVertexAttributeItem: (modelId: string, lineId?: string) => number;
+  modelLinesVertexAttributeRange: (
+    modelId: string,
+    lineId?: string,
+  ) => [number | undefined, number | undefined];
+  modelLinesVertexAttributeColorMap: (modelId: string, lineId?: string) => string | undefined;
+  modelLinesVertexAttributeStoredConfig: (
+    modelId: string,
+    lineId: string | undefined,
+    name: string | undefined,
+    item: number | undefined,
+  ) => AttributeStoredConfig;
+  setModelLinesVertexAttribute: (
+    modelId: string,
+    lineIds: string[],
+    input: AttributeInput,
+  ) => Promise<unknown>;
+  setModelLinesVertexAttributeName: (
+    modelId: string,
+    lineIds: string[],
+    name: string,
+  ) => Promise<unknown>;
+  setModelLinesVertexAttributeItem: (
+    modelId: string,
+    lineIds: string[],
+    item: number,
+  ) => Promise<unknown>;
+  setModelLinesVertexAttributeRange: (
+    modelId: string,
+    lineIds: string[],
+    minimum: number,
+    maximum: number,
+  ) => Promise<unknown>;
+  setModelLinesVertexAttributeColorMap: (
+    modelId: string,
+    lineIds: string[],
+    colorMap: string | undefined,
+  ) => Promise<unknown>;
+  modelLinesVertexAttributeNoDataColor: (modelId: string, lineId?: string) => unknown;
+  setModelLinesVertexAttributeNoDataColor: (
+    modelId: string,
+    lineIds: string[],
+    no_data_color: unknown,
+  ) => Promise<unknown>;
+}
+
+// oxlint-disable-next-line max-lines-per-function
+function useModelLinesVertexAttribute(): UseModelLinesVertexAttributeReturn {
+  const dataStore = useDataStore();
+  const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const viewerStore = useViewerStore();
+  function modelLinesVertexAttribute(modelId: string, lineId?: string): AttributeState {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring.vertex shape is defined by the data style schema.
+    return modelLinesCommonStyle.modelLineColoring(modelId, lineId).vertex as AttributeState;
+  }
+  function modelLinesVertexAttributeStoredConfig(
+    modelId: string,
+    lineId: string | undefined,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
+    const { storedConfigs } = modelLinesVertexAttribute(modelId, lineId);
+    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 mutateModelLinesVertexStyle(
+    modelId: string,
+    lineIds: string[],
+    values: Record<string, unknown>,
+  ): Promise<void> {
+    const tasks: Promise<void>[] = [
+      modelLinesCommonStyle.mutateModelLinesColoring(modelId, lineIds, {
+        vertex: values,
+      }),
+    ];
+    const totalLineIds = await dataStore.getLinesGeodeIds(modelId);
+    if (lineIds.length === totalLineIds.length) {
+      tasks.push(
+        modelLinesCommonStyle.mutateModelLinesTypeColoring(modelId, {
+          vertex: values,
+        }),
+      );
+    }
+    await Promise.all(tasks);
+  }
+  async function setModelLinesVertexAttributeStoredConfig(
+    modelId: string,
+    lineIds: string[],
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ): Promise<void> {
+    if (name === undefined || item === undefined) {
+      return;
+    }
+    await mutateModelLinesVertexStyle(modelId, lineIds, {
+      storedConfigs: {
+        [name]: {
+          lastItem: item,
+          [item]: config,
+        },
+      },
+    });
+  }
+  function modelLinesVertexAttributeName(modelId: string, lineId?: string): string | undefined {
+    return modelLinesVertexAttribute(modelId, lineId).name;
+  }
+  function modelLinesVertexAttributeLastItem(
+    modelId: string,
+    lineId: string | undefined,
+    name: string | undefined,
+  ): number {
+    const { storedConfigs } = modelLinesVertexAttribute(modelId, lineId);
+    const nameConfig = name === undefined ? undefined : storedConfigs?.[name];
+    if (nameConfig !== undefined) {
+      return nameConfig.lastItem;
+    }
+    return 0;
+  }
+  function modelLinesVertexAttributeItem(modelId: string, lineId?: string): number {
+    const vertexAttribute = modelLinesVertexAttribute(modelId, lineId);
+    return (
+      vertexAttribute.item ??
+      modelLinesVertexAttributeLastItem(modelId, lineId, vertexAttribute.name)
+    );
+  }
+  function modelLinesVertexAttributeRange(
+    modelId: string,
+    lineId?: string,
+  ): [number | undefined, number | undefined] {
+    const name = modelLinesVertexAttributeName(modelId, lineId);
+    const item = modelLinesVertexAttributeItem(modelId, lineId);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineId, name, item);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+  function modelLinesVertexAttributeColorMap(modelId: string, lineId?: string): string | undefined {
+    const name = modelLinesVertexAttributeName(modelId, lineId);
+    const item = modelLinesVertexAttributeItem(modelId, lineId);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineId, name, item);
+    return storedConfig.colorMap;
+  }
+  async function setModelLinesVertexAttribute(
+    modelId: string,
+    lineIds: string[],
+    {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color = DEFAULT_NO_DATA_COLOR,
+    }: AttributeInput,
+  ): Promise<unknown> {
+    await mutateModelLinesVertexStyle(modelId, lineIds, {
+      name,
+      item,
+    });
+    await setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, item, {
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color,
+    });
+    const points = getRGBPointsFromPreset(colorMap ?? "");
+    const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
+    const params = {
+      id: modelId,
+      block_ids: line_viewer_ids,
+      name,
+      item,
+      points,
+      minimum,
+      maximum,
+      no_data_color,
+    };
+    return viewerStore.request({
+      schema: attributeSchema,
+      params,
+    });
+  }
+  async function applyVertexAttribute(modelId: string, lineIds: string[]): Promise<void> {
+    const name = modelLinesVertexAttributeName(modelId, lineIds[0]);
+    const item = modelLinesVertexAttributeItem(modelId, lineIds[0]);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineIds[0], name, item);
+    const attribute: AttributeInput = {
+      name,
+      item,
+      minimum: storedConfig.minimum,
+      maximum: storedConfig.maximum,
+      colorMap: storedConfig.colorMap,
+      no_data_color: storedConfig.no_data_color,
+    };
+    if (isModelLinesVertexAttributeValid(attribute)) {
+      await setModelLinesVertexAttribute(modelId, lineIds, attribute);
+    }
+  }
+  async function setModelLinesVertexAttributeName(
+    modelId: string,
+    lineIds: string[],
+    name: string,
+  ): Promise<unknown> {
+    const item = modelLinesVertexAttributeLastItem(modelId, lineIds[0], name);
+    await mutateModelLinesVertexStyle(modelId, lineIds, {
+      name,
+      item,
+    });
+    return applyVertexAttribute(modelId, lineIds);
+  }
+  async function setModelLinesVertexAttributeItem(
+    modelId: string,
+    lineIds: string[],
+    item: number,
+  ): Promise<unknown> {
+    await mutateModelLinesVertexStyle(modelId, lineIds, {
+      item,
+    });
+    return applyVertexAttribute(modelId, lineIds);
+  }
+  async function setModelLinesVertexAttributeRange(
+    modelId: string,
+    lineIds: string[],
+    minimum: number,
+    maximum: number,
+  ): Promise<unknown> {
+    const name = modelLinesVertexAttributeName(modelId, lineIds[0]);
+    const item = modelLinesVertexAttributeItem(modelId, lineIds[0]);
+    await setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, item, {
+      minimum,
+      maximum,
+    });
+    return applyVertexAttribute(modelId, lineIds);
+  }
+  async function setModelLinesVertexAttributeColorMap(
+    modelId: string,
+    lineIds: string[],
+    colorMap: string | undefined,
+  ): Promise<unknown> {
+    const name = modelLinesVertexAttributeName(modelId, lineIds[0]);
+    const item = modelLinesVertexAttributeItem(modelId, lineIds[0]);
+    await setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, item, {
+      colorMap,
+    });
+    return applyVertexAttribute(modelId, lineIds);
+  }
+  function modelLinesVertexAttributeNoDataColor(modelId: string, lineId?: string): unknown {
+    const name = modelLinesVertexAttributeName(modelId, lineId);
+    const item = modelLinesVertexAttributeItem(modelId, lineId);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineId, name, item);
+    return storedConfig.no_data_color;
+  }
+  async function setModelLinesVertexAttributeNoDataColor(
+    modelId: string,
+    lineIds: string[],
+    no_data_color: unknown,
+  ): Promise<unknown> {
+    const name = modelLinesVertexAttributeName(modelId, lineIds[0]);
+    const item = modelLinesVertexAttributeItem(modelId, lineIds[0]);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineIds[0], name, item);
+    await setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, item, {
+      ...storedConfig,
+      no_data_color,
+    });
+    return applyVertexAttribute(modelId, lineIds);
+  }
+  return {
+    modelLinesVertexAttributeName,
+    modelLinesVertexAttributeItem,
+    modelLinesVertexAttributeRange,
+    modelLinesVertexAttributeColorMap,
+    modelLinesVertexAttributeStoredConfig,
+    setModelLinesVertexAttribute,
+    setModelLinesVertexAttributeName,
+    setModelLinesVertexAttributeItem,
+    setModelLinesVertexAttributeRange,
+    setModelLinesVertexAttributeColorMap,
+    modelLinesVertexAttributeNoDataColor,
+    setModelLinesVertexAttributeNoDataColor,
+  };
+}
+export { isModelLinesVertexAttributeValid, useModelLinesVertexAttribute };

package/internal/stores/data_style/model/lines/visibility.ts

@@ -0,0 +1,37 @@
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useModelLinesCommonStyle } from "./common";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.lines.visibility;
+
+export function useModelLinesVisibility(): {
+  setModelLinesVisibility: (
+    modelId: string,
+    lines_ids: string[],
+    visibility: boolean | undefined,
+  ) => Promise<unknown>;
+  modelLineVisibility: (id: string, line_id?: string) => unknown;
+} {
+  const modelCommonStyle = useModelCommonStyle();
+  const modelLinesCommonStyle = useModelLinesCommonStyle();
+
+  function modelLineVisibility(id: string, line_id?: string): unknown {
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
+  }
+
+  async function setModelLinesVisibility(
+    modelId: string,
+    lines_ids: string[],
+    visibility: boolean | undefined,
+  ): Promise<unknown> {
+    const result = await modelCommonStyle.setModelTypeVisibility(
+      modelId,
+      lines_ids,
+      visibility,
+      schema,
+    );
+    return result;
+  }
+
+  return { setModelLinesVisibility, modelLineVisibility };
+}

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

@@ -0,0 +1,25 @@
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+
+export function useModelPointsCommonStyle(): {
+  modelPointsStyle: (id: string) => StyleValues;
+  mutateModelPointsStyle: (id: string, values: StyleValues) => Promise<unknown>;
+} {
+  const dataStyleState = useDataStyleState();
+
+  async function mutateModelPointsStyle(id: string, values: StyleValues): Promise<unknown> {
+    const result = await dataStyleState.mutateStyle(id, {
+      points: values,
+    });
+    return result;
+  }
+
+  function modelPointsStyle(id: string): StyleValues {
+    return dataStyleState.getStyle(id).points ?? {};
+  }
+
+  return {
+    modelPointsStyle,
+    mutateModelPointsStyle,
+  };
+}

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

@@ -0,0 +1,35 @@
+// Local imports
+import { useModelPointsCommonStyle } from "./common";
+import { useModelPointsSizeStyle } from "./size";
+import { useModelPointsVisibilityStyle } from "./visibility";
+
+export function useModelPointsStyle(): {
+  applyModelPointsStyle: (id: string) => Promise<unknown[]>;
+} & ReturnType<typeof useModelPointsCommonStyle> &
+  ReturnType<typeof useModelPointsVisibilityStyle> &
+  ReturnType<typeof useModelPointsSizeStyle> {
+  const modelPointsCommonStyle = useModelPointsCommonStyle();
+  const modelPointsVisibilityStyle = useModelPointsVisibilityStyle();
+  const modelPointsSizeStyle = useModelPointsSizeStyle();
+
+  async function applyModelPointsStyle(id: string): Promise<unknown[]> {
+    const style = modelPointsCommonStyle.modelPointsStyle(id);
+    const result = await Promise.all([
+      modelPointsVisibilityStyle.setModelPointsVisibility(
+        id,
+        // oxlint-disable-next-line no-unsafe-type-assertion -- points style values are dynamically typed at runtime.
+        style.visibility as boolean | undefined,
+      ),
+      // oxlint-disable-next-line no-unsafe-type-assertion -- points style values are dynamically typed at runtime.
+      modelPointsSizeStyle.setModelPointsSize(id, style.size as number | undefined),
+    ]);
+    return result;
+  }
+
+  return {
+    applyModelPointsStyle,
+    ...modelPointsCommonStyle,
+    ...modelPointsVisibilityStyle,
+    ...modelPointsSizeStyle,
+  };
+}

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

@@ -0,0 +1,44 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { useModelPointsCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.points.size;
+
+export function useModelPointsSizeStyle(): {
+  modelPointsSize: (id: string) => number | undefined;
+  setModelPointsSize: (id: string, size: number | undefined) => Promise<unknown>;
+} {
+  const viewerStore = useViewerStore();
+  const modelPointsCommonStyle = useModelPointsCommonStyle();
+
+  function modelPointsSize(id: string): number | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- points style values are dynamically typed at runtime.
+    return modelPointsCommonStyle.modelPointsStyle(id).size as number | undefined;
+  }
+
+  async function setModelPointsSize(id: string, size: number | undefined): Promise<unknown> {
+    const params = { id, size };
+    const result = await viewerStore.request(
+      {
+        schema,
+        params,
+      },
+      {
+        response_function: async () => {
+          const mutateResult = await modelPointsCommonStyle.mutateModelPointsStyle(id, { size });
+          return mutateResult;
+        },
+      },
+    );
+    return result;
+  }
+
+  return {
+    modelPointsSize,
+    setModelPointsSize,
+  };
+}

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

@@ -0,0 +1,46 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { useModelPointsCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.points.visibility;
+
+export function useModelPointsVisibilityStyle(): {
+  modelPointsVisibility: (id: string) => boolean | undefined;
+  setModelPointsVisibility: (id: string, visibility: boolean | undefined) => Promise<unknown>;
+} {
+  const viewerStore = useViewerStore();
+  const modelPointsCommonStyle = useModelPointsCommonStyle();
+
+  function modelPointsVisibility(id: string): boolean | undefined {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- points style values are dynamically typed at runtime.
+    return modelPointsCommonStyle.modelPointsStyle(id).visibility as boolean | undefined;
+  }
+
+  async function setModelPointsVisibility(
+    id: string,
+    visibility: boolean | undefined,
+  ): Promise<unknown> {
+    const params = { id, visibility };
+    const result = await viewerStore.request(
+      { schema, params },
+      {
+        response_function: async () => {
+          const mutateResult = await modelPointsCommonStyle.mutateModelPointsStyle(id, {
+            visibility,
+          });
+          return mutateResult;
+        },
+      },
+    );
+    return result;
+  }
+
+  return {
+    modelPointsVisibility,
+    setModelPointsVisibility,
+  };
+}

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

@@ -0,0 +1,138 @@
+import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
+import type { Table } from "dexie";
+import { database } from "@ogw_internal/database/database";
+import type { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+
+interface ModelComponentRecord {
+  id: string;
+  geode_id: string;
+  type: string;
+}
+
+type DataStyleState = ReturnType<typeof useDataStyleState>;
+
+// oxlint-disable-next-line no-unsafe-type-assertion -- trusted Dexie table boundary; see other database table casts in this codebase.
+const model_components_db = database.model_components as unknown as Table<
+  ModelComponentRecord,
+  string
+>;
+
+function groupComponentsByType(
+  components: readonly ModelComponentRecord[],
+): Record<string, ModelComponentRecord[]> {
+  const componentsByType: Record<string, ModelComponentRecord[]> = Object.fromEntries(
+    MESH_COMPONENT_TYPES.map((componentType) => [componentType, []]),
+  );
+  for (const component of components) {
+    const list = componentsByType[component.type];
+    if (list !== undefined) {
+      list.push(component);
+    }
+  }
+  return componentsByType;
+}
+
+interface TypeSelectionContext {
+  readonly modelId: string;
+  readonly groupStyles: ReturnType<DataStyleState["getStyle"]>;
+  readonly dataStyleState: DataStyleState;
+}
+
+function computeTypeSelection(
+  componentType: string,
+  typeComponents: readonly ModelComponentRecord[],
+  context: TypeSelectionContext,
+): string[] {
+  const { modelId, groupStyles, dataStyleState } = context;
+  const typeKey = `${componentType.toLowerCase()}s`;
+  const typeStyleKey = `${modelId}_${componentType}`;
+  const typeStyle = dataStyleState.modelComponentTypeStyles.value[typeStyleKey];
+  // oxlint-disable-next-line no-unsafe-type-assertion -- dynamically-keyed lookup into StyleValues; see other database/style casts in this codebase.
+  const groupTypeStyle = (groupStyles as unknown as Record<string, StyleValues | undefined>)[
+    typeKey
+  ];
+  const defaultVisibility =
+    // oxlint-disable-next-line no-unsafe-type-assertion -- visibility field is defined by the data style schema.
+    (typeStyle?.visibility as boolean | undefined) ??
+    // oxlint-disable-next-line no-unsafe-type-assertion -- visibility field is defined by the data style schema.
+    (groupTypeStyle?.visibility as boolean | undefined) ??
+    true;
+
+  const selection: string[] = [];
+  let allVisible = true;
+  for (const component of typeComponents) {
+    const styleKey = `${modelId}_${component.geode_id}`;
+    const componentStyle = dataStyleState.componentStyles.value[styleKey];
+    // oxlint-disable-next-line no-unsafe-type-assertion -- visibility field is defined by the data style schema.
+    const isVisible = (componentStyle?.visibility as boolean | undefined) ?? defaultVisibility;
+    if (isVisible) {
+      selection.push(component.geode_id);
+    } else {
+      allVisible = false;
+    }
+  }
+  if (allVisible) {
+    selection.push(componentType);
+  }
+  return selection;
+}
+
+function buildSelection(
+  modelId: string,
+  components: readonly ModelComponentRecord[],
+  dataStyleState: DataStyleState,
+): string[] {
+  const componentsByType = groupComponentsByType(components);
+  const groupStyles = dataStyleState.getStyle(modelId);
+  const context: TypeSelectionContext = { modelId, groupStyles, dataStyleState };
+
+  const selection: string[] = [];
+  for (const componentType of MESH_COMPONENT_TYPES) {
+    const typeComponents = componentsByType[componentType] ?? [];
+    if (typeComponents.length === 0) {
+      continue;
+    }
+    selection.push(...computeTypeSelection(componentType, typeComponents, context));
+  }
+  return selection;
+}
+
+const selectionCache = new Map<string, ComputedRef<string[]>>();
+
+function useModelSelection(
+  modelId: string | undefined,
+  dataStyleState: DataStyleState,
+): ComputedRef<string[]> {
+  if (modelId === undefined || modelId === "") {
+    return computed<string[]>(() => []);
+  }
+
+  const cacheKey = modelId;
+  const cachedSelection = selectionCache.get(cacheKey);
+  if (cachedSelection !== undefined) {
+    return cachedSelection;
+  }
+
+  const allComponents = ref<ModelComponentRecord[]>([]);
+
+  void (async (): Promise<void> => {
+    try {
+      allComponents.value = await model_components_db.where("id").equals(modelId).toArray();
+    } catch {
+      allComponents.value = [];
+    }
+  })();
+
+  const computedSelection = computed(() => {
+    if (allComponents.value.length === 0) {
+      return [];
+    }
+    return buildSelection(modelId, allComponents.value, dataStyleState);
+  });
+
+  selectionCache.set(cacheKey, computedSelection);
+  return computedSelection;
+}
+
+export { buildSelection, useModelSelection };