@geode/opengeodeweb-front 10.20.1 → 10.21.0-rc.2

package/app/composables/model_collections.js

@@ -0,0 +1,72 @@
+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";
+
+export function useModelCollections(viewId) {
+  const dataStore = useDataStore();
+  const dataStyleStore = useDataStyleStore();
+  const hybridViewerStore = useHybridViewerStore();
+
+  const items = dataStore.refFormatedCollectionComponents(viewId);
+  const collectionsCache = ref(undefined);
+  const localCategories = ref([]);
+
+  onMounted(async () => {
+    const data = await dataStore.fetchAllCollectionComponents(viewId);
+    collectionsCache.value = markRaw(data);
+  });
+
+  watch(
+    items,
+    async (newItems) => {
+      if (!newItems) {
+        localCategories.value = [];
+        return;
+      }
+
+      const data = await dataStore.fetchAllCollectionComponents(viewId);
+      collectionsCache.value = markRaw(data);
+
+      localCategories.value = newItems.map((newCategory) => {
+        const existing = localCategories.value.find((category) => category.id === newCategory.id);
+        if (existing) {
+          existing.title = newCategory.title || newCategory.id;
+          return existing;
+        }
+        return reactive({
+          ...newCategory,
+          title: newCategory.title || newCategory.id,
+        });
+      });
+    },
+    { immediate: true },
+  );
+
+  const selection = dataStyleStore.visibleMeshComponents(viewId);
+
+  async function updateVisibility(current) {
+    const previous = selection.value;
+    const { added, removed } = compareSelections(current, previous);
+
+    if (added.length === 0 && removed.length === 0) {
+      return;
+    }
+
+    if (added.length > 0) {
+      await dataStyleStore.setModelComponentsVisibility(viewId, added, true);
+    }
+    if (removed.length > 0) {
+      await dataStyleStore.setModelComponentsVisibility(viewId, removed, false);
+    }
+    hybridViewerStore.remoteRender();
+  }
+
+  return {
+    items,
+    collectionsCache,
+    localCategories,
+    selection,
+    updateVisibility,
+  };
+}

package/app/composables/model_components.js

