Minor cleanup of items flagged in dh community code review feedback (#…

…272)

* Simplify d3.js imports, per code review feedback

* Small cleanup items based on code review feedback

* Use script tag to embed json data, per code review feedback

* Configure lighthouse ci to test content with a different branch

.github/workflows/lighthouse-ci.yml

@@ -19,6 +19,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           repository: Princeton-CDH/lenape-timetree-content
+          ref: timetree-v1.0.5
+          # checkout branch for now to avoid js collison
 
       - name: checkout repository
         uses: actions/checkout@v3

assets/js/branches.js

@@ -1,17 +1,8 @@
-import { line, curveNatural, curveBumpY } from "d3-shape";
-import { select, selectAll } from "d3-selection";
+import * as d3 from "d3";
+
 import { randomNumBetween } from "./leaves";
 import { BaseSVG } from "./utils";
 
-// combine into d3 object for convenience
-const d3 = {
-  line,
-  curveNatural,
-  curveBumpY,
-  select,
-  selectAll,
-};
-
 function drawTreeSegment(points) {
   const curve = d3.line().curve(d3.curveBumpY);
   return curve(points.map((d) => [d.x, d.y])); // [start, end]);

assets/js/keys.js

@@ -1,11 +1,6 @@
 /* mixin for keypress management */
 
-import { select, selectAll } from "d3-selection";
-// combine into d3 object for convenience
-const d3 = {
-  select,
-  selectAll,
-};
+import * as d3 from "d3";
 
 // mixin extends syntax from
 // https://blog.bitsrc.io/inheritance-abstract-classes-and-class-mixin-in-javascript-c636ac00f5a9

assets/js/leaves.js

@@ -1,16 +1,7 @@
 // logic to generate a path for drawing leaves,
 // and for managing leaf details and tag behavior in the timetree
 
-import { select, selectAll } from "d3-selection";
-import { line, curveNatural } from "d3-shape";
-
-// combine into d3 object for convenience
-const d3 = {
-  line,
-  curveNatural,
-  select,
-  selectAll,
-};
+import * as d3 from "d3";
 
 // configuration for leaf sizes
 // sizes are scaled from 40px width design:

assets/js/main.js

@@ -1,11 +1,11 @@
 import { TimeTree } from "./timetree";
 
 // load & parse leaf data from json embedded in the document
-const data = JSON.parse(document.querySelector(".leaf-data").value);
+const data = JSON.parse(document.getElementById("leaf-data").text);
 // load and parse tag list for label / slug lookup label based on slug
-const tags = JSON.parse(document.querySelector(".tag-data").value);
+const tags = JSON.parse(document.getElementById("tag-data").text);
 // determine if this is a production or development build
-const params = JSON.parse(document.querySelector(".env-data").value);
+const params = JSON.parse(document.getElementById("env-data").text);
 
 // pass in leaf data, tag list, and whether debugging should be enabled
 let timetree = new TimeTree(data, tags, params);

assets/js/panel.js

@@ -1,12 +1,4 @@
-import { select, selectAll } from "d3-selection";
-
-import { Leaf } from "./leaves";
-
-// combine into d3 object for convenience
-const d3 = {
-  select,
-  selectAll,
-};
+import * as d3 from "d3";
 
 const PanelCloseEvent = new Event("panel-close");
 

assets/js/timetree.js

@@ -1,17 +1,4 @@
-import { select, selectAll } from "d3-selection";
-import { axisLeft } from "d3-axis";
-import { scaleLinear } from "d3-scale";
-import {
-  forceSimulation,
-  forceManyBody,
-  forceCollide,
-  forceLink,
-  forceX,
-  forceY,
-} from "d3-force";
-import { line, curveNatural } from "d3-shape";
-import { zoom, zoomIdentity, zoomTransform } from "d3-zoom";
-import { drag } from "d3-drag";
+import * as d3 from "d3";
 
 import { LeafLabel } from "./labels";
 import { Panel } from "./panel";
@@ -20,26 +7,6 @@ import { drawTreeSegment, drawTrunk, drawBranches } from "./branches";
 import { BaseSVG } from "./utils";
 import { TimeTreeKeysMixin } from "./keys";
 
-// combine d3 imports into a d3 object for convenience
-const d3 = {
-  axisLeft,
-  select,
-  selectAll,
-  forceSimulation,
-  forceManyBody,
-  forceCollide,
-  forceLink,
-  forceX,
-  forceY,
-  line,
-  curveNatural,
-  zoom,
-  zoomIdentity,
-  zoomTransform,
-  scaleLinear,
-  drag,
-};
-
 // branches are defined and should be displayed in this order
 const branches = {
   "Lands + Waters": "lands-waters",
@@ -55,6 +22,7 @@ function getBranchStyle(branchName) {
   if (branchSlug != undefined) {
     return `branch-${branchSlug}`;
   }
+  return ""; // avoid returning none
 }
 
 // strength of the various forces used to lay out the leaves
@@ -195,7 +163,7 @@ class TimeTree extends TimeTreeKeysMixin(BaseSVG) {
     const trunkNodeIndex = 0; // first node is the trunk
 
     // array of links between our nodes
-    let links = new Array();
+    let links = [];
 
     // add leaves to nodes by branch, in sequence;
     // create branch+century nodes as we go
@@ -218,7 +186,6 @@ class TimeTree extends TimeTreeKeysMixin(BaseSVG) {
           currentBranchNodeCount > 5 ||
           currentCentury != leaf.century
         ) {
-          let branchId = `${branch}-century${leaf.century}-${index}`;
           currentCentury = leaf.century;
           currentBranchNodeCount = 0;
 

layouts/index.html

@@ -45,9 +45,9 @@
   <button class="zoom-out" aria-label="zoom out" disabled="true"><i class="ph-bold ph-minus" aria-hidden="true"></i></button>
   <button class="reset-zoom" aria-label="reset zoom to default" disabled="true"><i class="ph-arrows-in ph-fill" aria-hidden="true"></i></button>
   </div>
-  <data class="leaf-data" value='{{ partial "leaf_data.json" . }}'></data>
-  <data class="tag-data" value='{{ partial "tags.json" . }}'></data>
-  <data class="env-data" value="{{ dict "env" hugo.Environment "branches" .Site.Params.branches "visual_debug" .Site.Params.visual_debug | jsonify }}"/>
+  <script id="leaf-data" type="application/json">{{ partial "leaf_data.json" . | safeJS }}</script>
+  <script id="tag-data"  type="application/json">{{ partial "tags.json" . | safeJS }}</script>
+  <script id="env-data" type="application/json">{{ dict "env" hugo.Environment "branches" .Site.Params.branches "visual_debug" .Site.Params.visual_debug | jsonify | safeJS }}</script>
   <noscript>
     <div id="noscript">
     This is an interactive visualization; please turn on Javascript to explore the Lunaapahkiing Princeton Timetree.