Feat/datastyle dexie

app/components/ObjectSelector.vue

@@ -7,7 +7,6 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 const schema = schemas.opengeodeweb_back.allowed_objects;
 
 const emit = defineEmits(["update_values", "increment_step"]);
-console.log("ObjectSelector");
 
 const { filenames } = defineProps({
   filenames: { type: Array, required: true },
@@ -78,7 +77,6 @@ async function get_allowed_objects() {
 }
 
 function set_geode_object(geode_object_type) {
-  console.log("set_geode_object", { geode_object_type });
   if (geode_object_type) {
     emit("update_values", { geode_object_type });
     emit("increment_step");

app/components/Viewer/BreadCrumb.vue

@@ -13,7 +13,12 @@ function goBackToFileTree() {
 
 const model_id = computed(() => treeviewStore.model_id);
 
-const metaDatas = dataStore.refItem(model_id.value);
+const metaDatas = computed(() => {
+  if (!model_id.value) {
+    return {};
+  }
+  return dataStore.refItem(model_id.value).value || {};
+});
 </script>
 
 <template>

app/components/Viewer/TreeComponent.vue

@@ -1,24 +1,18 @@
 <script setup>
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-import { compareSelections } from "@ogw_front/utils/treeview";
-
 const dataStyleStore = useDataStyleStore();
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const { id } = defineProps({ id: { type: String, required: true } });
-
 const emit = defineEmits(["show-menu"]);
 
-const items = ref([]);
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(id);
-
-watchEffect(async () => {
-  items.value = await dataStore.formatedMeshComponents(id);
-});
+const items = dataStore.refFormatedMeshComponents(id);
+const mesh_components_selection = computed(() => dataStyleStore.visibleMeshComponents(id));
 
 watch(
   mesh_components_selection,
@@ -28,6 +22,11 @@ watch(
     }
 
     const { added, removed } = compareSelections(current, previous);
+    console.log("TreeComponent selection change:", {
+      id: props.id,
+      added,
+      removed,
+    });
 
     if (added.length > 0) {
       await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);

app/stores/app.js

@@ -1,3 +1,4 @@
+// Local imports
 import { api_fetch } from "@ogw_internal/utils/api_fetch.js";
 import { upload_file } from "@ogw_internal/utils/upload_file.js";
 

app/stores/data.js

@@ -12,8 +12,12 @@ const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore();
 
-  function item(id) {
-    return database.data.get(id);
+  async function item(id) {
+    const data_item = await database.data.get(id);
+    if (!data_item) {
+      throw new Error(`Item not found: ${id}`);
+    }
+    return data_item;
   }
 
   function refItem(id) {
@@ -62,6 +66,13 @@ export const useDataStore = defineStore("data", () => {
       }));
   }
 
+  function refFormatedMeshComponents(id) {
+    return useObservable(
+      liveQuery(() => formatedMeshComponents(id)),
+      { initialValue: [] },
+    );
+  }
+
   async function meshComponentType(modelId, geode_id) {
     const component = await database.model_components.where({ id: modelId, geode_id }).first();
     return component?.type;
@@ -176,7 +187,7 @@ export const useDataStore = defineStore("data", () => {
       .where("[id+geode_id]")
       .anyOf(meshComponentGeodeIds.map((geode_id) => [modelId, geode_id]))
       .toArray();
-    return components.map((component) => component.viewer_id);
+    return components.map((component) => Number.parseInt(component.viewer_id, 10));
   }
 
   async function exportStores() {
@@ -198,6 +209,7 @@ export const useDataStore = defineStore("data", () => {
     refItem,
     meshComponentType,
     formatedMeshComponents,
+    refFormatedMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
@@ -210,6 +222,7 @@ export const useDataStore = defineStore("data", () => {
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
     getMeshComponentsViewerIds,
+
     exportStores,
     importStores,
     clear,

app/stores/data_style.js

@@ -1,3 +1,4 @@
+import { database } from "@ogw_internal/database/database.js";
 import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
@@ -10,16 +11,13 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   const modelStyleStore = useModelStyle();
   const dataStore = useDataStore();
 
-  function addDataStyle(id, geode_object) {
-    dataStyleState.styles[id] = getDefaultStyle(geode_object);
+  async function addDataStyle(id, geode_object) {
+    await database.data_style.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
   }
 
   async function setVisibility(id, visibility) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
       return meshStyleStore.setMeshVisibility(id, visibility);
@@ -32,10 +30,8 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function applyDefaultStyle(id) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
+
     if (viewer_type === "mesh") {
       return meshStyleStore.applyMeshStyle(id);
     }
@@ -46,29 +42,36 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   function exportStores() {
-    return { styles: dataStyleState.styles };
+    return {
+      styles: dataStyleState.styles,
+      componentStyles: dataStyleState.componentStyles,
+    };
   }
 
-  function importStores(snapshot) {
-    const stylesSnapshot = snapshot.styles || {};
-    for (const id of Object.keys(dataStyleState.styles)) {
-      delete dataStyleState.styles[id];
-    }
-    for (const [id, style] of Object.entries(stylesSnapshot)) {
-      dataStyleState.styles[id] = style;
-    }
+  async function importStores(snapshot) {
+    const stylesSnapshot = snapshot.styles;
+    const componentStylesSnapshot = snapshot.componentStyles;
+
+    await dataStyleState.clear();
+
+    const style_promises = Object.entries(stylesSnapshot).map(([id, style]) =>
+      database.data_style.put(structuredClone({ id, ...style })),
+    );
+    const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
+      database.model_component_datastyle.put(structuredClone(style)),
+    );
+
+    await Promise.all([...style_promises, ...component_style_promises]);
   }
 
   function applyAllStylesFromState() {
-    const ids = Object.keys(dataStyleState.styles || {});
+    const ids = Object.keys(dataStyleState.styles);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
-      const viewerType = meta?.viewer_type;
-      const style = dataStyleState.styles[id];
-      if (style && viewerType === "mesh") {
+      const viewerType = meta.viewer_type;
+      if (viewerType === "mesh") {
         return meshStyleStore.applyMeshStyle(id);
-      }
-      if (style && viewerType === "model") {
+      } else if (viewerType === "model") {
         return modelStyleStore.applyModelStyle(id);
       }
     });

app/stores/hybrid_viewer.js

@@ -70,7 +70,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     const value = await dataStore.item(id);
-    console.log("hybridViewerStore.addItem", { value });
     const reader = vtkXMLPolyDataReader();
     const textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));

app/utils/file_import_workflow.js

@@ -30,6 +30,7 @@ async function importWorkflow(files) {
 function buildImportItemFromPayloadApi(value, geode_object_type) {
   console.log("buildImportItemFromPayloadApi", { value, geode_object_type });
   return {
+    geode_object_type,
     ...value,
   };
 }

app/utils/local/cleanup.js

@@ -133,6 +133,10 @@ function projectMicroservices(projectFolderPath) {
 }
 
 async function cleanupBackend(projectFolderPath) {
+  if (!fs.existsSync(projectFolderPath)) {
+    console.log(`Folder ${projectFolderPath} does not exist. Skipping cleanup.`);
+    return;
+  }
   const microservices = projectMicroservices(projectFolderPath);
   await killMicroservices(microservices);
   await deleteFolderRecursive(projectFolderPath);
@@ -142,4 +146,4 @@ function microservicesMetadatasPath(projectFolderPath) {
   return path.join(projectFolderPath, "microservices.json");
 }
 
-export { cleanupBackend, microservicesMetadatasPath };
+export { cleanupBackend, microservicesMetadatasPath, projectMicroservices };

app/utils/local/microservices.js

@@ -11,7 +11,7 @@ import pTimeout from "p-timeout";
 // Local imports
 import { commandExistsSync, waitForReady } from "./scripts.js";
 import { executableName, executablePath } from "./path.js";
-import { microservicesMetadatasPath } from "./cleanup.js";
+import { microservicesMetadatasPath, projectMicroservices } from "./cleanup.js";
 
 const DEFAULT_TIMEOUT_SECONDS = 30;
 const MILLISECONDS_PER_SECOND = 1000;
@@ -112,18 +112,6 @@ async function runViewer(execName, execPath, args = {}) {
   return port;
 }
 
-function projectMicroservices(projectFolderPath) {
-  console.log("projectMicroservices", { projectFolderPath });
-  const filePath = microservicesMetadatasPath(projectFolderPath);
-
-  if (!fs.existsSync(filePath)) {
-    const microservicesMetadatas = { microservices: [] };
-    fs.writeFileSync(filePath, JSON.stringify(microservicesMetadatas, undefined, 2), "utf8");
-  }
-  const content = JSON.parse(fs.readFileSync(filePath, "utf8"));
-  return content.microservices;
-}
-
 function addMicroserviceMetadatas(projectFolderPath, serviceObj) {
   const microservices = projectMicroservices(projectFolderPath);
   if (serviceObj.type === "back") {

internal/database/base_database.js

@@ -0,0 +1,22 @@
+import { Dexie } from "dexie";
+import { dataStyleTable } from "./tables/data_style";
+import { dataTable } from "./tables/data";
+import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
+import { modelComponentsRelationTable } from "./tables/model_components_relation";
+import { modelComponentsTable } from "./tables/model_components";
+
+export class BaseDatabase extends Dexie {
+  static get initialStores() {
+    return {
+      [dataTable.name]: dataTable.schema,
+      [modelComponentsTable.name]: modelComponentsTable.schema,
+      [dataStyleTable.name]: dataStyleTable.schema,
+      [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
+      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+    };
+  }
+
+  clear() {
+    return Promise.all(this.tables.map((table) => table.clear()));
+  }
+}

internal/database/database.js

@@ -1,18 +1,11 @@
-import { Dexie } from "dexie";
+import { BaseDatabase } from "./base_database";
 import { ExtendedDatabase } from "./extended_database";
-import { dataTable } from "./tables/data";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
-import { modelComponentsTable } from "./tables/model_components";
 
-class Database extends Dexie {
+class Database extends BaseDatabase {
   constructor() {
     super("Database");
 
-    this.version(1).stores({
-      [dataTable.name]: dataTable.schema,
-      [modelComponentsTable.name]: modelComponentsTable.schema,
-      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-    });
+    this.version(1).stores(BaseDatabase.initialStores);
   }
 
   static async addTable(tableName, schemaDefinition) {
@@ -24,11 +17,7 @@ class Database extends Dexie {
     await tempDb.open();
 
     const currentVersion = tempDb.verno;
-    const currentStores = {
-      [dataTable.name]: dataTable.schema,
-      [modelComponentsTable.name]: modelComponentsTable.schema,
-      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-    };
+    const currentStores = { ...BaseDatabase.initialStores };
 
     for (const table of tempDb.tables) {
       const keyPath = table.schema.primKey.src;
@@ -47,11 +36,7 @@ class Database extends Dexie {
       const existingDb = new Dexie("Database");
       for (let version = 1; version <= currentVersion; version += 1) {
         if (version === 1) {
-          existingDb.version(1).stores({
-            [dataTable.name]: dataTable.schema,
-            [modelComponentsTable.name]: modelComponentsTable.schema,
-            [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-          });
+          existingDb.version(1).stores(BaseDatabase.initialStores);
         } else {
           existingDb.version(version).stores(currentStores);
         }

internal/database/extended_database.js

@@ -1,19 +1,12 @@
-import { Dexie } from "dexie";
-import { dataTable } from "./tables/data";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
-import { modelComponentsTable } from "./tables/model_components";
+import { BaseDatabase } from "./base_database";
 
-export class ExtendedDatabase extends Dexie {
+export class ExtendedDatabase extends BaseDatabase {
   constructor(currentVersion, currentStores, newTables) {
     super("Database");
 
     for (let version = 1; version <= currentVersion; version += 1) {
       if (version === 1) {
-        this.version(1).stores({
-          [dataTable.name]: dataTable.schema,
-          [modelComponentsTable.name]: modelComponentsTable.schema,
-          [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-        });
+        this.version(1).stores(BaseDatabase.initialStores);
       } else {
         this.version(version).stores(currentStores);
       }

internal/database/tables/data_style.js

@@ -0,0 +1,4 @@
+export const dataStyleTable = {
+  name: "data_style",
+  schema: "id",
+};

internal/database/tables/model_component_datastyle.js

@@ -0,0 +1,4 @@
+export const modelComponentDataStyleTable = {
+  name: "model_component_datastyle",
+  schema: "[id_model+id_component], id_model",
+};