feat: Add search components to Plugins and Modules Graph (#45)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: CoutinhoTTS

packages/devtools/src/app/components/data/SearchPanel.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { FilterMatchRule } from '~/utils/icon'
+import { useVModel } from '@vueuse/core'
+import { withDefaults } from 'vue'
+
+interface ModelValue { search: string, selected: string[] | null }
+
+const props = withDefaults(
+  defineProps<{
+    rules: FilterMatchRule[]
+    modelValue?: ModelValue
+  }>(),
+  {
+    modelValue: () => ({
+      search: '',
+      selected: null,
+    }),
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ModelValue): void
+}>()
+
+const model = useVModel(props, 'modelValue', emit)
+
+function isRuleSelected(rule: FilterMatchRule) {
+  const { modelValue } = props
+  if (!modelValue?.selected)
+    return true
+  return modelValue.selected.includes(rule.name)
+}
+
+function toggleRule(rule: FilterMatchRule) {
+  const { rules } = props
+  if (!model?.value?.selected) {
+    model.value.selected = rules.map(r => r.name)
+  }
+  if (model.value.selected.includes(rule.name)) {
+    model.value.selected = model.value.selected.filter(t => t !== rule.name)
+  }
+  else {
+    model.value.selected.push(rule.name)
+  }
+  if (model?.value?.selected.length === props.rules.length) {
+    model.value.selected = null
+  }
+}
+</script>
+
+<template>
+  <div flex="col gap-2" max-w-90vw min-w-30vw border="~ base rounded-xl" bg-glass>
+    <div border="b base">
+      <input
+        v-model="model.search"
+        p2 px4
+        w-full
+        style="outline: none"
+        placeholder="Search"
+      >
+    </div>
+    <div flex="~ gap-2 wrap" p2>
+      <label
+        v-for="rule of rules"
+        :key="rule.name"
+        border="~ base rounded-md" px2 py1
+        flex="~ items-center gap-1"
+        select-none
+        :title="rule.description"
+        :class="isRuleSelected(rule) ? 'bg-active' : 'grayscale op50'"
+      >
+        <input
+          type="checkbox"
+          mr1
+          :checked="isRuleSelected(rule)"
+          @change="toggleRule(rule)"
+        >
+        <div :class="rule.icon" icon-catppuccin />
+        <div text-sm>{{ rule.description || rule.name }}</div>
+      </label>
+    </div>
+    <slot />
+  </div>
+</template>

packages/devtools/src/app/components/plugins/FlatList.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PluginItem } from '~~/shared/types'
+
+defineProps<{
+  plugins: PluginItem[]
+}>()
+</script>
+
+<template>
+  <div flex="~ col gap-2" p4>
+    <template v-for="plugin of plugins" :key="plugin.id">
+      <div font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
+        <div w-8 text-right text-xs op50>
+          #{{ plugin.plugin_id }}
+        </div>
+        <DisplayPluginName :name="plugin.name" />
+      </div>
+    </template>
+  </div>
+</template>

packages/devtools/src/app/pages/session/[session]/graph/index.vue

@@ -5,29 +5,28 @@ import { useRoute, useRouter } from '#app/composables/router'
 import { clearUndefined, toArray } from '@antfu/utils'
 import { computedWithControl, debouncedWatch } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, reactive } from 'vue'
+import { computed, ref } from 'vue'
 import { settings } from '~/state/settings'
 import { parseReadablePath } from '~/utils/filepath'
-import { getFileTypeFromModuleId, getFileTypeFromName } from '~/utils/icon'
+import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
 const props = defineProps<{
   session: SessionContext
 }>()
 
-interface Filters {
-  search: string
-  file_types: string[] | null
-  node_modules: string[] | null
-}
-
 const route = useRoute()
 const router = useRouter()
 
