feat(save_and_load): add import/export methods

composables/project_manager.js

@@ -0,0 +1,93 @@
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+import fileDownload from "js-file-download"
+
+export function useProjectManager() {
+  const geode = useGeodeStore()
+  const appStore = useAppStore()
+
+  async function exportProject() {
+    geode.start_request()
+    try {
+      await useInfraStore().create_connection()
+      const snapshot = appStore.exportStores()
+      const schema = back_schemas.opengeodeweb_back.export_project
+      const defaultName = "project.zip"
+
+      await api_fetch(
+        { schema, params: { snapshot, filename: defaultName } },
+        {
+          response_function: async (response) => {
+            const data = response._data
+            const downloadName =
+              response.headers?.get?.("new-file-name") || defaultName
+            fileDownload(data, downloadName)
+          },
+        },
+      )
+    } finally {
+      geode.stop_request()
+    }
+  }
+
+  async function importProjectFile(file) {
+    geode.start_request()
+    try {
+      await useInfraStore().create_connection()
+
+      const schemaImport = back_schemas.opengeodeweb_back.import_project
+      const form = new FormData()
+      form.append("file", file, file?.name)
+
+      const result = await $fetch(schemaImport.$id, {
+        baseURL: geode.base_url,
+        method: "POST",
+        body: form,
+      })
+      const snapshot = result?.snapshot ?? {}
+
+      await viewer_call({
+        schema: viewer_schemas.opengeodeweb_viewer.import_project,
+        params: {},
+      })
+      await viewer_call({
+        schema: viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization,
+        params: {},
+      })
+
+      const treeviewStore = useTreeviewStore()
+      treeviewStore.isImporting = true
+      await treeviewStore.importStores(snapshot?.treeview)
+
+      const hybridViewerStore = useHybridViewerStore()
+      await hybridViewerStore.initHybridViewer()
+      hybridViewerStore.clear()
+
+      const snapshotDataBase = snapshot?.dataBase?.db || {}
+      const items = Object.entries(snapshotDataBase).map(([id, item]) => ({
+        id,
+        object_type: item.object_type,
+        geode_object: item.geode_object,
+        native_filename: item.native_filename,
+        viewable_filename: item.viewable_filename,
+        displayed_name: item.displayed_name,
+        vtk_js: { binary_light_viewable: item?.vtk_js?.binary_light_viewable },
+      }))
+
+      await importWorkflowFromSnapshot(items)
+
+      const dataStyleStore = useDataStyleStore()
+      await dataStyleStore.importStores(snapshot?.dataStyle)
+      await dataStyleStore.applyAllStylesFromState()
+
+      treeviewStore.finalizeImportSelection()
+      treeviewStore.isImporting = false
+    } finally {
+      geode.stop_request()
+    }
+  }
+
+  return { exportProject, importProjectFile }
+}
+
+export default useProjectManager

internal_stores/mesh/index.js

