From 20d69469a4c80a196de23625d0420487b0ed04a6 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Thu, 29 Dec 2022 16:17:39 +1100 Subject: Show event-count data on timeline Backend: Send event-count data to client in EventResponse instance Fix certain usages of gregorian calendar instead of julian Move HistDate, SCALES, etc, into cal.py Frontend: Make App update a unitCountMaps object using event-count data from server Make TimeLine show visual indication of unit counts Add showEventCounts option to store Update unit tests --- src/App.vue | 41 ++++++++++++++++++---- src/components/TimeLine.vue | 85 ++++++++++++++++++++++++++++++++++----------- src/lib.ts | 21 +++++++++++ src/store.ts | 1 + 4 files changed, 121 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/App.vue b/src/App.vue index feba10e..ddc434f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,7 +19,8 @@
@@ -38,8 +39,8 @@ import PlusIcon from './components/icon/PlusIcon.vue'; import SettingsIcon from './components/icon/SettingsIcon.vue'; import HelpIcon from './components/icon/HelpIcon.vue'; // Other -import {timeout, HistDate, HistEvent, queryServer, HistEventJson, jsonToHistEvent, - SCALES, TimelineState, cmpHistEvent, DateRangeTree} from './lib'; +import {timeout, HistDate, HistEvent, queryServer, EventResponseJson, jsonToHistEvent, + SCALES, TimelineState, cmpHistEvent, dateToUnit, DateRangeTree} from './lib'; import {useStore} from './store'; import {RBTree, rbtree_shallow_copy} from './rbtree'; @@ -101,6 +102,7 @@ function onTimelineRemove(idx: number){ // For storing and looking up events const eventTree: ShallowRef> = shallowRef(new RBTree(cmpHistEvent)); let idToEvent: Map = new Map(); +const unitCountMaps: Ref[]> = ref(SCALES.map(() => new Map())); // For each scale, maps units to event counts // For keeping event data under a memory limit const EXCESS_EVENTS_THRESHOLD = 10000; let displayedEvents: Map = new Map(); // Maps TimeLine IDs to IDs of displayed events @@ -117,8 +119,25 @@ function reduceEvents(){ for (let [, event] of eventsToKeep){ newTree.insert(event); } + // Create new unit-count maps + let newMaps: Map[] = SCALES.map(() => new Map()); + for (let timeline of timelines.value){ + if (timeline.scaleIdx == null){ + continue; + } + // Look for units to keep + let scaleIdx: number = timeline.scaleIdx; + let startUnit = dateToUnit(timeline.startDate, SCALES[scaleIdx]); + let endUnit = dateToUnit(timeline.endDate, SCALES[scaleIdx]); + for (let [unit, count] of unitCountMaps.value[scaleIdx]){ + if (unit >= startUnit && unit <= endUnit){ + newMaps[scaleIdx].set(unit, count); + } + } + } // Replace old data eventTree.value = newTree; + unitCountMaps.value = newMaps; idToEvent = eventsToKeep; } // For getting events from server @@ -144,15 +163,15 @@ async function onEventDisplay( scale: String(SCALES[scaleIdx]), limit: String(EVENT_REQ_LIMIT), }); - let responseObj: HistEventJson[] = await queryServer(urlParams); + let responseObj: EventResponseJson = await queryServer(urlParams); if (responseObj == null){ pendingReq = false; return; } queriedRanges[scaleIdx].add([firstDate, lastDate]); - // Add to map + // Collect events let added = false; - for (let eventObj of responseObj){ + for (let eventObj of responseObj.events){ let event = jsonToHistEvent(eventObj); let success = eventTree.value.insert(event); if (success){ @@ -160,6 +179,16 @@ async function onEventDisplay( idToEvent.set(event.id, event); } } + // Collect unit counts + const unitCounts = responseObj.unitCounts; + for (let [unitStr, count] of Object.entries(unitCounts)){ + let unit = parseInt(unitStr) + if (isNaN(unit)){ + console.log('ERROR: Invalid non-integer unit value in server response'); + break; + } + unitCountMaps.value[scaleIdx].set(unit, count) + } // Notify components if new events were added if (added){ eventTree.value = rbtree_shallow_copy(eventTree.value); // Note: triggerRef(eventTree) does not work here diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index b1607ef..1050c62 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -4,7 +4,11 @@ @pointercancel.prevent="onPointerUp" @pointerout.prevent="onPointerUp" @pointerleave.prevent="onPointerUp" @wheel.exact.prevent="onWheel" @wheel.shift.exact.prevent="onShiftWheel" ref="rootRef"> - +
+ + @@ -42,7 +46,7 @@ -
+
@@ -51,7 +55,7 @@
- @@ -67,7 +71,8 @@ import IconButton from './IconButton.vue'; import CloseIcon from './icon/CloseIcon.vue'; // Other import {WRITING_MODE_HORZ, MIN_DATE, MAX_DATE, MONTH_SCALE, DAY_SCALE, SCALES, MIN_CAL_YEAR, - getDaysInMonth, HistDate, CalDate, stepDate, getScaleRatio, getNumSubUnits, getUnitDiff, getEventPrecision, + getDaysInMonth, HistDate, CalDate, stepDate, getScaleRatio, getNumSubUnits, getUnitDiff, + getEventPrecision, dateToUnit, moduloPositive, TimelineState, HistEvent, getImagePath} from '../lib'; import {useStore} from '../store'; import {RBTree} from '../rbtree'; @@ -84,6 +89,7 @@ const props = defineProps({ closeable: {type: Boolean, default: true}, initialState: {type: Object as PropType, required: true}, eventTree: {type: Object as PropType>, required: true}, + unitCountMaps: {type: Object as PropType[]>, required: true}, }); const emit = defineEmits(['remove', 'state-chg', 'event-req', 'event-display']); @@ -349,30 +355,24 @@ const ticks = computed((): Tick[] => { ticks = [...ticksBefore, ...ticks, ...ticksAfter]; return ticks; }); -const firstDate = computed((): HistDate => { // Date of first visible tick - if (ticks.value.length == 0){ - return startDate.value; - } - return ticks.value.find((tick: Tick) => tick.offset > 0)!.date; -}); -const firstOffset = computed((): number => { // Offset of first visible tick - if (ticks.value.length == 0){ - return startOffset.value; - } - return ticks.value.find((tick: Tick) => tick.offset > 0)!.offset; +const firstIdx = computed((): number => { // Index of first visible tick + return ticks.value.findIndex((tick: Tick) => tick.offset >= 0); }); -const lastDate = computed((): HistDate => { +const firstDate = computed(() => // Date of first visible tick + firstIdx.value < 0 ? startDate.value : ticks.value[firstIdx.value]!.date); +const firstOffset = computed(() => // Offset of first visible tick + firstIdx.value < 0 ? startOffset.value : ticks.value[firstIdx.value]!.offset); +const lastIdx = computed((): number => { let numUnits = getNumDisplayUnits(); - let date = endDate.value; for (let i = ticks.value.length - 1; i >= 0; i--){ let tick = ticks.value[i]; - if (tick.offset < numUnits){ - date = tick.date; - break; + if (tick.offset <= numUnits){ + return i; } } - return date; + return -1; }); +const lastDate = computed(() => lastIdx.value < 0 ? endDate.value : ticks.value[lastIdx.value]!.date); // For displayed events function dateToOffset(date: HistDate){ @@ -614,6 +614,31 @@ watchEffect(() => { // Used instead of computed() in order to access old values eventLines.value = newEventLines; }); +// For event-count indicators +const tickToCount = computed((): Map => { + let tickToCount: Map = new Map(); // Maps tick index to event count + let unitToTickIdx: [number, number][] = []; // Holds tick units with their tick indexes in tickToCount + for (let tickIdx = firstIdx.value; tickIdx < lastIdx.value; tickIdx++){ + tickToCount.set(tickIdx, 0); + let unit = dateToUnit(ticks.value[tickIdx].date, minorScale.value); + unitToTickIdx.push([unit, tickIdx]); + } + // Accumulate counts for ticks + const firstUnit = dateToUnit(firstDate.value, minorScale.value); + const lastUnit = dateToUnit(lastDate.value, minorScale.value); + for (let [unit, count] of props.unitCountMaps[minorScaleIdx.value].entries()){ + if (unit >= firstUnit && unit < lastUnit){ + let i = 0; + while (i + 1 < unitToTickIdx.length && unitToTickIdx[i + 1][0] <= unit){ + i += 1; + } + const tickIdx = unitToTickIdx[i][1]; + tickToCount.set(tickIdx, tickToCount.get(tickIdx)! + count); + } + } + return tickToCount; +}); + // For panning/zooming function panTimeline(scrollRatio: number){ let numUnits = getNumDisplayUnits(); @@ -1088,4 +1113,22 @@ function eventLineStyles(eventId: number){ transitionTimingFunction: 'ease-out', }; } +function countDivStyles(tickIdx: number, count: number): Record { + let tick = ticks.value[tickIdx]; + let numMajorUnits = getNumDisplayUnits(); + let pxOffset = tick.offset / numMajorUnits * availLen.value; + let nextPxOffset = ticks.value[tickIdx + 1].offset / numMajorUnits * availLen.value; + let len = nextPxOffset - pxOffset; + let countLevel = Math.min(Math.ceil(Math.log10(count+1)), 4); + let breadth = countLevel * 4 + 4; + return { + top: props.vert ? pxOffset + 'px' : (mainlineOffset.value - breadth / 2) + 'px', + left: props.vert ? (mainlineOffset.value - breadth / 2) + 'px' : pxOffset + 'px', + width: props.vert ? breadth + 'px' : len + 'px', + height: props.vert ? len + 'px' : breadth + 'px', + transitionProperty: 'top, left, width, height', + transitionDuration: store.transitionDuration + 'ms', + transitionTimingFunction: 'linear', + } +} diff --git a/src/lib.ts b/src/lib.ts index 353fa57..7797469 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -305,6 +305,10 @@ export type HistEventJson = { imgId: number, pop: number, } +export type EventResponseJson = { + events: HistEventJson[], + unitCounts: {[x: number]: number}, +} export function jsonToHistDate(json: HistDateJson){ if (json.gcal == null){ return new YearDate(json.year); @@ -493,6 +497,23 @@ export function getEventPrecision(event: HistEvent): number { } return Number.POSITIVE_INFINITY; } +export function dateToUnit(date: HistDate, scale: number): number { + if (scale >= 1){ + return Math.floor(date.year / scale); + } else if (scale == MONTH_SCALE){ + if (!date.gcal){ + return julianToJdn(date.year, date.month, 1); + } else { + return gregorianToJdn(date.year, date.month, 1); + } + } else { // scale == DAY_SCALE + if (!date.gcal){ + return julianToJdn(date.year, date.month, date.day); + } else { + return gregorianToJdn(date.year, date.month, date.day); + } + } +} // For sending timeline-bound data to BaseLine export class TimelineState { diff --git a/src/store.ts b/src/store.ts index 5f30bc6..d3ece49 100644 --- a/src/store.ts +++ b/src/store.ts @@ -40,6 +40,7 @@ export const useStore = defineStore('store', { initialStartDate: new CalDate(1900, 1, 1), initialEndDate: new CalDate(2000, 1, 1), color, + showEventCounts: true, transitionDuration: 300, }; }, -- cgit v1.2.3