perf(timeline): group position cache (flamechart only)

Author: Akryum

packages/app-frontend/src/features/timeline/TimelineView.vue

@@ -23,6 +23,7 @@ import {
   TimelineEvent,
   useMarkers,
   TimelineMarker,
+  getGroupsAroundPosition,
 } from './composable'
 import { useApps } from '@front/features/apps'
 import { onKeyUp } from '@front/util/keyboard'
@@ -395,12 +396,13 @@ export default defineComponent({
         const lastPos = event.group ? getPos(lastEvent.time) : firstPos
 
         // Check for 'collision' with other event groups
-        const l = event.layer.groups.length
+        const otherGroups = event.layer.groupsOnly ? getGroupsAroundPosition(event.layer, firstEvent.time, lastEvent.time) : event.layer.groups
+        const l = otherGroups.length
         let checkAgain = true
         while (checkAgain) {
           checkAgain = false
           for (let i = 0; i < l; i++) {
-            const otherGroup = event.layer.groups[i]
+            const otherGroup = otherGroups[i]
 
             if (
               // Different group
@@ -886,7 +888,7 @@ export default defineComponent({
         if (event.layer.groupsOnly && event.title && size > 32) {
           let t = event.groupT
           if (!t) {
-            t = event.groupT = new PIXI.Text(`${event.title} ${event.subtitle}`, {
+            t = event.groupT = new PIXI.Text(`${SharedData.debugInfo ? `${event.id} ` : ''}${event.title} ${event.subtitle}`, {
               fontSize: 10,
               fill: darkMode.value ? 0xffffff : 0,
             })

packages/app-frontend/src/features/timeline/composable/events.ts

@@ -18,6 +18,7 @@ import {
 } from './store'
 import { resetTime } from './reset'
 import { takeScreenshot } from './screenshot'
+import { addGroupAroundPosition } from './layers'
 
 const AUTOSCROLL_DURATION = 10000
 
@@ -72,6 +73,9 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay
       }
       layer.groups.push(group)
     }
+    if (layer.groupsOnly) {
+      addGroupAroundPosition(layer, group, event.time)
+    }
     group.events.push(event)
     group.lastEvent = event
     group.duration = event.time - group.firstEvent.time

packages/app-frontend/src/features/timeline/composable/layers.ts

@@ -13,6 +13,7 @@ import {
   Layer,
   selectedEvent,
   inspectedEvent,
+  EventGroup,
 } from './store'
 import { useRouter } from '@front/util/router'
 
@@ -26,6 +27,7 @@ export function layerFactory (options: LayerFromBackend): Layer {
     height: 1,
     lastInspectedEvent: null,
     loaded: false,
+    groupPositionCache: {},
   }
 }
 
@@ -114,3 +116,33 @@ export async function fetchLayers () {
   await waitForAppSelect()
   getBridge().send(BridgeEvents.TO_BACK_TIMELINE_LAYER_LIST, {})
 }
+
+export function getGroupsAroundPosition (layer: Layer, startPosition: number, endPosition: number): EventGroup[] {
+  const result: EventGroup[] = []
+  let key = Math.round(startPosition / 100)
+  const endKey = Math.round(endPosition / 100)
+  while (key <= endKey) {
+    const groups = layer.groupPositionCache[key]
+    if (groups) {
+      result.push(...groups)
+    }
+    key++
+  }
+  return result
+}
+
+export function addGroupAroundPosition (layer: Layer, group: EventGroup, newPosition: number) {
+  let key = Math.round(group.lastEvent.time / 100)
+  const endKey = Math.round(newPosition / 100)
+
+  while (key <= endKey) {
+    let list = layer.groupPositionCache[key]
+    if (!list) {
+      list = layer.groupPositionCache[key] = []
+    }
+    if (!list.includes(group)) {
+      list.push(group)
+    }
+    key++
+  }
+}

packages/app-frontend/src/features/timeline/composable/store.ts

@@ -56,6 +56,7 @@ export interface Layer extends LayerFromBackend {
   eventsMap: Record<TimelineEvent['id'], TimelineEvent>
   groups: EventGroup[]
   groupsMap: Record<EventGroup['id'], EventGroup>
+  groupPositionCache: Record<number, EventGroup[]>
   height: number
   lastInspectedEvent: TimelineEvent
   loaded: boolean