fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-30 17:48:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove all linting errors on client/src (#1463)

Browse Source 
* run eslint --fix

* camelcase

* camelCase config part 1

* part 2

* part 3 - removing subscripts

* fix "class-methods-use-this"

* fix "class-methods-use-this"

* fix eslint ignores

* add eslint ignore for set state in update

* reformat comments to appease eslint

* add a11y features

* sort-comp fix

* a11y fix

* add ignore for set state in update

* add a11y htmlFor

* remove unused toast

* remove unnecessary bind

* add ignore for set state in update

* add rel="noopener noreferrer"

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener

* use arrow function to bind

* remove unused definitions/declarations

* prettier

* remove unused state

* add comments to empty catch blocks remove curly brackets

* escape '

* use eqeqeq

* switch from default export

* remove ignore log

* remove static

* fix import

* revert subscripting config

* clean-up

* remove unnecessary subscript

* fix new errors from master

* change category click handler to a class property

* fix camelcase changes that slipped by

* unused import

* Fix newly introduced ESLint errors from addGenes
This commit is contained in:
Severiano Badajoz
2020-05-19 12:38:29 -07:00
committed by GitHub
parent 5fc76edf2d
commit c34a68304e
34 changed files with 248 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/graph/graph.js
+30 -23
View File
@@ -10,7 +10,6 @@ import setupSVGandBrushElements from "./setupSVGandBrush";
import _camera from "../../util/camera";
import _drawPoints from "./drawPointsRegl";
import { isTypedArray } from "../../util/typeHelpers";
import styles from "./graph.css";
import GraphOverlayLayer from "./overlays/graphOverlayLayer";
import CentroidLabels from "./overlays/centroidLabels";
@@ -190,7 +189,7 @@ class Graph extends React.Component {
tool: null,
container: null,
cameraRender: 0,
viewport
viewport,
};
}
@@ -209,7 +208,10 @@ class Graph extends React.Component {
// create all default rendering transformations
const modelTF = createModelTF();
const projectionTF = createProjectionTF(this.reglCanvas.width, this.reglCanvas.height);
const projectionTF = createProjectionTF(
this.reglCanvas.width,
this.reglCanvas.height
);
// initial draw to canvas
this.renderPoints(
@@ -250,7 +252,8 @@ class Graph extends React.Component {
} = this.props;
const { regl, toolSVG, camera, modelTF, viewport } = this.state;
let { projectionTF } = this.state;
const hasResized = prevState.viewport.height !== this.reglCanvas.height ||
const hasResized =
prevState.viewport.height !== this.reglCanvas.height ||
prevState.viewport.width !== this.reglCanvas.width;
let stateChanges = {};
let needsRepaint = hasResized;
@@ -261,7 +264,10 @@ class Graph extends React.Component {
const { drawPoints, pointBuffer, colorBuffer, flagBuffer } = this.state;
if (hasResized) {
projectionTF = createProjectionTF(this.reglCanvas.width, this.reglCanvas.height);
projectionTF = createProjectionTF(
this.reglCanvas.width,
this.reglCanvas.height
);
stateChanges = {
...stateChanges,
projectionTF,
@@ -322,7 +328,10 @@ class Graph extends React.Component {
...stateChanges,
...this.createToolSVG(),
};
} else if ((viewport.height && viewport.width && !toolSVG) || selectionTool !== prevProps.selectionTool ) {
} else if (
(viewport.height && viewport.width && !toolSVG) ||
selectionTool !== prevProps.selectionTool
) {
// first time or change of selection tool
stateChanges = { ...stateChanges, ...this.createToolSVG() };
} else if (prevProps.graphInteractionMode !== graphInteractionMode) {
@@ -349,6 +358,7 @@ class Graph extends React.Component {
);
}
if (Object.keys(stateChanges).length > 0) {
// Preventing update loop via stateChanges and diff checks
// eslint-disable-next-line react/no-did-update-set-state
this.setState(stateChanges);
}
@@ -371,12 +381,11 @@ class Graph extends React.Component {
const { viewportRef } = this.props;
return {
height: viewportRef.clientHeight,
width: viewportRef.clientWidth
width: viewportRef.clientWidth,
};
};
handleCanvasEvent = e => {
handleCanvasEvent = (e) => {
const { camera, projectionTF } = this.state;
if (e.type !== "wheel") e.preventDefault();
if (camera.handleEvent(e, projectionTF)) {
@@ -547,12 +556,8 @@ class Graph extends React.Component {
vec2.transformMat3(xy, xy, projectionTF);
return [
Math.round(
(xy[0] + 1) * viewport.width / 2
),
Math.round(
-((xy[1] + 1) / 2 - 1) * viewport.height
)
Math.round(((xy[0] + 1) * viewport.width) / 2),
Math.round(-((xy[1] + 1) / 2 - 1) * viewport.height),
];
}
@@ -698,7 +703,7 @@ class Graph extends React.Component {
count: this.count,
projView,
nPoints: universe.nObs,
minViewportDimension: Math.min(width, height)
minViewportDimension: Math.min(width, height),
});
regl._gl.flush();
}
@@ -744,9 +749,11 @@ class Graph extends React.Component {
cameraTF={cameraTF}
modelTF={modelTF}
projectionTF={projectionTF}
handleCanvasEvent={graphInteractionMode === "zoom" ? this.handleCanvasEvent : undefined}
handleCanvasEvent={
graphInteractionMode === "zoom" ? this.handleCanvasEvent : undefined
}
>
<CentroidLabels/>
<CentroidLabels />
</GraphOverlayLayer>
<svg
id="lasso-layer"
@@ -756,13 +763,11 @@ class Graph extends React.Component {
position: "absolute",
top: 0,
left: 0,
zIndex: 1
zIndex: 1,
}}
width={viewport.width}
height={viewport.height}
pointerEvents={
graphInteractionMode === "select" ? "auto" : "none"
}
pointerEvents={graphInteractionMode === "select" ? "auto" : "none"}
/>
<canvas
width={viewport.width}
@@ -777,7 +782,9 @@ class Graph extends React.Component {
}}
className="graph-canvas"
data-testid="layout-graph"
ref={canvas => { this.reglCanvas = canvas; }}
ref={(canvas) => {
this.reglCanvas = canvas;
}}
onMouseDown={this.handleCanvasEvent}
onMouseUp={this.handleCanvasEvent}
onMouseMove={this.handleCanvasEvent}
client/src/components/graph/overlays/centroidLabels.js
+4 -3
View File
@@ -1,5 +1,3 @@
/* eslint-disable max-classes-per-file */
/* eslint-disable jsx-a11y/mouse-events-have-key-events */
import React, { PureComponent } from "react";
import { connect } from "react-redux";
@@ -26,7 +24,7 @@ class CentroidLabels extends PureComponent {
// Notify overlay layer of display change
overlayToggled("centroidLabels", displayChangeOn);
}
};
}
render() {
const {
@@ -59,6 +57,7 @@ class CentroidLabels extends PureComponent {
labelSVGS.push(
<g
// label is unique so disabling eslint rule
// eslint-disable-next-line react/no-array-index-key
key={label}
className="centroid-label"
@@ -66,6 +65,8 @@ class CentroidLabels extends PureComponent {
data-testclass="centroid-label"
data-testid={`${label}-centroid-label`}
>
{/* The mouse actions for centroid labels do not have a screen reader alternative */}
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
<text
transform={inverseTransform}
textAnchor="middle"
client/src/components/graph/overlays/graphOverlayLayer.js
+2 -4
View File
@@ -2,8 +2,7 @@ import React, { PureComponent, cloneElement } from "react";
import styles from "../graph.css";
export default
class GraphOverlayLayer extends PureComponent {
export default class GraphOverlayLayer extends PureComponent {
/*
This component takes its children (assumed in the data coordinate space ([0, 1] range, origin in bottom left corner))
and transforms itself multiple times resulting in screen space ([0, screenWidth/Height] range, origin in top left corner)
@@ -49,7 +48,6 @@ class GraphOverlayLayer extends PureComponent {
handleCanvasEvent,
width,
height,
style
} = this.props;
const { display } = this.state;
@@ -63,7 +61,7 @@ class GraphOverlayLayer extends PureComponent {
cameraTF
)} ${this.reverseMatrixScaleTransformString(
projectionTF
)} scale(1 2) scale(1 ${1 / (-height)}) scale(2 1) scale(${1 / width} 1)`;
)} scale(1 2) scale(1 ${1 / -height}) scale(2 1) scale(${1 / width} 1)`;
// Copy the children passed with the overlay and add the inverse transform and onDisplayChange props
const newChildren = React.Children.map(children, (child) =>