delint

client/src/components/leftsidebar.js

@@ -1,19 +1,16 @@
 // jshint esversion: 6
 import React from "react";
-import _ from "lodash";
+import { connect } from "react-redux";
 import Categorical from "./categorical/categorical";
 import Continuous from "./continuous/continuous";
 import ExpressionButtons from "./expression/expressionButtons";
-import { connect } from "react-redux";
 import Heatmap from "./expression/diffExpHeatmap";
 import * as globals from "../globals";
 import DynamicScatterplot from "./scatterplot/scatterplot";
 
-@connect(state => {
-  return {
-    responsive: state.responsive
-  };
-})
+@connect(state => ({
+  responsive: state.responsive
+}))
 class LeftSideBar extends React.Component {
   constructor(props) {
     super(props);
@@ -21,10 +18,16 @@ class LeftSideBar extends React.Component {
       currentTab: "metadata"
     };
   }
+
   render() {
-    /* this magic number should be made less fragile, if cellxgene logo or tabs change, this must as well */
-    const metadataSectionPadding =
-      this.state.currentTab === "metadata" ? 88 : 450;
+    const { currentTab } = this.state;
+    const { responsive } = this.props;
+
+    /*
+    this magic number should be made less fragile,
+    if cellxgene logo or tabs change, this must as well
+    */
+    const metadataSectionPadding = currentTab === "metadata" ? 88 : 450;
     return (
       <div style={{ position: "fixed" }}>
         <p
@@ -36,17 +39,18 @@ class LeftSideBar extends React.Component {
             width: "100%"
           }}
         >
-          cellxgene {globals.datasetTitle}{" "}
+          cellxgene
+          {globals.datasetTitle}{" "}
         </p>
         <div style={{ padding: 10 }}>
           <button
+            type="button"
             style={{
               padding: "none",
               outline: 0,
               fontSize: 14,
-              fontWeight: this.state.currentTab === "metadata" ? 700 : 400,
-              fontStyle:
-                this.state.currentTab === "metadata" ? "inherit" : "italic",
+              fontWeight: currentTab === "metadata" ? 700 : 400,
+              fontStyle: currentTab === "metadata" ? "inherit" : "italic",
               cursor: "pointer",
               border: "none",
               backgroundColor: "#FFF",
@@ -62,13 +66,13 @@ class LeftSideBar extends React.Component {
             Metadata
           </button>
           <button
+            type="button"
             style={{
               padding: "none",
               outline: 0,
               fontSize: 14,
-              fontWeight: this.state.currentTab === "expression" ? 700 : 400,
-              fontStyle:
-                this.state.currentTab === "expression" ? "inherit" : "italic",
+              fontWeight: currentTab === "expression" ? 700 : 400,
+              fontStyle: currentTab === "expression" ? "inherit" : "italic",
               cursor: "pointer",
               border: "none",
               backgroundColor: "#FFF",
@@ -86,16 +90,16 @@ class LeftSideBar extends React.Component {
         </div>
         <div
           style={{
-            height: this.props.responsive.height - metadataSectionPadding,
+            height: responsive.height - metadataSectionPadding,
             width: 400,
             padding: 10,
             overflowY: "auto",
             overflowX: "hidden"
           }}
         >
-          {this.state.currentTab === "metadata" ? <Categorical /> : null}
-          {this.state.currentTab === "metadata" ? <Continuous /> : null}
-          {this.state.currentTab === "expression" ? <Heatmap /> : null}
+          {currentTab === "metadata" ? <Categorical /> : null}
+          {currentTab === "metadata" ? <Continuous /> : null}
+          {currentTab === "expression" ? <Heatmap /> : null}
         </div>
         <div
           style={{
@@ -104,12 +108,10 @@ class LeftSideBar extends React.Component {
             left: 0
           }}
         >
-          {this.state.currentTab === "expression" ? (
-            <DynamicScatterplot />
-          ) : null}
+          {currentTab === "expression" ? <DynamicScatterplot /> : null}
         </div>
         <div style={{ position: "fixed", bottom: 0, right: 0 }}>
-          {this.state.currentTab === "metadata" ? <ExpressionButtons /> : null}
+          {currentTab === "metadata" ? <ExpressionButtons /> : null}
         </div>
       </div>
     );