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 = {
-      marginLeft,
-      marginRight,
-      marginBottom,
-      marginTop,
+
+    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,
-      this.width,
-      this.height
+      marginMini,
+      widthMini,
+      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,44 +381,51 @@ class HistogramBrush extends React.PureComponent {
                   backgroundColor: zebra ? globals.lightestGrey : "white",
                 }}
               >
-                <HistogramHeader
-                  fieldId={field}
-                  isColorBy={isColorAccessor}
-                  isObs={isObs}
-                  onColorByClick={this.handleColorAction(dispatch)}
-                  onRemoveClick={isUserDefined ? this.removeHistogram : null}
-                  isScatterPlotX={isScatterplotXXaccessor}
-                  isScatterPlotY={isScatterplotYYaccessor}
-                  onScatterPlotXClick={
-                    showScatterPlot ? this.handleSetGeneAsScatterplotX : null
-                  }
-                  onScatterPlotYClick={
-                    showScatterPlot ? this.handleSetGeneAsScatterplotY : null
-                  }
-                />
+                {!mini ? (
+                  <HistogramHeader
+                    fieldId={field}
+                    isColorBy={isColorAccessor}
+                    isObs={isObs}
+                    onColorByClick={this.handleColorAction(dispatch)}
+                    onRemoveClick={isUserDefined ? this.removeHistogram : null}
+                    isScatterPlotX={isScatterplotXXaccessor}
+                    isScatterPlotY={isScatterplotYYaccessor}
+                    onScatterPlotXClick={
+                      showScatterPlot ? this.handleSetGeneAsScatterplotX : null
+                    }
+                    onScatterPlotYClick={
+                      showScatterPlot ? this.handleSetGeneAsScatterplotY : null
+                    }
+                  />
+                ) : null}
                 <Histogram
                   field={field}
                   fieldForId={fieldForId}
                   display={asyncProps.isSingleValue ? "none" : "block"}
-                  histogram={asyncProps.histogram}
-                  width={this.width}
-                  height={this.height}
+                  histogram={
+                    mini ? asyncProps.miniHistogram : asyncProps.histogram
+                  }
+                  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}
                 />
-                <HistogramFooter
-                  displayName={field}
-                  hideRanges={asyncProps.isSingleValue}
-                  rangeMin={asyncProps.unclippedRange[0]}
-                  rangeMax={asyncProps.unclippedRange[1]}
-                  rangeColorMin={asyncProps.unclippedRangeColor[0]}
-                  rangeColorMax={asyncProps.unclippedRangeColor[1]}
-                  logFoldChange={logFoldChange}
-                  pvalAdj={pvalAdj}
-                />
+                {!mini ? (
+                  <HistogramFooter
+                    displayName={field}
+                    hideRanges={asyncProps.isSingleValue}
+                    rangeMin={asyncProps.unclippedRange[0]}
+                    rangeMax={asyncProps.unclippedRange[1]}
+                    rangeColorMin={asyncProps.unclippedRangeColor[0]}
+                    rangeColorMax={asyncProps.unclippedRangeColor[1]}
+                    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
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "baseline",
-          marginLeft: 15,
-        }}
-      >
-        <div>
+      <div>
+        <div
+          style={{
+            marginLeft: 15,
+          }}
+        >
           <Icon
             icon="drag-handle-horizontal"
             iconSize={12}
@@ -82,35 +79,23 @@ class Gene extends React.Component {
                 {gene}
               </span>
             </Truncate>
-            <HistogramBrush isUserDefined field={gene} mini={!geneIsExpanded} />
-
+            <AnchorButton
+              minimal
+              small
+              data-testclass="maximize"
+              data-testid={`maximize-${gene}`}
+              onClick={this.handleGeneExpandClick}
+              active={false /* todo gene sets */}
+              intent="none"
+              icon={<Icon icon="maximize" iconSize={10} />}
+            />
             {/* <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
-            data-testclass="maximize"
-            data-testid={`maximize-${gene}`}
-            onClick={this.handleGeneExpandClick}
-            active={false /* todo gene sets */}
-            intent="none"
-            icon={<Icon icon="maximize" iconSize={10} />}
-          />
-        </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}