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

package/app/components/Viewer/ObjectTree/Layout.vue

@@ -1,5 +1,6 @@
 <script setup>
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
+import ModelCollections from "@ogw_front/components/Viewer/ObjectTree/Views/ModelCollections.vue";
 import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
@@ -263,15 +264,17 @@ function onVerticalResizeStart(event, index) {
               :icon="geode_objects[view.geode_object_type]?.image"
               :scroll-top="view.scrollTop"
               closable
-              :border-radius="index === additionalViews.length - 1 ? '0 16px 16px 0' : '0'"
+              :border-radius="`0 ${index === 0 ? '16px' : '0'} ${index === additionalViews.length - 1 ? '16px' : '0'} 0`"
               :border-left="false"
               @close="treeviewStore.closeView(view.id)"
               @dragstart="onDragStart(index + 1)"
               @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
             >
-              <ModelComponents
+              <component
+                :is="view.viewType === 'model_collections' ? ModelCollections : ModelComponents"
                 data-testid="modelComponentsObjectTree"
-                :id="view.id"
+                :id="view.modelId || view.id"
+                :view-id="view.id"
                 @show-menu="emit('show-menu', $event)"
               />
             </ViewerObjectTreeBox>

package/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue

@@ -75,6 +75,31 @@ function isModel(item) {
   );
 }
 
