Dataset title, better filter display & download modal

.eslintrc

@@ -25,14 +25,16 @@ rules:
   no-console: [1, { "allow": ["warn", "error"] }]
   no-param-reassign: [1, { "props": false }]
   no-unused-expressions: ['error', {"allowTernary": true }]
-  no-restricted-syntax: ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'] # allow ForOfStatement
+  no-restricted-syntax: ['error', 'ForInStatement', 'WithStatement'] # allow ForOfStatement & LabeledStatement
   react/jsx-tag-spacing: ["error", { "closingSlash": "never", "beforeSelfClosing": "allow", "afterOpening": "never" }]
   react/forbid-prop-types: off
   react/jsx-filename-extension: [1, { "extensions": [".js", ".jsx"] }]
   react/jsx-first-prop-new-line: off
   react/prop-types: off # possibly reinstate
   react/sort-comp: off # possibly reinstate
   jsx-a11y/no-static-element-interactions: off
+  no-labels: off
+  no-continue: off
 parserOptions:
   ecmaVersion: 6
   sourceType: module

src/actions/treeProperties.js

@@ -30,17 +30,19 @@ const calculateVisiblityAndBranchThickness = (tree, controls, dates, {idxOfInVie
  * @return {null} side effects: a single action
  */
 export const updateVisibleTipsAndBranchThicknesses = function (
-  {idxOfInViewRootNode = 0, tipSelectedIdx = 0} = {}) {
+  {idxOfInViewRootNode = undefined, tipSelectedIdx = 0} = {}) {
   return (dispatch, getState) => {
     const { tree, controls } = getState();
     if (!tree.nodes) {return;}
-    const data = calculateVisiblityAndBranchThickness(tree, controls, {dateMin: controls.dateMin, dateMax: controls.dateMax}, {tipSelectedIdx, idxOfInViewRootNode});
+    const validIdxRoot = idxOfInViewRootNode !== undefined ? idxOfInViewRootNode : tree.idxOfInViewRootNode;
+    const data = calculateVisiblityAndBranchThickness(tree, controls, {dateMin: controls.dateMin, dateMax: controls.dateMax}, {tipSelectedIdx, validIdxRoot});
     dispatch({
       type: types.UPDATE_VISIBILITY_AND_BRANCH_THICKNESS,
       visibility: data.visibility,
       visibilityVersion: data.visibilityVersion,
       branchThickness: data.branchThickness,
-      branchThicknessVersion: data.branchThicknessVersion
+      branchThicknessVersion: data.branchThicknessVersion,
+      idxOfInViewRootNode: validIdxRoot
     });
   };
 };
@@ -70,7 +72,8 @@ export const changeDateFilter = function ({newMin = false, newMax = false, quick
       visibility: data.visibility,
       visibilityVersion: data.visibilityVersion,
       branchThickness: data.branchThickness,
-      branchThicknessVersion: data.branchThicknessVersion
+      branchThicknessVersion: data.branchThicknessVersion,
+      idxOfInViewRootNode: tree.idxOfInViewRootNode
     });
   };
 };

src/actions/types.js

@@ -41,3 +41,4 @@ export const TRIGGER_DOWNLOAD_MODAL = "TRIGGER_DOWNLOAD_MODAL";
 export const DISMISS_DOWNLOAD_MODAL = "DISMISS_DOWNLOAD_MODAL";
 export const ADD_COLOR_BYS = "ADD_COLOR_BYS";
 export const MANIFEST_RECEIVED = "MANIFEST_RECEIVED";
+export const CHANGE_TREE_ROOT_IDX = "CHANGE_TREE_ROOT_IDX";

src/components/app.js

@@ -11,6 +11,7 @@ import Controls from "./controls/controls";
 // import Frequencies from "./charts/frequencies";
 import Entropy from "./charts/entropy";
 import Map from "./map/map";
+import Info from "./info/info";
 import TreeView from "./tree/treeView";
 import { controlsHiddenWidth } from "../util/globals";
 import TitleBar from "./framework/title-bar";
@@ -102,6 +103,9 @@ class App extends React.Component {
           sidebarClassName={"sidebar"}
         >
           <Background>
+            <Info
+              sidebar={this.state.sidebarOpen || this.state.sidebarDocked}
+            />
             <TreeView
               query={queryString.parse(this.context.router.history.location.search)}
               sidebar={this.state.sidebarOpen || this.state.sidebarDocked}

src/components/controls/controls.js

@@ -12,7 +12,6 @@ import ChooseMetric from "./choose-metric";
 import PanelLayout from "./panel-layout";
 import GeoResolution from "./geo-resolution";
 import MapAnimationControls from "./map-animation";
-import AllFilters from "./all-filter";
 import { controlsWidth, enableAnimationDisplay } from "../../util/globals";
 import { titleStyles } from "../../globalStyles";
 
@@ -87,9 +86,6 @@ class Controls extends React.Component {
         <SelectLabel text="Panel layout"/>
         <PanelLayout/>
 
-        {header("Filters")}
-        <AllFilters/>
-
       </Flex>
     );
   }

src/components/controls/toggle.js

@@ -1,25 +1,35 @@
 import React from "react";
 import SelectLabel from "../framework/select-label";
 
-const Toggle = ({display, on, callback, label}) => {
+const Toggle = ({
+  display,
+  on,
+  callback,
+  label,
+  style = {},
+  sliderStyle = {marginLeft: "40px"},
+  labelStyle = {marginLeft: "40px", marginTop: "4px", width: "200px"}
+}) => {
   if (!display) {
     return null;
   }
   return (
-    <div>
+    <div style={style}>
       <label className="switch">
         <input
           className="switch"
           type="checkbox"
-          style={{marginLeft: "40px"}}
+          style={sliderStyle}
           checked={on}
           onChange={callback}
         />
-        <div className={"slider round"}></div>
-        <SelectLabel
-          text={label}
-          extraStyles={{marginLeft: "40px", marginTop: "4px", width: "200px"}}
-        />
+        <div className={"slider round"}/>
+        {label === "" ? null : (
+          <SelectLabel
+            text={label}
+            extraStyles={labelStyle}
+          />
+        )}
       </label>
     </div>
   );

src/components/download/downloadModal.js

@@ -129,7 +129,7 @@ class DownloadModal extends React.Component {
               }).map((k) => (
                 <span key={k}>
                   {helpers.getAuthor(meta.author_info, k)}
-                  {" (n = " + meta.author_info[k].n + "), "}
+                  {" (n=" + meta.author_info[k].n + "), "}
                 </span>
               ))}
 

src/components/download/helperFunctions.js

@@ -17,13 +17,14 @@ export const getAuthor = (info, k) => {
       <span>Not Available</span>
     );
   }
-  if (isPaperURLValid(info[k])) {
-    return (
-      <a href={formatURLString(info[k].paper_url)} target="_blank">
-        {authorString(k)}
-      </a>
-    );
-  }
+  // TODO: improve this block
+  // if (isPaperURLValid(info[k])) {
+  //   return (
+  //     <a href={formatURLString(info[k].paper_url)} target="_blank">
+  //       {authorString(k)}
+  //     </a>
+  //   );
+  // }
   return authorString(k);
 };