add segment names to tree panel

src/actions/loadData.js

@@ -3,7 +3,7 @@ import * as types from "./types";
 import { charonAPIAddress } from "../util/globals";
 import { getDatapath, goTo404, chooseDisplayComponentFromPathname } from "./navigation";
 import { createStateFromQueryOrJSONs, createTreeTooState } from "./recomputeReduxState";
-import { createDatapathForSecondSegment } from "../util/parseParams";
+import parseParams, { createDatapathForSecondSegment } from "../util/parseParams";
 
 export const getManifest = (dispatch, s3bucket = "live") => {
   const charonErrorHandler = () => {
@@ -45,12 +45,32 @@ export const getManifest = (dispatch, s3bucket = "live") => {
   xmlHttp.send(null);
 };
 
+const getSegmentName = (datapath, availableDatasets) => {
+  /* this code is duplicated too many times. TODO */
+  const paramFields = parseParams(datapath, availableDatasets).dataset;
+  const fields = Object.keys(paramFields).sort((a, b) => paramFields[a][0] > paramFields[b][0]);
+  const choices = fields.map((d) => paramFields[d][1]);
+  let level = availableDatasets;
+  for (let vi = 0; vi < fields.length; vi++) {
+    if (choices[vi]) {
+      const options = Object.keys(level[fields[vi]]).filter((d) => d !== "default");
+      if (Object.keys(level).indexOf("segment") !== -1 && options.length > 1) {
+        return choices[vi];
+      }
+      // move to the next level in the data set hierarchy
+      level = level[fields[vi]][choices[vi]];
+    }
+  }
+  return undefined;
+};
+
 
 const fetchDataAndDispatch = (dispatch, datasets, query, s3bucket, narrativeJSON) => {
   const apiPath = (jsonType) =>
     `${charonAPIAddress}request=json&path=${datasets.datapath}_${jsonType}.json&s3=${s3bucket}`;
 
   const promisesOrder = ["meta", "tree", "frequencies"];
+  const treeName = getSegmentName(datasets.datapath, datasets.availableDatasets);
   const promises = [
     fetch(apiPath("meta")).then((res) => res.json()),
     fetch(apiPath("tree")).then((res) => res.json()),
@@ -73,7 +93,7 @@ const fetchDataAndDispatch = (dispatch, datasets, query, s3bucket, narrativeJSON
     .then((values) => {
       // all promises have not resolved or rejected (value[x] = undefined upon rejection)
       // you must check for undefined here, they won't go to the following catch
-      const data = {JSONs: {}, query};
+      const data = {JSONs: {}, query, treeName};
       values.forEach((v, i) => {
         if (v) data.JSONs[promisesOrder[i]] = v; // if statement removes undefinds
       });

src/actions/recomputeReduxState.js

@@ -341,6 +341,7 @@ const modifyControlsViaTreeToo = (controls, treeToo, name) => {
 export const createStateFromQueryOrJSONs = ({
   JSONs = false, /* raw json data - completely nuke existing redux state */
   oldState = false, /* existing redux state (instead of jsons) */
+  treeName = undefined,
   query
 }) => {
   let tree, treeToo, entropy, controls, metadata, frequencies, narrative;
@@ -433,6 +434,10 @@ export const createStateFromQueryOrJSONs = ({
       controls.colorBy
     );
   }
+
+  if (treeName) {
+    tree.name = treeName;
+  }
   return {tree, treeToo, metadata, entropy, controls, frequencies, narrative, query};
 };
 

src/components/controls/choose-dataset.js

@@ -12,8 +12,7 @@ import parseParams from "../../util/parseParams";
 @connect((state) => {
   return {
     availableDatasets: state.datasets.availableDatasets,
-    datapath: state.datasets.datapath,
-    showTreeToo: state.controls.showTreeToo
+    datapath: state.datasets.datapath
   };
 })
 class ChooseDataset extends React.Component {

src/components/tree/tangle/index.js

@@ -75,12 +75,22 @@ class Tangle extends React.Component {
     }
   }
   render() {
+    const textStyles = {position: "absolute", top: 5, zIndex: 100, fontSize: 16, color: "#000", fontWeight: 500};
+    const lefts = [this.props.width/2 - this.props.spaceBetweenTrees/2, this.props.width/2 + this.props.spaceBetweenTrees/2];
     return (
-      <div style={{position: "absolute", left: this.state.left, top: this.state.top, zIndex: 100, pointerEvents: "none"}}>
-        <svg
-          style={{cursor: "default", width: this.props.width, height: this.props.height}}
-          ref={(c) => {this.d3ref = c;}}
-        />
+      <div>
+        <div style={{...textStyles, left: lefts[0]-100, width: 100, textAlign: "right"}}>
+          {this.props.leftTreeName}
+        </div>
+        <div style={{...textStyles, left: lefts[1], textAlign: "left"}}>
+          {this.props.rightTreeName}
+        </div>
+        <div style={{position: "absolute", left: this.state.left, top: this.state.top, zIndex: 100, pointerEvents: "none"}}>
+          <svg
+            style={{cursor: "default", width: this.props.width, height: this.props.height}}
+            ref={(c) => {this.d3ref = c;}}
+          />
+        </div>
       </div>
     );
   }

src/components/tree/tree.js

@@ -152,6 +152,8 @@ class Tree extends React.Component {
             vVersion={this.props.tree.visibilityVersion}
             metric={this.props.distanceMeasure}
             spaceBetweenTrees={spaceBetweenTrees}
+            leftTreeName={this.props.tree.name.toUpperCase()}
+            rightTreeName={this.props.showTreeToo.toUpperCase()}
           />
         ) : null }
         {this.renderTreeDiv({width: widthPerTree, height: this.props.height, d3ref: "d3ref"})}

src/reducers/tree.js

@@ -8,6 +8,7 @@ export const getDefaultTreeState = () => {
   return {
     loaded: false,
     nodes: null,
+    name: undefined,
     visibility: null,
     visibilityVersion: 0,
     nodeColors: null,