remove dead code and lint (#310)

remove dead code from client/src/frameworks
delint various files

client/src/components/app.js

@@ -1,45 +1,36 @@
 // jshint esversion: 6
 import React from "react";
-import _ from "lodash";
 import Helmet from "react-helmet";
-import Container from "./framework/container";
 import { connect } from "react-redux";
-// import PulseLoader from "halogen/PulseLoader";
 
+import Container from "./framework/container";
 import LeftSideBar from "./leftsidebar";
 import Legend from "./continuousLegend";
 import Graph from "./graph/graph";
-import * as globals from "../globals";
 import actions from "../actions";
 
-import SectionHeader from "./framework/sectionHeader";
+@connect(state => ({
-
+  loading: state.controls.loading,
-@connect(state => {
+  error: state.controls.error
-  return {
+}))
-    loading: state.controls.loading,
-    error: state.controls.error
-  };
-})
 class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
   }
 
-  _onURLChanged() {
-    this.props.dispatch({ type: "url changed", url: document.location.href });
-  }
-
   componentDidMount() {
+    const { dispatch } = this.props;
+
     /* listen for url changes, fire one when we start the app up */
     window.addEventListener("popstate", this._onURLChanged);
     this._onURLChanged();
 
-    this.props.dispatch(actions.doInitialDataLoad(window.location.search));
+    dispatch(actions.doInitialDataLoad(window.location.search));
 
     /* listen for resize events */
     window.addEventListener("resize", () => {
-      this.props.dispatch({
+      dispatch({
         type: "window resize",
         data: {
           height: window.innerHeight,
@@ -47,7 +38,7 @@ class App extends React.Component {
         }
       });
     });
-    this.props.dispatch({
+    dispatch({
       type: "window resize",
       data: {
         height: window.innerHeight,
@@ -56,6 +47,12 @@ class App extends React.Component {
     });
   }
 
+  _onURLChanged() {
+    const { dispatch } = this.props;
+
+    dispatch({ type: "url changed", url: document.location.href });
+  }
+
   render() {
     const { loading, error } = this.props;
     return (

client/src/components/continuousLegend/index.js

@@ -6,34 +6,33 @@ import { interpolateViridis } from "d3-scale-chromatic";
 
 // create continuous color legend
 // http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f
-const continuous = (selector_id, colorscale) => {
+const continuous = (selectorId, colorscale) => {
   const legendheight = 200;
   const legendwidth = 80;
   const margin = { top: 10, right: 60, bottom: 10, left: 2 };
 
   const canvas = d3
-    .select(selector_id)
+    .select(selectorId)
-    .style("height", legendheight + "px")
+    .style("height", `${legendheight}px`)
-    .style("width", legendwidth + "px")
+    .style("width", `${legendwidth}px`)
-    // .style("position", "relative")
     .append("canvas")
     .attr("height", legendheight - margin.top - margin.bottom)
     .attr("width", 1)
-    .style("height", legendheight - margin.top - margin.bottom + "px")
+    .style("height", `${legendheight - margin.top - margin.bottom}px`)
-    .style("width", legendwidth - margin.left - margin.right + "px")
+    .style("width", `${legendwidth - margin.left - margin.right}px`)
-    // .style("border", "1px solid #000")
     .style("position", "absolute")
-    .style("top", margin.top + 1 + "px")
+    .style("top", `${margin.top + 1}px`)
-    .style("left", margin.left + 1 + "px")
+    .style("left", `${margin.left + 1}px`)
     .style(
       "transform",
       "scale(1,-1)"
-    ) /* flip it! dark is high value light is low. we flip the color scale as well [1, 0] instead of [0, 1] */
+    ) /* flip it! dark is high value light is low.
+    we flip the color scale as well [1, 0] instead of [0, 1] */
     .node();
 
-  var ctx = canvas.getContext("2d");
+  const ctx = canvas.getContext("2d");
 
-  var legendscale = d3
+  const legendscale = d3
     .scaleLinear()
     .range([1, legendheight - margin.top - margin.bottom])
     .domain([
@@ -42,9 +41,9 @@ const continuous = (selector_id, colorscale) => {
     ]); /* we flip this to make viridis colors dark if high in the color scale */
 
   // image data hackery based on http://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5
-  var image = ctx.createImageData(1, legendheight);
+  const image = ctx.createImageData(1, legendheight);
-  d3.range(legendheight).forEach(function(i) {
+  d3.range(legendheight).forEach(i => {
-    var c = d3.rgb(colorscale(legendscale.invert(i)));
+    const c = d3.rgb(colorscale(legendscale.invert(i)));
     image.data[4 * i] = c.r;
     image.data[4 * i + 1] = c.g;
     image.data[4 * i + 2] = c.b;
@@ -52,7 +51,8 @@ const continuous = (selector_id, colorscale) => {
   });
   ctx.putImageData(image, 0, 0);
 
-  // A simpler way to do the above, but possibly slower. keep in mind the legend width is stretched because the width attr of the canvas is 1
+  // A simpler way to do the above, but possibly slower. keep in mind the legend
+  // width is stretched because the width attr of the canvas is 1
   // See http://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas
   /*
   d3.range(legendheight).forEach(function(i) {
@@ -61,17 +61,17 @@ const continuous = (selector_id, colorscale) => {
   });
   */
 
-  var legendaxis = d3
+  const legendaxis = d3
     .axisRight()
     .scale(legendscale)
     .tickSize(6)
     .ticks(8);
 
-  var svg = d3
+  const svg = d3
-    .select(selector_id)
+    .select(selectorId)
     .append("svg")
-    .attr("height", legendheight + "px")
+    .attr("height", `${legendheight}px`)
-    .attr("width", legendwidth + "px")
+    .attr("width", `${legendwidth}px`)
     .style("position", "absolute")
     .style("left", "0px")
     .style("top", "0px");
@@ -81,22 +81,16 @@ const continuous = (selector_id, colorscale) => {
     .attr("class", "axis")
     .attr(
       "transform",
-      "translate(" +
+      `translate(${legendwidth - margin.left - margin.right + 3},${margin.top})`
-        (legendwidth - margin.left - margin.right + 3) +
-        "," +
-        margin.top +
-        ")"
     )
     .call(legendaxis);
 };
 
-@connect(state => {
+@connect(state => ({
-  return {
+  colorAccessor: state.controls.colorAccessor,
-    colorAccessor: state.controls.colorAccessor,
+  colorScale: state.controls.colorScale,
-    colorScale: state.controls.colorScale,
+  responsive: state.responsive
-    responsive: state.responsive
+}))
-  };
-})
 class ContinuousLegend extends React.Component {
   constructor(props) {
     super(props);
@@ -104,10 +98,11 @@ class ContinuousLegend extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    const { colorAccessor, responsive, colorScale } = this.props;
     if (
-      prevProps.colorAccessor !== this.props.colorAccessor ||
+      prevProps.colorAccessor !== colorAccessor ||
-      prevProps.responsive.height !== this.props.responsive.height ||
+      prevProps.responsive.height !== responsive.height ||
-      prevProps.responsive.width !== this.props.responsive.width
+      prevProps.responsive.width !== responsive.width
     ) {
       /* always remove it, if it's not continuous we don't put it back. */
       d3.select("#continuous_legend")
@@ -115,30 +110,27 @@ class ContinuousLegend extends React.Component {
         .remove();
     }
 
-    if (this.props.colorAccessor && this.props.colorScale) {
+    if (colorAccessor && colorScale) {
       /* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
-      if (this.props.colorScale.range()[0][0] !== "#") {
+      if (colorScale.range()[0][0] !== "#") {
         continuous(
           "#continuous_legend",
-          d3
+          d3.scaleSequential(interpolateViridis).domain(colorScale.domain())
-            .scaleSequential(interpolateViridis)
-            .domain(this.props.colorScale.domain())
         );
       }
     }
   }
 
-  drawScale() {}
-
   render() {
+    const { colorAccessor, responsive } = this.props;
     return (
       <div
         id="continuous_legend"
         style={{
           position: "fixed",
-          display: this.props.colorAccessor ? "inherit" : "none",
+          display: colorAccessor ? "inherit" : "none",
           right: 0,
-          top: this.props.responsive.height / 2
+          top: responsive.height / 2
         }}
       />
     );

client/src/components/framework/container.js

@@ -3,8 +3,9 @@ import React from "react";
 
 import styles from "./container.css";
 
-const Container = props => (
+const Container = props => {
-  <div className={styles.container}>{props.children}</div>
+  const { children } = props;
-);
+  return <div className={styles.container}>{children}</div>;
+};
 
 export default Container;

client/src/components/framework/header.css

@@ -1,3 +0,0 @@
-.header {
-  background: red;
-}

client/src/components/framework/header.js

@@ -1,13 +0,0 @@
-// jshint esversion: 6
-import React from "react";
-
-import Container from "./container";
-import styles from "./header.css";
-
-const Header = () => (
-  <header className={styles.header}>
-    <Container />
-  </header>
-);
-
-export default Header;

client/src/components/framework/sectionHeader.js

@@ -1,15 +0,0 @@
-// jshint esversion: 6
-import React from "react";
-
-const SectionHeader = ({ text }) => (
-  <p
-    style={{
-      fontSize: 32,
-      fontWeight: 700
-    }}
-  >
-    {text}
-  </p>
-);
-
-export default SectionHeader;

client/src/components/scatterplot/scatterplot.js

@@ -301,5 +301,3 @@ class Scatterplot extends React.Component {
 }
 
 export default Scatterplot;
-
-// <SectionHeader text="Continuous Metadata"/>