fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-05 13:18:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove hardcoded geneset

Browse Source
This commit is contained in:
Colin Megill
2021-07-23 13:29:27 -07:00
parent 72ee670620
commit 7b01e9e67b
1 changed files with 53 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dotplot/index.js
+53 -42
View File
@@ -6,7 +6,7 @@ import Column from "./column";
@connect((state) => ({ @connect((state) => ({
layoutChoice: state.layoutChoice, layoutChoice: state.layoutChoice,
genesets: state.genesets.genesets, genesets: state.genesets.genesets,
colors: state.colors, dotplot: state.dotplot,
})) }))
class Dotplot extends React.Component { class Dotplot extends React.Component {
constructor(props) { constructor(props) {
@@ -39,15 +39,15 @@ class Dotplot extends React.Component {
render() { render() {
const { viewport } = this.state; const { viewport } = this.state;
const { genesets } = this.props; const { genesets, dotplot } = this.props;
const _TESTgeneset = genesets.get("bladder urothelial"); let _geneset = null;
const _TESTmetadatField = "tissue"; let _genes = null;
/* TODO(colinmegill) #632 componetize */ if (dotplot.column) {
if (!_TESTgeneset) return null; _geneset = genesets.get(dotplot.column);
_genes = Array.from(_geneset.genes.keys());
const _genes = Array.from(_TESTgeneset.genes.keys()); }
return ( return (
<div <div
@@ -70,43 +70,54 @@ class Dotplot extends React.Component {
height={viewport.height} height={viewport.height}
> >
<g <g
id="dotplot_interface_margin" id="dotplot_help_text"
transform={`translate(${this.dotplotLeftPadding},${this.dotplotTopPadding})`} transform={`translate(${this.dotplotLeftPadding},${this.dotplotTopPadding})`}
> >
{/* Acaa1b, Mal, Foxq1 ... across the top of the dotplot */} <text>
<g id="dotplot_column_labels" transform="translate(14,-13)"> {!dotplot.row && "Select a row"}{" "}
{_genes.map((_geneSymbol, _geneIndexInGeneset) => { {!dotplot.column && "Select a column"}
return ( </text>
<text
key={_geneSymbol}
x={0}
y={0}
transform={`translate(${
_geneIndexInGeneset * this.rowColumnSize
}) rotate(270)`}
style={{ fill: "black", font: "12px Roboto Condensed" }}
>
{_geneSymbol}
</text>
);
})}
</g>
{/* loop over genes in the geneset, */}
<g id="dotplot_columns">
{_genes.map((_geneSymbol, _geneIndexInGeneset) => {
return (
<Column
key={_geneSymbol}
_geneSymbol={_geneSymbol}
_geneIndex={_geneIndexInGeneset}
viewport={viewport}
rowColumnSize={this.rowColumnSize}
metadataField={_TESTmetadatField}
/>
);
})}
</g>
</g> </g>
{dotplot.row && dotplot.column && (
<g
id="dotplot_interface_margin"
transform={`translate(${this.dotplotLeftPadding},${this.dotplotTopPadding})`}
>
{/* Acaa1b, Mal, Foxq1 ... across the top of the dotplot */}
<g id="dotplot_column_labels" transform="translate(14,-13)">
{_genes.map((_geneSymbol, _geneIndexInGeneset) => {
return (
<text
key={_geneSymbol}
x={0}
y={0}
transform={`translate(${
_geneIndexInGeneset * this.rowColumnSize
}) rotate(270)`}
style={{ fill: "black", font: "12px Roboto Condensed" }}
>
{_geneSymbol}
</text>
);
})}
</g>
{/* loop over genes in the geneset, */}
<g id="dotplot_columns">
{_genes.map((_geneSymbol, _geneIndexInGeneset) => {
return (
<Column
key={_geneSymbol}
_geneSymbol={_geneSymbol}
_geneIndex={_geneIndexInGeneset}
viewport={viewport}
rowColumnSize={this.rowColumnSize}
metadataField={dotplot.row}
/>
);
})}
</g>
</g>
)}
</svg> </svg>
</div> </div>
); );