Visualise changes over time

demo/demo.css

@@ -9,12 +9,17 @@ button {
 }
 
 #svg-holder {
+  cursor: grab;
   position: relative;
   text-align: center;
   border: 1px solid #000;
   min-height: 400px;
 }
 
+#svg-holder:active {
+  cursor: grabbing;
+}
+
 #bods-svg {
   width: 100%;
   min-height: 400px;
@@ -57,6 +62,61 @@ button {
   overflow: scroll;
 }
 
+#slider-container {
+  display: none;
+  border: 1px solid #000;
+  margin: 10px 0 10px 0;
+  width: 100%;
+}
+
+#slider-input {
+  width: calc(100% - 20px);
+  margin: 10px auto 0 auto;
+}
+
+#slider-input:disabled {
+  cursor: not-allowed;
+}
+
+#slider-input:active {
+  cursor: grabbing;
+}
+
+#slider-input:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+#slider-input:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+
+#slider-input:disabled::-ms-thumb {
+  cursor: not-allowed;
+}
+
+#slider-input::-webkit-slider-thumb {
+  cursor: grab;
+}
+
+#slider-input::-moz-range-thumb {
+  cursor: grab;
+}
+
+#slider-input::-ms-thumb {
+  cursor: grab;
+}
+#slider-input::-webkit-slider-thumb:active {
+  cursor: grabbing;
+}
+
+#slider-input::-moz-range-thumb:active {
+  cursor: grabbing;
+}
+
+#slider-input::-ms-thumb:active {
+  cursor: grabbing;
+}
+
 .button-container {
   text-align: right;
 }

demo/index.html

@@ -21,6 +21,7 @@ <h1>BODS Data Visualisation Demo</h1>
         <button id="zoom_in">+</button>
         <button id="zoom_out">-</button>
       </div>
+      <div id="slider-container"></div>
       <div id="disclosure-widget"></div>
       <button id="download-svg">Download SVG</button>
       <button id="download-png">Download PNG</button>

demo/index.js

@@ -1,4 +1,4 @@
-import { draw } from '../src/index.js';
+import { selectData } from '../src/index.js';
 import { clearSVG } from '../src/utils/svgTools.js';
 import { parse } from '../src/parse/parse.js';
 import './demo.css';
