From 6d7b5a09f2039a3edfd3979fd667be7a55b0b932 Mon Sep 17 00:00:00 2001
From: Wadjih Bencheikh <jw_bencheikh@esi.dz>
Date: Sun, 30 Oct 2022 07:37:05 +0100
Subject: [PATCH] feat: add responsive chart option (#256)

---
 package-lock.json                             | 28 ++++--
 package.json                                  |  3 +-
 src/app/App.tsx                               | 14 ++-
 src/app/components/MeasurementExplorer.tsx    |  6 +-
 src/app/components/MeasurementPlot.tsx        | 85 ++++++++++++-------
 .../measurements/measurement-plot.stories.tsx |  4 +-
 6 files changed, 91 insertions(+), 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9b5c5553..5d659b08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
       "devDependencies": {
         "@babel/core": "^7.19.3",
         "@babel/eslint-parser": "^7.19.1",
-        "@ladle/react": "^2.4.4",
+        "@ladle/react": "^2.4.5",
         "@playwright/experimental-ct-react": "^1.27.1",
         "@playwright/test": "^1.27.1",
         "@types/lodash": "^4.14.186",
@@ -50,6 +50,7 @@
         "ml-spectra-processing": "^11.13.0",
         "prettier": "^2.7.1",
         "react": "^18.2.0",
+        "react-d3-utils": "^0.6.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.6.0",
         "react-inspector": "^6.0.1",
@@ -2172,9 +2173,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@ladle/react": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@ladle/react/-/react-2.4.4.tgz",
-      "integrity": "sha512-kec5IL7z6g8HBygK9zL9EQt1seHBXOQhzHpMO0AD6AqSP0DCBIOmLve2GXFtd/Ryn2aw+c9xLfxtEohIrWEKKQ==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@ladle/react/-/react-2.4.5.tgz",
+      "integrity": "sha512-Aso5YYCm1EwJ7GxP0vaEYrBSnGLMkPHy3YK7k4la/zlWxqxMb7sQhbjXu8Q1wJtj9Qby58MryknpbznbG75Fng==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
@@ -8137,14 +8138,14 @@
       }
     },
     "node_modules/react-d3-utils": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/react-d3-utils/-/react-d3-utils-0.5.1.tgz",
-      "integrity": "sha512-E2i5EklJKTJq6eR9wXp36JGJtDEj9F1iNEFvJDn+KTmNhICx7dslW7CTDs2rUoolD+jbNMbsbRmrp5RCk2HrCA==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-d3-utils/-/react-d3-utils-0.6.0.tgz",
+      "integrity": "sha512-Jmm0+W9tU1Jz6VQcYmAu4ccttMOecdpNKHYDREBvblWSnpcLC45/86iFni2aFW58LtQHVwVMzl0blgwZXR+J1A==",
       "dev": true,
       "dependencies": {
         "@types/d3-scale": "^4.0.2",
         "d3-scale": "^4.0.2",
-        "use-resize-observer": "^9.0.0"
+        "use-resize-observer": "^9.0.2"
       }
     },
     "node_modules/react-dom": {
@@ -8254,6 +8255,17 @@
         "react": "*"
       }
     },
+    "node_modules/react-plot/node_modules/react-d3-utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/react-d3-utils/-/react-d3-utils-0.5.1.tgz",
+      "integrity": "sha512-E2i5EklJKTJq6eR9wXp36JGJtDEj9F1iNEFvJDn+KTmNhICx7dslW7CTDs2rUoolD+jbNMbsbRmrp5RCk2HrCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-scale": "^4.0.2",
+        "d3-scale": "^4.0.2",
+        "use-resize-observer": "^9.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/package.json b/package.json
index 833ac800..5e2eb9a0 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@babel/eslint-parser": "^7.19.1",
-    "@ladle/react": "^2.4.4",
+    "@ladle/react": "^2.4.5",
     "@playwright/experimental-ct-react": "^1.27.1",
     "@playwright/test": "^1.27.1",
     "@types/lodash": "^4.14.186",
@@ -87,6 +87,7 @@
     "ml-spectra-processing": "^11.13.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
+    "react-d3-utils": "^0.6.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-inspector": "^6.0.1",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 13cefc69..b37cba5b 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -182,9 +182,19 @@ function DropZoneArea() {
                     // reset the state of your app so the error doesn't happen again
                   }}
                 >
-                  <div style={{ padding: 5 }}>
+                  <div
+                    style={{
+                      padding: 5,
+                      width: '100%',
+                      height: '100%',
+                    }}
+                  >
                     {measurement ? (
-                      <MeasurementExplorer measurement={measurement} />
+                      <MeasurementExplorer
+                        measurement={measurement}
+                        width="100%"
+                        height="100%"
+                      />
                     ) : (
                       <span>No data, add them with drag and drop</span>
                     )}
