metadata as var, maxsize todo

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,
           }}
         >
           <Async.Pending initial>
@@ -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();

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 (
     <g
@@ -38,7 +41,7 @@ const Dot = (props) => {
         </text>
       )}
       <circle
-        r={(rest / zeros) * 10 > 20 ? 20 : (rest / zeros) * 10}
+        r={_radius}
         cx="11"
         cy="-3.5"
         style={{

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}
                   />
                 );
               })}