fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-22 06:48:11 +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) => ({
layoutChoice: state.layoutChoice,
genesets: state.genesets.genesets,
colors: state.colors,
dotplot: state.dotplot,
}))
class Dotplot extends React.Component {
constructor(props) {
@@ -39,15 +39,15 @@ class Dotplot extends React.Component {
render() {
const { viewport } = this.state;
const { genesets } = this.props;
const { genesets, dotplot } = this.props;
const _TESTgeneset = genesets.get("bladder urothelial");
const _TESTmetadatField = "tissue";
let _geneset = null;
let _genes = null;
/* TODO(colinmegill) #632 componetize */
if (!_TESTgeneset) return null;
const _genes = Array.from(_TESTgeneset.genes.keys());
if (dotplot.column) {
_geneset = genesets.get(dotplot.column);
_genes = Array.from(_geneset.genes.keys());
}
return (
<div
@@ -70,43 +70,54 @@ class Dotplot extends React.Component {
height={viewport.height}
>
<g
id="dotplot_interface_margin"
id="dotplot_help_text"
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={_TESTmetadatField}
/>
);
})}
</g>
<text>
{!dotplot.row && "Select a row"}{" "}
{!dotplot.column && "Select a column"}
</text>
</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>
</div>
);