From f063d95e596b9d578b3586441550af98c9f25c38 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 10 Dec 2024 14:56:53 +0100
Subject: [PATCH 01/10] add first search dropdown prototype

---
 components/custom-ui/SearchBar.vue           | 68 ++++++++++++++++++++
 components/custom-ui/dashboard/Dashboard.vue |  8 +--
 2 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 components/custom-ui/SearchBar.vue

diff --git a/components/custom-ui/SearchBar.vue b/components/custom-ui/SearchBar.vue
new file mode 100644
index 0000000..aea7fa3
--- /dev/null
+++ b/components/custom-ui/SearchBar.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+
+import {IconLoader2, IconSearch} from "@tabler/icons-vue";
+
+const queryInput = ref('')
+const fetching = ref(false)
+const response: Ref<SearchResponse | undefined | void> = ref(undefined) //ref([{label: 'test'}, {label: 'test2'}, {label: 'test3'}])
+
+// Debounce input to decrease number of requests
+watch(queryInput, () => {
+  // Empty input only clears results
+  if (!queryInput.value) {
+    response.value = undefined
+    return
+  }
+
+  fetching.value = true
+  response.value = undefined
+  debouncedInput()
+})
+
+const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
+
+async function searchResources(query: string): Promise<void> {
+  // No need to search with empty input
+  if (!query) {
+    response.value = undefined
+    return
+  }
+
+  response.value = await $fetch<SearchResponse>('/api/v3/search', {
+    query: {
+      query: query
+    }
+  }).catch(error => {
+    console.log(error)
+    return
+  })
+  fetching.value = false
+}
+
+</script>
+
+<template>
+  <div class="relative flex">
+    <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
+    <!-- COMMAND -->
+    <Command class="rounded-sm border">
+      <CommandInput placeholder="Search for resources"
+                    class="border-0 focus:border-0 outline-0 focus:outline-0 focus:ring-0"
+                    @input="(event) => queryInput = event.target.value"/>
+      <CommandList class="gap-y-2">
+        <CommandEmpty v-if="queryInput && response?.resources.length <= 0 && fetching"
+                      class="flex items-center justify-center gap-x-4">
+          Fetching results <IconLoader2 class="mr-2 animate-spin"/>
+        </CommandEmpty>
+        <CommandEmpty v-if="queryInput && response?.resources.length <= 0 && !fetching">
+          No results found.
+        </CommandEmpty>
+        <CommandItem v-for="resource in response?.resources"
+                     :value="resource">
+          {{ resource.id }}
+        </CommandItem>
+      </CommandList>
+    </Command>
+    <!-- END COMMAND -->
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index ba014f7..80affc9 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -38,6 +38,7 @@ import Notifications from "~/components/custom-ui/dashboard/Notifications.vue";
 import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
+import SearchBar from "~/components/custom-ui/SearchBar.vue";
 
 import {notifis, v3_events} from './data-notifications'
 import type {User} from '~/composables/api_wrapper'
@@ -314,12 +315,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <Skeleton class="h-auto w-[300px]"/>
             </template>
           </ClientOnly>
-          <div class="relative flex">
-            <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
-            <Input type="search"
-                   placeholder="Search Resources"
-                   class="w-[400px] appearance-none bg-background pl-8 shadow-none "/>
-          </div>
+          <SearchBar />
         </div>
         <DropdownMenu>
           <ClientOnly fallbackTag="span">

From ee245cbd595d787409fc79da35a0c5f996b4d7ff Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 15:10:02 +0100
Subject: [PATCH 02/10] added a first Searchpage

---
 components/custom-ui/SearchBar.vue           |  68 ---------
 components/custom-ui/SearchDialog.vue        | 152 +++++++++++++++++++
 components/custom-ui/dashboard/Dashboard.vue |   4 +-
 components/custom-ui/dashboard/EventList.vue |   1 -
 composables/api_wrapper.ts                   |   2 +-
 5 files changed, 155 insertions(+), 72 deletions(-)
 delete mode 100644 components/custom-ui/SearchBar.vue
 create mode 100644 components/custom-ui/SearchDialog.vue