@@ -39,6 +39,12 @@ export default function useMeshStyle() {
 
   function applyMeshStyle(id) {
     const style = dataStyleStore.getStyle(id)
+    console.log(
+      "[MeshStyle] applyMeshDefaultStyle for id:",
+      id,
+      "style:",
+      style,
+    )
     const promise_array = []
     for (const [key, value] of Object.entries(style)) {
       if (key === "visibility") {

internal_stores/model/blocks.js

@@ -80,12 +80,21 @@ export function useModelBlocksStyle() {
   }
 
   function applyModelBlocksStyle(id) {
-    const style = modelBlocksStyle(id)
-    const blocks_ids = dataBaseStore.getBlocksUuids(id)
-    return Promise.all([
-      setModelBlocksVisibility(id, blocks_ids, style.visibility),
-      setModelBlocksColor(id, blocks_ids, style.color),
-    ])
+    const style = dataStyleStore.getStyle(id).blocks
+    const block_ids = dataBaseStore.getBlocksUuids(id)
+
+    if (!block_ids || block_ids.length === 0) {
+      return Promise.resolve()
+    }
+
+    const promises = []
+    if (typeof style?.visibility === "boolean") {
+      promises.push(setModelBlocksVisibility(id, block_ids, style.visibility))
+    }
+    if (style?.color) {
+      promises.push(setModelBlocksColor(id, block_ids, style.color))
+    }
+    return Promise.all(promises)
   }
 
   return {

internal_stores/model/corners.js

@@ -82,10 +82,19 @@ export function useModelCornersStyle() {
   function applyModelCornersStyle(id) {
     const style = modelCornersStyle(id)
     const corner_ids = dataBaseStore.getCornersUuids(id)
-    return Promise.all([
-      setModelCornersVisibility(id, corner_ids, style.visibility),
-      setModelCornersColor(id, corner_ids, style.color),
-    ])
+
+    if (!corner_ids || corner_ids.length === 0) {
+      return Promise.resolve()
+    }
+
+    const promises = []
+    if (typeof style?.visibility === "boolean") {
+      promises.push(setModelCornersVisibility(id, corner_ids, style.visibility))
+    }
+    if (style?.color) {
+      promises.push(setModelCornersColor(id, corner_ids, style.color))
+    }
+    return Promise.all(promises)
   }
 
   return {

internal_stores/model/index.js

@@ -127,6 +127,8 @@ export default function useModelStyle() {
         [component_id],
         visibility,
       )
+    } else if (component_type === "Edge") {
+      return modelEdgesStyleStore.setModelEdgesVisibility(id, visibility)
     } else {
       throw new Error("Unknown model component_type: " + component_type)
     }
@@ -180,10 +182,8 @@ export default function useModelStyle() {
   return {
     modelVisibility,
     visibleMeshComponents,
-    modelMeshComponentVisibility,
     setModelVisibility,
     setModelColor,
-    setModelMeshComponentVisibility,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
     ...useModelBlocksStyle(),

internal_stores/model/surfaces.js

@@ -79,10 +79,21 @@ export function useModelSurfacesStyle() {
   function applyModelSurfacesStyle(id) {
     const style = modelSurfacesStyle(id)
     const surface_ids = dataBaseStore.getSurfacesUuids(id)
-    return Promise.all([
-      setModelSurfacesVisibility(id, surface_ids, style.visibility),
-      setModelSurfacesColor(id, surface_ids, style.color),
-    ])
+
+    if (!surface_ids || surface_ids.length === 0) {
+      return Promise.resolve()
+    }
+
+    const promises = []
+    if (typeof style?.visibility === "boolean") {
+      promises.push(
+        setModelSurfacesVisibility(id, surface_ids, style.visibility),
+      )
+    }
+    if (style?.color) {
+      promises.push(setModelSurfacesColor(id, surface_ids, style.color))
+    }
+    return Promise.all(promises)
   }
 
   return {

stores/app_store.js → stores/app.js

@@ -5,81 +5,72 @@ export const useAppStore = defineStore("app", () => {
     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 save() {
+  function exportStores() {
     const snapshot = {}
-    let savedCount = 0
+    let exportCount = 0
 
     for (const store of stores) {
-      if (!store.save) {
-        continue
-      }
+      if (!store.exportStores) continue
       const storeId = store.$id
       try {
-        snapshot[storeId] = store.save()
-        savedCount++
+        snapshot[storeId] = store.exportStores()
+        exportCount++
       } catch (error) {
-        console.error(`[AppStore] Error saving store "${storeId}":`, error)
+        console.error(`[AppStore] Error exporting store "${storeId}":`, error)
       }
     }
-
-    console.log(`[AppStore] Saved ${savedCount} stores`)
+    console.log(
+      `[AppStore] Exported ${exportCount} stores; snapshot keys:`,
+      Object.keys(snapshot),
+    )
     return snapshot
   }
 
-  function load(snapshot) {
+  async function importStores(snapshot) {
     if (!snapshot) {
-      console.warn("[AppStore] load called with invalid snapshot")
+      console.warn("[AppStore] import called with invalid snapshot")
       return
     }
+    console.log("[AppStore] Import snapshot keys:", Object.keys(snapshot || {}))
 
-    let loadedCount = 0
+    let importedCount = 0
     const notFoundStores = []
-
     for (const store of stores) {
-      if (!store.load) {
-        continue
-      }
-
+      if (!store.importStores) continue
       const storeId = store.$id
-
       if (!snapshot[storeId]) {
         notFoundStores.push(storeId)
         continue
       }
-
       try {
-        store.load(snapshot[storeId])
-        loadedCount++
+        await store.importStores(snapshot[storeId])
+        importedCount++
       } catch (error) {
-        console.error(`[AppStore] Error loading store "${storeId}":`, 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] Loaded ${loadedCount} stores`)
+    console.log(`[AppStore] Imported ${importedCount} stores`)
   }
 
   return {
     stores,
     registerStore,
-    save,
-    load,
+    exportStores,
+    importStores,
   }
 })

stores/data_base.js

@@ -48,6 +48,9 @@ export const useDataBaseStore = defineStore("dataBase", () => {
     })
   }
 
+  const treeviewStore = useTreeviewStore()
+  const hybridViewerStore = useHybridViewerStore()
+
   async function addItem(
     id,
     value = {
@@ -59,7 +62,17 @@ export const useDataBaseStore = defineStore("dataBase", () => {
       vtk_js: { binary_light_viewable },
     },
   ) {
+    console.log("[DataBase] addItem start", {
+      id,
+      object_type: value.object_type,
+      geode_object: value.geode_object,
+    })
     db[id] = value
+
+    if (value.object_type === "model") {
+      await fetchMeshComponents(id)
+      await fetchUuidToFlatIndexDict(id)
+    }
   }
 
   async function fetchMeshComponents(id) {
@@ -93,6 +106,37 @@ export const useDataBaseStore = defineStore("dataBase", () => {
     )
   }
 
+  function exportStores() {
+    const snapshotDb = {}
+    for (const [id, item] of Object.entries(db)) {
+      if (!item) continue
+      snapshotDb[id] = {
+        object_type: item.object_type,
+        geode_object: item.geode_object,
+        native_filename: item.native_filename,
+        viewable_filename: item.viewable_filename,
+        displayed_name: item.displayed_name,
+        vtk_js: {
+          binary_light_viewable: item?.vtk_js?.binary_light_viewable,
+        },
+      }
+    }
+    return { db: snapshotDb }
+  }
+
+  async function importStores(snapshot) {
+    await hybridViewerStore.initHybridViewer()
+    hybridViewerStore.clear()
+    console.log(
+      "[DataBase] importStores entries:",
+      Object.keys(snapshot?.db || {}),
+    )
+    for (const [id, item] of Object.entries(snapshot?.db || {})) {
+      await registerObject(id)
+      await addItem(id, item)
+    }
+  }
+
   function getCornersUuids(id) {
     const { mesh_components } = itemMetaDatas(id)
     return Object.values(mesh_components["Corner"])
@@ -134,5 +178,7 @@ export const useDataBaseStore = defineStore("dataBase", () => {
     getSurfacesUuids,
     getBlocksUuids,
     getFlatIndexes,
+    exportStores,
+    importStores,
   }
 })