perf: improve graph page performance (#145)

Author: alexzhang1030

package.json

@@ -53,7 +53,8 @@
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
     "release": "bumpp -r",
-    "dep:up": "taze -I major"
+    "dep:up": "taze -I major",
+    "prepare": "simple-git-hooks"
   },
   "peerDependencies": {
     "vite": "^3.1.0 || ^4.0.0-0"

packages/client/logic/graph.ts

@@ -3,7 +3,7 @@ import Fuse from 'fuse.js'
 import { Minimatch } from 'minimatch'
 import { rpc } from './rpc'
 
-export const list = ref<ModuleInfo[]>(await rpc.componentGraph())
+const list = ref<ModuleInfo[]>(await rpc.componentGraph())
 export const searchText = useStorage('vite-inspect-search-text', '')
 export const includeNodeModules = useStorage('vite-inspect-include-node-modules', false)
 export const includeVirtual = useStorage('vite-inspect-include-virtual', false)
@@ -63,61 +63,86 @@ function uniqById(data: typeof list.value) {
   return uniqueArray
 }
 
-function fuzzySearchDeps(data: typeof list.value, id: string) {
+function fuzzySearchDeps(data: ModuleInfo[], text: string) {
   const fuzzySearcher = new Fuse(data, {
     ignoreLocation: true,
     keys: ['id'],
     shouldSort: true,
     threshold: 0.1,
   })
-  const result = fuzzySearcher.search(id).map(i => i.item)
-  if (!result) {
+  const ids = fuzzySearcher.search(text).map(i => i.item.id)
+  if (!ids.length) {
     return {
-      main: [],
-      allWithDeps: [],
+      matchedKeys: [],
+      data: [],
     }
   }
   return {
-    main: result,
-    allWithDeps: uniqById(result.flatMap(item => getDepsByExactId(data, item.id))),
+    matchedKeys: ids,
+    data: uniqById(ids.flatMap(id => getDepsByExactId(data, id))),
   }
 }
 
-function filterByUserDefinedGlob(data: typeof list.value) {
-  if (!userCustomGlobPattern.value.trim().length)
+function filterByUserDefinedGlob(data: ModuleInfo[], pattern: string) {
+  if (!pattern.trim().length)
     return data
-  const globPattern = userCustomGlobPattern.value.trim().split(', ')
-  const globInstances = new Map(globPattern.map(pattern => [pattern, new Minimatch(pattern, { matchBase: true })]))
-  return data.filter(item => globPattern.every(pattern =>
+  const globPatterns = pattern.trim().split(', ')
+  const globInstances = new Map(globPatterns.map(pattern => [pattern, new Minimatch(pattern, { matchBase: true, dot: true, partial: true })]))
+  return data.filter(item => globPatterns.every(pattern =>
     globInstances.get(pattern)!.match(item.id),
   ))
 }
 
 const { graphSettings } = useGraphSettings()
 
-export const searchResults = computed(() => {
-  let data = (
-    list.value
-  ) || []
-
-  if (!includeNodeModules.value)
-    data = data.filter(item => !item.id.includes('/node_modules/'))
-  if (!includeVirtual.value)
-    data = data.filter(item => !item.virtual)
-
-  if (graphSettings.value.enableUserDefinedGlob)
-    data = filterByUserDefinedGlob(data)
-
-  if (!searchText.value) {
-    return {
-      main: [],
-      data,
+const getDebounceTime = (len: number) => len > 85 ? 350 : 150
+export const searchResults = ref<ModuleInfo[]>([])
+export const matchedKeys = ref<string[]>([])
+
+const filterer = {
+  excludeNodeModules: (data: ModuleInfo[]) => {
+    return includeNodeModules.value ? data : data.filter(item => !item.id.includes('/node_modules/'))
+  },
+  excludeVirtual: (data: ModuleInfo[]) => {
+    return includeVirtual.value ? data : data.filter(item => !item.virtual)
+  },
+  userCustomGlobPattern: (data: ModuleInfo[], pattern: string) => {
+    if (!graphSettings.value.enableUserDefinedGlob || !pattern.trim().length)
+      return data
+    return filterByUserDefinedGlob(data, pattern)
+  },
+  searchText: (data: ModuleInfo[], text: string) => {
+    if (!text.trim().length) {
+      matchedKeys.value = []
+      return data
     }
-  }
+    const { data: searchData, matchedKeys: searchMatchedKeys } = fuzzySearchDeps(data, searchText.value.trim())
+    matchedKeys.value = searchMatchedKeys
+    return searchData
+  },
+}
 
-  const { main, allWithDeps } = fuzzySearchDeps(data, searchText.value.trim())
-  return {
-    main,
-    data: allWithDeps,
-  }
+const allDataCanBeSearched = computed(() => {
+  return filterer.excludeVirtual(
+    filterer.excludeNodeModules(list.value),
+  )
 })
+
+debouncedWatch([searchText, userCustomGlobPattern, allDataCanBeSearched], ([,,list]) => {
+  filterData(false, list)
+}, { debounce: computed(() => getDebounceTime(searchResults.value.length)) })
+
+async function filterData(isInit = false, givenData?: ModuleInfo[]) {
+  let data: ModuleInfo[] = givenData ?? []
+  if (isInit)
+    data = list.value = await rpc.componentGraph()
+  data = filterer.searchText(
+    filterer.userCustomGlobPattern(
+      filterer.excludeVirtual(
+        filterer.excludeNodeModules(data),
+      ), userCustomGlobPattern.value)
+    , searchText.value)
+  searchResults.value = data
+}
+
+await filterData(true)

packages/client/pages/graph.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Data, Options } from 'vis-network'
 import { Network } from 'vis-network'
+import { matchedKeys } from '../logic/graph'
 import { searchResults as modules } from '~/logic/graph'
 import { useDevToolsClient } from '~/logic/client'
 import { rootPath } from '~/logic/global'
@@ -29,8 +30,19 @@ function getHoverPath(level: GraphSettingsType['hoverPathLevel'], fullPath: stri
   }
 }
 
+const isMatched = (id: string) => matchedKeys.value.includes(id)
+
+function getFontStyle(id: string) {
+  return {
+    color: isMatched(id)
+      ? '#F19B4A'
+      : isDark.value ? 'white' : 'black',
+    multi: 'html',
+  }
+}
+
 const data = computed<Data>(() => {
-  const { data, main } = modules.value
+  const data = modules.value
   if (!data)
     return { node: [], edges: [] }
   const nodes: Data['nodes'] = data.map((mod) => {
@@ -42,20 +54,14 @@ const data = computed<Data>(() => {
       modulesMap.value.set(id, { filePath: path })
     else
       modulesMap.value.get(id)!.filePath = path
-    const isInMain = !!main.find(i => i.id === id)
 
     return {
       id,
-      label: isInMain ? `<b>${pathSegments.at(-1)}</b>` : pathSegments.at(-1),
+      label: isMatched(id) ? `<b>${pathSegments.at(-1)}</b>` : pathSegments.at(-1),
       title: getHoverPath(settings.graphSettings.value.hoverPathLevel, path, rootPath),
       group: path.match(/\.(\w+)$/)?.[1] || 'unknown',
       size: 15 + Math.min(mod.deps.length / 2, 8),
-      font: {
-        color: isInMain
-          ? '#F19B4A'
-          : isDark.value ? 'white' : 'black',
-        multi: 'html',
-      },
+      font: getFontStyle(id),
       shape: mod.id.includes('/node_modules/')
         ? 'hexagon'
         : mod.virtual
@@ -135,7 +141,9 @@ onMounted(() => {
     if (!settings.graphSettings.value.highlightSelection)
       return
     // @ts-expect-error network body typing error
-    network.body.data.nodes.update(network.body.data.nodes.getIds().map(id => ({ id, size: 16 })))
+    network.body.data.nodes.update(network.body.data.nodes.getIds().map(id => ({
+      id, size: 16, font: getFontStyle(id),
+    })))
     // @ts-expect-error network body typing error
     network.body.data.edges.update(network.body.data.edges.getIds().map((id) => {
       // @ts-expect-error network body typing error
@@ -163,9 +171,9 @@ onMounted(() => {
     // @ts-expect-error network body typing error
     const nonConnectedEdges = network.body.data.edges.getIds().filter(id => !network.getConnectedEdges(nodeId).includes(id))
     // @ts-expect-error network body typing error
-    network.body.data.nodes.update(nonConnectedNodes.map(id => ({ id, color: 'rgb(69,69,69,.3)' })))
+    network.body.data.nodes.update(nonConnectedNodes.map(id => ({ id, color: '#cccccc10', font: { color: '#cccccc10' } })))
     // @ts-expect-error network body typing error
-    network.body.data.edges.update(nonConnectedEdges.map(id => ({ id, color: 'rgb(69,69,69,.3)' })))
+    network.body.data.edges.update(nonConnectedEdges.map(id => ({ id, color: '#cccccc10' })))
     // @ts-expect-error network body typing error
     network.body.data.nodes.update([{ id: nodeId, color: options.groups[network.body.data.nodes.get(nodeId).group]?.color, size: 26 }])
     lastSelectedNode.value = nodeId
@@ -194,7 +202,7 @@ const { showGraphSetting } = useGraphSettings()
         </button>
       </template>
     </SearchBox>
-    <div ref="container" flex="1" :class="[isHoveringNode && metaKeyPressed ? 'cursor-pointer' : '']" />
+    <div ref="container" flex="1" :class="[isHoveringNode ? 'cursor-pointer' : '']" />
     <GraphSettings />
   </div>
 </template>