+const hasCollectionsMap = reactive({});
+
+watch(
+  () => treeviewStore.items,
+  async (newItems) => {
+    const models = newItems
+      .flatMap((group) => group.children || [])
+      .filter((item) => isModel(item));
+    const fetchPromises = models.map(async (model) => {
+      if (hasCollectionsMap[model.id] === undefined) {
+        hasCollectionsMap[model.id] = false;
+        try {
+          const hasCollections = await dataStore.hasCollectionComponents(model.id);
+          hasCollectionsMap[model.id] = hasCollections;
+        } catch (error) {
+          console.error("Failed to check collections", error);
+        }
+      }
+    });
+
+    await Promise.all(fetchPromises);
+  },
+  { immediate: true, deep: true },
+);
+
 function handleHoverEnter({ item, immediate = false }) {
   const actualItem = item.raw || item;
 
@@ -169,7 +194,28 @@ function expandAll() {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
+            treeviewStore.displayAdditionalTree(
+              item.id,
+              item.title,
+              item.geode_object_type,
+              'model_components',
+            )
+          "
+        />
+        <v-btn
+          v-if="isModel(item) && hasCollectionsMap[item.id]"
+          icon="mdi-format-list-group"
+          size="medium"
+          class="ml-2"
+          variant="text"
+          v-tooltip="'Model\'s collections'"
+          @click.stop="
+            treeviewStore.displayAdditionalTree(
+              item.id,
+              item.title,
+              item.geode_object_type,
+              'model_collections',
+            )
           "
         />
       </template>

package/app/components/Viewer/ObjectTree/Views/ModelCollections.vue

@@ -0,0 +1,222 @@
+<script setup>
+import { sortAndFormatItems, useTreeFilter } from "@ogw_front/composables/tree_filter";
+import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
+import FetchingData from "@ogw_front/components/FetchingData.vue";
+import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useModelCollections } from "@ogw_front/composables/model_collections";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const { id, viewId } = defineProps({
+  id: { type: String, required: true },
+  viewId: { type: String, required: false },
+});
+const actualViewId = viewId || id;
+const { onHoverEnter, onHoverLeave } = useHoverhighlight();
+const hybridViewerStore = useHybridViewerStore();
+const emit = defineEmits(["show-menu"]);
+
+const treeviewStore = useTreeviewStore();
+const {
+  items: rawItems,
+  collectionsCache: componentsCache,
+  localCategories,
+  selection: visibleComponents,
+  updateVisibility,
+} = useModelCollections(id);
+
+const currentView = computed(() =>
+  treeviewStore.opened_views.find((view) => view.id === actualViewId),
+);
+
+const opened = computed({
+  get: () => currentView.value?.opened || [],
+  set: (val) => treeviewStore.setOpened(actualViewId, val),
+});
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  processedItems: filteredCategories,
+  availableFilterOptions,
+  toggleSort,
+  customFilter,
+  applySearchFilter,
+} = useTreeFilter(localCategories);
+
+function onUpdateSelection(newSelection) {
+  const finalSelection = applySearchFilter(newSelection, visibleComponents.value);
+  updateVisibility(finalSelection);
+}
+
+const visibleSelection = computed(() => applySearchFilter(visibleComponents.value, []));
+
+const itemsForTreeView = computed(() => {
+  if (search.value && componentsCache.value) {
+    const query = search.value.toLowerCase();
+    const result = [];
+    for (const type of Object.keys(componentsCache.value)) {
+      const matches = componentsCache.value[type].filter(
+        (component) =>
+          component.title.toLowerCase().includes(query) ||
+          component.id.toLowerCase().includes(query),
+      );
+      if (matches.length > 0) {
+        result.push({
+          id: type,
+          title: `${type}s (${matches.length})`,
+          children: sortAndFormatItems(matches, sortType.value),
+        });
+      }
+    }
+    return result;
+  }
+
+  const result = [];
+  for (const category of filteredCategories.value) {
+    result.push({
+      ...category,
+      children: sortAndFormatItems(componentsCache.value?.[category.id], sortType.value),
+    });
+  }
+  return result;
+});
+
+function showContextMenu(event, item) {
+  const actualItem = item.raw || item;
+  emit("show-menu", {
+    event,
+    itemId: actualItem.category ? actualItem.id : id,
+    context_type: actualItem.category ? "model_component" : "model_component_type",
+    modelId: id,
+    modelComponentType: actualItem.category ? undefined : actualItem.id,
+  });
+}
+
+function handleHoverEnter({ item, immediate = false }) {
+  const actualItem = item.raw || item;
+
+  if (!actualItem.category && (!actualItem.children || actualItem.children.length === 0)) {
+    return;
+  }
+
+  const viewerIdsToHover = extractIds(actualItem);
+
+  onHoverEnter(id, () => viewerIdsToHover, "model", immediate);
+}
+
+function handleHoverLeave() {
+  onHoverLeave(id);
+}
+
+function expandAll() {
+  const allIds = [];
+  function traverse(itemsList) {
+    for (const item of itemsList) {
+      if (item.children && item.children.length > 0) {
+        allIds.push(item.id);
+        traverse(item.children);
+      }
+    }
+  }
+  traverse(itemsForTreeView.value);
+  opened.value = allIds;
+}
+
+function extractIds(node) {
+  if (node.children && node.children.length > 0) {
+    return node.children.flatMap((child) => extractIds(child));
+  }
+  if (node.viewer_id !== undefined && node.viewer_id !== null) {
+    return [node.viewer_id];
+  }
+  return [];
+}
+
+function getLeafViewerIds(item) {
+  const actualItem = item.raw || item;
+  return extractIds(actualItem);
+}
+</script>
+
+<template>
+  <div class="tree-view-container">
+    <ObjectTreeControls
+      v-model:search="search"
+      :sort-type="sortType"
+      :filter-options="filterOptions"
+      :available-filter-options="availableFilterOptions"
+      :is-collapsed="opened.length === 0"
+      @toggle-sort="toggleSort"
+      @collapse-all="opened = []"
+      @expand-all="expandAll"
+    />
+
+    <FetchingData v-if="rawItems === undefined" :size="48" :width="4" text="" />
+
+    <CommonTreeView
+      :selected="visibleSelection"
+      v-model:opened="opened"
+      :items="itemsForTreeView"
+      :options="{
+        selection: { selectable: true, strategy: 'classic' },
+        search,
+        customFilter,
+      }"
+      :scroll-top="currentView?.scrollTop || 0"
+      class="transparent-treeview virtual-tree-height"
+      @update:selected="onUpdateSelection"
+      @click:item="onUpdateSelection([$event.id, ...visibleComponents])"
+      @update:scroll-top="treeviewStore.setScrollTop(actualViewId, $event)"
+      @hover:enter="handleHoverEnter"
+      @hover:leave="handleHoverLeave"
+    >
+      <template #title="{ item, isLeaf }">
+        <ObjectTreeItemLabel
+          :item="item"
+          :is-leaf="isLeaf"
+          show-tooltip
+          class="text-body-1"
+          @contextmenu.prevent.stop="showContextMenu($event, item)"
+        />
+      </template>
+
+      <template #append="{ item }">
+        <v-btn
+          v-if="item.category || (item.children && item.children.length > 0)"
+          icon="mdi-target"
+          size="medium"
+          variant="text"
+          v-tooltip="'Focus camera on object'"
+          @click.stop="hybridViewerStore.focusCameraOnObject(id, getLeafViewerIds(item))"
+        />
+      </template>
+    </CommonTreeView>
+  </div>
+</template>
+
+<style scoped>
+.tree-view-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.virtual-tree-height {
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.transparent-treeview {
+  background-color: transparent;
+}
+
+:deep(.v-list-item__overlay) {
+  display: none !important;
+}
+</style>

package/app/components/Viewer/ObjectTree/Views/ModelComponents.vue

@@ -9,7 +9,11 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useModelComponents } from "@ogw_front/composables/model_components";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const { id } = defineProps({ id: { type: String, required: true } });
+const { id, viewId } = defineProps({
+  id: { type: String, required: true },
+  viewId: { type: String, required: false },
+});
+const actualViewId = viewId || id;
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 const hybridViewerStore = useHybridViewerStore();
 const emit = defineEmits(["show-menu"]);
