feat: adjust ui

Author: antfu

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
+import { useRpc } from '#imports'
+import { computedAsync } from '@vueuse/core'
+import { nextTick, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  session: SessionContext
+  module: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const rpc = useRpc()
+const transforms = ref<RolldownModuleTransformInfo[]>([])
+const transformsLoading = ref(false)
+const flowNodeSelected = ref(false)
+const view = ref<'flow' | 'charts' | 'imports'>('flow')
+
+watchEffect(async () => {
+  const arg = {
+    session: props.session.id,
+    module: props.module,
+  }
+  // fetch transforms in the next tick to avoid race conditions with module info
+  nextTick(async () => {
+    transforms.value = []
+    transformsLoading.value = true
+    transforms.value = await rpc.value!['vite:rolldown:get-module-transforms']?.(arg)
+    transformsLoading.value = false
+  })
+})
+
+const info = computedAsync(async () => {
+  const arg = {
+    session: props.session.id,
+    module: props.module,
+  }
+  return {
+    transforms: transforms.value,
+    ...(await rpc.value!['vite:rolldown:get-module-info']?.(arg)),
+  } as ModuleInfo
+})
+
+function selectFlowNode(v: boolean) {
+  flowNodeSelected.value = v
+}
+</script>
+
+<template>
+  <div v-if="info" relative h-full w-full>
+    <DisplayCloseButton
+      absolute right-2 top-1.5
+      @click="emit('close')"
+    />
+    <div
+      bg-glass absolute left-2 top-2 z-panel-content p2
+      border="~ base rounded-lg"
+      flex="~ col gap-2"
+    >
+      <DisplayModuleId :id="module" px2 py1 :session />
+      <div flex="~ gap-2">
+        <button
+          :class="view === 'flow' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="view = 'flow'"
+        >
+          <div i-ph-git-branch-duotone rotate-180 />
+          Build Flow
+        </button>
+        <button
+          :class="view === 'charts' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="view = 'charts'"
+        >
+          <div i-ph-chart-donut-duotone />
+          Charts
+        </button>
+        <button
+          :class="view === 'imports' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="view = 'imports'"
+        >
+          <div i-ph-graph-duotone />
+          Imports
+        </button>
+      </div>
+    </div>
+    <div h-30 w-100 />
+    <FlowmapModuleFlow
+      v-if="view === 'flow'"
+      p4
+      :info
+      :session
+      :transforms-loading
+      @select="selectFlowNode"
+    />
+    <ChartModuleFlamegraph
+      v-if="view === 'charts'"
+      :info
+      :session="session"
+      :flow-node-selected="flowNodeSelected"
+    />
+    <DataModuleImportRelationships
+      v-if="view === 'imports'"
+      :module="info"
+      :session="session"
+    />
+  </div>
+  <VisualLoading v-else />
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ModuleInfo, SessionContext } from '~~/shared/types'
+
+defineProps<{
+  module: ModuleInfo
+  session: SessionContext
+}>()
+</script>
+
+<template>
+  <div>
+    Module Imports Relationships (TODO)
+  </div>
+</template>

packages/devtools/src/app/components/flowmap/ModuleFlow.vue

@@ -140,7 +140,7 @@ const codeDisplay = computed(() => {
 </script>
 
 <template>
-  <div pt4>
+  <div pt4 ws-nowrap>
     <div v-if="info.importers?.length" text-sm>
       <div flex>
         <VMenu>

packages/devtools/src/app/components/flowmap/ModuleFlowLoader.vue

@@ -85,17 +85,14 @@ onMounted(async () => {
       <div
         :key="(route.query.module as string)"
         v-on-click-outside="closeFlowPanel"
-        fixed right-0 bottom-0 top-20 z-panel-content
-        of-scroll bg-glass border="l t base rounded-tl-xl"
-        max-w-90vw min-w-250
+        fixed right-0 bottom-0 top-20 left-20 z-panel-content
+        bg-glass border="l t base rounded-tl-xl"
+        of-auto
       >
-        <FlowmapModuleFlowLoader
+        <DataModuleDetailsLoader
           :module="(route.query.module as string)"
           :session="session"
-        />
-        <DisplayCloseButton
-          absolute right-2 top-2
-          @click="closeFlowPanel"
+          @close="closeFlowPanel"
         />
       </div>
     </div>