Check for negative width / height when rendering all <rect> (#2363)

electricitymaps · Apr 9, 2020 · 523138d · 523138d
1 parent 9b2cab2
commit 523138d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 35 deletions.
diff --git a/web/src/components/countrytable.js b/web/src/components/countrytable.js
@@ -126,36 +126,41 @@ const Row = ({
   onMouseOver,
   onMouseOut,
   width,
-}) => (
-  <g className="row" transform={`translate(0, ${index * (ROW_HEIGHT + PADDING_Y)})`}>
-    {/* Row background */}
-    <rect
-      y="-1"
-      fill="transparent"
-      width={width}
-      height={ROW_HEIGHT + PADDING_Y}
-      /* Support only click events in mobile mode, otherwise react to mouse hovers */
-      onClick={isMobile ? onMouseOver : noop}
-      onFocus={!isMobile ? onMouseOver : noop}
-      onMouseOver={!isMobile ? onMouseOver : noop}
-      onMouseMove={!isMobile ? onMouseOver : noop}
-      onMouseOut={onMouseOut}
-      onBlur={onMouseOut}
-    />
+}) => {
+  // Don't render if the width is not positive
+  if (width <= 0) return null;
 
-    {/* Row label */}
-    <text
-      className="name"
-      style={{ pointerEvents: 'none', textAnchor: 'end' }}
-      transform={`translate(${LABEL_MAX_WIDTH - 1.5 * PADDING_Y}, ${TEXT_ADJUST_Y})`}
-    >
-      {label}
-    </text>
+  return (
+    <g className="row" transform={`translate(0, ${index * (ROW_HEIGHT + PADDING_Y)})`}>
+      {/* Row background */}
+      <rect
+        y="-1"
+        fill="transparent"
+        width={width}
+        height={ROW_HEIGHT + PADDING_Y}
+        /* Support only click events in mobile mode, otherwise react to mouse hovers */
+        onClick={isMobile ? onMouseOver : noop}
+        onFocus={!isMobile ? onMouseOver : noop}
+        onMouseOver={!isMobile ? onMouseOver : noop}
+        onMouseMove={!isMobile ? onMouseOver : noop}
+        onMouseOut={onMouseOut}
+        onBlur={onMouseOut}
+      />
 
-    {/* Row content */}
-    {children}
-  </g>
-);
+      {/* Row label */}
+      <text
+        className="name"
+        style={{ pointerEvents: 'none', textAnchor: 'end' }}
+        transform={`translate(${LABEL_MAX_WIDTH - 1.5 * PADDING_Y}, ${TEXT_ADJUST_Y})`}
+      >
+        {label}
+      </text>
+
+      {/* Row content */}
+      {children}
+    </g>
+  );
+};
 
 const HorizontalBar = ({
   className,
@@ -166,20 +171,23 @@ const HorizontalBar = ({
   // Don't render if the range is not valid
   if (!isArray(range) || !isFinite(range[0]) || !isFinite(range[1])) return null;
 
-  // Make sure that x1 < x2
   const x1 = Math.min(range[0], range[1]);
   const x2 = Math.max(range[0], range[1]);
+  const width = scale(x2) - scale(x1);
+
+  // Don't render if the width is not positive
+  if (width <= 0) return null;
 
   return (
     <rect
       className={className}
+      fill={fill}
       height={ROW_HEIGHT}
       opacity={RECT_OPACITY}
       shapeRendering="crispEdges"
       style={{ pointerEvents: 'none' }}
-      fill={fill}
       x={LABEL_MAX_WIDTH + scale(x1)}
-      width={scale(x2) - scale(x1)}
+      width={width}
     />
   );
 };

diff --git a/web/src/components/graph/graphbackground.js b/web/src/components/graph/graphbackground.js
@@ -14,7 +14,8 @@ const GraphBackground = React.memo(({
 }) => {
   const [x1, x2] = timeScale.range();
   const [y2, y1] = valueScale.range();
-  if (x1 >= x2 || y1 >= y2) return null;
+  const width = x2 - x1;
+  const height = y2 - y1;
 
   // Mouse hover events
   let mouseOutRectTimeout;
@@ -34,12 +35,15 @@ const GraphBackground = React.memo(({
     }
   };
 
+  // Don't render if the dimensions are not positive
+  if (width <= 0 || height <= 0) return null;
+
   return (
     <rect
       x={x1}
       y={y1}
-      width={x2 - x1}
-      height={y2 - y1}
+      width={width}
+      height={height}
       style={{ cursor: 'pointer', opacity: 0 }}
       /* Support only click events in mobile mode, otherwise react to mouse hovers */
       onClick={isMobile ? handleRectMouseMove : noop}

diff --git a/web/src/components/horizontalcolorbar.js b/web/src/components/horizontalcolorbar.js
@@ -25,12 +25,18 @@ const HorizontalColorbar = ({
   const width = useWidthObserver(ref, 2 * PADDING_X);
   const height = useHeightObserver(ref, 2 * PADDING_Y);
 
+  const className = `${id} colorbar`;
   const linearScale = scaleLinear()
     .domain(extent(colorScale.domain()))
     .range([0, width]);
 
+  // Render an empty SVG if the dimensions are not positive
+  if (width <= 0 || height <= 0) {
+    return <svg className={className} ref={ref} />;
+  }
+
   return (
-    <svg className={`${id} colorbar`} ref={ref}>
+    <svg className={className} ref={ref}>
       <g transform={`translate(${PADDING_X},0)`}>
         <linearGradient id={`${id}-gradient`} x2="100%">
           {spreadOverDomain(colorScale, 10).map((value, index) => (