From ff32d8f246d8c62a9da6656e06f72017ba9424ad Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 21 May 2026 16:17:40 +0900
Subject: [PATCH] refactor(ui): split module graph details view (#10385)

---
 packages/ui/client/components/FileDetails.vue | 129 ++----------------
 .../components/FileDetailsModuleGraph.vue     |  54 ++++++++
 2 files changed, 68 insertions(+), 115 deletions(-)
 create mode 100644 packages/ui/client/components/FileDetailsModuleGraph.vue

diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index f235f4a3f..c20339f68 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import type { RunnerTask, RunnerTestCase } from 'vitest'
-import type { ModuleGraph } from '~/composables/module-graph'
 import type { Params } from '~/composables/params'
-import { debouncedWatch } from '@vueuse/core'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
 import {
   browserState,
@@ -15,23 +13,17 @@ import {
 import { tagsDefinitions } from '~/composables/client/state'
 import { explorerTree } from '~/composables/explorer'
 import { hasFailedSnapshot } from '~/composables/explorer/collector'
-import { getModuleGraph } from '~/composables/module-graph'
 import { selectedTest, viewMode } from '~/composables/params'
 import { getBadgeNameColor, getBadgeTextColor } from '~/utils/task'
+import FileDetailsModuleGraph from './FileDetailsModuleGraph.vue'
 import IconButton from './IconButton.vue'
 import StatusIcon from './StatusIcon.vue'
 import ViewConsoleOutput from './views/ViewConsoleOutput.vue'
 import ViewEditor from './views/ViewEditor.vue'
-import ViewModuleGraph from './views/ViewModuleGraph.vue'
 import ViewReport from './views/ViewReport.vue'
 import ViewTestReport from './views/ViewTestReport.vue'
 
-const graph = ref<ModuleGraph>({ nodes: [], links: [] })
 const draft = ref(false)
-const hasGraphBeenDisplayed = ref(false)
-const loadingModuleGraph = ref(false)
-const currentFilepath = ref<string | undefined>(undefined)
-const hideNodeModules = ref(true)
 
 const test = computed(() => {
   return selectedTest.value
@@ -39,18 +31,6 @@ const test = computed(() => {
     : undefined
 })
 
-const graphData = computed(() => {
-  const c = current.value
-  if (!c || !c.filepath) {
-    return
-  }
-
-  return {
-    filepath: c.filepath,
-    projectName: c.file.projectName || '',
-  }
-})
-
 const failedSnapshot = computed(() => {
   return current.value && hasFailedSnapshot(current.value)
 })
@@ -69,10 +49,6 @@ function open() {
 }
 
 function changeViewMode(view: Params['view']) {
-  if (view === 'graph') {
-    hasGraphBeenDisplayed.value = true
-  }
-
   viewMode.value = view
 }
 const consoleCount = computed(() => {
@@ -83,77 +59,10 @@ function onDraft(value: boolean) {
   draft.value = value
 }
 
-const nodeModuleRegex = /[/\\]node_modules[/\\]/
-
-async function loadModuleGraph(force = false) {
-  if (
-    loadingModuleGraph.value
-    || (graphData.value?.filepath === currentFilepath.value && !force)
-  ) {
-    return
-  }
-
-  loadingModuleGraph.value = true
-
-  await nextTick()
-
-  try {
-    const gd = graphData.value
-    if (!gd) {
-      loadingModuleGraph.value = false
-      return
-    }
-
-    if (
-      force
-      || !currentFilepath.value
-      || gd.filepath !== currentFilepath.value
-      || (!graph.value.nodes.length && !graph.value.links.length)
-    ) {
-      let moduleGraph = await client.rpc.getModuleGraph(
-        gd.projectName,
-        gd.filepath,
-      )
-      // remove node_modules from the graph when enabled
-      if (hideNodeModules.value) {
-        moduleGraph = {
-          ...moduleGraph,
-          inlined: moduleGraph.inlined.filter(
-            n => !nodeModuleRegex.test(n),
-          ),
-          externalized: moduleGraph.externalized.filter(
-            n => !nodeModuleRegex.test(n),
-          ),
-        }
-      }
-      graph.value = getModuleGraph(
-        moduleGraph,
-        gd.filepath,
-      )
-      currentFilepath.value = gd.filepath
-    }
-    changeViewMode('graph')
-  }
-  finally {
-    await new Promise(resolve => setTimeout(resolve, 100))
-    loadingModuleGraph.value = false
-  }
-}
-
-debouncedWatch(
-  () => [graphData.value, viewMode.value, hideNodeModules.value] as const,
-  ([, vm, hide], old) => {
-    if (vm === 'graph') {
-      // only force reload when hide is changed
-      loadModuleGraph(old && hide !== old[2])
-    }
-  },
-  { debounce: 100, immediate: true },
-)
-
+const projectName = computed(() => current.value?.file.projectName || '')
 const projectNameColor = computed(() => {
-  const projectName = current.value?.file.projectName || ''
-  return explorerTree.colors.get(projectName) || getBadgeNameColor(current.value?.file.projectName)
+  const projectNameValue = projectName.value
+  return explorerTree.colors.get(projectNameValue) || getBadgeNameColor(projectNameValue)
 })
 
 const projectNameTextColor = computed(() => getBadgeTextColor(projectNameColor.value))
@@ -260,14 +169,7 @@ const tags = computed(() => {
           :class="{ 'tab-button-active': viewMode === 'graph' }"
           @click="changeViewMode('graph')"
         >
-          <span
-            v-if="loadingModuleGraph"
-            class="block w-1.4em h-1.4em i-carbon:circle-dash animate-spin animate-2s"
-          />
-          <span
-            v-else
-            class="block w-1.4em h-1.4em i-carbon:chart-relationship"
-          />
+          <span class="block w-1.4em h-1.4em i-carbon:chart-relationship" />
           Module Graph
         </button>
         <button
@@ -297,18 +199,15 @@ const tags = computed(() => {
     </div>
 
     <div flex flex-col flex-1 overflow="hidden">
-      <div v-if="hasGraphBeenDisplayed" :flex-1="viewMode === 'graph' && ''">
-        <ViewModuleGraph
-          v-show="viewMode === 'graph' && !loadingModuleGraph"
-          v-model="hideNodeModules"
-          :graph="graph"
-          data-testid="graph"
-          :project-name="current.file.projectName || ''"
-        />
-      </div>
+      <FileDetailsModuleGraph
+        v-if="viewMode === 'graph'"
+        :key="`graph:${current.id}`"
+        :file="current"
+        :project-name="projectName"
+      />
       <ViewEditor
-        v-if="viewMode === 'editor'"
-        :key="current.id"
+        v-else-if="viewMode === 'editor'"
+        :key="`editor:${current.id}`"
         :file="current"
         data-testid="editor"
         @draft="onDraft"
diff --git a/packages/ui/client/components/FileDetailsModuleGraph.vue b/packages/ui/client/components/FileDetailsModuleGraph.vue
new file mode 100644
index 000000000..5e003b9d4
--- /dev/null
+++ b/packages/ui/client/components/FileDetailsModuleGraph.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { RunnerTestFile } from 'vitest'
+import { useAsyncState } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { client } from '~/composables/client'
+import { getModuleGraph } from '~/composables/module-graph'
+import ViewModuleGraph from './views/ViewModuleGraph.vue'
+
+const props = defineProps<{
+  file: RunnerTestFile
+  projectName: string
+}>()
+
+const hideNodeModules = ref(true)
+const NODE_MODULES_RE = /[/\\]node_modules[/\\]/
+
+const { state: graphData, isLoading } = useAsyncState(
+  () => client.rpc.getModuleGraph(
+    props.projectName,
+    props.file.filepath,
+  ),
+  undefined,
+)
+
+const graph = computed(() => {
+  if (!graphData.value) {
+    return { nodes: [], links: [] }
+  }
+  let moduleGraph = graphData.value
+  if (hideNodeModules.value) {
+    moduleGraph = {
+      ...moduleGraph,
+      inlined: moduleGraph.inlined.filter(n => !NODE_MODULES_RE.test(n)),
+      externalized: moduleGraph.externalized.filter(n => !NODE_MODULES_RE.test(n)),
+    }
+  }
+  return getModuleGraph(moduleGraph, props.file.filepath)
+})
+</script>
+
+<template>
+  <div flex-1 overflow-hidden>
+    <div v-if="isLoading" h-full flex items-center justify-center op-70>
+      Loading module graph...
+    </div>
+    <ViewModuleGraph
+      v-else
+      v-model="hideNodeModules"
+      data-testid="graph"
+      :graph="graph"
+      :project-name="props.projectName"
+    />
+  </div>
+</template>
-- 
2.51.2