diff --git a/components/custom-ui/SearchBar.vue b/components/custom-ui/SearchBar.vue
deleted file mode 100644
index aea7fa3..0000000
--- a/components/custom-ui/SearchBar.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-
-import {IconLoader2, IconSearch} from "@tabler/icons-vue";
-
-const queryInput = ref('')
-const fetching = ref(false)
-const response: Ref<SearchResponse | undefined | void> = ref(undefined) //ref([{label: 'test'}, {label: 'test2'}, {label: 'test3'}])
-
-// Debounce input to decrease number of requests
-watch(queryInput, () => {
-  // Empty input only clears results
-  if (!queryInput.value) {
-    response.value = undefined
-    return
-  }
-
-  fetching.value = true
-  response.value = undefined
-  debouncedInput()
-})
-
-const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
-
-async function searchResources(query: string): Promise<void> {
-  // No need to search with empty input
-  if (!query) {
-    response.value = undefined
-    return
-  }
-
-  response.value = await $fetch<SearchResponse>('/api/v3/search', {
-    query: {
-      query: query
-    }
-  }).catch(error => {
-    console.log(error)
-    return
-  })
-  fetching.value = false
-}
-
-</script>
-
-<template>
-  <div class="relative flex">
-    <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
-    <!-- COMMAND -->
-    <Command class="rounded-sm border">
-      <CommandInput placeholder="Search for resources"
-                    class="border-0 focus:border-0 outline-0 focus:outline-0 focus:ring-0"
-                    @input="(event) => queryInput = event.target.value"/>
-      <CommandList class="gap-y-2">
-        <CommandEmpty v-if="queryInput && response?.resources.length <= 0 && fetching"
-                      class="flex items-center justify-center gap-x-4">
-          Fetching results <IconLoader2 class="mr-2 animate-spin"/>
-        </CommandEmpty>
-        <CommandEmpty v-if="queryInput && response?.resources.length <= 0 && !fetching">
-          No results found.
-        </CommandEmpty>
-        <CommandItem v-for="resource in response?.resources"
-                     :value="resource">
-          {{ resource.id }}
-        </CommandItem>
-      </CommandList>
-    </Command>
-    <!-- END COMMAND -->
-  </div>
-</template>
\ No newline at end of file
diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
new file mode 100644
index 0000000..a6137c4
--- /dev/null
+++ b/components/custom-ui/SearchDialog.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+
+import {IconLoader2, IconSearch} from "@tabler/icons-vue";
+import {GenericNodeType, ResourceVariant} from "~/types/aruna-v3-enums";
+
+const DEFAULT_LIMIT = 4;
+
+const router = useRouter()
+
+const queryInput = ref('')
+const fetching = ref(false)
+const response: Ref<SearchResponse | undefined | void> = ref(undefined)
+const dialogOpen = ref(false)
+const resources: Ref<SplitResources | undefined> = ref(undefined)
+
+function handleDialogOpenChange() {
+  dialogOpen.value = !dialogOpen.value
+}
+
+// Debounce input to decrease number of requests
+watch(queryInput, () => {
+  // Empty input only clears results
+  if (!queryInput.value) {
+    response.value = undefined
+    return
+  }
+
+  fetching.value = true
+  response.value = undefined
+  debouncedInput()
+})
+
+const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
+
+async function searchResources(query: string): Promise<void> {
+  // No need to search with empty input
+  if (!query) {
+    response.value = undefined
+    return
+  }
+
+  response.value = await $fetch<SearchResponse>('/api/v3/search', {
+    query: {
+      query: query,
+      limit: DEFAULT_LIMIT
+    }
+  }).catch(error => {
+    console.log(error)
+    return
+  })
+  fetching.value = false
+  dialogOpen.value = true
+}
+
+watch(response, () => {
+  resources.value = splitResources(response.value?.resources)
+})
+
+type SplitResources = {
+  projects: Resource[],
+  folders: Resource[],
+  objects: Resource[],
+  other: any[],
+}
+
+function splitResources(resources: (Resource & { [type: string]: GenericNodeType })[]): SplitResources {
+  var result: SplitResources = {
+    projects: [],
+    folders: [],
+    objects: [],
+    other: []
+  }
+  console.log(resources);
+  console.log(response.value?.expected_hits);
+  for (const resource of resources) {
+    if (resource.type === GenericNodeType.Resource) {
+      switch (resource.variant) {
+        case ResourceVariant.Project:
+          result.projects.push(resource)
+          break;
+        case ResourceVariant.Folder:
+          result.folders.push(resource)
+          break;
+        case ResourceVariant.Object:
+          result.objects.push(resource)
+          break;
+      }
+    } else {
+      result.other.push(resource)
+    }
+  }
+  return result
+}
+
+</script>
+
+<template>
+  <div class="relative flex">
+    <Button @click="dialogOpen=true">
+      <IconSearch class="mr-1 h-4 w-4 text-muted-foreground"/>
+      Search
+    </Button>
+
+    <!-- COMMAND DIALOG -->
+    <CommandDialog class="rounded-sm border" :open="dialogOpen" @update:open="handleDialogOpenChange">
+      <CommandInput placeholder="Search for resources"
+                    class="border-0 focus:border-0 outline-0 focus:outline-0 focus:ring-0"
+                    @input="(event) => queryInput = event.target.value"/>
+      <CommandList class="gap-y-2">
+        <CommandEmpty v-if="queryInput && fetching"
+                      class="flex items-center justify-center gap-x-4">
+          Fetching results
+          <IconLoader2 class="mr-2 animate-spin"/>
+        </CommandEmpty>
+        <CommandEmpty v-if="queryInput && !fetching">
+          No results found.
+        </CommandEmpty>
+        <CommandGroup heading="Projects">
+          <CommandItem v-for="resource in resources?.projects"
+                       :value="resource"
+                       @select="router.push('/projects/' + resource.id)"> <!-- Dummy, replace with proper path later -->
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Folders">
+          <CommandItem v-for="resource in resources?.folders"
+                       :value="resource">
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Objects">
+          <CommandItem v-for="resource in resources?.objects"
+                       :value="resource">
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Others">
+          <CommandItem v-for="resource in resources?.other"
+                       :value="resource">
+            {{ resource.type + ": " + resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <!-- <CommandItem disabled v-if="response?.expected_hits > DEFAULT_LIMIT" :value="'load more'">...</CommandItem>
+        < !-- <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
+          Show all results
+        </Button> -- >
+        </CommandItem> -->
+      </CommandList>
+    </CommandDialog>
+    <!-- END COMMAND DIALOG-->
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index 970cc42..9ec7503 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -38,7 +38,7 @@ import Events from "~/components/custom-ui/dashboard/Events.vue";
 import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
-import SearchBar from "~/components/custom-ui/SearchBar.vue";
+import SearchDialog from "~/components/custom-ui/SearchDialog.vue";
 import Licences from "~/components/custom-ui/dashboard/licenses/Licenses.vue";
 
 import type {User} from '~/composables/api_wrapper'
@@ -349,7 +349,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <Skeleton class="h-auto w-[300px]"/>
             </template>
           </ClientOnly>
-          <SearchBar />
+          <SearchDialog />
         </div>
         <DropdownMenu>
           <ClientOnly fallbackTag="span">
diff --git a/components/custom-ui/dashboard/EventList.vue b/components/custom-ui/dashboard/EventList.vue
index ba7a939..8f69a68 100644
--- a/components/custom-ui/dashboard/EventList.vue
+++ b/components/custom-ui/dashboard/EventList.vue
@@ -2,7 +2,6 @@
 import {ScrollArea} from '@/components/ui/scroll-area'
 import {cn} from '@/utils/shadcn'
 import {Badge} from '@/components/ui/badge'
-import {decodeTime} from 'ulid'
 import {formatDate} from '~/composables/utils'
 import {formatDistanceToNow} from "date-fns";
 
diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 22e6bd1..dd782fb 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -60,7 +60,7 @@ export type CreateGroupResponse = paths["/api/v3/groups"]["post"]["responses"][2
 // Info
 export type GetEventsResponse = paths["/api/v3/info/events"]["get"]["responses"][200]["content"]["application/json"];
 export type GetStatsResponse = paths["/api/v3/info/stats"]["get"]["responses"][200]["content"]["application/json"];
-export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["application/json"];
+export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["applicatiown/json"];
 
 // Realms
 export type CreateRealmResponse = paths["/api/v3/realms"]["post"]["responses"][200]["content"]["application/json"];

From 3001deae421674ea6dd9300d0e9924c5a71c5d7b Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 15:13:24 +0100
Subject: [PATCH 03/10] feat: add show more results button

---
 components/custom-ui/SearchDialog.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index a6137c4..1bdf379 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -141,11 +141,12 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
           </CommandItem>
         </CommandGroup>
         <!-- <CommandItem disabled v-if="response?.expected_hits > DEFAULT_LIMIT" :value="'load more'">...</CommandItem>
-        < !-- <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
-          Show all results
-        </Button> -- >
+
         </CommandItem> -->
       </CommandList>
+      <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
+        Show all results
+      </Button>
     </CommandDialog>
     <!-- END COMMAND DIALOG-->
   </div>

From 17a3ecd591f5560aeb0043741ec97a17d329f76a Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 15:33:53 +0100
Subject: [PATCH 04/10] fix: catch undefined results

---
 components/custom-ui/SearchDialog.vue | 44 ++++++++++++++-------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index 1bdf379..c4849a4 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -11,6 +11,7 @@ const queryInput = ref('')
 const fetching = ref(false)
 const response: Ref<SearchResponse | undefined | void> = ref(undefined)
 const dialogOpen = ref(false)
+// mit computed berechnen
 const resources: Ref<SplitResources | undefined> = ref(undefined)
 
 function handleDialogOpenChange() {
@@ -32,6 +33,11 @@ watch(queryInput, () => {
 
 const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
 
+function openDialog(): void {
+  queryInput.value = '';
+  dialogOpen.value = true;
+}
+
 async function searchResources(query: string): Promise<void> {
   // No need to search with empty input
   if (!query) {
@@ -70,33 +76,32 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
     objects: [],
     other: []
   }
-  console.log(resources);
-  console.log(response.value?.expected_hits);
-  for (const resource of resources) {
-    if (resource.type === GenericNodeType.Resource) {
-      switch (resource.variant) {
-        case ResourceVariant.Project:
-          result.projects.push(resource)
-          break;
-        case ResourceVariant.Folder:
-          result.folders.push(resource)
-          break;
-        case ResourceVariant.Object:
-          result.objects.push(resource)
-          break;
+  if (resources) {
+    for (const resource of resources) {
+      if (resource.type === GenericNodeType.Resource) {
+        switch (resource.variant) {
+          case ResourceVariant.Project:
+            result.projects.push(resource)
+            break;
+          case ResourceVariant.Folder:
+            result.folders.push(resource)
+            break;
+          case ResourceVariant.Object:
+            result.objects.push(resource)
+            break;
+        }
+      } else {
+        result.other.push(resource)
       }
-    } else {
-      result.other.push(resource)
     }
   }
   return result
 }
-
 </script>
 
 <template>
   <div class="relative flex">
-    <Button @click="dialogOpen=true">
+    <Button @click="openDialog()">
       <IconSearch class="mr-1 h-4 w-4 text-muted-foreground"/>
       Search
     </Button>
@@ -140,9 +145,6 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
             {{ resource.type + ": " + resource.name }}
           </CommandItem>
         </CommandGroup>
-        <!-- <CommandItem disabled v-if="response?.expected_hits > DEFAULT_LIMIT" :value="'load more'">...</CommandItem>
-
-        </CommandItem> -->
       </CommandList>
       <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
         Show all results

From 1ba1ecd70889b975078d0e6354cb6708ea9a544d Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:20:57 +0100
Subject: [PATCH 05/10] feat: add limit and filter props to SearchDialog

---
 components/custom-ui/SearchDialog.vue | 50 ++++++++++++++++-----------
 nuxt.config.ts                        |  3 +-
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index c4849a4..6bcb16e 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -3,7 +3,18 @@
 import {IconLoader2, IconSearch} from "@tabler/icons-vue";
 import {GenericNodeType, ResourceVariant} from "~/types/aruna-v3-enums";
 
-const DEFAULT_LIMIT = 4;
+const DEFAULT_LIMIT = useRuntimeConfig().public.searchDialogLimit || 10;
+
+/* ----- Properties ----- */
+interface SearchDialogProps {
+  limitResults?: number,
+  filter?: string
+}
+
+const props = defineProps<SearchDialogProps>()
+const limitResults = props.limitResults || DEFAULT_LIMIT
+const filter = props.filter
+/* ----- End Properties ----- */
 
 const router = useRouter()
 
@@ -11,13 +22,25 @@ const queryInput = ref('')
 const fetching = ref(false)
 const response: Ref<SearchResponse | undefined | void> = ref(undefined)
 const dialogOpen = ref(false)
-// mit computed berechnen
-const resources: Ref<SplitResources | undefined> = ref(undefined)
+
+const resources: ComputedRef<SplitResources | undefined> = computed(() => splitResources(response.value?.resources));
+
+type SplitResources = {
+  projects: Resource[],
+  folders: Resource[],
+  objects: Resource[],
+  other: any[],
+}
 
 function handleDialogOpenChange() {
   dialogOpen.value = !dialogOpen.value
 }
 
+function openDialog(): void {
+  queryInput.value = ''; // reset the query when the dialog is opened again
+  dialogOpen.value = true;
+}
+
 // Debounce input to decrease number of requests
 watch(queryInput, () => {
   // Empty input only clears results
@@ -33,11 +56,6 @@ watch(queryInput, () => {
 
 const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
 
-function openDialog(): void {
-  queryInput.value = '';
-  dialogOpen.value = true;
-}
-
 async function searchResources(query: string): Promise<void> {
   // No need to search with empty input
   if (!query) {
@@ -48,7 +66,8 @@ async function searchResources(query: string): Promise<void> {
   response.value = await $fetch<SearchResponse>('/api/v3/search', {
     query: {
       query: query,
-      limit: DEFAULT_LIMIT
+      limit: limitResults,
+      filter: filter
     }
   }).catch(error => {
     console.log(error)
@@ -58,17 +77,6 @@ async function searchResources(query: string): Promise<void> {
   dialogOpen.value = true
 }
 
-watch(response, () => {
-  resources.value = splitResources(response.value?.resources)
-})
-
-type SplitResources = {
-  projects: Resource[],
-  folders: Resource[],
-  objects: Resource[],
-  other: any[],
-}
-
 function splitResources(resources: (Resource & { [type: string]: GenericNodeType })[]): SplitResources {
   var result: SplitResources = {
     projects: [],
@@ -146,7 +154,7 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
           </CommandItem>
         </CommandGroup>
       </CommandList>
-      <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
+      <Button v-if="response?.expected_hits > limitResults">
         Show all results
       </Button>
     </CommandDialog>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0e25097..d02c1b7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -100,7 +100,8 @@ export default defineNuxtConfig({
         hidePeriod: 60 * 60 * 24, // Hide banner per default for one day
         validFrom: '', // Some valid date string
         validTo: '', // Some valid date string
-      }
+      },
+      searchDialogLimit: 10
     }
   },
 

From 22316a3c968d33b71ce6abdd5af898a4046a1031 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 18 Feb 2025 13:29:58 +0100
Subject: [PATCH 06/10] feat: WIP change explore page to new v3 api

---
 components/card/resource.vue  | 119 +++++++++++++++++++---------------
 components/search_results.vue |  11 +++-
 pages/explore.vue             |  89 ++++++++++++++-----------
 3 files changed, 124 insertions(+), 95 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index dc8ea0a..6bfba07 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import {modelsv2Status, v2DataClass, type v2GenericResource, v2ResourceVariant,} from '~/composables/aruna_api_json';
+import {modelsv2Status, v2DataClass, v2ResourceVariant,} from '~/composables/aruna_api_json';
 
 /* ----- PROPERTIES ----- */
 interface ResourceCardProps {
-  resource: v2GenericResource
+  resource: Resource
 }
 
 const {resource} = defineProps<ResourceCardProps>()
-const entry = toSearchResult(resource)
+
 
 /* ----- END PROPERTIES ----- */
 
@@ -36,63 +36,76 @@ function dataClassCss(dataClass: v2DataClass): string {
 </script>
 
 <template>
-  <div v-if="entry"
+  <div
        class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
-       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">
+       :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
-      <!-- Name and ID display with links -->
-      <NuxtLink :to="`/objects/${entry.id}`"
+      <!-- Name and ID display -->
+      <NuxtLink :to="`/objects/${resource.id}`"
                 class="text-aruna-highlight font-bold">
-        <h3>{{ entry.name }}</h3>
+        <h3>{{ resource.name }}</h3>
       </NuxtLink>
+      <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
+      <!-- END Name and ID display -->
+    </div>
+  </div>
+<!--  <div v-if="entry"-->
+<!--       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"-->
+<!--       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">-->
+<!--    <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">-->
+<!--      &lt;!&ndash; Name and ID display with links &ndash;&gt;-->
+<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
+<!--                class="text-aruna-highlight font-bold">-->
+<!--        <h3>{{ entry.name }}</h3>-->
+<!--      </NuxtLink>-->
 
-      <NuxtLink :to="`/objects/${entry.id}`"
-                class="text-sm text-aruna-text-accent font-bold">
-        <h4>{{ entry.id }}</h4>
-      </NuxtLink>
-      <!-- END Name and ID display with links -->
+<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
+<!--                class="text-sm text-aruna-text-accent font-bold">-->
+<!--        <h4>{{ entry.id }}</h4>-->
+<!--      </NuxtLink>-->
+<!--      &lt;!&ndash; END Name and ID display with links &ndash;&gt;-->
 
-      <!-- Badges -->
-      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
-        <!-- DataClass Badge -->
-        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">
-          {{ displayDataClass(entry.data_class) }}
-        </Badge>
-        <!-- END DataClass -->
-        <!-- Stats Badge -->
-        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
-               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          Children: {{ entry.stats.count }}
-        </Badge>
-        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}
-        </Badge>
-        <!-- END Stats Badge -->
-      </div>
-      <!-- END Badges -->
-    </div>
+<!--      &lt;!&ndash; Badges &ndash;&gt;-->
+<!--      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">-->
+<!--        &lt;!&ndash; DataClass Badge &ndash;&gt;-->
+<!--        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">-->
+<!--          {{ displayDataClass(entry.data_class) }}-->
+<!--        </Badge>-->
+<!--        &lt;!&ndash; END DataClass &ndash;&gt;-->
+<!--        &lt;!&ndash; Stats Badge &ndash;&gt;-->
+<!--        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"-->
+<!--               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
+<!--          Children: {{ entry.stats.count }}-->
+<!--        </Badge>-->
+<!--        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
+<!--          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}-->
+<!--        </Badge>-->
+<!--        &lt;!&ndash; END Stats Badge &ndash;&gt;-->
+<!--      </div>-->
+<!--      &lt;!&ndash; END Badges &ndash;&gt;-->
+<!--    </div>-->
 
-    <div class="mx-2 grow flex-col basis-2/3">
-      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
-      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">
-        {{ displayDescription(entry.description) }}
-      </p>
+<!--    <div class="mx-2 grow flex-col basis-2/3">-->
+<!--      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>-->
+<!--      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">-->
+<!--        {{ displayDescription(entry.description) }}-->
+<!--      </p>-->
 
-      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>
+<!--      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>-->
 
-      <!-- Basic Label Display -->
-      <div class="flex flex-row flex-wrap">
-        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">
-          <span
-              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
-              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
-            {{ label.key }}
-          </span>
-          <span v-if="label.value"
-                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
-            {{ label.value }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
+<!--      &lt;!&ndash; Basic Label Display &ndash;&gt;-->
+<!--      <div class="flex flex-row flex-wrap">-->
+<!--        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">-->
+<!--          <span-->
+<!--              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"-->
+<!--              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">-->
+<!--            {{ label.key }}-->
+<!--          </span>-->
+<!--          <span v-if="label.value"-->
+<!--                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">-->
+<!--            {{ label.value }}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
 </template>
\ No newline at end of file
diff --git a/components/search_results.vue b/components/search_results.vue
index fe1c755..7690e22 100644
--- a/components/search_results.vue
+++ b/components/search_results.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type {v2GenericResource} from '@/composables/aruna_api_json';
 
 interface SearchResultListProps {
-  resources: v2GenericResource[]
+  resources: Resource[],
+  fetching: boolean,
 }
 const {resources} = defineProps<SearchResultListProps>()
 </script>
 
 <template>
-  <div v-if="resources.length == 0">
+  <div v-if="fetching">
+    <h2 class="text-aruna-text-accent font-bold text-center">Fetching Results</h2>
+  </div>
+
+  <div v-if="resources.length == 0 && !fetching">
     <h2 class="text-aruna-text-accent font-bold text-center">No results found</h2>
   </div>
 
+
   <CardResource v-for="hit in resources" :resource="hit" />
 </template>
\ No newline at end of file
diff --git a/pages/explore.vue b/pages/explore.vue
index 0980d9c..aaf4790 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-import {v2ResourceVariant, type v2GenericResource} from "~/composables/aruna_api_json";
 import {
   IconFile,
-  IconFiles,
   IconFolder,
   IconFolders,
   IconSearch,
   IconWorldSearch,
 } from "@tabler/icons-vue";
-import {Button} from '@/components/ui/button'
 import {
   Pagination,
   PaginationEllipsis,
@@ -19,23 +16,30 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/components/ui/pagination'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import {ResourceVariant} from "~/types/aruna-v3-enums";
 
 import {searchResources} from "~/composables/api_wrapper";
 
 const currentPage: Ref<number> = ref(1);
 const limit: Ref<number> = ref(20);
-const hits: Ref<v2GenericResource[]> = ref([]);
+const hits: Ref<Resource[]> = ref([]);
 const estimatedTotal = ref(0);
+const fetching = ref(false);
+
+const debouncedInput = debounce(async () => await queryResources(true), 250)
 
 /* Query */
 const query = ref("");
 watch(query, async () => {
-  await queryResources(true)
+  fetching.value = true;
+  await debouncedInput()
 });
 
 /* Filter */
-const filter = ref("object_type = PROJECT");
-const typeFilter = ref(v2ResourceVariant.RESOURCE_VARIANT_PROJECT);
+const filter = ref("variant=0");
+const typeFilter = ref(ResourceVariant.Project);
 const customFilter = ref("");
 const customFilterValid = ref(true);
 
@@ -48,25 +52,22 @@ watch(typeFilter, async () => {
 
 function generateFilter() {
   switch (typeFilter.value) {
-    case v2ResourceVariant.RESOURCE_VARIANT_UNSPECIFIED: {
+    case null: {
       filter.value = "";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-      filter.value = "object_type = PROJECT";
+    case ResourceVariant.Project: {
+      filter.value = "variant=0";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION: {
-      filter.value = "object_type = COLLECTION";
+    case ResourceVariant.Folder: {
+      filter.value = "variant=1";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-      filter.value = "object_type = DATASET";
+    case ResourceVariant.Object: {
+      filter.value = "variant=2";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-      filter.value = "object_type = OBJECT";
-    }
   }
 
   if (customFilter.value.length > 0) {
@@ -93,13 +94,26 @@ async function queryResources(pageReset: boolean) {
   })
 
   try {
-    const response = await searchResources(body)
+    //const response = await searchResources(body)
+    const response = await $fetch<SearchResponse>('/api/v3/search', {
+      query: {
+        query: query.value,
+        limit: limit.value,
+        filter: filter.value,
+        offset: offset,
+      }
+    }).catch(error => {
+      console.error(error)
+      throw new Error("Resource search failed.")
+    })
 
     customFilterValid.value = true;
     hits.value = response.resources ? response.resources : [];
-    estimatedTotal.value = response.estimatedTotal
-        ? Number(response.estimatedTotal)
+    console.log(hits.value);
+    estimatedTotal.value = response.expected_hits
+        ? Number(response.expected_hits)
         : 0;
+    fetching.value = false;
   } catch (error) {
     console.warn(error);
     customFilterValid.value = false;
@@ -133,13 +147,22 @@ onMounted(async () => await queryResources(true));
         <div>
           <label class="sr-only" for="search-query-input-with-icon">Search query input</label>
           <div class="flex rounded-md shadow-sm">
+            <!-- <Input type="text"
+                   id="search-query-input-with-icon"
+                   v-model="query"
+                   name="search-query-input-with-icon"
+                   placeholder="Search Aruna Resources"
+            />
+            <Button type="button">
+              <IconSearch class="flex-shrink-0 size-6"/>
+            </Button> -->
             <input type="text"
                    v-model="query"
                    id="search-query-input-with-icon"
                    name="search-query-input-with-icon"
                    class="py-3 px-4 pe-11 block w-full border-e-0 border-aruna-text/50 rounded-s-md text-sm focus:z-10 focus:ring-1 focus:ring-aruna-highlight focus:border-aruna-highlight disabled:opacity-50 disabled:pointer-events-none bg-aruna-bg/90 text-aruna-text"
                    placeholder="Search Aruna Resources"/>
-            <button type="button"
+                 <button type="button"
                     class="w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-aruna-highlight bg-aruna-bg/90 text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
               <IconSearch class="flex-shrink-0 size-6"/>
             </button>
@@ -162,7 +185,7 @@ onMounted(async () => await queryResources(true));
                  class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_UNSPECIFIED"
+                   :value="null"
                    id="resource-type-all"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -175,7 +198,7 @@ onMounted(async () => await queryResources(true));
             <input type="radio"
                    checked
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_PROJECT"
+                   :value="ResourceVariant.Project"
                    id="resource-type-projects"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -187,31 +210,19 @@ onMounted(async () => await queryResources(true));
                  class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_COLLECTION"
+                   :value="ResourceVariant.Folder"
                    id="resource-type-collections"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
             <IconFolder class="flex-shrink-0 size-5 mx-2 text-aruna-text ms-5"/>
-            <span class="text-sm text-aruna-text">Collections</span>
-          </label>
-
-          <label for="resource-type-datasets"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
-            <input type="radio"
-                   v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_DATASET"
-                   id="resource-type-datasets"
-                   name="resource-type-select"
-                   class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
-            <IconFiles class="flex-shrink-0 size-5 mx-2 text-aruna-text ms-5"/>
-            <span class="text-sm text-aruna-text">Datasets</span>
+            <span class="text-sm text-aruna-text">Folder</span>
           </label>
 
           <label for="resource-type-objects"
                  class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
+                   :value="ResourceVariant.Object"
                    id="resource-type-objects"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -295,7 +306,7 @@ onMounted(async () => await queryResources(true));
         </Pagination>
 
         <!-- Start Display Search Results -->
-        <SearchResults :key="hits" :resources="hits"/>
+        <SearchResults :resources="hits" :fetching="fetching"/>
         <!-- End Display Search Results -->
 
         <Pagination v-if="estimatedTotal > limit"

From 948399dc0dc4bb30d104d464243a43b00560d9b5 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Mon, 24 Feb 2025 18:27:34 +0100
Subject: [PATCH 07/10] feat: reenable badges on explore page

---
 components/card/resource.vue  | 142 +++++++++++++++++-----------------
 components/search_results.vue |   1 -
 pages/explore.vue             |   6 +-
 3 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index 6bfba07..6ff572b 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import {modelsv2Status, v2DataClass, v2ResourceVariant,} from '~/composables/aruna_api_json';
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@/components/ui/tooltip"
+
+import {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
+
 
 /* ----- PROPERTIES ----- */
 interface ResourceCardProps {
@@ -8,7 +11,6 @@ interface ResourceCardProps {
 
 const {resource} = defineProps<ResourceCardProps>()
 
-
 /* ----- END PROPERTIES ----- */
 
 function displayDescription(description: string): string {
@@ -17,19 +19,19 @@ function displayDescription(description: string): string {
   }
   return description
 }
-function displayDataClass(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'Public'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'Private'
+function displayVisbility(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public: return 'Public';
+    case VisibilityClass.PublicMetadata: return 'Public Metadata';
+    case VisibilityClass.Private: return 'Private';
     default: return 'Unspecified'
   }
 }
-function dataClassCss(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'border-green-600 text-green-600'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'border-red-600/80 text-red-600/80'
-    case v2DataClass.DATA_CLASS_CONFIDENTIAL: return 'border-white text-white'
-    case v2DataClass.DATA_CLASS_WORKSPACE: return 'border-indigo-600 text-indigo-600'
+function visibilityCss(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public: return 'border-green-600 text-green-600';
+    case VisibilityClass.PublicMetadata: return 'border-white text-white';
+    case VisibilityClass.Private: return 'border-red-600/80 text-red-600/80';
     default: return 'border-aruna-text/50 text-aruna-text/50'
   }
 }
@@ -41,71 +43,65 @@ function dataClassCss(dataClass: v2DataClass): string {
        :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
       <!-- Name and ID display -->
-      <NuxtLink :to="`/objects/${resource.id}`"
-                class="text-aruna-highlight font-bold">
-        <h3>{{ resource.name }}</h3>
-      </NuxtLink>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <NuxtLink :to="`/objects/${resource.id}`"
+                      class="text-aruna-highlight font-bold">
+              <h3>{{ resource.name }}</h3>
+            </NuxtLink>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ resource.id }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
       <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
       <!-- END Name and ID display -->
-    </div>
-  </div>
-<!--  <div v-if="entry"-->
-<!--       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"-->
-<!--       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">-->
-<!--    <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">-->
-<!--      &lt;!&ndash; Name and ID display with links &ndash;&gt;-->
-<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
-<!--                class="text-aruna-highlight font-bold">-->
-<!--        <h3>{{ entry.name }}</h3>-->
-<!--      </NuxtLink>-->
-
-<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
-<!--                class="text-sm text-aruna-text-accent font-bold">-->
-<!--        <h4>{{ entry.id }}</h4>-->
-<!--      </NuxtLink>-->
-<!--      &lt;!&ndash; END Name and ID display with links &ndash;&gt;-->
 
-<!--      &lt;!&ndash; Badges &ndash;&gt;-->
-<!--      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">-->
-<!--        &lt;!&ndash; DataClass Badge &ndash;&gt;-->
-<!--        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">-->
-<!--          {{ displayDataClass(entry.data_class) }}-->
-<!--        </Badge>-->
-<!--        &lt;!&ndash; END DataClass &ndash;&gt;-->
-<!--        &lt;!&ndash; Stats Badge &ndash;&gt;-->
-<!--        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"-->
-<!--               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
-<!--          Children: {{ entry.stats.count }}-->
-<!--        </Badge>-->
-<!--        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
-<!--          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}-->
-<!--        </Badge>-->
-<!--        &lt;!&ndash; END Stats Badge &ndash;&gt;-->
-<!--      </div>-->
-<!--      &lt;!&ndash; END Badges &ndash;&gt;-->
-<!--    </div>-->
+            <!-- Badges -->
+            <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
+              <!-- DataClass Badge -->
+              <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
+                {{ displayVisbility(resource.visibility) }}
+              </Badge>
+              <!-- END DataClass -->
+              <!-- Stats Badge -->
+              <Badge v-if="resource.variant !== ResourceVariant.Object"
+                     class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+                Children: {{ resource.count }}
+              </Badge>
+              <Badge v-if="resource.variant === ResourceVariant.Object"
+                    class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+                {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
+              </Badge>
+              <!-- END Stats Badge -->
+            </div>
+            <!-- END Badges -->
+          </div>
+        <div class="mx-2 grow flex-col basis-2/3">
+          <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
+          <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
+            {{ displayDescription(resource.description) }}
+          </p>
 
-<!--    <div class="mx-2 grow flex-col basis-2/3">-->
-<!--      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>-->
-<!--      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">-->
-<!--        {{ displayDescription(entry.description) }}-->
-<!--      </p>-->
+          <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
 
-<!--      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>-->
+          <!-- Basic Label Display -->
+          <div class="flex flex-row flex-wrap">
+            <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
+              <span
+                  :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
+                  class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
+                {{ label.key }}
+              </span>
+              <span v-if="label.value"
+                    class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
+                {{ label.value }}</span>
+            </div>
+          </div>
 
-<!--      &lt;!&ndash; Basic Label Display &ndash;&gt;-->
-<!--      <div class="flex flex-row flex-wrap">-->
-<!--        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">-->
-<!--          <span-->
-<!--              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"-->
-<!--              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">-->
-<!--            {{ label.key }}-->
-<!--          </span>-->
-<!--          <span v-if="label.value"-->
-<!--                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">-->
-<!--            {{ label.value }}</span>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--  </div>-->
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/components/search_results.vue b/components/search_results.vue
index 7690e22..60b1eaf 100644
--- a/components/search_results.vue
+++ b/components/search_results.vue
@@ -16,6 +16,5 @@ const {resources} = defineProps<SearchResultListProps>()
     <h2 class="text-aruna-text-accent font-bold text-center">No results found</h2>
   </div>
 
-
   <CardResource v-for="hit in resources" :resource="hit" />
 </template>
\ No newline at end of file
diff --git a/pages/explore.vue b/pages/explore.vue
index aaf4790..5219fbd 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -53,7 +53,8 @@ watch(typeFilter, async () => {
 function generateFilter() {
   switch (typeFilter.value) {
     case null: {
-      filter.value = "";
+      filter.value = "variant IN [0,1,2]";
+      // limit search to projects, folders and objects
       break;
     }
     case ResourceVariant.Project: {
@@ -94,7 +95,7 @@ async function queryResources(pageReset: boolean) {
   })
 
   try {
-    //const response = await searchResources(body)
+    //const response = await searchResources(body) // TODO remove dead code
     const response = await $fetch<SearchResponse>('/api/v3/search', {
       query: {
         query: query.value,
@@ -147,6 +148,7 @@ onMounted(async () => await queryResources(true));
         <div>
           <label class="sr-only" for="search-query-input-with-icon">Search query input</label>
           <div class="flex rounded-md shadow-sm">
+            <!-- TODO change to shadcn components -->
             <!-- <Input type="text"
                    id="search-query-input-with-icon"
                    v-model="query"

From 51cbde9d4c4fceb2310912a521c4ae15f4101a19 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Mon, 24 Feb 2025 18:29:22 +0100
Subject: [PATCH 08/10] chore: formatting

---
 components/card/resource.vue | 80 ++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index 6ff572b..7cf4c92 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -60,48 +60,48 @@ function visibilityCss(visibility: VisibilityClass): string {
       <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
       <!-- END Name and ID display -->
 
-            <!-- Badges -->
-            <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
-              <!-- DataClass Badge -->
-              <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
-                {{ displayVisbility(resource.visibility) }}
-              </Badge>
-              <!-- END DataClass -->
-              <!-- Stats Badge -->
-              <Badge v-if="resource.variant !== ResourceVariant.Object"
-                     class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-                Children: {{ resource.count }}
-              </Badge>
-              <Badge v-if="resource.variant === ResourceVariant.Object"
-                    class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-                {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
-              </Badge>
-              <!-- END Stats Badge -->
-            </div>
-            <!-- END Badges -->
-          </div>
-        <div class="mx-2 grow flex-col basis-2/3">
-          <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
-          <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
-            {{ displayDescription(resource.description) }}
-          </p>
-
-          <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
+      <!-- Badges -->
+      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
+        <!-- DataClass Badge -->
+        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
+          {{ displayVisbility(resource.visibility) }}
+        </Badge>
+        <!-- END DataClass -->
+        <!-- Stats Badge -->
+        <Badge v-if="resource.variant !== ResourceVariant.Object"
+               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+          Children: {{ resource.count }}
+        </Badge>
+        <Badge v-if="resource.variant === ResourceVariant.Object"
+              class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+          {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
+        </Badge>
+        <!-- END Stats Badge -->
+      </div>
+      <!-- END Badges -->
+    </div>
+    <div class="mx-2 grow flex-col basis-2/3">
+      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
+      <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
+        {{ displayDescription(resource.description) }}
+      </p>
 
-          <!-- Basic Label Display -->
-          <div class="flex flex-row flex-wrap">
-            <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
-              <span
-                  :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
-                  class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
-                {{ label.key }}
-              </span>
-              <span v-if="label.value"
-                    class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
-                {{ label.value }}</span>
-            </div>
-          </div>
+      <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
 
+      <!-- Basic Label Display -->
+      <div class="flex flex-row flex-wrap">
+        <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
+          <span
+              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
+              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
+            {{ label.key }}
+          </span>
+          <span v-if="label.value"
+                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
+            {{ label.value }}</span>
         </div>
+      </div>
+
     </div>
+  </div>
 </template>
\ No newline at end of file

From 1fbdc850f148e2bfe58f433b4da80c8ce2281922 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Thu, 27 Feb 2025 14:04:57 +0100
Subject: [PATCH 09/10] feat: add link to show more results button

---
 components/custom-ui/SearchDialog.vue        | 2 +-
 components/custom-ui/dashboard/Dashboard.vue | 2 +-
 pages/explore.vue                            | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index 6bcb16e..113459e 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -155,7 +155,7 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
         </CommandGroup>
       </CommandList>
       <Button v-if="response?.expected_hits > limitResults">
-        Show all results
+        <NuxtLink :href="'/explore?q=' + queryInput">Show all results</NuxtLink>
       </Button>
     </CommandDialog>
     <!-- END COMMAND DIALOG-->
diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index caae276..d38499a 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -350,7 +350,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <Skeleton class="h-auto w-[300px]"/>
             </template>
           </ClientOnly>
-          <SearchDialog />
+          <SearchDialog filter="variant IN [0,1,2]"/>
         </div>
         <DropdownMenu>
           <ClientOnly fallbackTag="span">
diff --git a/pages/explore.vue b/pages/explore.vue
index 5219fbd..2c43536 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -22,16 +22,17 @@ import {ResourceVariant} from "~/types/aruna-v3-enums";
 
 import {searchResources} from "~/composables/api_wrapper";
 
+const route = useRoute()
 const currentPage: Ref<number> = ref(1);
 const limit: Ref<number> = ref(20);
 const hits: Ref<Resource[]> = ref([]);
 const estimatedTotal = ref(0);
-const fetching = ref(false);
+const fetching = ref(true);
 
 const debouncedInput = debounce(async () => await queryResources(true), 250)
 
 /* Query */
-const query = ref("");
+const query = ref(route.query.q ? route.query.q : '')
 watch(query, async () => {
   fetching.value = true;
   await debouncedInput()

From ddfc6b7fc7a1670d5a55d5bd5e0da26d7ebe39d3 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 18 Mar 2025 10:47:25 +0100
Subject: [PATCH 10/10] chore: update styling for SearchDialog Button and add
 clickhandler for SearchDialog

---
 components/card/resource.vue          | 32 ++++++++++++++++++---------
 components/custom-ui/SearchDialog.vue | 11 +++++----
 pages/explore.vue                     | 11 ---------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index 7cf4c92..15ca185 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -19,28 +19,38 @@ function displayDescription(description: string): string {
   }
   return description
 }
+
 function displayVisbility(visibility: VisibilityClass): string {
   switch (visibility) {
-    case VisibilityClass.Public: return 'Public';
-    case VisibilityClass.PublicMetadata: return 'Public Metadata';
-    case VisibilityClass.Private: return 'Private';
-    default: return 'Unspecified'
+    case VisibilityClass.Public:
+      return 'Public';
+    case VisibilityClass.PublicMetadata:
+      return 'Public Metadata';
+    case VisibilityClass.Private:
+      return 'Private';
+    default:
+      return 'Unspecified'
   }
 }
+
 function visibilityCss(visibility: VisibilityClass): string {
   switch (visibility) {
-    case VisibilityClass.Public: return 'border-green-600 text-green-600';
-    case VisibilityClass.PublicMetadata: return 'border-white text-white';
-    case VisibilityClass.Private: return 'border-red-600/80 text-red-600/80';
-    default: return 'border-aruna-text/50 text-aruna-text/50'
+    case VisibilityClass.Public:
+      return 'border-green-600 text-green-600';
+    case VisibilityClass.PublicMetadata:
+      return 'border-white text-white';
+    case VisibilityClass.Private:
+      return 'border-red-600/80 text-red-600/80';
+    default:
+      return 'border-aruna-text/50 text-aruna-text/50'
   }
 }
 </script>
 
 <template>
   <div
-       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
-       :class="{'border-l-destructive': resource.deleted}">
+      class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
+      :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
       <!-- Name and ID display -->
       <TooltipProvider>
@@ -73,7 +83,7 @@ function visibilityCss(visibility: VisibilityClass): string {
           Children: {{ resource.count }}
         </Badge>
         <Badge v-if="resource.variant === ResourceVariant.Object"
-              class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
           {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
         </Badge>
         <!-- END Stats Badge -->
diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index 113459e..769b92f 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -109,8 +109,9 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
 
 <template>
   <div class="relative flex">
-    <Button @click="openDialog()">
-      <IconSearch class="mr-1 h-4 w-4 text-muted-foreground"/>
+    <Button @click="openDialog()"
+            class="py-2 px-3 inline-flex justify-center items-center bg-transparent border border-aruna-highlight rounded-sm text-aruna-highlight hover:text-aruna-text-accent hover:bg-aruna-highlight disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight cursor-pointer">
+      <IconSearch class="mr-1 h-4 w-4"/>
       Search
     </Button>
 
@@ -137,13 +138,15 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
         </CommandGroup>
         <CommandGroup heading="Folders">
           <CommandItem v-for="resource in resources?.folders"
-                       :value="resource">
+                       :value="resource"
+                       @select="router.push('/objects/' + resource.id)">
             {{ resource.name }}
           </CommandItem>
         </CommandGroup>
         <CommandGroup heading="Objects">
           <CommandItem v-for="resource in resources?.objects"
-                       :value="resource">
+                       :value="resource"
+                       @select="router.push('/objects/' + resource.id)">
             {{ resource.name }}
           </CommandItem>
         </CommandGroup>
diff --git a/pages/explore.vue b/pages/explore.vue
index 2c43536..42234b8 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -96,7 +96,6 @@ async function queryResources(pageReset: boolean) {
   })
 
   try {
-    //const response = await searchResources(body) // TODO remove dead code
     const response = await $fetch<SearchResponse>('/api/v3/search', {
       query: {
         query: query.value,
@@ -149,16 +148,6 @@ onMounted(async () => await queryResources(true));
         <div>
           <label class="sr-only" for="search-query-input-with-icon">Search query input</label>
           <div class="flex rounded-md shadow-sm">
-            <!-- TODO change to shadcn components -->
-            <!-- <Input type="text"
-                   id="search-query-input-with-icon"
-                   v-model="query"
-                   name="search-query-input-with-icon"
-                   placeholder="Search Aruna Resources"
-            />
-            <Button type="button">
-              <IconSearch class="flex-shrink-0 size-6"/>
-            </Button> -->
             <input type="text"
                    v-model="query"
                    id="search-query-input-with-icon"