toggleable

client/src/components/brushableHistogram/histogram.js

@@ -17,6 +17,7 @@ const Histogram = ({
   margin,
   isColorBy,
   selectionRange,
+  mini,
 }) => {
   const svgRef = useRef(null);
   const [brush, setBrush] = useState(null);
@@ -28,6 +29,8 @@ const Histogram = ({
     const { marginLeft, marginRight, marginBottom, marginTop } = margin;
     const { x, y, bins, binStart, binEnd, binWidth } = histogram;
     const svg = d3.select(svgRef.current);
+    const binPadding = mini ? 0 : -1;
+    const defaultBarColor = mini ? "black" : "#bbb";
 
     /* Remove everything */
     svg.selectAll("*").remove();
@@ -62,11 +65,13 @@ const Histogram = ({
         .append("rect")
         .attr("x", (d, i) => x(binStart(i)) + 1)
         .attr("y", (d) => y(d))
-        .attr("width", (d, i) => x(binEnd(i)) - x(binStart(i)) - 1)
+        .attr("width", (d, i) => x(binEnd(i)) - x(binStart(i)) - binPadding)
         .attr("height", (d) => y(0) - y(d))
         .style(
           "fill",
-          isColorBy ? (d, i) => colorScale(histogramScale(binStart(i))) : "#bbb"
+          isColorBy
+            ? (d, i) => colorScale(histogramScale(binStart(i)))
+            : defaultBarColor
         );
     }
 

client/src/components/brushableHistogram/index.js

@@ -53,14 +53,30 @@ class HistogramBrush extends React.PureComponent {
     const marginRight = 54; // space for Y axis & labels
     const marginBottom = 25; // space for X axis & labels
     const marginTop = 3;
-    this.margin = {
+
+    const marginLeftMini = 10; // Space for 0 tick label on X axis
+    const marginRightMini = 54; // space for Y axis & labels
+    const marginBottomMini = 25; // space for X axis & labels
+    const marginTopMini = 3;
+
+    this.state = {
+      margin: {
         marginLeft,
         marginRight,
         marginBottom,
         marginTop,
+      },
+      width: 340 - marginLeft - marginRight,
+      height: 135 - marginTop - marginBottom,
+      marginMini: {
+        marginLeftMini,
+        marginRightMini,
+        marginBottomMini,
+        marginTopMini,
+      },
+      widthMini: 340 - marginLeft - marginRight,
+      heightMini: 135 - marginTop - marginBottom,
     };
-    this.width = 340 - marginLeft - marginRight;
-    this.height = 135 - marginTop - marginBottom;
   }
 
   onBrush = (selection, x, eventType) => {
@@ -190,6 +206,14 @@ class HistogramBrush extends React.PureComponent {
 
   fetchAsyncProps = async () => {
     const { annoMatrix } = this.props;
+    const {
+      margin,
+      width,
+      height,
+      marginMini,
+      widthMini,
+      heightMini,
+    } = this.state;
     const { isClipped } = annoMatrix;
 
     const query = this.createQuery();
@@ -217,11 +241,12 @@ class HistogramBrush extends React.PureComponent {
         : globals.blue,
     ];
 
-    const histogram = this.calcHistogramCache(
+    const histogram = this.calcHistogramCache(column, margin, width, height);
+    const miniHistogram = this.calcHistogramCache(
       column,
-      this.margin,
+      marginMini,
-      this.width,
+      widthMini,
-      this.height
+      heightMini
     );
 
     const isSingleValue = summary.min === summary.max;
@@ -235,6 +260,7 @@ class HistogramBrush extends React.PureComponent {
 
     return {
       histogram,
+      miniHistogram,
       range,
       unclippedRange,
       unclippedRangeColor,
@@ -314,7 +340,16 @@ class HistogramBrush extends React.PureComponent {
       zebra,
       continuousSelectionRange,
       isObs,
+      mini,
     } = this.props;
+    const {
+      margin,
+      width,
+      height,
+      marginMini,
+      widthMini,
+      heightMini,
+    } = this.state;
     const fieldForId = field.replace(/\s/g, "_");
     const showScatterPlot = isDiffExp || isUserDefined;
 
@@ -346,6 +381,7 @@ class HistogramBrush extends React.PureComponent {
                   backgroundColor: zebra ? globals.lightestGrey : "white",
                 }}
               >
+                {!mini ? (
                   <HistogramHeader
                     fieldId={field}
                     isColorBy={isColorAccessor}
@@ -361,19 +397,24 @@ class HistogramBrush extends React.PureComponent {
                       showScatterPlot ? this.handleSetGeneAsScatterplotY : null
                     }
                   />
+                ) : null}
                 <Histogram
                   field={field}
                   fieldForId={fieldForId}
                   display={asyncProps.isSingleValue ? "none" : "block"}
-                  histogram={asyncProps.histogram}
+                  histogram={
-                  width={this.width}
+                    mini ? asyncProps.miniHistogram : asyncProps.histogram
-                  height={this.height}
+                  }
+                  width={mini ? widthMini : width}
+                  height={mini ? heightMini : height}
                   onBrush={this.onBrush}
                   onBrushEnd={this.onBrushEnd}
-                  margin={this.margin}
+                  margin={mini ? marginMini : margin}
                   isColorBy={isColorAccessor}
                   selectionRange={continuousSelectionRange}
+                  mini={mini}
                 />
+                {!mini ? (
                   <HistogramFooter
                     displayName={field}
                     hideRanges={asyncProps.isSingleValue}
@@ -384,6 +425,7 @@ class HistogramBrush extends React.PureComponent {
                     logFoldChange={logFoldChange}
                     pvalAdj={pvalAdj}
                   />
+                ) : null}
               </div>
             ) : null
           }

client/src/components/geneExpression/gene.js

@@ -11,7 +11,7 @@ import HistogramBrush from "../brushableHistogram";
 
 // import TestMiniHisto from "./test_miniHisto";
 import * as globals from "../../globals";
-import GeneMenus from "./menus/geneMenus";
+// import GeneMenus from "./menus/geneMenus";
 
 @connect(() => {
   return {};
@@ -41,15 +41,12 @@ class Gene extends React.Component {
     const { gene } = this.props;
     const { geneIsExpanded } = this.state;
     return (
+      <div>
         <div
           style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "baseline",
             marginLeft: 15,
           }}
         >
-        <div>
           <Icon
             icon="drag-handle-horizontal"
             iconSize={12}
@@ -82,24 +79,6 @@ class Gene extends React.Component {
                 {gene}
               </span>
             </Truncate>
-            <HistogramBrush isUserDefined field={gene} mini={!geneIsExpanded} />
-
-            {/* <TestMiniHisto /> */}
-          </span>
-        </div>
-
-        <div>
-          <GeneMenus genesetsEditable gene={gene} />
-          <AnchorButton
-            minimal
-            small
-            data-testclass="colorby"
-            data-testid={`colorby-${gene}`}
-            onClick={/* todo gene sets */ () => {}}
-            active={false /* todo gene sets */}
-            intent="none"
-            icon={<Icon icon="tint" iconSize={12} />}
-          />
             <AnchorButton
               minimal
               small
@@ -110,7 +89,13 @@ class Gene extends React.Component {
               intent="none"
               icon={<Icon icon="maximize" iconSize={10} />}
             />
+            {/* <TestMiniHisto /> */}
+          </span>
         </div>
+
+        <HistogramBrush isUserDefined field={gene} mini={!geneIsExpanded} />
+
+        {/* <GeneMenus genesetsEditable gene={gene} /> */}
       </div>
     );
   }
@@ -118,6 +103,17 @@ class Gene extends React.Component {
 
 export default Gene;
 
+// <AnchorButton
+//   minimal
+//   small
+//   data-testclass="colorby"
+//   data-testid={`colorby-${gene}`}
+//   onClick={/* todo gene sets */ () => {}}
+//   active={false /* todo gene sets */}
+//   intent="none"
+//   icon={<Icon icon="tint" iconSize={12} />}
+// />
+
 // {geneIsExpanded ? (
 //   <FaChevronDown
 //     data-testclass="gene-expand-is-expanded"

client/src/components/geneExpression/geneSet.js

@@ -12,7 +12,7 @@ import { memoize } from "../../util/dataframe/util";
 import Truncate from "../util/truncate";
 // import TestMiniHisto from "./test_miniHisto";
 import * as globals from "../../globals";
-import GenesetMenus from "./menus/genesetMenus";
+// import GenesetMenus from "./menus/genesetMenus";
 
 @connect((state, ownProps) => {
   return {
@@ -145,7 +145,7 @@ class GeneSet extends React.Component {
           </span>
           <div>
             {/* <TestMiniHisto /> */}
-            <GenesetMenus genesetsEditable geneset={setName} />
+            {/* <GenesetMenus genesetsEditable geneset={setName} /> */}
             <Tooltip
               content="Color by geneset"
               position={Position.LEFT}