Fix/histograms don't match the scatter plot

src/containers/MainPlotContainer/index.tsx

@@ -65,8 +65,8 @@ interface PropsFromState {
     xDropDownOptions: MeasuredFeatureDef[];
     xTickConversion: TickConversion;
     yTickConversion: TickConversion;
-    xValues: number[];
-    yValues: number[];
+    xValues: (number | null)[];
+    yValues: (number | null)[];
     proteinNames: string[];
 }
 

src/containers/MainPlotContainer/selectors.ts

@@ -1,4 +1,4 @@
-import { includes, map, find, filter, findIndex, isEmpty } from "lodash";
+import { includes, map, find, findIndex, isEmpty } from "lodash";
 import { createSelector } from "reselect";
 
 import {
@@ -43,6 +43,46 @@ function isGrouped(plotData: GroupedPlotData | ContinuousPlotData): plotData is
     return plotData.groupBy === true;
 }
 
+export const handleNullValues = (
+    inputXValues: (number | null)[], inputYValues: (number | null)[]
+): { xValues: (number | null)[]; yValues: (number | null)[] } => {
+    let canPlot = false;
+    let xValues = inputXValues.slice();
+    let yValues = inputYValues.slice();
+
+    if (xValues.length !== yValues.length) {
+        console.error("Cannot handleNullValues between two arrays because they have unequal length")
+        return {
+            xValues: xValues,
+            yValues: yValues
+        }
+    }
+
+    // At every index where one array has a null value, the other array must
+    // also have a null value
+    for (let i = 0; i < xValues.length; i++) {
+        if (xValues[i] === null) {
+            yValues[i] = null;
+        } else if (yValues[i] === null) {
+            xValues[i] = null;
+        } else {
+            canPlot = true;
+        }
+    }
+
+    // If both xValues and yValues only contain nulls, then set them to
+    // empty arrays to avoid plotting errors
+    if (!canPlot) {
+        xValues = [];
+        yValues = [];
+    }
+
+    return {
+        xValues: xValues,
+        yValues: yValues
+    }
+}
+
 export const getMainPlotData = createSelector(
     [
         getFilteredXValues,
@@ -64,22 +104,18 @@ export const getMainPlotData = createSelector(
         colorsForPlot,
         categoricalFeatures
     ): GroupedPlotData | ContinuousPlotData => {
-        // for datasets that have a lot of null values,
-        // if the whole array is null it throws an error
-        if (!filter(xValues).length) {
-            xValues = [];
-        }
-        if (!filter(yValues).length) {
-            yValues = [];
-        }
+        // Only preserve values at indices where both x and y values are not null,
+        // because a coordinate like (3, null) won't be plotted anyway and produces
+        // inaccurate histograms.
+        const newXAndYValues = handleNullValues(xValues, yValues);
         return {
             color: colorBy === PROTEIN_NAME_KEY ? undefined : colorByValues,
             groupBy: colorBy === PROTEIN_NAME_KEY || includes(categoricalFeatures, colorBy),
             groupSettings: colorsForPlot,
             groups: colorByValues,
             ids,
-            x: xValues,
-            y: yValues,
+            x: newXAndYValues.xValues,
+            y: newXAndYValues.yValues,
             customdata: thumbnailPaths as string[],
         };
     }

src/containers/MainPlotContainer/test/selectors.test.ts

@@ -2,11 +2,29 @@ import { expect } from "chai";
 
 import { mockState, selectedCellFileInfo } from "../../../state/test/mocks";
 import { Annotation, State } from "../../../state/types";
-import { getAnnotations } from "../selectors";
+import { getAnnotations, handleNullValues } from "../selectors";
 
 describe("Selection selectors", () => {
     const newMockState = mockState;
 
+    describe("handleNullValues helper function", () => {
+        it("syncs null values between two arrays", () => {
+            const array1 = [null, 3, 5, null];
+            const array2 = [2, 4, null, null];
+            const result = handleNullValues(array1, array2);
+
+            expect(result.xValues).to.deep.equal([null, 3, null, null]);
+            expect(result.yValues).to.deep.equal([null, 4, null, null]);
+        });
+        it("replaces arrays full of nulls with empty arrays", () => {
+            const array1 = [null, 3, 5, null];
+            const array2 = [2, null, null, null];
+            const result = handleNullValues(array1, array2);
+
+            expect(result.xValues).to.deep.equal([]);
+            expect(result.yValues).to.deep.equal([]);
+        });
+    });
     describe("getAnnotations selector", () => {
         it("it returns an Annotation object for every index in selectedPoints array", () => {
             const state: State = {

src/state/selection/selectors.ts

@@ -137,7 +137,7 @@ export const getMeasuredValues = createSelector([getPerCellDataForPlot], (plotFo
 
 export const getXValues = createSelector(
     [getMeasuredValues, getPlotByOnX],
-    (measuredData: MappingOfMeasuredValuesArrays, plotByOnX: string): number[] => {
+    (measuredData: MappingOfMeasuredValuesArrays, plotByOnX: string): (number | null)[] => {
         if (measuredData[plotByOnX]) {
             return measuredData[plotByOnX];
         }
@@ -147,7 +147,7 @@ export const getXValues = createSelector(
 
 export const getYValues = createSelector(
     [getMeasuredValues, getPlotByOnY],
-    (measuredData: MappingOfMeasuredValuesArrays, plotByOnY: string): number[] => {
+    (measuredData: MappingOfMeasuredValuesArrays, plotByOnY: string): (number | null)[] => {
         if (measuredData[plotByOnY]) {
             return measuredData[plotByOnY];
         }
@@ -157,7 +157,7 @@ export const getYValues = createSelector(
 
 export const getFilteredXValues = createSelector(
     [getFilteredMeasuredValues, getPlotByOnX],
-    (measuredData: MappingOfMeasuredValuesArrays, plotByOnX: string): number[] => {
+    (measuredData: MappingOfMeasuredValuesArrays, plotByOnX: string): (number | null)[] => {
         if (measuredData[plotByOnX]) {
             return measuredData[plotByOnX];
         }
@@ -167,7 +167,7 @@ export const getFilteredXValues = createSelector(
 
 export const getFilteredYValues = createSelector(
     [getFilteredMeasuredValues, getPlotByOnY],
-    (measuredData: MappingOfMeasuredValuesArrays, plotByOnY: string): number[] =>
+    (measuredData: MappingOfMeasuredValuesArrays, plotByOnY: string): (number | null)[] =>
         measuredData[plotByOnY] || []
 );
 

src/state/selection/test/selectors.test.ts

@@ -13,62 +13,58 @@ import {
 } from "../selectors";
 
 describe("Selection selectors", () => {
-
-
     const newMockState = mockState;
+
     describe("getFilteredXValues selector", () => {
         it("returns an array of values that correspond to the currently selected x value", () => {
+            const state: State = {
+                ...newMockState,
+                selection: {
+                    ...newMockState.selection,
+                    plotByOnX: "apical-proximity",
+                },
+            };
+            const result: (number | null)[] = getFilteredXValues(state);
+            const newState = {
+                ...state,
+                selection: {
+                    ...newMockState.selection,
+                    plotByOnX: "cell-segmentation",
+                },
+            };
+            const feature1Values = [-0.25868651080317, -0.1];
+            const feature2Values = [1, 0];
 
-                const state: State = {
-                    ...newMockState,
-                    selection: {
-                        ...newMockState.selection,
-                        plotByOnX: "apical-proximity",
-                    },
-                };
-                const result: number[] = getFilteredXValues(state);
-                const newState = {
-                    ...state,
-                    selection: {
-                        ...newMockState.selection,
-                        plotByOnX: "cell-segmentation",
-                    },
-                };
-                const feature1Values = [-0.25868651080317, -0.1];
-                const feature2Values = [1, 0];
-
-                const newResult: number[] = getFilteredXValues(newState);
-                expect(result).to.deep.equal(feature1Values);
-                expect(newResult).to.deep.equal(feature2Values);
-                expect(result.length).to.equal(newResult.length);
+            const newResult: (number | null)[] = getFilteredXValues(newState);
+            expect(result).to.deep.equal(feature1Values);
+            expect(newResult).to.deep.equal(feature2Values);
+            expect(result.length).to.equal(newResult.length);
         });
     });
     describe("getFilteredYValues selector", () => {
         it("returns an array of values that correspond to the currently selected y value", () => {
-
             const state: State = {
                 ...newMockState,
                 selection: {
                     ...newMockState.selection,
                     plotByOnY: "apical-proximity",
                 },
             };
-            const result: number[] = getFilteredYValues(state);
+            const result: (number | null)[] = getFilteredYValues(state);
             const newState = {
                 ...state,
                 selection: {
                     ...newMockState.selection,
                     plotByOnY: "cell-segmentation",
                 },
             };
-            const newResult: number[] = getFilteredYValues(newState);
+            const newResult: (number | null)[] = getFilteredYValues(newState);
             expect(result).to.not.deep.equal(newResult);
             expect(result.length).to.equal(newResult.length);
         });
     });
     describe("getSelectedGroupKeys selector", () => {
         it("it returns the keys of the selected groups, may be strings or numbers", () => {
-
             const state: State = {
                 ...newMockState,
                 selection: {
@@ -84,7 +80,6 @@ describe("Selection selectors", () => {
             expect(result).to.deep.equal(["id1", "id2"]);
         });
         it("it returns an empty array if no selected groups", () => {
-
             const state: State = {
                 ...newMockState,
             };
@@ -95,7 +90,6 @@ describe("Selection selectors", () => {
     });
     describe("getSelectedSetTotals selector", () => {
         it("it returns an array where each value is the total number of points in that group", () => {
-
             const state: State = {
                 ...newMockState,
                 selection: {
@@ -112,7 +106,5 @@ describe("Selection selectors", () => {
             const result: number[] = getSelectedSetTotals(state);
             expect(result).to.deep.equal([total1, total2]);
         });
-
     });
-
 });

src/state/types.ts

@@ -68,8 +68,8 @@ export interface SelectedGroupDatum {
 export interface ContinuousPlotData {
     color: Color | Color[] | number | number[];
     ids?: string[];
-    x: number[];
-    y: number[];
+    x: (number | null)[];
+    y: (number | null)[];
     customdata?: string[];
     opacity?: number[];
     groupBy?: boolean;
@@ -83,8 +83,8 @@ interface GroupSettings {
 }
 export interface GroupedPlotData {
     ids?: string[];
-    x: number[];
-    y: number[];
+    x: (number | null)[];
+    y: (number | null)[];
     customdata?: string[];
     groupBy: boolean;
     groups: number[] | string[];