@@ -37,9 +37,11 @@ const getJSON = async () => {
 
 const visualiseData = (data) => {
   // Render data as text
-  document.getElementById('result').value = data.formatted;
-  // Render data as graph
-  draw({
+  if (data.formatted) {
+    document.getElementById('result').value = data.formatted;
+  }
+  // Select data and render as graph
+  selectData({
     data: data.parsed,
     container: document.getElementById('svg-holder'),
     imagesPath: 'images',

demo/script-tag.html

@@ -22,6 +22,7 @@ <h1>BODS Data Visualisation Demo</h1>
         <button id="zoom_in">+</button>
         <button id="zoom_out">-</button>
       </div>
+      <div id="slider-container"></div>
       <div id="disclosure-widget"></div>
       <div class="info-container">
         <p><a href="https://github.com/openownership/visualisation-tool/blob/master/docs/spec.md#data-requirements">Data requirements</a></p>

demo/script-tag.js

@@ -58,7 +58,7 @@ const visualiseData = (data) => {
   // Render data as text
   document.getElementById('result').value = data.formatted;
   // Render data as graph
-  BODSDagre.draw({
+  BODSDagre.selectData({
     data: data.parsed,
     container: document.getElementById('svg-holder'),
     imagesPath: 'images',

src/index.js

@@ -17,29 +17,74 @@ import {
   createUnspecifiedNode,
 } from './render/renderD3';
 import { setupGraph, setEdges, setNodes } from './render/renderGraph';
-import { setupUI, renderMessage, renderProperties } from './render/renderUI';
+import { setupUI, renderMessage, renderProperties, renderDateSlider } from './render/renderUI';
+import { getDates, filteredData } from './utils/bods.js';
 
 import './style.css';
 
-// This sets up the basic format of the graph, such as direction, node and rank separation, and default label limits
-const draw = ({
+export const selectData = ({
   data,
+  selectedData,
   container,
   imagesPath,
   labelLimit = 8,
   rankDir = 'LR',
   viewProperties = true,
   useTippy = false,
+  currentlySelectedDate = null,
 }) => {
+  const config = {
+    data,
+    container,
+    imagesPath,
+    labelLimit,
+    rankDir,
+    viewProperties,
+    useTippy,
+  };
+
+  if (data) {
+    const version = data[0]?.publicationDetails?.bodsVersion || '0.4';
+
+    // Detect dates in data; default to most recent
+    const dates = getDates(data);
+    let selectedDate = currentlySelectedDate ? currentlySelectedDate : dates[dates.length - 1];
+
+    // Update selected date according to slider position
+    renderDateSlider(dates, version, currentlySelectedDate);
+    const slider = document.querySelector('#slider-input');
+    if (slider) {
+      slider.addEventListener('input', (e) => {
+        const scrollPosition = window.scrollY;
+        selectedDate = dates[document.querySelector('#slider-input').value];
+        config.selectedData = filteredData(data, selectedDate, version);
+        draw(config);
+        window.scrollTo(0, scrollPosition);
+        slider.focus();
+      });
+    }
+    config.selectedData = filteredData(data, selectedDate, version);
+    draw(config);
+  }
+};
+
+// This sets up the basic format of the graph, such as direction, node and rank separation, and default label limits
+export const draw = (config) => {
+  const { data, selectedData, container, imagesPath, labelLimit, rankDir, viewProperties, useTippy } = config;
   // Initialise D3 and graph
   const { svg, inner } = setupD3(container);
   const { g, render } = setupGraph(rankDir);
 
   defineArrowHeads(svg);
 
   // Extract the BODS data that is required for drawing the graph
-  const { edges } = getEdges(data);
-  const { nodes } = getNodes(data, edges);
+  const { edges } = getEdges(selectedData);
+  const { nodes } = getNodes(selectedData, edges);
+
+  if (edges.length === 0 && nodes.length === 0) {
+    const message = 'Your data does not have any information that can be drawn.';
+    renderMessage(message);
+  }
 
   // This section maps the incoming BODS data to the parameters expected by Dagre
   setEdges(edges, g);
@@ -146,5 +191,3 @@ const draw = ({
     renderProperties(inner, g, useTippy);
   }
 };
-
-export { draw };

src/model/edges/edges.js

@@ -1,12 +1,11 @@
 import { compareVersions } from 'compare-versions';
-import { curveMonotoneX } from 'd3';
-import { closedRecords, latest } from '../../utils/bods.js';
+import { monotoneX } from '../../utils/curve.js';
 import interestTypesCodelist from '../../codelists/interestTypes.js';
 
 // This sets the style and shape of the edges using D3 parameters
 const edgeConfig = {
   style: 'fill: none; stroke: #000; stroke-width: 5px;',
-  curve: curveMonotoneX,
+  curve: monotoneX,
 };
 
 const defaultStroke = 5;
@@ -65,7 +64,7 @@ export const checkInterests = (interestRelationship) => {
 };
 
 export const getOwnershipEdges = (bodsData) => {
-  const version = bodsData[0]?.publicationDetails?.bodsVersion || '0';
+  const version = bodsData[0]?.publicationDetails?.bodsVersion || '0.4';
 
   const filteredData = bodsData.filter((statement) => {
     if (compareVersions(version, '0.4') >= 0) {
@@ -205,7 +204,7 @@ export const getOwnershipEdges = (bodsData) => {
     };
   });
 
-  return latest(mappedData, closedRecords, version);
+  return mappedData;
 };
 
 export const getEdges = (data) => {

src/model/nodes/nodes.js

@@ -1,6 +1,5 @@
 import { compareVersions } from 'compare-versions';
 import generateNodeLabel from './nodeSVGLabel.js';
-import { closedRecords, latest } from '../../utils/bods.js';
 import sanitise from '../../utils/sanitiser.js';
 
 // This will generate a node when there are unspecified fields
@@ -95,7 +94,7 @@ const iconType = (nodeType) => {
 
 // This builds up the required person object from the BODS data, using the functions above
 export const getPersonNodes = (bodsData) => {
-  const version = bodsData[0]?.publicationDetails?.bodsVersion || '0';
+  const version = bodsData[0]?.publicationDetails?.bodsVersion || '0.4';
 
   const filteredData = bodsData.filter((statement) => {
     if (compareVersions(version, '0.4') >= 0) {
@@ -111,16 +110,16 @@ export const getPersonNodes = (bodsData) => {
       statementId = null,
       statementDate = null,
       recordId = null,
-      recordDetails = null,
+      recordDetails = {},
       names = null,
-      personType = null,
+      personType = '',
       nationalities = null,
     } = statement;
     const countryCode = nationalities && nationalities[0].code ? sanitise(nationalities[0].code) : null;
     const replaces = statement.replacesStatements ? statement.replacesStatements : [];
 
     const personNameData = recordDetails?.names || names;
-    const personTypeData = recordDetails?.personType || personType;
+    const personTypeData = recordDetails?.personType || personType || 'unknownPerson';
 
     const personLabel =
       personNameData && personNameData.length > 0 && personTypeData
@@ -146,12 +145,12 @@ export const getPersonNodes = (bodsData) => {
     };
   });
 
-  return latest(mappedData, closedRecords, version);
+  return mappedData;
 };
 
 // This builds up the required entity object from the BODS data, using the functions above
 export const getEntityNodes = (bodsData) => {
-  const version = bodsData[0]?.publicationDetails?.bodsVersion || '0';
+  const version = bodsData[0]?.publicationDetails?.bodsVersion || '0.4';
 
   const filteredData = bodsData.filter((statement) => {
     if (compareVersions(version, '0.4') >= 0) {
@@ -167,9 +166,9 @@ export const getEntityNodes = (bodsData) => {
       statementId = null,
       statementDate = null,
       recordId = null,
-      recordDetails = null,
+      recordDetails = {},
       name = null,
-      entityType = 'unknown',
+      entityType = '',
       publicListing = null,
       incorporatedInJurisdiction = null,
       jurisdiction = null,
@@ -191,9 +190,10 @@ export const getEntityNodes = (bodsData) => {
 
     const replaces = statement.replacesStatements ? statement.replacesStatements : [];
     const nodeType =
-      publicListing?.hasPublicListing !== true || recordDetails?.publicListing?.hasPublicListing !== true
-        ? recordDetails?.entityType.type || entityType
-        : 'registeredEntityListed';
+      publicListing?.hasPublicListing === true || recordDetails?.publicListing?.hasPublicListing === true
+        ? 'registeredEntityListed'
+        : recordDetails?.entityType?.type || entityType || 'unknownEntity';
+
     return {
       id: statementId || statementID,
       statementDate,
@@ -214,7 +214,7 @@ export const getEntityNodes = (bodsData) => {
     };
   });
 
-  return latest(mappedData, closedRecords, version);
+  return mappedData;
 };
 
 export const setUnknownNode = (source) => unknownNode(source);

src/parse/parse.js

@@ -10,7 +10,7 @@ export const parse = (data) => {
     const message = 'There was an error drawing your data. The data must be a valid JSON array of objects.';
     renderMessage(message);
     console.error(error);
-    return {};
+    return [];
   }
 
   // Format JSON consistently