fix: Module graph in workspace of UI package

packages/ui/client/components/FileDetails.vue

@@ -15,7 +15,7 @@ debouncedWatch(
   current,
   async (c, o) => {
     if (c && c.filepath !== o?.filepath) {
-      data.value = await client.rpc.getModuleGraph(c.filepath)
+      data.value = await client.rpc.getModuleGraph(c.filepath, c.projectName)
       graph.value = getModuleGraph(data.value, c.filepath)
     }
   },

packages/ui/client/components/TaskItem.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { getProjectNameColor } from '../utils/task'
+import { isDark } from '../composables/dark'
 import type { Task } from '#types'
 
 const props = defineProps<{
@@ -23,7 +25,10 @@ const duration = computed(() => {
   >
     <StatusIcon :task="task" mr-2 />
     <div flex items-end gap-2 :text="task?.result?.state === 'fail' ? 'red-500' : ''">
-      <span text-sm truncate font-light>{{ task.name }}</span>
+      <span text-sm truncate font-light>
+        <span v-if="task.type === 'suite' && task.projectName" :style="{ color: getProjectNameColor(task.projectName, isDark) }">|{{ task.projectName }}|  </span>
+        {{ task.name }}
+      </span>
       <span v-if="typeof duration === 'number'" text="xs" op20 style="white-space: nowrap">
         {{ duration > 0 ? duration : '< 1' }}ms
       </span>

packages/ui/client/utils/task.ts

@@ -9,3 +9,24 @@ export function caseInsensitiveMatch(target: string, str2: string) {
     return false
   return target.toLowerCase().includes(str2.toLowerCase())
 }
+
+export function getProjectNameColor(name: string | undefined, isDark: boolean) {
+  if (!name)
+    return ''
+  const index = name.split('').reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
+  const darkColors = [
+    '#0000FF', // blue
+    '#FFFF00', // yellow
+    '#00FFFF', // cyan
+    '#00FF00', // green
+    '#FF00FF', // magenta
+  ]
+  const lightColors = [
+    '#330099', // blue
+    '#7c7c05', // yellow
+    '#087b7b', // cyan
+    '#025402', // green
+    '#FF00FF', // magenta
+  ]
+  return isDark ? darkColors[index % darkColors.length] : lightColors[index % lightColors.length]
+}

packages/vitest/src/api/setup.ts

@@ -104,8 +104,8 @@ export function setup(vitestOrWorkspace: Vitest | WorkspaceProject, server?: Vit
             return result
           }
         },
-        async getModuleGraph(id: string): Promise<ModuleGraphData> {
-          return getModuleGraph(ctx, id)
+        async getModuleGraph(id: string, workspaceName?: string): Promise<ModuleGraphData> {
+          return getModuleGraph(ctx, id, workspaceName)
         },
         updateSnapshot(file?: File) {
           if (!file)

packages/vitest/src/api/types.ts

@@ -19,7 +19,7 @@ export interface WebSocketHandlers {
   getConfig(): ResolvedConfig
   resolveSnapshotPath(testPath: string): string
   resolveSnapshotRawPath(testPath: string, rawPath: string): string
-  getModuleGraph(id: string): Promise<ModuleGraphData>
+  getModuleGraph(id: string, workspaceName?: string): Promise<ModuleGraphData>
   getTransformResult(id: string): Promise<TransformResultWithSource | undefined>
   readFile(id: string): Promise<string | null>
   writeFile(id: string, content: string, ensureDir?: boolean): Promise<void>

packages/vitest/src/utils/graph.ts

@@ -1,7 +1,7 @@
 import type { ModuleNode } from 'vite'
 import type { ModuleGraphData, Vitest } from '../types'
 
-export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGraphData> {
+export async function getModuleGraph(ctx: Vitest, id: string, workspaceName?: string): Promise<ModuleGraphData> {
   const graph: Record<string, string[]> = {}
   const externalized = new Set<string>()
   const inlined = new Set<string>()
@@ -29,7 +29,18 @@ export async function getModuleGraph(ctx: Vitest, id: string): Promise<ModuleGra
     graph[id] = (await Promise.all(mods.map(m => get(m, seen)))).filter(Boolean) as string[]
     return id
   }
-  await get(ctx.server.moduleGraph.getModuleById(id))
+
+  const workspaceProject = ctx.projects.find(project => project.getName() === workspaceName)
+  const workspaceModules = workspaceProject?.ctx.getModuleProjects(id)
+  const selectedModule = workspaceModules?.find(module => module.getName() === workspaceName)
+  let workspaceMod: ModuleNode | undefined
+  if (selectedModule) {
+    const { server, browser } = selectedModule
+    const mod = server.moduleGraph.getModuleById(id) || browser?.moduleGraph.getModuleById(id)
+    workspaceMod = mod
+  }
+
+  await get(ctx.server.moduleGraph.getModuleById(id) || workspaceMod)
   return {
     graph,
     externalized: Array.from(externalized),