-const filters = reactive<Filters>({
+const searchValue = ref<{
+  search: string
+  selected: string[] | null
+  [key: string]: any
+}>({
   search: (route.query.search || '') as string,
-  file_types: (route.query.file_types ? toArray(route.query.file_types) : null) as string[] | null,
+  selected: (route.query.file_types ? toArray(route.query.file_types) : null) as string[] | null,
   node_modules: (route.query.node_modules ? toArray(route.query.node_modules) : null) as string[] | null,
 })
+
 const moduleViewTypes = [
   {
     label: 'List',
@@ -47,12 +46,12 @@ const moduleViewTypes = [
 ] as const
 
 debouncedWatch(
-  filters,
+  searchValue.value,
   (f) => {
     const query: any = {
       ...route.query,
       search: f.search || undefined,
-      file_types: f.file_types || undefined,
+      file_types: f.selected || undefined,
       node_modules: f.node_modules || undefined,
     }
     router.replace({
@@ -72,6 +71,12 @@ const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
   }
 }))
 
+const searchFilterTypes = computed(() => {
+  return ModuleTypeRules.filter((rule) => {
+    return parsedPaths.value.some(mod => rule.match.test(mod.mod.id))
+  })
+})
+
 // const allNodeModules = computed(() => {
 //   const nodeModules = new Set<string>()
 //   for (const mod of parsedPaths.value) {
@@ -81,45 +86,20 @@ const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
 //   return nodeModules
 // })
 
-const allFileTypes = computed(() => {
-  const fileTypes = new Set<string>()
-  for (const mod of parsedPaths.value) {
-    fileTypes.add(mod.type.name)
-  }
-  return fileTypes
-})
-
 const filtered = computed(() => {
   let modules = parsedPaths.value
-  if (filters.file_types) {
-    modules = modules.filter(mod => filters.file_types!.includes(mod.type.name))
+  if (searchValue.value.selected) {
+    modules = modules.filter((mod) => {
+      const type = getFileTypeFromModuleId(mod.mod.id)
+      return searchValue.value.selected!.includes(type.name)
+    })
   }
-  if (filters.node_modules) {
-    modules = modules.filter(mod => mod.path.moduleName && filters.node_modules!.includes(mod.path.moduleName))
+  if (searchValue.value.node_modules) {
+    modules = modules.filter(mod => mod.path.moduleName && searchValue.value.node_modules!.includes(mod.path.moduleName))
   }
   return modules.map(mod => ({ ...mod.mod, path: mod.path.path }))
 })
 
-function isFileTypeSelected(type: string) {
-  return filters.file_types == null || filters.file_types.includes(type)
-}
-
-function toggleFileType(type: string) {
-  if (filters.file_types == null) {
-    filters.file_types = Array.from(allFileTypes.value)
-  }
-
-  if (filters.file_types.includes(type)) {
-    filters.file_types = filters.file_types.filter(t => t !== type)
-  }
-  else {
-    filters.file_types.push(type)
-  }
-  if (filters.file_types.length === allFileTypes.value.size) {
-    filters.file_types = null
-  }
-}
-
 const fuse = computedWithControl(
   () => filtered.value,
   () => new Fuse(filtered.value, {
@@ -131,11 +111,11 @@ const fuse = computedWithControl(
 )
 
 const searched = computed(() => {
-  if (filters.search === '') {
+  if (!searchValue.value.search) {
     return filtered.value
   }
   return fuse.value
-    .search(filters.search)
+    .search(searchValue.value.search)
     .map(r => r.item)
 })
 
@@ -149,51 +129,25 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
 
 <template>
   <div relative max-h-screen of-hidden>
-    <div flex="col gap-2" absolute left-4 top-4 max-w-90vw border="~ base rounded-xl" bg-glass z-panel-nav>
-      <div border="b base">
-        <input
-          v-model="filters.search"
-          p2 px4 w-full
-          style="outline: none"
-          placeholder="Search"
-        >
-      </div>
-      <div flex="~ gap-2 wrap" p2>
-        <label
-          v-for="type of allFileTypes"
-          :key="type"
-          border="~ base rounded-md" px2 py1
-          flex="~ items-center gap-1"
-          select-none
-          :title="type"
-          :class="isFileTypeSelected(type) ? 'bg-active' : 'grayscale op50'"
-        >
-          <input
-            type="checkbox"
-            :checked="isFileTypeSelected(type)"
-            mr1
-            @change="toggleFileType(type)"
+    <div absolute left-4 top-4 z-panel-nav>
+      <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
+        <div flex="~ gap-2 items-center" p2 border="t base">
+          <span op50 pl2 text-sm>View as</span>
+          <button
+            v-for="viewType of moduleViewTypes"
+            :key="viewType.value"
+            btn-action
+            :class="settings.moduleGraphViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
+            @click="toggleDisplay(viewType.value)"
           >
-          <div :class="getFileTypeFromName(type).icon" icon-catppuccin />
-          <div text-sm>{{ getFileTypeFromName(type).description }}</div>
-        </label>
-      </div>
-      <div flex="~ gap-2 items-center" p2 border="t base">
-        <span op50 pl2 text-sm>View as</span>
-        <button
-          v-for="viewType of moduleViewTypes"
-          :key="viewType.value"
-          btn-action
-          :class="settings.moduleGraphViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
-          @click="toggleDisplay(viewType.value)"
-        >
-          <div :class="viewType.icon" />
-          {{ viewType.label }}
-        </button>
-      </div>
-      <!-- TODO: should we add filters for node_modules? -->
-      <!-- {{ allNodeModules }} -->
+            <div :class="viewType.icon" />
+            {{ viewType.label }}
+          </button>
+        </div>
+      </DataSearchPanel>
     </div>
+    <!-- TODO: should we add filters for node_modules? -->
+    <!-- {{ allNodeModules }} -->
     <template v-if="settings.moduleGraphViewType === 'list'">
       <div of-auto h-screen pt-45>
         <ModulesFlatList