From cbe66293723ed38507d82efee804578051b0d8f2 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Wed, 19 Oct 2022 12:57:34 -0700
Subject: [PATCH] scroller: use sequential keys for dash

---
 src/components/ScrollerManager.vue | 12 ++++++++++--
 src/types.ts                       |  2 ++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/ScrollerManager.vue b/src/components/ScrollerManager.vue
index a98035bc..2c43fcac 100644
--- a/src/components/ScrollerManager.vue
+++ b/src/components/ScrollerManager.vue
@@ -19,7 +19,7 @@
                 <div class="icon"> <ScrollIcon :size="20" /> </div>
         </span>
 
-        <div v-for="tick of visibleTicks" :key="tick.dayId"
+        <div v-for="tick of visibleTicks" :key="tick.key"
              class="tick"
             :class="{ 'dash': !tick.text }"
             :style="{ transform: `translateY(${tick.top}px)` }">
@@ -77,7 +77,15 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
 
     /** Get the visible ticks */
     get visibleTicks() {
-        return this.ticks.filter(tick => tick.s);
+        let key = 999900;
+        return this.ticks.filter(tick => tick.s).map(tick => {
+            if (tick.text) {
+                tick.key = key = tick.dayId * 100;
+            } else {
+                tick.key = ++key; // days are sorted descending
+            }
+            return tick;
+        });
     }
 
     /** Reset state */
diff --git a/src/types.ts b/src/types.ts
index 8a968fb8..98db049f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -146,6 +146,8 @@ export type ITick = {
     text?: string | number;
     /** Whether this tick should be shown */
     s?: boolean;
+    /** Key for vue component */
+    key?: number
 }
 
 export type TopMatter = {