feat: allow sorting trace file roots (#23)

Author: typeholes

devUiDriver/index.ts

@@ -31,7 +31,7 @@ function handleMessage(e: any) {
     return
 
   for (const message of commands) {
-    if (deepEq(message.trigger, e.data))
+    if (message.trigger && deepEq(message.trigger, e.data))
       iframe.contentWindow?.postMessage(message.response, '*')
   }
 }
@@ -50,6 +50,7 @@ const commandResponses: Record<string, any[]> = {}
 for (const command of commands) {
   if (
     'trigger' in command
+    && command.trigger
     && 'command' in command.trigger
     && command.trigger.command
   ) {

shared/src/messages.ts

@@ -104,7 +104,7 @@ const zodTree: z.ZodType<Tree> = z.lazy(() =>
 const showTree = z.object({
   message: z.literal('showTree'),
   nodes: z.array(zodTree),
-  replace: z.boolean().optional(),
+  step: z.literal('start').or(z.literal('add').or(z.literal('done'))),
 })
 export type ShowTree = z.infer<typeof showTree>
 

shared/src/traceTree.ts

@@ -99,16 +99,18 @@ export function showTree(startsWith: string, sourceFileName: string, position: n
   if (updateUi)
     postMessage({ message: 'filterTree', startsWith, sourceFileName, position })
 
-  postMessage({ message: 'showTree', nodes: [], replace: true })
+  postMessage({ message: 'showTree', nodes: [], step: 'start' })
 
   let i = 0
 
   // this can be large enough to freeze the UI if sent at once
   const interval = setInterval(() => {
-    postMessage({ message: 'showTree', nodes: skinnyNodes.slice(i, i + 10) })
+    postMessage({ message: 'showTree', nodes: skinnyNodes.slice(i, i + 10), step: 'add' })
     i += 10
-    if (i >= skinnyNodes.length)
+    if (i >= skinnyNodes.length) {
       clearInterval(interval)
+      postMessage({ message: 'showTree', nodes: [], step: 'done' })
+    }
   }, 0)
 
   nodes.forEach(node => treeIdNodes.set(node.id, node))

ui/app.vue

@@ -4,6 +4,9 @@ const colorMode = useColorMode()
 
 const sendMesage = useNuxtApp().$sendMessage
 
+const sortOptions = ['Timestamp', 'Duration', 'Types', 'Total Types'] as const
+const sortBy = ref('Timestamp' as (typeof sortOptions)[number])
+
 const secondButtonLabel = ref('Another button')
 
 const filters = useState('treeFilters', () => ({ startsWith: 'check', sourceFileName: '', position: 0 as number | '' }))
@@ -72,17 +75,22 @@ function toggleDarkMode() {
           </ULabled>
         </div>
       </ULabled>
-      <div>
-        <p class="p-4 pb-2">
-          <UIcon
-            v-model="colorMode.preference" :name="iconName"
-            :dynamic="true" @click="toggleDarkMode"
-          />
-        </p>
+      <div class="flex flex-col gap-1">
+        <ULabled label="Dark Mode">
+          <p class="p-4 ">
+            <UIcon
+              v-model="colorMode.preference" :name="iconName"
+              :dynamic="true" @click="toggleDarkMode"
+            />
+          </p>
+        </ULabled>
+        <ULabled label="Sort By">
+          <USelect v-model="sortBy" :options="sortOptions" />
+        </ULabled>
       </div>
     </div>
     <div>
-      <tree-root />
+      <tree-root :sort-by="sortBy" />
     </div>
 
     <dev-controls />

ui/components/TreeRoot.vue

@@ -3,22 +3,52 @@
 import type { Tree } from '../../shared/src/traceTree'
 import TreeNode from './TreeNode.vue'
 
+const props = defineProps<{ sortBy: 'Timestamp' | 'Duration' | 'Types' | 'Total Types' }>()
+
 const Messages = useNuxtApp().$Messages
 
+const sortValue: Record<typeof props.sortBy, (t: Tree) => number> = {
+  'Timestamp': t => t.line.ts,
+  'Duration': t => -(t.line.dur ?? 0),
+  'Types': t => -t.typeCnt,
+  'Total Types': t => -(t.childTypeCnt + t.typeCnt),
+} as const
+
 const nodes = ref([] as Tree[])
 
+let lastSortBy = props.sortBy
+function doSort() {
+  lastSortBy = props.sortBy
+  const val = props.sortBy ?? 'Timestamp'
+  const ord = sortValue[val]
+  nodes.value = nodes.value.toSorted((a, b) => ord(a) - ord(b))
+}
+
 function handleMessage(e: MessageEvent<unknown>) {
   const message = Messages.message.safeParse(e.data)
   if (!message.success)
     return
 
   if (message.data.message === 'showTree') {
-    if (message.data.replace)
-      nodes.value = []
-    nodes.value.push(...message.data.nodes)
+    switch (message.data.step) {
+      case 'start':
+        nodes.value = []
+        break
+      case 'add':
+        nodes.value.push(...message.data.nodes)
+        break
+      case 'done':
+        doSort()
+        break
+    }
   }
 }
 
+onUpdated(() => {
+  if (lastSortBy !== props.sortBy)
+    doSort()
+})
+
 onMounted(() => {
   window.addEventListener('message', handleMessage)
 })