feat(treecomponentsTools): Sort by name/id, Search by id/name, filter…

.oxlintrc.json

@@ -119,7 +119,9 @@
         "vitest/no-hooks": "off",
         "vitest/no-importing-vitest-globals": "off",
         "max-lines-per-function": "off",
-        "max-statements": "off"
+        "max-statements": "off",
+        "vitest/prefer-to-be-truthy": "off",
+        "vitest/prefer-to-be-falsy": "off"
       }
     },
     {

app/components/ActionButton.vue

@@ -0,0 +1,39 @@
+<script setup>
+const DEFAULT_ICON_SIZE = 28;
+const {
+  icon,
+  tooltip,
+  color = undefined,
+  size = undefined,
+  variant = undefined,
+  density = "comfortable",
+  tooltipLocation = "left",
+  iconSize = DEFAULT_ICON_SIZE,
+} = defineProps({
+  icon: { type: String, required: true },
+  tooltip: { type: String, required: true },
+  color: { type: String },
+  size: { type: [String, Number] },
+  variant: { type: String },
+  density: { type: String },
+  tooltipLocation: { type: String },
+  iconSize: { type: [String, Number] },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <v-btn
+    :color="color"
+    :size="size"
+    :variant="variant"
+    :density="density"
+    v-tooltip:[tooltipLocation]="tooltip"
+    v-bind="$attrs"
+    icon
+    @click="emit('click', $event)"
+  >
+    <v-icon :size="iconSize">{{ icon }}</v-icon>
+  </v-btn>
+</template>

app/components/VeaseViewToolbar.vue

@@ -1,6 +1,7 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 
@@ -76,14 +77,11 @@ const camera_options = [
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
-        <v-btn
-          density="comfortable"
-          icon
+        <ActionButton
+          :icon="camera_option.icon"
+          :tooltip="camera_option.tooltip"
           @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
+        />
       </v-col>
     </v-row>
   </v-container>

app/components/ViewToolbar.vue

@@ -1,6 +1,7 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -45,14 +46,11 @@ const camera_options = [
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
-        <v-btn
-          density="comfortable"
-          icon
+        <ActionButton
+          :icon="camera_option.icon"
+          :tooltip="camera_option.tooltip"
           @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
+        />
       </v-col>
     </v-row>
   </v-container>

app/components/Viewer/BreadCrumb.vue

@@ -11,28 +11,24 @@ function goBackToFileTree() {
   treeviewStore.displayFileTree();
 }
 
-const model_id = computed(() => treeviewStore.model_id);
-
-const metaDatas = dataStore.refItem(model_id.value);
+const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
 </script>
 
 <template>
   <v-breadcrumbs class="mb-n10 breadcrumb-container">
     <div class="d-flex align-center gap-2 ml-2 mt-2 mb-1">
-      <v-menu v-if="treeviewStore.isAdditionnalTreeDisplayed" offset-y>
-        <template v-slot:activator="{ props }">
-          <v-btn icon variant="text" size="medium" v-bind="props" @click="goBackToFileTree">
-            <v-icon size="large">mdi-file-tree</v-icon>
-          </v-btn>
-          <span class="text-h5 font-weight-bold">/</span>
-          <v-icon size="x-large">
-            {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
-          </v-icon>
-          <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-            Model Explorer ({{ metaDatas.name }})
-          </span>
-        </template>
-      </v-menu>
+      <template v-if="treeviewStore.isAdditionnalTreeDisplayed">
+        <v-btn icon variant="text" size="medium" @click.stop="goBackToFileTree">
+          <v-icon size="large">mdi-file-tree</v-icon>
+        </v-btn>
+        <span class="text-h5 font-weight-bold">/</span>
+        <v-icon size="large">
+          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
+        </v-icon>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
+          Model Explorer ({{ metaDatas.value.name }})
+        </span>
+      </template>
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
@@ -44,6 +40,8 @@ const metaDatas = dataStore.refItem(model_id.value);
 
 <style scoped>
 .breadcrumb-container {
+  position: relative;
+  z-index: 10;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;

app/components/Viewer/TreeComponent.vue

@@ -1,10 +1,11 @@
 <script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
+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";
 
-import { compareSelections } from "@ogw_front/utils/treeview";
-
 const dataStyleStore = useDataStyleStore();
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -14,12 +15,45 @@ const { id } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
 
 const items = ref([]);
+const search = ref("");
+const sortType = ref("name");
+const filterOptions = ref({ Corner: true, Line: true, Surface: true, Block: true });
+
 const mesh_components_selection = dataStyleStore.visibleMeshComponents(id);
 
 watchEffect(async () => {
   items.value = await dataStore.formatedMeshComponents(id);
 });
 
+const processedItems = computed(() =>
+  items.value
+    .filter((category) => filterOptions.value[category.id])
+    .map((category) => {
+      const field = sortType.value === "name" ? "title" : "id";
+      const children = (category.children || []).toSorted((first, second) =>
+        first[field].localeCompare(second[field]),
+      );
+      return { id: category.id, title: category.title, children };
+    }),
+);
+
+const availableFilterOptions = computed(() => items.value.map((category) => category.id));
+
+function toggleSort() {
+  sortType.value = sortType.value === "name" ? "id" : "name";
+}
+
+function customFilter(value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  return (
+    item.raw.title.toLowerCase().includes(query) ||
+    (item.raw.id && item.raw.id.toLowerCase().includes(query))
+  );
+}
+
 watch(
   mesh_components_selection,
   async (current, previous) => {
@@ -42,9 +76,47 @@ watch(
 </script>
 
 <template>
+  <v-row dense align="center" class="mr-1 ml-3 mt-2 pa-1">
+    <v-col>
+      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
+    </v-col>
+    <v-col cols="auto" class="d-flex align-center">
+      <ActionButton
+        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
+        :icon="
+          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
+        "
+        tooltipLocation="bottom"
+        @click="toggleSort"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="props"
+          />
+        </template>
+        <v-list class="mt-1">
+          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
+            <v-checkbox
+              v-model="filterOptions[category_id]"
+              :label="category_id"
+              hide-details
+              density="compact"
+            />
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-col>
+  </v-row>
   <v-treeview
     v-model:selected="mesh_components_selection"
-    :items="items"
+    :items="processedItems"
+    :search="search"
+    :custom-filter="customFilter"
     class="transparent-treeview"
     item-value="id"
     select-strategy="classic"
@@ -54,8 +126,9 @@ watch(
       <span
         class="treeview-item"
         @contextmenu.prevent.stop="emit('show-menu', { event: $event, itemId: item })"
-        >{{ item.title }}</span
       >
+        {{ item.title }}
+      </span>
     </template>
   </v-treeview>
 </template>