{
- this.app = this.initApp(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
+ this.setAppData(cdxList, timestamp ? {url, timestamp}:null);
});
}
- initApp(data, config = {}, loadCallback = null) {
+ initApp(config = {}) {
const app = new Vue(appData);
- const pywbData = new PywbData(data);
-
- app.$set(app, "snapshots", pywbData.snapshots);
- app.$set(app, "currentPeriod", pywbData.timeline);
-
app.$set(app, "config", {...app.config, ...config, prefix: this.prefix});
app.$mount("#app");
@@ -75,9 +71,9 @@ class CDXLoader {
// };
// }
// });
- if (loadCallback) {
- app.$on("show-snapshot", loadCallback);
- }
+
+ app.$on("show-snapshot", this.loadSnapshot.bind(this));
+ app.$on("data-set-and-render-completed", () => this.loadingSpinner.setOff()); // only turn off loading-spinner AFTER app has told us it is DONE DONE
return app;
}
@@ -90,16 +86,19 @@ class CDXLoader {
const cdxList = await this.loadCDX(queryURL);
- const pywbData = new PywbData(cdxList);
+ this.setAppData(cdxList, {url, timestamp});
+ }
- const app = this.app;
- app.$set(app, "snapshots", pywbData.snapshots);
- app.$set(app, "currentPeriod", pywbData.timeline);
+ setAppData(cdxList, snapshot=null) {
+ this.app.setData(new PywbData(cdxList));
- app.setSnapshot({url, timestamp});
+ if (snapshot) {
+ this.app.setSnapshot(snapshot);
+ }
}
async loadCDX(queryURL) {
+ this.loadingSpinner.setOn(); // start loading-spinner when CDX loading begins
const queryWorker = new Worker(this.staticPrefix + "/queryWorker.js");
const p = new Promise((resolve) => {
diff --git a/pywb/vueui/src/model.js b/pywb/vueui/src/model.js
index 96ec7a7f..6d4ec9bd 100644
--- a/pywb/vueui/src/model.js
+++ b/pywb/vueui/src/model.js
@@ -8,24 +8,37 @@ export function PywbData(rawSnaps) {
rawSnaps.forEach((rawSnap, i) => {
const snap = new PywbSnapshot(rawSnap, i);
let year, month, day, hour, single;
+
+ // Year Period
+ // if year did not exist in "all time", create it
if (!(year = allTimePeriod.getChildById(snap.year))) {
- if (lastYear) lastYear.checkIfSingleSnapshotOnly();
+ if (lastYear) lastYear.checkIfSingleSnapshotOnly(); // check last year for containing single snapshot
lastYear = year = new PywbPeriod({type: PywbPeriod.Type.year, id: snap.year});
allTimePeriod.addChild(year);
}
+
+ // Month Period
+ // if month did not exist in "year" period, create it
if (!(month = year.getChildById(snap.month))) {
- if (lastMonth) lastMonth.checkIfSingleSnapshotOnly();
+ if (lastMonth) lastMonth.checkIfSingleSnapshotOnly();// check last month for containing single snapshot
lastMonth = month = new PywbPeriod({type: PywbPeriod.Type.month, id: snap.month});
year.addChild(month);
}
+
+ // Day Period
+ // if day did not exist in "month" period, create it
if (!(day = month.getChildById(snap.day))) {
- if (lastDay) lastDay.checkIfSingleSnapshotOnly();
+ if (lastDay) lastDay.checkIfSingleSnapshotOnly(); // check last day for containing single snapshot
lastDay = day = new PywbPeriod({type: PywbPeriod.Type.day, id: snap.day});
month.addChild(day);
}
+
+ // Hour Period
const hourValue = Math.ceil((snap.hour + .0001) / (24/8)); // divide day in 4 six-hour periods (aka quarters)
+
+ // if hour did not exist in "day" period, create it
if (!(hour = day.getChildById(hourValue))) {
- if (lastHour) lastHour.checkIfSingleSnapshotOnly();
+ if (lastHour) lastHour.checkIfSingleSnapshotOnly(); // check last hour for containing single snapshot
lastHour = hour = new PywbPeriod({type: PywbPeriod.Type.hour, id: hourValue});
day.addChild(hour);
}
@@ -33,14 +46,29 @@ export function PywbData(rawSnaps) {
single = new PywbPeriod({type: PywbPeriod.Type.snapshot, id: snap.id});
hour.addChild(single);
}
- single.setSnapshot(snap);
- if (lastSingle) {
- lastSingle.setNextSnapshotPeriod(single);
- single.setPreviousSnapshotPeriod(lastSingle);
- }
- lastSingle = single;
- snapshots.push(snap);
+ // De-duplicate single snapshots (sometimes there are multiple snapshots
+ // of the same timestamp with different HTTP status; ignore all
+ // duplicates and take the first entry regardless of status)
+ if (!lastSingle || lastSingle.id !== single.id) {
+ single.setSnapshot(snap);
+ if (lastSingle) {
+ lastSingle.setNextSnapshotPeriod(single);
+ single.setPreviousSnapshotPeriod(lastSingle);
+ }
+ lastSingle = single;
+
+ snapshots.push(snap);
+ }
+
+ // At end of snapshot loop, check period of each type: year/month/day/hour
+ // as all snapshots are now added to the period hierarchy
+ if (i === rawSnaps.length - 1) { // is last snapshot
+ year.checkIfSingleSnapshotOnly();
+ month.checkIfSingleSnapshotOnly();
+ day.checkIfSingleSnapshotOnly();
+ hour.checkIfSingleSnapshotOnly();
+ }
});
this.timeline = allTimePeriod;
@@ -112,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
![](\"/static/zoom-out-icon-333316.png\"){kind=icon}
{{parents[0].getReadableId(true)}}\n \n \n >\n 0\">\n \n {{parent.getReadableId(true)}}\n \n >\n \n \n \n {{period.getReadableId(true)}}\n ({{period.snapshotCount}} captures)\n \n ![](\"/static/calendar-icon.png\"){kind=icon}
\n \n ![](\"/static/timeline-icon.png\"){kind=icon}
\n \n