Refactor Scenes and Libraries SVG overlay

poetry.lock

@@ -1,8 +1,7 @@
+# This file is automatically @generated by Poetry 1.8.3 and should not be changed by hand.
 package = []
 
 [metadata]
-lock-version = "1.1"
+lock-version = "2.0"
 python-versions = "^3.9"
-content-hash = "5b80bcf39bc22fc51a0c05260792ccc8bde494467670046c58c64725c897eb75"
+content-hash = "c595a0588c25d58f3e3834ad7169126836d262b925fe6ca9b5d540dcf301d254"
-
-[metadata.files]

src/LibrariesSvg.svelte

@@ -0,0 +1,205 @@
+<g
+   id="APM"
+   transform="translate(298.72484444444126, 433.0485336906215)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle484" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle486" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text488"
+      >Archaeological Collection</text
+   >
+</g>
+<g
+   id="OTM"
+   transform="translate(1745.5955555555556, 3603.1193459656633)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle491" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle493" />
+   <text
+      class="nodeTitle s-vynWWFEzB3Z5"
+      y="4.1199999"
+      x="-35" text-anchor="end"
+      id="text495">Allard Pierson Depot</text
+   >
+</g>
+<g
+   id="BC"
+   transform="translate(298.72484444444126, 393.0485336906215)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle498" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle500" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text502"
+      >Handbibliotheek</text
+   >
+   <text
+      class="nodeTitle s-vynWWFEzB3Z5"
+      y="38"
+      x="311.19113"
+      id="text1097">Allard Pierson</text
+   >
+</g>
+<g
+   id="ARTIS"
+   transform="translate(807.0959555555783, 551.9470916540013)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle505" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle507" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text509"
+      >Artis Bibliotheek</text
+   >
+</g>
+<g
+   id="BHBPU"
+   transform="translate(408.1404000000112, 307.58142297433403)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle512" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle514" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text516"
+      >Bushuis - pickup location</text
+   >
+</g>
+<g
+   id="CEDLA"
+   transform="translate(710.2181777777914, 820.5062916831351)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle519" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle521" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text523">CEDLA</text
+   >
+</g>
+<g
+   id="UBGW"
+   transform="translate(160.2826222222393, 520.1182633671162)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle526" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle528" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text530"
+      >GW-collecties UB</text
+   >
+</g>
+<g
+   id="IVIR"
+   transform="translate(730.9048444444488, 682.295035560214)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle533" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle535" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text537">IViR</text>
+</g>
+<g
+   id="IWO"
+   transform="translate(1775.5955555555554, 3553.1193459656633)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle540" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle542" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text544"
+      >IWO-depot</text
+   >
+</g>
+<g
+   id="JB"
+   transform="translate(740.9048444444488, 750.295035560214)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle547" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle549" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text551"
+      >Juridische Bibliotheek</text
+   >
+</g>
+<g
+   id="REC"
+   transform="translate(699.5315111111087, 623.2141384588231)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle554" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle556" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text558"
+      >Library Learning Centre Roeterseiland</text
+   >
+</g>
+<g
+   id="AMC"
+   transform="translate(1767.38706666667, 3460.8911949512853)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle561" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle563" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="3.5" text-anchor="end" x="-35" id="text565"
+      >Medische Bibliotheek</text
+   >
+</g>
+<g
+   id="PCHH"
+   transform="translate(222.92706666665254, 150.79690464423038)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle568" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle570" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text572"
+      >P.C.Hoofthuis</text
+   >
+</g>
+<g
+   id="BETA"
+   transform="translate(1687.8959555555593, 1008.3027457312287)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle575" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle577" />
+   <text
+      class="nodeTitle s-vynWWFEzB3Z5"
+      y="4.1199999"
+      x="-35" text-anchor="end"
+      id="text579">Sciencepark Bibliotheek</text
+   >
+</g>
+<g
+   id="UBB"
+   transform="translate(220.2826222222393, 630.1182633671162)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle582" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle584" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text586"
+      >UB Singel</text
+   >
+</g>
+<path
+   style=""
+   d="M 492.42998,401.08039 H 593.04204 V 442.57506 L 579.95449,442.42775"
+   id="path1093"
+/>
+<path
+   style=""
+   d="M 593.04204,421.82772 604.96062,421.82773"
+   id="path1095"
+/>
+
+<style lang="scss">
+   circle:first-child {
+      fill: white;
+      stroke: none;
+   }
+   circle {
+      fill: none;
+      stroke: white;
+      stroke-width: 10;
+   }
+   text {
+      fill: white;
+      font-size: 15pt;
+   }
+   path{
+      stroke: white;
+      fill: none;
+      stroke-width: 2px;
+   }
+</style>

src/Viz.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import parsed_requests from "/data/parsed_requests.json";
-    import { draw, slide } from "svelte/transition";
+    import { draw, slide, fade } from "svelte/transition";
     import { fps } from "@sveu/browser";
