diff --git a/client/src/components/dotplot/column.js b/client/src/components/dotplot/column.js index 51daa3a0..6a5f46ee 100644 --- a/client/src/components/dotplot/column.js +++ b/client/src/components/dotplot/column.js @@ -30,11 +30,17 @@ class Column extends React.Component { createCategorySummaryFromDfCol = memoize(createCategorySummaryFromDfCol); fetchAsyncProps = async (props) => { - const { annoMatrix, colors, _geneSymbol, _geneIndex } = props.watchProps; + const { + annoMatrix, + colors, + _geneSymbol, + _geneIndex, + metadataField, + } = props.watchProps; const [categoryData, categorySummary, colorData] = await this.fetchData( annoMatrix, - "tissue", + metadataField, colors, _geneSymbol, _geneIndex @@ -131,6 +137,7 @@ class Column extends React.Component { _geneSymbol, _geneIndex, rowColumnSize, + metadataField, } = this.props; return ( @@ -145,6 +152,7 @@ class Column extends React.Component { viewport, _geneSymbol, _geneIndex, + metadataField, }} > @@ -173,8 +181,6 @@ class Column extends React.Component { /* TODO(colinmegill) #632 wire to dotplot */ - const metadataField = "tissue"; - const groupBy = categoryData.col(metadataField); const col = colorData.icol(0); const range = col.summarize(); diff --git a/client/src/components/dotplot/dot.js b/client/src/components/dotplot/dot.js index 795cd469..24388a79 100644 --- a/client/src/components/dotplot/dot.js +++ b/client/src/components/dotplot/dot.js @@ -19,7 +19,10 @@ const Dot = (props) => { (acc, current) => acc + current ); /* SUM REMAINING ELEMENTS */ - /* TODO(colinmegill) #632 colorscale */ + /* TODO(colinmegill) #632 scale between correct dimensions */ + const _maxSize = rowColumnSize; + const _radius = + (rest / zeros) * 10 > _maxSize ? _maxSize : (rest / zeros) * 10; return ( { )} 20 ? 20 : (rest / zeros) * 10} + r={_radius} cx="11" cy="-3.5" style={{ diff --git a/client/src/components/dotplot/index.js b/client/src/components/dotplot/index.js index ffa58bba..799dc491 100644 --- a/client/src/components/dotplot/index.js +++ b/client/src/components/dotplot/index.js @@ -42,6 +42,7 @@ class Dotplot extends React.Component { const { genesets } = this.props; const _TESTgeneset = genesets.get("bladder urothelial"); + const _TESTmetadatField = "cell_ontology_class"; /* TODO(colinmegill) #632 componetize */ if (!_TESTgeneset) return null; @@ -100,6 +101,7 @@ class Dotplot extends React.Component { _geneIndex={_geneIndexInGeneset} viewport={viewport} rowColumnSize={this.rowColumnSize} + metadataField={_TESTmetadatField} /> ); })}