added the ability to switch between multiple configs

bengarvey · Feb 18, 2025 · f95fcfd · f95fcfd
1 parent 2cb22f1
commit f95fcfd
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 21 deletions.
diff --git a/config/config.json b/config/config.json
@@ -1,4 +1,5 @@
 {
+  "name": "Twin Peaks",
   "data": "data/tp_data.json",
   "filter": "",
   "startDate": "2024-10-17 00:00:00",

diff --git a/css/style.css b/css/style.css
@@ -1,4 +1,3 @@
-
 body {
   font-family: georgia,helvetica, arial;
   font-size: 36pt;
@@ -184,4 +183,14 @@ canvas {
   top: 0;
   left: 0;
   z-index: 0;
+}
+
+.config-selector {
+  width: 100%;
+  padding: 5px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: white;
 }
diff --git a/index.html b/index.html
@@ -25,24 +25,18 @@
 /* eslint-disable no-unused-vars */
 function start() {
   $.getJSON('config/configs.json', (configsList) => {
-    let x = 1;
     if (!configsList.configs || configsList.configs.length === 0) {
       console.error('No configs found in configs.json');
       return;
     }
 
-    // Use first config as default
-    const configPath = configsList.configs[0];
-
-    $.getJSON(configPath, (configuration) => {
-      config = configuration;
-      config.startYear = Number.isNaN(startYear) ? config.startYear : startYear;
-      lineage = new Lineage();
-      lineage(config);
-      lineage.loadJson(config.data);
+    // Pass all configs to lineage
+    config = configsList.configs[0]; // Set first config as default
+    config.startYear = Number.isNaN(startYear) ? config.startYear : startYear;
+    lineage = new Lineage();
+    lineage(configsList.configs); // Pass the full array of configs
 
-      if (config.menuDefaultOpen) toggleMenu();
-    });
+    if (config.menuDefaultOpen) toggleMenu();
   });
 }
 /* eslint-enable no-unused-vars */
@@ -61,6 +55,10 @@
     <button class="toggle__button" onClick="toggleMenu()"><</button>
     <div class="options">
       <h1><a href="http://github.com/bengarvey/lineage">Lineage</a></h1>
+      <div class="control">
+        <label class="options__label">Configuration</label>
+        <div id="config-selector-container"></div>
+      </div>
       <div class="checkbox">
         <label class="options__label">
           <input type="checkbox" class="checkbox-lg" id="musicOn">

diff --git a/js/lineage.js b/js/lineage.js
@@ -5,6 +5,7 @@
 */
 
 function Lineage() {
+  let configs = [];
   let config = {
     startDate: '2014-01-01',
     lastDate: '2014-12-31',
@@ -80,13 +81,22 @@ function Lineage() {
   function lin(conf) {
     log('Initializing', conf);
     initNightMode();
-    config = conf;
+    if (Array.isArray(conf)) {
+      configs = conf;
+      config = configs[0];
+    } else {
+      configs = [conf];
+      config = conf;
+    }
+
+    initConfigSelector();
 
+    switchConfig(0);
+
     config.startDate = new Date(config.startDate);
-
     currentTime = config.startDate;
     initShowDead(config.showDead);
-    document.getElementById('search').value = conf.filter;
+    document.getElementById('search').value = config.filter || '';
   }
 
   function zoomed(event) {
@@ -145,19 +155,50 @@ function Lineage() {
   }
 
   function initConfig(config) {
+    if (!config) config = {};
+
     const defaultTreeSim = {
       charge: -105,
       link: 0.2,
       alphaTarget: 1,
     };
+
+    const defaultConfig = {
+      treeSim: defaultTreeSim,
+      colorKeys: {},
+      showCategory: false,
+      showLegend: false,
+      hideOrphans: false,
+      startDate: new Date(),
+      lastDate: new Date(),
+      firstDate: new Date(),
+      nodeColumnMappings: {
+        description: "name",
+        createdAt: "birthDate",
+        deletedAt: "deathDate",
+        category: "category",
+        id: "id"
+      },
+      linkColumnMappings: {
+        color: "relation"
+      }
+    };
 
-    return {
+    const newConfig = {
+      ...defaultConfig,
       ...config,
-      treeSim: {
+      treeSim: config.treeSim ? {
         ...defaultTreeSim,
-        ...config.treeSim,
-      },
+        ...config.treeSim
+      } : defaultTreeSim,
     };
+
+    // Ensure dates are Date objects
+    newConfig.startDate = new Date(newConfig.startDate);
+    newConfig.lastDate = new Date(newConfig.lastDate);
+    newConfig.firstDate = new Date(newConfig.firstDate);
+
+    return newConfig;
   }
 
   function getCanvasSimulation(simulationMode) {
@@ -883,7 +924,15 @@ function Lineage() {
   }
 
   lin.loadJson = function (path) {
-    d3.json(path).then(go);
+    d3.json(path).then(response => {
+      if (Array.isArray(response)) {
+        configs = response;
+        lin(response);
+      } else {
+        configs = [response];
+        go(response);
+      }
+    });
   };
 
   lin.playMusic = function () {
@@ -935,6 +984,56 @@ function Lineage() {
     console.log(simulation);
   };
 
+  function initConfigSelector() {
+    const existingSelector = document.getElementById('configSelector');
+    if (existingSelector) {
+      existingSelector.remove();
+    }
+
+    const selector = document.createElement('select');
+    selector.id = 'configSelector';
+    selector.className = 'config-selector';
+
+    configs.forEach((conf, index) => {
+      const option = document.createElement('option');
+      option.value = index;
+      option.text = conf.name || `Config ${index + 1}`;
+      selector.appendChild(option);
+    });
+
+    selector.addEventListener('change', (e) => {
+      switchConfig(parseInt(e.target.value));
+    });
+
+    const container = document.getElementById('config-selector-container');
+    container.appendChild(selector);
+  }
+
+  function switchConfig(configIndex) {
+    // Stop any existing interval
+    if (interval !== null) {
+      interval.stop();
+    }
+
+    config = initConfig(configs[configIndex] || {});
+
+    currentTime = new Date(config.startDate);
+    initShowDead(config.showDead);
+    document.getElementById('search').value = config.filter || '';
+
+    if (config.data) {
+      d3.json(config.data).then(response => {
+        nodes = [];
+        links = [];
+        originalData = jQuery.extend(true, {}, response);
+        data = response;
+        init(response);
+        forceRefresh = true;
+        interval = d3.interval(loop, config.speed);
+      });
+    }
+  }
+
   return lin;
 }
 Lineage();