@@ -23,11 +27,13 @@ const {
   updateVisibility,
 } = useModelComponents(id);
 
-const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === id));
+const currentView = computed(() =>
+  treeviewStore.opened_views.find((view) => view.id === actualViewId),
+);
 
 const opened = computed({
   get: () => currentView.value?.opened || [],
-  set: (val) => treeviewStore.setOpened(id, val),
+  set: (val) => treeviewStore.setOpened(actualViewId, val),
 });
 
 const {
@@ -155,7 +161,7 @@ function expandAll() {
       class="transparent-treeview virtual-tree-height"
       @update:selected="onUpdateSelection"
       @click:item="onUpdateSelection([$event.id, ...visibleComponents])"
-      @update:scroll-top="treeviewStore.setScrollTop(id, $event)"
+      @update:scroll-top="treeviewStore.setScrollTop(actualViewId, $event)"
       @hover:enter="handleHoverEnter"
       @hover:leave="handleHoverLeave"
     >

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/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/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,

package/internal/stores/hybrid_viewer_camera_animation.js

@@ -4,6 +4,7 @@ const NEAR_ZERO_THRESHOLD = 1e-10;
 const SLERP_LINEAR_THRESHOLD = 0.9995;
 const LONG_ANIMATION_DURATION = 1000;
 const SHORT_ANIMATION_DURATION = 500;
+const MID_ANIMATION_RATIO = 0.5;
 
 function vecSub(vector, other) {
   return [vector[0] - other[0], vector[1] - other[1], vector[2] - other[2]];
@@ -21,7 +22,7 @@ function vecNormalize(vector) {
   return [vector[0] / len, vector[1] / len, vector[2] / len];
 }
 
-function slerp(from, target, ratio) {
+function slerp(from, target, ratio, mid) {
   const normFrom = vecNormalize(from);
   const normTarget = vecNormalize(target);
   let dotProduct =
@@ -34,6 +35,11 @@ function slerp(from, target, ratio) {
       normFrom[2] + (normTarget[2] - normFrom[2]) * ratio,
     ]);
   }
+  if (dotProduct < -SLERP_LINEAR_THRESHOLD && mid) {
+    return ratio < MID_ANIMATION_RATIO
+      ? slerp(normFrom, mid, ratio * 2)
+      : slerp(mid, normTarget, (ratio - MID_ANIMATION_RATIO) * 2);
+  }
   const theta = Math.acos(dotProduct);
   const sinTheta = Math.sin(theta);
   const weightFrom = Math.sin((1 - ratio) * theta) / sinTheta;
@@ -71,6 +77,22 @@ function animateCamera(options) {
   const targetDir = vecSub(targetState.position, targetState.focal_point);
   const startDist = vecLength(startDir);
   const targetDist = vecLength(targetDir);
+
+  const normStart = vecNormalize(startDir);
+  const normTarget = vecNormalize(targetDir);
+  const startTargetDot =
+    normStart[0] * normTarget[0] + normStart[1] * normTarget[1] + normStart[2] * normTarget[2];
+
+  let antipodalMid = undefined;
+  if (startTargetDot < -SLERP_LINEAR_THRESHOLD) {
+    const normUp = vecNormalize(startState.view_up);
+    antipodalMid = vecNormalize([
+      normStart[1] * normUp[2] - normStart[2] * normUp[1],
+      normStart[2] * normUp[0] - normStart[0] * normUp[2],
+      normStart[0] * normUp[1] - normStart[1] * normUp[0],
+    ]);
+  }
+
   const startTime = performance.now();
   function animate(currentTime) {
     const progress = Math.min((currentTime - startTime) / duration, 1);
@@ -79,7 +101,7 @@ function animateCamera(options) {
         ? 1 - (1 - progress) ** easeExponent
         : progress * (2 - progress);
     const bump = bumpMultiplier * Math.sin(Math.PI * progress);
-    const dir = slerp(startDir, targetDir, ease);
+    const dir = slerp(startDir, targetDir, ease, antipodalMid);
     const dist = startDist + (targetDist - startDist) * ease + bump;
     const focalPoint = startState.focal_point.map(
       (startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.20.1",
+  "version": "10.21.0-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",