diff --git a/client/src/components/brushableHistogram/histogram.js b/client/src/components/brushableHistogram/histogram.js index 1b267215..38fa5786 100644 --- a/client/src/components/brushableHistogram/histogram.js +++ b/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 ); } diff --git a/client/src/components/brushableHistogram/index.js b/client/src/components/brushableHistogram/index.js index b287bc35..fe06cce9 100644 --- a/client/src/components/brushableHistogram/index.js +++ b/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", }} > - + {!mini ? ( + + ) : null} - + {!mini ? ( + + ) : null} ) : null } diff --git a/client/src/components/geneExpression/gene.js b/client/src/components/geneExpression/gene.js index 372ab722..9957ee69 100644 --- a/client/src/components/geneExpression/gene.js +++ b/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 ( -
-
+
+
- - + } + /> {/* */}
-
- - {}} - active={false /* todo gene sets */} - intent="none" - icon={} - /> - } - /> -
+ + + {/* */}
); } @@ -118,6 +103,17 @@ class Gene extends React.Component { export default Gene; +// {}} +// active={false /* todo gene sets */} +// intent="none" +// icon={} +// /> + // {geneIsExpanded ? ( // { return { @@ -145,7 +145,7 @@ class GeneSet extends React.Component {
{/* */} - + {/* */}