refactor(timeline): use virtual scroller

Akryum · Akryum · commit 018e6167214f · 2020-12-17T12:44:23.000+01:00
diff --git a/packages/app-frontend/src/features/timeline/TimelineEventList.vue b/packages/app-frontend/src/features/timeline/TimelineEventList.vue
@@ -73,9 +73,11 @@ export default {
     function scrollToInspectedEvent () {
       if (!scroller.value) return
 
+      const scrollerEl = scroller.value.$el
+
       const index = filteredEvents.value.indexOf(inspectedEvent.value)
       if (index !== -1) {
-        scroller.value.scrollTop = 39 * (index + 0.5) - (scroller.value.clientHeight) / 2
+        scrollerEl.scrollTop = 39 * (index + 0.5) - (scrollerEl.clientHeight) / 2
       }
     }
 
@@ -86,11 +88,13 @@ export default {
     function checkScrollToInspectedEvent () {
       if (!scroller.value) return
 
+      const scrollerEl = scroller.value.$el
+
       const index = filteredEvents.value.indexOf(inspectedEvent.value)
       const minPosition = 39 * index
       const maxPosition = minPosition + 39
 
-      if (scroller.value.scrollTop > minPosition || scroller.value.scrollTop + scroller.value.clientHeight < maxPosition) {
+      if (scrollerEl.scrollTop > minPosition || scrollerEl.scrollTop + scrollerEl.clientHeight < maxPosition) {
         scrollToInspectedEvent()
       }
     }
@@ -165,18 +169,20 @@ export default {
       />
     </div>
 
-    <div
+    <RecycleScroller
       ref="scroller"
-      class="flex-1 overflow-y-auto scroll-smooth"
+      :items="filteredEvents"
+      :item-size="34"
+      class="flex-1"
     >
-      <TimelineEventListItem
-        v-for="(event, index) of filteredEvents"
-        :key="index"
-        :event="event"
-        :selected="tabId !== 'nearby' && selectedStackedEvents.includes(event)"
-        @inspect="inspectEvent(event)"
-        @select="selectEvent(event)"
-      />
-    </div>
+      <template #default="{ item: event }">
+        <TimelineEventListItem
+          :event="event"
+          :selected="tabId !== 'nearby' && selectedStackedEvents.includes(event)"
+          @inspect="inspectEvent(event)"
+          @select="selectEvent(event)"
+        />
+      </template>
+    </RecycleScroller>
   </div>
 </template>
diff --git a/packages/app-frontend/src/features/timeline/index.js b/packages/app-frontend/src/features/timeline/index.js
@@ -9,6 +9,8 @@ import { getBridge } from '../bridge'
 const STACK_DURATION = 50
 const AUTOSCROLL_DURATION = 10000
 
+let nextEventId = 0
+
 const startTime = ref(0)
 const endTime = ref(0)
 const minTime = ref(0)
@@ -82,6 +84,7 @@ function addEvent (appId, event, layer) {
     resetTime()
   }
 
+  event.id = nextEventId++
   event.layer = layer
   event.appId = appId
   layer.events.push(event)
