run prettier(2.0.5) (#1438)

client/src/components/graph/drawPointsRegl.js

@@ -1,6 +1,6 @@
 import { glPointFlags, glPointSize } from "../../util/glHelpers";
 
-export default function(regl) {
+export default function (regl) {
   return regl({
     vert: `
     precision mediump float;
@@ -54,18 +54,18 @@ export default function(regl) {
     attributes: {
       position: regl.prop("position"),
       color: regl.prop("color"),
-      flag: regl.prop("flag")
+      flag: regl.prop("flag"),
     },
 
     uniforms: {
       distance: regl.prop("distance"),
       projView: regl.prop("projView"),
       nPoints: regl.prop("nPoints"),
-      minViewportDimension: regl.prop("minViewportDimension")
+      minViewportDimension: regl.prop("minViewportDimension"),
     },
 
     count: regl.prop("count"),
 
-    primitive: "points"
+    primitive: "points",
   });
 }

client/src/components/graph/graph.js

@@ -34,12 +34,12 @@ function createProjectionTF(viewportWidth, viewportHeight) {
   const minDim = Math.min(viewportWidth, heightMinusGutter);
   const aspectScale = [
     (fractionToUse * minDim) / viewportWidth,
-    (fractionToUse * minDim) / viewportHeight
+    (fractionToUse * minDim) / viewportHeight,
   ];
   const m = mat3.create();
   mat3.fromTranslation(m, [
     0,
-    -topGutterSizePx / viewportHeight / aspectScale[1]
+    -topGutterSizePx / viewportHeight / aspectScale[1],
   ]);
   mat3.scale(m, m, aspectScale);
   return m;
@@ -73,7 +73,7 @@ function renderThrottle(callback) {
   };
 }
 
-@connect(state => ({
+@connect((state) => ({
   universe: state.universe,
   world: state.world,
   crossfilter: state.crossfilter,
@@ -85,7 +85,7 @@ function renderThrottle(callback) {
   centroidLabels: state.centroidLabels,
   graphInteractionMode: state.controls.graphInteractionMode,
   colorAccessor: state.colors.colorAccessor,
-  pointDilation: state.pointDilation
+  pointDilation: state.pointDilation,
 }))
 class Graph extends React.Component {
   computePointPositions = memoize((X, Y, modelTF) => {
@@ -102,7 +102,7 @@ class Graph extends React.Component {
     return positions;
   });
 
-  computePointColors = memoize(rgb => {
+  computePointColors = memoize((rgb) => {
     /*
     compute webgl colors for each point
     */
@@ -186,13 +186,13 @@ class Graph extends React.Component {
       positions: null,
       colors: null,
       sizes: null,
-      flags: null
+      flags: null,
     };
     this.state = {
       toolSVG: null,
       tool: null,
       container: null,
-      cameraRender: 0
+      cameraRender: 0,
     };
   }
 
@@ -234,7 +234,7 @@ class Graph extends React.Component {
       camera,
       modelTF,
       modelInvTF: mat3.invert([], modelTF),
-      projectionTF
+      projectionTF,
     });
   }
 
@@ -250,7 +250,7 @@ class Graph extends React.Component {
       layoutChoice,
       graphInteractionMode,
       pointDilation,
-      colorAccessor
+      colorAccessor,
     } = this.props;
     const { regl, toolSVG, camera, modelTF } = this.state;
     let stateChanges = {};
@@ -274,7 +274,7 @@ class Graph extends React.Component {
         needsRepaint = true;
         stateChanges = {
           ...stateChanges,
-          projectionTF
+          projectionTF,
         };
       }
 
@@ -333,7 +333,7 @@ class Graph extends React.Component {
       // If the window size has changed we want to recreate all SVGs
       stateChanges = {
         ...stateChanges,
-        ...this.createToolSVG()
+        ...this.createToolSVG(),
       };
     } else if (
       (responsive.height && responsive.width && !toolSVG) ||
@@ -345,7 +345,7 @@ class Graph extends React.Component {
       // If lasso/zoom is switched
       stateChanges = {
         ...stateChanges,
-        ...this.createToolSVG()
+        ...this.createToolSVG(),
       };
     }
 
@@ -369,12 +369,12 @@ class Graph extends React.Component {
     }
   }
 
-  handleCanvasEvent = e => {
+  handleCanvasEvent = (e) => {
     const { camera, projectionTF } = this.state;
     if (e.type !== "wheel") e.preventDefault();
     if (camera.handleEvent(e, projectionTF)) {
       this.renderCanvas();
-      this.setState(state => {
+      this.setState((state) => {
         return { ...state, updateOverlay: !state.updateOverlay };
       });
     }
@@ -389,9 +389,7 @@ class Graph extends React.Component {
 
     /* clear out whatever was on the div, even if nothing, but usually the brushes etc */
 
-    d3.select("#lasso-layer")
-      .selectAll(".lasso-group")
-      .remove();
+    d3.select("#lasso-layer").selectAll(".lasso-group").remove();
 
     // Don't render or recreate toolSVG if currently in zoom mode
     if (graphInteractionMode !== "select") {
@@ -443,7 +441,7 @@ class Graph extends React.Component {
         */
         const screenCoords = [
           this.mapPointToScreen(currentSelection.brushCoords.northwest),
-          this.mapPointToScreen(currentSelection.brushCoords.southeast)
+          this.mapPointToScreen(currentSelection.brushCoords.southeast),
         ];
         if (!toolCurrentSelection) {
           /* tool is not selected, so just move the brush */
@@ -480,7 +478,7 @@ class Graph extends React.Component {
       /*
       if there is a current selection, make sure the lasso tool matches
       */
-      const polygon = currentSelection.polygon.map(p =>
+      const polygon = currentSelection.polygon.map((p) =>
         this.mapPointToScreen(p)
       );
       tool.move(polygon);
@@ -551,7 +549,7 @@ class Graph extends React.Component {
       ),
       Math.round(
         -((xy[1] + 1) / 2 - 1) * (responsive.height - this.graphPaddingTop)
-      )
+      ),
     ];
     return pin;
   }
@@ -571,12 +569,12 @@ class Graph extends React.Component {
     const s = d3.event.selection;
     const brushCoords = {
       northwest: this.mapScreenToPoint([s[0][0], s[0][1]]),
-      southeast: this.mapScreenToPoint([s[1][0], s[1][1]])
+      southeast: this.mapScreenToPoint([s[1][0], s[1][1]]),
     };
 
     dispatch({
       type: "graph brush change",
-      brushCoords
+      brushCoords,
     });
   }
 
@@ -601,15 +599,15 @@ class Graph extends React.Component {
     if (s) {
       const brushCoords = {
         northwest: this.mapScreenToPoint(s[0]),
-        southeast: this.mapScreenToPoint(s[1])
+        southeast: this.mapScreenToPoint(s[1]),
       };
       dispatch({
         type: "graph brush end",
-        brushCoords
+        brushCoords,
       });
     } else {
       dispatch({
-        type: "graph brush deselect"
+        type: "graph brush deselect",
       });
     }
   }
@@ -617,14 +615,14 @@ class Graph extends React.Component {
   handleBrushDeselectAction() {
     const { dispatch } = this.props;
     dispatch({
-      type: "graph brush deselect"
+      type: "graph brush deselect",
     });
   }
 
   handleLassoStart() {
     const { dispatch } = this.props;
     dispatch({
-      type: "graph lasso start"
+      type: "graph lasso start",
     });
   }
 
@@ -642,7 +640,7 @@ class Graph extends React.Component {
     } else {
       dispatch({
         type: "graph lasso end",
-        polygon: polygon.map(xy => this.mapScreenToPoint(xy)) // transform the polygon
+        polygon: polygon.map((xy) => this.mapScreenToPoint(xy)), // transform the polygon
       });
     }
   }
@@ -667,7 +665,7 @@ class Graph extends React.Component {
     const { dispatch } = this.props;
     dispatch({
       type: "change opacity deselected cells in 2d graph background",
-      data: e.target.value
+      data: e.target.value,
     });
   }
 
@@ -688,7 +686,7 @@ class Graph extends React.Component {
     regl.poll();
     regl.clear({
       depth: 1,
-      color: [1, 1, 1, 1]
+      color: [1, 1, 1, 1],
     });
     drawPoints({
       distance: camera.distance(),
@@ -698,7 +696,7 @@ class Graph extends React.Component {
       count: this.count,
       projView,
       nPoints: universe.nObs,
-      minViewportDimension: Math.min(width || 800, height || 600)
+      minViewportDimension: Math.min(width || 800, height || 600),
     });
     regl._gl.flush();
   }
@@ -711,7 +709,7 @@ class Graph extends React.Component {
       pointBuffer,
       flagBuffer,
       camera,
-      projectionTF
+      projectionTF,
     } = this.state;
     this.renderPoints(
       regl,
@@ -737,7 +735,7 @@ class Graph extends React.Component {
             zIndex: -9999,
             position: "fixed",
             top: this.graphPaddingTop,
-            right: globals.leftSidebarWidth
+            right: globals.leftSidebarWidth,
           }}
         >
           <div id="graphAttachPoint">
@@ -774,7 +772,7 @@ class Graph extends React.Component {
               width={responsive.width - this.graphPaddingRightLeft}
               height={responsive.height - this.graphPaddingTop}
               data-testid="layout-graph"
-              ref={canvas => {
+              ref={(canvas) => {
                 this.reglCanvas = canvas;
               }}
               onMouseDown={this.handleCanvasEvent}

client/src/components/graph/overlays/centroidLabels.js

@@ -6,14 +6,14 @@ import { connect } from "react-redux";
 import { categoryLabelDisplayStringLongLength } from "../../../globals";
 
 export default
-@connect(state => ({
+@connect((state) => ({
   colorAccessor: state.colors.colorAccessor,
   dilatedValue: state.pointDilation.categoryField,
-  labels: state.centroidLabels.labels
+  labels: state.centroidLabels.labels,
 }))
 class CentroidLabels extends PureComponent {
   // Check to see if centroids have either just been displayed or removed from the overlay
-  componentDidUpdate = prevProps => {
+  componentDidUpdate = (prevProps) => {
     const { labels, overlayToggled } = this.props;
     const prevSize = prevProps.labels.size;
     const { size } = labels;
@@ -33,7 +33,7 @@ class CentroidLabels extends PureComponent {
       inverseTransform,
       dilatedValue,
       dispatch,
-      colorAccessor
+      colorAccessor,
     } = this.props;
 
     const labelSVGS = [];
@@ -74,20 +74,20 @@ class CentroidLabels extends PureComponent {
               fontSize,
               fontWeight,
               fill: "black",
-              userSelect: "none"
+              userSelect: "none",
             }}
-            onMouseEnter={e =>
+            onMouseEnter={(e) =>
               dispatch({
                 type: "category value mouse hover start",
                 metadataField: colorAccessor,
-                categoryField: e.target.getAttribute("data-label")
+                categoryField: e.target.getAttribute("data-label"),
               })
             }
-            onMouseOut={e =>
+            onMouseOut={(e) =>
               dispatch({
                 type: "category value mouse hover end",
                 metadataField: colorAccessor,
-                categoryField: e.target.getAttribute("data-label")
+                categoryField: e.target.getAttribute("data-label"),
               })
             }
             pointerEvents="visiblePainted"

client/src/components/graph/overlays/graphOverlayLayer.js

@@ -4,8 +4,8 @@ import { connect } from "react-redux";
 import styles from "../graph.css";
 
 export default
-@connect(state => ({
-  responsive: state.responsive
+@connect((state) => ({
+  responsive: state.responsive,
 }))
 class GraphOverlayLayer extends PureComponent {
   /*
@@ -18,11 +18,11 @@ class GraphOverlayLayer extends PureComponent {
     super(props);
 
     this.state = {
-      display: {}
+      display: {},
     };
   }
 
-  matrixToTransformString = m => {
+  matrixToTransformString = (m) => {
     /* 
       Translates the gl-matrix mat3 to SVG matrix transform style
 
@@ -34,13 +34,13 @@ class GraphOverlayLayer extends PureComponent {
     return `matrix(${m[0]} ${m[1]} ${m[3]} ${m[4]} ${m[6]} ${m[7]})`;
   };
 
-  reverseMatrixScaleTransformString = m => {
+  reverseMatrixScaleTransformString = (m) => {
     return `matrix(${1 / m[0]} 0 0 ${1 / m[4]} 0 0)`;
   };
 
   // This is passed to all children, should be called when an overlay's display state is toggled along with the overlay name and its new display state in boolean form
   overlayToggled = (overlay, displaying) => {
-    this.setState(state => {
+    this.setState((state) => {
       return { ...state, display: { ...state.display, [overlay]: displaying } };
     });
   };
@@ -54,13 +54,13 @@ class GraphOverlayLayer extends PureComponent {
       graphPaddingRightLeft,
       graphPaddingTop,
       children,
-      handleCanvasEvent
+      handleCanvasEvent,
     } = this.props;
 
     if (!cameraTF) return null;
 
     const { display } = this.state;
-    const displaying = Object.values(display).some(value => value); // check to see if at least one overlay is currently displayed
+    const displaying = Object.values(display).some((value) => value); // check to see if at least one overlay is currently displayed
 
     const inverseTransform = `${this.reverseMatrixScaleTransformString(
       modelTF
@@ -68,15 +68,15 @@ class GraphOverlayLayer extends PureComponent {
       cameraTF
     )} ${this.reverseMatrixScaleTransformString(
       projectionTF
-    )} scale(1 2) scale(1 ${1 /
-      -(responsive.height - graphPaddingTop)}) scale(2 1) scale(${1 /
-      (responsive.width - graphPaddingRightLeft)} 1)`;
+    )} scale(1 2) scale(1 ${
+      1 / -(responsive.height - graphPaddingTop)
+    }) scale(2 1) scale(${1 / (responsive.width - graphPaddingRightLeft)} 1)`;
 
     // Copy the children passed with the overlay and add the inverse transform and onDisplayChange props
-    const newChildren = React.Children.map(children, child =>
+    const newChildren = React.Children.map(children, (child) =>
       cloneElement(child, {
         inverseTransform,
-        overlayToggled: this.overlayToggled
+        overlayToggled: this.overlayToggled,
       })
     );
 
@@ -88,15 +88,16 @@ class GraphOverlayLayer extends PureComponent {
         pointerEvents="none"
         style={{
           zIndex: 99,
-          backgroundColor: displaying ? "rgba(255, 255, 255, 0.55)" : ""
+          backgroundColor: displaying ? "rgba(255, 255, 255, 0.55)" : "",
         }}
         onMouseMove={handleCanvasEvent}
         onWheel={handleCanvasEvent}
       >
         <g
           id="canvas-transformation-group-x"
-          transform={`scale(${responsive.width -
-            graphPaddingRightLeft} 1) scale(.5 1) translate(1 0)`}
+          transform={`scale(${
+            responsive.width - graphPaddingRightLeft
+          } 1) scale(.5 1) translate(1 0)`}
         >
           <g
             id="canvas-transformation-group-y"

client/src/components/graph/setupLasso.js

@@ -5,8 +5,8 @@ import * as d3 from "d3";
 const Lasso = () => {
   const dispatch = d3.dispatch("start", "end", "cancel");
 
-  const polygonToPath = polygon =>
-    `M${polygon.map(d => d.join(",")).join("L")}`;
+  const polygonToPath = (polygon) =>
+    `M${polygon.map((d) => d.join(",")).join("L")}`;
 
   const distance = (pt1, pt2) =>
     Math.sqrt((pt2[0] - pt1[0]) ** 2 + (pt2[1] - pt1[1]) ** 2);
@@ -14,7 +14,7 @@ const Lasso = () => {
   // distance last point has to be to first point before it auto closes when mouse is released
   const closeDistance = 75;
 
-  const lasso = svg => {
+  const lasso = (svg) => {
     let lassoPolygon;
     let lassoPath;
     let closePath;
@@ -55,10 +55,7 @@ const Lasso = () => {
         distance(lassoPolygon[0], lassoPolygon[lassoPolygon.length - 1]) <
         closeDistance
       ) {
-        closePath
-          .attr("x1", point[0])
-          .attr("y1", point[1])
-          .attr("opacity", 1);
+        closePath.attr("x1", point[0]).attr("y1", point[1]).attr("opacity", 1);
       } else {
         closePath.attr("opacity", 0);
       }
@@ -116,7 +113,7 @@ const Lasso = () => {
       }
     };
 
-    lasso.move = polygon => {
+    lasso.move = (polygon) => {
       if (polygon !== lassoPolygon || polygon.length !== lassoPolygon.length) {
         lasso.reset();
 

client/src/components/graph/setupSVGandBrush.js

@@ -24,7 +24,7 @@ export default (
       .brush()
       .extent([
         [0, 0],
-        [responsive.width - graphPaddingRight, responsive.height]
+        [responsive.width - graphPaddingRight, responsive.height],
       ])
       .on("start", handleStartAction)
       .on("brush", handleDragAction)