@@ -19,11 +19,15 @@ export function useModelComponents(viewId) {
 
   watch(
     items,
-    (newItems) => {
+    async (newItems) => {
       if (!newItems) {
         localCategories.value = [];
         return;
       }
+
+      const data = await dataStore.fetchAllMeshComponents(viewId);
+      componentsCache.value = markRaw(data);
+
       localCategories.value = newItems.map((newCategory) => {
         const existing = localCategories.value.find((category) => category.id === newCategory.id);
         if (existing) {

package/app/composables/project_manager.js

@@ -5,9 +5,9 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 import { importWorkflowFromSnapshot } from "@ogw_front/utils/import_workflow";
 
 import { useAppStore } from "@ogw_front/stores/app";
+import { useBackStore } from "@ogw_front/stores/back";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useGeodeStore } from "@ogw_front/stores/geode";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -15,13 +15,13 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 async function exportProject() {
   console.log("[export triggered]");
   const appStore = useAppStore();
-  const geodeStore = useGeodeStore();
+  const backStore = useBackStore();
   const snapshot = await appStore.exportStores();
   const schema = back_schemas.opengeodeweb_back.export_project;
   const defaultName = "project.vease";
 
   const result = await $fetch(schema.$id, {
-    baseURL: geodeStore.base_url,
+    baseURL: backStore.base_url,
     method: schema.methods.find((method) => method !== "OPTIONS"),
     body: { snapshot, filename: defaultName },
   });
@@ -30,7 +30,7 @@ async function exportProject() {
 }
 
 async function importProject(file) {
-  const geodeStore = useGeodeStore();
+  const backStore = useBackStore();
   const dataStyleStore = useDataStyleStore();
   const viewerStore = useViewerStore();
   const dataStore = useDataStore();
@@ -63,7 +63,7 @@ async function importProject(file) {
   form.append("file", file, originalFileName);
 
   const result = await $fetch(schemaImport.$id, {
-    baseURL: geodeStore.base_url,
+    baseURL: backStore.base_url,
     method: "POST",
     body: form,
   });

package/app/composables/virtual_tree.js

@@ -30,13 +30,14 @@ export function useVirtualTree(propsIn, emit) {
     emit("update:opened", [...newOpened]);
   }
 
-  function getAllChildrenIds(item, ids = []) {
+  function getLeafChildrenIds(item, ids = []) {
     const children = item[actualItemProps.value.children];
-    if (children) {
+    if (children && children.length > 0) {
       for (const child of children) {
-        ids.push(child[actualItemProps.value.value]);
-        getAllChildrenIds(child, ids);
+        getLeafChildrenIds(child, ids);
       }
+    } else {
+      ids.push(item[actualItemProps.value.value]);
     }
     return ids;
   }
@@ -47,7 +48,7 @@ export function useVirtualTree(propsIn, emit) {
       return true;
     }
     if (actualSelection.value.strategy === "classic") {
-      const childrenIds = getAllChildrenIds(item);
+      const childrenIds = getLeafChildrenIds(item);
       return (
         childrenIds.length > 0 && childrenIds.every((childId) => selectedSet.value.has(childId))
       );
@@ -59,7 +60,7 @@ export function useVirtualTree(propsIn, emit) {
     if (actualSelection.value.strategy !== "classic") {
       return false;
     }
-    const childrenIds = getAllChildrenIds(item);
+    const childrenIds = getLeafChildrenIds(item);
     if (childrenIds.length === 0) {
       return false;
     }
@@ -75,7 +76,7 @@ export function useVirtualTree(propsIn, emit) {
     const isCurrentlySelected = newSelected.has(id) || isSelected(item);
 
     if (actualSelection.value.strategy === "classic") {
-      const childrenIds = getAllChildrenIds(item);
+      const childrenIds = getLeafChildrenIds(item);
       if (isCurrentlySelected) {
         newSelected.delete(id);
         for (const childId of childrenIds) {

package/app/stores/{geode.js → back.js}

@@ -10,11 +10,12 @@ import { useInfraStore } from "@ogw_front/stores/infra";
 const MILLISECONDS_IN_SECOND = 1000;
 const DEFAULT_PING_INTERVAL_SECONDS = 10;
 
-export const useGeodeStore = defineStore("geode", {
+export const useBackStore = defineStore("back", {
   state: () => ({
     default_local_port: "5000",
     request_counter: 0,
     status: Status.NOT_CONNECTED,
+    version: "0.0.0",
   }),
   getters: {
     protocol() {
@@ -148,6 +149,20 @@ export const useGeodeStore = defineStore("geode", {
         },
       );
     },
+    get_version(schema) {
+      if (!schema) {
+        return;
+      }
+      return this.request(
+        schema,
+        {},
+        {
+          response_function: (response) => {
+            this.version = response.microservice_version;
+          },
+        },
+      );
+    },
   },
   share: {
     omit: ["status"],

package/app/stores/data.js

@@ -5,6 +5,8 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { database } from "@ogw_internal/database/database.js";
+import { useDataCollections } from "./data_helpers/collections.js";
+import { useDataMesh } from "./data_helpers/mesh.js";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
@@ -16,6 +18,27 @@ export const useDataStore = defineStore("data", () => {
   const model_components_db = database.model_components;
   const model_components_relation_db = database.model_components_relation;
 
+  const {
+    formatedMeshComponents,
+    refFormatedMeshComponents,
+    getMeshComponentsByType,
+    getAllMeshComponents,
+    fetchAllMeshComponents,
+    getMeshComponentGeodeIds,
+    getCornersGeodeIds,
+    getLinesGeodeIds,
+    getSurfacesGeodeIds,
+    getBlocksGeodeIds,
+  } = useDataMesh();
+
+  const {
+    hasCollectionComponents,
+    getAllCollectionComponents,
+    fetchAllCollectionComponents,
+    formatedCollectionComponents,
+    refFormatedCollectionComponents,
+  } = useDataCollections();
+
   async function item(id) {
     const data_item = await data_db.get(id);
     if (!data_item) {
@@ -42,84 +65,6 @@ export const useDataStore = defineStore("data", () => {
     );
   }
 
-  async function formatedMeshComponents(modelId) {
-    const items = await model_components_db.where("id").equals(modelId).toArray();
-    const componentTitles = {
-      Corner: "Corners",
-      Line: "Lines",
-      Surface: "Surfaces",
-      Block: "Blocks",
-    };
-
-    const componentsByType = {};
-    for (const component_item of items) {
-      if (componentTitles[component_item.type]) {
-        if (!componentsByType[component_item.type]) {
-          componentsByType[component_item.type] = [];
-        }
-        componentsByType[component_item.type].push(component_item);
-      }
-    }
-
-    return Object.keys(componentTitles)
-      .filter((type) => componentsByType[type])
-      .map((type) => ({
-        id: type,
-        title: componentTitles[type],
-        children: componentsByType[type].map((meshComponent) => ({
-          id: meshComponent.geode_id,
-          title: meshComponent.name,
-          category: meshComponent.type,
-          viewer_id: Number(meshComponent.viewer_id),
-          is_active: meshComponent.is_active,
-        })),
-      }));
-  }
-
-  async function getMeshComponentsByType(modelId, type) {
-    const components = await model_components_db
-      .where("[id+type]")
-      .equals([modelId, type])
-      .toArray();
-    return components.map((meshComponent) => ({
-      id: meshComponent.geode_id,
-      title: meshComponent.name,
-      category: meshComponent.type,
-      viewer_id: Number(meshComponent.viewer_id),
-      is_active: meshComponent.is_active,
-    }));
-  }
-
-  async function getAllMeshComponents(modelId) {
-    const items = await model_components_db.where("id").equals(modelId).toArray();
-    return items.map((meshComponent) => ({
-      id: meshComponent.geode_id,
-      title: meshComponent.name,
-      category: meshComponent.type,
-      viewer_id: Number(meshComponent.viewer_id),
-      is_active: meshComponent.is_active,
-    }));
-  }
-
-  async function fetchAllMeshComponents(modelId) {
-    const components = await getAllMeshComponents(modelId);
-    const byType = {};
-    for (const component of components) {
-      if (!byType[component.category]) {
-        byType[component.category] = [];
-      }
-      byType[component.category].push(component);
-    }
-    return byType;
-  }
-
-  function refFormatedMeshComponents(modelId) {
-    return useObservable(
-      liveQuery(() => formatedMeshComponents(modelId)),
-      { initialValue: undefined },
-    );
-  }
-
   async function meshComponentType(modelId, geode_id) {
     const component = await model_components_db
       .where("[id+geode_id]")
@@ -227,30 +172,6 @@ export const useDataStore = defineStore("data", () => {
     await database.model_components_relation.where("id").equals(modelId).delete();
   }
 
-  async function getMeshComponentGeodeIds(modelId, type) {
-    const components = await model_components_db
-      .where("[id+type]")
-      .equals([modelId, type])
-      .toArray();
-    return components.map((component) => component.geode_id);
-  }
-
-  async function getCornersGeodeIds(modelId) {
-    return await getMeshComponentGeodeIds(modelId, "Corner");
-  }
-
-  async function getLinesGeodeIds(modelId) {
-    return await getMeshComponentGeodeIds(modelId, "Line");
-  }
-
-  async function getSurfacesGeodeIds(modelId) {
-    return await getMeshComponentGeodeIds(modelId, "Surface");
-  }
-
-  async function getBlocksGeodeIds(modelId) {
-    return await getMeshComponentGeodeIds(modelId, "Block");
-  }
-
   async function getAllModelComponentsViewerIds(modelId) {
     const components = await model_components_db.where("id").equals(modelId).toArray();
     return components.map((component) => Number.parseInt(component.viewer_id, 10));
@@ -283,10 +204,6 @@ export const useDataStore = defineStore("data", () => {
     allItems,
     refItem,
     meshComponentType,
-    formatedMeshComponents,
-    refFormatedMeshComponents,
-    getMeshComponentsByType,
-    getAllMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
@@ -294,18 +211,29 @@ export const useDataStore = defineStore("data", () => {
     addComponentRelations,
     deleteItem,
     updateItem,
-    getCornersGeodeIds,
-    getLinesGeodeIds,
-    getSurfacesGeodeIds,
-    getBlocksGeodeIds,
     getAllModelComponentsViewerIds,
-    getMeshComponentGeodeIds,
     getMeshComponentsViewerIds,
     getComponentByViewerId,
 
     exportStores,
     importStores,
     clear,
+
+    formatedMeshComponents,
+    refFormatedMeshComponents,
+    getMeshComponentsByType,
+    getAllMeshComponents,
     fetchAllMeshComponents,
+    getMeshComponentGeodeIds,
+    getCornersGeodeIds,
+    getLinesGeodeIds,
+    getSurfacesGeodeIds,
+    getBlocksGeodeIds,
+
+    hasCollectionComponents,
+    getAllCollectionComponents,
+    fetchAllCollectionComponents,
+    formatedCollectionComponents,
+    refFormatedCollectionComponents,
   };
 });

package/app/stores/data_helpers/collections.js

@@ -0,0 +1,102 @@
+import { database } from "@ogw_internal/database/database.js";
+import { liveQuery } from "dexie";
+import { useDataMesh } from "./mesh.js";
+import { useObservable } from "@vueuse/rxjs";
+
+export function useDataCollections() {
+  const model_components_db = database.model_components;
+  const model_components_relation_db = database.model_components_relation;
+  const { getAllMeshComponents } = useDataMesh();
+
+  async function hasCollectionComponents(modelId) {
+    const count = await model_components_db
+      .where("id")
+      .equals(modelId)
+      .and((component) =>
+        ["Horizon", "Fault", "FaultBlock", "StratigraphicUnit", "ModelBoundary"].includes(
+          component.type,
+        ),
+      )
+      .count();
+    return count > 0;
+  }
+
+  async function getAllCollectionComponents(modelId) {
+    const items = await model_components_db.where("id").equals(modelId).toArray();
+    return items
+      .filter((component) =>
+        ["Horizon", "Fault", "FaultBlock", "StratigraphicUnit", "ModelBoundary"].includes(
+          component.type,
+        ),
+      )
+      .map((component) => ({
+        id: component.geode_id,
+        title: component.name,
+        category: component.type,
+        viewer_id: Number(component.viewer_id),
+        is_active: component.is_active,
+      }));
+  }
+
+  async function fetchAllCollectionComponents(modelId) {
+    const components = await getAllCollectionComponents(modelId);
+    const relations = await model_components_relation_db.where("id").equals(modelId).toArray();
+    const allMeshComponents = await getAllMeshComponents(modelId);
+    const meshComponentsById = {};
+    for (const meshComponent of allMeshComponents) {
+      meshComponentsById[meshComponent.id] = meshComponent;
+    }
+
+    const byType = {};
+    for (const component of components) {
+      if (!byType[component.category]) {
+        byType[component.category] = [];
+      }
+      const itemRelations = relations.filter(
+        (relation) => relation.parent === component.id && relation.type === "collection",
+      );
+      const children = itemRelations
+        .map((relation) => meshComponentsById[relation.child])
+        .filter(Boolean);
+      byType[component.category].push({
+        ...component,
+        children,
+      });
+    }
+    return byType;
+  }
+
+  async function formatedCollectionComponents(modelId) {
+    const byType = await fetchAllCollectionComponents(modelId);
+    const collectionTitles = {
+      Horizon: "Horizons",
+      Fault: "Faults",
+      FaultBlock: "FaultBlocks",
+      StratigraphicUnit: "StratigraphicUnits",
+      ModelBoundary: "ModelBoundaries",
+    };
+
+    return Object.keys(collectionTitles)
+      .filter((type) => byType[type] && byType[type].length > 0)
+      .map((type) => ({
+        id: type,
+        title: collectionTitles[type],
+        children: byType[type],
+      }));
+  }
+
+  function refFormatedCollectionComponents(modelId) {
+    return useObservable(
+      liveQuery(() => formatedCollectionComponents(modelId)),
+      { initialValue: undefined },
+    );
+  }
+
+  return {
+    hasCollectionComponents,
+    getAllCollectionComponents,
+    fetchAllCollectionComponents,
+    formatedCollectionComponents,
+    refFormatedCollectionComponents,
+  };
+}

package/app/stores/data_helpers/mesh.js

@@ -0,0 +1,122 @@
+import { database } from "@ogw_internal/database/database.js";
+import { liveQuery } from "dexie";
+import { useObservable } from "@vueuse/rxjs";
+
+export function useDataMesh() {
+  const model_components_db = database.model_components;
+
+  async function formatedMeshComponents(modelId) {
+    const items = await model_components_db.where("id").equals(modelId).toArray();
+    const componentTitles = {
+      Corner: "Corners",
+      Line: "Lines",
+      Surface: "Surfaces",
+      Block: "Blocks",
+    };
+
+    const componentsByType = {};
+    for (const component_item of items) {
+      if (componentTitles[component_item.type]) {
+        if (!componentsByType[component_item.type]) {
+          componentsByType[component_item.type] = [];
+        }
+        componentsByType[component_item.type].push(component_item);
+      }
+    }
+
+    return Object.keys(componentTitles)
+      .filter((type) => componentsByType[type])
+      .map((type) => ({
+        id: type,
+        title: componentTitles[type],
+        children: componentsByType[type].map((meshComponent) => ({
+          id: meshComponent.geode_id,
+          title: meshComponent.name,
+          category: meshComponent.type,
+          viewer_id: Number(meshComponent.viewer_id),
+          is_active: meshComponent.is_active,
+        })),
+      }));
+  }
+
+  function refFormatedMeshComponents(modelId) {
+    return useObservable(
+      liveQuery(() => formatedMeshComponents(modelId)),
+      { initialValue: undefined },
+    );
+  }
+
+  async function getMeshComponentsByType(modelId, type) {
+    const components = await model_components_db
+      .where("[id+type]")
+      .equals([modelId, type])
+      .toArray();
+    return components.map((meshComponent) => ({
+      id: meshComponent.geode_id,
+      title: meshComponent.name,
+      category: meshComponent.type,
+      viewer_id: Number(meshComponent.viewer_id),
+      is_active: meshComponent.is_active,
+    }));
+  }
+
+  async function getAllMeshComponents(modelId) {
+    const items = await model_components_db.where("id").equals(modelId).toArray();
+    return items.map((meshComponent) => ({
+      id: meshComponent.geode_id,
+      title: meshComponent.name,
+      category: meshComponent.type,
+      viewer_id: Number(meshComponent.viewer_id),
+      is_active: meshComponent.is_active,
+    }));
+  }
+
+  async function fetchAllMeshComponents(modelId) {
+    const components = await getAllMeshComponents(modelId);
+    const byType = {};
+    for (const component of components) {
+      if (!byType[component.category]) {
+        byType[component.category] = [];
+      }
+      byType[component.category].push(component);
+    }
+    return byType;
+  }
+
+  async function getMeshComponentGeodeIds(modelId, type) {
+    const components = await model_components_db
+      .where("[id+type]")
+      .equals([modelId, type])
+      .toArray();
+    return components.map((component) => component.geode_id);
+  }
+
+  async function getCornersGeodeIds(modelId) {
+    return await getMeshComponentGeodeIds(modelId, "Corner");
+  }
+
+  async function getLinesGeodeIds(modelId) {
+    return await getMeshComponentGeodeIds(modelId, "Line");
+  }
+
+  async function getSurfacesGeodeIds(modelId) {
+    return await getMeshComponentGeodeIds(modelId, "Surface");
+  }
+
+  async function getBlocksGeodeIds(modelId) {
+    return await getMeshComponentGeodeIds(modelId, "Block");
+  }
+
+  return {
+    formatedMeshComponents,
+    refFormatedMeshComponents,
+    getMeshComponentsByType,
+    getAllMeshComponents,
+    fetchAllMeshComponents,
+    getMeshComponentGeodeIds,
+    getCornersGeodeIds,
+    getLinesGeodeIds,
+    getSurfacesGeodeIds,
+    getBlocksGeodeIds,
+  };
+}

package/app/stores/treeview.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-import { ref, toRaw, watch } from "vue";
+import { ref, watch } from "vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { database } from "@ogw_internal/database/database";
 
@@ -45,13 +45,20 @@ export const useTreeviewStore = defineStore("treeview", () => {
   watch(
     [opened_views, panelWidth, additionalPanelWidth, selection, rowHeights],
     () => {
+      // oxlint-disable-next-line unicorn/prefer-structured-clone
+      const clean_opened_views = JSON.parse(JSON.stringify(opened_views.value));
+      // oxlint-disable-next-line unicorn/prefer-structured-clone
+      const clean_selectionIds = JSON.parse(JSON.stringify(selection.value));
+      // oxlint-disable-next-line unicorn/prefer-structured-clone
+      const clean_rowHeights = JSON.parse(JSON.stringify(rowHeights.value));
+
       database.treeview_config.put({
         id: "main",
-        opened_views: toRaw(opened_views.value),
+        opened_views: clean_opened_views,
         panelWidth: panelWidth.value,
         additionalPanelWidth: additionalPanelWidth.value,
-        selectionIds: toRaw(selection.value),
-        rowHeights: toRaw(rowHeights.value),
+        selectionIds: clean_selectionIds,
+        rowHeights: clean_rowHeights,
       });
     },
     { deep: true },
@@ -127,15 +134,18 @@ export const useTreeviewStore = defineStore("treeview", () => {
     }
   }
 
-  function displayAdditionalTree(id, title, geodeObjectType) {
-    const index = opened_views.value.findIndex((view) => view.id === id);
+  function displayAdditionalTree(id, title, geodeObjectType, viewType = "model_components") {
+    const viewId = `${id}_${viewType}`;
+    const index = opened_views.value.findIndex((view) => view.id === viewId);
     if (index !== -1) {
-      return closeView(id);
+      return closeView(viewId);
     }
     additionalPanelWidth.value = panelWidth.value;
     opened_views.value.push({
       type: "component",
-      id,
+      id: viewId,
+      modelId: id,
+      viewType,
       title: title || id,
       geode_object_type: geodeObjectType,
       scrollTop: 0,