feat: search for chunks (#140)

Author: webfansplz

packages/vite/src/app/components/display/ModuleGraph.vue

@@ -61,7 +61,7 @@ onMounted(() => {
         <svg pointer-events-none absolute left-0 top-0 z-graph-link :width="width" :height="height">
           <g>
             <template v-for="link of links" :key="link.id">
-              <slot name="link" :link="link" :d="generateModuleGraphLink<T, I>(link, spacing)!" :link-class="getModuleGraphLinkColor<T, I>(link)">
+              <slot v-if="link.target" name="link" :link="link" :d="generateModuleGraphLink<T, I>(link, spacing)!" :link-class="getModuleGraphLinkColor<T, I>(link)">
                 <path
                   :key="link.id"
                   :d="generateModuleGraphLink<T, I>(link, spacing)!"

packages/vite/src/app/pages/session/[session]/chunks.vue

@@ -2,8 +2,9 @@
 import type { SessionContext } from '~~/shared/types/data'
 import type { ClientSettings } from '~/state/settings'
 import { useRpc } from '#imports'
-import { useAsyncState } from '@vueuse/core'
-import { computed } from 'vue'
+import { computedWithControl, useAsyncState } from '@vueuse/core'
+import Fuse from 'fuse.js'
+import { computed, ref } from 'vue'
 import { settings } from '~/state/settings'
 
 const props = defineProps<{
@@ -28,6 +29,10 @@ const chunkViewTypes = [
   },
 ] as const
 
+const searchValue = ref<{ search: string }>({
+  search: '',
+})
+
 const rpc = useRpc()
 const { state: chunks, isLoading } = useAsyncState(
   async () => {
@@ -38,11 +43,31 @@ const { state: chunks, isLoading } = useAsyncState(
   },
   null,
 )
+
 const normalizedChunks = computed(() => chunks.value?.map(x => ({
   ...x,
   id: `${x.chunk_id}`,
 })) ?? [])
 
+const fuse = computedWithControl(
+  () => normalizedChunks.value,
+  () => new Fuse(normalizedChunks.value!, {
+    includeScore: true,
+    keys: ['name'],
+    ignoreLocation: true,
+    threshold: 0.4,
+  }),
+)
+
+const searched = computed(() => {
+  if (!searchValue.value.search) {
+    return normalizedChunks.value!
+  }
+  return fuse.value
+    .search(searchValue.value.search)
+    .map(r => r.item)
+})
+
 function toggleDisplay(type: ClientSettings['chunkViewType']) {
   settings.value.chunkViewType = type
 }
@@ -52,46 +77,50 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
   <VisualLoading v-if="isLoading" />
   <div v-else relative max-h-screen of-hidden>
     <div absolute left-4 top-4 z-panel-nav>
-      <div flex="~ gap-2 items-center" p2 border="~ base rounded-xl" bg-glass>
-        <span op50 pl2 text-sm>View as</span>
-        <button
-          v-for="viewType of chunkViewTypes"
-          :key="viewType.value"
-          btn-action
-          :class="settings.chunkViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
-          @click="toggleDisplay(viewType.value)"
-        >
-          <div :class="viewType.icon" />
-          {{ viewType.label }}
-        </button>
-      </div>
+      <DataSearchPanel v-model="searchValue" :rules="[]">
+        <div flex="~ gap-2 items-center" p2 border="t base">
+          <span op50 pl2 text-sm>View as</span>
+          <button
+            v-for="viewType of chunkViewTypes"
+            :key="viewType.value"
+            btn-action
+            :class="settings.chunkViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
+            @click="toggleDisplay(viewType.value)"
+          >
+            <div :class="viewType.icon" />
+            {{ viewType.label }}
+          </button>
+        </div>
+      </DataSearchPanel>
     </div>
-    <template v-if="settings.chunkViewType === 'list'">
-      <div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
-        <ChunksFlatList
-          :session="session"
-          :chunks="normalizedChunks"
-        />
-      </div>
-    </template>
-    <template v-if="settings.chunkViewType === 'detailed-list'">
-      <div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
-        <template v-for="chunk of chunks" :key="chunk.id">
-          <DataChunkDetails
-            border="~ base rounded-lg"
-            p3
-            :chunk="chunk"
-            :chunks="chunks!"
+    <div of-auto h-screen flex="~ col gap-2" pt12>
+      <template v-if="settings.chunkViewType === 'list'">
+        <div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
+          <ChunksFlatList
             :session="session"
+            :chunks="searched"
           />
-        </template>
-      </div>
-    </template>
-    <template v-else-if="settings.chunkViewType === 'graph'">
-      <ChunksGraph
-        :session="session"
-        :chunks="normalizedChunks"
-      />
-    </template>
+        </div>
+      </template>
+      <template v-if="settings.chunkViewType === 'detailed-list'">
+        <div class="px5 pt24 of-auto h-screen" flex="~ col gap-4">
+          <template v-for="chunk of searched" :key="chunk.id">
+            <DataChunkDetails
+              border="~ base rounded-lg"
+              p3
+              :chunk="chunk"
+              :chunks="searched!"
+              :session="session"
+            />
+          </template>
+        </div>
+      </template>
+      <template v-else-if="settings.chunkViewType === 'graph'">
+        <ChunksGraph
+          :session="session"
+          :chunks="searched"
+        />
+      </template>
+    </div>
   </div>
 </template>