Limit x-axis by filtered measurements

src/components/measurements/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useRef, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { isEqual, orderBy } from "lodash";
 import { NODE_VISIBLE } from "../../util/globals";
@@ -41,6 +41,17 @@
   return ref.current;
 };
 
+/**
+ * A wrapper around React's useCallback hook that does a deep comparison of the
+ * dependencies.
+ * @param {function} fn
+ * @param {Array} dependencies
+ * @returns
+ */
+const useDeepCompareCallback = (fn, dependencies) => {
+  return useCallback(fn, dependencies.map(useDeepCompareMemo))
+}
+
 // Checks visibility against global NODE_VISIBLE
 const isVisible = (visibility) => visibility === NODE_VISIBLE;
 
@@ -159,9 +170,9 @@
   }
   const groupedMeasurements = groupMeasurements(filteredMeasurements, groupBy, groupByValueOrder);
 
-  // Memoize D3 scale functions to allow deep comparison to work below for svgData
-  const xScale = useMemo(() => createXScale(width, measurements), [width, measurements]);
-  const yScale = useMemo(() => createYScale(), []);
+  // Cache D3 scale functions to allow deep comparison to work below for svgData
+  const xScale = useDeepCompareCallback(createXScale(width, filteredMeasurements), [width, filteredMeasurements]);
+  const yScale = useCallback(createYScale(), []);
   // Memoize all data needed for basic SVG to avoid extra re-drawings
   const svgData = useDeepCompareMemo({
     containerHeight: height,
@@ -172,8 +183,8 @@
     groupingOrderedValues,
     groupedMeasurements
   });
-  // Memoize handleHover function to avoid extra useEffect calls
-  const handleHover = useMemo(() => (data, dataType, mouseX, mouseY, colorByAttr=null) => {
+  // Cache handleHover function to avoid extra useEffect calls
+  const handleHover = useCallback((data, dataType, mouseX, mouseY, colorByAttr=null) => {
     let newHoverData = null;
     if (data !== null) {
       // Set color-by attribute as title if provided

src/components/measurements/measurementsD3.js

@@ -64,9 +64,16 @@ const getSubplotDOMId = (groupingValueIndex) => `measurement_subplot_${groupingV
  * @returns {function}
  */
 export const createXScale = (panelWidth, measurements) => {
+  // Padding the xScale based on proportion
+  // Copied from https://github.com/d3/d3-scale/issues/150#issuecomment-561304239
+  function padLinear([x0, x1], k) {
+    const dx = (x1 - x0) * k / 2;
+    return [x0 - dx, x1 + dx];
+  }
+
   return (
     scaleLinear()
-      .domain(extent(measurements, (m) => m.value))
+      .domain(padLinear(extent(measurements, (m) => m.value), 0.1))
       .range([layout.leftPadding, panelWidth - layout.rightPadding])
       .nice()
   );