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

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

@@ -0,0 +1,37 @@
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useModelSurfacesCommonStyle } from "./common";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.visibility;
+
+export function useModelSurfacesVisibility(): {
+  setModelSurfacesVisibility: (
+    modelId: string,
+    surfaces_ids: readonly string[],
+    visibility: boolean | undefined,
+  ) => Promise<unknown>;
+  modelSurfaceVisibility: (id: string, surface_id?: string) => unknown;
+} {
+  const modelCommonStyle = useModelCommonStyle();
+  const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+
+  function modelSurfaceVisibility(id: string, surface_id?: string): unknown {
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
+  }
+
+  async function setModelSurfacesVisibility(
+    modelId: string,
+    surfaces_ids: readonly string[],
+    visibility: boolean | undefined,
+  ): Promise<unknown> {
+    const result = await modelCommonStyle.setModelTypeVisibility(
+      modelId,
+      [...surfaces_ids],
+      visibility,
+      schema,
+    );
+    return result;
+  }
+
+  return { setModelSurfacesVisibility, modelSurfaceVisibility };
+}

package/internal/stores/data_style/model/{visibility.js → visibility.ts}

@@ -7,13 +7,35 @@ import { useModelSelection } from "./selection";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+// 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, so a precise structural type for componentStyleFunctions isn't worth modelling here; `any` keeps the dynamic dispatch table honest about that.
+// oxlint-disable-next-line no-explicit-any
+type ComponentStyleFunctions = Record<"Surface" | "Line" | "Block" | "Corner", any>;
+
+interface ModelComponent {
+  geode_id: string;
+  type: string;
+}
+
+async function callComponentStyleFunction(
+  // oxlint-disable-next-line no-explicit-any
+  target: any,
+  method: string,
+  ...args: unknown[]
+): Promise<unknown> {
+  // oxlint-disable-next-line no-unsafe-call, no-unsafe-member-access, no-unsafe-argument, no-unsafe-assignment -- ComponentStyleFunctions is deliberately dynamically typed; see comment above.
+  const result = await target[method](...args);
+  return result;
+}
+
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
-async function getModelComponentsMap(modelId) {
+async function getModelComponentsMap(
+  modelId: string,
+): Promise<{ allComponents: ModelComponent[]; componentsMap: Record<string, ModelComponent> }> {
   const dataStore = useDataStore();
   const results = await Promise.all(
     MESH_COMPONENT_TYPES.map(async (type) => {
       const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
-      return geodeIds.map((geode_id) => ({
+      return geodeIds.map((geode_id): ModelComponent => ({
         geode_id,
         type,
       }));
@@ -23,19 +45,19 @@ async function getModelComponentsMap(modelId) {
   return {
     allComponents,
     componentsMap: Object.fromEntries(
-      allComponents.map((component) => [component.geode_id, component]),
+      allComponents.map((component): [string, ModelComponent] => [component.geode_id, component]),
     ),
   };
 }
 async function dispatchToComponentTypes(
-  modelId,
-  componentIds,
-  action,
-  { componentStyleFunctions },
-  ...args
-) {
+  modelId: string,
+  componentIds: string[],
+  action: string,
+  { componentStyleFunctions }: { componentStyleFunctions: ComponentStyleFunctions },
+  ...args: unknown[]
+): Promise<unknown[]> {
   const { componentsMap } = await getModelComponentsMap(modelId);
-  const idsByComponent = {
+  const idsByComponent: { Block: string[]; Surface: string[]; Line: string[]; Corner: string[] } = {
     Block: [],
     Surface: [],
     Line: [],
@@ -43,15 +65,17 @@ async function dispatchToComponentTypes(
   };
   for (const id of componentIds) {
     const type = componentsMap[id]?.type;
-    if (type && idsByComponent[type]) {
-      idsByComponent[type].push(id);
+    if (type !== undefined && type in idsByComponent) {
+      (idsByComponent as Record<string, string[]>)[type]?.push(id);
     }
   }
-  const promises = [];
+  const promises: Promise<unknown>[] = [];
   if (action === "Visibility") {
     if (idsByComponent.Block.length > 0) {
       promises.push(
-        componentStyleFunctions.Block.setModelBlocksVisibility(
+        callComponentStyleFunction(
+          componentStyleFunctions.Block,
+          "setModelBlocksVisibility",
           modelId,
           idsByComponent.Block,
           ...args,
@@ -60,7 +84,9 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Surface.length > 0) {
       promises.push(
-        componentStyleFunctions.Surface.setModelSurfacesVisibility(
+        callComponentStyleFunction(
+          componentStyleFunctions.Surface,
+          "setModelSurfacesVisibility",
           modelId,
           idsByComponent.Surface,
           ...args,
@@ -69,12 +95,20 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Line.length > 0) {
       promises.push(
-        componentStyleFunctions.Line.setModelLinesVisibility(modelId, idsByComponent.Line, ...args),
+        callComponentStyleFunction(
+          componentStyleFunctions.Line,
+          "setModelLinesVisibility",
+          modelId,
+          idsByComponent.Line,
+          ...args,
+        ),
       );
     }
     if (idsByComponent.Corner.length > 0) {
       promises.push(
-        componentStyleFunctions.Corner.setModelCornersVisibility(
+        callComponentStyleFunction(
+          componentStyleFunctions.Corner,
+          "setModelCornersVisibility",
           modelId,
           idsByComponent.Corner,
           ...args,
@@ -84,12 +118,20 @@ async function dispatchToComponentTypes(
   } else if (action === "Color") {
     if (idsByComponent.Block.length > 0) {
       promises.push(
-        componentStyleFunctions.Block.setModelBlocksColor(modelId, idsByComponent.Block, ...args),
+        callComponentStyleFunction(
+          componentStyleFunctions.Block,
+          "setModelBlocksColor",
+          modelId,
+          idsByComponent.Block,
+          ...args,
+        ),
       );
     }
     if (idsByComponent.Surface.length > 0) {
       promises.push(
-        componentStyleFunctions.Surface.setModelSurfacesColor(
+        callComponentStyleFunction(
+          componentStyleFunctions.Surface,
+          "setModelSurfacesColor",
           modelId,
           idsByComponent.Surface,
           ...args,
@@ -98,12 +140,20 @@ async function dispatchToComponentTypes(
     }
     if (idsByComponent.Line.length > 0) {
       promises.push(
-        componentStyleFunctions.Line.setModelLinesColor(modelId, idsByComponent.Line, ...args),
+        callComponentStyleFunction(
+          componentStyleFunctions.Line,
+          "setModelLinesColor",
+          modelId,
+          idsByComponent.Line,
+          ...args,
+        ),
       );
     }
     if (idsByComponent.Corner.length > 0) {
       promises.push(
-        componentStyleFunctions.Corner.setModelCornersColor(
+        callComponentStyleFunction(
+          componentStyleFunctions.Corner,
+          "setModelCornersColor",
           modelId,
           idsByComponent.Corner,
           ...args,
@@ -113,29 +163,49 @@ async function dispatchToComponentTypes(
   }
   return Promise.all(promises);
 }
-function useModelVisibilityStyle(componentStyleFunctions) {
+interface UseModelVisibilityStyleReturn {
+  modelVisibility: (modelId: string) => boolean | undefined;
+  setModelVisibility: (modelId: string, visibility: boolean) => Promise<unknown>;
+  setModelComponentsVisibility: (
+    modelId: string,
+    componentIds: string[],
+    visibility: boolean,
+  ) => Promise<unknown[]>;
+  setModelComponentTypeVisibility: (
+    modelId: string,
+    componentType: string,
+    visibility: boolean,
+  ) => Promise<void>;
+  modelComponentVisibility: (modelId: string, componentId: string) => boolean;
+  modelComponentTypeVisibility: (modelId: string, componentType: string) => boolean;
+}
+
+// oxlint-disable-next-line max-lines-per-function
+function useModelVisibilityStyle(
+  componentStyleFunctions: ComponentStyleFunctions,
+): UseModelVisibilityStyleReturn {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
-  function modelVisibility(modelId) {
+  function modelVisibility(modelId: string): boolean | undefined {
     return dataStyleState.getStyle(modelId).visibility;
   }
-  function setModelVisibility(modelId, visibility) {
+  async function setModelVisibility(modelId: string, visibility: boolean): Promise<unknown> {
     const schema = model_schemas.visibility;
     const params = {
       id: modelId,
       visibility,
     };
-    return viewerStore.request(
+    const result = await viewerStore.request(
       {
         schema,
         params,
       },
       {
         response_function: async () => {
-          await hybridViewerStore.setVisibility(modelId, visibility);
+          hybridViewerStore.setVisibility(modelId, visibility);
           await dataStyleState.mutateStyle(modelId, {
             visibility,
           });
@@ -146,8 +216,13 @@ function useModelVisibilityStyle(componentStyleFunctions) {
         },
       },
     );
+    return result;
   }
-  async function setModelComponentTypeVisibility(modelId, componentType, visibility) {
+  async function setModelComponentTypeVisibility(
+    modelId: string,
+    componentType: string,
+    visibility: boolean,
+  ): Promise<void> {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, {
       visibility,
     });
@@ -165,10 +240,14 @@ function useModelVisibilityStyle(componentStyleFunctions) {
       visibility,
     );
   }
-  async function setModelComponentsVisibility(modelId, componentIds, visibility) {
+  async function setModelComponentsVisibility(
+    modelId: string,
+    componentIds: string[],
+    visibility: boolean,
+  ): Promise<unknown[]> {
     const typeIds = componentIds.filter((id) => MESH_COMPONENT_TYPES.includes(id));
     const individualIds = componentIds.filter((id) => !MESH_COMPONENT_TYPES.includes(id));
-    const promises = [];
+    const promises: Promise<unknown>[] = [];
     for (const typeId of typeIds) {
       promises.push(setModelComponentTypeVisibility(modelId, typeId, visibility));
     }
@@ -185,13 +264,14 @@ function useModelVisibilityStyle(componentStyleFunctions) {
         ),
       );
     }
-    return await Promise.all(promises);
+    const results = await Promise.all(promises);
+    return results;
   }
-  function modelComponentVisibility(modelId, componentId) {
+  function modelComponentVisibility(modelId: string, componentId: string): boolean {
     const selection = useModelSelection(modelId, dataStyleState);
     return selection.value.includes(componentId);
   }
-  function modelComponentTypeVisibility(modelId, componentType) {
+  function modelComponentTypeVisibility(modelId: string, componentType: string): boolean {
     const selection = useModelSelection(modelId, dataStyleState);
     return selection.value.includes(componentType);
   }

package/internal/stores/data_style/state.ts

@@ -0,0 +1,281 @@
+import type {
+  ModelComponentStyle,
+  ModelComponentTypeStyle,
+  ObjectStyle,
+  StyleValues,
+} from "./types";
+import type { Observable as RxObservable } from "rxjs";
+import { getTable } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
+import merge from "lodash/merge";
+import { useObservable } from "@vueuse/rxjs";
+
+interface SharedState {
+  styles: Ref<Record<string, ObjectStyle>>;
+  modelComponentTypeStyles: Ref<Record<string, ModelComponentTypeStyle>>;
+  componentStyles: Ref<Record<string, ModelComponentStyle>>;
+  loadFromDatabase: () => Promise<void>;
+  updateComponentStyleCache: (
+    modelId: string,
+    componentId: string,
+    styleValues: StyleValues,
+  ) => void;
+  bulkUpdateComponentStyleCache: (
+    modelId: string,
+    componentStyleUpdates: readonly {
+      readonly id_component: string;
+      readonly values: StyleValues;
+    }[],
+  ) => void;
+  bulkUpdateComponentStylesCache: (
+    modelId: string,
+    componentIds: readonly string[],
+    styleValues: StyleValues,
+  ) => void;
+  updateModelComponentTypeStyleCache: (
+    modelId: string,
+    componentType: string,
+    styleValues: StyleValues,
+  ) => void;
+  updateStyleCache: (objectId: string, styleValues: StyleValues) => void;
+}
+
+let sharedState: SharedState | undefined = undefined;
+
+// oxlint-disable-next-line max-lines-per-function
+function getSharedState(): SharedState {
+  if (sharedState) {
+    return sharedState;
+  }
+
+  const dataStyleTable = getTable<ObjectStyle>("data_style");
+  const modelComponentDataStyleTable = getTable<ModelComponentStyle>("model_component_datastyle");
+  const modelComponentTypeDataStyleTable = getTable<ModelComponentTypeStyle>(
+    "model_component_type_datastyle",
+  );
+
+  // Dexie's `liveQuery` returns Dexie's own `Observable` type, structurally distinct
+  // From rxjs's `Observable` that `useObservable` (from @vueuse/rxjs) expects, even
+  // Though they're interoperable at runtime (both are plain subscribe-based streams).
+  const dataStyleLiveQuery = liveQuery(async () => {
+    const objectStyles = await dataStyleTable.toArray();
+    const stylesByObjectId: Record<string, ObjectStyle> = {};
+    for (const objectStyle of objectStyles) {
+      stylesByObjectId[objectStyle.id] = objectStyle;
+    }
+    return stylesByObjectId;
+  });
+
+  const styles = useObservable<Record<string, ObjectStyle>, Record<string, ObjectStyle>>(
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    dataStyleLiveQuery as unknown as RxObservable<Record<string, ObjectStyle>>,
+    { initialValue: {} },
+  ) as Ref<Record<string, ObjectStyle>>;
+
+  const modelComponentTypeStyles = ref<Record<string, ModelComponentTypeStyle>>({});
+  const componentStyles = ref<Record<string, ModelComponentStyle>>({});
+
+  async function loadFromDatabase(): Promise<void> {
+    const [fetchedTypeStyles, fetchedComponentStyles] = await Promise.all([
+      modelComponentTypeDataStyleTable.toArray(),
+      modelComponentDataStyleTable.toArray(),
+    ]);
+    const typeStylesMap: Record<string, ModelComponentTypeStyle> = {};
+    for (const typeStyle of fetchedTypeStyles) {
+      const cacheKey = `${typeStyle.id_model}_${typeStyle.type}`;
+      typeStylesMap[cacheKey] = typeStyle;
+    }
+    modelComponentTypeStyles.value = typeStylesMap;
+
+    const componentStylesMap: Record<string, ModelComponentStyle> = {};
+    for (const componentStyle of fetchedComponentStyles) {
+      const cacheKey = `${componentStyle.id_model}_${componentStyle.id_component}`;
+      componentStylesMap[cacheKey] = componentStyle;
+    }
+    componentStyles.value = componentStylesMap;
+  }
+
+  void loadFromDatabase();
+
+  function updateComponentStyleCache(
+    modelId: string,
+    componentId: string,
+    styleValues: StyleValues,
+  ): void {
+    const cacheKey = `${modelId}_${componentId}`;
+    const existingStyle = componentStyles.value[cacheKey];
+    if (existingStyle === undefined) {
+      componentStyles.value[cacheKey] = merge(
+        { id_model: modelId, id_component: componentId },
+        styleValues,
+      );
+    } else {
+      merge(existingStyle, styleValues);
+    }
+  }
+
+  function bulkUpdateComponentStyleCache(
+    modelId: string,
+    componentStyleUpdates: readonly {
+      readonly id_component: string;
+      readonly values: StyleValues;
+    }[],
+  ): void {
+    const updatedComponentStyles = { ...componentStyles.value };
+    for (const { id_component: componentId, values: styleValues } of componentStyleUpdates) {
+      const cacheKey = `${modelId}_${componentId}`;
+      const existingStyle = updatedComponentStyles[cacheKey];
+      if (existingStyle === undefined) {
+        updatedComponentStyles[cacheKey] = merge(
+          { id_model: modelId, id_component: componentId },
+          styleValues,
+        );
+      } else {
+        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
+      }
+    }
+    componentStyles.value = updatedComponentStyles;
+  }
+
+  function bulkUpdateComponentStylesCache(
+    modelId: string,
+    componentIds: readonly string[],
+    styleValues: StyleValues,
+  ): void {
+    const updatedComponentStyles = { ...componentStyles.value };
+    for (const componentId of componentIds) {
+      const cacheKey = `${modelId}_${componentId}`;
+      const existingStyle = updatedComponentStyles[cacheKey];
+      if (existingStyle === undefined) {
+        updatedComponentStyles[cacheKey] = merge(
+          { id_model: modelId, id_component: componentId },
+          styleValues,
+        );
+      } else {
+        updatedComponentStyles[cacheKey] = merge({}, existingStyle, styleValues);
+      }
+    }
+    componentStyles.value = updatedComponentStyles;
+  }
+
+  function updateModelComponentTypeStyleCache(
+    modelId: string,
+    componentType: string,
+    styleValues: StyleValues,
+  ): void {
+    const cacheKey = `${modelId}_${componentType}`;
+    modelComponentTypeStyles.value[cacheKey] ??= { id_model: modelId, type: componentType };
+    merge(modelComponentTypeStyles.value[cacheKey], styleValues);
+  }
+
+  function updateStyleCache(objectId: string, styleValues: StyleValues): void {
+    styles.value[objectId] ??= { id: objectId };
+    merge(styles.value[objectId], styleValues);
+  }
+
+  sharedState = {
+    styles,
+    modelComponentTypeStyles,
+    componentStyles,
+    loadFromDatabase,
+    updateComponentStyleCache,
+    bulkUpdateComponentStyleCache,
+    bulkUpdateComponentStylesCache,
+    updateModelComponentTypeStyleCache,
+    updateStyleCache,
+  };
+
+  return sharedState;
+}
+
+interface DataStyleStateApi extends SharedState {
+  getStyle: (objectId: string) => ObjectStyle;
+  getComponentStyle: (modelId: string, componentId: string) => ModelComponentStyle;
+  getModelComponentTypeStyle: (modelId: string, componentType: string) => ModelComponentTypeStyle;
+  mutateStyle: (objectId: string, styleValues: StyleValues) => Promise<string>;
+  objectVisibility: ComputedRef<(objectId: string) => boolean | undefined>;
+  selectedObjects: ComputedRef<string[]>;
+  clear: () => Promise<void>;
+}
+
+// oxlint-disable-next-line max-lines-per-function
+export function useDataStyleState(): DataStyleStateApi {
+  const dataStyleTable = getTable<ObjectStyle>("data_style");
+  const modelComponentDataStyleTable = getTable<ModelComponentStyle>("model_component_datastyle");
+  const modelComponentTypeDataStyleTable = getTable<ModelComponentTypeStyle>(
+    "model_component_type_datastyle",
+  );
+
+  const state = getSharedState();
+  const { styles, modelComponentTypeStyles, componentStyles } = state;
+
+  const objectVisibility = computed(() => (objectId: string): boolean | undefined => {
+    const style = styles.value[objectId];
+    if (style !== undefined) {
+      return style.visibility;
+    }
+    return false;
+  });
+
+  const selectedObjects = computed((): string[] => {
+    const visibleObjectIds: string[] = [];
+    for (const [objectId, objectStyle] of Object.entries(styles.value)) {
+      if (objectStyle.visibility === true) {
+        visibleObjectIds.push(objectId);
+      }
+    }
+    return visibleObjectIds;
+  });
+
+  function getStyle(objectId: string): ObjectStyle {
+    const style = styles.value[objectId];
+    if (style === undefined) {
+      return { id: objectId };
+    }
+    return { ...toRaw(style) };
+  }
+
+  async function mutateStyle(objectId: string, styleValues: StyleValues): Promise<string> {
+    state.updateStyleCache(objectId, styleValues);
+    const currentStyle = getStyle(objectId);
+    merge(currentStyle, styleValues);
+    const savedId = await dataStyleTable.put(
+      structuredClone({ ...toRaw(currentStyle), id: objectId }),
+    );
+    return savedId;
+  }
+
+  function getComponentStyle(modelId: string, componentId: string): ModelComponentStyle {
+    const cacheKey = `${modelId}_${componentId}`;
+    return merge({ coloring: {} }, componentStyles.value[cacheKey]);
+  }
+
+  function getModelComponentTypeStyle(
+    modelId: string,
+    componentType: string,
+  ): ModelComponentTypeStyle {
+    const cacheKey = `${modelId}_${componentType}`;
+    return merge({ coloring: {} }, modelComponentTypeStyles.value[cacheKey]);
+  }
+
+  async function clear(): Promise<void> {
+    await Promise.all([
+      dataStyleTable.clear(),
+      modelComponentDataStyleTable.clear(),
+      modelComponentTypeDataStyleTable.clear(),
+    ]);
+    modelComponentTypeStyles.value = {};
+    componentStyles.value = {};
+  }
+
+  return {
+    ...state,
+    getStyle,
+    getComponentStyle,
+    getModelComponentTypeStyle,
+    mutateStyle,
+    objectVisibility,
+    selectedObjects,
+    clear,
+  };
+}

package/internal/stores/data_style/types.ts

@@ -0,0 +1,30 @@
+type StyleValues = Record<string, unknown>;
+
+interface ObjectStyle {
+  id: string;
+  visibility?: boolean;
+  color?: unknown;
+  points?: StyleValues;
+  edges?: StyleValues;
+  cells?: StyleValues;
+  polygons?: StyleValues;
+  polyhedra?: StyleValues;
+  corners?: StyleValues;
+  lines?: StyleValues;
+  surfaces?: StyleValues;
+  blocks?: StyleValues;
+  attributes?: StyleValues;
+  [key: string]: unknown;
+}
+
+interface ModelComponentTypeStyle extends StyleValues {
+  id_model: string;
+  type: string;
+}
+
+interface ModelComponentStyle extends StyleValues {
+  id_model: string;
+  id_component: string;
+}
+
+export type { ModelComponentStyle, ModelComponentTypeStyle, ObjectStyle, StyleValues };