feat(DataManager): New datamanager feature

app/components/Viewer/Tree/ObjectTree.vue

@@ -42,9 +42,9 @@
 </template>
 
 <script setup>
-  import ViewerBreadCrumb from "@/components/Viewer/BreadCrumb"
-  import ViewerTreeObject from "@/components/Viewer/TreeObject"
-  import ViewerTreeComponent from "@/components/Viewer/TreeComponent"
+  import ViewerBreadCrumb from "@ogw_front/components/Viewer/BreadCrumb"
+  import ViewerTreeObject from "@ogw_front/components/Viewer/TreeObject"
+  import ViewerTreeComponent from "@ogw_front/components/Viewer/TreeComponent"
   import { useTreeviewStore } from "@ogw_front/stores/treeview"
   import { useMenuStore } from "@ogw_front/stores/menu"
 

app/components/Viewer/TreeObject.vue

@@ -50,14 +50,14 @@
 
   const emit = defineEmits(["show-menu"])
 
   function isLeafNode(item) {
     return !item.children || item.children.length === 0
   }
 
   watch(
     () => treeviewStore.selection,
-    (current, previous) => {
+    async (current, previous) => {
       if (!previous) previous = []
       if (current.value === previous) {
         return
       }
@@ -67,26 +67,23 @@
         dataStyleStore.setVisibility(item.id, true)
       })
 
-      removed.forEach((item) => {
-        dataStyleStore.setVisibility(item.id, false)
+      for (const item of removed) {
+        await dataStyleStore.setVisibility(item.id, false)
 
-        const objectMeta = dataBaseStore.itemMetaDatas(item.id)
-        if (objectMeta.viewer_type === "mesh") {
-          if (dataBaseStore.db[item.id]?.mesh_components_selection) {
-            dataBaseStore.db[item.id].mesh_components_selection = []
-          }
+        const objectMeta = await dataBaseStore.itemMetaDatas(item.id)
+        if (objectMeta?.viewer_type === "mesh") {
           if (dataStyleStore.visibleMeshComponentIds?.[item.id]) {
             dataStyleStore.updateVisibleMeshComponents(item.id, [])
           }
         }
-      })
+      }
       hybridViewerStore.remoteRender()
     },
   )
 
   function isModel(item) {
     return item.viewer_type === "model"
   }
 
   onMounted(() => {
     const savedSelection = treeviewStore.selection

app/plugins/auto_store_register.js

@@ -1,4 +1,4 @@
-import { useAppStore } from "../stores/app"
+import { useAppStore } from "@ogw_front/stores/app"
 
 const autoStoreRegister = ({ store }) => {
   if (store.$id === "app") {

app/stores/app.js

@@ -1,76 +1,76 @@
 export const useAppStore = defineStore("app", () => {
   const stores = []
 
   function registerStore(store) {
     const isAlreadyRegistered = stores.some(
       (registeredStore) => registeredStore.$id === store.$id,
     )
     if (isAlreadyRegistered) {
       console.log(
         `[AppStore] Store "${store.$id}" already registered, skipping`,
       )
       return
     }
     console.log("[AppStore] Registering store", store.$id)
     stores.push(store)
   }
 
-  function exportStores() {
+  function exportStores(params = {}) {
     const snapshot = {}
     let exportCount = 0
 
     for (const store of stores) {
       if (!store.exportStores) continue
       const storeId = store.$id
       try {
-        snapshot[storeId] = store.exportStores()
+        snapshot[storeId] = store.exportStores(params)
         exportCount++
       } catch (error) {
         console.error(`[AppStore] Error exporting store "${storeId}":`, error)
       }
     }
     console.log(
       `[AppStore] Exported ${exportCount} stores; snapshot keys:`,
       Object.keys(snapshot),
     )
     return snapshot
   }
 
   async function importStores(snapshot) {
     if (!snapshot) {
       console.warn("[AppStore] import called with invalid snapshot")
       return
     }
     console.log("[AppStore] Import snapshot keys:", Object.keys(snapshot || {}))
 
     let importedCount = 0
     const notFoundStores = []
     for (const store of stores) {
       if (!store.importStores) continue
       const storeId = store.$id
       if (!snapshot[storeId]) {
         notFoundStores.push(storeId)
         continue
       }
       try {
         await store.importStores(snapshot[storeId])
         importedCount++
       } catch (error) {
         console.error(`[AppStore] Error importing store "${storeId}":`, error)
       }
     }
     if (notFoundStores.length > 0) {
       console.warn(
         `[AppStore] Stores not found in snapshot: ${notFoundStores.join(", ")}`,
       )
     }
     console.log(`[AppStore] Imported ${importedCount} stores`)
   }
 
   return {
     stores,
     registerStore,
     exportStores,
     importStores,
   }
 })

app/stores/data_base.js

@@ -1,28 +1,52 @@
 // Third party imports
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
-import { useViewerStore } from "@ogw_front/stores/viewer"
-import { useGeodeStore } from "@ogw_front/stores/geode"
+import { db } from "../../internal/database/db.js"
+import { liveQuery } from "dexie"
 
 // Local constants
 const back_model_schemas = back_schemas.opengeodeweb_back.models
 const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic
 
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useGeodeStore } from "@ogw_front/stores/geode"
+
 export const useDataBaseStore = defineStore("dataBase", () => {
   const viewerStore = useViewerStore()
 
-  const db = reactive({})
+  const syncCache = reactive({})
+
+  liveQuery(() => db.data.toArray()).subscribe((items) => {
+    Object.keys(syncCache).forEach((key) => delete syncCache[key])
+    items.forEach((item) => {
+      syncCache[item.id] = item
+    })
+  })
+
+  function getAllItemsLive() {
+    return liveQuery(() => db.data.toArray())
+  }
+
+  function getItemLive(id) {
+    return liveQuery(() => db.data.get(id))
+  }
+
+  async function itemMetaDatas(id) {
+    return await db.data.get(id)
+  }
 
-  function itemMetaDatas(id) {
-    return db[id]
+  function itemMetaDatasSync(id) {
+    return syncCache[id]
   }
 
   function formatedMeshComponents(id) {
-    const { mesh_components } = itemMetaDatas(id)
-    const formated_mesh_components = ref([])
+    const item = itemMetaDatasSync(id)
+    if (!item || !item.mesh_components) return []
+    const { mesh_components } = item
+    const formated_mesh_components = []
 
     for (const [category, uuids] of Object.entries(mesh_components)) {
-      formated_mesh_components.value.push({
+      formated_mesh_components.push({
         id: category,
         title: category,
         children: uuids.map((uuid) => ({
@@ -32,11 +56,13 @@
         })),
       })
     }
-    return formated_mesh_components.value
+    return formated_mesh_components
   }
 
   function meshComponentType(id, uuid) {
-    const { mesh_components } = itemMetaDatas(id)
+    const item = itemMetaDatasSync(id)
+    if (!item || !item.mesh_components) return null
+    const { mesh_components } = item
 
     if (mesh_components["Corner"]?.includes(uuid)) return "corner"
     else if (mesh_components["Line"]?.includes(uuid)) return "line"
@@ -49,18 +75,39 @@
     return viewerStore.request(viewer_generic_schemas.register, { id })
   }
 
-  async function addItem(
-    id,
-    value = {
-      viewer_type,
-      geode_object_type,
-      native_file,
-      viewable_file,
-      name,
-      binary_light_viewable,
-    },
-  ) {
-    db[id] = value
+  async function deregisterObject(id) {
+    return viewerStore.request(viewer_generic_schemas.deregister, { id })
+  }
+
+  async function addItem(id, value) {
+    const itemData = {
+      id,
+      name: value.name || id,
+      geode_object_type: value.geode_object_type,
+      visible: true,
+      created_at: new Date().toISOString(),
+      ...value,
+    }
+
+    const serializedData = JSON.parse(JSON.stringify(itemData))
+    await db.data.put(serializedData)
+    syncCache[id] = serializedData
+  }
+
+  async function getAllItems() {
+    return await db.data.toArray()
+  }
+
+  async function deleteItem(id) {
+    await db.data.delete(id)
+    delete syncCache[id]
+  }
+
+  async function updateItem(id, changes) {
+    await db.data.update(id, changes)
+    if (syncCache[id]) {
+      Object.assign(syncCache[id], changes)
+    }
   }
 
   async function fetchMeshComponents(id) {
@@ -70,90 +117,107 @@
       { id },
       {
         response_function: async (response) => {
-          db[id].mesh_components = response._data.uuid_dict
+          const mesh_components = response._data.uuid_dict
+          await updateItem(id, { mesh_components })
         },
       },
     )
   }
 
   async function fetchUuidToFlatIndexDict(id) {
-    console.log("fetchUuidToFlatIndexDict", id)
     const geodeStore = useGeodeStore()
     return geodeStore.request(
       back_model_schemas.vtm_component_indices,
       { id },
       {
         response_function: async (response) => {
-          db[id]["uuid_to_flat_index"] = response._data.uuid_to_flat_index
+          const uuid_to_flat_index = response._data.uuid_to_flat_index
+          await updateItem(id, { uuid_to_flat_index })
         },
       },
     )
   }
 
   function getCornersUuids(id) {
-    const { mesh_components } = itemMetaDatas(id)
-    return Object.values(mesh_components["Corner"])
+    const item = itemMetaDatasSync(id)
+    if (!item || !item.mesh_components) return []
+    const { mesh_components } = item
+    return Object.values(mesh_components["Corner"] || {})
   }
 
   function getLinesUuids(id) {
-    const { mesh_components } = itemMetaDatas(id)
-    return Object.values(mesh_components["Line"])
+    const item = itemMetaDatasSync(id)
+    if (!item || !item.mesh_components) return []
+    const { mesh_components } = item
+    return Object.values(mesh_components["Line"] || {})
   }
   function getSurfacesUuids(id) {
-    const { mesh_components } = itemMetaDatas(id)
-    return Object.values(mesh_components["Surface"])
+    const item = itemMetaDatasSync(id)
+    if (!item || !item.mesh_components) return []
+    const { mesh_components } = item
+    return Object.values(mesh_components["Surface"] || {})
   }
   function getBlocksUuids(id) {
-    const { mesh_components } = itemMetaDatas(id)
-    return Object.values(mesh_components["Block"])
+    const item = itemMetaDatasSync(id)
+    if (!item || !item.mesh_components) return []
+    const { mesh_components } = item
+    return Object.values(mesh_components["Block"] || {})
   }
 
   function getFlatIndexes(id, mesh_component_ids) {
-    const { uuid_to_flat_index } = itemMetaDatas(id)
+    const item = itemMetaDatasSync(id)
+    if (!item || !item.uuid_to_flat_index) return []
+    const { uuid_to_flat_index } = item
     const flat_indexes = []
     for (const mesh_component_id of mesh_component_ids) {
-      flat_indexes.push(uuid_to_flat_index[mesh_component_id])
+      if (uuid_to_flat_index[mesh_component_id] !== undefined) {
+        flat_indexes.push(uuid_to_flat_index[mesh_component_id])
+      }
     }
     return flat_indexes
   }
 
-  function exportStores() {
+  async function exportStores() {
+    const items = await db.data.toArray()
     const snapshotDb = {}
-    for (const [id, item] of Object.entries(db)) {
-      if (!item) continue
-      snapshotDb[id] = {
-        ...item,
-      }
+
+    for (const item of items) {
+      snapshotDb[item.id] = { ...item }
     }
+
     return { db: snapshotDb }
   }
 
   async function importStores(snapshot) {
+    const hybridViewerStore = useHybridViewerStore()
     await hybridViewerStore.initHybridViewer()
     hybridViewerStore.clear()
-    console.log(
-      "[DataBase] importStores entries:",
-      Object.keys(snapshot?.db || {}),
-    )
+
+    await clear()
+
     for (const [id, item] of Object.entries(snapshot?.db || {})) {
       await registerObject(id)
       await addItem(id, item)
     }
   }
 
-  function clear() {
-    for (const id of Object.keys(db)) {
-      delete db[id]
-    }
+  async function clear() {
+    await db.data.clear()
   }
 
   return {
-    db,
+    getAllItemsLive,
+    getItemLive,
     itemMetaDatas,
+    itemMetaDatasSync,
     meshComponentType,
     formatedMeshComponents,
     registerObject,
+    deregisterObject,
     addItem,
+    getAllItems,
+    deleteItem,
+    updateItem,
     fetchUuidToFlatIndexDict,
     fetchMeshComponents,
     getCornersUuids,

app/stores/data_style.js

@@ -4,36 +4,36 @@
 import useMeshStyle from "../../internal/stores/mesh/index"
 import useModelStyle from "../../internal/stores/model/index"
 
 export const useDataStyleStore = defineStore("dataStyle", () => {
   const dataStyleState = useDataStyleState()
   const meshStyleStore = useMeshStyle()
   const modelStyleStore = useModelStyle()
   const dataBaseStore = useDataBaseStore()
 
   function addDataStyle(id, geode_object) {
     dataStyleState.styles[id] = getDefaultStyle(geode_object)
   }
 
   function setVisibility(id, visibility) {
     console.log(
       "dataBaseStore.itemMetaDatas(id)",
       dataBaseStore.itemMetaDatas(id),
     )
-    const { viewer_type } = dataBaseStore.itemMetaDatas(id)
+    const { viewer_type } = dataBaseStore.itemMetaDatasSync(id)
     if (viewer_type === "mesh") {
       return Promise.all([meshStyleStore.setMeshVisibility(id, visibility)])
     } else if (viewer_type === "model") {
       return Promise.all([modelStyleStore.setModelVisibility(id, visibility)])
     }
     throw new Error("Unknown viewer_type")
   }
 
   function applyDefaultStyle(id) {
-    const { viewer_type } = dataBaseStore.itemMetaDatas(id)
+    const { viewer_type } = dataBaseStore.itemMetaDatasSync(id)
     if (viewer_type === "mesh") {
       return meshStyleStore.applyMeshStyle(id)
     } else if (viewer_type === "model") {
       return modelStyleStore.applyModelStyle(id)
     } else {
       throw new Error("Unknown viewer_type: " + viewer_type)
     }
@@ -57,7 +57,7 @@
     const ids = Object.keys(dataStyleState.styles || {})
     const promises = []
     for (const id of ids) {
-      const meta = dataBaseStore.itemMetaDatas(id)
+      const meta = dataBaseStore.itemMetaDatasSync(id)
       const viewerType = meta?.viewer_type
       const style = dataStyleState.styles[id]
       if (style && viewerType === "mesh") {

app/stores/hybrid_viewer.js

@@ -53,7 +53,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!genericRenderWindow.value) {
       return
     }
-    const value = dataBaseStore.db[id]
+    const value = await dataBaseStore.itemMetaDatas(id)
     console.log("hybridViewerStore.addItem", { value })
     const reader = vtkXMLPolyDataReader.newInstance()
     const textEncoder = new TextEncoder()
@@ -74,6 +74,14 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     db[id] = { actor, polydata, mapper }
   }
 
+  async function removeItem(id) {
+    if (!db[id]) return
+    const renderer = genericRenderWindow.value.getRenderer()
+    renderer.removeActor(db[id].actor)
+    genericRenderWindow.value.getRenderWindow().render()
+    delete db[id]
+  }
+
   async function setVisibility(id, visibility) {
     db[id].actor.setVisibility(visibility)
     const renderWindow = genericRenderWindow.value.getRenderWindow()
@@ -281,6 +289,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     db,
     genericRenderWindow,
     addItem,
+    removeItem,
     setVisibility,
     setZScaling,
     syncRemoteCamera,