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",
}}
>
-