From aae96b57bb529266f824b0961630b104a477c694 Mon Sep 17 00:00:00 2001
From: Ivan Velev <vanecat@gmail.com>
Date: Fri, 4 Feb 2022 14:55:45 -0800
Subject: [PATCH] added fullId  to v-for loops for safety of rendering and
 default unique IDs value to fullId in model; researched and tested showing
 multiple collections on same timeline;

---
 pywb/vueui/src/components/Timeline.vue | 4 ++--
 pywb/vueui/src/model.js                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pywb/vueui/src/components/Timeline.vue b/pywb/vueui/src/components/Timeline.vue
index a63b5d4c..5fc89732 100644
--- a/pywb/vueui/src/components/Timeline.vue
+++ b/pywb/vueui/src/components/Timeline.vue
@@ -19,14 +19,14 @@
         <div class="scroll" ref="periodScroll" :class="{highlight: highlight}">
             <div class="periods" ref="periods">
                 <div v-for="subPeriod in period.children"
-                     :key="subPeriod.id"
+                     :key="subPeriod.fullId"
                      class="period"
                      :class="{empty: !subPeriod.snapshotCount, highlight: highlightPeriod === subPeriod, 'last-level': !canZoom, 'contains-current-snapshot': containsCurrentSnapshot(subPeriod) }"
                 >
                     <div class="histo">
                         <div class="line"
                              v-for="histoPeriod in subPeriod.children"
-                             :key="histoPeriod.id"
+                             :key="histoPeriod.fullId"
                              :style="{height: getHistoLineHeight(histoPeriod.snapshotCount)}"
                              :class="{'has-single-snapshot': histoPeriod.snapshotCount === 1, 'contains-current-snapshot': containsCurrentSnapshot(histoPeriod)}"
                              @click="changePeriod(histoPeriod, $event)"
diff --git a/pywb/vueui/src/model.js b/pywb/vueui/src/model.js
index b6ee5652..6d4ec9bd 100644
--- a/pywb/vueui/src/model.js
+++ b/pywb/vueui/src/model.js
@@ -140,7 +140,7 @@ export class PywbSnapshot {
 export function PywbPeriod(init) {
   this.type = init.type;
   this.id = init.id;
-  this.fullId = ''; // full-id property that include string id of parents and self with a delimitor
+  this.fullId = Math.floor(1000*1000+Math.random()*9*1000*1000).toString(16); // full-id property that include string id of parents and self with a delimitor
 
   this.childrenIds = {}; // allow for query by ID
   this.children = []; // allow for sequentiality / order