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

TS migration. #2288. (#2328)

Browse Source 
* Added TS. Updated build and linting config. Added types.

* [ts-migrate][.] Rename files from JS/JSX to TS/TSX

Co-authored-by: ts-migrate <>

* [ts-migrate][.] Run TS Migrate

Co-authored-by: ts-migrate <>

* Corrected files mangled by ts-migrate.

* Updated lint config, minor linting.

* Re-enabled Husky.

* Updated tests and config.

* Reverted webpack devtool config.

* Removed obsolete snapshots.

* Added annotations snap.

* Updated tsconfig includes wrt linting.

* Removed ts-migrate.

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>
This commit is contained in:
Mim Hastie
2021-07-26 20:18:17 +00:00
committed by GitHub
co-authored by ts-migrate Timmy Huang
parent 7328cbdbd5
commit 934cc5c69b
206 changed files with 4719 additions and 2085 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/annoDialog.js → client/src/components/annoDialog.tsx
+21 -2
View File
@@ -1,30 +1,49 @@
import React from "react";
import { Button, Tooltip, Dialog, Classes, Colors } from "@blueprintjs/core";
class AnnoDialog extends React.PureComponent {
constructor(props) {
type State = any;
class AnnoDialog extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {};
}
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isActive' does not exist on type 'Readon... Remove this comment to see the full error message
isActive,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type 'Readonly<{... Remove this comment to see the full error message
text,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'Readonly<... Remove this comment to see the full error message
title,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'instruction' does not exist on type 'Rea... Remove this comment to see the full error message
instruction,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'cancelTooltipContent' does not exist on ... Remove this comment to see the full error message
cancelTooltipContent,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'errorMessage' does not exist on type 'Re... Remove this comment to see the full error message
errorMessage,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'validationError' does not exist on type ... Remove this comment to see the full error message
validationError,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoSelect' does not exist on type 'Read... Remove this comment to see the full error message
annoSelect,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoInput' does not exist on type 'Reado... Remove this comment to see the full error message
annoInput,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryInstructions' does not exist on... Remove this comment to see the full error message
secondaryInstructions,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryInput' does not exist on type '... Remove this comment to see the full error message
secondaryInput,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleCancel' does not exist on type 'Re... Remove this comment to see the full error message
handleCancel,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSubmit' does not exist on type 'Re... Remove this comment to see the full error message
handleSubmit,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'primaryButtonText' does not exist on typ... Remove this comment to see the full error message
primaryButtonText,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryButtonText' does not exist on t... Remove this comment to see the full error message
secondaryButtonText,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSecondaryButtonSubmit' does not ex... Remove this comment to see the full error message
handleSecondaryButtonSubmit,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'primaryButtonProps' does not exist on ty... Remove this comment to see the full error message
primaryButtonProps,
} = this.props;
client/src/components/app.js → client/src/components/app.tsx
+11 -7
View File
@@ -15,30 +15,32 @@ import TermsOfServicePrompt from "./termsPrompt";
import actions from "../actions";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
loading: state.controls.loading,
error: state.controls.error,
graphRenderCounter: state.controls.graphRenderCounter,
loading: (state as any).controls.loading,
error: (state as any).controls.error,
graphRenderCounter: (state as any).controls.graphRenderCounter,
}))
class App extends React.Component {
componentDidMount() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
/* listen for url changes, fire one when we start the app up */
window.addEventListener("popstate", this._onURLChanged);
this._onURLChanged();
// @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
dispatch(actions.doInitialDataLoad(window.location.search));
this.forceUpdate();
}
_onURLChanged() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({ type: "url changed", url: document.location.href });
}
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'loading' does not exist on type 'Readonl... Remove this comment to see the full error message
const { loading, error, graphRenderCounter } = this.props;
return (
<Container>
@@ -70,13 +72,15 @@ class App extends React.Component {
{loading || error ? null : (
<Layout>
<LeftSideBar />
{(viewportRef) => (
{(viewportRef: any) => (
<>
<MenuBar />
<Embedding />
<Autosave />
<TermsOfServicePrompt />
{/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
<Legend viewportRef={viewportRef} />
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: any; viewportRef: any; }' is not assi... Remove this comment to see the full error message */}
<Graph key={graphRenderCounter} viewportRef={viewportRef} />
</>
)}
client/src/components/autosave/filenameDialog.js → client/src/components/autosave/filenameDialog.tsx
+32 -18
View File
@@ -11,18 +11,23 @@ import {
Tooltip,
} from "@blueprintjs/core";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
idhash: state.config?.parameters?.["annotations-user-data-idhash"] ?? null,
annotations: state.annotations,
auth: state.config?.authentication,
userInfo: state.userInfo,
writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
idhash:
(state as any).config?.parameters?.["annotations-user-data-idhash"] ?? null,
annotations: (state as any).annotations,
auth: (state as any).config?.authentication,
userInfo: (state as any).userInfo,
writableCategoriesEnabled:
(state as any).config?.parameters?.annotations ?? false,
writableGenesetsEnabled: !(
state.config?.parameters?.annotations_genesets_readonly ?? true
(state as any).config?.parameters?.annotations_genesets_readonly ?? true
),
}))
class FilenameDialog extends React.Component {
constructor(props) {
class FilenameDialog extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
filenameText: "",
@@ -32,9 +37,9 @@ class FilenameDialog extends React.Component {
dismissFilenameDialog = () => {};
handleCreateFilename = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
const { filenameText } = this.state;
dispatch({
type: "set annotations collection name",
data: filenameText,
@@ -45,26 +50,26 @@ class FilenameDialog extends React.Component {
const legalNames = /^\w+$/;
const { filenameText } = this.state;
let err = false;
if (filenameText === "") {
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'boolean'.
err = "empty_string";
} else if (!legalNames.test(filenameText)) {
/*
IMPORTANT: this test must ultimately match the test applied by the
backend, which is designed to ensure a safe file name can be created
from the data collection name. If you change this, you will also need
to change the validation code in the backend, or it will have no effect.
*/
IMPORTANT: this test must ultimately match the test applied by the
backend, which is designed to ensure a safe file name can be created
from the data collection name. If you change this, you will also need
to change the validation code in the backend, or it will have no effect.
*/
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'boolean'.
err = "characters";
}
return err;
};
filenameErrorMessage = () => {
const err = this.filenameError();
let markup = null;
// @ts-expect-error ts-migrate(2367) FIXME: This condition will always return 'false' since th... Remove this comment to see the full error message
if (err === "empty_string") {
markup = (
<span
@@ -78,6 +83,7 @@ class FilenameDialog extends React.Component {
Name cannot be blank
</span>
);
// @ts-expect-error ts-migrate(2367) FIXME: This condition will always return 'false' since th... Remove this comment to see the full error message
} else if (err === "characters") {
markup = (
<span
@@ -97,14 +103,18 @@ class FilenameDialog extends React.Component {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'writableCategoriesEnabled' does not exis... Remove this comment to see the full error message
writableCategoriesEnabled,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'writableGenesetsEnabled' does not exist ... Remove this comment to see the full error message
writableGenesetsEnabled,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annotations' does not exist on type 'Rea... Remove this comment to see the full error message
annotations,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'idhash' does not exist on type 'Readonly... Remove this comment to see the full error message
idhash,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'userInfo' does not exist on type 'Readon... Remove this comment to see the full error message
userInfo,
} = this.props;
const { filenameText } = this.state;
return (writableCategoriesEnabled || writableGenesetsEnabled) &&
annotations.promptForFilename &&
!annotations.dataCollectionNameIsReadOnly &&
@@ -128,6 +138,7 @@ class FilenameDialog extends React.Component {
<InputGroup
autoFocus
value={filenameText}
// @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
intent={this.filenameError(filenameText) ? "warning" : "none"}
onChange={(e) =>
this.setState({ filenameText: e.target.value })
@@ -138,12 +149,14 @@ class FilenameDialog extends React.Component {
<p
style={{
marginTop: 7,
// @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
visibility: this.filenameError(filenameText)
? "visible"
: "hidden",
color: Colors.ORANGE3,
}}
>
{/* @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1. */}
{this.filenameErrorMessage(filenameText)}
</p>
</div>
@@ -171,6 +184,7 @@ class FilenameDialog extends React.Component {
<Button onClick={this.dismissFilenameDialog}>Cancel</Button>
</Tooltip>
<Button
// @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
disabled={!filenameText || this.filenameError(filenameText)}
onClick={this.handleCreateFilename}
intent="primary"
client/src/components/autosave/index.js → client/src/components/autosave/index.tsx
+30 -15
View File
@@ -3,23 +3,30 @@ import { connect } from "react-redux";
import actions from "../../actions";
import FilenameDialog from "./filenameDialog";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annotations: state.annotations,
annotations: (state as any).annotations,
obsAnnotationSaveInProgress:
state.autosave?.obsAnnotationSaveInProgress ?? false,
genesetSaveInProgress: state.autosave?.genesetSaveInProgress ?? false,
error: state.autosave?.error,
writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
(state as any).autosave?.obsAnnotationSaveInProgress ?? false,
genesetSaveInProgress:
(state as any).autosave?.genesetSaveInProgress ?? false,
error: (state as any).autosave?.error,
writableCategoriesEnabled:
(state as any).config?.parameters?.annotations ?? false,
writableGenesetsEnabled: !(
state.config?.parameters?.annotations_genesets_readonly ?? true
(state as any).config?.parameters?.annotations_genesets_readonly ?? true
),
annoMatrix: state.annoMatrix,
genesets: state.genesets,
lastSavedAnnoMatrix: state.autosave?.lastSavedAnnoMatrix,
lastSavedGenesets: state.autosave?.lastSavedGenesets,
annoMatrix: (state as any).annoMatrix,
genesets: (state as any).genesets,
lastSavedAnnoMatrix: (state as any).autosave?.lastSavedAnnoMatrix,
lastSavedGenesets: (state as any).autosave?.lastSavedGenesets,
}))
class Autosave extends React.Component {
constructor(props) {
class Autosave extends React.Component<{}, State> {
clearInterval: any;
constructor(props: {}) {
super(props);
this.state = {
timer: null,
@@ -27,8 +34,8 @@ class Autosave extends React.Component {
}
componentDidMount() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'writableCategoriesEnabled' does not exis... Remove this comment to see the full error message
const { writableCategoriesEnabled, writableGenesetsEnabled } = this.props;
let { timer } = this.state;
if (timer) clearInterval(timer);
if (writableCategoriesEnabled || writableGenesetsEnabled) {
@@ -46,8 +53,11 @@ class Autosave extends React.Component {
tick = () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'obsAnnotationSaveInProgress' does not ex... Remove this comment to see the full error message
obsAnnotationSaveInProgress,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesetSaveInProgress' does not exist on... Remove this comment to see the full error message
genesetSaveInProgress,
} = this.props;
if (!obsAnnotationSaveInProgress && this.needToSaveObsAnnotations()) {
@@ -60,12 +70,14 @@ class Autosave extends React.Component {
needToSaveObsAnnotations = () => {
/* return true if we need to save obs cell labels, false if we don't */
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix, lastSavedAnnoMatrix } = this.props;
return actions.needToSaveObsAnnotations(annoMatrix, lastSavedAnnoMatrix);
};
needToSaveGenesets = () => {
/* return true if we need to save gene ses, false if we do not */
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Readon... Remove this comment to see the full error message
const { genesets, lastSavedGenesets } = this.props;
return genesets.initialized && genesets.genesets !== lastSavedGenesets;
};
@@ -75,11 +87,13 @@ class Autosave extends React.Component {
}
saveInProgress() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'obsAnnotationSaveInProgress' does not ex... Remove this comment to see the full error message
const { obsAnnotationSaveInProgress, genesetSaveInProgress } = this.props;
return obsAnnotationSaveInProgress || genesetSaveInProgress;
}
statusMessage() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'error' does not exist on type 'Readonly<... Remove this comment to see the full error message
const { error } = this.props;
if (error) {
return `Autosave error: ${error}`;
@@ -89,14 +103,15 @@ class Autosave extends React.Component {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'writableCategoriesEnabled' does not exis... Remove this comment to see the full error message
writableCategoriesEnabled,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'writableGenesetsEnabled' does not exist ... Remove this comment to see the full error message
writableGenesetsEnabled,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'lastSavedAnnoMatrix' does not exist on t... Remove this comment to see the full error message
lastSavedAnnoMatrix,
} = this.props;
const initialDataLoadComplete = lastSavedAnnoMatrix;
if (!writableCategoriesEnabled && !writableGenesetsEnabled) return null;
return (
<div
id="autosave"
client/src/components/brushableHistogram/error.js → client/src/components/brushableHistogram/error.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React from "react";
import * as globals from "../../globals";
const ErrorLoading = ({ displayName, zebra }) => {
const ErrorLoading = ({ displayName, zebra }: any) => {
return (
<div
style={{
client/src/components/brushableHistogram/footer.js → client/src/components/brushableHistogram/footer.tsx
+8
View File
@@ -2,13 +2,21 @@ import React from "react";
const HistogramFooter = React.memo(
({
// @ts-expect-error ts-migrate(2339) FIXME: Property 'displayName' does not exist on type '{ c... Remove this comment to see the full error message
displayName,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'hideRanges' does not exist on type '{ ch... Remove this comment to see the full error message
hideRanges,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeMin' does not exist on type '{ chil... Remove this comment to see the full error message
rangeMin,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeMax' does not exist on type '{ chil... Remove this comment to see the full error message
rangeMax,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeColorMin' does not exist on type '{... Remove this comment to see the full error message
rangeColorMin,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeColorMax' does not exist on type '{... Remove this comment to see the full error message
rangeColorMax,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type '{ childre... Remove this comment to see the full error message
isObs,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
isGeneSetSummary,
}) => {
/*
client/src/components/brushableHistogram/header.js → client/src/components/brushableHistogram/header.tsx
+9
View File
@@ -5,14 +5,23 @@ import * as globals from "../../globals";
const HistogramHeader = React.memo(
({
// @ts-expect-error ts-migrate(2339) FIXME: Property 'fieldId' does not exist on type '{ child... Remove this comment to see the full error message
fieldId,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorBy' does not exist on type '{ chi... Remove this comment to see the full error message
isColorBy,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onColorByClick' does not exist on type '... Remove this comment to see the full error message
onColorByClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onRemoveClick' does not exist on type '{... Remove this comment to see the full error message
onRemoveClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterPlotX' does not exist on type '... Remove this comment to see the full error message
isScatterPlotX,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterPlotY' does not exist on type '... Remove this comment to see the full error message
isScatterPlotY,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onScatterPlotXClick' does not exist on t... Remove this comment to see the full error message
onScatterPlotXClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onScatterPlotYClick' does not exist on t... Remove this comment to see the full error message
onScatterPlotYClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type '{ childre... Remove this comment to see the full error message
isObs,
}) => {
/*
client/src/components/brushableHistogram/histogram.js → client/src/components/brushableHistogram/histogram.tsx
+14 -3
View File
@@ -18,7 +18,7 @@ const Histogram = ({
isColorBy,
selectionRange,
mini,
}) => {
}: any) => {
const svgRef = useRef(null);
const [brush, setBrush] = useState(null);
@@ -69,14 +69,18 @@ const Histogram = ({
.data(bins)
.enter()
.append("rect")
// @ts-expect-error ts-migrate(6133) FIXME: 'd' is declared but its value is never read.
.attr("x", (d, i) => x(binStart(i)) + 1)
.attr("y", (d) => y(d))
// @ts-expect-error ts-migrate(6133) FIXME: 'd' is declared but its value is never read.
.attr("width", (d, i) => x(binEnd(i)) - x(binStart(i)) - binPadding)
.attr("height", (d) => y(0) - y(d))
.style(
"fill",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
isColorBy
? (d, i) => colorScale(histogramScale(binStart(i)))
? // @ts-expect-error ts-migrate(6133) FIXME: 'd' is declared but its value is never read.
(d: any, i: any) => colorScale(histogramScale(binStart(i)))
: defaultBarColor
);
}
@@ -101,6 +105,7 @@ const Histogram = ({
const brushXselection = container
.insert("g")
.attr("class", "brush")
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
.attr("data-testid", `${svgRef.current.dataset.testid}-brushable-area`)
.call(brushX);
@@ -113,6 +118,7 @@ const Histogram = ({
d3
.axisBottom(x)
.ticks(4)
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
.tickFormat(d3.format(maybeScientific(x)))
);
@@ -126,8 +132,9 @@ const Histogram = ({
.axisRight(y)
.ticks(3)
.tickFormat(
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
d3.format(
y.domain().some((n) => Math.abs(n) >= 10000) ? ".0e" : ","
y.domain().some((n: any) => Math.abs(n) >= 10000) ? ".0e" : ","
)
)
);
@@ -137,6 +144,7 @@ const Histogram = ({
svg.selectAll(".axis path").style("stroke", "rgb(230,230,230)");
svg.selectAll(".axis line").style("stroke", "rgb(230,230,230)");
// @ts-expect-error ts-migrate(2345) FIXME: Argument of type '{ brushX: d3.BrushBehavior<unkno... Remove this comment to see the full error message
setBrush({ brushX, brushXselection });
}
}, [histogram, isColorBy]);
@@ -146,6 +154,7 @@ const Histogram = ({
paint/update selection brush
*/
if (!brush) return;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'brushX' does not exist on type 'null'.
const { brushX, brushXselection } = brush;
const selection = d3.brushSelection(brushXselection.node());
if (!selectionRange && selection) {
@@ -162,7 +171,9 @@ const Histogram = ({
} else {
/* there is an active selection and a brush - make sure they match */
const moveDeltaThreshold = 1;
// @ts-expect-error ts-migrate(2363) FIXME: The right-hand side of an arithmetic operation mus... Remove this comment to see the full error message
const dX0 = Math.abs(x0 - selection[0]);
// @ts-expect-error ts-migrate(2363) FIXME: The right-hand side of an arithmetic operation mus... Remove this comment to see the full error message
const dX1 = Math.abs(x1 - selection[1]);
/*
only update the brush if it is grossly incorrect,
client/src/components/brushableHistogram/index.js → client/src/components/brushableHistogram/index.tsx
+95 -58
View File
@@ -29,27 +29,31 @@ const MARGIN_MINI = {
const WIDTH_MINI = 120 - MARGIN_MINI.LEFT - MARGIN_MINI.RIGHT;
const HEIGHT_MINI = 15 - MARGIN_MINI.TOP - MARGIN_MINI.BOTTOM;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state, ownProps) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type '{}'.
const { isObs, isUserDefined, isGeneSetSummary, field } = ownProps;
const myName = makeContinuousDimensionName(
{ isObs, isUserDefined, isGeneSetSummary },
field
);
return {
annoMatrix: state.annoMatrix,
isScatterplotXXaccessor: state.controls.scatterplotXXaccessor === field,
isScatterplotYYaccessor: state.controls.scatterplotYYaccessor === field,
continuousSelectionRange: state.continuousSelection[myName],
isColorAccessor: state.colors.colorAccessor === field,
annoMatrix: (state as any).annoMatrix,
isScatterplotXXaccessor:
(state as any).controls.scatterplotXXaccessor === field,
isScatterplotYYaccessor:
(state as any).controls.scatterplotYYaccessor === field,
continuousSelectionRange: (state as any).continuousSelection[myName],
isColorAccessor: (state as any).colors.colorAccessor === field,
};
})
class HistogramBrush extends React.PureComponent {
static watchAsync(props, prevProps) {
static watchAsync(props: any, prevProps: any) {
return !shallowEqual(props.watchProps, prevProps.watchProps);
}
/* memoized closure to prevent HistogramHeader unecessary repaint */
handleColorAction = memoize((dispatch) => (field, isObs) => {
handleColorAction = memoize((dispatch) => (field: any, isObs: any) => {
if (isObs) {
dispatch({
type: "color by continuous metadata",
@@ -60,25 +64,31 @@ class HistogramBrush extends React.PureComponent {
}
});
onBrush = (selection, x, eventType) => {
// @ts-expect-error ts-migrate(6133) FIXME: 'selection' is declared but its value is never rea... Remove this comment to see the full error message
onBrush = (selection: any, x: any, eventType: any) => {
const type = `continuous metadata histogram ${eventType}`;
return () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
field,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
isObs,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
isUserDefined,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
isGeneSetSummary,
} = this.props;
// ignore programmatically generated events
if (!d3.event.sourceEvent) return;
if (!(d3 as any).event.sourceEvent) return;
// ignore cascading events, which are programmatically generated
if (d3.event.sourceEvent.sourceEvent) return;
if ((d3 as any).event.sourceEvent.sourceEvent) return;
const query = this.createQuery();
const range = d3.event.selection
? [x(d3.event.selection[0]), x(d3.event.selection[1])]
const range = (d3 as any).event.selection
? [x((d3 as any).event.selection[0]), x((d3 as any).event.selection[1])]
: null;
const otherProps = {
selection: field,
@@ -94,42 +104,52 @@ class HistogramBrush extends React.PureComponent {
};
};
onBrushEnd = (selection, x) => {
// @ts-expect-error ts-migrate(6133) FIXME: 'selection' is declared but its value is never rea... Remove this comment to see the full error message
onBrushEnd = (selection: any, x: any) => {
return () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
field,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
isObs,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
isUserDefined,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
isGeneSetSummary,
} = this.props;
const minAllowedBrushSize = 10;
const smallAmountToAvoidInfiniteLoop = 0.1;
// ignore programmatically generated events
if (!d3.event.sourceEvent) return;
if (!(d3 as any).event.sourceEvent) return;
// ignore cascading events, which are programmatically generated
if (d3.event.sourceEvent.sourceEvent) return;
if ((d3 as any).event.sourceEvent.sourceEvent) return;
let type;
let range = null;
if (d3.event.selection) {
if ((d3 as any).event.selection) {
type = "continuous metadata histogram end";
if (
d3.event.selection[1] - d3.event.selection[0] >
(d3 as any).event.selection[1] - (d3 as any).event.selection[0] >
minAllowedBrushSize
) {
range = [x(d3.event.selection[0]), x(d3.event.selection[1])];
range = [
x((d3 as any).event.selection[0]),
x((d3 as any).event.selection[1]),
];
} else {
/* the user selected range is too small and will be hidden #587, so take control of it procedurally */
/* https://stackoverflow.com/questions/12354729/d3-js-limit-size-of-brush */
const procedurallyResizedBrushWidth =
d3.event.selection[0] +
(d3 as any).event.selection[0] +
minAllowedBrushSize +
smallAmountToAvoidInfiniteLoop; //
range = [x(d3.event.selection[0]), x(procedurallyResizedBrushWidth)];
range = [
x((d3 as any).event.selection[0]),
x(procedurallyResizedBrushWidth),
];
}
} else {
type = "continuous metadata histogram cancel";
@@ -151,6 +171,7 @@ class HistogramBrush extends React.PureComponent {
};
handleSetGeneAsScatterplotX = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, field } = this.props;
dispatch({
type: "set scatterplot x",
@@ -159,6 +180,7 @@ class HistogramBrush extends React.PureComponent {
};
handleSetGeneAsScatterplotY = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, field } = this.props;
dispatch({
type: "set scatterplot y",
@@ -168,10 +190,15 @@ class HistogramBrush extends React.PureComponent {
removeHistogram = () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
field,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
isColorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotXXaccessor' does not exist ... Remove this comment to see the full error message
isScatterplotXXaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotYYaccessor' does not exist ... Remove this comment to see the full error message
isScatterplotYYaccessor,
} = this.props;
dispatch({
@@ -198,11 +225,13 @@ class HistogramBrush extends React.PureComponent {
};
fetchAsyncProps = async () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix, width } = this.props;
const { isClipped } = annoMatrix;
const query = this.createQuery();
// @ts-expect-error ts-migrate(2488) FIXME: Type 'any[] | null' must have a '[Symbol.iterator]... Remove this comment to see the full error message
const df = await annoMatrix.fetch(...query);
const column = df.icol(0);
@@ -261,7 +290,7 @@ class HistogramBrush extends React.PureComponent {
};
// eslint-disable-next-line class-methods-use-this -- instance method allows for memoization per annotation
calcHistogramCache(col, newMargin, newWidth, newHeight) {
calcHistogramCache(col: any, newMargin: any, newWidth: any, newHeight: any) {
/*
recalculate expensive stuff, notably bins, summaries, etc.
*/
@@ -269,35 +298,30 @@ class HistogramBrush extends React.PureComponent {
const summary = col.summarize(); /* this is memoized, so it's free the second time you call it */
const { min: domainMin, max: domainMax } = summary;
const numBins = 40;
const {
TOP: topMargin,
LEFT: leftMargin,
} = newMargin; /* changes with mini */
histogramCache.domain = [
domainMin,
domainMax,
]; /* doesn't change with mini */
histogramCache.x = d3
const { TOP: topMargin, LEFT: leftMargin } = newMargin;
(histogramCache as any).domain = [domainMin, domainMax];
/* doesn't change with mini */ (histogramCache as any).x = d3
.scaleLinear()
.domain([domainMin, domainMax])
.range([leftMargin, leftMargin + newWidth]);
histogramCache.bins = col.histogram(numBins, [
(histogramCache as any).bins = col.histogram(numBins, [
domainMin,
domainMax,
]); /* memoized */
]);
/* memoized */ (histogramCache as any).binWidth =
(domainMax - domainMin) / numBins;
histogramCache.binWidth = (domainMax - domainMin) / numBins;
(histogramCache as any).binStart = (i: any) =>
domainMin + i * (histogramCache as any).binWidth;
(histogramCache as any).binEnd = (i: any) =>
domainMin + (i + 1) * (histogramCache as any).binWidth;
histogramCache.binStart = (i) => domainMin + i * histogramCache.binWidth;
histogramCache.binEnd = (i) =>
domainMin + (i + 1) * histogramCache.binWidth;
const yMax = (histogramCache as any).bins.reduce((l: any, r: any) =>
l > r ? l : r
);
const yMax = histogramCache.bins.reduce((l, r) => (l > r ? l : r));
histogramCache.y = d3
(histogramCache as any).y = d3
.scaleLinear()
.domain([0, yMax])
.range([topMargin + newHeight, topMargin]);
@@ -306,13 +330,8 @@ class HistogramBrush extends React.PureComponent {
}
createQuery() {
const {
isObs,
isGeneSetSummary,
field,
setGenes,
annoMatrix,
} = this.props;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
const { isObs, isGeneSetSummary, field, setGenes, annoMatrix } = this.props;
const { schema } = annoMatrix;
if (isObs) {
return ["obs", field];
@@ -349,21 +368,35 @@ class HistogramBrush extends React.PureComponent {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
annoMatrix,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
field,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
isColorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
isUserDefined,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
isGeneSetSummary,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotXXaccessor' does not exist ... Remove this comment to see the full error message
isScatterplotXXaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotYYaccessor' does not exist ... Remove this comment to see the full error message
isScatterplotYYaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'zebra' does not exist on type 'Readonly<... Remove this comment to see the full error message
zebra,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'continuousSelectionRange' does not exist... Remove this comment to see the full error message
continuousSelectionRange,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
isObs,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'mini' does not exist on type 'Readonly<{... Remove this comment to see the full error message
mini,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'setGenes' does not exist on type 'Readon... Remove this comment to see the full error message
setGenes,
} = this.props;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
let { width } = this.props;
if (!width) {
width = mini ? WIDTH_MINI : WIDTH;
@@ -392,7 +425,7 @@ class HistogramBrush extends React.PureComponent {
</Async.Rejected>
<Async.Fulfilled>
{(asyncProps) =>
asyncProps.OK2Render ? (
(asyncProps as any).OK2Render ? (
<div
id={`histogram_${fieldForId}`}
data-testid={`histogram-${field}`}
@@ -404,6 +437,7 @@ class HistogramBrush extends React.PureComponent {
>
{!mini && isObs ? (
<HistogramHeader
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ fieldId: any; isColorBy: any; isObs: any; ... Remove this comment to see the full error message
fieldId={field}
isColorBy={isColorAccessor}
isObs={isObs}
@@ -422,9 +456,11 @@ class HistogramBrush extends React.PureComponent {
<Histogram
field={field}
fieldForId={fieldForId}
display={asyncProps.isSingleValue ? "none" : "block"}
display={(asyncProps as any).isSingleValue ? "none" : "block"}
histogram={
mini ? asyncProps.miniHistogram : asyncProps.histogram
mini
? (asyncProps as any).miniHistogram
: (asyncProps as any).histogram
}
width={width}
height={mini ? HEIGHT_MINI : HEIGHT}
@@ -437,14 +473,15 @@ class HistogramBrush extends React.PureComponent {
/>
{!mini && (
<HistogramFooter
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isGeneSetSummary: any; isObs: any; display... Remove this comment to see the full error message
isGeneSetSummary={isGeneSetSummary}
isObs={isObs}
displayName={field}
hideRanges={asyncProps.isSingleValue}
rangeMin={asyncProps.unclippedRange[0]}
rangeMax={asyncProps.unclippedRange[1]}
rangeColorMin={asyncProps.unclippedRangeColor[0]}
rangeColorMax={asyncProps.unclippedRangeColor[1]}
hideRanges={(asyncProps as any).isSingleValue}
rangeMin={(asyncProps as any).unclippedRange[0]}
rangeMax={(asyncProps as any).unclippedRange[1]}
rangeColorMin={(asyncProps as any).unclippedRangeColor[0]}
rangeColorMax={(asyncProps as any).unclippedRangeColor[1]}
/>
)}
</div>
client/src/components/brushableHistogram/loading.js → client/src/components/brushableHistogram/loading.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { Button } from "@blueprintjs/core";
import * as globals from "../../globals";
const StillLoading = ({ zebra, displayName }) => {
const StillLoading = ({ zebra, displayName }: any) => {
/*
Render a loading indicator for the field.
*/
client/src/components/categorical/annoSelect.js → client/src/components/categorical/annoSelect.tsx
+9 -2
View File
@@ -2,16 +2,21 @@ import React from "react";
import { Button, MenuItem } from "@blueprintjs/core";
import { Select } from "@blueprintjs/select";
class DuplicateCategorySelect extends React.PureComponent {
constructor(props) {
type State = any;
class DuplicateCategorySelect extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {};
}
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'allCategoryNames' does not exist on type... Remove this comment to see the full error message
allCategoryNames,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryToDuplicate' does not exist on t... Remove this comment to see the full error message
categoryToDuplicate,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleModalDuplicateCategorySelection' d... Remove this comment to see the full error message
handleModalDuplicateCategorySelection,
} = this.props;
return (
@@ -31,7 +36,9 @@ class DuplicateCategorySelect extends React.PureComponent {
<MenuItem
data-testclass="duplicate-category-dropdown-option"
onClick={handleClick}
// @ts-expect-error ts-migrate(2322) FIXME: Type 'unknown' is not assignable to type 'Key | nu... Remove this comment to see the full error message
key={d}
// @ts-expect-error ts-migrate(2322) FIXME: Type 'unknown' is not assignable to type 'ReactNod... Remove this comment to see the full error message
text={d}
/>
);
client/src/components/categorical/category/annoDialogAddLabel.js → client/src/components/categorical/category/annoDialogAddLabel.tsx
+23 -14
View File
@@ -5,20 +5,24 @@ import LabelInput from "../../labelInput";
import { labelPrompt, isLabelErroneous } from "../labelUtil";
import actions from "../../../actions";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annotations: state.annotations,
schema: state.annoMatrix?.schema,
obsCrossfilter: state.obsCrossfilter,
annotations: (state as any).annotations,
schema: (state as any).annoMatrix?.schema,
obsCrossfilter: (state as any).obsCrossfilter,
}))
class Category extends React.PureComponent {
constructor(props) {
class Category extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
newLabelText: "",
};
}
disableAddNewLabelMode = (e) => {
disableAddNewLabelMode = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
this.setState({
newLabelText: "",
@@ -29,10 +33,11 @@ class Category extends React.PureComponent {
if (e) e.preventDefault();
};
handleAddNewLabelToCategory = (e) => {
handleAddNewLabelToCategory = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
const { newLabelText } = this.state;
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
this.disableAddNewLabelMode();
dispatch(
actions.annotationCreateLabelInCategory(
@@ -44,10 +49,11 @@ class Category extends React.PureComponent {
e.preventDefault();
};
addLabelAndAssignCells = (e) => {
addLabelAndAssignCells = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
const { newLabelText } = this.state;
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
this.disableAddNewLabelMode();
dispatch(
actions.annotationCreateLabelInCategory(metadataField, newLabelText, true)
@@ -55,26 +61,28 @@ class Category extends React.PureComponent {
e.preventDefault();
};
labelNameError = (name) => {
labelNameError = (name: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
const { metadataField, schema } = this.props;
return isLabelErroneous(name, metadataField, schema);
};
instruction = (label) => {
instruction = (label: any) => {
return labelPrompt(this.labelNameError(label), "New, unique label", ":");
};
handleChangeOrSelect = (label) => {
handleChangeOrSelect = (label: any) => {
this.setState({ newLabelText: label });
};
render() {
const { newLabelText } = this.state;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
const { metadataField, annotations, obsCrossfilter } = this.props;
return (
<>
<AnnoDialog
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; inputProps: { "data-testid"... Remove this comment to see the full error message
isActive={
annotations.isAddingNewLabel &&
annotations.categoryAddingNewLabel === metadataField
@@ -95,6 +103,7 @@ class Category extends React.PureComponent {
handleCancel={this.disableAddNewLabelMode}
annoInput={
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ labelSuggestions: null; onChange: (label: ... Remove this comment to see the full error message
labelSuggestions={null}
onChange={this.handleChangeOrSelect}
onSelect={this.handleChangeOrSelect}
client/src/components/categorical/category/annoDialogEditCategoryName.js → client/src/components/categorical/category/annoDialogEditCategoryName.tsx
+34 -27
View File
@@ -7,25 +7,30 @@ import { labelPrompt } from "../labelUtil";
import { AnnotationsHelpers } from "../../../util/stateManager";
import actions from "../../../actions";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annotations: state.annotations,
schema: state.annoMatrix?.schema,
annotations: (state as any).annotations,
schema: (state as any).annoMatrix?.schema,
}))
class AnnoDialogEditCategoryName extends React.PureComponent {
constructor(props) {
class AnnoDialogEditCategoryName extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
newCategoryText: props.metadataField,
};
}
handleChangeOrSelect = (name) => {
handleChangeOrSelect = (name: any) => {
this.setState({
newCategoryText: name,
});
};
disableEditCategoryMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
dispatch({
type: "annotation: disable category edit mode",
@@ -33,17 +38,19 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
this.setState({ newCategoryText: metadataField });
};
handleEditCategory = (e) => {
handleEditCategory = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
const { newCategoryText } = this.state;
/*
test for uniqueness against *all* annotation names, not just the subset
we render as categorical.
*/
test for uniqueness against *all* annotation names, not just the subset
we render as categorical.
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
const { schema } = this.props;
const allCategoryNames = schema.annotations.obs.columns.map((c) => c.name);
const allCategoryNames = schema.annotations.obs.columns.map(
(c: any) => c.name
);
if (
(allCategoryNames.indexOf(newCategoryText) > -1 &&
newCategoryText !== metadataField) ||
@@ -51,9 +58,7 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
) {
return;
}
this.disableEditCategoryMode();
if (metadataField !== newCategoryText)
dispatch(
actions.annotationRenameCategoryAction(metadataField, newCategoryText)
@@ -61,35 +66,34 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
e.preventDefault();
};
editedCategoryNameError = (name) => {
editedCategoryNameError = (name: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
const { metadataField } = this.props;
/* check for syntax errors in category name */
const error = AnnotationsHelpers.annotationNameIsErroneous(name);
if (error) {
return error;
}
/* check for duplicative categories */
/*
test for uniqueness against *all* annotation names, not just the subset
we render as categorical.
*/
test for uniqueness against *all* annotation names, not just the subset
we render as categorical.
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
const { schema } = this.props;
const allCategoryNames = schema.annotations.obs.columns.map((c) => c.name);
const allCategoryNames = schema.annotations.obs.columns.map(
(c: any) => c.name
);
const categoryNameAlreadyExists = allCategoryNames.indexOf(name) > -1;
const sameName = name === metadataField;
if (categoryNameAlreadyExists && !sameName) {
return "duplicate";
}
/* otherwise, no error */
return false;
};
instruction = (name) => {
instruction = (name: any) => {
return labelPrompt(
this.editedCategoryNameError(name),
"New, unique category name",
@@ -98,17 +102,19 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
};
allCategoryNames() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
const { schema } = this.props;
return schema.annotations.obs.columns.map((c) => c.name);
return schema.annotations.obs.columns.map((c: any) => c.name);
}
render() {
const { newCategoryText } = this.state;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
const { metadataField, annotations } = this.props;
return (
<>
<AnnoDialog
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; inputProps: { "data-testid"... Remove this comment to see the full error message
isActive={
annotations.isEditingCategoryName &&
annotations.categoryBeingEdited === metadataField
@@ -129,6 +135,7 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
handleCancel={this.disableEditCategoryMode}
annoInput={
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; labelSuggestions: null; onChan... Remove this comment to see the full error message
label={newCategoryText}
labelSuggestions={null}
onChange={this.handleChangeOrSelect}
client/src/components/categorical/category/annoMenuCategory.js → client/src/components/categorical/category/annoMenuCategory.tsx
+15 -5
View File
@@ -16,16 +16,20 @@ import { IconNames } from "@blueprintjs/icons";
import * as globals from "../../../globals";
import actions from "../../../actions";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annotations: state.annotations,
annotations: (state as any).annotations,
}))
class AnnoMenuCategory extends React.PureComponent {
constructor(props) {
class AnnoMenuCategory extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {};
}
activateAddNewLabelMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
dispatch({
type: "annotation: activate add new label mode",
@@ -34,8 +38,8 @@ class AnnoMenuCategory extends React.PureComponent {
};
activateEditCategoryMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
dispatch({
type: "annotation: activate category edit mode",
data: metadataField,
@@ -43,20 +47,26 @@ class AnnoMenuCategory extends React.PureComponent {
};
handleDeleteCategory = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
dispatch(actions.annotationDeleteCategoryAction(metadataField));
};
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annotations' does not exist on type 'Rea... Remove this comment to see the full error message
annotations,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type 'Read... Remove this comment to see the full error message
isUserAnno,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'createText' does not exist on type 'Read... Remove this comment to see the full error message
createText,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'editText' does not exist on type 'Readon... Remove this comment to see the full error message
editText,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'deleteText' does not exist on type 'Read... Remove this comment to see the full error message
deleteText,
} = this.props;
return (
<>
{isUserAnno ? (
client/src/components/categorical/category/index.js → client/src/components/categorical/category/index.tsx
+97 -24
View File
@@ -31,33 +31,39 @@ const LABEL_WIDTH = globals.leftSidebarWidth - 100;
const ANNO_BUTTON_WIDTH = 50;
const LABEL_WIDTH_ANNO = LABEL_WIDTH - ANNO_BUTTON_WIDTH;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state, ownProps) => {
const schema = state.annoMatrix?.schema;
const schema = (state as any).annoMatrix?.schema;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
const { metadataField } = ownProps;
const isUserAnno = schema?.annotations?.obsByName[metadataField]?.writable;
const categoricalSelection = state.categoricalSelection?.[metadataField];
const categoricalSelection = (state as any).categoricalSelection?.[
metadataField
];
return {
colors: state.colors,
colors: (state as any).colors,
categoricalSelection,
annotations: state.annotations,
annoMatrix: state.annoMatrix,
annotations: (state as any).annotations,
annoMatrix: (state as any).annoMatrix,
schema,
crossfilter: state.obsCrossfilter,
crossfilter: (state as any).obsCrossfilter,
isUserAnno,
genesets: state.genesets.genesets,
genesets: (state as any).genesets.genesets,
};
})
class Category extends React.PureComponent {
static getSelectionState(
categoricalSelection,
metadataField,
categorySummary
categoricalSelection: any,
// @ts-expect-error ts-migrate(6133) FIXME: 'metadataField' is declared but its value is never... Remove this comment to see the full error message
metadataField: any,
categorySummary: any
) {
// total number of categories in this dimension
const totalCatCount = categorySummary.numCategoryValues;
// number of selected options in this category
const selectedCatCount = categorySummary.categoryValues.reduce(
(res, label) => (categoricalSelection.get(label) ?? true ? res + 1 : res),
(res: any, label: any) =>
categoricalSelection.get(label) ?? true ? res + 1 : res,
0
);
return selectedCatCount === totalCatCount
@@ -67,13 +73,14 @@ class Category extends React.PureComponent {
: "some";
}
static watchAsync(props, prevProps) {
static watchAsync(props: any, prevProps: any) {
return !shallowEqual(props.watchProps, prevProps.watchProps);
}
createCategorySummaryFromDfCol = memoize(createCategorySummaryFromDfCol);
getSelectionState(categorySummary) {
getSelectionState(categorySummary: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoricalSelection' does not exist on ... Remove this comment to see the full error message
const { categoricalSelection, metadataField } = this.props;
return Category.getSelectionState(
categoricalSelection,
@@ -83,6 +90,7 @@ class Category extends React.PureComponent {
}
handleColorChange = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
dispatch({
type: "color by categorical metadata",
@@ -91,6 +99,7 @@ class Category extends React.PureComponent {
};
handleCategoryClick = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annotations' does not exist on type 'Rea... Remove this comment to see the full error message
const { annotations, metadataField, onExpansionChange } = this.props;
const editingCategory =
annotations.isEditingCategoryName &&
@@ -100,13 +109,13 @@ class Category extends React.PureComponent {
}
};
handleCategoryKeyPress = (e) => {
handleCategoryKeyPress = (e: any) => {
if (e.key === "Enter") {
this.handleCategoryClick();
}
};
handleToggleAllClick = (categorySummary) => {
handleToggleAllClick = (categorySummary: any) => {
const isChecked = this.getSelectionState(categorySummary);
if (isChecked === "all") {
this.toggleNone(categorySummary);
@@ -115,8 +124,9 @@ class Category extends React.PureComponent {
}
};
fetchAsyncProps = async (props) => {
fetchAsyncProps = async (props: any) => {
const { annoMatrix, metadataField, colors } = props.watchProps;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on type 'Rea... Remove this comment to see the full error message
const { crossfilter } = this.props;
const [categoryData, categorySummary, colorData] = await this.fetchData(
@@ -136,13 +146,14 @@ class Category extends React.PureComponent {
};
};
async fetchData(annoMatrix, metadataField, colors) {
async fetchData(annoMatrix: any, metadataField: any, colors: any) {
/*
fetch our data and the color-by data if appropriate, and then build a summary
of our category and a color table for the color-by annotation.
*/
const { schema } = annoMatrix;
const { colorAccessor, colorMode } = colors;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Readon... Remove this comment to see the full error message
const { genesets } = this.props;
let colorDataPromise = Promise.resolve(null);
if (colorAccessor) {
@@ -169,8 +180,9 @@ class Category extends React.PureComponent {
return [categoryData, categorySummary, colorData];
}
updateColorTable(colorData) {
updateColorTable(colorData: any) {
// color table, which may be null
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
const { schema, colors, metadataField } = this.props;
const { colorAccessor, userColors, colorMode } = colors;
return {
@@ -187,7 +199,8 @@ class Category extends React.PureComponent {
};
}
toggleNone(categorySummary) {
toggleNone(categorySummary: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
dispatch(
actions.selectCategoricalAllMetadataAction(
@@ -199,7 +212,8 @@ class Category extends React.PureComponent {
);
}
toggleAll(categorySummary) {
toggleAll(categorySummary: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField } = this.props;
dispatch(
actions.selectCategoricalAllMetadataAction(
@@ -213,12 +227,19 @@ class Category extends React.PureComponent {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isExpanded' does not exist on type 'Read... Remove this comment to see the full error message
isExpanded,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoricalSelection' does not exist on ... Remove this comment to see the full error message
categoricalSelection,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on type 'Rea... Remove this comment to see the full error message
crossfilter,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colors' does not exist on type 'Readonly... Remove this comment to see the full error message
colors,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
annoMatrix,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type 'Read... Remove this comment to see the full error message
isUserAnno,
} = this.props;
@@ -250,18 +271,26 @@ class Category extends React.PureComponent {
<Async.Fulfilled persist>
{(asyncProps) => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'u... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'unkn... Remove this comment to see the full error message
colorTable,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'unkno... Remove this comment to see the full error message
colorData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'un... Remove this comment to see the full error message
categoryData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
categorySummary,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
isColorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleCategoryToggleAllClick' does not e... Remove this comment to see the full error message
handleCategoryToggleAllClick,
} = asyncProps;
const isTruncated = !!categorySummary?.isTruncated;
const selectionState = this.getSelectionState(categorySummary);
return (
<CategoryRender
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; checkboxID: string; is... Remove this comment to see the full error message
metadataField={metadataField}
checkboxID={checkboxID}
isUserAnno={isUserAnno}
@@ -290,7 +319,7 @@ class Category extends React.PureComponent {
export default Category;
const StillLoading = ({ metadataField, checkboxID }) => {
const StillLoading = ({ metadataField, checkboxID }: any) => {
/*
We are still loading this category, so render a "busy" signal.
*/
@@ -341,7 +370,7 @@ const StillLoading = ({ metadataField, checkboxID }) => {
);
};
const ErrorLoading = ({ metadataField, error }) => {
const ErrorLoading = ({ metadataField, error }: any) => {
console.error(error); // log error to console as it is unexpected.
return (
<div style={{ marginBottom: 10, marginTop: 4 }}>
@@ -361,16 +390,27 @@ const ErrorLoading = ({ metadataField, error }) => {
const CategoryHeader = React.memo(
({
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'checkboxID' does not exist on type '{ ch... Remove this comment to see the full error message
checkboxID,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type '{ ch... Remove this comment to see the full error message
isUserAnno,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isTruncated' does not exist on type '{ c... Remove this comment to see the full error message
isTruncated,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
isColorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isExpanded' does not exist on type '{ ch... Remove this comment to see the full error message
isExpanded,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionState' does not exist on type '... Remove this comment to see the full error message
selectionState,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onColorChangeClick' does not exist on ty... Remove this comment to see the full error message
onColorChangeClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuClick' does not exist on t... Remove this comment to see the full error message
onCategoryMenuClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuKeyPress' does not exist o... Remove this comment to see the full error message
onCategoryMenuKeyPress,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryToggleAllClick' does not exist... Remove this comment to see the full error message
onCategoryToggleAllClick,
}) => {
/*
@@ -379,6 +419,7 @@ const CategoryHeader = React.memo(
const checkboxRef = useRef(null);
useEffect(() => {
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
checkboxRef.current.indeterminate = selectionState === "some";
}, [checkboxRef.current, selectionState]);
@@ -408,6 +449,7 @@ const CategoryHeader = React.memo(
</label>
<span
role="menuitem"
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
tabIndex="0"
data-testclass="category-expand"
data-testid={`${metadataField}:category-expand`}
@@ -423,6 +465,7 @@ const CategoryHeader = React.memo(
maxWidth: isUserAnno ? LABEL_WIDTH_ANNO : LABEL_WIDTH,
}}
data-testid={`${metadataField}:category-label`}
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
tabIndex="-1"
>
{metadataField}
@@ -441,10 +484,13 @@ const CategoryHeader = React.memo(
)}
</span>
</div>
{<AnnoDialogEditCategoryName metadataField={metadataField} />}
{<AnnoDialogAddLabel metadataField={metadataField} />}
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; }' is not assignable t... Remove this comment to see the full error message */}
<AnnoDialogEditCategoryName metadataField={metadataField} />
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; }' is not assignable t... Remove this comment to see the full error message */}
<AnnoDialogAddLabel metadataField={metadataField} />
<div>
<AnnoMenu
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; isUserAnno: any; creat... Remove this comment to see the full error message
metadataField={metadataField}
isUserAnno={isUserAnno}
createText="Add a new label to this category"
@@ -484,21 +530,37 @@ const CategoryHeader = React.memo(
const CategoryRender = React.memo(
({
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'checkboxID' does not exist on type '{ ch... Remove this comment to see the full error message
checkboxID,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type '{ ch... Remove this comment to see the full error message
isUserAnno,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isTruncated' does not exist on type '{ c... Remove this comment to see the full error message
isTruncated,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
isColorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isExpanded' does not exist on type '{ ch... Remove this comment to see the full error message
isExpanded,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionState' does not exist on type '... Remove this comment to see the full error message
selectionState,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type '{ ... Remove this comment to see the full error message
categoryData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
categorySummary,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type '{... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type '{ chi... Remove this comment to see the full error message
colorData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type '{ ch... Remove this comment to see the full error message
colorTable,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onColorChangeClick' does not exist on ty... Remove this comment to see the full error message
onColorChangeClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuClick' does not exist on t... Remove this comment to see the full error message
onCategoryMenuClick,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuKeyPress' does not exist o... Remove this comment to see the full error message
onCategoryMenuKeyPress,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryToggleAllClick' does not exist... Remove this comment to see the full error message
onCategoryToggleAllClick,
}) => {
/*
@@ -533,6 +595,7 @@ const CategoryRender = React.memo(
}}
>
<CategoryHeader
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; checkboxID: any; isUse... Remove this comment to see the full error message
metadataField={metadataField}
checkboxID={checkboxID}
isUserAnno={isUserAnno}
@@ -551,6 +614,7 @@ const CategoryRender = React.memo(
/* values*/
isExpanded ? (
<CategoryValueList
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isUserAnno: any; metadataField: any; categ... Remove this comment to see the full error message
isUserAnno={isUserAnno}
metadataField={metadataField}
categoryData={categoryData}
@@ -574,12 +638,19 @@ const CategoryRender = React.memo(
const CategoryValueList = React.memo(
({
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type '{ ch... Remove this comment to see the full error message
isUserAnno,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type '{ ... Remove this comment to see the full error message
categoryData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
categorySummary,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type '{... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type '{ chi... Remove this comment to see the full error message
colorData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type '{ ch... Remove this comment to see the full error message
colorTable,
}) => {
const tuples = [...categorySummary.categoryValueIndices];
@@ -594,6 +665,7 @@ const CategoryValueList = React.memo(
{tuples.map(([value, index]) => (
<Value
key={value}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: any; isUserAnno: any; metadataField: ... Remove this comment to see the full error message
isUserAnno={isUserAnno}
metadataField={metadataField}
categoryIndex={index}
@@ -615,6 +687,7 @@ const CategoryValueList = React.memo(
{tuples.map(([value, index]) => (
<Flipped key={value} flipId={value}>
<Value
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isUserAnno: any; metadataField: any; categ... Remove this comment to see the full error message
isUserAnno={isUserAnno}
metadataField={metadataField}
categoryIndex={index}
client/src/components/categorical/categoryContext.js → client/src/components/categorical/categoryContext.ts
View File
client/src/components/categorical/index.js → client/src/components/categorical/index.tsx
+37 -32
View File
@@ -10,13 +10,17 @@ import LabelInput from "../labelInput";
import { labelPrompt } from "./labelUtil";
import actions from "../../actions";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
schema: state.annoMatrix?.schema,
userInfo: state.userInfo,
writableCategoriesEnabled:
(state as any).config?.parameters?.annotations ?? false,
schema: (state as any).annoMatrix?.schema,
userInfo: (state as any).userInfo,
}))
class Categories extends React.Component {
constructor(props) {
class Categories extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
createAnnoModeActive: false,
@@ -26,7 +30,8 @@ class Categories extends React.Component {
};
}
handleCreateUserAnno = (e) => {
handleCreateUserAnno = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
const { newCategoryText, categoryToDuplicate } = this.state;
dispatch(
@@ -55,50 +60,48 @@ class Categories extends React.Component {
});
};
handleModalDuplicateCategorySelection = (d) => {
handleModalDuplicateCategorySelection = (d: any) => {
this.setState({ categoryToDuplicate: d });
};
categoryNameError = (name) => {
categoryNameError = (name: any) => {
/*
return false if this is a LEGAL/acceptable category name or NULL/empty string,
or return an error type.
*/
return false if this is a LEGAL/acceptable category name or NULL/empty string,
or return an error type.
*/
/* allow empty string */
if (name === "") return false;
/*
test for uniqueness against *all* annotation names, not just the subset
we render as categorical.
*/
test for uniqueness against *all* annotation names, not just the subset
we render as categorical.
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
const { schema } = this.props;
const allCategoryNames = schema.annotations.obs.columns.map((c) => c.name);
const allCategoryNames = schema.annotations.obs.columns.map(
(c: any) => c.name
);
/* check category name syntax */
const error = AnnotationsHelpers.annotationNameIsErroneous(name);
if (error) {
return error;
}
/* disallow duplicates */
if (allCategoryNames.indexOf(name) !== -1) {
return "duplicate";
}
/* otherwise, no error */
return false;
};
handleChange = (name) => {
handleChange = (name: any) => {
this.setState({ newCategoryText: name });
};
handleSelect = (name) => {
handleSelect = (name: any) => {
this.setState({ newCategoryText: name });
};
instruction = (name) => {
instruction = (name: any) => {
return labelPrompt(
this.categoryNameError(name),
"New, unique category name",
@@ -106,7 +109,7 @@ class Categories extends React.Component {
);
};
onExpansionChange = (catName) => {
onExpansionChange = (catName: any) => {
const { expandedCats } = this.state;
if (expandedCats.has(catName)) {
const _expandedCats = new Set(expandedCats);
@@ -126,16 +129,13 @@ class Categories extends React.Component {
newCategoryText,
expandedCats,
} = this.state;
const {
writableCategoriesEnabled,
schema,
userInfo,
} = this.props;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'writableCategoriesEnabled' does not exis... Remove this comment to see the full error message
const { writableCategoriesEnabled, schema, userInfo } = this.props;
/* all names, sorted in display order. Will be rendered in this order */
// @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 1.
const allCategoryNames = ControlsHelpers.selectableCategoryNames(
schema
).sort();
return (
<div
style={{
@@ -143,6 +143,7 @@ class Categories extends React.Component {
}}
>
<AnnoDialog
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; title: string; instruction:... Remove this comment to see the full error message
isActive={createAnnoModeActive}
title="Create new category"
instruction={this.instruction(newCategoryText)}
@@ -155,6 +156,7 @@ class Categories extends React.Component {
handleCancel={this.handleDisableAnnoMode}
annoInput={
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ labelSuggestions: null; onChange: (name: a... Remove this comment to see the full error message
labelSuggestions={null}
onChange={this.handleChange}
onSelect={this.handleSelect}
@@ -169,6 +171,7 @@ class Categories extends React.Component {
}
annoSelect={
<AnnoSelect
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ handleModalDuplicateCategorySelection: (d:... Remove this comment to see the full error message
handleModalDuplicateCategorySelection={
this.handleModalDuplicateCategorySelection
}
@@ -209,12 +212,13 @@ class Categories extends React.Component {
{/* READ ONLY CATEGORICAL FIELDS */}
{/* this is duplicative but flat, could be abstracted */}
{allCategoryNames.map((catName) =>
{allCategoryNames.map((catName: any) =>
!schema.annotations.obsByName[catName].writable &&
(schema.annotations.obsByName[catName].categories?.length > 1 ||
!schema.annotations.obsByName[catName].categories) ? (
<Category
key={catName}
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
metadataField={catName}
onExpansionChange={this.onExpansionChange}
isExpanded={expandedCats.has(catName)}
@@ -223,10 +227,11 @@ class Categories extends React.Component {
) : null
)}
{/* WRITEABLE FIELDS */}
{allCategoryNames.map((catName) =>
{allCategoryNames.map((catName: any) =>
schema.annotations.obsByName[catName].writable ? (
<Category
key={catName}
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
metadataField={catName}
onExpansionChange={this.onExpansionChange}
isExpanded={expandedCats.has(catName)}
client/src/components/categorical/labelUtil.js → client/src/components/categorical/labelUtil.tsx
+3 -2
View File
@@ -3,7 +3,7 @@ import { Colors } from "@blueprintjs/core";
import { AnnotationsHelpers } from "../../util/stateManager";
export function isLabelErroneous(label, metadataField, schema) {
export function isLabelErroneous(label: any, metadataField: any, schema: any) {
/*
return false if this is a LEGAL/acceptable category name or NULL/empty string,
or return an error type.
@@ -35,9 +35,10 @@ const errorMessageMap = {
"multi-space-run": "Multiple consecutive spaces not allowed",
};
export function labelPrompt(err, prolog, epilog) {
export function labelPrompt(err: any, prolog: any, epilog: any) {
let errPrompt = null;
if (err) {
// @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
let errMsg = errorMessageMap[err] ?? "error";
errMsg = errMsg[0].toLowerCase() + errMsg.slice(1);
errPrompt = (
client/src/components/categorical/value/index.js → client/src/components/categorical/value/index.tsx
+96 -36
View File
@@ -13,6 +13,7 @@ import {
Position,
} from "@blueprintjs/core";
import * as globals from "../../../globals";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../categorical.css' or its cor... Remove this comment to see the full error message
import styles from "../categorical.css";
import AnnoDialog from "../../annoDialog";
import LabelInput from "../../labelInput";
@@ -29,15 +30,20 @@ const STACKED_BAR_HEIGHT = 11;
const STACKED_BAR_WIDTH = 100;
/* this is defined outside of the class so we can use it in connect() */
function _currentLabelAsString(ownProps) {
function _currentLabelAsString(ownProps: any) {
const { label } = ownProps;
// when called as a function, the String() constructor performs type conversion,
// and returns a primitive string.
return String(label);
}
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state, ownProps) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'pointDilation' does not exist on type 'D... Remove this comment to see the full error message
const { pointDilation, categoricalSelection } = state;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
const { metadataField, categorySummary, categoryIndex } = ownProps;
const isDilated =
pointDilation.metadataField === metadataField &&
@@ -48,27 +54,28 @@ function _currentLabelAsString(ownProps) {
const isSelected = category.get(label) ?? true;
return {
annotations: state.annotations,
schema: state.annoMatrix?.schema,
annotations: (state as any).annotations,
schema: (state as any).annoMatrix?.schema,
isDilated,
isSelected,
label,
};
})
class CategoryValue extends React.Component {
constructor(props) {
class CategoryValue extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
editedLabelText: this.currentLabelAsString(),
};
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: {}) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
const { metadataField, categoryIndex, categorySummary } = this.props;
if (
prevProps.metadataField !== metadataField ||
prevProps.categoryIndex !== categoryIndex ||
prevProps.categorySummary !== categorySummary
(prevProps as any).metadataField !== metadataField ||
(prevProps as any).categoryIndex !== categoryIndex ||
(prevProps as any).categorySummary !== categorySummary
) {
// eslint-disable-next-line react/no-did-update-set-state --- adequately checked to prevent looping
this.setState({
@@ -79,22 +86,26 @@ class CategoryValue extends React.Component {
// If coloring by and this isn't the colorAccessor and it isn't being edited
get shouldRenderStackedBarOrHistogram() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
const { colorAccessor, isColorBy, annotations } = this.props;
return !!colorAccessor && !isColorBy && !annotations.isEditingLabelName;
}
handleDeleteValue = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, label } = this.props;
dispatch(actions.annotationDeleteLabelFromCategory(metadataField, label));
};
handleAddCurrentSelectionToThisLabel = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, label } = this.props;
dispatch(actions.annotationLabelCurrentSelection(metadataField, label));
};
handleEditValue = (e) => {
handleEditValue = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, label } = this.props;
const { editedLabelText } = this.state;
this.cancelEditMode();
@@ -108,7 +119,8 @@ class CategoryValue extends React.Component {
e.preventDefault();
};
handleCreateArbitraryLabel = (txt) => {
handleCreateArbitraryLabel = (txt: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, label } = this.props;
this.cancelEditMode();
dispatch(
@@ -116,17 +128,19 @@ class CategoryValue extends React.Component {
);
};
labelNameError = (name) => {
labelNameError = (name: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
const { metadataField, schema } = this.props;
if (name === this.currentLabelAsString()) return false;
return isLabelErroneous(name, metadataField, schema);
};
instruction = (label) => {
instruction = (label: any) => {
return labelPrompt(this.labelNameError(label), "New, unique label", ":");
};
activateEditLabelMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, categoryIndex, label } = this.props;
dispatch({
type: "annotation: activate edit label mode",
@@ -137,6 +151,7 @@ class CategoryValue extends React.Component {
};
cancelEditMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, categoryIndex, label } = this.props;
this.setState({
editedLabelText: this.currentLabelAsString(),
@@ -151,9 +166,13 @@ class CategoryValue extends React.Component {
toggleOff = () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
categoryIndex,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
categorySummary,
} = this.props;
const label = categorySummary.categoryValues[categoryIndex];
@@ -168,7 +187,7 @@ class CategoryValue extends React.Component {
);
};
shouldComponentUpdate = (nextProps, nextState) => {
shouldComponentUpdate = (nextProps: any, nextState: any) => {
/*
Checks to see if at least one of the following changed:
* world state
@@ -179,6 +198,7 @@ class CategoryValue extends React.Component {
If and only if true, update the component
*/
const { props, state } = this;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
const { categoryIndex, categorySummary, isSelected } = props;
const {
categoryIndex: newCategoryIndex,
@@ -191,10 +211,12 @@ class CategoryValue extends React.Component {
const labelChanged = label !== newLabel;
const valueSelectionChange = isSelected !== newIsSelected;
const colorAccessorChange = props.colorAccessor !== nextProps.colorAccessor;
const annotationsChange = props.annotations !== nextProps.annotations;
const colorAccessorChange =
(props as any).colorAccessor !== nextProps.colorAccessor;
const annotationsChange =
(props as any).annotations !== nextProps.annotations;
const editingLabel = state.editedLabelText !== nextState.editedLabelText;
const dilationChange = props.isDilated !== nextProps.isDilated;
const dilationChange = (props as any).isDilated !== nextProps.isDilated;
const count = categorySummary.categoryValueCounts[categoryIndex];
const newCount = newCategorySummary.categoryValueCounts[newCategoryIndex];
@@ -205,7 +227,7 @@ class CategoryValue extends React.Component {
// if any one changes, but only for the currently colored-by category.
const colorMightHaveChanged =
nextProps.colorAccessor === nextProps.metadataField &&
props.categorySummary !== nextProps.categorySummary;
(props as any).categorySummary !== nextProps.categorySummary;
return (
labelChanged ||
@@ -221,9 +243,13 @@ class CategoryValue extends React.Component {
toggleOn = () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
categoryIndex,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
categorySummary,
} = this.props;
const label = categorySummary.categoryValues[categoryIndex];
@@ -239,6 +265,7 @@ class CategoryValue extends React.Component {
};
handleMouseEnter = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, categoryIndex, label } = this.props;
dispatch({
type: "category value mouse hover start",
@@ -249,6 +276,7 @@ class CategoryValue extends React.Component {
};
handleMouseExit = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, metadataField, categoryIndex, label } = this.props;
dispatch({
type: "category value mouse hover end",
@@ -258,23 +286,24 @@ class CategoryValue extends React.Component {
});
};
handleTextChange = (text) => {
handleTextChange = (text: any) => {
this.setState({ editedLabelText: text });
};
handleChoice = (e) => {
handleChoice = (e: any) => {
/* Blueprint Suggest format */
this.setState({ editedLabelText: e.target });
};
createHistogramBins = (
metadataField,
categoryData,
colorAccessor,
colorData,
categoryValue,
width,
height
metadataField: any,
categoryData: any,
// @ts-expect-error ts-migrate(6133) FIXME: 'colorAccessor' is declared but its value is never... Remove this comment to see the full error message
colorAccessor: any,
colorData: any,
categoryValue: any,
width: any,
height: any
) => {
/*
Knowing that colorScale is based off continuous data,
@@ -309,14 +338,15 @@ class CategoryValue extends React.Component {
};
createStackedGraphBins = (
metadataField,
categoryData,
colorAccessor,
colorData,
categoryValue,
colorTable,
schema,
width
metadataField: any,
categoryData: any,
colorAccessor: any,
colorData: any,
categoryValue: any,
// @ts-expect-error ts-migrate(6133) FIXME: 'colorTable' is declared but its value is never re... Remove this comment to see the full error message
colorTable: any,
schema: any,
width: any
) => {
/*
Knowing that the color scale is based off of categorical data,
@@ -357,12 +387,13 @@ class CategoryValue extends React.Component {
return _currentLabelAsString(this.props);
}
isAddCurrentSelectionDisabled(crossfilter, category, value) {
isAddCurrentSelectionDisabled(crossfilter: any, category: any, value: any) {
/*
disable "add current selection to label", if one of the following is true:
1. no cells are selected
2. all currently selected cells already have this label, on this category
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
const { categoryData } = this.props;
// 1. no cells selected?
@@ -382,12 +413,19 @@ class CategoryValue extends React.Component {
renderMiniStackedBar = () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
categoryData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
colorData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
colorTable,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
schema,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'label' does not exist on type 'Readonly<... Remove this comment to see the full error message
label,
} = this.props;
const isColorBy = metadataField === colorAccessor;
@@ -425,6 +463,7 @@ class CategoryValue extends React.Component {
domain,
occupancy,
}}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ height: number; width: number; colorTable:... Remove this comment to see the full error message
height={STACKED_BAR_HEIGHT}
width={STACKED_BAR_WIDTH}
/>
@@ -433,12 +472,19 @@ class CategoryValue extends React.Component {
renderMiniHistogram = () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
colorData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
categoryData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
colorTable,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
schema,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'label' does not exist on type 'Readonly<... Remove this comment to see the full error message
label,
} = this.props;
const colorScale = colorTable?.scale;
@@ -473,6 +519,7 @@ class CategoryValue extends React.Component {
yScale,
bins,
}}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ obsOrVarContinuousFieldDisplayName: any; d... Remove this comment to see the full error message
obsOrVarContinuousFieldDisplayName={colorAccessor}
domainLabel={label}
height={STACKED_BAR_HEIGHT}
@@ -483,15 +530,25 @@ class CategoryValue extends React.Component {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
categoryIndex,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
colorTable,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type 'Read... Remove this comment to see the full error message
isUserAnno,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annotations' does not exist on type 'Rea... Remove this comment to see the full error message
annotations,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isDilated' does not exist on type 'Reado... Remove this comment to see the full error message
isDilated,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isSelected' does not exist on type 'Read... Remove this comment to see the full error message
isSelected,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
categorySummary,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'label' does not exist on type 'Readonly<... Remove this comment to see the full error message
label,
} = this.props;
const colorScale = colorTable?.scale;
@@ -587,6 +644,7 @@ class CategoryValue extends React.Component {
<span
data-testid={`categorical-value-${metadataField}-${displayString}`}
data-testclass="categorical-value"
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
tabIndex="-1"
style={{
width: labelWidth,
@@ -612,6 +670,7 @@ class CategoryValue extends React.Component {
{editModeActive ? (
<div>
<AnnoDialog
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; inputProps: { "data-testid"... Remove this comment to see the full error message
isActive={editModeActive}
inputProps={{
"data-testid": `${metadataField}:edit-label-name-dialog`,
@@ -630,6 +689,7 @@ class CategoryValue extends React.Component {
handleCancel={this.cancelEditMode}
annoInput={
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; labelSuggestions: null; onChan... Remove this comment to see the full error message
label={editedLabelText}
labelSuggestions={null}
onChange={this.handleTextChange}
client/src/components/categorical/value/occupancy.js → client/src/components/categorical/value/occupancy.tsx
+24 -30
View File
@@ -8,64 +8,59 @@ import {
Position,
} from "@blueprintjs/core";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
schema: state.annoMatrix?.schema,
schema: (state as any).annoMatrix?.schema,
}))
class Occupancy extends React.PureComponent {
canvas: any;
_WIDTH = 100;
_HEIGHT = 11;
createHistogram = () => {
/*
Knowing that colorScale is based off continous data,
createHistogram fetches the continous data in relation to the cells releveant to the catagory value.
It then seperates that data into 50 bins for drawing the mini-histogram
*/
Knowing that colorScale is based off continous data,
createHistogram fetches the continous data in relation to the cells releveant to the catagory value.
It then seperates that data into 50 bins for drawing the mini-histogram
*/
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
categoryData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
colorData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryValue' does not exist on type 'R... Remove this comment to see the full error message
categoryValue,
} = this.props;
if (!this.canvas) return;
const groupBy = categoryData.col(metadataField);
const col = colorData.icol(0);
const range = col.summarize();
const histogramMap = col.histogram(
50,
[range.min, range.max],
groupBy
); /* Because the signature changes we really need different names for histogram to differentiate signatures */
const bins = histogramMap.has(categoryValue)
? histogramMap.get(categoryValue)
: new Array(50).fill(0);
const xScale = d3
.scaleLinear()
.domain([0, bins.length])
.range([0, this._WIDTH]);
const largestBin = Math.max(...bins);
const yScale = d3
.scaleLinear()
.domain([0, largestBin])
.range([0, this._HEIGHT]);
const ctx = this.canvas.getContext("2d");
ctx.fillStyle = "#000";
let x;
let y;
const rectWidth = this._WIDTH / bins.length;
for (let i = 0, { length } = bins; i < length; i += 1) {
x = xScale(i);
y = yScale(bins[i]);
@@ -75,32 +70,34 @@ class Occupancy extends React.PureComponent {
createOccupancyStack = () => {
/*
Knowing that the color scale is based off of catagorical data,
createOccupancyStack obtains a map showing the number if cells per colored value
Using the colorScale a stack of colored bars is drawn representing the map
*/
Knowing that the color scale is based off of catagorical data,
createOccupancyStack obtains a map showing the number if cells per colored value
Using the colorScale a stack of colored bars is drawn representing the map
*/
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
metadataField,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
categoryData,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryValue' does not exist on type 'R... Remove this comment to see the full error message
categoryValue,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
colorTable,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
schema,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
colorData,
} = this.props;
const { scale: colorScale } = colorTable;
const ctx = this.canvas?.getContext("2d");
if (!ctx) return;
const groupBy = categoryData.col(metadataField);
const occupancyMap = colorData
.col(colorAccessor)
.histogramCategorical(groupBy);
const occupancy = occupancyMap.get(categoryValue);
if (occupancy && occupancy.size > 0) {
// not all categories have occupancy, so occupancy may be undefined.
const x = d3
@@ -110,15 +107,12 @@ class Occupancy extends React.PureComponent {
.range([0, this._WIDTH]);
const categories =
schema.annotations.obsByName[colorAccessor]?.categories;
let currentOffset = 0;
const dfColumn = colorData.col(colorAccessor);
const categoryValues = dfColumn.summarizeCategorical().categories;
let o;
let scaledValue;
let value;
for (let i = 0, { length } = categoryValues; i < length; i += 1) {
value = categoryValues[i];
o = occupancy.get(value);
@@ -133,11 +127,11 @@ class Occupancy extends React.PureComponent {
};
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
const { colorAccessor, categoryValue, colorByIsCategorical } = this.props;
const { canvas } = this;
if (canvas)
canvas.getContext("2d").clearRect(0, 0, this._WIDTH, this._HEIGHT);
return (
<Popover
interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
client/src/components/continuous/continuous.js
-32
View File
@@ -1,32 +0,0 @@
/* rc slider https://www.npmjs.com/package/rc-slider */
import React from "react";
import { connect } from "react-redux";
import HistogramBrush from "../brushableHistogram";
@connect((state) => ({
schema: state.annoMatrix?.schema,
}))
class Continuous extends React.PureComponent {
render() {
/* initial value for iterator to simulate index, ranges is an object */
const { schema } = this.props;
if (!schema) return null;
const obsIndex = schema.annotations.obs.index;
const allContinuousNames = schema.annotations.obs.columns
.filter((col) => col.type === "int32" || col.type === "float32")
.filter((col) => col.name !== obsIndex)
.filter((col) => !col.writable) // skip user annotations - they will be treated as categorical
.map((col) => col.name);
return (
<div>
{allContinuousNames.map((key, zebra) => (
<HistogramBrush key={key} field={key} isObs zebra={zebra % 2 === 0} />
))}
</div>
);
}
}
export default Continuous;
client/src/components/continuous/continuous.tsx
+34
View File
@@ -0,0 +1,34 @@
/* rc slider https://www.npmjs.com/package/rc-slider */
import React from "react";
import { connect } from "react-redux";
import HistogramBrush from "../brushableHistogram";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
schema: (state as any).annoMatrix?.schema,
}))
class Continuous extends React.PureComponent {
render() {
/* initial value for iterator to simulate index, ranges is an object */
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
const { schema } = this.props;
if (!schema) return null;
const obsIndex = schema.annotations.obs.index;
const allContinuousNames = schema.annotations.obs.columns
.filter((col: any) => col.type === "int32" || col.type === "float32")
.filter((col: any) => col.name !== obsIndex)
.filter((col: any) => !col.writable) // skip user annotations - they will be treated as categorical
.map((col: any) => col.name);
return (
<div>
{allContinuousNames.map((key: any, zebra: any) => (
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
<HistogramBrush key={key} field={key} isObs zebra={zebra % 2 === 0} />
))}
</div>
);
}
}
export default Continuous;
client/src/components/continuous/setupParallelCoordinates.js → client/src/components/continuous/setupParallelCoordinates.ts
+6 -1
View File
@@ -5,7 +5,7 @@
******************************************/
import * as d3 from "d3";
const setupParallelCoordinates = (width, height, margin) => {
const setupParallelCoordinates = (width: any, height: any, margin: any) => {
const container = d3.select("#parcoords");
const svg = container
@@ -24,10 +24,15 @@ const setupParallelCoordinates = (width, height, margin) => {
.style("margin-top", `${margin.top}px`)
.style("margin-left", `${margin.left}px`);
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
const ctx = canvas.node().getContext("2d");
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
ctx.globalCompositeOperation = "darken";
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
ctx.globalAlpha = 0.15;
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
ctx.lineWidth = 1.5;
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
ctx.scale(devicePixelRatio, devicePixelRatio);
return {
client/src/components/continuous/util.js → client/src/components/continuous/util.ts
+7 -6
View File
@@ -12,14 +12,14 @@ export const innerHeight = height - 2;
export const devicePixelRatio = window.devicePixelRatio || 1;
export const createDimensions = (data) => {
const newArr = [];
export const createDimensions = (data: any) => {
const newArr: any = [];
each(data, (value, key) => {
if (value.range) {
newArr.push({
key /* room for confusion: lodash calls this key, it's also the name of the property parallel coords code is looking for */,
type: {
within: (d, extent, dim) =>
within: (d: any, extent: any, dim: any) =>
extent[0] <= dim.scale(d) && dim.scale(d) <= extent[1],
},
scale: d3
@@ -32,16 +32,17 @@ export const createDimensions = (data) => {
return newArr;
};
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
export const yAxis = d3.axisLeft();
export const brushstart = () => {
d3.event.sourceEvent.stopPropagation();
(d3 as any).event.sourceEvent.stopPropagation();
};
// Unused.
// export const d3_functor = v => (typeof v === "function" ? v : () => v);
export const project = (d, dimensions, xscale) =>
dimensions.map((p, i) => {
export const project = (d: any, dimensions: any, xscale: any) =>
dimensions.map((p: any, i: any) => {
// check if data element has property and contains a value
if (!(p.key in d) || d[p.key] === null) return null;
client/src/components/continuousLegend/index.js → client/src/components/continuousLegend/index.tsx
+13 -11
View File
@@ -9,7 +9,7 @@ import {
} from "../../util/stateManager/colorHelpers";
// create continuous color legend
const continuous = (selectorId, colorScale, colorAccessor) => {
const continuous = (selectorId: any, colorScale: any, colorAccessor: any) => {
const legendHeight = 200;
const legendWidth = 80;
const margin = { top: 10, right: 60, bottom: 10, left: 2 };
@@ -33,6 +33,7 @@ const continuous = (selectorId, colorScale, colorAccessor) => {
we flip the color scale as well [1, 0] instead of [0, 1] */
.node();
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
const ctx = canvas.getContext("2d");
const legendScale = d3
@@ -44,6 +45,7 @@ const continuous = (selectorId, colorScale, colorAccessor) => {
]); /* we flip this to make viridis colors dark if high in the color scale */
// image data hackery based on http://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
const image = ctx.createImageData(1, legendHeight);
d3.range(legendHeight).forEach((i) => {
const c = d3.rgb(colorScale(legendScale.invert(i)));
@@ -52,6 +54,7 @@ const continuous = (selectorId, colorScale, colorAccessor) => {
image.data[4 * i + 2] = c.b;
image.data[4 * i + 3] = 255;
});
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
ctx.putImageData(image, 0, 0);
// A simpler way to do the above, but possibly slower. keep in mind the legend
@@ -105,27 +108,26 @@ const continuous = (selectorId, colorScale, colorAccessor) => {
.text(colorAccessor);
};
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annoMatrix: state.annoMatrix,
colors: state.colors,
genesets: state.genesets.genesets,
annoMatrix: (state as any).annoMatrix,
colors: (state as any).colors,
genesets: (state as any).genesets.genesets,
}))
class ContinuousLegend extends React.Component {
async componentDidUpdate(prevProps) {
async componentDidUpdate(prevProps: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix, colors, genesets } = this.props;
if (!colors || !annoMatrix) return;
if (colors !== prevProps?.colors || annoMatrix !== prevProps?.annoMatrix) {
const { schema } = annoMatrix;
const { colorMode, colorAccessor, userColors } = colors;
const colorQuery = createColorQuery(
colorMode,
colorAccessor,
schema,
genesets
);
const colorDf = colorQuery ? await annoMatrix.fetch(...colorQuery) : null;
const colorTable = createColorTable(
colorMode,
@@ -134,19 +136,19 @@ class ContinuousLegend extends React.Component {
schema,
userColors
);
const colorScale = colorTable.scale;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'range' does not exist on type '((idx: an... Remove this comment to see the full error message
const range = colorScale?.range;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'domain' does not exist on type '((idx: a... Remove this comment to see the full error message
const [domainMin, domainMax] = colorScale?.domain?.() ?? [0, 0];
/* always remove it, if it's not continuous we don't put it back. */
d3.select("#continuous_legend").selectAll("*").remove();
if (colorAccessor && colorScale && range && domainMin < domainMax) {
/* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
if (range()[0][0] !== "#") {
continuous(
"#continuous_legend",
// @ts-expect-error ts-migrate(2339) FIXME: Property 'domain' does not exist on type '((idx: a... Remove this comment to see the full error message
d3.scaleSequential(interpolateCool).domain(colorScale.domain()),
colorAccessor
);
client/src/components/embedding/index.js → client/src/components/embedding/index.tsx
+17 -11
View File
@@ -15,25 +15,30 @@ import * as globals from "../../globals";
import actions from "../../actions";
import { getDiscreteCellEmbeddingRowIndex } from "../../util/stateManager/viewStackHelpers";
type EmbeddingState = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
return {
layoutChoice: state.layoutChoice, // TODO: really should clean up naming, s/layout/embedding/g
schema: state.annoMatrix?.schema,
crossfilter: state.obsCrossfilter,
layoutChoice: (state as any).layoutChoice,
schema: (state as any).annoMatrix?.schema,
crossfilter: (state as any).obsCrossfilter,
};
})
class Embedding extends React.PureComponent {
constructor(props) {
class Embedding extends React.PureComponent<{}, EmbeddingState> {
constructor(props: {}) {
super(props);
this.state = {};
}
handleLayoutChoiceChange = (e) => {
handleLayoutChoiceChange = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch(actions.layoutChoiceAction(e.currentTarget.value));
};
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'layoutChoice' does not exist on type 'Re... Remove this comment to see the full error message
const { layoutChoice, schema, crossfilter } = this.props;
const { annoMatrix } = crossfilter;
return (
@@ -100,10 +105,11 @@ class Embedding extends React.PureComponent {
export default Embedding;
const loadAllEmbeddingCounts = async ({ annoMatrix, available }) => {
const loadAllEmbeddingCounts = async ({ annoMatrix, available }: any) => {
const embeddings = await Promise.all(
available.map((name) => annoMatrix.base().fetch("emb", name))
available.map((name: any) => annoMatrix.base().fetch("emb", name))
);
// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'name' implicitly has an 'any' type.
return available.map((name, idx) => ({
embeddingName: name,
embedding: embeddings[idx],
@@ -111,7 +117,7 @@ const loadAllEmbeddingCounts = async ({ annoMatrix, available }) => {
}));
};
const EmbeddingChoices = ({ onChange, annoMatrix, layoutChoice }) => {
const EmbeddingChoices = ({ onChange, annoMatrix, layoutChoice }: any) => {
const { available } = layoutChoice;
const { data, error, isPending } = useAsync({
promiseFn: loadAllEmbeddingCounts,
@@ -127,7 +133,7 @@ const EmbeddingChoices = ({ onChange, annoMatrix, layoutChoice }) => {
/* still loading, or errored out - just omit counts (TODO: spinner?) */
return (
<RadioGroup onChange={onChange} selectedValue={layoutChoice.current}>
{layoutChoice.available.map((name) => (
{layoutChoice.available.map((name: any) => (
<Radio label={`${name}`} value={name} key={name} />
))}
</RadioGroup>
@@ -136,7 +142,7 @@ const EmbeddingChoices = ({ onChange, annoMatrix, layoutChoice }) => {
if (data) {
return (
<RadioGroup onChange={onChange} selectedValue={layoutChoice.current}>
{data.map((summary) => {
{data.map((summary: any) => {
const { discreteCellIndex, embeddingName } = summary;
const sizeHint = `${discreteCellIndex.size()} cells`;
return (
client/src/components/framework/container.js → client/src/components/framework/container.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React from "react";
function Container(props) {
function Container(props: any) {
const { children } = props;
return (
<div
client/src/components/framework/layout.js → client/src/components/framework/layout.tsx
+2
View File
@@ -2,6 +2,7 @@ import React from "react";
import * as globals from "../../globals";
class Layout extends React.Component {
viewportRef: any;
/*
Layout - this react component contains all the layout style and logic for the application once it has loaded.
@@ -23,6 +24,7 @@ class Layout extends React.Component {
render() {
const { children } = this.props;
// @ts-expect-error ts-migrate(2488) FIXME: Type 'ReactNode' must have a '[Symbol.iterator]()'... Remove this comment to see the full error message
const [leftSidebar, renderGraph, rightSidebar] = children;
return (
<div
client/src/components/framework/logo.js → client/src/components/framework/logo.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React from "react";
import * as globals from "../../globals";
const Logo = (props) => {
const Logo = (props: any) => {
const { size } = props;
return (
<svg width={size} height={size} viewBox="0 0 48 48" fill="none">
client/src/components/framework/toasters.js → client/src/components/framework/toasters.ts
+5 -5
View File
@@ -11,20 +11,20 @@ const ToastTopCenter = Toaster.create({
/*
A "user" error - eg, bad input
*/
export const postUserErrorToast = (message) =>
export const postUserErrorToast = (message: any) =>
ToastTopCenter.show({ message, intent: Intent.WARNING });
/*
A toast the user must dismiss manually, because they need to act on its information,
ie., 8 bulk add genes out of 40 were bad. Manually see which ones and fix.
*/
export const keepAroundErrorToast = (message) =>
export const keepAroundErrorToast = (message: any) =>
ToastTopCenter.show({ message, timeout: 0, intent: Intent.WARNING });
/*
a hard network error
*/
export const postNetworkErrorToast = (message, key = undefined) =>
export const postNetworkErrorToast = (message: any, key = undefined) =>
ToastTopCenter.show(
{
message,
@@ -37,14 +37,14 @@ export const postNetworkErrorToast = (message, key = undefined) =>
/*
Async message to user
*/
export const postAsyncSuccessToast = (message) =>
export const postAsyncSuccessToast = (message: any) =>
ToastTopCenter.show({
message,
timeout: 10000,
intent: Intent.SUCCESS,
});
export const postAsyncFailureToast = (message) =>
export const postAsyncFailureToast = (message: any) =>
ToastTopCenter.show({
message,
timeout: 10000,
client/src/components/geneExpression/gene.js → client/src/components/geneExpression/gene.tsx
+25 -5
View File
@@ -9,17 +9,23 @@ import actions from "../../actions";
const MINI_HISTOGRAM_WIDTH = 110;
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state, ownProps) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'gene' does not exist on type '{}'.
const { gene } = ownProps;
return {
isColorAccessor: state.colors.colorAccessor === gene,
isScatterplotXXaccessor: state.controls.scatterplotXXaccessor === gene,
isScatterplotYYaccessor: state.controls.scatterplotYYaccessor === gene,
isColorAccessor: (state as any).colors.colorAccessor === gene,
isScatterplotXXaccessor:
(state as any).controls.scatterplotXXaccessor === gene,
isScatterplotYYaccessor:
(state as any).controls.scatterplotYYaccessor === gene,
};
})
class Gene extends React.Component {
constructor(props) {
class Gene extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
geneIsExpanded: false,
@@ -27,6 +33,7 @@ class Gene extends React.Component {
}
onColorChangeClick = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, gene } = this.props;
dispatch(actions.requestSingleGeneExpressionCountsForColoringPOST(gene));
};
@@ -37,6 +44,7 @@ class Gene extends React.Component {
};
handleSetGeneAsScatterplotX = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, gene } = this.props;
dispatch({
type: "set scatterplot x",
@@ -45,6 +53,7 @@ class Gene extends React.Component {
};
handleSetGeneAsScatterplotY = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, gene } = this.props;
dispatch({
type: "set scatterplot y",
@@ -53,18 +62,26 @@ class Gene extends React.Component {
};
handleDeleteGeneFromSet = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, gene, geneset } = this.props;
dispatch(actions.genesetDeleteGenes(geneset, [gene]));
};
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'gene' does not exist on type 'Readonly<{... Remove this comment to see the full error message
gene,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'geneDescription' does not exist on type ... Remove this comment to see the full error message
geneDescription,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
isColorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotXXaccessor' does not exist ... Remove this comment to see the full error message
isScatterplotXXaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotYYaccessor' does not exist ... Remove this comment to see the full error message
isScatterplotYYaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'quickGene' does not exist on type 'Reado... Remove this comment to see the full error message
quickGene,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'removeGene' does not exist on type 'Read... Remove this comment to see the full error message
removeGene,
} = this.props;
const { geneIsExpanded } = this.state;
@@ -84,6 +101,7 @@ class Gene extends React.Component {
>
<div
role="menuitem"
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
tabIndex="0"
data-testclass="gene-expand"
data-testid={`${gene}:gene-expand`}
@@ -124,6 +142,7 @@ class Gene extends React.Component {
</div>
{!geneIsExpanded ? (
<HistogramBrush
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
isUserDefined
field={gene}
mini
@@ -188,6 +207,7 @@ class Gene extends React.Component {
/>
</div>
</div>
{/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
{geneIsExpanded && <HistogramBrush isUserDefined field={gene} />}
</div>
);
client/src/components/geneExpression/geneSet.js → client/src/components/geneExpression/geneSet.tsx
+11 -2
View File
@@ -9,8 +9,10 @@ import HistogramBrush from "../brushableHistogram";
import { diffexpPopNamePrefix1, diffexpPopNamePrefix2 } from "../../globals";
class GeneSet extends React.Component {
constructor(props) {
type State = any;
class GeneSet extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
isOpen: false,
@@ -23,6 +25,7 @@ class GeneSet extends React.Component {
};
renderGenes() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'setName' does not exist on type 'Readonl... Remove this comment to see the full error message
const { setName, setGenes } = this.props;
const setGenesNames = [...setGenes.keys()];
return (
@@ -32,6 +35,7 @@ class GeneSet extends React.Component {
return (
<Gene
key={gene}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: any; gene: any; geneDescription: any;... Remove this comment to see the full error message
gene={gene}
geneDescription={geneDescription}
geneset={setName}
@@ -43,6 +47,7 @@ class GeneSet extends React.Component {
}
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'setName' does not exist on type 'Readonl... Remove this comment to see the full error message
const { setName, genesetDescription, setGenes } = this.props;
const { isOpen } = this.state;
const genesetNameLengthVisible = 150; /* this magic number determines how much of a long geneset name we see */
@@ -65,6 +70,7 @@ class GeneSet extends React.Component {
>
<span
role="menuitem"
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
tabIndex="0"
data-testclass={testClass}
data-testid={`${setName}:geneset-expand`}
@@ -104,6 +110,7 @@ class GeneSet extends React.Component {
)}
</span>
<div>
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ isOpen: any; genesetsEditable: true; genes... Remove this comment to see the full error message */}
<GenesetMenus isOpen={isOpen} genesetsEditable geneset={setName} />
</div>
</div>
@@ -117,6 +124,7 @@ class GeneSet extends React.Component {
</div>
{isOpen && !genesetIsEmpty && (
<HistogramBrush
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
isGeneSetSummary
field={setName}
setGenes={setGenes}
@@ -124,6 +132,7 @@ class GeneSet extends React.Component {
)}
{isOpen && !genesetIsEmpty && this.renderGenes()}
<EditGenesetNameDialogue
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ parentGeneset: any; parentGenesetDescripti... Remove this comment to see the full error message
parentGeneset={setName}
parentGenesetDescription={genesetDescription}
/>
client/src/components/geneExpression/index.js → client/src/components/geneExpression/index.tsx
+12 -5
View File
@@ -7,25 +7,30 @@ import GeneSet from "./geneSet";
import QuickGene from "./quickGene";
import CreateGenesetDialogue from "./menus/createGenesetDialogue";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
return {
genesets: state.genesets.genesets,
genesets: (state as any).genesets.genesets,
};
})
class GeneExpression extends React.Component {
constructor(props) {
class GeneExpression extends React.Component<{}, State> {
constructor(props: {}) {
super(props);
this.state = { geneSetsExpanded: true };
}
renderGeneSets = () => {
const sets = [];
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Readon... Remove this comment to see the full error message
const { genesets } = this.props;
for (const [name, geneset] of genesets) {
sets.push(
<GeneSet
key={name}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: any; setGenes: any; setName: any; gen... Remove this comment to see the full error message
setGenes={geneset.genes}
setName={name}
genesetDescription={geneset.genesetDescription}
@@ -36,18 +41,19 @@ class GeneExpression extends React.Component {
};
handleActivateCreateGenesetMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
const { geneSetsExpanded } = this.state;
dispatch({ type: "geneset: activate add new geneset mode" });
if (!geneSetsExpanded) {
this.setState((state) => {
this.setState((state: any) => {
return { ...state, geneSetsExpanded: true };
});
}
};
handleExpandGeneSets = () => {
this.setState((state) => {
this.setState((state: any) => {
return { ...state, geneSetsExpanded: !state.geneSetsExpanded };
});
};
@@ -67,6 +73,7 @@ class GeneExpression extends React.Component {
>
<H4
role="menuitem"
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
tabIndex="0"
data-testclass="geneset-heading-expand"
onKeyPress={this.handleExpandGeneSets}
client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js → client/src/components/geneExpression/menus/addGeneToGenesetDialogue.tsx
+14 -11
View File
@@ -5,11 +5,14 @@ import LabelInput from "../../labelInput";
import parseBulkGeneString from "../../../util/parseBulkGeneString";
import actions from "../../../actions";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
genesetsUI: state.genesetsUI,
genesetsUI: (state as any).genesetsUI,
}))
class AddGeneToGenesetDialogue extends React.PureComponent {
constructor(props) {
class AddGeneToGenesetDialogue extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
genesToAdd: "",
@@ -17,26 +20,24 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
}
disableAddGeneMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({
type: "geneset: disable add new genes mode",
});
};
handleAddGeneToGeneSet = (e) => {
handleAddGeneToGeneSet = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'geneset' does not exist on type 'Readonl... Remove this comment to see the full error message
const { geneset, dispatch } = this.props;
const { genesToAdd } = this.state;
const genesTmpHardcodedFormat = [];
const genesTmpHardcodedFormat: any = [];
const genesArrayFromString = parseBulkGeneString(genesToAdd);
genesArrayFromString.forEach((_gene) => {
genesTmpHardcodedFormat.push({
geneSymbol: _gene,
});
});
dispatch(actions.genesetAddGenes(geneset, genesTmpHardcodedFormat));
dispatch({
type: "geneset: disable add new genes mode",
@@ -44,17 +45,18 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
if (e) e.preventDefault();
};
handleChange = (e) => {
handleChange = (e: any) => {
this.setState({ genesToAdd: e });
};
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'geneset' does not exist on type 'Readonl... Remove this comment to see the full error message
const { geneset, genesetsUI } = this.props;
const { genesToAdd } = this.state;
return (
<>
<AnnoDialog
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
isActive={genesetsUI.isAddingGenesToGeneset === geneset}
inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
primaryButtonProps={{
@@ -68,6 +70,7 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
validationError={false}
annoInput={
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
onChange={this.handleChange}
inputProps={{
"data-testid": "add-genes",
client/src/components/geneExpression/menus/addGenes.js → client/src/components/geneExpression/menus/addGenes.tsx
+23 -14
View File
@@ -20,7 +20,7 @@ import {
import { memoize } from "../../../util/dataframe/util";
import parseBulkGeneString from "../../../util/parseBulkGeneString";
const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
const renderGene = (fuzzySortResult: any, { handleClick, modifiers }: any) => {
if (!modifiers.matchesPredicate) {
return null;
}
@@ -33,8 +33,7 @@ const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
disabled={modifiers.disabled}
data-testid={`suggest-menu-item-${geneName}`}
key={geneName}
onClick={(g) =>
/* this fires when user clicks a menu item */
onClick={(g: any /* this fires when user clicks a menu item */) =>
handleClick(g)
}
text={geneName}
@@ -42,22 +41,25 @@ const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
);
};
const filterGenes = (query, genes) =>
const filterGenes = (query: any, genes: any) =>
/* fires on load, once, and then for each character typed into the input */
fuzzysort.go(query, genes, {
limit: 5,
threshold: -10000, // don't return bad results
});
type AddGenesState = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
return {
annoMatrix: state.annoMatrix,
userDefinedGenes: state.controls.userDefinedGenes,
userDefinedGenesLoading: state.controls.userDefinedGenesLoading,
annoMatrix: (state as any).annoMatrix,
userDefinedGenes: (state as any).controls.userDefinedGenes,
userDefinedGenesLoading: (state as any).controls.userDefinedGenesLoading,
};
})
class AddGenes extends React.Component {
constructor(props) {
class AddGenes extends React.Component<{}, AddGenesState> {
constructor(props: {}) {
super(props);
this.state = {
bulkAdd: "",
@@ -69,14 +71,16 @@ class AddGenes extends React.Component {
}
componentDidMount() {
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
this.updateState();
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: {}) {
this.updateState(prevProps);
}
handleClick(g) {
handleClick(g: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, userDefinedGenes } = this.props;
const { geneNames } = this.state;
if (!g) return;
@@ -96,7 +100,7 @@ class AddGenes extends React.Component {
}
}
_genesToUpper = (listGenes) => {
_genesToUpper = (listGenes: any) => {
// Has to be a Map to preserve index
const upperGenes = new Map();
for (let i = 0, { length } = listGenes; i < length; i += 1) {
@@ -107,9 +111,10 @@ class AddGenes extends React.Component {
};
// eslint-disable-next-line react/sort-comp -- memo requires a defined _genesToUpper
_memoGenesToUpper = memoize(this._genesToUpper, (arr) => arr);
_memoGenesToUpper = memoize(this._genesToUpper, (arr: any) => arr);
handleBulkAddClick = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, userDefinedGenes } = this.props;
const { bulkAdd, geneNames } = this.state;
@@ -159,7 +164,8 @@ class AddGenes extends React.Component {
return undefined;
};
async updateState(prevProps) {
async updateState(prevProps: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix } = this.props;
if (!annoMatrix) return;
if (annoMatrix !== prevProps?.annoMatrix) {
@@ -210,6 +216,7 @@ class AddGenes extends React.Component {
}
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'userDefinedGenesLoading' does not exist ... Remove this comment to see the full error message
const { userDefinedGenesLoading } = this.props;
const { tab, bulkAdd, activeItem, status, geneNames } = this.state;
@@ -265,10 +272,12 @@ class AddGenes extends React.Component {
this.handleClick(g);
}}
initialContent={<MenuItem disabled text="Enter a gene…" />}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ "data-testid": string; }' is not assignabl... Remove this comment to see the full error message
inputProps={{ "data-testid": "gene-search" }}
inputValueRenderer={() => {
return "";
}}
// @ts-expect-error ts-migrate(2322) FIXME: Type '(query: any, genes: any) => Fuzzysort.Result... Remove this comment to see the full error message
itemListPredicate={filterGenes}
onActiveItemChange={(item) => this.setState({ activeItem: item })}
itemRenderer={renderGene}
client/src/components/geneExpression/menus/createGenesetDialogue.js → client/src/components/geneExpression/menus/createGenesetDialogue.tsx
+25 -21
View File
@@ -7,15 +7,18 @@ import { Tooltip2 } from "@blueprintjs/popover2";
import LabelInput from "../../labelInput";
import actions from "../../../actions";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annotations: state.annotations,
schema: state.annoMatrix?.schema,
obsCrossfilter: state.obsCrossfilter,
genesets: state.genesets.genesets,
genesetsUI: state.genesetsUI,
annotations: (state as any).annotations,
schema: (state as any).annoMatrix?.schema,
obsCrossfilter: (state as any).obsCrossfilter,
genesets: (state as any).genesets.genesets,
genesetsUI: (state as any).genesetsUI,
}))
class CreateGenesetDialogue extends React.PureComponent {
constructor(props) {
class CreateGenesetDialogue extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
genesetName: "",
@@ -24,7 +27,8 @@ class CreateGenesetDialogue extends React.PureComponent {
};
}
disableCreateGenesetMode = (e) => {
disableCreateGenesetMode = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
this.setState({
genesetName: "",
@@ -38,33 +42,30 @@ class CreateGenesetDialogue extends React.PureComponent {
if (e) e.preventDefault();
};
createGeneset = (e) => {
createGeneset = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
const {
genesetName,
genesToPopulateGeneset,
genesetDescription,
} = this.state;
dispatch({
type: "geneset: create",
genesetName: genesetName.trim(),
genesetDescription,
});
if (genesToPopulateGeneset) {
const genesTmpHardcodedFormat = [];
const genesTmpHardcodedFormat: any = [];
const genesArrayFromString = pull(
uniq(genesToPopulateGeneset.split(/[ ,]+/)),
""
);
genesArrayFromString.forEach((_gene) => {
genesTmpHardcodedFormat.push({
geneSymbol: _gene,
});
});
dispatch(actions.genesetAddGenes(genesetName, genesTmpHardcodedFormat));
}
dispatch({
@@ -81,34 +82,34 @@ class CreateGenesetDialogue extends React.PureComponent {
return false;
};
handleChange = (e) => {
handleChange = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Readon... Remove this comment to see the full error message
const { genesets } = this.props;
this.setState({ genesetName: e });
this.validate(e, genesets);
};
handleGenesetInputChange = (e) => {
handleGenesetInputChange = (e: any) => {
this.setState({ genesToPopulateGeneset: e });
};
handleDescriptionInputChange = (e) => {
handleDescriptionInputChange = (e: any) => {
this.setState({ genesetDescription: e });
};
instruction = (genesetName, genesets) => {
instruction = (genesetName: any, genesets: any) => {
return genesets.has(genesetName)
? "Gene set name must be unique."
: "New, unique gene set name";
};
validate = (genesetName, genesets) => {
validate = (genesetName: any, genesets: any) => {
if (genesets.has(genesetName)) {
this.setState({
nameErrorMessage: "There is already a geneset with that name",
});
return false;
}
if (
genesetName.length > 1 &&
// eslint-disable-next-line no-control-regex -- unicode 0-31 127-65535
@@ -128,8 +129,8 @@ class CreateGenesetDialogue extends React.PureComponent {
render() {
const { genesetName, nameErrorMessage } = this.state;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesetsUI' does not exist on type 'Read... Remove this comment to see the full error message
const { genesetsUI, genesets } = this.props;
return (
<>
<Dialog
@@ -147,6 +148,7 @@ class CreateGenesetDialogue extends React.PureComponent {
<div style={{ marginBottom: 20 }}>
<p>{this.instruction(genesetName, genesets)}</p>
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
onChange={this.handleChange}
inputProps={{
"data-testid": "create-geneset-input",
@@ -171,6 +173,7 @@ class CreateGenesetDialogue extends React.PureComponent {
gene set
</p>
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
onChange={this.handleDescriptionInputChange}
inputProps={{
"data-testid": "add-geneset-description",
@@ -186,6 +189,7 @@ class CreateGenesetDialogue extends React.PureComponent {
gene set
</p>
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
onChange={this.handleGenesetInputChange}
inputProps={{
"data-testid": "add-genes",
client/src/components/geneExpression/menus/editGenesetNameDialogue.js → client/src/components/geneExpression/menus/editGenesetNameDialogue.tsx
+26 -14
View File
@@ -3,23 +3,29 @@ import { connect } from "react-redux";
import AnnoDialog from "../../annoDialog";
import LabelInput from "../../labelInput";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annotations: state.annotations,
schema: state.annoMatrix?.schema,
obsCrossfilter: state.obsCrossfilter,
genesetsUI: state.genesetsUI,
genesets: state.genesets.genesets,
annotations: (state as any).annotations,
schema: (state as any).annoMatrix?.schema,
obsCrossfilter: (state as any).obsCrossfilter,
genesetsUI: (state as any).genesetsUI,
genesets: (state as any).genesets.genesets,
}))
class RenameGeneset extends React.PureComponent {
constructor(props) {
class RenameGeneset extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGeneset' does not exist on type '{... Remove this comment to see the full error message
newGenesetName: props.parentGeneset,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGenesetDescription' does not exist... Remove this comment to see the full error message
newGenesetDescription: props.parentGenesetDescription,
};
}
disableEditGenesetNameMode = (e) => {
disableEditGenesetNameMode = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
this.setState({
newGenesetName: "",
@@ -31,10 +37,10 @@ class RenameGeneset extends React.PureComponent {
if (e) e.preventDefault();
};
renameGeneset = (e) => {
renameGeneset = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, genesetsUI } = this.props;
const { newGenesetName, newGenesetDescription } = this.state;
dispatch({
type: "geneset: update",
genesetName: genesetsUI.isEditingGenesetName,
@@ -53,15 +59,15 @@ class RenameGeneset extends React.PureComponent {
return false;
};
handleChange = (e) => {
handleChange = (e: any) => {
this.setState({ newGenesetName: e });
};
handleChangeDescription = (e) => {
handleChangeDescription = (e: any) => {
this.setState({ newGenesetDescription: e });
};
validate = (genesetName, genesets) => {
validate = (genesetName: any, genesets: any) => {
return (
!genesets.has(genesetName) &&
// eslint-disable-next-line no-control-regex -- unicode 0-31 127-65535
@@ -73,15 +79,19 @@ class RenameGeneset extends React.PureComponent {
render() {
const { newGenesetName, newGenesetDescription } = this.state;
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesetsUI' does not exist on type 'Read... Remove this comment to see the full error message
genesetsUI,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGeneset' does not exist on type 'Read... Remove this comment to see the full error message
parentGeneset,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGenesetDescription' does not exist on type 'Read... Remove this comment to see the full error message
parentGenesetDescription,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Read... Remove this comment to see the full error message
genesets,
} = this.props;
return (
<>
<AnnoDialog
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
isActive={genesetsUI.isEditingGenesetName === parentGeneset}
inputProps={{
"data-testid": `${genesetsUI.isEditingGenesetName}:rename-geneset-dialog`,
@@ -101,6 +111,7 @@ class RenameGeneset extends React.PureComponent {
}
annoInput={
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; onChange: (e: any) => void; in... Remove this comment to see the full error message
label={newGenesetName}
onChange={this.handleChange}
inputProps={{
@@ -114,6 +125,7 @@ class RenameGeneset extends React.PureComponent {
secondaryInstructions="Edit description"
secondaryInput={
<LabelInput
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; onChange: (e: any) => void; in... Remove this comment to see the full error message
label={newGenesetDescription}
onChange={this.handleChangeDescription}
inputProps={{ "data-testid": "change geneset description" }}
client/src/components/geneExpression/menus/genesetMenus.js → client/src/components/geneExpression/menus/genesetMenus.tsx
+13 -4
View File
@@ -17,19 +17,23 @@ import * as globals from "../../../globals";
import actions from "../../../actions";
import AddGeneToGenesetDialogue from "./addGeneToGenesetDialogue";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
return {
genesetsUI: state.genesetsUI,
colorAccessor: state.colors.colorAccessor,
genesetsUI: (state as any).genesetsUI,
colorAccessor: (state as any).colors.colorAccessor,
};
})
class GenesetMenus extends React.PureComponent {
constructor(props) {
class GenesetMenus extends React.PureComponent<{}, State> {
constructor(props: {}) {
super(props);
this.state = {};
}
activateAddGeneToGenesetMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, geneset } = this.props;
dispatch({
type: "geneset: activate add new genes mode",
@@ -38,6 +42,7 @@ class GenesetMenus extends React.PureComponent {
};
activateEditGenesetNameMode = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, geneset } = this.props;
dispatch({
@@ -47,6 +52,7 @@ class GenesetMenus extends React.PureComponent {
};
handleColorByEntireGeneset = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, geneset } = this.props;
dispatch({
@@ -56,11 +62,13 @@ class GenesetMenus extends React.PureComponent {
};
handleDeleteGeneset = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, geneset } = this.props;
dispatch(actions.genesetDelete(geneset));
};
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'geneset' does not exist on type 'Readonl... Remove this comment to see the full error message
const { geneset, genesetsEditable, createText, colorAccessor } = this.props;
const isColorBy = geneset === colorAccessor;
@@ -84,6 +92,7 @@ class GenesetMenus extends React.PureComponent {
minimal
/>
</Tooltip2>
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ geneset: any; }' is not assignable to type... Remove this comment to see the full error message */}
<AddGeneToGenesetDialogue geneset={geneset} />
<Popover
interactionKind={PopoverInteractionKind.HOVER}
client/src/components/geneExpression/quickGene.js → client/src/components/geneExpression/quickGene.tsx
+21 -12
View File
@@ -10,7 +10,7 @@ import Gene from "./gene";
import { postUserErrorToast } from "../framework/toasters";
import actions from "../../actions";
const usePrevious = (value) => {
const usePrevious = (value: any) => {
const ref = useRef();
useEffect(() => {
ref.current = value;
@@ -28,18 +28,20 @@ function QuickGene() {
const { annoMatrix, userDefinedGenes, userDefinedGenesLoading } = useSelector(
(state) => {
return {
annoMatrix: state.annoMatrix,
userDefinedGenes: state.controls.userDefinedGenes,
userDefinedGenesLoading: state.controls.userDefinedGenesLoading,
annoMatrix: (state as any).annoMatrix,
userDefinedGenes: (state as any).controls.userDefinedGenes,
userDefinedGenesLoading: (state as any).controls
.userDefinedGenesLoading,
};
}
);
const prevProps = usePrevious({ annoMatrix });
// @ts-expect-error ts-migrate(2345) FIXME: Argument of type '() => Promise<void>' is not assi... Remove this comment to see the full error message
useEffect(async () => {
if (!annoMatrix) return;
if (annoMatrix !== prevProps?.annoMatrix) {
if (annoMatrix !== (prevProps as any)?.annoMatrix) {
const { schema } = annoMatrix;
const varIndex = schema.annotations.var.index;
@@ -57,7 +59,10 @@ function QuickGene() {
const handleExpand = () => setIsExpanded(!isExpanded);
const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
const renderGene = (
fuzzySortResult: any,
{ handleClick, modifiers }: any
) => {
if (!modifiers.matchesPredicate) {
return null;
}
@@ -70,8 +75,7 @@ function QuickGene() {
disabled={modifiers.disabled}
data-testid={`suggest-menu-item-${geneName}`}
key={geneName}
onClick={(g) =>
/* this fires when user clicks a menu item */
onClick={(g: any /* this fires when user clicks a menu item */) =>
handleClick(g)
}
text={geneName}
@@ -79,11 +83,12 @@ function QuickGene() {
);
};
const handleClick = (g) => {
const handleClick = (g: any) => {
if (!g) return;
const gene = g.target;
if (userDefinedGenes.indexOf(gene) !== -1) {
postUserErrorToast("That gene already exists");
// @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
} else if (geneNames.indexOf(gene) === undefined) {
postUserErrorToast("That doesn't appear to be a valid gene name.");
} else {
@@ -93,22 +98,23 @@ function QuickGene() {
}
};
const filterGenes = (query, genes) =>
const filterGenes = (query: any, genes: any) =>
/* fires on load, once, and then for each character typed into the input */
fuzzysort.go(query, genes, {
limit: 5,
threshold: -10000, // don't return bad results
});
const removeGene = (gene) => () => {
const removeGene = (gene: any) => () => {
dispatch({ type: "clear user defined gene", data: gene });
};
const QuickGenes = useMemo(() => {
return userDefinedGenes.map((gene) => {
return userDefinedGenes.map((gene: any) => {
return (
<Gene
key={`quick=${gene}`}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: string; gene: any; removeGene: (gene:... Remove this comment to see the full error message
gene={gene}
removeGene={removeGene}
quickGene
@@ -121,6 +127,7 @@ function QuickGene() {
<div style={{ width: "100%", marginBottom: "16px" }}>
<H4
role="menuitem"
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
tabIndex="0"
data-testclass="quickgene-heading-expand"
onKeyPress={handleExpand}
@@ -151,6 +158,7 @@ function QuickGene() {
}}
initialContent={<MenuItem disabled text="Enter a gene…" />}
inputProps={{
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ "data-testid": string; placeholder: string... Remove this comment to see the full error message
"data-testid": "gene-search",
placeholder: "Quick Gene Search",
leftIcon: IconNames.SEARCH,
@@ -159,6 +167,7 @@ function QuickGene() {
inputValueRenderer={() => {
return "";
}}
// @ts-expect-error ts-migrate(2322) FIXME: Type '(query: any, genes: any) => Fuzzysort.Result... Remove this comment to see the full error message
itemListPredicate={filterGenes}
itemRenderer={renderGene}
items={geneNames || ["No genes"]}
client/src/components/graph/drawPointsRegl.js → client/src/components/graph/drawPointsRegl.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { glPointFlags, glPointSize } from "../../util/glHelpers";
export default function drawPointsRegl(regl) {
export default function drawPointsRegl(regl: any) {
return regl({
vert: `
precision mediump float;
client/src/components/graph/graph.js → client/src/components/graph/graph.tsx
+160 -139
View File
@@ -34,7 +34,7 @@ Simple 2D transforms control all point painting. There are three:
* camera - apply a 2D camera transformation (pan, zoom)
* projection - apply any transformation required for screen size and layout
*/
function createProjectionTF(viewportWidth, viewportHeight) {
function createProjectionTF(viewportWidth: any, viewportHeight: any) {
/*
the projection transform accounts for the screen size & other layout
*/
@@ -53,6 +53,7 @@ function createProjectionTF(viewportWidth, viewportHeight) {
0,
(bottomGutterSizePx - topGutterSizePx) / viewportHeight / aspectScale[1],
]);
// @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'number[]' is not assignable to p... Remove this comment to see the full error message
mat3.scale(m, m, aspectScale);
return m;
}
@@ -67,32 +68,36 @@ function createModelTF() {
return m;
}
type GraphState = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annoMatrix: state.annoMatrix,
crossfilter: state.obsCrossfilter,
selectionTool: state.graphSelection.tool,
currentSelection: state.graphSelection.selection,
layoutChoice: state.layoutChoice,
graphInteractionMode: state.controls.graphInteractionMode,
colors: state.colors,
pointDilation: state.pointDilation,
genesets: state.genesets.genesets,
annoMatrix: (state as any).annoMatrix,
crossfilter: (state as any).obsCrossfilter,
selectionTool: (state as any).graphSelection.tool,
currentSelection: (state as any).graphSelection.selection,
layoutChoice: (state as any).layoutChoice,
graphInteractionMode: (state as any).controls.graphInteractionMode,
colors: (state as any).colors,
pointDilation: (state as any).pointDilation,
genesets: (state as any).genesets.genesets,
}))
class Graph extends React.Component {
static createReglState(canvas) {
class Graph extends React.Component<{}, GraphState> {
static createReglState(canvas: any) {
/*
Must be created for each canvas
*/
Must be created for each canvas
*/
// setup canvas, webgl draw function and camera
const camera = _camera(canvas);
const regl = _regl(canvas);
const drawPoints = _drawPoints(regl);
// preallocate webgl buffers
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const pointBuffer = regl.buffer();
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const colorBuffer = regl.buffer();
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const flagBuffer = regl.buffer();
return {
camera,
regl,
@@ -103,14 +108,18 @@ class Graph extends React.Component {
};
}
static watchAsync(props, prevProps) {
static watchAsync(props: any, prevProps: any) {
return !shallowEqual(props.watchProps, prevProps.watchProps);
}
cachedAsyncProps: any;
reglCanvas: any;
computePointPositions = memoize((X, Y, modelTF) => {
/*
compute the model coordinate for each point
*/
compute the model coordinate for each point
*/
const positions = new Float32Array(2 * X.length);
for (let i = 0, len = X.length; i < len; i += 1) {
const p = vec2.fromValues(X[i], Y[i]);
@@ -123,8 +132,8 @@ class Graph extends React.Component {
computePointColors = memoize((rgb) => {
/*
compute webgl colors for each point
*/
compute webgl colors for each point
*/
const colors = new Float32Array(3 * rgb.length);
for (let i = 0, len = rgb.length; i < len; i += 1) {
colors.set(rgb[i], 3 * i);
@@ -173,21 +182,20 @@ class Graph extends React.Component {
computePointFlags = memoize(
(crossfilter, colorByData, pointDilationData, pointDilationLabel) => {
/*
We communicate with the shader using three flags:
- isNaN -- the value is a NaN. Only makes sense when we have a colorAccessor
- isSelected -- the value is selected
- isHightlighted -- the value is highlighted in the UI (orthogonal from selection highlighting)
Due to constraints in webgl vertex shader attributes, these are encoded in a float, "kinda"
like bitmasks.
We also have separate code paths for generating flags for categorical and
continuous metadata, as they rely on different tests, and some of the flags
(eg, isNaN) are meaningless in the face of categorical metadata.
*/
We communicate with the shader using three flags:
- isNaN -- the value is a NaN. Only makes sense when we have a colorAccessor
- isSelected -- the value is selected
- isHightlighted -- the value is highlighted in the UI (orthogonal from selection highlighting)
Due to constraints in webgl vertex shader attributes, these are encoded in a float, "kinda"
like bitmasks.
We also have separate code paths for generating flags for categorical and
continuous metadata, as they rely on different tests, and some of the flags
(eg, isNaN) are meaningless in the face of categorical metadata.
*/
const nObs = crossfilter.size();
const flags = new Float32Array(nObs);
const selectedFlags = this.computeSelectedFlags(
crossfilter,
flagSelected,
@@ -199,16 +207,14 @@ class Graph extends React.Component {
pointDilationLabel
);
const colorByFlags = this.computeColorByFlags(nObs, colorByData);
for (let i = 0; i < nObs; i += 1) {
flags[i] = selectedFlags[i] + highlightFlags[i] + colorByFlags[i];
}
return flags;
}
);
constructor(props) {
constructor(props: {}) {
super(props);
const viewport = this.getViewportDimensions();
this.reglCanvas = null;
@@ -219,20 +225,18 @@ class Graph extends React.Component {
tool: null,
container: null,
viewport,
// projection
camera: null,
modelTF,
// @ts-expect-error ts-migrate(2345) FIXME: Argument of type '[]' is not assignable to paramet... Remove this comment to see the full error message
modelInvTF: mat3.invert([], modelTF),
projectionTF: createProjectionTF(viewport.width, viewport.height),
// regl state
regl: null,
drawPoints: null,
pointBuffer: null,
colorBuffer: null,
flagBuffer: null,
// component rendering derived state - these must stay synchronized
// with the reducer state they were generated from.
layoutState: {
@@ -255,10 +259,13 @@ class Graph extends React.Component {
window.addEventListener("resize", this.handleResize);
}
componentDidUpdate(prevProps, prevState) {
componentDidUpdate(prevProps: {}, prevState: GraphState) {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message
selectionTool,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type 'R... Remove this comment to see the full error message
currentSelection,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on type 'R... Remove this comment to see the full error message
graphInteractionMode,
} = this.props;
const { toolSVG, viewport } = this.state;
@@ -266,11 +273,12 @@ class Graph extends React.Component {
prevState.viewport.height !== viewport.height ||
prevState.viewport.width !== viewport.width;
let stateChanges = {};
if (
(viewport.height && viewport.width && !toolSVG) || // first time init
hasResized || // window size has changed we want to recreate all SVGs
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type '{... Remove this comment to see the full error message
selectionTool !== prevProps.selectionTool || // change of selection tool
// @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on ... Remove this comment to see the full error message
prevProps.graphInteractionMode !== graphInteractionMode // lasso/zoom mode is switched
) {
stateChanges = {
@@ -278,19 +286,23 @@ class Graph extends React.Component {
...this.createToolSVG(),
};
}
/*
if the selection tool or state has changed, ensure that the selection
tool correctly reflects the underlying selection.
*/
if the selection tool or state has changed, ensure that the selection
tool correctly reflects the underlying selection.
*/
if (
// @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type... Remove this comment to see the full error message
currentSelection !== prevProps.currentSelection ||
// @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on ... Remove this comment to see the full error message
graphInteractionMode !== prevProps.graphInteractionMode ||
// @ts-expect-error ts-migrate(2339) FIXME: Property 'toolSVG' does not exist on type '{}'.
stateChanges.toolSVG
) {
const { tool, container } = this.state;
this.selectionToolUpdate(
// @ts-expect-error ts-migrate(2339) FIXME: Property 'tool' does not exist on type '{}'.
stateChanges.tool ? stateChanges.tool : tool,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'container' does not exist on type '{}'.
stateChanges.container ? stateChanges.container : container
);
}
@@ -315,12 +327,12 @@ class Graph extends React.Component {
});
};
handleCanvasEvent = (e) => {
handleCanvasEvent = (e: any) => {
const { camera, projectionTF } = this.state;
if (e.type !== "wheel") e.preventDefault();
if (camera.handleEvent(e, projectionTF)) {
this.renderCanvas();
this.setState((state) => {
this.setState((state: any) => {
return { ...state, updateOverlay: !state.updateOverlay };
});
}
@@ -328,16 +340,18 @@ class Graph extends React.Component {
handleBrushDragAction() {
/*
event describing brush position:
@-------|
| |
| |
|-------@
*/
event describing brush position:
@-------|
| |
| |
|-------@
*/
// ignore programatically generated events
// @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message
if (d3.event.sourceEvent === null || !d3.event.selection) return;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, layoutChoice } = this.props;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message
const s = d3.event.selection;
const northwest = this.mapScreenToPoint(s[0]);
const southeast = this.mapScreenToPoint(s[1]);
@@ -357,21 +371,24 @@ class Graph extends React.Component {
handleBrushStartAction() {
// Ignore programatically generated events.
// @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message
if (!d3.event.sourceEvent) return;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch(actions.graphBrushStartAction());
}
handleBrushEndAction() {
// Ignore programatically generated events.
// @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message
if (!d3.event.sourceEvent) return;
/*
coordinates will be included if selection made, null
if selection cleared.
*/
coordinates will be included if selection made, null
if selection cleared.
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, layoutChoice } = this.props;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message
const s = d3.event.selection;
if (s) {
const northwest = this.mapScreenToPoint(s[0]);
@@ -394,20 +411,23 @@ class Graph extends React.Component {
}
handleBrushDeselectAction() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, layoutChoice } = this.props;
dispatch(actions.graphBrushDeselectAction(layoutChoice.current));
}
handleLassoStart() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, layoutChoice } = this.props;
// @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
dispatch(actions.graphLassoStartAction(layoutChoice.current));
}
// when a lasso is completed, filter to the points within the lasso polygon
handleLassoEnd(polygon) {
handleLassoEnd(polygon: any) {
const minimumPolygonArea = 10;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, layoutChoice } = this.props;
if (
polygon.length < 3 ||
Math.abs(d3.polygonArea(polygon)) < minimumPolygonArea
@@ -418,29 +438,33 @@ class Graph extends React.Component {
dispatch(
actions.graphLassoEndAction(
layoutChoice.current,
polygon.map((xy) => this.mapScreenToPoint(xy))
polygon.map((xy: any) => this.mapScreenToPoint(xy))
)
);
}
}
handleLassoCancel() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, layoutChoice } = this.props;
dispatch(actions.graphLassoCancelAction(layoutChoice.current));
}
handleLassoDeselectAction() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, layoutChoice } = this.props;
dispatch(actions.graphLassoDeselectAction(layoutChoice.current));
}
handleDeselectAction() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message
const { selectionTool } = this.props;
if (selectionTool === "brush") this.handleBrushDeselectAction();
if (selectionTool === "lasso") this.handleLassoDeselectAction();
}
handleOpacityRangeChange(e) {
handleOpacityRangeChange(e: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({
type: "change opacity deselected cells in 2d graph background",
@@ -448,7 +472,7 @@ class Graph extends React.Component {
});
}
setReglCanvas = (canvas) => {
setReglCanvas = (canvas: any) => {
this.reglCanvas = canvas;
this.setState({
...Graph.createReglState(canvas),
@@ -456,6 +480,7 @@ class Graph extends React.Component {
};
getViewportDimensions = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'viewportRef' does not exist on type 'Rea... Remove this comment to see the full error message
const { viewportRef } = this.props;
return {
height: viewportRef.clientHeight,
@@ -465,17 +490,16 @@ class Graph extends React.Component {
createToolSVG = () => {
/*
Called from componentDidUpdate. Create the tool SVG, and return any
state changes that should be passed to setState().
*/
Called from componentDidUpdate. Create the tool SVG, and return any
state changes that should be passed to setState().
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message
const { selectionTool, graphInteractionMode } = this.props;
const { viewport } = this.state;
/* clear out whatever was on the div, even if nothing, but usually the brushes etc */
const lasso = d3.select("#lasso-layer");
if (lasso.empty()) return {}; // still initializing
lasso.selectAll(".lasso-group").remove();
// Don't render or recreate toolSVG if currently in zoom mode
if (graphInteractionMode !== "select") {
// don't return "change" of state unless we are really changing it!
@@ -483,7 +507,6 @@ class Graph extends React.Component {
if (toolSVG === undefined) return {};
return { toolSVG: undefined };
}
let handleStart;
let handleDrag;
let handleEnd;
@@ -497,7 +520,6 @@ class Graph extends React.Component {
handleEnd = this.handleLassoEnd.bind(this);
handleCancel = this.handleLassoCancel.bind(this);
}
const { svg: newToolSVG, tool, container } = setupSVGandBrushElements(
selectionTool,
handleStart,
@@ -506,11 +528,10 @@ class Graph extends React.Component {
handleCancel,
viewport
);
return { toolSVG: newToolSVG, tool, container };
};
fetchAsyncProps = async (props) => {
fetchAsyncProps = async (props: any) => {
const {
annoMatrix,
colors: colorsProp,
@@ -520,22 +541,18 @@ class Graph extends React.Component {
viewport,
} = props.watchProps;
const { modelTF } = this.state;
const [layoutDf, colorDf, pointDilationDf] = await this.fetchData(
annoMatrix,
layoutChoice,
colorsProp,
pointDilation
);
const { currentDimNames } = layoutChoice;
const X = layoutDf.col(currentDimNames[0]).asArray();
const Y = layoutDf.col(currentDimNames[1]).asArray();
const positions = this.computePointPositions(X, Y, modelTF);
const colorTable = this.updateColorTable(colorsProp, colorDf);
const colors = this.computePointColors(colorTable.rgb);
const { colorAccessor } = colorsProp;
const colorByData = colorDf?.col(colorAccessor)?.asArray();
const {
@@ -551,7 +568,6 @@ class Graph extends React.Component {
pointDilationData,
pointDilationLabel
);
const { width, height } = viewport;
return {
positions,
@@ -562,19 +578,22 @@ class Graph extends React.Component {
};
};
async fetchData(annoMatrix, layoutChoice, colors, pointDilation) {
async fetchData(
annoMatrix: any,
layoutChoice: any,
colors: any,
pointDilation: any
) {
/*
fetch all data needed. Includes:
- the color by dataframe
- the layout dataframe
- the point dilation dataframe
*/
fetch all data needed. Includes:
- the color by dataframe
- the layout dataframe
- the point dilation dataframe
*/
const { metadataField: pointDilationAccessor } = pointDilation;
const promises = [];
// layout
promises.push(annoMatrix.fetch("emb", layoutChoice.current));
// color
const query = this.createColorByQuery(colors);
if (query) {
@@ -582,30 +601,28 @@ class Graph extends React.Component {
} else {
promises.push(Promise.resolve(null));
}
// point highlighting
if (pointDilationAccessor) {
promises.push(annoMatrix.fetch("obs", pointDilationAccessor));
} else {
promises.push(Promise.resolve(null));
}
return Promise.all(promises);
}
brushToolUpdate(tool, container) {
brushToolUpdate(tool: any, container: any) {
/*
this is called from componentDidUpdate(), so be very careful using
anything from this.state, which may be updated asynchronously.
*/
this is called from componentDidUpdate(), so be very careful using
anything from this.state, which may be updated asynchronously.
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type... Remove this comment to see the full error message
const { currentSelection } = this.props;
if (container) {
const toolCurrentSelection = d3.brushSelection(container.node());
if (currentSelection.mode === "within-rect") {
/*
if there is a selection, make sure the brush tool matches
*/
if there is a selection, make sure the brush tool matches
*/
const screenCoords = [
this.mapPointToScreen(currentSelection.brushCoords.northwest),
this.mapPointToScreen(currentSelection.brushCoords.southeast),
@@ -620,6 +637,7 @@ class Graph extends React.Component {
for (let x = 0; x < 2; x += 1) {
for (let y = 0; y < 2; y += 1) {
delta += Math.abs(
// @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
screenCoords[x][y] - toolCurrentSelection[x][y]
);
}
@@ -635,17 +653,18 @@ class Graph extends React.Component {
}
}
lassoToolUpdate(tool) {
lassoToolUpdate(tool: any) {
/*
this is called from componentDidUpdate(), so be very careful using
anything from this.state, which may be updated asynchronously.
*/
this is called from componentDidUpdate(), so be very careful using
anything from this.state, which may be updated asynchronously.
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type... Remove this comment to see the full error message
const { currentSelection } = this.props;
if (currentSelection.mode === "within-polygon") {
/*
if there is a current selection, make sure the lasso tool matches
*/
const polygon = currentSelection.polygon.map((p) =>
if there is a current selection, make sure the lasso tool matches
*/
const polygon = currentSelection.polygon.map((p: any) =>
this.mapPointToScreen(p)
);
tool.move(polygon);
@@ -654,17 +673,19 @@ class Graph extends React.Component {
}
}
selectionToolUpdate(tool, container) {
selectionToolUpdate(tool: any, container: any) {
/*
this is called from componentDidUpdate(), so be very careful using
anything from this.state, which may be updated asynchronously.
*/
this is called from componentDidUpdate(), so be very careful using
anything from this.state, which may be updated asynchronously.
*/
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message
const { selectionTool } = this.props;
switch (selectionTool) {
case "brush":
this.brushToolUpdate(tool, container);
break;
case "lasso":
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 2.
this.lassoToolUpdate(tool, container);
break;
default:
@@ -673,19 +694,16 @@ class Graph extends React.Component {
}
}
mapScreenToPoint(pin) {
mapScreenToPoint(pin: any) {
/*
Map an XY coordinates from screen domain to cell/point range,
accounting for current pan/zoom camera.
*/
Map an XY coordinates from screen domain to cell/point range,
accounting for current pan/zoom camera.
*/
const { camera, projectionTF, modelInvTF, viewport } = this.state;
const cameraInvTF = camera.invView();
/* screen -> gl */
const x = (2 * pin[0]) / viewport.width - 1;
const y = 2 * (1 - pin[1] / viewport.height) - 1;
const xy = vec2.fromValues(x, y);
const projectionInvTF = mat3.invert(mat3.create(), projectionTF);
vec2.transformMat3(xy, xy, projectionInvTF);
@@ -694,19 +712,16 @@ class Graph extends React.Component {
return xy;
}
mapPointToScreen(xyCell) {
mapPointToScreen(xyCell: any) {
/*
Map an XY coordinate from cell/point domain to screen range. Inverse
of mapScreenToPoint()
*/
Map an XY coordinate from cell/point domain to screen range. Inverse
of mapScreenToPoint()
*/
const { camera, projectionTF, modelTF, viewport } = this.state;
const cameraTF = camera.view();
const xy = vec2.transformMat3(vec2.create(), xyCell, modelTF);
vec2.transformMat3(xy, xy, cameraTF);
vec2.transformMat3(xy, xy, projectionTF);
return [
Math.round(((xy[0] + 1) * viewport.width) / 2),
Math.round(-((xy[1] + 1) / 2 - 1) * viewport.height),
@@ -734,12 +749,11 @@ class Graph extends React.Component {
);
});
updateReglAndRender(asyncProps, prevAsyncProps) {
updateReglAndRender(asyncProps: any, prevAsyncProps: any) {
const { positions, colors, flags, height, width } = asyncProps;
this.cachedAsyncProps = asyncProps;
const { pointBuffer, colorBuffer, flagBuffer } = this.state;
let needToRenderCanvas = false;
if (height !== prevAsyncProps?.height || width !== prevAsyncProps?.width) {
needToRenderCanvas = true;
}
@@ -758,10 +772,10 @@ class Graph extends React.Component {
if (needToRenderCanvas) this.renderCanvas();
}
updateColorTable(colors, colorDf) {
updateColorTable(colors: any, colorDf: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix } = this.props;
const { schema } = annoMatrix;
/* update color table state */
if (!colors || !colorDf) {
return createColorTable(
@@ -772,7 +786,6 @@ class Graph extends React.Component {
null
);
}
const { colorAccessor, userColors, colorMode } = colors;
return createColorTable(
colorMode,
@@ -783,26 +796,26 @@ class Graph extends React.Component {
);
}
createColorByQuery(colors) {
createColorByQuery(colors: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix, genesets } = this.props;
const { schema } = annoMatrix;
const { colorMode, colorAccessor } = colors;
return createColorQuery(colorMode, colorAccessor, schema, genesets);
}
renderPoints(
regl,
drawPoints,
colorBuffer,
pointBuffer,
flagBuffer,
camera,
projectionTF
regl: any,
drawPoints: any,
colorBuffer: any,
pointBuffer: any,
flagBuffer: any,
camera: any,
projectionTF: any
) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix } = this.props;
if (!this.reglCanvas || !annoMatrix) return;
const { schema } = annoMatrix;
const cameraTF = camera.view();
const projView = mat3.multiply(mat3.create(), projectionTF, cameraTF);
@@ -827,16 +840,21 @@ class Graph extends React.Component {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on ... Remove this comment to see the full error message
graphInteractionMode,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on ... Remove this comment to see the full error message
annoMatrix,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colors' does not exist on ... Remove this comment to see the full error message
colors,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'layoutChoice' does not exist on ... Remove this comment to see the full error message
layoutChoice,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'pointDilation' does not exist on ... Remove this comment to see the full error message
pointDilation,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on ... Remove this comment to see the full error message
crossfilter,
} = this.props;
const { modelTF, projectionTF, camera, viewport, regl } = this.state;
const cameraTF = camera?.view()?.slice();
return (
<div
id="graph-wrapper"
@@ -847,6 +865,7 @@ class Graph extends React.Component {
}}
>
<GraphOverlayLayer
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; width: any; height: any... Remove this comment to see the full error message
width={viewport.width}
height={viewport.height}
cameraTF={cameraTF}
@@ -906,6 +925,7 @@ class Graph extends React.Component {
}}
>
<Async.Pending initial>
{/* eslint-disable-next-line @typescript-eslint/no-use-before-define --- StillLoading used before defined */}
<StillLoading
displayName={layoutChoice.current}
width={viewport.width}
@@ -914,6 +934,7 @@ class Graph extends React.Component {
</Async.Pending>
<Async.Rejected>
{(error) => (
// eslint-disable-next-line @typescript-eslint/no-use-before-define --- ErrorLoading used before defined
<ErrorLoading
displayName={layoutChoice.current}
error={error}
@@ -936,7 +957,7 @@ class Graph extends React.Component {
}
}
const ErrorLoading = ({ displayName, error, width, height }) => {
const ErrorLoading = ({ displayName, error, width, height }: any) => {
console.log(error); // log to console as this is an unepected error
return (
<div
@@ -952,7 +973,7 @@ const ErrorLoading = ({ displayName, error, width, height }) => {
);
};
const StillLoading = ({ displayName, width, height }) => {
const StillLoading = ({ displayName, width, height }: any) => {
/*
Render a busy/loading indicator
*/
client/src/components/graph/overlays/centroidLabels.js → client/src/components/graph/overlays/centroidLabels.tsx
+33 -26
View File
@@ -6,22 +6,22 @@ import { categoryLabelDisplayStringLongLength } from "../../../globals";
import calcCentroid from "../../../util/centroid";
import { createColorQuery } from "../../../util/stateManager/colorHelpers";
export default
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
annoMatrix: state.annoMatrix,
colors: state.colors,
layoutChoice: state.layoutChoice,
dilatedValue: state.pointDilation.categoryField,
categoricalSelection: state.categoricalSelection,
showLabels: state.centroidLabels?.showLabels,
genesets: state.genesets.genesets,
annoMatrix: (state as any).annoMatrix,
colors: (state as any).colors,
layoutChoice: (state as any).layoutChoice,
dilatedValue: (state as any).pointDilation.categoryField,
categoricalSelection: (state as any).categoricalSelection,
showLabels: (state as any).centroidLabels?.showLabels,
genesets: (state as any).genesets.genesets,
}))
class CentroidLabels extends PureComponent {
static watchAsync(props, prevProps) {
export default class CentroidLabels extends PureComponent {
static watchAsync(props: any, prevProps: any) {
return !shallowEqual(props.watchProps, prevProps.watchProps);
}
fetchAsyncProps = async (props) => {
fetchAsyncProps = async (props: any) => {
const {
annoMatrix,
colors,
@@ -31,7 +31,6 @@ class CentroidLabels extends PureComponent {
} = props.watchProps;
const { schema } = annoMatrix;
const { colorAccessor } = colors;
const [layoutDf, colorDf] = await this.fetchData();
let labels;
if (colorDf) {
@@ -45,10 +44,9 @@ class CentroidLabels extends PureComponent {
} else {
labels = new Map();
}
// @ts-expect-error ts-migrate(2339) FIXME: Property 'overlaySetShowing' does not exist on typ... Remove this comment to see the full error message
const { overlaySetShowing } = this.props;
overlaySetShowing("centroidLabels", showLabels && labels.size > 0);
return {
labels,
colorAccessor,
@@ -56,7 +54,9 @@ class CentroidLabels extends PureComponent {
};
};
handleMouseEnter = (e, colorAccessor, label) => {
// @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
handleMouseEnter = (e: any, colorAccessor: any, label: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({
type: "category value mouse hover start",
@@ -65,7 +65,9 @@ class CentroidLabels extends PureComponent {
});
};
handleMouseOut = (e, colorAccessor, label) => {
// @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
handleMouseOut = (e: any, colorAccessor: any, label: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({
type: "category value mouse hover end",
@@ -75,6 +77,7 @@ class CentroidLabels extends PureComponent {
};
colorByQuery() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix, colors, genesets } = this.props;
const { schema } = annoMatrix;
const { colorMode, colorAccessor } = colors;
@@ -82,6 +85,7 @@ class CentroidLabels extends PureComponent {
}
async fetchData() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix, layoutChoice } = this.props;
// fetch all data we need: layout, category
const promises = [];
@@ -94,21 +98,26 @@ class CentroidLabels extends PureComponent {
} else {
promises.push(Promise.resolve(null));
}
return Promise.all(promises);
}
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'inverseTransform' does not exist on type... Remove this comment to see the full error message
inverseTransform,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dilatedValue' does not exist on type 'Re... Remove this comment to see the full error message
dilatedValue,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoricalSelection' does not exist on ... Remove this comment to see the full error message
categoricalSelection,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'showLabels' does not exist on type 'Read... Remove this comment to see the full error message
showLabels,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colors' does not exist on type 'Readonly... Remove this comment to see the full error message
colors,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
annoMatrix,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'layoutChoice' does not exist on type 'Re... Remove this comment to see the full error message
layoutChoice,
} = this.props;
return (
<Async
watchFn={CentroidLabels.watchAsync}
@@ -125,14 +134,12 @@ class CentroidLabels extends PureComponent {
<Async.Fulfilled>
{(asyncProps) => {
if (!showLabels) return null;
const labelSVGS = [];
const labelSVGS: any = [];
const deselectOpacity = 0.375;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'category' does not exist on type 'unknow... Remove this comment to see the full error message
const { category, colorAccessor, labels } = asyncProps;
labels.forEach((coords, label) => {
labels.forEach((coords: any, label: any) => {
const selected = category.get(label) ?? true;
// Mirror LSB middle truncation
let displayLabel = label;
if (displayLabel.length > categoryLabelDisplayStringLongLength) {
@@ -141,7 +148,6 @@ class CentroidLabels extends PureComponent {
categoryLabelDisplayStringLongLength / 2
)}…${label.slice(-categoryLabelDisplayStringLongLength / 2)}`;
}
labelSVGS.push(
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events -- the mouse actions for centroid labels do not have a screen reader alternative
<Label
@@ -158,7 +164,6 @@ class CentroidLabels extends PureComponent {
/>
);
});
return <>{labelSVGS}</>;
}}
</Async.Fulfilled>
@@ -177,7 +182,7 @@ const Label = ({
displayLabel,
onMouseEnter,
onMouseOut,
}) => {
}: any) => {
/*
Render a label at a given coordinate.
*/
@@ -202,9 +207,11 @@ const Label = ({
textAnchor="middle"
style={{
fontSize,
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string | null' is not assignable to type 'Fo... Remove this comment to see the full error message
fontWeight,
fill: "black",
userSelect: "none",
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ opacity: any; }' is not assignable to type... Remove this comment to see the full error message
opacity: { opacity },
}}
onMouseEnter={(e) => onMouseEnter(e, colorAccessor, label)}
client/src/components/graph/overlays/graphOverlayLayer.js → client/src/components/graph/overlays/graphOverlayLayer.tsx
+16 -6
View File
@@ -1,22 +1,25 @@
import React, { PureComponent, cloneElement } from "react";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../graph.css' or its correspon... Remove this comment to see the full error message
import styles from "../graph.css";
export default class GraphOverlayLayer extends PureComponent {
type State = any;
export default class GraphOverlayLayer extends PureComponent<{}, State> {
/*
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)
Children are assigned in the graph component and must implement onDisplayChange()
*/
constructor(props) {
constructor(props: {}) {
super(props);
this.state = {
display: {},
};
}
matrixToTransformString = (m) => {
matrixToTransformString = (m: any) => {
/*
Translates the gl-matrix mat3 to SVG matrix transform style
@@ -28,25 +31,31 @@ export default class GraphOverlayLayer extends PureComponent {
return `matrix(${m[0]} ${m[1]} ${m[3]} ${m[4]} ${m[6]} ${m[7]})`;
};
reverseMatrixScaleTransformString = (m) => {
reverseMatrixScaleTransformString = (m: any) => {
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
overlaySetShowing = (overlay, displaying) => {
this.setState((state) => {
overlaySetShowing = (overlay: any, displaying: any) => {
this.setState((state: any) => {
return { ...state, display: { ...state.display, [overlay]: displaying } };
});
};
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'cameraTF' does not exist on type 'Readon... Remove this comment to see the full error message
cameraTF,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'modelTF' does not exist on type 'Readonl... Remove this comment to see the full error message
modelTF,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'projectionTF' does not exist on type 'Re... Remove this comment to see the full error message
projectionTF,
children,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleCanvasEvent' does not exist on typ... Remove this comment to see the full error message
handleCanvasEvent,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
width,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'height' does not exist on type 'Readonly... Remove this comment to see the full error message
height,
} = this.props;
const { display } = this.state;
@@ -65,6 +74,7 @@ export default class GraphOverlayLayer extends PureComponent {
// Copy the children passed with the overlay and add the inverse transform and onDisplayChange props
const newChildren = React.Children.map(children, (child) =>
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
cloneElement(child, {
inverseTransform,
overlaySetShowing: this.overlaySetShowing,
client/src/components/graph/setupLasso.js → client/src/components/graph/setupLasso.ts
+17 -16
View File
@@ -4,16 +4,16 @@ import { Colors } from "@blueprintjs/core";
const Lasso = () => {
const dispatch = d3.dispatch("start", "end", "cancel");
const lasso = (svg) => {
let lassoPolygon;
let lassoPath;
let closePath;
let lassoInProgress;
const lasso = (svg: any) => {
let lassoPolygon: any;
let lassoPath: any;
let closePath: any;
let lassoInProgress: any;
const polygonToPath = (polygon) =>
`M${polygon.map((d) => d.join(",")).join("L")}`;
const polygonToPath = (polygon: any) =>
`M${polygon.map((d: any) => d.join(",")).join("L")}`;
const distance = (pt1, pt2) =>
const distance = (pt1: any, pt2: any) =>
Math.sqrt((pt2[0] - pt1[0]) ** 2 + (pt2[1] - pt1[1]) ** 2);
// distance last point has to be to first point before it auto closes when mouse is released
@@ -21,12 +21,13 @@ const Lasso = () => {
const lassoPathColor = Colors.BLUE5;
const handleDragStart = () => {
lassoPolygon = [d3.mouse(svg.node())]; // current x y of mouse within element
lassoPolygon = [(d3 as any).mouse(svg.node())]; // current x y of mouse within element
if (lassoPath) {
// If the existing path is in progress
if (lassoInProgress) {
// cancel the existing lasso
// eslint-disable-next-line @typescript-eslint/no-use-before-define --- handleCancel used before defined
handleCancel();
// Don't continue with current drag start
return;
@@ -37,12 +38,14 @@ const Lasso = () => {
// We're starting a new drag
lassoInProgress = true;
// eslint-disable-next-line @typescript-eslint/no-use-before-define --- g used before defined
lassoPath = g
.append("path")
.attr("data-testid", "lasso-element")
.attr("fill-opacity", 0.1)
.attr("stroke-dasharray", "3, 3");
// eslint-disable-next-line @typescript-eslint/no-use-before-define --- g used before defined
closePath = g
.append("line")
.attr("x2", lassoPolygon[0][0])
@@ -53,7 +56,7 @@ const Lasso = () => {
};
const handleDrag = () => {
const point = d3.mouse(svg.node());
const point = (d3 as any).mouse(svg.node());
lassoPolygon.push(point);
lassoPath.attr("d", polygonToPath(lassoPolygon));
@@ -123,12 +126,11 @@ const Lasso = () => {
area.call(drag);
lasso.reset = () => {
(lasso as any).reset = () => {
if (lassoPath) {
lassoPath.remove();
lassoPath = null;
}
lassoPolygon = null;
if (closePath) {
closePath.remove();
@@ -136,10 +138,10 @@ const Lasso = () => {
}
};
lasso.move = (polygon) => {
(lasso as any).move = (polygon: any) => {
if (polygon !== lassoPolygon || polygon.length !== lassoPolygon.length) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'reset' does not exist on type '(svg: any... Remove this comment to see the full error message
lasso.reset();
lassoPolygon = polygon;
lassoPath = g
.append("path")
@@ -148,13 +150,12 @@ const Lasso = () => {
.attr("fill-opacity", 0.1)
.attr("stroke", lassoPathColor)
.attr("stroke-dasharray", "3, 3");
lassoPath.attr("d", `${polygonToPath(lassoPolygon)}Z`);
}
};
};
lasso.on = (type, callback) => {
lasso.on = (type: any, callback: any) => {
dispatch.on(type, callback);
return lasso;
};
client/src/components/graph/setupSVGandBrush.js → client/src/components/graph/setupSVGandBrush.ts
+7 -7
View File
@@ -8,12 +8,12 @@ import Lasso from "./setupLasso";
******************************************/
export default (
selectionToolType,
handleStartAction,
handleDragAction,
handleEndAction,
handleCancelAction,
viewport
selectionToolType: any,
handleStartAction: any,
handleDragAction: any,
handleEndAction: any,
handleCancelAction: any,
viewport: any
) => {
const svg = d3.select("#graph-wrapper").select("#lasso-layer");
if (svg.empty()) return {};
@@ -39,7 +39,7 @@ export default (
}
if (selectionToolType === "lasso") {
const lasso = Lasso()
const lasso = (Lasso() as any)
.on("end", handleEndAction)
// FYI, Lasso doesn't generate drag
.on("start", handleStartAction)
client/src/components/infoDrawer/infoDrawer.js
-63
View File
@@ -1,63 +0,0 @@
import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Drawer } from "@blueprintjs/core";
import InfoFormat from "./infoFormat";
import { selectableCategoryNames } from "../../util/stateManager/controlsHelpers";
@connect((state) => {
return {
schema: state.annoMatrix.schema,
datasetTitle: state.config?.displayNames?.dataset ?? "",
aboutURL: state.config?.links?.["about-dataset"],
isOpen: state.controls.datasetDrawer,
dataPortalProps: state.config?.corpora_props,
};
})
class InfoDrawer extends PureComponent {
handleClose = () => {
const { dispatch } = this.props;
dispatch({ type: "toggle dataset drawer" });
};
render() {
const {
position,
aboutURL,
datasetTitle,
schema,
isOpen,
dataPortalProps,
} = this.props;
const allCategoryNames = selectableCategoryNames(schema).sort();
const singleValueCategories = new Map();
allCategoryNames.forEach((catName) => {
const isUserAnno = schema?.annotations?.obsByName[catName]?.writable;
const colSchema = schema.annotations.obsByName[catName];
if (!isUserAnno && colSchema.categories?.length === 1) {
singleValueCategories.set(catName, colSchema.categories[0]);
}
});
return (
<Drawer
title="Dataset Overview"
onClose={this.handleClose}
{...{ isOpen, position }}
>
<InfoFormat
{...{
datasetTitle,
aboutURL,
singleValueCategories,
dataPortalProps: dataPortalProps ?? {},
}}
/>
</Drawer>
);
}
}
export default InfoDrawer;
client/src/components/infoDrawer/infoDrawer.tsx
+72
View File
@@ -0,0 +1,72 @@
import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Drawer } from "@blueprintjs/core";
import InfoFormat from "./infoFormat";
import { selectableCategoryNames } from "../../util/stateManager/controlsHelpers";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
return {
schema: (state as any).annoMatrix.schema,
datasetTitle: (state as any).config?.displayNames?.dataset ?? "",
aboutURL: (state as any).config?.links?.["about-dataset"],
isOpen: (state as any).controls.datasetDrawer,
dataPortalProps: (state as any).config?.corpora_props,
};
})
class InfoDrawer extends PureComponent {
handleClose = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({ type: "toggle dataset drawer" });
};
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'position' does not exist on type 'Readon... Remove this comment to see the full error message
position,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'aboutURL' does not exist on type 'Readon... Remove this comment to see the full error message
aboutURL,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'datasetTitle' does not exist on type 'Re... Remove this comment to see the full error message
datasetTitle,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
schema,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isOpen' does not exist on type 'Readonly... Remove this comment to see the full error message
isOpen,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dataPortalProps' does not exist on type ... Remove this comment to see the full error message
dataPortalProps,
} = this.props;
// @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 1.
const allCategoryNames = selectableCategoryNames(schema).sort();
const singleValueCategories = new Map();
allCategoryNames.forEach((catName: any) => {
const isUserAnno = schema?.annotations?.obsByName[catName]?.writable;
const colSchema = schema.annotations.obsByName[catName];
if (!isUserAnno && colSchema.categories?.length === 1) {
singleValueCategories.set(catName, colSchema.categories[0]);
}
});
return (
<Drawer
title="Dataset Overview"
onClose={this.handleClose}
{...{ isOpen, position }}
>
<InfoFormat
{...{
datasetTitle,
aboutURL,
singleValueCategories,
dataPortalProps: dataPortalProps ?? {},
}}
/>
</Drawer>
);
}
}
export default InfoDrawer;
client/src/components/infoDrawer/infoFormat.js → client/src/components/infoDrawer/infoFormat.tsx
+18 -12
View File
@@ -1,14 +1,14 @@
import { H3, H1, UL, HTMLTable, Classes } from "@blueprintjs/core";
import React from "react";
const renderContributors = (contributors, affiliations) => {
const renderContributors = (contributors: any, affiliations: any) => {
// eslint-disable-next-line no-constant-condition -- Temp removed contributor section to avoid publishing PII
if (!contributors || contributors.length === 0 || true) return null;
return (
<>
<H3>Contributors</H3>
<p>
{contributors.map((contributor) => {
{contributors.map((contributor: any) => {
const { email, name, institution } = contributor;
return (
@@ -27,7 +27,7 @@ const renderContributors = (contributors, affiliations) => {
// generates a list of unique institutions by order of appearance in contributors
const buildAffiliations = (contributors = []) => {
const affiliations = [];
const affiliations: any = [];
contributors.forEach((contributor) => {
const { institution } = contributor;
if (affiliations.indexOf(institution) === -1) {
@@ -37,13 +37,13 @@ const buildAffiliations = (contributors = []) => {
return affiliations;
};
const renderAffiliations = (affiliations) => {
const renderAffiliations = (affiliations: any) => {
if (affiliations.length === 0) return null;
return (
<>
<H3>Affiliations</H3>
<UL>
{affiliations.map((item, index) => (
{affiliations.map((item: any, index: any) => (
<div key={item}>
<sup>{index + 1}</sup>
{" "}
@@ -55,7 +55,7 @@ const renderAffiliations = (affiliations) => {
);
};
const renderDOILink = (type, doi) => {
const renderDOILink = (type: any, doi: any) => {
if (!doi) return null;
return (
<>
@@ -71,7 +71,10 @@ const renderDOILink = (type, doi) => {
const ONTOLOGY_KEY = "ontology_term_id";
// Render list of metadata attributes found in categorical field
const renderDatasetMetadata = (singleValueCategories, corporaMetadata) => {
const renderDatasetMetadata = (
singleValueCategories: any,
corporaMetadata: any
) => {
if (singleValueCategories.size === 0) return null;
return (
<>
@@ -93,28 +96,30 @@ const renderDatasetMetadata = (singleValueCategories, corporaMetadata) => {
return (
<tr {...{ key }}>
<td>{`${key}:`}</td>
{/* @ts-expect-error ts-migrate(2322) FIXME: Type 'unknown' is not assignable to type 'ReactNod... Remove this comment to see the full error message */}
<td>{value}</td>
<td />
</tr>
);
})}
{Array.from(singleValueCategories).reduce((elems, pair) => {
// @ts-expect-error ts-migrate(2488) FIXME: Type 'unknown' must have a '[Symbol.iterator]()' m... Remove this comment to see the full error message
const [category, value] = pair;
// If the value is empty skip it
if (!value) return elems;
// If this category is a ontology term, let's add its value to the previous node
if (String(category).includes(ONTOLOGY_KEY)) {
const prevElem = elems.pop();
const prevElem = (elems as any).pop();
const newChildren = [...prevElem.props.children];
newChildren.splice(2, 1, [<td key="ontology">{value}</td>]);
// Props aren't extensible so we must clone and alter the component to append the new child
elems.push(
(elems as any).push(
React.cloneElement(prevElem, prevElem.props, newChildren)
);
} else {
// Create the list item
elems.push(
(elems as any).push(
<tr key={category}>
<td>{`${category}:`}</td>
<td>{value}</td>
@@ -132,14 +137,14 @@ const renderDatasetMetadata = (singleValueCategories, corporaMetadata) => {
// Renders any links found in the config where link_type is not "SUMMARY"
// If there are no links in the config, render the aboutURL
const renderLinks = (projectLinks, aboutURL) => {
const renderLinks = (projectLinks: any, aboutURL: any) => {
if (!projectLinks && !aboutURL) return null;
if (projectLinks)
return (
<>
<H3>Project Links</H3>
<UL>
{projectLinks.map((link) => {
{projectLinks.map((link: any) => {
if (link.link_type === "SUMMARY") return null;
return (
<li key={link.link_name}>
@@ -166,6 +171,7 @@ const renderLinks = (projectLinks, aboutURL) => {
};
const InfoFormat = React.memo(
// @ts-expect-error ts-migrate(2339) FIXME: Property 'datasetTitle' does not exist on type '{ ... Remove this comment to see the full error message
({ datasetTitle, singleValueCategories, aboutURL, dataPortalProps = {} }) => {
if (
["1.0.0", "1.1.0"].indexOf(
client/src/components/labelInput.js → client/src/components/labelInput.tsx
+26 -12
View File
@@ -3,7 +3,9 @@ import { InputGroup, MenuItem, Keys } from "@blueprintjs/core";
import { Suggest } from "@blueprintjs/select";
import fuzzysort from "fuzzysort";
export default class LabelInput extends React.PureComponent {
type State = any;
export default class LabelInput extends React.PureComponent<{}, State> {
/*
Input widget for text labels, which acts like an InputGroup, but will also
accept a suggestion list (of labels), with sublime-like suggest search.
@@ -26,9 +28,10 @@ export default class LabelInput extends React.PureComponent {
/* maxinum number of suggestions */
static QueryResultLimit = 100;
constructor(props) {
constructor(props: {}) {
super(props);
// @ts-expect-error ts-migrate(2339) FIXME: Property 'label' does not exist on type '{}'.
const { label } = props;
const query = label || "";
const queryResults = this.filterLabels(query);
@@ -38,7 +41,7 @@ export default class LabelInput extends React.PureComponent {
};
}
handleQueryChange = (query, event) => {
handleQueryChange = (query: any, event: any) => {
// https://github.com/palantir/blueprint/issues/2983
if (!event) return;
@@ -48,19 +51,21 @@ export default class LabelInput extends React.PureComponent {
queryResults,
});
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onChange' does not exist on type 'Readon... Remove this comment to see the full error message
const { onChange } = this.props;
if (onChange) onChange(query, event);
};
handleItemSelect = (item, event) => {
handleItemSelect = (item: any, event: any) => {
/* only report the select if not already reported via onChange() */
const { target } = item;
const { query } = this.state;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onSelect' does not exist on type 'Readon... Remove this comment to see the full error message
const { onSelect } = this.props;
if (target !== query && onSelect) onSelect(target, event);
};
handleKeyDown = (e) => {
handleKeyDown = (e: any) => {
/*
prevent these events from propagating to containing form/dialog
and causing further side effects (eg, closing dialog, submitting
@@ -75,13 +80,18 @@ export default class LabelInput extends React.PureComponent {
}
};
handleChange = (e) => {
handleChange = (e: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'onChange' does not exist on type 'Readon... Remove this comment to see the full error message
const { onChange } = this.props;
if (onChange) onChange(e.target.value);
};
renderLabelSuggestion = (queryResult, { handleClick, modifiers }) => {
renderLabelSuggestion = (
queryResult: any,
{ handleClick, modifiers }: any
) => {
if (queryResult.newLabel) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'newLabelMessage' does not exist on type ... Remove this comment to see the full error message
const { newLabelMessage } = this.props;
return (
<MenuItem
@@ -106,7 +116,8 @@ export default class LabelInput extends React.PureComponent {
);
};
filterLabels(query) {
filterLabels(query: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'labelSuggestions' does not exist on type... Remove this comment to see the full error message
const { labelSuggestions } = this.props;
if (!labelSuggestions) return [];
@@ -114,7 +125,7 @@ export default class LabelInput extends React.PureComponent {
if (query === "") {
return labelSuggestions
.slice(0, LabelInput.QueryResultLimit)
.map((l) => ({
.map((l: any) => ({
target: l,
score: -10000,
}));
@@ -128,6 +139,7 @@ export default class LabelInput extends React.PureComponent {
let queryResults = fuzzysort.go(query, labelSuggestions, options);
/* exact match will always be first in list */
if (query !== "" && queryResults[0]?.target !== query)
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ target: any; newLabel: true; }' is not ass... Remove this comment to see the full error message
queryResults = [{ target: query, newLabel: true }, ...queryResults];
return queryResults;
@@ -135,6 +147,7 @@ export default class LabelInput extends React.PureComponent {
render() {
const { props } = this;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'labelSuggestions' does not exist on type... Remove this comment to see the full error message
const { labelSuggestions, label, autoFocus = true } = props;
const suggestEnabled = !!labelSuggestions && labelSuggestions.length > 0;
@@ -142,7 +155,7 @@ export default class LabelInput extends React.PureComponent {
return (
<InputGroup
autoFocus={autoFocus}
{...props.inputProps} // eslint-disable-line react/jsx-props-no-spreading --- Allows for modularity
{...(props as any).inputProps} // eslint-disable-line react/jsx-props-no-spreading --- Allows for modularity
value={label}
onChange={this.handleChange}
/>
@@ -151,10 +164,10 @@ export default class LabelInput extends React.PureComponent {
const popoverProps = {
minimal: true,
...props.popoverProps,
...(props as any).popoverProps,
};
const inputProps = {
...props.inputProps,
...(props as any).inputProps,
autoFocus: false,
};
const { queryResults } = this.state;
@@ -170,6 +183,7 @@ export default class LabelInput extends React.PureComponent {
onQueryChange={this.handleQueryChange}
popoverProps={popoverProps}
inputProps={inputProps}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ fill: true; inputValueRenderer: (i: any) =... Remove this comment to see the full error message
onKeyDown={this.handleKeyDown}
/>
</>
client/src/components/leftSidebar/index.js → client/src/components/leftSidebar/index.tsx
+4 -2
View File
@@ -6,12 +6,14 @@ import DynamicScatterplot from "../scatterplot/scatterplot";
import TopLeftLogoAndTitle from "./topLeftLogoAndTitle";
import Continuous from "../continuous/continuous";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
scatterplotXXaccessor: (state as any).controls.scatterplotXXaccessor,
scatterplotYYaccessor: (state as any).controls.scatterplotYYaccessor,
}))
class LeftSideBar extends React.Component {
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'scatterplotXXaccessor' does not exist on... Remove this comment to see the full error message
const { scatterplotXXaccessor, scatterplotYYaccessor } = this.props;
return (
<div
client/src/components/leftSidebar/infoMenu.js → client/src/components/leftSidebar/infoMenu.tsx
+1
View File
@@ -3,6 +3,7 @@ import { Button, Menu, MenuItem, Popover, Position } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
const InformationMenu = React.memo((props) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'libraryVersions' does not exist on type ... Remove this comment to see the full error message
const { libraryVersions, tosURL, privacyURL } = props;
return (
<Popover
client/src/components/leftSidebar/topLeftLogoAndTitle.js → client/src/components/leftSidebar/topLeftLogoAndTitle.tsx
+15 -6
View File
@@ -10,34 +10,43 @@ import InformationMenu from "./infoMenu";
const DATASET_TITLE_FONT_SIZE = 14;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
const { corpora_props: corporaProps } = state.config;
const { corpora_props: corporaProps } = (state as any).config;
const correctVersion =
["1.0.0", "1.1.0"].indexOf(corporaProps?.version?.corpora_schema_version) >
-1;
return {
datasetTitle: state.config?.displayNames?.dataset ?? "",
libraryVersions: state.config?.library_versions,
aboutLink: state.config?.links?.["about-dataset"],
tosURL: state.config?.parameters?.about_legal_tos,
privacyURL: state.config?.parameters?.about_legal_privacy,
datasetTitle: (state as any).config?.displayNames?.dataset ?? "",
libraryVersions: (state as any).config?.library_versions,
aboutLink: (state as any).config?.links?.["about-dataset"],
tosURL: (state as any).config?.parameters?.about_legal_tos,
privacyURL: (state as any).config?.parameters?.about_legal_privacy,
title: correctVersion ? corporaProps?.title : undefined,
};
})
class LeftSideBar extends React.Component {
handleClick = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch({ type: "toggle dataset drawer" });
};
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'datasetTitle' does not exist on type 'Re... Remove this comment to see the full error message
datasetTitle,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'libraryVersions' does not exist on type ... Remove this comment to see the full error message
libraryVersions,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'aboutLink' does not exist on type 'Reado... Remove this comment to see the full error message
aboutLink,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'privacyURL' does not exist on type 'Read... Remove this comment to see the full error message
privacyURL,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'tosURL' does not exist on type 'Readonly... Remove this comment to see the full error message
tosURL,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'Readonly<... Remove this comment to see the full error message
title,
} = this.props;
client/src/components/menubar/authButtons.js → client/src/components/menubar/authButtons.tsx
+6 -2
View File
@@ -17,6 +17,7 @@ import { IconNames } from "@blueprintjs/icons";
import * as globals from "../../globals";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module './menubar.css' or its correspo... Remove this comment to see the full error message
import styles from "./menubar.css";
import { storageGet, storageSet, KEYS } from "../util/localStorage";
@@ -31,11 +32,12 @@ const LOGIN_PROMPT_OFF = "off";
const Auth = React.memo((props) => {
const [isPromptOpen, setIsPromptOpen] = useState(shouldShowPrompt());
// @ts-expect-error ts-migrate(2339) FIXME: Property 'auth' does not exist on type '{ children... Remove this comment to see the full error message
const { auth, userInfo } = props;
const isAuthenticated = userInfo && userInfo.is_authenticated;
window.userInfo = userInfo;
(window as any).userInfo = userInfo;
const randomInt = Math.random() * 15;
const sexIndex = Math.floor(randomInt / 5);
@@ -75,6 +77,7 @@ const Auth = React.memo((props) => {
>
{/* eslint-disable-next-line no-constant-condition -- disable profile picture until CSP is tweaked */}
{userInfo?.picture && false ? (
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ alt: string; size: string; src: any; }' is... Remove this comment to see the full error message
<img alt="profile" size="21px" src={userInfo?.picture} />
) : (
<span style={{ fontSize: "18px" }}>{scientist}</span>
@@ -123,11 +126,12 @@ const Auth = React.memo((props) => {
function shouldShowPrompt() {
if (storageGet(KEYS.LOGIN_PROMPT) === LOGIN_PROMPT_OFF) return false;
// @ts-expect-error ts-migrate(2774) FIXME: This condition will always return true since the f... Remove this comment to see the full error message
return shouldShowAuth && !isAuthenticated;
}
});
function PromptContent({ setIsPromptOpen }) {
function PromptContent({ setIsPromptOpen }: any) {
const [isChecked, setIsChecked] = useState(false);
function handleOKClick() {
client/src/components/menubar/cellSetButtons.js → client/src/components/menubar/cellSetButtons.tsx
+4 -2
View File
@@ -4,17 +4,19 @@ import { connect } from "react-redux";
import { tooltipHoverOpenDelay } from "../../globals";
import actions from "../../actions";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
differential: state.differential,
differential: (state as any).differential,
}))
class CellSetButton extends React.PureComponent {
set() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, eitherCellSetOneOrTwo } = this.props;
dispatch(actions.setCellSetFromSelection(eitherCellSetOneOrTwo));
}
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'differential' does not exist on type 'Re... Remove this comment to see the full error message
const { differential, eitherCellSetOneOrTwo } = this.props;
const cellListName = `celllist${eitherCellSetOneOrTwo}`;
const cellsSelected = differential[cellListName]
client/src/components/menubar/clip.js → client/src/components/menubar/clip.tsx
+12 -1
View File
@@ -12,19 +12,30 @@ import {
import { IconNames } from "@blueprintjs/icons";
import { tooltipHoverOpenDelay } from "../../globals";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module './menubar.css' or its correspo... Remove this comment to see the full error message
import styles from "./menubar.css";
const Clip = React.memo((props) => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'pendingClipPercentiles' does not exist o... Remove this comment to see the full error message
pendingClipPercentiles,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'clipPercentileMin' does not exist on typ... Remove this comment to see the full error message
clipPercentileMin,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'clipPercentileMax' does not exist on typ... Remove this comment to see the full error message
clipPercentileMax,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleClipOpening' does not exist on typ... Remove this comment to see the full error message
handleClipOpening,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleClipClosing' does not exist on typ... Remove this comment to see the full error message
handleClipClosing,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleClipCommit' does not exist on type... Remove this comment to see the full error message
handleClipCommit,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'isClipDisabled' does not exist on type '... Remove this comment to see the full error message
isClipDisabled,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleClipOnKeyPress' does not exist on ... Remove this comment to see the full error message
handleClipOnKeyPress,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleClipPercentileMaxValueChange' does... Remove this comment to see the full error message
handleClipPercentileMaxValueChange,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleClipPercentileMinValueChange' does... Remove this comment to see the full error message
handleClipPercentileMinValueChange,
} = props;
@@ -34,7 +45,7 @@ const Clip = React.memo((props) => {
pendingClipPercentiles?.clipPercentileMax ?? clipPercentileMax;
const intent =
clipPercentileMin > 0 || clipPercentileMax < 100
? Intent.INTENT_WARNING
? (Intent as any).INTENT_WARNING
: Intent.NONE;
return (
client/src/components/menubar/diffexpButtons.js → client/src/components/menubar/diffexpButtons.tsx
+10 -8
View File
@@ -2,17 +2,21 @@ import React from "react";
import { connect } from "react-redux";
import { ButtonGroup, AnchorButton, Tooltip } from "@blueprintjs/core";
import * as globals from "../../globals";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module './menubar.css' or its correspo... Remove this comment to see the full error message
import styles from "./menubar.css";
import actions from "../../actions";
import CellSetButton from "./cellSetButtons";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
differential: state.differential,
diffexpMayBeSlow: state.config?.parameters?.["diffexp-may-be-slow"] ?? false,
diffexpCellcountMax: state.config?.limits?.diffexp_cellcount_max,
differential: (state as any).differential,
diffexpMayBeSlow:
(state as any).config?.parameters?.["diffexp-may-be-slow"] ?? false,
diffexpCellcountMax: (state as any).config?.limits?.diffexp_cellcount_max,
}))
class DiffexpButtons extends React.PureComponent {
computeDiffExp = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, differential } = this.props;
if (differential.celllist1 && differential.celllist2) {
dispatch(
@@ -26,31 +30,29 @@ class DiffexpButtons extends React.PureComponent {
render() {
/* diffexp-related buttons may be disabled */
// @ts-expect-error ts-migrate(2339) FIXME: Property 'differential' does not exist on type 'Re... Remove this comment to see the full error message
const { differential, diffexpMayBeSlow, diffexpCellcountMax } = this.props;
const haveBothCellSets =
!!differential.celllist1 && !!differential.celllist2;
const haveEitherCellSet =
!!differential.celllist1 || !!differential.celllist2;
const slowMsg = diffexpMayBeSlow
? " (CAUTION: large dataset - may take longer or fail)"
: "";
const tipMessage = `See top 10 differentially expressed genes${slowMsg}`;
const tipMessageWarn = `The total number of cells for differential expression computation
may not exceed ${diffexpCellcountMax}. Try reselecting new cell sets.`;
const warnMaxSizeExceeded =
haveEitherCellSet &&
!!diffexpCellcountMax &&
(differential.celllist1?.length ?? 0) +
(differential.celllist2?.length ?? 0) >
diffexpCellcountMax;
return (
<ButtonGroup className={styles.menubarButton}>
{/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
<CellSetButton eitherCellSetOneOrTwo={1} />
{/* @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. */}
<CellSetButton eitherCellSetOneOrTwo={2} />
<Tooltip
content={warnMaxSizeExceeded ? tipMessageWarn : tipMessage}
client/src/components/menubar/index.js → client/src/components/menubar/index.tsx
+56 -22
View File
@@ -3,6 +3,7 @@ import { connect } from "react-redux";
import { ButtonGroup, AnchorButton, Tooltip } from "@blueprintjs/core";
import * as globals from "../../globals";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module './menubar.css' or its correspo... Remove this comment to see the full error message
import styles from "./menubar.css";
import actions from "../../actions";
import Clip from "./clip";
@@ -13,9 +14,13 @@ import UndoRedoReset from "./undoRedo";
import DiffexpButtons from "./diffexpButtons";
import { getEmbSubsetView } from "../../util/stateManager/viewStackHelpers";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Defa... Remove this comment to see the full error message
const { annoMatrix } = state;
const crossfilter = state.obsCrossfilter;
const crossfilter = (state as any).obsCrossfilter;
const selectedCount = crossfilter.countSelected();
const subsetPossible =
@@ -28,30 +33,33 @@ import { getEmbSubsetView } from "../../util/stateManager/viewStackHelpers";
return {
subsetPossible,
subsetResetPossible,
graphInteractionMode: state.controls.graphInteractionMode,
graphInteractionMode: (state as any).controls.graphInteractionMode,
clipPercentileMin: Math.round(100 * (annoMatrix?.clipRange?.[0] ?? 0)),
clipPercentileMax: Math.round(100 * (annoMatrix?.clipRange?.[1] ?? 1)),
userDefinedGenes: state.controls.userDefinedGenes,
colorAccessor: state.colors.colorAccessor,
scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
libraryVersions: state.config?.library_versions,
auth: state.config?.authentication,
userInfo: state.userInfo,
userDefinedGenes: (state as any).controls.userDefinedGenes,
colorAccessor: (state as any).colors.colorAccessor,
scatterplotXXaccessor: (state as any).controls.scatterplotXXaccessor,
scatterplotYYaccessor: (state as any).controls.scatterplotYYaccessor,
libraryVersions: (state as any).config?.library_versions,
auth: (state as any).config?.authentication,
userInfo: (state as any).userInfo,
// @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
undoDisabled: state["@@undoable/past"].length === 0,
// @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
redoDisabled: state["@@undoable/future"].length === 0,
aboutLink: state.config?.links?.["about-dataset"],
disableDiffexp: state.config?.parameters?.["disable-diffexp"] ?? false,
aboutLink: (state as any).config?.links?.["about-dataset"],
disableDiffexp:
(state as any).config?.parameters?.["disable-diffexp"] ?? false,
diffexpMayBeSlow:
state.config?.parameters?.["diffexp-may-be-slow"] ?? false,
showCentroidLabels: state.centroidLabels.showLabels,
tosURL: state.config?.parameters?.about_legal_tos,
privacyURL: state.config?.parameters?.about_legal_privacy,
categoricalSelection: state.categoricalSelection,
(state as any).config?.parameters?.["diffexp-may-be-slow"] ?? false,
showCentroidLabels: (state as any).centroidLabels.showLabels,
tosURL: (state as any).config?.parameters?.about_legal_tos,
privacyURL: (state as any).config?.parameters?.about_legal_privacy,
categoricalSelection: (state as any).categoricalSelection,
};
})
class MenuBar extends React.PureComponent {
static isValidDigitKeyEvent(e) {
class MenuBar extends React.PureComponent<{}, State> {
static isValidDigitKeyEvent(e: any) {
/*
Return true if this event is necessary to enter a percent number input.
Return false if not.
@@ -75,7 +83,7 @@ class MenuBar extends React.PureComponent {
return key >= 0 && key <= 9;
}
constructor(props) {
constructor(props: {}) {
super(props);
this.state = {
pendingClipPercentiles: null,
@@ -90,7 +98,9 @@ class MenuBar extends React.PureComponent {
const clipPercentileMin = pendingClipPercentiles?.clipPercentileMin;
const clipPercentileMax = pendingClipPercentiles?.clipPercentileMax;
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'clipPercentileMin' does not exist on typ... Remove this comment to see the full error message
clipPercentileMin: currentClipMin,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'clipPercentileMax' does not exist on typ... Remove this comment to see the full error message
clipPercentileMax: currentClipMax,
} = this.props;
@@ -104,7 +114,7 @@ class MenuBar extends React.PureComponent {
return isDisabled;
};
handleClipOnKeyPress = (e) => {
handleClipOnKeyPress = (e: any) => {
/*
allow only numbers, plus other critical keys which
may be required to make a number
@@ -114,7 +124,7 @@ class MenuBar extends React.PureComponent {
}
};
handleClipPercentileMinValueChange = (v) => {
handleClipPercentileMinValueChange = (v: any) => {
/*
Ignore anything that isn't a legit number
*/
@@ -134,7 +144,7 @@ class MenuBar extends React.PureComponent {
});
};
handleClipPercentileMaxValueChange = (v) => {
handleClipPercentileMaxValueChange = (v: any) => {
/*
Ignore anything that isn't a legit number
*/
@@ -156,6 +166,7 @@ class MenuBar extends React.PureComponent {
};
handleClipCommit = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
const { pendingClipPercentiles } = this.state;
const { clipPercentileMin, clipPercentileMax } = pendingClipPercentiles;
@@ -165,6 +176,7 @@ class MenuBar extends React.PureComponent {
};
handleClipOpening = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'clipPercentileMin' does not exist on typ... Remove this comment to see the full error message
const { clipPercentileMin, clipPercentileMax } = this.props;
this.setState({
pendingClipPercentiles: { clipPercentileMin, clipPercentileMax },
@@ -176,6 +188,7 @@ class MenuBar extends React.PureComponent {
};
handleCentroidChange = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch, showCentroidLabels } = this.props;
dispatch({
@@ -185,31 +198,48 @@ class MenuBar extends React.PureComponent {
};
handleSubset = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch(actions.subsetAction());
};
handleSubsetReset = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
const { dispatch } = this.props;
dispatch(actions.resetSubsetAction());
};
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'disableDiffexp' does not exist on type '... Remove this comment to see the full error message
disableDiffexp,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'undoDisabled' does not exist on type 'Re... Remove this comment to see the full error message
undoDisabled,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'redoDisabled' does not exist on type 'Re... Remove this comment to see the full error message
redoDisabled,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message
selectionTool,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'clipPercentileMin' does not exist on typ... Remove this comment to see the full error message
clipPercentileMin,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'clipPercentileMax' does not exist on typ... Remove this comment to see the full error message
clipPercentileMax,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on ... Remove this comment to see the full error message
graphInteractionMode,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'showCentroidLabels' does not exist on ty... Remove this comment to see the full error message
showCentroidLabels,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'categoricalSelection' does not exist on ... Remove this comment to see the full error message
categoricalSelection,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
colorAccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'subsetPossible' does not exist on type '... Remove this comment to see the full error message
subsetPossible,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'subsetResetPossible' does not exist on t... Remove this comment to see the full error message
subsetResetPossible,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'userInfo' does not exist on type 'Readon... Remove this comment to see the full error message
userInfo,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'auth' does not exist on type 'Readonly<{... Remove this comment to see the full error message
auth,
} = this.props;
const { pendingClipPercentiles } = this.state;
@@ -238,11 +268,13 @@ class MenuBar extends React.PureComponent {
>
<AuthButtons {...{ auth, userInfo }} />
<UndoRedoReset
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ dispatch: any; undoDisabled: any; redoDisa... Remove this comment to see the full error message
dispatch={dispatch}
undoDisabled={undoDisabled}
redoDisabled={redoDisabled}
/>
<Clip
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ pendingClipPercentiles: any; clipPercentil... Remove this comment to see the full error message
pendingClipPercentiles={pendingClipPercentiles}
clipPercentileMin={clipPercentileMin}
clipPercentileMax={clipPercentileMax}
@@ -283,6 +315,7 @@ class MenuBar extends React.PureComponent {
<AnchorButton
type="button"
data-testid="mode-lasso"
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'IconName ... Remove this comment to see the full error message
icon={selectionButtonIcon}
active={graphInteractionMode === "select"}
onClick={() => {
@@ -313,6 +346,7 @@ class MenuBar extends React.PureComponent {
</Tooltip>
</ButtonGroup>
<Subset
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ subsetPossible: any; subsetResetPossible: ... Remove this comment to see the full error message
subsetPossible={subsetPossible}
subsetResetPossible={subsetResetPossible}
handleSubset={this.handleSubset}
client/src/components/menubar/subset.js → client/src/components/menubar/subset.tsx
+5
View File
@@ -1,13 +1,18 @@
import React from "react";
import { AnchorButton, ButtonGroup, Tooltip } from "@blueprintjs/core";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module './menubar.css' or its correspo... Remove this comment to see the full error message
import styles from "./menubar.css";
import * as globals from "../../globals";
const Subset = React.memo((props) => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'subsetPossible' does not exist on type '... Remove this comment to see the full error message
subsetPossible,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'subsetResetPossible' does not exist on t... Remove this comment to see the full error message
subsetResetPossible,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSubset' does not exist on type '{ ... Remove this comment to see the full error message
handleSubset,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSubsetReset' does not exist on typ... Remove this comment to see the full error message
handleSubsetReset,
} = props;
client/src/components/menubar/undoRedo.js → client/src/components/menubar/undoRedo.tsx
+2
View File
@@ -2,9 +2,11 @@ import React from "react";
import { AnchorButton, ButtonGroup, Tooltip } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { tooltipHoverOpenDelay } from "../../globals";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module './menubar.css' or its correspo... Remove this comment to see the full error message
import styles from "./menubar.css";
const UndoRedo = React.memo((props) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'undoDisabled' does not exist on type '{ ... Remove this comment to see the full error message
const { undoDisabled, redoDisabled, dispatch } = props;
return (
<ButtonGroup className={`${styles.menubarButton}`}>
client/src/components/miniHistogram/index.js → client/src/components/miniHistogram/index.tsx
+10 -2
View File
@@ -7,12 +7,15 @@ import {
} from "@blueprintjs/core";
export default class MiniHistogram extends React.PureComponent {
constructor(props) {
canvasRef: any;
constructor(props: any) {
super(props);
this.canvasRef = React.createRef();
}
drawHistogram = () => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'xScale' does not exist on type 'Readonly... Remove this comment to see the full error message
const { xScale, yScale, bins, width, height } = this.props;
if (!bins) return;
@@ -39,7 +42,8 @@ export default class MiniHistogram extends React.PureComponent {
this.drawHistogram();
};
componentDidUpdate = (prevProps) => {
componentDidUpdate = (prevProps: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'obsOrVarContinuousFieldDisplayName' does... Remove this comment to see the full error message
const { obsOrVarContinuousFieldDisplayName, bins } = this.props;
if (
prevProps.obsOrVarContinuousFieldDisplayName !==
@@ -51,9 +55,13 @@ export default class MiniHistogram extends React.PureComponent {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'domainLabel' does not exist on type 'Rea... Remove this comment to see the full error message
domainLabel,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'obsOrVarContinuousFieldDisplayName' does... Remove this comment to see the full error message
obsOrVarContinuousFieldDisplayName,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
width,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'height' does not exist on type 'Readonly... Remove this comment to see the full error message
height,
} = this.props;
client/src/components/miniStackedBar/index.js
-72
View File
@@ -1,72 +0,0 @@
import React from "react";
export default class MiniStackedBar extends React.PureComponent {
constructor(props) {
super(props);
this.canvasRef = React.createRef();
}
drawStacks = () => {
const {
domainValues,
scale,
domain,
colorTable,
occupancy,
width,
height,
} = this.props;
if (!colorTable || !domainValues) return;
const { scale: colorScale } = colorTable;
const ctx = this.canvasRef?.current.getContext("2d");
ctx.clearRect(0, 0, width, height);
let currentOffset = 0;
let occupancyValue;
let scaledValue;
let value;
for (let i = 0, { length } = domainValues; i < length; i += 1) {
value = domainValues[i];
occupancyValue = occupancy.get(value);
scaledValue = scale(occupancyValue);
ctx.fillStyle = occupancyValue
? colorScale(domain.indexOf(value))
: "rgb(255,255,255)";
ctx.fillRect(currentOffset, 0, occupancyValue ? scaledValue : 0, height);
currentOffset += occupancyValue ? scaledValue : 0;
}
};
componentDidUpdate = (prevProps) => {
const { occupancy } = this.props;
if (occupancy !== prevProps.occupancy) this.drawStacks();
};
componentDidMount = () => {
this.drawStacks();
};
render() {
const { width, height } = this.props;
const { canvas } = this;
if (canvas) canvas.getContext("2d").clearRect(0, 0, width, height);
return (
<canvas
style={{
marginRight: 5,
width,
height,
}}
width={width}
height={height}
ref={this.canvasRef}
/>
);
}
}
client/src/components/miniStackedBar/index.tsx
+84
View File
@@ -0,0 +1,84 @@
import React from "react";
export default class MiniStackedBar extends React.PureComponent {
canvasRef: any;
constructor(props: any) {
super(props);
this.canvasRef = React.createRef();
}
drawStacks = () => {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'domainValues' does not exist on type 'Re... Remove this comment to see the full error message
domainValues,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'Readonly<... Remove this comment to see the full error message
scale,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'domain' does not exist on type 'Readonly... Remove this comment to see the full error message
domain,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
colorTable,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'occupancy' does not exist on type 'Reado... Remove this comment to see the full error message
occupancy,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
width,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'height' does not exist on type 'Readonly... Remove this comment to see the full error message
height,
} = this.props;
if (!colorTable || !domainValues) return;
const { scale: colorScale } = colorTable;
const ctx = this.canvasRef?.current.getContext("2d");
ctx.clearRect(0, 0, width, height);
let currentOffset = 0;
let occupancyValue;
let scaledValue;
let value;
for (let i = 0, { length } = domainValues; i < length; i += 1) {
value = domainValues[i];
occupancyValue = occupancy.get(value);
scaledValue = scale(occupancyValue);
ctx.fillStyle = occupancyValue
? colorScale(domain.indexOf(value))
: "rgb(255,255,255)";
ctx.fillRect(currentOffset, 0, occupancyValue ? scaledValue : 0, height);
currentOffset += occupancyValue ? scaledValue : 0;
}
};
componentDidUpdate = (prevProps: any) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'occupancy' does not exist on type 'Reado... Remove this comment to see the full error message
const { occupancy } = this.props;
if (occupancy !== prevProps.occupancy) this.drawStacks();
};
componentDidMount = () => {
this.drawStacks();
};
render() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
const { width, height } = this.props;
// @ts-expect-error ts-migrate(2339) FIXME: Property 'canvas' does not exist on type 'MiniStac... Remove this comment to see the full error message
const { canvas } = this;
if (canvas) canvas.getContext("2d").clearRect(0, 0, width, height);
return (
<canvas
style={{
marginRight: 5,
width,
height,
}}
width={width}
height={height}
ref={this.canvasRef}
/>
);
}
}
client/src/components/rightSidebar/index.js → client/src/components/rightSidebar/index.tsx
+3 -2
View File
@@ -3,9 +3,10 @@ import { connect } from "react-redux";
import GeneExpression from "../geneExpression";
import * as globals from "../../globals";
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
scatterplotXXaccessor: (state as any).controls.scatterplotXXaccessor,
scatterplotYYaccessor: (state as any).controls.scatterplotYYaccessor,
}))
class RightSidebar extends React.Component {
render() {
client/src/components/scatterplot/drawPointsRegl.js → client/src/components/scatterplot/drawPointsRegl.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { glPointFlags, glPointSize } from "../../util/glHelpers";
export default function drawPointsRegl(regl) {
export default function drawPointsRegl(regl: any) {
return regl({
vert: `
precision mediump float;
client/src/components/scatterplot/scatterplot.js → client/src/components/scatterplot/scatterplot.tsx
+69 -31
View File
@@ -8,6 +8,7 @@ import memoize from "memoize-one";
import Async from "react-async";
import * as globals from "../../globals";
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module './scatterplot.css' or its corr... Remove this comment to see the full error message
import styles from "./scatterplot.css";
import _drawPoints from "./drawPointsRegl";
import { margin, width, height } from "./util";
@@ -22,7 +23,7 @@ import {
flagHighlight,
} from "../../util/glHelpers";
function createProjectionTF(viewportWidth, viewportHeight) {
function createProjectionTF(viewportWidth: any, viewportHeight: any) {
/*
the projection transform accounts for the screen size & other layout
*/
@@ -30,7 +31,7 @@ function createProjectionTF(viewportWidth, viewportHeight) {
return mat3.projection(m, viewportWidth, viewportHeight);
}
function getScale(col, rangeMin, rangeMax) {
function getScale(col: any, rangeMin: any, rangeMax: any) {
if (!col) return null;
const { min, max } = col.summarize();
return d3.scaleLinear().domain([min, max]).range([rangeMin, rangeMax]);
@@ -38,25 +39,30 @@ function getScale(col, rangeMin, rangeMax) {
const getXScale = memoize(getScale);
const getYScale = memoize(getScale);
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'obsCrossfilter' does not exist on type '... Remove this comment to see the full error message
const { obsCrossfilter: crossfilter } = state;
const { scatterplotXXaccessor, scatterplotYYaccessor } = state.controls;
const {
scatterplotXXaccessor,
scatterplotYYaccessor,
} = (state as any).controls;
return {
annoMatrix: state.annoMatrix,
colors: state.colors,
pointDilation: state.pointDilation,
annoMatrix: (state as any).annoMatrix,
colors: (state as any).colors,
pointDilation: (state as any).pointDilation,
// Accessors are var/gene names (strings)
scatterplotXXaccessor,
scatterplotYYaccessor,
crossfilter,
genesets: state.genesets.genesets,
genesets: (state as any).genesets.genesets,
};
})
class Scatterplot extends React.PureComponent {
static createReglState(canvas) {
class Scatterplot extends React.PureComponent<{}, State> {
static createReglState(canvas: any) {
/*
Must be created for each canvas
*/
@@ -70,8 +76,11 @@ class Scatterplot extends React.PureComponent {
const drawPoints = _drawPoints(regl);
// preallocate webgl buffers
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const pointBuffer = regl.buffer();
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const colorBuffer = regl.buffer();
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const flagBuffer = regl.buffer();
return {
@@ -83,10 +92,16 @@ class Scatterplot extends React.PureComponent {
};
}
static watchAsync(props, prevProps) {
static watchAsync(props: any, prevProps: any) {
return !shallowEqual(props.watchProps, prevProps.watchProps);
}
axes: any;
reglCanvas: any;
renderCache: any;
computePointPositions = memoize((X, Y, xScale, yScale) => {
const positions = new Float32Array(2 * X.length);
for (let i = 0, len = X.length; i < len; i += 1) {
@@ -183,7 +198,7 @@ class Scatterplot extends React.PureComponent {
}
);
constructor(props) {
constructor(props: {}) {
super(props);
const viewport = this.getViewportDimensions();
this.axes = false;
@@ -207,7 +222,7 @@ class Scatterplot extends React.PureComponent {
window.removeEventListener("resize", this.handleResize);
}
setReglCanvas = (canvas) => {
setReglCanvas = (canvas: any) => {
this.reglCanvas = canvas;
if (canvas) {
// no need to update this state if we are detaching.
@@ -233,7 +248,7 @@ class Scatterplot extends React.PureComponent {
});
};
fetchAsyncProps = async (props) => {
fetchAsyncProps = async (props: any) => {
const {
scatterplotXXaccessor,
scatterplotYYaccessor,
@@ -295,7 +310,8 @@ class Scatterplot extends React.PureComponent {
};
};
createXQuery(geneName) {
createXQuery(geneName: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix } = this.props;
const { schema } = annoMatrix;
const varIndex = schema?.annotations?.var?.index;
@@ -312,15 +328,17 @@ class Scatterplot extends React.PureComponent {
];
}
createColorByQuery(colors) {
createColorByQuery(colors: any) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix, genesets } = this.props;
const { schema } = annoMatrix;
const { colorMode, colorAccessor } = colors;
return createColorQuery(colorMode, colorAccessor, schema, genesets);
}
updateColorTable(colors, colorDf) {
updateColorTable(colors: any, colorDf: any) {
/* update color table state */
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix } = this.props;
const { schema } = annoMatrix;
const { colorAccessor, userColors, colorMode } = colors;
@@ -334,17 +352,19 @@ class Scatterplot extends React.PureComponent {
}
async fetchData(
scatterplotXXaccessor,
scatterplotYYaccessor,
colors,
pointDilation
scatterplotXXaccessor: any,
scatterplotYYaccessor: any,
colors: any,
pointDilation: any
) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix } = this.props;
const { metadataField: pointDilationAccessor } = pointDilation;
const promises = [];
// X and Y dimensions
promises.push(
// @ts-expect-error ts-migrate(2488) FIXME: Type '(string | { where: { field: string; column: ... Remove this comment to see the full error message
annoMatrix.fetch(...this.createXQuery(scatterplotXXaccessor))
);
promises.push(
@@ -388,7 +408,7 @@ class Scatterplot extends React.PureComponent {
);
});
updateReglAndRender(newRenderCache) {
updateReglAndRender(newRenderCache: any) {
const { positions, colors, flags } = newRenderCache;
this.renderCache = newRenderCache;
const { pointBuffer, colorBuffer, flagBuffer } = this.state;
@@ -399,13 +419,14 @@ class Scatterplot extends React.PureComponent {
}
renderPoints(
regl,
drawPoints,
flagBuffer,
colorBuffer,
pointBuffer,
projectionTF
regl: any,
drawPoints: any,
flagBuffer: any,
colorBuffer: any,
pointBuffer: any,
projectionTF: any
) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
const { annoMatrix } = this.props;
if (!this.reglCanvas || !annoMatrix) return;
@@ -433,12 +454,19 @@ class Scatterplot extends React.PureComponent {
render() {
const {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
dispatch,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
annoMatrix,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'scatterplotXXaccessor' does not exist on... Remove this comment to see the full error message
scatterplotXXaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'scatterplotYYaccessor' does not exist on... Remove this comment to see the full error message
scatterplotYYaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'colors' does not exist on type 'Readonly... Remove this comment to see the full error message
colors,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on type 'Rea... Remove this comment to see the full error message
crossfilter,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'pointDilation' does not exist on type 'R... Remove this comment to see the full error message
pointDilation,
} = this.props;
const { minimized, regl, viewport } = this.state;
@@ -505,6 +533,7 @@ class Scatterplot extends React.PureComponent {
style={{
marginLeft: margin.left,
marginTop: margin.top,
// @ts-expect-error ts-migrate(2322) FIXME: Type '"none" | null' is not assignable to type 'Di... Remove this comment to see the full error message
display: minimized ? "none" : null,
}}
ref={this.setReglCanvas}
@@ -531,11 +560,12 @@ class Scatterplot extends React.PureComponent {
}
return (
<ScatterplotAxis
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ minimized: any; scatterplotYYaccessor: any... Remove this comment to see the full error message
minimized={minimized}
scatterplotYYaccessor={scatterplotYYaccessor}
scatterplotXXaccessor={scatterplotXXaccessor}
xScale={asyncProps.xScale}
yScale={asyncProps.yScale}
xScale={(asyncProps as any).xScale}
yScale={(asyncProps as any).yScale}
/>
);
}}
@@ -551,10 +581,15 @@ export default Scatterplot;
const ScatterplotAxis = React.memo(
({
// @ts-expect-error ts-migrate(2339) FIXME: Property 'minimized' does not exist on type '{ chi... Remove this comment to see the full error message
minimized,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'scatterplotYYaccessor' does not exist on... Remove this comment to see the full error message
scatterplotYYaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'scatterplotXXaccessor' does not exist on... Remove this comment to see the full error message
scatterplotXXaccessor,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'xScale' does not exist on type '{ childr... Remove this comment to see the full error message
xScale,
// @ts-expect-error ts-migrate(2339) FIXME: Property 'yScale' does not exist on type '{ childr... Remove this comment to see the full error message
yScale,
}) => {
/*
@@ -578,7 +613,9 @@ const ScatterplotAxis = React.memo(
// the axes are much cleaner and easier now. No need to rotate and orient
// the axis, just call axisBottom, axisLeft etc.
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const xAxis = d3.axisBottom().ticks(7).scale(xScale);
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
const yAxis = d3.axisLeft().ticks(7).scale(yScale);
// adding axes is also simpler now, just translate x-axis to (0,height)
@@ -621,6 +658,7 @@ const ScatterplotAxis = React.memo(
height={height + margin.top + margin.bottom}
data-testid="scatterplot-svg"
style={{
// @ts-expect-error ts-migrate(2322) FIXME: Type '"none" | null' is not assignable to type 'Di... Remove this comment to see the full error message
display: minimized ? "none" : null,
}}
>
client/src/components/scatterplot/util.js → client/src/components/scatterplot/util.ts
View File
client/src/components/termsPrompt/index.js → client/src/components/termsPrompt/index.tsx
+19 -7
View File
@@ -10,13 +10,19 @@ import {
} from "@blueprintjs/core";
import { storageGet, storageSet, KEYS } from "../util/localStorage";
type State = any;
// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@connect((state) => ({
tosURL: state.config?.parameters?.about_legal_tos,
privacyURL: state.config?.parameters?.about_legal_privacy,
tosURL: (state as any).config?.parameters?.about_legal_tos,
privacyURL: (state as any).config?.parameters?.about_legal_privacy,
}))
class TermsPrompt extends React.PureComponent {
constructor(props) {
class TermsPrompt extends React.PureComponent<{}, State> {
drawerClose: any;
constructor(props: {}) {
super(props);
// @ts-expect-error ts-migrate(2339) FIXME: Property 'tosURL' does not exist on type 'Readonly... Remove this comment to see the full error message
const { tosURL, privacyURL } = this.props;
const cookieDecision = storageGet(KEYS.COOKIE_DECISION, null);
const hasDecided = cookieDecision !== null;
@@ -37,8 +43,10 @@ class TermsPrompt extends React.PureComponent {
handleOK = () => {
this.setState({ isOpen: false });
storageSet(KEYS.COOKIE_DECISION, "yes");
// @ts-expect-error ts-migrate(2339) FIXME: Property 'cookieDecisionCallback' does not exist o... Remove this comment to see the full error message
if (window.cookieDecisionCallback instanceof Function) {
try {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'cookieDecisionCallback' does not exist o... Remove this comment to see the full error message
window.cookieDecisionCallback();
} catch (e) {
// continue
@@ -52,6 +60,7 @@ class TermsPrompt extends React.PureComponent {
};
renderTos() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'tosURL' does not exist on type 'Readonly... Remove this comment to see the full error message
const { tosURL } = this.props;
if (!tosURL) return null;
return (
@@ -75,6 +84,7 @@ class TermsPrompt extends React.PureComponent {
}
renderPrivacy() {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'privacyURL' does not exist on type 'Read... Remove this comment to see the full error message
const { privacyURL } = this.props;
if (!privacyURL) return null;
return (
@@ -101,13 +111,16 @@ class TermsPrompt extends React.PureComponent {
if (!isEnabled || !isOpen) return null;
return (
<Drawer
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; onclose: any; isOpen: a... Remove this comment to see the full error message
onclose={this.drawerClose}
isOpen={isOpen}
size="120px"
position={Position.BOTTOM}
canOutsideClickClose={false}
hasBackdrop /* if the user can't use the app or click outside to dismiss, that should be visually represented with a backdrop */
enforceFocus={false}
hasBackdrop
/* if the user can't use the app or click outside to dismiss, that should be visually represented with a backdrop */ enforceFocus={
false
}
autoFocus={false}
portal={false}
>
@@ -143,5 +156,4 @@ class TermsPrompt extends React.PureComponent {
);
}
}
export default TermsPrompt;
client/src/components/util/localStorage.js → client/src/components/util/localStorage.ts
+2 -2
View File
@@ -3,7 +3,7 @@ export const KEYS = {
LOGIN_PROMPT: "cxg.LOGIN_PROMPT",
};
export function storageGet(key, defaultValue = null) {
export function storageGet(key: any, defaultValue = null) {
try {
const val = window.localStorage.getItem(key);
if (val === null) return defaultValue;
@@ -13,7 +13,7 @@ export function storageGet(key, defaultValue = null) {
}
}
export function storageSet(key, value) {
export function storageSet(key: any, value: any) {
try {
window.localStorage.setItem(key, value);
} catch {
client/src/components/util/truncate.js → client/src/components/util/truncate.tsx
+5 -1
View File
@@ -32,7 +32,7 @@ const SECOND_HALF_INNER_STYLE = {
right: 0,
};
export default (props) => {
export default (props: any) => {
const { children, tooltipAddendum = "" } = props;
// Truncate only support a single child with a text child
@@ -70,9 +70,12 @@ export default (props) => {
const truncatedJSX = (
<span style={splitStyle}>
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ overflow: string; textOverflow: string; wh... Remove this comment to see the full error message */}
<span style={FIRST_HALF_STYLE}>{firstString}</span>
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; overflow: string; whiteS... Remove this comment to see the full error message */}
<span style={SECOND_HALF_STYLE}>
<span style={SECOND_HALF_SPACING_STYLE}>{secondString}</span>
{/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ color: any; position: string; right: numbe... Remove this comment to see the full error message */}
<span style={secondHalfContentStyle}>{secondString}</span>
</span>
</span>
@@ -89,6 +92,7 @@ export default (props) => {
<Tooltip2
content={`${originalString}${tooltipAddendum}`}
hoverOpenDelay={tooltipHoverOpenDelayQuick}
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
targetProps={{ style: children.props.style }}
>
{newChildren}