From c8187f3f5e36d0f98d12e386524233e128b92a60 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Sun, 26 May 2024 21:05:42 +0200 Subject: [PATCH] Types to more systematically interface data in scenes --- src/Viz.svelte | 44 +++++++++++++++++++++++++++++--------------- src/lib/types.ts | 20 +++++++++++++++++++- src/scenes/Scenes.ts | 16 ++++++++-------- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/Viz.svelte b/src/Viz.svelte index f8ddc0e..1888c8a 100644 --- a/src/Viz.svelte +++ b/src/Viz.svelte @@ -10,6 +10,9 @@ type Item, type Motion, get_path_d, + type Data, + type VizData, + type Log, } from "./lib/types"; // these are passed from main.ts (or vice versaas) @@ -55,25 +58,24 @@ // filter nodes with only having both Latitude and Longitude. // then map these coordinates to the canvas space - const locations = _nodes + const locations = new Map(_nodes .filter((n) => n.lat && n.lon) .map((node) => { node["x"] = node_positions[node.code][0]; node["y"] = node_positions[node.code][1]; return node; - }); - - // create an index to access the node objects by their name - const nodeMap: Map = new Map( - locations.map((d) => [d["name"], d]), + }) + .map((d) => [d["name"], d]) ); + _requests + // remove entries that stay at the same place .filter((n) => n['Owning Library Name'] != n['Pickup Location']) .filter( (l) => - nodeMap.has(l["Owning Library Name"]) && - nodeMap.has(l["Pickup Location"]), + locations.has(l["Owning Library Name"]) && + locations.has(l["Pickup Location"]), ) .forEach((r, idx) => { const identifier: String = r["Barcode"]; @@ -87,8 +89,8 @@ }); } let movement: Movement = { - source: nodeMap.get(r["Owning Library Name"]), - target: nodeMap.get(r["Pickup Location"]), + source: locations.get(r["Owning Library Name"]), + target: locations.get(r["Pickup Location"]), nr: idx, item: items.get(identifier), _original: r, @@ -154,10 +156,23 @@ occurences.set(movement.item, movements); }); + const data: Data = { + locations: locations, + items: items, + movements: movements, + occurences: occurences + } + let drawn_motions = writable([]); //.filter((m, i) => i < 100); $: opacity = Math.max(0.055, Math.min(1, 200 / $drawn_motions.length)); let overlay_motions = writable([]); //.filter((m, i) => i < 100); - let events = writable([]); //.filter((m, i) => i < 100); + let events = writable([]); //.filter((m, i) => i < 100); + + const viz_data: VizData = { + drawn_motions: drawn_motions, + overlay_motions: overlay_motions, + events: events, + } import { onMount, onDestroy } from "svelte"; import { writable } from "svelte/store"; @@ -173,10 +188,9 @@ console.log("Next scene", currentSceneI); currentScene = new scenes[currentSceneI]( - movements, - drawn_motions, + data, + viz_data, nextScene, - occurences, ); currentSceneI = (currentSceneI + 1) % scenes.length; } @@ -234,7 +248,7 @@ {/each} - {#each locations as node} + {#each locations.values() as node} diff --git a/src/lib/types.ts b/src/lib/types.ts index ef866bb..bd2e2ef 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,3 +1,5 @@ +import type { Writable } from "svelte/store"; + export type Location = Object; // disambiguated (physical or online) library object @@ -20,6 +22,14 @@ export type Movement = { d: String }; +export type Occurences = Map + +export interface Data { + locations: Map, + items: Map, + movements: Movement[], + occurences: Occurences +} // An event to trigger drawing an Edge @@ -28,12 +38,20 @@ export type Motion = { movement: Movement, } -export type Event = { +export type Log = { date: Date, title: String, description: String } + +// Type used by the scenes with all reactive Writables for drawable objects +export type VizData = { + drawn_motions: Writable, + overlay_motions: Writable, + events: Writable +} + export function get_path_d(movement: Movement) { const m = movement; // console.log(m) diff --git a/src/scenes/Scenes.ts b/src/scenes/Scenes.ts index ef810b7..87d4558 100644 --- a/src/scenes/Scenes.ts +++ b/src/scenes/Scenes.ts @@ -1,5 +1,5 @@ import type { Writable } from "svelte/store"; -import type { Item, Motion, Movement } from "../lib/types"; +import type { Data, Item, Motion, Movement, VizData } from "../lib/types"; export class Scene { rendered_elements: String[] = [] @@ -16,16 +16,16 @@ export class All extends Scene { nextScene: CallableFunction locationCounts = new Map() - constructor(movements: Movement[], motions: Writable, nextScene: CallableFunction, occurences: Map) { + constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) { super() this.nextScene = nextScene // start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map) // when done, trigger parent.done() - this.allMovements = movements; + this.allMovements = data.movements; - this.motions = motions + this.motions = viz_data.drawn_motions // TODO: group by hour and have it last nr-of-hours * interval // TODO: then, add a timeline // TODO: then, add an overlay with relevant events, e.g. @@ -74,20 +74,20 @@ export class Timeline extends Scene { nextScene: CallableFunction locationCounts = new Map() - constructor(allMovements: Movement[], motions: Writable, nextScene: CallableFunction, occurences: Map) { + constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) { super() this.nextScene = nextScene // start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map) // when done, trigger parent.done() - console.log('s',occurences) - const [ item, movements ]= this.pickMovements(occurences); + console.log('s',data.occurences) + const [ item, movements ]= this.pickMovements(data.occurences); this.item = item this.movements = movements console.log(item, movements) - this.motions = motions + this.motions = viz_data.drawn_motions this.motions.update(items => []) this.interval = setInterval(this.tick.bind(this), 3000);