mirror of
https://github.com/chanzuckerberg/cellxgene.git
synced 2026-09-30 17:58:12 +08:00
Mim HastieandTimmy Huang
27575b8d86
* Disabled @blueprintjs/classes-constants. #2288. * thuang-eslint-bp-off (#2344) * Disabled @blueprintjs/classes-constants on webpack dev and shared. #2288. * Added TS recommended, suppress lint errors codemod. * Added per-error/warning ignore for tests. * Added per-error/warning ignore for configuration. * Added per-error/warning ignore for src. Removed suppress package. * Minor linting. Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>
91 lines
4.0 KiB
TypeScript
91 lines
4.0 KiB
TypeScript
import React from "react";
|
|
|
|
export default class MiniStackedBar extends React.PureComponent {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
|
|
canvasRef: any;
|
|
|
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
|
|
constructor(props: any) {
|
|
super(props);
|
|
this.canvasRef = React.createRef();
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
|
|
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;
|
|
}
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
|
|
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();
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
|
|
componentDidMount = () => {
|
|
this.drawStacks();
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
|
|
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}
|
|
/>
|
|
);
|
|
}
|
|
}
|