+    import LibrariesSvg from "./LibrariesSvg.svelte";
 
     import { All, Scene, Timeline } from "./scenes/Scenes";
     import {
@@ -236,6 +237,7 @@
         {#each $drawn_motions as m}
             <path
                 in:draw|global={{ duration: m.duration }}
+                out:fade={{duration: 1000}}
                 d={m.movement.d}
                 style="opacity: {opacity}"
             ></path>
@@ -248,13 +250,14 @@
         {/each}
     </g>
     <g id="libraries">
-        {#each locations.values() as node}
+        <LibrariesSvg />
+        <!-- {#each locations.values() as node}
             <g id={node.code} transform="translate({node.x}, {node.y})">
                 <circle r="5"></circle>
                 <circle r="20"></circle>
                 <text class="nodeTitle" y="13" x="35">{node.name}</text>
             </g>
-        {/each}
+        {/each} -->
     </g>
 </svg>
 
@@ -316,15 +319,7 @@
             display:block;
         }
     }
-    #libraries circle:first-child {
+    
-        fill: white;
-        stroke: none;
-    }
-    #libraries circle {
-        fill: none;
-        stroke: white;
-        stroke-width: 10;
-    }
     path {
         stroke: #bc89ff;
         stroke-width: 2px;
@@ -335,10 +330,7 @@
         stroke-width: 4;
         opacity: 1;
     }
-    text {
+    
-        fill: white;
-        font-size: 30pt;
-    }
 
     /* path:not(.selected) {
         opacity: 0;

src/scenes/Scenes.ts

@@ -1,31 +1,35 @@
 import type { Writable } from "svelte/store";
-import type { Data, Item, Motion, Movement, VizData } from "../lib/types";
+import type { Data, Item, Log, Motion, Movement, VizData } from "../lib/types";
 
 export class Scene {
     rendered_elements: String[] = []
+    data: Data;
+    viz_data: VizData;
+    nextScene: CallableFunction;
+
+    constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
+        this.data = data;
+        this.viz_data = viz_data;
+        this.nextScene = nextScene;
+    }
+    
     stop() {
         console.log("TODO: stop timeout")
     }
 }
 
 export class All extends Scene {
-    allMovements: Movement[]
-    motions: Writable<Motion[]>
     interval: number
     step: number = 0
-    nextScene: CallableFunction
     locationCounts = new Map<Location, { in: number, out: number }>()
 
     constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
-        super()
+        super(data, viz_data, nextScene);
-
-        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 = data.movements;
+        // this.allMovements = data.movements;
 
-        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. 
@@ -37,23 +41,23 @@ export class All extends Scene {
         this.interval = setInterval(this.tick.bind(this), 500);
 
         // clear the motions when kicking off:
-        this.motions.update(items => []);
+        this.viz_data.drawn_motions.update(items => []);
     }
 
     tick() {
         const n = 10
-        if (this.step >= this.allMovements.length) {
+        if (this.step >= this.data.movements.length) {
             console.log('this', 'done')
             // todo: ease out all entries
             this.nextScene()
             return;
         }
-        let movements: Movement[] = this.allMovements.slice(this.step, this.step + n);
+        let movements: Movement[] = this.data.movements.slice(this.step, this.step + n);
 
         // duration 5000 + Math.random() * 10000
         let motions: Motion[] = movements.map((m) => ({ duration: 5000, movement: m }));
 
-        this.motions.update(items => ([...items, ...motions]))
+        this.viz_data.drawn_motions.update(items => ([...items, ...motions]))
         this.step += n;
     }
 
@@ -68,16 +72,12 @@ export class All extends Scene {
 export class Timeline extends Scene {
     movements: Movement[]
     item: Item
-    motions: Writable<Motion[]>
     interval: number
     step: number = 0
-    nextScene: CallableFunction
     locationCounts = new Map<Location, { in: number, out: number }>()
 
     constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
-        super()
+        super(data, viz_data, nextScene);
-
-        this.nextScene = nextScene
 
         // start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map)
         // when done, trigger parent.done()
@@ -87,8 +87,8 @@ export class Timeline extends Scene {
         this.movements = movements
         console.log(item, movements)
 
-        this.motions = viz_data.drawn_motions
+        // this.motions = viz_data.drawn_motions
-        this.motions.update(items => [])
+        this.viz_data.drawn_motions.update(items => [])
 
         this.interval = setInterval(this.tick.bind(this), 3000);
 
@@ -113,9 +113,11 @@ export class Timeline extends Scene {
         }
         
         // duration 5000 + Math.random() * 10000
-        const motion: Motion = { duration: 2000, movement: this.movements[this.step] };
+        const mov = this.movements[this.step]
+        const motion: Motion = { duration: 2000, movement: mov };
+        const log: Log = { date: new Date, title: `Transfer to ${mov.target.name}`, description: "" };
         console.log(motion, motion.movement.source, motion.movement.target)
-        this.motions.update(items => ([...items, motion]))
+        this.viz_data.drawn_motions.update(items => ([...items, motion]))
         this.step += 1;
     }