Skip to content

Commit

Permalink
measurements: order means by legend values
Browse files Browse the repository at this point in the history
Keep the color-by means in a stable order so that order does not change
when applying different filters to the data. This makes it easier to
do comparisons across groups and across different filters.

This is the easier route for stable ordering, but in the future we can
consider ordering by display order of groups in the tree.
  • Loading branch information
joverlee521 committed Oct 10, 2022
1 parent d3d1845 commit b445e43
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 21 deletions.
5 changes: 3 additions & 2 deletions src/components/measurements/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ const filterMeasurements = (measurements, treeStrainVisibility, filters) => {
const MeasurementsPlot = ({height, width, showLegend, setPanelTitle}) => {
// Use `lodash.isEqual` to deep compare object states to prevent unnecessary re-renderings of the component
const { treeStrainVisibility, treeStrainColors } = useSelector((state) => treeStrainPropertySelector(state), isEqual);
const legendValues = useSelector((state) => state.controls.colorScale.legendValues);
const colorings = useSelector((state) => state.metadata.colorings);
const colorBy = useSelector((state) => state.controls.colorBy);
const groupBy = useSelector((state) => state.controls.measurementsGroupBy);
Expand Down Expand Up @@ -212,9 +213,9 @@ const MeasurementsPlot = ({height, width, showLegend, setPanelTitle}) => {
useEffect(() => {
addColorByAttrToGroupingLabel(d3Ref.current, treeStrainColors);
colorMeasurementsSVG(d3Ref.current, treeStrainColors);
drawMeansForColorBy(d3Ref.current, svgData, treeStrainColors);
drawMeansForColorBy(d3Ref.current, svgData, treeStrainColors, legendValues);
addHoverPanelToMeasurementsAndMeans(d3Ref.current, handleHover, treeStrainColors);
}, [svgData, treeStrainColors, handleHover]);
}, [svgData, treeStrainColors, legendValues, handleHover]);

// Display raw/mean measurements when SVG is re-drawn, colors have changed, or display has changed
useEffect(() => {
Expand Down
42 changes: 23 additions & 19 deletions src/components/measurements/measurementsD3.js
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ export const colorMeasurementsSVG = (ref, treeStrainColors) => {
.style("fill", (d) => getBrighterColor(treeStrainColors[d.strain].color));
};

export const drawMeansForColorBy = (ref, svgData, treeStrainColors) => {
export const drawMeansForColorBy = (ref, svgData, treeStrainColors, legendValues) => {
const { xScale, groupingOrderedValues, groupedMeasurements } = svgData;
const svg = select(ref);
// Re move all current color by means
Expand All @@ -305,24 +305,28 @@ export const drawMeansForColorBy = (ref, svgData, treeStrainColors) => {
// 2 x subplotPadding for padding around the overall mean display
const ySpacing = (layout.subplotHeight - 4 * layout.subplotPadding) / (numberOfColorByAttributes - 1);
let yValue = layout.subplotPadding;
Object.entries(colorByGroups).forEach(([attribute, {color, values}]) => {
drawMeanAndStandardDeviation(
values,
subplot,
classes.colorMean,
{attribute, color},
xScale,
yValue
);
// Increate yValue for next attribute mean
yValue += ySpacing;
// If the next yValue is near the overall mean display,
// shift to below the overall mean display + subplotPadding
if (yValue > (layout.overallMeanYValue - layout.subplotPadding) &&
yValue < (layout.overallMeanYValue + layout.subplotPadding)) {
yValue = layout.overallMeanYValue + layout.subplotPadding;
}
});
// Order the color groups by the legend value order so that we have a stable order for the means
legendValues
.filter((attribute) => String(attribute) in colorByGroups)
.forEach((attribute) => {
const {color, values} = colorByGroups[attribute];
drawMeanAndStandardDeviation(
values,
subplot,
classes.colorMean,
{attribute, color},
xScale,
yValue
);
// Increase yValue for next attribute mean
yValue += ySpacing;
// If the next yValue is near the overall mean display,
// shift to below the overall mean display + subplotPadding
if (yValue > (layout.overallMeanYValue - layout.subplotPadding) &&
yValue < (layout.overallMeanYValue + layout.subplotPadding)) {
yValue = layout.overallMeanYValue + layout.subplotPadding;
}
});
});
};

Expand Down

0 comments on commit b445e43

Please sign in to comment.