From 7863ff07842c6b4a8b2065b349a1737676d2dec5 Mon Sep 17 00:00:00 2001 From: James Hadfield Date: Fri, 1 Jun 2018 15:21:22 -0700 Subject: [PATCH] add segment names to tree panel --- src/actions/loadData.js | 24 +++++++++++++++++++++-- src/actions/recomputeReduxState.js | 5 +++++ src/components/controls/choose-dataset.js | 3 +-- src/components/tree/tangle/index.js | 20 ++++++++++++++----- src/components/tree/tree.js | 2 ++ src/reducers/tree.js | 1 + 6 files changed, 46 insertions(+), 9 deletions(-) diff --git a/src/actions/loadData.js b/src/actions/loadData.js index 5494cd476..d06e6a476 100644 --- a/src/actions/loadData.js +++ b/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 }); diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js index ecf78142a..45ac407dd 100644 --- a/src/actions/recomputeReduxState.js +++ b/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}; }; diff --git a/src/components/controls/choose-dataset.js b/src/components/controls/choose-dataset.js index 2a33f684a..f8164bd80 100644 --- a/src/components/controls/choose-dataset.js +++ b/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 { diff --git a/src/components/tree/tangle/index.js b/src/components/tree/tangle/index.js index 515b2c50a..a0cfcd647 100644 --- a/src/components/tree/tangle/index.js +++ b/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 ( -
- {this.d3ref = c;}} - /> +
+
+ {this.props.leftTreeName} +
+
+ {this.props.rightTreeName} +
+
+ {this.d3ref = c;}} + /> +
); } diff --git a/src/components/tree/tree.js b/src/components/tree/tree.js index 4da60d030..6d4984d37 100644 --- a/src/components/tree/tree.js +++ b/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"})} diff --git a/src/reducers/tree.js b/src/reducers/tree.js index 2fb966a4e..6f132539c 100644 --- a/src/reducers/tree.js +++ b/src/reducers/tree.js @@ -8,6 +8,7 @@ export const getDefaultTreeState = () => { return { loaded: false, nodes: null, + name: undefined, visibility: null, visibilityVersion: 0, nodeColors: null,