Fix prettier related ESLint issues (#1493)

* add quotes

* add prettier dev-dep

* run prettier on src

* add eslint-prettier-plugin to install

.github/workflows/push_tests.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: master
   pull_request:
-    branches: *
+    branches: '*'
 
 env:
   JEST_ENV: prod
@@ -32,7 +32,7 @@ jobs:
         run: |
           pip install flake8
           cd client
-          npm i "eslint" "eslint-config-airbnb" "eslint-config-prettier" "eslint-loader" "eslint-plugin-filenames" "eslint-plugin-import" "eslint-plugin-jest" "eslint-plugin-jsx-a11y" "eslint-plugin-react" "eslint-plugin-react-hooks"
+          npm i "eslint" "eslint-config-airbnb" "eslint-config-prettier" "eslint-loader" "eslint-plugin-filenames" "eslint-plugin-import" "eslint-plugin-jest" "eslint-plugin-jsx-a11y" "eslint-plugin-react" "eslint-plugin-react-hooks" "eslint-plugin-prettier"
       - name: Lint with flake8
         run: |
           make lint-server

client/package-lock.json

@@ -14581,6 +14581,12 @@
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
       "dev": true
     },
+    "prettier": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
+      "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
+      "dev": true
+    },
     "prettier-linter-helpers": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",

client/package.json

@@ -99,6 +99,7 @@
     "lint-staged": "^10.2.4",
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prettier": "^2.0.5",
     "puppeteer": "^2.1.1",
     "rimraf": "^3.0.2",
     "serve-favicon": "^2.5.0",

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>
+        {loading ? null : (
-          <LeftSideBar/>
+          <Layout>
-          {viewportRef =>
+            <LeftSideBar />
-            <>
+            {(viewportRef) => (
-              <MenuBar/>
+              <>
-              <Autosave/>
+                <MenuBar />
-              <TermsOfServicePrompt/>
+                <Autosave />
-              <Legend viewportRef={viewportRef}/>
+                <TermsOfServicePrompt />
-              <Graph
+                <Legend viewportRef={viewportRef} />
-                key={graphRenderCounter}
+                <Graph key={graphRenderCounter} viewportRef={viewportRef} />
-                viewportRef={viewportRef}
+              </>
-              />
+            )}
-            </>
+            <RightSideBar />
-          }
+          </Layout>
-          <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;
+  const { children } = props;
-  return <div
+  return (
-    className="container"
+    <div
-    style={{
+      className="container"
-      height: "calc(100vh - (100vh - 100%))",
+      style={{
-      width: "calc(100vw - (100vw - 100%))",
+        height: "calc(100vh - (100vh - 100%))",
-      position: "absolute",
+        width: "calc(100vw - (100vw - 100%))",
-      top: 0,
+        position: "absolute",
-      left: 0,
+        top: 0,
-    }}
+        left: 0,
-  >
+      }}
-    {children}
+    >
-  </div>
+      {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;
+    const [leftSidebar, renderGraph, rightSidebar] = children;
-    return <div
+    return (
-      style={{
+      <div
-        display: "grid",
+        style={{
-        gridTemplateColumns: `
+          display: "grid",
-          [left-sidebar-start] ${globals.leftSidebarWidth+1}px
+          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]",
+          gridTemplateRows: "[top] auto [bottom]",
-        gridTemplateAreas: "left-sidebar | graph | right-sidebar",
+          gridTemplateAreas: "left-sidebar | graph | right-sidebar",
-        columnGap: "0px",
+          columnGap: "0px",
-        justifyItems: "stretch",
+          justifyItems: "stretch",
-        alignItems: "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",
           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
+    <div className={`bp3-button-group ${styles.menubarButton}`}>
-      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
+    <div className={`bp3-button-group ${styles.menubarButton}`}>
-      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-top: 8px;
-    margin-left: 8px;
+  margin-left: 8px;
-}
+}

client/src/components/menubar/subset.js

@@ -12,9 +12,7 @@ function Subset(props) {
   } = props;
 
   return (
-    <ButtonGroup
+    <ButtonGroup className={styles.menubarButton}>
-     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
+    <div className={`bp3-button-group ${styles.menubarButton}`}>
-      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 />

client/src/util/stateManager/controlsHelpers.js

@@ -203,8 +203,9 @@ export function pruneVarDataCache(varData, needed) {
 
 export function subsetAndResetGeneLists(state) {
   const { userDefinedGenes, diffexpGenes } = state;
-  const newUserDefinedGenes = _.uniq([].concat(userDefinedGenes, diffexpGenes))
+  const newUserDefinedGenes = _.uniq(
-    .slice(0, globals.maxGenes);
+    [].concat(userDefinedGenes, diffexpGenes)
+  ).slice(0, globals.maxGenes);
   const newDiffExpGenes = [];
   return [newUserDefinedGenes, newDiffExpGenes];
 }