diff --git a/src/app/components/MeasurementExplorer.tsx b/src/app/components/MeasurementExplorer.tsx
index 350073bc..aea83d1a 100644
--- a/src/app/components/MeasurementExplorer.tsx
+++ b/src/app/components/MeasurementExplorer.tsx
@@ -38,15 +38,15 @@ export function MeasurementExplorer(props: MeasurementExplorerProps) {
   });
   return (
     <div
+      style={{ width, height }}
       css={css`
-        width: ${width}px;
-        height: ${height}px;
+        display: flex;
+        flex-direction: column;
       `}
     >
       <div
         css={css`
           display: flex;
-          gap: 40px;
           justify-content: space-around;
           margin-bottom: 20px;
         `}
diff --git a/src/app/components/MeasurementPlot.tsx b/src/app/components/MeasurementPlot.tsx
index 5f87209d..bf8f28d1 100644
--- a/src/app/components/MeasurementPlot.tsx
+++ b/src/app/components/MeasurementPlot.tsx
@@ -1,5 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import { xyToXYObject } from 'ml-spectra-processing';
 import { useMemo } from 'react';
+import { ResponsiveChart } from 'react-d3-utils';
 import {
   Annotations,
   Axis,
@@ -25,8 +28,8 @@ export interface MeasurementPlotProps {
   dataIndex?: number;
   xVariableName?: string;
   yVariableName?: string;
-  width?: number;
-  height?: number;
+  width?: number | `${number}%`;
+  height?: number | `${number}%`;
   zoom?: 'horizontal' | 'vertical' | 'rectangular' | '';
   wheelZoom?: 'vertical' | 'horizontal' | '';
   crossHair?: boolean;
@@ -104,36 +107,52 @@ function MeasurementComponent(props: MeasurementPlotProps) {
   });
   usePan({ horizontalAxisId: xAxis, verticalAxisId: yAxis });
   return (
-    <Plot width={width} height={height}>
-      <Heading title={title} />
-      <LineSeries
-        data={xyToXYObject({
-          x: x.data,
-          y: y.data,
-        })}
-        xAxis={xAxis}
-        yAxis={yAxis}
-      />
-      <Annotations>
-        {rectZoom.annotations}
-        {axisZoom.annotations}
-        {crossHairAnnot.annotations}
-      </Annotations>
-      <Axis
-        id={xAxis}
-        hidden={!showHorizontalAxis}
-        displayPrimaryGridLines={showVerticalGrid}
-        flip={flipHorizontalAxis}
-        position="bottom"
-        label={`${x.label}${x.units ? `(${x.units})` : ''}`}
-      />
-      <Axis
-        id={yAxis}
-        hidden={!showVerticalAxis}
-        displayPrimaryGridLines={showHorizontalGrid}
-        position="left"
-        label={`${y.label}${y.units ? `(${y.units})` : ''}`}
-      />
-    </Plot>
+    <div
+      style={{ width, height }}
+      css={css`
+        user-drag: none;
+        -webkit-user-drag: none;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+      `}
+    >
+      <ResponsiveChart width={width} height={height}>
+        {({ width, height }) => (
+          <Plot width={width} height={height}>
+            <Heading title={title} />
+            <LineSeries
+              data={xyToXYObject({
+                x: x.data,
+                y: y.data,
+              })}
+              xAxis={xAxis}
+              yAxis={yAxis}
+            />
+            <Annotations>
+              {rectZoom.annotations}
+              {axisZoom.annotations}
+              {crossHairAnnot.annotations}
+            </Annotations>
+            <Axis
+              id={xAxis}
+              hidden={!showHorizontalAxis}
+              displayPrimaryGridLines={showVerticalGrid}
+              flip={flipHorizontalAxis}
+              position="bottom"
+              label={`${x.label}${x.units ? `(${x.units})` : ''}`}
+            />
+            <Axis
+              id={yAxis}
+              hidden={!showVerticalAxis}
+              displayPrimaryGridLines={showHorizontalGrid}
+              position="left"
+              label={`${y.label}${y.units ? `(${y.units})` : ''}`}
+            />
+          </Plot>
+        )}
+      </ResponsiveChart>
+    </div>
   );
 }
diff --git a/stories/app/measurements/measurement-plot.stories.tsx b/stories/app/measurements/measurement-plot.stories.tsx
index f79552e0..48288790 100644
--- a/stories/app/measurements/measurement-plot.stories.tsx
+++ b/stories/app/measurements/measurement-plot.stories.tsx
@@ -17,8 +17,8 @@ Control.args = {
   dataIndex: 0,
   xVariableName: 'x',
   yVariableName: 'y',
-  width: 800,
-  height: 400,
+  width: '100%',
+  height: 300,
   crossHair: true,
   showHorizontalAxis: true,
   showVerticalAxis: true,