Fix prettier related ESLint issues (#1493)

* add quotes

* add prettier dev-dep

* run prettier on src

* add eslint-prettier-plugin to install

client/src/components/app.js

@@ -21,7 +21,6 @@ import actions from "../actions";
   graphRenderCounter: state.controls.graphRenderCounter,
 }))
 class App extends React.Component {
-
   componentDidMount() {
     const { dispatch } = this.props;
 
@@ -68,22 +67,21 @@ class App extends React.Component {
             error loading
           </div>
         ) : null}
-        {loading ? null : <Layout>
-          <LeftSideBar/>
-          {viewportRef =>
-            <>
-              <MenuBar/>
-              <Autosave/>
-              <TermsOfServicePrompt/>
-              <Legend viewportRef={viewportRef}/>
-              <Graph
-                key={graphRenderCounter}
-                viewportRef={viewportRef}
-              />
-            </>
-          }
-          <RightSideBar/>
-        </Layout>}
+        {loading ? null : (
+          <Layout>
+            <LeftSideBar />
+            {(viewportRef) => (
+              <>
+                <MenuBar />
+                <Autosave />
+                <TermsOfServicePrompt />
+                <Legend viewportRef={viewportRef} />
+                <Graph key={graphRenderCounter} viewportRef={viewportRef} />
+              </>
+            )}
+            <RightSideBar />
+          </Layout>
+        )}
       </Container>
     );
   }

client/src/components/continuousLegend/index.js

