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

package/app/components/CrsSelector.vue

@@ -1,6 +1,6 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.geographic_coordinate_systems;
 
@@ -16,7 +16,7 @@ const data_table_loading = ref(false);
 const crs_list = ref([]);
 const selected_crs = ref([]);
 const toggle_loading = useToggle(data_table_loading);
-const geodeStore = useGeodeStore();
+const backStore = useBackStore();
 
 watch(selected_crs, (new_value) => {
   const crs = get_selected_crs(new_value[0]);
@@ -38,7 +38,7 @@ function get_selected_crs(crs_code) {
 async function get_crs_table() {
   const params = { geode_object_type };
   toggle_loading();
-  await geodeStore.request(schema, params, {
+  await backStore.request(schema, params, {
     response_function: (response) => {
       crs_list.value = response.crs_list;
     },

package/app/components/ExtensionSelector.vue

@@ -2,7 +2,7 @@
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
 import FetchingData from "@ogw_front/components/FetchingData";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions;
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
@@ -19,10 +19,10 @@ const toggle_loading = useToggle(loading);
 async function get_output_file_extensions() {
   toggle_loading();
   geode_objects_and_output_extensions.value = {};
-  const geodeStore = useGeodeStore();
+  const backStore = useBackStore();
   const values = await Promise.all(
     filenames.map(async (filename) => {
-      const response = await geodeStore.request(schema, {
+      const response = await backStore.request(schema, {
         geode_object_type,
         filename,
       });

package/app/components/FileSelector.vue

@@ -3,7 +3,7 @@ import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
 import FetchingData from "@ogw_front/components/FetchingData";
 import FileUploader from "@ogw_front/components/FileUploader";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.allowed_files;
 
@@ -46,8 +46,8 @@ function files_uploaded_event(value) {
 
 async function get_allowed_files() {
   toggle_loading();
-  const geodeStore = useGeodeStore();
-  const response = await geodeStore.request(schema, {});
+  const backStore = useBackStore();
+  const response = await backStore.request(schema, {});
   accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
   toggle_loading();
 }

package/app/components/FileUploader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer";
 import DragAndDrop from "@ogw_front/components/DragAndDrop";
@@ -15,7 +15,7 @@ const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps(
   mini: { type: Boolean, default: false },
 });
 
-const geodeStore = useGeodeStore();
+const backStore = useBackStore();
 const internal_files = ref(files);
 const dragAndDropRef = useTemplateRef("dragAndDropRef");
 const csv_dialog = ref(false);
@@ -49,7 +49,7 @@ async function onCsvConfirm(result) {
   });
 
   current_csv_file.value.isConfigured = true;
-  await geodeStore.upload(json_file);
+  await backStore.upload(json_file);
   internal_files.value = [...internal_files.value];
   csv_dialog.value = false;
 }
@@ -72,7 +72,7 @@ function removeFile(index) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
+  const promise_array = internal_files.value.map((file) => backStore.upload(file));
   await Promise.all(promise_array);
   files_uploaded.value = true;
   toggle_loading();

package/app/components/Inspector/InspectionButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.inspect_file;
 
@@ -18,9 +18,9 @@ async function get_inspection_results() {
     geode_object_type,
     filename,
   };
-  const geodeStore = useGeodeStore();
+  const backStore = useBackStore();
 
-  await geodeStore.request(schema, params, {
+  await backStore.request(schema, params, {
     response_function: (response) => {
       emit("update_values", {
         inspection_result: [response.inspection_result],

package/app/components/Loading.vue

@@ -1,4 +1,7 @@
 <script setup>
+import { Status } from "@ogw_front/utils/status";
+import { useInfraStore } from "@ogw_front/stores/infra";
+
 const { logo, appName } = defineProps({
   logo: {
     type: String,
@@ -10,6 +13,12 @@ const { logo, appName } = defineProps({
   },
 });
 
+const infraStore = useInfraStore();
+
+const extensionStores = computed(() =>
+  infraStore.microservices.filter((store) => store.$id !== "back" && store.$id !== "viewer"),
+);
+
 const show = ref(false);
 const progress = ref(0);
 
@@ -76,6 +85,24 @@ onUnmounted(() => {
             <LoadingHeader :logo="logo" />
             <LoadingEcoMessages :app-name="appName" />
             <LoadingProgress :progress="progress" />
+
+            <div class="d-flex flex-wrap justify-center gap-4 w-100 mt-4">
+              <v-chip
+                v-for="store in extensionStores"
+                :key="store.$id"
+                :color="store.status === Status.CONNECTED ? 'success' : 'primary'"
+                variant="flat"
+              >
+                <v-icon
+                  start
+                  :icon="
+                    store.status === Status.CONNECTED ? 'mdi-check-circle' : 'mdi-loading mdi-spin'
+                  "
+                />
+                {{ store.$id.charAt(0).toUpperCase() + store.$id.slice(1) }}
+              </v-chip>
+            </div>
+
             <LoadingFooter />
           </div>
         </div>

package/app/components/MissingFilesSelector.vue

@@ -3,7 +3,7 @@ import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
 import FetchingData from "@ogw_front/components/FetchingData";
 import FileUploader from "@ogw_front/components/FileUploader";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.missing_files;
 
@@ -33,7 +33,7 @@ async function missing_files() {
   has_missing_files.value = false;
   mandatory_files.value = [];
   additional_files.value = [];
-  const geodeStore = useGeodeStore();
+  const backStore = useBackStore();
 
   const promise_array = filenames.map((filename) => {
     const isCsvFile =
@@ -45,7 +45,7 @@ async function missing_files() {
         additional_files: [],
       });
     }
-    return geodeStore.request(schema, { geode_object_type, filename });
+    return backStore.request(schema, { geode_object_type, filename });
   });
   const values = await Promise.all(promise_array);
   for (const value of values) {

package/app/components/ObjectSelector.vue

@@ -2,7 +2,7 @@
 import FetchingData from "@ogw_front/components/FetchingData.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.allowed_objects;
 
@@ -12,7 +12,7 @@ const { filenames } = defineProps({
   filenames: { type: Array, required: true },
 });
 
-const geodeStore = useGeodeStore();
+const backStore = useBackStore();
 
 const loading = ref(false);
 const allowed_objects = ref({});
@@ -52,7 +52,7 @@ async function get_allowed_objects() {
   toggle_loading();
   allowed_objects.value = {};
 
-  const promise_array = filenames.map((filename) => geodeStore.request(schema, { filename }));
+  const promise_array = filenames.map((filename) => backStore.request(schema, { filename }));
   const responses = await Promise.all(promise_array);
   const allowed_objects_list = responses.map((response) => response.allowed_objects);
   const all_keys = [...new Set(allowed_objects_list.flatMap((obj) => Object.keys(obj)))];

package/app/components/PackagesVersions.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { Status } from "@ogw_front/utils/status";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const { schema } = defineProps({
   schema: { type: Object, required: true },
 });
 
-const geodeStore = useGeodeStore();
+const backStore = useBackStore();
 const packages_versions = ref([]);
 
 async function get_packages_versions() {
-  await geodeStore.request(
+  await backStore.request(
     schema,
     {},
     {
@@ -22,7 +22,7 @@ async function get_packages_versions() {
 }
 
 watch(
-  () => geodeStore.status,
+  () => backStore.status,
   (value) => {
     if (value === Status.CONNECTED) {
       get_packages_versions();

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/components/Viewer/Options/AttributeSelector.vue

@@ -1,8 +1,8 @@
 <script setup>
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
-const geodeStore = useGeodeStore();
+const backStore = useBackStore();
 
 const name = defineModel("name", { type: String });
 const range = defineModel("range", { type: Array });
@@ -49,7 +49,7 @@ function resetRange() {
 }
 
 function getAttributes() {
-  geodeStore.request(
+  backStore.request(
     schema,
     { id },
     {

package/app/components/Viewer/Options/TextureItem.vue

@@ -1,7 +1,7 @@
 <script setup>
 import FileUploader from "@ogw_front/components/FileUploader";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
-import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useBackStore } from "@ogw_front/stores/back";
 
 const emit = defineEmits(["update_value"]);
 
@@ -18,14 +18,14 @@ const texture_id = ref("");
 texture_id.value = texture_id;
 
 const texture_coordinates = ref([]);
-const geodeStore = useGeodeStore();
+const backStore = useBackStore();
 
 onMounted(() => {
   getTextureCoordinates();
 });
 
 function getTextureCoordinates() {
-  geodeStore.request(
+  backStore.request(
     back_schemas.opengeodeweb_back.texture_coordinates,
     { id },
     {
@@ -38,7 +38,7 @@ function getTextureCoordinates() {
 
 async function files_uploaded_event(value) {
   if (value.length > 0) {
-    await geodeStore.request(
+    await backStore.request(
       back_schemas.opengeodeweb_back.save_viewable_file,
       {
         schema: back_schemas.opengeodeweb_back.save_viewable_file,