From 61595c01db808ec39a8ccd6b7cbfef508743e1f3 Mon Sep 17 00:00:00 2001 From: Seve Badajoz Date: Mon, 25 Mar 2024 09:47:06 -0700 Subject: [PATCH 1/4] chore: misc typing --- .../components/brushableHistogram/index.tsx | 89 +++++-------------- .../src/components/continuous/continuous.tsx | 36 ++++---- .../src/components/infoDrawer/infoDrawer.tsx | 4 +- client/src/components/menubar/index.tsx | 28 +++--- 4 files changed, 55 insertions(+), 102 deletions(-) diff --git a/client/src/components/brushableHistogram/index.tsx b/client/src/components/brushableHistogram/index.tsx index 639c8899f..051f0566c 100644 --- a/client/src/components/brushableHistogram/index.tsx +++ b/client/src/components/brushableHistogram/index.tsx @@ -14,6 +14,7 @@ import ErrorLoading from "./error"; import { Dataframe } from "../../util/dataframe"; import { track } from "../../analytics"; import { EVENTS } from "../../analytics/events"; +import { RootState } from "../../reducers"; const MARGIN = { LEFT: 10, // Space for 0 tick label on X axis @@ -32,32 +33,33 @@ const MARGIN_MINI = { const WIDTH_MINI = 120 - MARGIN_MINI.LEFT - MARGIN_MINI.RIGHT; const HEIGHT_MINI = 15 - MARGIN_MINI.TOP - MARGIN_MINI.BOTTOM; +interface BrushableHistogramOwnProps { + isObs: boolean; + isUserDefined?: boolean; + isGeneSetSummary?: boolean; + field: string; +} + +type BrushableHistogramProps = Partial & BrushableHistogramOwnProps; + // @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 '{}'. +@connect((state: RootState, ownProps: BrushableHistogramOwnProps) => { const { isObs, isUserDefined, isGeneSetSummary, field } = ownProps; const myName = makeContinuousDimensionName( { isObs, isUserDefined, isGeneSetSummary }, field ); return { - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - annoMatrix: (state as any).annoMatrix, - isScatterplotXXaccessor: - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - (state as any).controls.scatterplotXXaccessor === field, - isScatterplotYYaccessor: - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - (state as any).controls.scatterplotYYaccessor === field, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - continuousSelectionRange: (state as any).continuousSelection[myName], - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. + annoMatrix: state.annoMatrix, + isScatterplotXXaccessor: state.controls.scatterplotXXaccessor === field, + isScatterplotYYaccessor: state.controls.scatterplotYYaccessor === field, + continuousSelectionRange: state.continuousSelection[myName], isColorAccessor: - (state as any).colors.colorAccessor === field && - (state as any).colors.colorMode !== "color by categorical metadata", + state.colors.colorAccessor === field && + state.colors.colorMode !== "color by categorical metadata", }; }) -class HistogramBrush extends React.PureComponent { +class HistogramBrush extends React.PureComponent { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. static watchAsync(props: any, prevProps: any) { return !shallowEqual(props.watchProps, prevProps.watchProps); @@ -81,18 +83,8 @@ class HistogramBrush extends React.PureComponent { 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; + const { dispatch, field, isObs, isUserDefined, isGeneSetSummary } = + this.props; // ignore programmatically generated events // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. @@ -129,18 +121,8 @@ class HistogramBrush extends React.PureComponent { ) => // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. () => { - 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 { dispatch, field, isObs, isUserDefined, isGeneSetSummary } = + this.props; const minAllowedBrushSize = 10; const smallAmountToAvoidInfiniteLoop = 0.1; @@ -204,7 +186,6 @@ class HistogramBrush extends React.PureComponent { handleSetGeneAsScatterplotX = () => { track(EVENTS.EXPLORER_PLOT_X_BUTTON_CLICKED); - // @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", @@ -212,11 +193,9 @@ class HistogramBrush extends React.PureComponent { }); }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleSetGeneAsScatterplotY = () => { track(EVENTS.EXPLORER_PLOT_Y_BUTTON_CLICKED); - // @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", @@ -224,18 +203,12 @@ class HistogramBrush extends React.PureComponent { }); }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. 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({ @@ -261,14 +234,11 @@ class HistogramBrush extends React.PureComponent { } }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. 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, onGeneExpressionComplete } = 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: Dataframe = await annoMatrix.fetch(...query, globals.numBinsObsX); const column = df.icol(0); @@ -383,7 +353,6 @@ class HistogramBrush extends React.PureComponent { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. createQuery() { - // @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) { @@ -422,35 +391,21 @@ class HistogramBrush extends React.PureComponent { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. 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; diff --git a/client/src/components/continuous/continuous.tsx b/client/src/components/continuous/continuous.tsx index 9c5426da6..96ca99f9b 100644 --- a/client/src/components/continuous/continuous.tsx +++ b/client/src/components/continuous/continuous.tsx @@ -4,41 +4,41 @@ import React from "react"; import { connect } from "react-redux"; import HistogramBrush from "../brushableHistogram"; import Collapse from "../../util/collapse"; +import { RootState } from "../../reducers"; +import AnnoMatrix from "../../annoMatrix/annoMatrix"; +import { AnnotationColumnSchema } from "../../common/types/schema"; +interface ContinuousProps { + schema: AnnoMatrix["schema"]; +} // @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) => ({ - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - schema: (state as any).annoMatrix?.schema, +@connect((state: RootState) => ({ + schema: state.annoMatrix?.schema, })) -class Continuous extends React.PureComponent { - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. +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 - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - .filter((col: any) => col.type === "int32" || col.type === "float32") - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - .filter((col: any) => col.name !== obsIndex) - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - .filter((col: any) => !col.writable) // skip user annotations - they will be treated as categorical - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - .map((col: any) => col.name); + .filter( + (col: AnnotationColumnSchema) => + col.type === "int32" || col.type === "float32" + ) + .filter((col: AnnotationColumnSchema) => col.name !== obsIndex) + .filter((col: AnnotationColumnSchema) => !col.writable) // skip user annotations - they will be treated as categorical + .map((col: AnnotationColumnSchema) => col.name); return allContinuousNames.length ? (
Continuous - {/* eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. */} - {allContinuousNames.map((key: any, zebra: any) => ( + {allContinuousNames.map((key, index) => ( {}} /> ))} diff --git a/client/src/components/infoDrawer/infoDrawer.tsx b/client/src/components/infoDrawer/infoDrawer.tsx index 31ec150ad..a922e8814 100644 --- a/client/src/components/infoDrawer/infoDrawer.tsx +++ b/client/src/components/infoDrawer/infoDrawer.tsx @@ -8,6 +8,7 @@ import InfoFormat, { SingleValueCategories } from "./infoFormat"; import { AppDispatch, RootState } from "../../reducers"; import { selectableCategoryNames } from "../../util/stateManager/controlsHelpers"; import { DatasetMetadata } from "../../common/types/entities"; +import { Schema } from "../../common/types/schema"; /** * Actions dispatched by info drawer. @@ -29,8 +30,7 @@ interface OwnProps { interface StateProps { datasetMetadata: DatasetMetadata; isOpen: boolean; - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - schema: any; + schema: Schema; } type Props = DispatchProps & OwnProps & StateProps; diff --git a/client/src/components/menubar/index.tsx b/client/src/components/menubar/index.tsx index 3d3d9f48e..b7d3a3c38 100644 --- a/client/src/components/menubar/index.tsx +++ b/client/src/components/menubar/index.tsx @@ -330,21 +330,19 @@ class MenuBar extends React.PureComponent<{}, State> { justifyContent: "right", }} > - {seamlessEnabled ? ( - - { - dispatch({ type: "toggle dataset drawer" }); - }} - style={{ - cursor: "pointer", - }} - data-testid="drawer" - /> - - ) : null} + + { + dispatch({ type: "toggle dataset drawer" }); + }} + style={{ + cursor: "pointer", + }} + data-testid="drawer" + /> + {isDownload && ( Date: Mon, 25 Mar 2024 11:15:01 -0700 Subject: [PATCH 2/4] lint --- client/src/components/brushableHistogram/index.tsx | 13 ++++++++++++- client/src/components/continuous/continuous.tsx | 12 +++++++----- client/src/components/geneExpression/gene.tsx | 2 -- client/src/components/geneExpression/geneSet.tsx | 1 - 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/client/src/components/brushableHistogram/index.tsx b/client/src/components/brushableHistogram/index.tsx index 051f0566c..b5f251677 100644 --- a/client/src/components/brushableHistogram/index.tsx +++ b/client/src/components/brushableHistogram/index.tsx @@ -34,7 +34,7 @@ const WIDTH_MINI = 120 - MARGIN_MINI.LEFT - MARGIN_MINI.RIGHT; const HEIGHT_MINI = 15 - MARGIN_MINI.TOP - MARGIN_MINI.BOTTOM; interface BrushableHistogramOwnProps { - isObs: boolean; + isObs?: boolean; isUserDefined?: boolean; isGeneSetSummary?: boolean; field: string; @@ -239,6 +239,17 @@ class HistogramBrush extends React.PureComponent { const { isClipped } = annoMatrix; const query = this.createQuery(); + if (!query) { + return { + histogram: null, + miniHistogram: null, + range: null, + unclippedRange: null, + unclippedRangeColor: null, + isSingleValue: null, + OK2Render: false, + }; + } const df: Dataframe = await annoMatrix.fetch(...query, globals.numBinsObsX); const column = df.icol(0); diff --git a/client/src/components/continuous/continuous.tsx b/client/src/components/continuous/continuous.tsx index 96ca99f9b..4ffbc5a44 100644 --- a/client/src/components/continuous/continuous.tsx +++ b/client/src/components/continuous/continuous.tsx @@ -11,10 +11,12 @@ import { AnnotationColumnSchema } from "../../common/types/schema"; interface ContinuousProps { schema: AnnoMatrix["schema"]; } -// @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: RootState) => ({ - schema: state.annoMatrix?.schema, -})) + +function mapStateToProps(state: RootState) { + return { + schema: state.annoMatrix?.schema, + }; +} class Continuous extends React.PureComponent { render() { /* initial value for iterator to simulate index, ranges is an object */ @@ -48,4 +50,4 @@ class Continuous extends React.PureComponent { } } -export default Continuous; +export default connect(mapStateToProps)(Continuous); diff --git a/client/src/components/geneExpression/gene.tsx b/client/src/components/geneExpression/gene.tsx index e1338126e..489f494d1 100644 --- a/client/src/components/geneExpression/gene.tsx +++ b/client/src/components/geneExpression/gene.tsx @@ -221,7 +221,6 @@ class Gene extends React.Component { {!geneIsExpanded ? (
{
{geneIsExpanded && ( {}} diff --git a/client/src/components/geneExpression/geneSet.tsx b/client/src/components/geneExpression/geneSet.tsx index 1b9ae078d..cccc3549c 100644 --- a/client/src/components/geneExpression/geneSet.tsx +++ b/client/src/components/geneExpression/geneSet.tsx @@ -160,7 +160,6 @@ class GeneSet extends React.Component<{}, State> {
{isOpen && !genesetIsEmpty && ( Date: Mon, 25 Mar 2024 11:15:37 -0700 Subject: [PATCH 3/4] fix npm run lint command --- client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index b41a6d200..4fdd58da1 100644 --- a/client/package.json +++ b/client/package.json @@ -16,7 +16,7 @@ "e2e-stage": "CXG_URL_BASE=https://cellxgene.staging.single-cell.czi.technology playwright test", "e2e-prod": "CXG_URL_BASE=https://cellxgene.cziscience.com playwright test", "fmt": "eslint --fix src __tests__", - "lint": "eslint src __tests__ & npm run type-check", + "lint": "eslint src __tests__ && npm run type-check", "prod": "npm run build -- configuration/webpack/webpack.config.prod.js", "type-check": "tsc --noEmit", "create-supported-browsers-regex": "echo \"module.exports = $(browserslist-useragent-regexp --allowHigherVersions);\" > configuration/webpack/SUPPORTED_BROWSERS_REGEX.js", From 2d97cab3b762814557246d517dfd922e2935b830 Mon Sep 17 00:00:00 2001 From: Seve Badajoz Date: Mon, 25 Mar 2024 11:17:59 -0700 Subject: [PATCH 4/4] fix lint staged --- client/configuration/lint-staged/lint-staged.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/configuration/lint-staged/lint-staged.config.js b/client/configuration/lint-staged/lint-staged.config.js index d492a74e2..a17671055 100644 --- a/client/configuration/lint-staged/lint-staged.config.js +++ b/client/configuration/lint-staged/lint-staged.config.js @@ -1,4 +1,5 @@ module.exports = { "*.{js,ts,jsx,tsx}": "eslint --fix", "src/**/*": "prettier --write --ignore-unknown", + "*.{ts,tsx}": "tsc --noEmit", };