From 37569ff644db5c3923d88e65ea5164864223a878 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Fri, 26 Apr 2024 13:40:26 +0200
Subject: [PATCH] Test speed

---
 index.html |  4 ++++
 js/viz.tsx | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 9782c3a..ff719fb 100644
--- a/index.html
+++ b/index.html
@@ -132,6 +132,10 @@
             fill: white;
             font-size: 30pt;
         }
+
+        path:not(.selected){
+            opacity:0;
+        }
     </style>
     <script>
         function scaleToFit() {
diff --git a/js/viz.tsx b/js/viz.tsx
index c6067ca..6194107 100644
--- a/js/viz.tsx
+++ b/js/viz.tsx
@@ -124,6 +124,7 @@ function start(parsed_requests) {
 	// filter nodes with only having both Latitude and Longitude.
 	// then map these coordinates to the canvas space
 	const valid_nodes = nodes.filter((n) => n.lat && n.lon).map((node) => {
+		// const { x: x1, y: y1 } = latLonToOffsets(node.lat, node.lon, 100000, 100000)
 		const { x: x1, y: y1 } = latLonToOffsets(node.lat, node.lon, 100000, 100000)
 		console.log(x1, y1)
 		const x2 = inverse_lerp(1358, 1380, x1);
@@ -332,10 +333,13 @@ function start(parsed_requests) {
 	function scene_01_FollowItem() {
 		const edgeToSelect = edges.filter(e => e.Barcode == "0133040931")[0]
 		edgesToHighlight = edges.filter(e => e.Barcode == edgeToSelect.Barcode)
+
+		highlightTrajectory(edgesToHighlight);
 		
 		const tl = anime.timeline({})
-		console.log(tl)
+		// console.log(tl)
 		for(const edge of edgesToHighlight) {
+			// document.getElementById(`#linkpath_${edge.nr}`).dataset.length = document.getElementById(`#linkpath_${edge.nr}`).getTotalLength
 			tl.add({
 				targets: `#linkpath_${edge.nr}`,
 				stroke: ['rgb(255, 0, 0)', 'rgb(0, 255, 255)'],
@@ -410,8 +414,8 @@ function highlightTrajectory(edges: Array<Object>) {
 		console.log(`#linkpath_${edge.nr}`)
 		const selection = d3.select(`#linkpath_${edge.nr}`);
 		// console.log(selection);
-		selection.style("stroke", "red");
-		selection.style("stroke-width", "5");
+		// selection.style("stroke", "red");
+		// selection.style("stroke-width", "5");
 		selection.classed("selected", true);
 	}
 }
\ No newline at end of file