Improve performance (#46)

config/config.json

@@ -4,7 +4,7 @@
   "startDate": "2024-10-17 00:00:00",
   "firstDate": "1900-01-01 00:00:00",
   "lastDate": "2024-10-17 00:00:00",
-  "speed": 10 ,
+  "speed": 10,
   "debug": false,
   "menuDefaultOpen": true,
   "showDead": true,

index.html

@@ -16,7 +16,6 @@
       Lineage
       d3
     */
-
 let lineage = null;
 let menuStatus = false;
 let config = null;

js/lineage.js

@@ -18,6 +18,7 @@ function Lineage() {
 
   const MS_IN_A_DAY = 24 * 60 * 60 * 1000;
   const MS_IN_A_WEEK = 7 * MS_IN_A_DAY;
+  const MS_IN_A_MONTH = 30.437 * MS_IN_A_DAY; // Approximation
   const MS_IN_A_YEAR = 365.25 * MS_IN_A_DAY; // Approximation
 
   let currentTime = new Date(config.startDate);
@@ -115,6 +116,8 @@ function Lineage() {
 
     users = d3.group(nodes, (d) => d.id);
     data = prepareData(data, filters);
+    console.log(`${data.nodes.length} nodes`);
+    console.log(`${data.links.length} links`);
     simulation = d3.forceSimulation(nodes);
     [canvas, simulation] = getCanvasSimulation(mode);
 
@@ -125,6 +128,7 @@ function Lineage() {
   }
 
   function getCanvasSimulation(simulationMode) {
+    console.log('getCanvasSim');
     canvas
       .on('mousemove', mousemoved)
       .call(d3.drag()
@@ -218,19 +222,18 @@ function Lineage() {
     currentTime = advanceTime(currentTime);
 
     updateFilter();
-
     if (currentTime !== null && currentTime.getTime() !== oldDate.getTime()) {
       forceRefresh = true;
     }
-
     if (forceRefresh) {
       data.nodes.forEach(addRemoveNode);
       if (mode === 'tree') {
         data.links.forEach(addRemoveLink);
       }
     }
-
-    restart();
+    if (forceRefresh) {
+      restart();
+    }
     timeEnd('loop', config);
     forceRefresh = false;
   }
@@ -247,6 +250,9 @@ function Lineage() {
       case 'week':
         msIncrement = MS_IN_A_WEEK;
         break;
+      case 'month':
+        msIncrement = MS_IN_A_MONTH;
+        break;
       case 'year':
       default:
         msIncrement = MS_IN_A_YEAR;
@@ -391,7 +397,6 @@ function Lineage() {
   function restart() {
     updateYear(currentTime);
     users = d3.group(nodes, (d) => d.id);
-
     context.save();
     context.translate(transform.x, transform.y);
     context.scale(transform.k, transform.k);
@@ -437,12 +442,14 @@ function Lineage() {
     context.translate(transform.x, transform.y);
     context.scale(transform.k, transform.k);
     context.translate(width / 2, height / 2);
+    console.timeLog('tree', 'after transform');
 
+    context.lineWidth = 1;
     links.forEach(drawLink);
 
     users.forEach((user) => {
       context.beginPath();
-      user.forEach(drawNode);
+      drawNode(user[0]);
       context.fillStyle = color(user[0].category);
       context.fill();
     });
@@ -502,7 +509,6 @@ function Lineage() {
   function drawLink(d) {
     context.beginPath();
     context.moveTo(d.source.x, d.source.y);
-    context.lineWidth = 1;
     context.strokeStyle = d.color;
     context.lineTo(d.target.x, d.target.y);
     context.stroke();