@@ -105,10 +105,12 @@ const continuous = (selectorId, colorscale, colorAccessor) => {
   colorScale: state.colors.scale,
 }))
 class ContinuousLegend extends React.Component {
-
   componentDidUpdate(prevProps) {
     const { colorAccessor, colorScale } = this.props;
-    if (prevProps.colorAccessor !== colorAccessor || prevProps.colorScale !== colorScale) {
+    if (
+      prevProps.colorAccessor !== colorAccessor ||
+      prevProps.colorScale !== colorScale
+    ) {
       /* always remove it, if it's not continuous we don't put it back. */
       d3.select("#continuous_legend").selectAll("*").remove();
     }
@@ -130,7 +132,9 @@ class ContinuousLegend extends React.Component {
     return (
       <div
         id="continuous_legend"
-        ref={ref => {this.ref = ref}}
+        ref={(ref) => {
+          this.ref = ref;
+        }}
         style={{
           display: colorAccessor ? "inherit" : "none",
           position: "absolute",

client/src/components/framework/container.js

@@ -2,19 +2,21 @@
 import React from "react";
 
 function Container(props) {
-  const {children} = props;
-  return <div
-    className="container"
-    style={{
-      height: "calc(100vh - (100vh - 100%))",
-      width: "calc(100vw - (100vw - 100%))",
-      position: "absolute",
-      top: 0,
-      left: 0,
-    }}
-  >
-    {children}
-  </div>
+  const { children } = props;
+  return (
+    <div
+      className="container"
+      style={{
+        height: "calc(100vh - (100vh - 100%))",
+        width: "calc(100vw - (100vw - 100%))",
+        position: "absolute",
+        top: 0,
+        left: 0,
+      }}
+    >
+      {children}
+    </div>
+  );
 }
 
 export default Container;

client/src/components/framework/layout.js

@@ -2,9 +2,7 @@
 import React from "react";
 import * as globals from "../../globals";
 
-
 class Layout extends React.Component {
-
   /*
     Layout - this react component contains all the layout style and logic for the application once it has loaded.
 
@@ -26,60 +24,66 @@ class Layout extends React.Component {
 
   render() {
     const { children } = this.props;
-    const [ leftSidebar, renderGraph, rightSidebar ] = children;
-    return <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: `
-          [left-sidebar-start] ${globals.leftSidebarWidth+1}px
+    const [leftSidebar, renderGraph, rightSidebar] = children;
+    return (
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `
+          [left-sidebar-start] ${globals.leftSidebarWidth + 1}px
           [left-sidebar-end graph-start] auto
-          [graph-end right-sidebar-start] ${globals.rightSidebarWidth+1}px [right-sidebar-end]
+          [graph-end right-sidebar-start] ${
+            globals.rightSidebarWidth + 1
+          }px [right-sidebar-end]
         `,
-        gridTemplateRows: "[top] auto [bottom]",
-        gridTemplateAreas: "left-sidebar | graph | right-sidebar",
-        columnGap: "0px",
-        justifyItems: "stretch",
-        alignItems: "stretch",
-        height: "inherit",
-        width: "inherit",
-        position: "relative",
-        top: 0,
-        left: 0,
-        minWidth: "1240px",
-      }}
-    >
-      <div
-        style={{
-          gridArea: "top / left-sidebar-start / bottom / left-sidebar-end",
-          position: "relative",
+          gridTemplateRows: "[top] auto [bottom]",
+          gridTemplateAreas: "left-sidebar | graph | right-sidebar",
+          columnGap: "0px",
+          justifyItems: "stretch",
+          alignItems: "stretch",
           height: "inherit",
-          overflowY: "auto"
+          width: "inherit",
+          position: "relative",
+          top: 0,
+          left: 0,
+          minWidth: "1240px",
         }}
       >
-        {leftSidebar}
+        <div
+          style={{
+            gridArea: "top / left-sidebar-start / bottom / left-sidebar-end",
+            position: "relative",
+            height: "inherit",
+            overflowY: "auto",
+          }}
+        >
+          {leftSidebar}
+        </div>
+        <div
+          style={{
+            zIndex: 0,
+            gridArea: "top / graph-start / bottom / graph-end",
+            position: "relative",
+            height: "inherit",
+          }}
+          ref={(ref) => {
+            this.viewportRef = ref;
+          }}
+        >
+          {this.viewportRef ? renderGraph(this.viewportRef) : null}
+        </div>
+        <div
+          style={{
+            gridArea: "top / right-sidebar-start / bottom / right-sidebar-end",
+            position: "relative",
+            height: "inherit",
+            overflowY: "auto",
+          }}
+        >
+          {rightSidebar}
+        </div>
       </div>
-      <div
-        style={{
-          zIndex: 0,
-          gridArea: "top / graph-start / bottom / graph-end",
-          position: "relative",
-          height: "inherit",
-        }}
-        ref={ref => { this.viewportRef = ref; }}
-      >
-        {this.viewportRef ? renderGraph(this.viewportRef) : null}
-      </div>
-      <div
-        style={{
-          gridArea: "top / right-sidebar-start / bottom / right-sidebar-end",
-          position: "relative",
-          height: "inherit",
-          overflowY: "auto"
-        }}
-      >
-        {rightSidebar}
-      </div>
-    </div>;
+    );
   }
 }
 

client/src/components/graph/setupSVGandBrush.js

@@ -14,7 +14,7 @@ export default (
   handleDragAction,
   handleEndAction,
   handleCancelAction,
-  viewport,
+  viewport
 ) => {
   const svg = d3.select("#graph-wrapper").select("#lasso-layer");
 
@@ -23,7 +23,7 @@ export default (
       .brush()
       .extent([
         [0, 0],
-        [viewport.width, viewport.height]
+        [viewport.width, viewport.height],
       ])
       .on("start", handleStartAction)
       .on("brush", handleDragAction)

client/src/components/leftSidebar/index.js

@@ -11,7 +11,6 @@ import TopLeftLogoAndTitle from "./topLeftLogoAndTitle";
   scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
 }))
 class LeftSideBar extends React.Component {
-
   render() {
     const { scatterplotXXaccessor, scatterplotYYaccessor } = this.props;
     return (

client/src/components/menubar/clip.js

@@ -35,9 +35,7 @@ function Clip(props) {
       : "";
 
   return (
-    <div
-      className={`bp3-button-group ${styles.menubarButton}`}
-    >
+    <div className={`bp3-button-group ${styles.menubarButton}`}>
       <Popover
         target={
           <Tooltip

client/src/components/menubar/infoMenu.js

@@ -6,9 +6,7 @@ import styles from "./menubar.css";
 function InformationMenu(props) {
   const { libraryVersions, aboutLink, tosURL, privacyURL } = props;
   return (
-    <div
-      className={`bp3-button-group ${styles.menubarButton}`}
-    >
+    <div className={`bp3-button-group ${styles.menubarButton}`}>
       <Popover
         content={
           <Menu>

client/src/components/menubar/menubar.css

@@ -1,4 +1,4 @@
 :local(.menubarButton) {
-    margin-top: 8px;
-    margin-left: 8px;
-}
+  margin-top: 8px;
+  margin-left: 8px;
+}

client/src/components/menubar/subset.js

@@ -12,9 +12,7 @@ function Subset(props) {
   } = props;
 
   return (
-    <ButtonGroup
-     className={styles.menubarButton}
-    >
+    <ButtonGroup className={styles.menubarButton}>
       <Tooltip
         content="Subset to currently selected cells and associated metadata"
         position="bottom"
@@ -26,7 +24,7 @@ function Subset(props) {
           disabled={!subsetPossible}
           icon="pie-chart"
           onClick={handleSubset}
-  />
+        />
       </Tooltip>
       <Tooltip
         content="Undo subset and show all cells and associated metadata"

client/src/components/menubar/undoRedo.js

@@ -7,9 +7,7 @@ import styles from "./menubar.css";
 function InformationMenu(props) {
   const { undoDisabled, redoDisabled, dispatch } = props;
   return (
-    <div
-      className={`bp3-button-group ${styles.menubarButton}`}
-    >
+    <div className={`bp3-button-group ${styles.menubarButton}`}>
       <Tooltip
         content="Undo"
         position="bottom"

client/src/components/rightSidebar/index.js

@@ -5,12 +5,11 @@ import Continuous from "../continuous/continuous";
 import GeneExpression from "../geneExpression";
 import * as globals from "../../globals";
 
-@connect(state => ({
+@connect((state) => ({
   scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
   scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
 }))
 class RightSidebar extends React.Component {
-
   render() {
     return (
       <div
@@ -22,7 +21,7 @@ class RightSidebar extends React.Component {
           position: "relative",
           overflowY: "inherit",
           height: "inherit",
-          width: "inherit"
+          width: "inherit",
         }}
       >
         <GeneExpression />