From 7f68005af57748c46429af972e4214a5ab88ce7a Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Sun, 2 Mar 2025 08:34:06 +0000
Subject: [PATCH 01/13] add recharts to scatterplot

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 package-lock.json                             | 243 +++++++++++++++++-
 packages/jaeger-ui/package.json               |   1 +
 .../SearchResults/ScatterPlot.css             |   4 -
 .../SearchResults/ScatterPlot.jsx             | 159 +++++++++---
 4 files changed, 357 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7f957060d..504408f62f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4554,23 +4554,48 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
       "license": "MIT"
     },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
       "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/d3-color": "*"
       }
     },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
@@ -4578,6 +4603,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-zoom": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
@@ -6985,6 +7031,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -7854,6 +7909,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/decode-uri-component": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
@@ -8306,6 +8367,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-scroll-into-view": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz",
@@ -9553,7 +9624,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/events": {
@@ -9707,6 +9777,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -11160,6 +11239,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -16594,6 +16682,21 @@
         "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-test-renderer": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz",
@@ -16609,6 +16712,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/react-vis": {
       "version": "1.11.12",
       "resolved": "https://registry.npmjs.org/react-vis/-/react-vis-1.11.12.tgz",
@@ -16768,6 +16887,38 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
+      "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "node_modules/rechoir": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
@@ -19364,6 +19515,89 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -20127,7 +20361,7 @@
         "@jaegertracing/plexus": "0.2.0",
         "@pyroscope/flamegraph": "0.21.4",
         "@sentry/browser": "9.0.0",
-        "antd": "^5.24.0",
+        "antd": "^5.23.3",
         "chance": "^1.0.10",
         "classnames": "^2.5.1",
         "combokeys": "^3.0.0",
@@ -20159,6 +20393,7 @@
         "react-vis": "1.11.12",
         "react-vis-force": "^0.3.1",
         "react-window": "^1.8.10",
+        "recharts": "^2.15.1",
         "redux": "^5.0.1",
         "redux-actions": "2.6.5",
         "redux-first-history": "^5.2.0",
diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
index 3c63582779..88c955802e 100644
--- a/packages/jaeger-ui/package.json
+++ b/packages/jaeger-ui/package.json
@@ -81,6 +81,7 @@
     "react-vis": "1.11.12",
     "react-vis-force": "^0.3.1",
     "react-window": "^1.8.10",
+    "recharts": "^2.15.1",
     "redux": "^5.0.1",
     "redux-actions": "2.6.5",
     "redux-first-history": "^5.2.0",
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.css b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.css
index 8e649c25f2..96b9b35d0a 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.css
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.css
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.TraceResultsScatterPlot .rv-xy-plot__series.rv-xy-plot__series--mark {
-  cursor: pointer;
-}
-
 .scatter-plot-hint {
   color: #444;
   background: #f8f8f8;
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
index af92462c00..61e14d49e6 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
@@ -15,14 +15,41 @@
 import React, { useRef, useState, useLayoutEffect } from 'react';
 import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
-import { XYPlot, XAxis, YAxis, MarkSeries, Hint } from 'react-vis';
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  ZAxis,
+  Label,
+  Dot,
+} from 'recharts';
 
 import { FALLBACK_TRACE_NAME } from '../../../constants';
 import { ONE_MILLISECOND, formatDuration } from '../../../utils/date';
 
-import 'react-vis/dist/style.css';
 import './ScatterPlot.css';
 
+const CustomTooltip = ({ active, payload }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="scatter-plot-hint">
+        <h4>{payload[0].payload.name || FALLBACK_TRACE_NAME}</h4>
+      </div>
+    );
+  }
+  return null;
+};
+
+const RenderDot = ({ cx, cy, fill, size }) => {
+  const maxSize = Math.min(300, size);
+  return (
+    <Dot cx={cx} cy={cy} fill={fill} fillOpacity={0.5} r={maxSize * 0.035} style={{ cursor: 'pointer' }} />
+  );
+};
+
 export default function ScatterPlot({
   data,
   onValueClick,
@@ -33,16 +60,6 @@ export default function ScatterPlot({
   const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
 
-  const [overValue, setValueOver] = useState(null);
-
-  const onValueOver = value => {
-    setValueOver(value);
-  };
-
-  const onValueOut = () => {
-    setValueOver(null);
-  };
-
   useLayoutEffect(() => {
     function updateContainerWidth() {
       if (containerRef.current) {
@@ -58,37 +75,95 @@ export default function ScatterPlot({
     return () => window.removeEventListener('resize', updateContainerWidth);
   }, []);
 
+  const xMin = Math.min(...data.map(d => d.x));
+  const xMax = Math.max(...data.map(d => d.x));
+
+  /*
+  This function generates unique ticks for the x-axis.
+  It ensures that the ticks are unique by checking if the label for a given tick value has already been used.
+  If it has, the tick is not added to the list of ticks.
+  */
+  const generateUniqueTicks = (min, max, count) => {
+    const step = (max - min) / (count - 1);
+    const ticks = [];
+    const seenLabels = new Set();
+
+    for (let i = 0; i < count; i++) {
+      const value = min + step * i;
+      ticks.push(value);
+    }
+
+    return ticks.filter(tick => {
+      const label = dayjs(tick / ONE_MILLISECOND).format('hh:mm:ss a');
+      if (seenLabels.has(label)) {
+        return false;
+      }
+      seenLabels.add(label);
+      return true;
+    });
+  };
+
   return (
-    <div className="TraceResultsScatterPlot" ref={containerRef}>
-      {containerWidth && (
-        <XYPlot
-          margin={{
-            left: 70,
-          }}
-          width={containerWidth}
-          colorType="literal"
-          height={200}
-        >
-          <XAxis
-            title="Time"
-            tickTotal={4}
-            tickFormat={t => dayjs(t / ONE_MILLISECOND).format('hh:mm:ss a')}
-          />
-          <YAxis title="Duration" tickTotal={3} tickFormat={t => formatDuration(t)} />
-          <MarkSeries
-            sizeRange={[3, 10]}
-            opacity={0.5}
-            onValueClick={onValueClick}
-            onValueMouseOver={onValueOver}
-            onValueMouseOut={onValueOut}
-            data={data}
-          />
-          {overValue && (
-            <Hint value={overValue}>
-              <h4 className="scatter-plot-hint">{overValue.name || FALLBACK_TRACE_NAME}</h4>
-            </Hint>
-          )}
-        </XYPlot>
+    <div className="TraceResultsScatterPlot" ref={containerRef} style={{ width: '100%', height: 200 }}>
+      {containerWidth > 0 && (
+        <ResponsiveContainer>
+          <ScatterChart
+            margin={{
+              top: 10,
+              right: 20,
+              left: 10,
+              bottom: 10,
+            }}
+          >
+            <XAxis
+              type="number"
+              dataKey="x"
+              name="Time"
+              domain={[xMin, xMax]}
+              ticks={generateUniqueTicks(xMin, xMax, 10)}
+              tickFormatter={t => dayjs(t / ONE_MILLISECOND).format('hh:mm:ss a')}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: '#e6e6e9', strokeWidth: 2 }}
+              tickLine={{ stroke: '#e6e6e9', strokeWidth: 1 }}
+              allowDecimals={false}
+              interval="equidistantPreserveStart"
+            />
+            <YAxis
+              type="number"
+              dataKey="y"
+              name="Duration"
+              tickFormatter={t => formatDuration(t)}
+              tick={{ fontSize: 11 }}
+              axisLine={{ stroke: '#e6e6e9', strokeWidth: 2 }}
+              tickLine={{ stroke: '#e6e6e9', strokeWidth: 1 }}
+              tickCount={4}
+              allowDecimals={false}
+              domain={['auto', 'auto']}
+            >
+              <Label
+                value="Duration"
+                position="insideLeft"
+                angle={-90}
+                offset={75}
+                fontSize={11}
+                style={{ textAnchor: 'middle' }}
+              />
+            </YAxis>
+            <ZAxis dataKey="size" type="number" range={[1, 300]} />
+            <Tooltip content={<CustomTooltip />} cursor={false} isAnimationActive={false} />
+            <Scatter
+              data={data.map(point => {
+                return {
+                  ...point,
+                  fill: point.color,
+                };
+              })}
+              onClick={onValueClick}
+              shape={<RenderDot />}
+              fill={point => point.fill}
+            />
+          </ScatterChart>
+        </ResponsiveContainer>
       )}
     </div>
   );

From f9222723ef88f108fbe9f0c358d88c49b87121fd Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Sun, 2 Mar 2025 09:11:14 +0000
Subject: [PATCH 02/13] add style changes

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../SearchResults/ScatterPlot.jsx             | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
index 61e14d49e6..e3aefceb1a 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
@@ -122,18 +122,26 @@ export default function ScatterPlot({
               domain={[xMin, xMax]}
               ticks={generateUniqueTicks(xMin, xMax, 10)}
               tickFormatter={t => dayjs(t / ONE_MILLISECOND).format('hh:mm:ss a')}
-              tick={{ fontSize: 11 }}
+              tick={{ fontSize: 11, dy: 5 }}
               axisLine={{ stroke: '#e6e6e9', strokeWidth: 2 }}
               tickLine={{ stroke: '#e6e6e9', strokeWidth: 1 }}
               allowDecimals={false}
               interval="equidistantPreserveStart"
-            />
+            >
+              <Label
+                value="Time"
+                position="insideTopRight"
+                offset={15}
+                fontSize={11}
+                style={{ textAnchor: 'start' }}
+              />
+            </XAxis>
             <YAxis
               type="number"
               dataKey="y"
               name="Duration"
               tickFormatter={t => formatDuration(t)}
-              tick={{ fontSize: 11 }}
+              tick={{ fontSize: 11, dx: -5 }}
               axisLine={{ stroke: '#e6e6e9', strokeWidth: 2 }}
               tickLine={{ stroke: '#e6e6e9', strokeWidth: 1 }}
               tickCount={4}
@@ -142,11 +150,11 @@ export default function ScatterPlot({
             >
               <Label
                 value="Duration"
-                position="insideLeft"
-                angle={-90}
-                offset={75}
+                position="insideTopLeft"
+                offset={0}
                 fontSize={11}
-                style={{ textAnchor: 'middle' }}
+                style={{ textAnchor: 'end' }}
+                angle={-90}
               />
             </YAxis>
             <ZAxis dataKey="size" type="number" range={[1, 300]} />
@@ -160,7 +168,6 @@ export default function ScatterPlot({
               })}
               onClick={onValueClick}
               shape={<RenderDot />}
-              fill={point => point.fill}
             />
           </ScatterChart>
         </ResponsiveContainer>

From f37b35e1a67598b5e03e7a15c23ad4091a64d2e9 Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Sun, 2 Mar 2025 10:11:07 +0000
Subject: [PATCH 03/13] modify tests

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../SearchResults/ScatterPlot.test.js         | 262 +++++++++++++-----
 1 file changed, 188 insertions(+), 74 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
index ce8a7547e1..e0ca19dbe0 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
@@ -13,12 +13,63 @@
 // limitations under the License.
 
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { XAxis, XYPlot, YAxis, MarkSeries, Hint } from 'react-vis';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import ScatterPlot from './ScatterPlot';
 import { ONE_MILLISECOND } from '../../../utils/date';
 
+// Mock ResizeObserver which is not available in JSDOM but required by Recharts
+class MockResizeObserver {
+  constructor(callback) {
+    this.callback = callback;
+    this.observables = new Set();
+  }
+
+  observe(element) {
+    this.observables.add(element);
+    // Simulate an initial resize event
+    this.callback([{ target: element, contentRect: { width: 1200, height: 800 } }]);
+  }
+
+  unobserve(element) {
+    this.observables.delete(element);
+  }
+
+  disconnect() {
+    this.observables.clear();
+  }
+}
+
+beforeAll(() => {
+  global.ResizeObserver = MockResizeObserver;
+  SVGElement.prototype.getComputedTextLength = jest.fn().mockReturnValue(50);
+  SVGElement.prototype.getBBox = jest.fn().mockReturnValue({
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+  });
+});
+
+// Mock window resize event
+const mockResizeEvent = () => {
+  const originalAddEventListener = window.addEventListener;
+  const originalRemoveEventListener = window.removeEventListener;
+
+  beforeEach(() => {
+    window.addEventListener = jest.fn();
+    window.removeEventListener = jest.fn();
+  });
+
+  afterEach(() => {
+    window.addEventListener = originalAddEventListener;
+    window.removeEventListener = originalRemoveEventListener;
+  });
+};
+
+mockResizeEvent();
+
 const generateTimestamp = (hours, minutes, seconds) => {
   const UTCMilliseconds = new Date(2018, 10, 13, hours, minutes, seconds).getTime();
 
@@ -52,94 +103,157 @@ const sampleData = [
   },
 ];
 
-it('<ScatterPlot /> should render base case correctly', () => {
-  const wrapper = shallow(
-    <ScatterPlot
-      data={[
-        { x: Date.now() - 3000, y: 1, traceID: 1 },
-        { x: Date.now() - 2000, y: 2, traceID: 2 },
-        { x: Date.now() - 1000, y: 2, traceID: 2 },
-        { x: Date.now(), y: 3, traceID: 3 },
-      ]}
-    />,
-    { disableLifecycleMethods: true }
-  );
-  expect(wrapper).toBeTruthy();
-});
+describe('ScatterPlot', () => {
+  const mockOnValueClick = jest.fn();
 
-it('<ScatterPlot /> should render X axis correctly', () => {
-  const wrapper = mount(
-    <ScatterPlot calculateContainerWidth={() => 1200} data={sampleData} onValueClick={() => null} />
-  );
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-  const xAxisText = wrapper.find(XAxis).text();
+  it('renders correctly with data', () => {
+    const { container } = render(
+      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+    );
 
-  expect(xAxisText).toContain('10:10:20 pm');
-  expect(xAxisText).toContain('10:10:30 pm');
-  expect(xAxisText).toContain('10:10:40 pm');
-  expect(xAxisText).toContain('10:10:50 pm');
-  expect(xAxisText).toContain('10:11:00 pm');
-});
+    expect(container.querySelector('.TraceResultsScatterPlot')).toBeTruthy();
 
-it('<ScatterPlot /> should render Y axis correctly', () => {
-  const wrapper = mount(
-    <ScatterPlot calculateContainerWidth={() => 1200} data={sampleData} onValueClick={() => null} />
-  );
+    expect(container.querySelector('.recharts-responsive-container')).toBeTruthy();
+    expect(container.querySelector('.recharts-wrapper')).toBeTruthy();
+    expect(container.querySelector('.recharts-scatter')).toBeTruthy();
+    expect(container.querySelector('.recharts-xAxis')).toBeTruthy();
+    expect(container.querySelector('.recharts-yAxis')).toBeTruthy();
+  });
 
-  const yAxisText = wrapper.find(YAxis).text();
+  it('uses default calculateContainerWidth when not provided', () => {
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      value: 500,
+    });
 
-  expect(yAxisText).toContain('20ms');
-  expect(yAxisText).toContain('40ms');
-  expect(yAxisText).toContain('60ms');
-  expect(yAxisText).toContain('80ms');
-});
+    const { container } = render(<ScatterPlot data={sampleData} onValueClick={mockOnValueClick} />);
 
-it('<ScatterPlot /> should set fixed container width on initial render', () => {
-  const wrapper = mount(
-    <ScatterPlot calculateContainerWidth={() => 1200} data={sampleData} onValueClick={() => null} />
-  );
+    expect(container.querySelector('.TraceResultsScatterPlot')).toBeTruthy();
+    expect(container.querySelector('.recharts-responsive-container')).toBeTruthy();
 
-  const xyPlot = wrapper.find(XYPlot).getDOMNode();
+    // Restore original clientWidth
+    delete HTMLElement.prototype.clientWidth;
+  });
 
-  expect(xyPlot.style.width).toBe('1200px');
-});
+  it('does not render chart when container width is 0', () => {
+    const { container } = render(
+      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 0} />
+    );
 
-it('<ScatterPlot /> should update container width on window resize', () => {
-  const calculateContainerWidth = jest.fn().mockReturnValue(1200).mockReturnValue(700);
-  const wrapper = mount(
-    <ScatterPlot
-      calculateContainerWidth={calculateContainerWidth}
-      data={sampleData}
-      onValueClick={() => null}
-      onValueOut={() => null}
-      onValueOver={() => null}
-    />
-  );
+    expect(container.querySelector('.TraceResultsScatterPlot')).toBeTruthy();
+    expect(container.querySelector('.recharts-responsive-container')).toBeFalsy();
+  });
 
-  window.dispatchEvent(new Event('resize'));
+  it('formats X axis ticks correctly', () => {
+    const { container } = render(
+      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+    );
 
-  const xyPlot = wrapper.find(XYPlot).getDOMNode();
+    const xAxisTicks = container.querySelectorAll('.recharts-xAxis .recharts-cartesian-axis-tick-value');
 
-  expect(xyPlot.style.width).toBe('700px');
-});
+    expect(xAxisTicks.length).toBeGreaterThan(0);
+
+    xAxisTicks.forEach(tick => {
+      expect(tick.textContent).toBeTruthy();
+    });
+  });
+
+  it('formats Y axis ticks correctly', () => {
+    const { container } = render(
+      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+    );
+
+    const yAxisTicks = container.querySelectorAll('.recharts-yAxis .recharts-cartesian-axis-tick-value');
+    expect(yAxisTicks.length).toBeGreaterThan(0);
+
+    yAxisTicks.forEach(tick => {
+      expect(tick.textContent).toBeTruthy();
+    });
+  });
+
+  it('handles window resize events', () => {
+    const calculateContainerWidth = jest.fn().mockReturnValueOnce(1200).mockReturnValueOnce(800);
+
+    render(
+      <ScatterPlot
+        data={sampleData}
+        onValueClick={mockOnValueClick}
+        calculateContainerWidth={calculateContainerWidth}
+      />
+    );
+
+    expect(window.addEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
+
+    const resizeHandler = window.addEventListener.mock.calls.find(call => call[0] === 'resize')[1];
+    resizeHandler();
+
+    expect(calculateContainerWidth).toHaveBeenCalledTimes(2);
+
+    const { unmount } = render(
+      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+    );
+
+    unmount();
+    expect(window.removeEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
+  });
+
+  it('calls onValueClick when a scatter point is clicked', () => {
+    const { container } = render(
+      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+    );
+
+    const scatterPoints = container.querySelectorAll('.recharts-scatter-symbol');
+
+    expect(scatterPoints.length).toBeGreaterThan(0);
+
+    fireEvent.click(scatterPoints[0]);
+
+    expect(mockOnValueClick).toHaveBeenCalled();
+  });
+
+  it('generates unique ticks for the x-axis', () => {
+    const { container } = render(
+      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+    );
+
+    const xTicks = container.querySelectorAll('.recharts-xAxis .recharts-cartesian-axis-tick-value');
+    expect(xTicks.length).toBeGreaterThan(0);
 
-it('<ScatterPlot /> should render Hint correctly', () => {
-  const wrapper = mount(
-    <ScatterPlot calculateContainerWidth={() => 1200} data={sampleData} onValueClick={() => null} />
-  );
-  expect(wrapper).toBeDefined();
+    const tickLabels = Array.from(xTicks).map(tick => tick.textContent);
+    const uniqueLabels = [...new Set(tickLabels)];
+    expect(uniqueLabels.length).toBe(tickLabels.length);
+  });
 
-  const markSeries = wrapper.find(MarkSeries);
-  expect(markSeries.length).toEqual(1);
+  it('renders with different dot sizes', () => {
+    const { container } = render(
+      <ScatterPlot
+        data={[
+          {
+            ...sampleData[0],
+            size: 100,
+          },
+          {
+            ...sampleData[0],
+            size: 1000,
+            traceID: 'lot-of-spans',
+          },
+        ]}
+        onValueClick={mockOnValueClick}
+        calculateContainerWidth={() => 1200}
+      />
+    );
 
-  const circle = wrapper.find('.rv-xy-plot__series--mark circle:first-child');
-  expect(circle.length).toEqual(1);
+    const scatterSymbols = container.querySelectorAll('.recharts-scatter-symbol');
+    expect(scatterSymbols.length).toBe(2);
 
-  circle.simulate('mouseOver');
-  const hint = wrapper.find(Hint);
-  expect(hint.length).toEqual(1);
+    const firstSymbol = scatterSymbols[0];
+    const secondSymbol = scatterSymbols[1];
 
-  circle.simulate('mouseOut');
-  const noHint = wrapper.find(Hint);
-  expect(noHint.length).toEqual(0);
+    expect(firstSymbol).toBeTruthy();
+    expect(secondSymbol).toBeTruthy();
+  });
 });

From 1f4582807b92958e140369d4635af46f7d863db3 Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Sun, 2 Mar 2025 10:25:20 +0000
Subject: [PATCH 04/13] add test for CustomTooltip

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../SearchResults/ScatterPlot.jsx             |  4 +-
 .../SearchResults/ScatterPlot.test.js         | 40 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
index e3aefceb1a..9ec0be5ad8 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx
@@ -32,7 +32,7 @@ import { ONE_MILLISECOND, formatDuration } from '../../../utils/date';
 
 import './ScatterPlot.css';
 
-const CustomTooltip = ({ active, payload }) => {
+export const CustomTooltip = ({ active, payload }) => {
   if (active && payload && payload.length) {
     return (
       <div className="scatter-plot-hint">
@@ -43,7 +43,7 @@ const CustomTooltip = ({ active, payload }) => {
   return null;
 };
 
-const RenderDot = ({ cx, cy, fill, size }) => {
+export const RenderDot = ({ cx, cy, fill, size }) => {
   const maxSize = Math.min(300, size);
   return (
     <Dot cx={cx} cy={cy} fill={fill} fillOpacity={0.5} r={maxSize * 0.035} style={{ cursor: 'pointer' }} />
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
index e0ca19dbe0..aae7af5f3b 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
@@ -16,8 +16,9 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import ScatterPlot from './ScatterPlot';
+import ScatterPlot, { CustomTooltip } from './ScatterPlot';
 import { ONE_MILLISECOND } from '../../../utils/date';
+import { FALLBACK_TRACE_NAME } from '../../../constants';
 
 // Mock ResizeObserver which is not available in JSDOM but required by Recharts
 class MockResizeObserver {
@@ -257,3 +258,40 @@ describe('ScatterPlot', () => {
     expect(secondSymbol).toBeTruthy();
   });
 });
+
+describe('CustomTooltip', () => {
+  it('renders with trace name when active and payload is provided', () => {
+    const traceName = 'Test Trace Name';
+    const { container } = render(<CustomTooltip active payload={[{ payload: { name: traceName } }]} />);
+
+    const tooltipElement = container.querySelector('.scatter-plot-hint');
+    expect(tooltipElement).toBeTruthy();
+    expect(tooltipElement.querySelector('h4').textContent).toBe(traceName);
+  });
+
+  it('renders with fallback name when trace has no name', () => {
+    const { container } = render(<CustomTooltip active payload={[{ payload: {} }]} />);
+
+    const tooltipElement = container.querySelector('.scatter-plot-hint');
+    expect(tooltipElement).toBeTruthy();
+    expect(tooltipElement.querySelector('h4').textContent).toBe(FALLBACK_TRACE_NAME);
+  });
+
+  it('returns null when not active', () => {
+    const { container } = render(<CustomTooltip payload={[{ payload: { name: 'Test' } }]} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('returns null when payload is empty', () => {
+    const { container } = render(<CustomTooltip active payload={[]} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('returns null when payload is not provided', () => {
+    const { container } = render(<CustomTooltip active />);
+
+    expect(container.firstChild).toBeNull();
+  });
+});

From c40b149a3d49f2a1f95b44eb5312d1d16947f51b Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Mon, 3 Mar 2025 14:52:37 +0000
Subject: [PATCH 05/13] add spm view with recharts

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../operationDetailsTable/opsGraph.tsx        |  53 ++-
 .../Monitor/ServicesView/serviceGraph.css     |  20 +-
 .../Monitor/ServicesView/serviceGraph.tsx     | 330 ++++++++++++------
 3 files changed, 262 insertions(+), 141 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
index 08e1cc2ac1..a65718bddf 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
@@ -13,12 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import {
-  XYPlot,
-  AreaSeries,
-  LineSeries,
-  // @ts-ignore
-} from 'react-vis';
+import { AreaChart, Area, ResponsiveContainer, YAxis } from 'recharts';
 import { ApiError } from '../../../../types/api-error';
 import { Points } from '../../../../types/metrics';
 
@@ -43,7 +38,7 @@ export class OperationsGraph extends React.PureComponent<TProps> {
     const { dataPoints, yDomain, color, error } = this.props;
 
     if (error) {
-      return OperationsGraph.generatePlaceholder('Couldn’t fetch data');
+      return OperationsGraph.generatePlaceholder("Couldn't fetch data");
     }
 
     if (dataPoints.length === 0) {
@@ -51,34 +46,38 @@ export class OperationsGraph extends React.PureComponent<TProps> {
     }
 
     const dynProps: {
-      yDomain?: yDomain;
+      domain?: yDomain;
     } = {};
 
     if (yDomain) {
-      dynProps.yDomain = yDomain;
+      dynProps.domain = yDomain;
     }
 
     return (
       <div className="ops-container">
-        <XYPlot
-          margin={{
-            left: 0,
-            right: 0,
-            bottom: 1,
-            top: 2,
-          }}
-          width={100}
-          height={15}
-        >
-          <AreaSeries
-            className="area-series-example ops-graph-style"
-            curve="curveLinear"
-            color={color}
+        <ResponsiveContainer width={100} height={15}>
+          <AreaChart
+            margin={{
+              left: 0,
+              right: 0,
+              bottom: 0,
+              top: 0,
+            }}
             data={dataPoints}
-            {...dynProps}
-          />
-          <LineSeries className="area-elevated-line-series" color={color} data={dataPoints} {...dynProps} />
-        </XYPlot>
+          >
+            <YAxis hide {...dynProps} />
+            <Area
+              type="monotone"
+              dataKey="y"
+              stroke={color}
+              fill={color}
+              fillOpacity={1}
+              isAnimationActive={false}
+              dot={false}
+              connectNulls
+            />
+          </AreaChart>
+        </ResponsiveContainer>
       </div>
     );
   }
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css
index afde571e6c..b6e3d1599f 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css
@@ -17,6 +17,7 @@ limitations under the License.
 .legend-label span {
   display: inherit !important;
   margin-left: 10px !important;
+  font-size: 0.625rem;
 }
 
 .graph-container {
@@ -27,7 +28,7 @@ limitations under the License.
 
 .graph-header {
   margin-bottom: 0;
-  font-size: 14;
+  font-size: 14px;
   font-weight: 500;
 }
 
@@ -53,3 +54,20 @@ limitations under the License.
   width: 140;
   color: #6b6b76;
 }
+
+.graph-axis {
+  stroke: #e6e6e9;
+  stroke-width: 2;
+}
+
+.graph-tooltip {
+  font-size: 0.625rem;
+}
+
+.graph-x-axis {
+  font-size: 11px;
+}
+
+.graph-y-axis {
+  font-size: 0.625rem;
+}
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index ad008857f8..e6df77b0c3 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -13,19 +13,9 @@
 // limitations under the License.
 
 import * as React from 'react';
-import {
-  XYPlot,
-  XAxis,
-  YAxis,
-  HorizontalGridLines,
-  LineSeries,
-  AreaSeries,
-  Crosshair,
-  DiscreteColorLegend,
-  // @ts-ignore
-} from 'react-vis';
+import { AreaChart, Area, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import LoadingIndicator from '../../common/LoadingIndicator';
-import { ServiceMetricsObject, Points } from '../../../types/metrics';
+import { ServiceMetricsObject } from '../../../types/metrics';
 import './serviceGraph.css';
 import { ApiError } from '../../../types/api-error';
 
@@ -44,14 +34,12 @@ type TProps = {
   xDomain: number[];
 };
 
-type TCrossHairValues = {
-  label: number;
+type MetricDataPoint = {
   x: number;
-  y: number | null;
+  [key: string]: number | null;
 };
 
-// export for tests
-export const tickFormat = (v: number) => {
+export const tickFormat = (v: number): string => {
   const dateObj = new Date(v);
   const hours = dateObj.getHours().toString();
   const minutes = dateObj.getMinutes().toString();
@@ -59,56 +47,142 @@ export const tickFormat = (v: number) => {
   return `${hours.length === 1 ? `0${hours}` : hours}:${minutes.length === 1 ? `0${minutes}` : minutes}`;
 };
 
-// export for tests
+type TPlaceholder = {
+  name: string;
+  marginClassName?: string;
+  width: number;
+  height: number;
+  children: React.ReactNode;
+};
+
+const Placeholder = ({ name, marginClassName, width, height, children }: TPlaceholder): JSX.Element => {
+  return (
+    <div
+      className={`graph-container ${marginClassName}`}
+      style={{
+        height,
+      }}
+    >
+      <h3 className="graph-header">{name}</h3>
+      <div
+        className="center-placeholder"
+        style={{
+          width,
+          height: height - 74,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
 export class ServiceGraphImpl extends React.PureComponent<TProps> {
   height = 242;
-  colors: string[] = ['#DCA3D2', '#EA9977', '#869ADD'];
-  state: { crosshairValues: TCrossHairValues[] } = {
-    crosshairValues: [],
-  };
+  colors: string[] = ['#869ADD', '#EA9977', '#DCA3D2'];
 
   getData(): ServiceMetricsObject[] {
     const { metricsData } = this.props;
 
-    // istanbul ignore next : TS required to check, but we do it in render function
     if (metricsData === null) {
       return [];
     }
 
-    return Array.isArray(metricsData) ? metricsData : [metricsData];
+    const data = Array.isArray(metricsData) ? metricsData : [metricsData];
+    return data.sort((a, b) => b.quantile - a.quantile);
+  }
+
+  getMetricsData(): MetricDataPoint[] {
+    const serviceMetricObjects = this.getData();
+    if (serviceMetricObjects.length === 0 || !serviceMetricObjects[0].metricPoints) {
+      return [];
+    }
+
+    const result = Array(serviceMetricObjects[0].metricPoints.length);
+    for (let i = 0; i < serviceMetricObjects[0].metricPoints.length; i++) {
+      result[i] = {
+        x: serviceMetricObjects[0].metricPoints[i].x,
+        ...serviceMetricObjects.reduce((acc: Record<string, number | null>, obj) => {
+          acc[obj.quantile.toString()] = obj.metricPoints[i].y;
+          return acc;
+        }, {}),
+      };
+    }
+    return result;
+  }
+
+  calculateYDomain(data: MetricDataPoint[]): number[] {
+    if (!data || data.length === 0) return [0, 1];
+
+    let min = Infinity;
+    let max = -Infinity;
+
+    data.forEach(point => {
+      Object.entries(point).forEach(([key, value]) => {
+        if (key !== 'x' && value !== null) {
+          min = Math.min(min, value);
+          max = Math.max(max, value);
+        }
+      });
+    });
+
+    if (min === Infinity || max === -Infinity) return [0, 1];
+
+    const range = max - min;
+    const padding = range * 0.1;
+    min = Math.max(0, min - padding);
+    max += padding;
+
+    const magnitude = Math.floor(Math.log10(max - min));
+    const roundTo = 10 ** (magnitude - 1);
+
+    return [Math.floor(min / roundTo) * roundTo, Math.ceil(max / roundTo) * roundTo];
+  }
+
+  calculateYAxisTicks(domain: number[]): number[] {
+    const [min, max] = domain;
+    const step = (max - min) / 4;
+    return Array.from({ length: 5 }, (_, i) => min + step * i);
   }
 
-  renderLines() {
+  formatYAxisTick = (value: number): string => {
+    const { name } = this.props;
+
+    if (this.props.yAxisTickFormat) {
+      return String(this.props.yAxisTickFormat(value));
+    }
+
+    if (name.includes('Error rate')) {
+      return value.toFixed(0);
+    }
+
+    if (value === 0) return '0';
+    if (value < 0.01) return value.toExponential(2);
+    if (value < 1) return value.toFixed(3);
+    if (value < 10) return value.toFixed(2);
+    if (value < 100) return value.toFixed(1);
+    return value.toFixed(0);
+  };
+
+  renderLines(): JSX.Element[] {
     const { metricsData, color } = this.props;
 
     if (metricsData) {
-      const graphs: any = [];
+      const graphs: JSX.Element[] = [];
       let i = 0;
 
       this.getData().forEach((line: ServiceMetricsObject, idx: number) => {
         graphs.push(
-          <AreaSeries
-            key={i++}
-            data={line.metricPoints ? line.metricPoints : []}
-            getNull={(d: Points) => d.y !== null}
-            onNearestX={(_datapoint: Points, { index }: { index: number }) => {
-              this.setState({
-                crosshairValues: this.getData().map((d: ServiceMetricsObject) => ({
-                  ...d.metricPoints[index],
-                  label: d.quantile,
-                })),
-              });
-            }}
-            opacity={0.1}
-            color={[color || this.colors[idx]]}
-          />
-        );
-        graphs.push(
-          <LineSeries
-            getNull={(d: Points) => d.y !== null}
+          <Area
             key={i++}
-            data={line.metricPoints ? line.metricPoints : []}
-            color={[color || this.colors[idx]]}
+            type="linear"
+            dataKey={line.quantile.toString()}
+            stroke={color || this.colors[idx]}
+            strokeWidth={2}
+            fill={color || this.colors[idx]}
+            fillOpacity={0.1}
+            connectNulls={false}
+            isAnimationActive={false}
           />
         );
       });
@@ -119,7 +193,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
     return [];
   }
 
-  generatePlaceholder(placeHolder: string | React.ReactNode) {
+  generatePlaceholder(placeHolder: React.ReactNode): JSX.Element {
     const { width } = this.props;
 
     return (
@@ -135,7 +209,15 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
     );
   }
 
-  render() {
+  calculateNumericTicks(xDomain: number[]): number[] {
+    const [start, end] = xDomain;
+    const count = 7;
+    const step = (end - start) / (count - 1);
+
+    return Array.from({ length: count }, (_, i) => start + step * i);
+  }
+
+  render(): JSX.Element {
     const {
       width,
       yDomain,
@@ -146,76 +228,98 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
       marginClassName,
       name,
       error,
-      yAxisTickFormat,
       xDomain,
     } = this.props;
-    let GraphComponent = this.generatePlaceholder(<LoadingIndicator centered />);
-    const noDataComponent = this.generatePlaceholder('No Data');
-    const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');
-
-    const Plot = (
-      <XYPlot
-        margin={{ bottom: 25 }}
-        onMouseLeave={() => this.setState({ crosshairValues: [] })}
-        width={width}
-        height={this.height - 74}
-        xDomain={xDomain}
-        yDomain={yDomain}
-      >
-        {showHorizontalLines ? <HorizontalGridLines /> : null}
-        <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
-        <YAxis tickFormat={yAxisTickFormat} />
-        {this.renderLines()}
-        <Crosshair values={this.state.crosshairValues}>
-          <div className="crosshair-value">
-            {this.state.crosshairValues[0] &&
-              `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
-                this.state.crosshairValues[0].x
-              ).toLocaleTimeString()}`}
-            {this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
-              showLegend ? (
-                <div key={d.label}>
-                  P{d.label * 100}: {d.y}
-                </div>
-              ) : (
-                <div key={d.label}>{d.y}</div>
-              )
-            )}
-          </div>
-        </Crosshair>
-        {showLegend ? (
-          <DiscreteColorLegend
-            className="legend-label"
-            orientation="horizontal"
-            items={this.getData()
-              .map((d: ServiceMetricsObject, idx: number) => ({
-                color: this.colors[idx],
-                title: `${d.quantile * 100}th`,
-              }))
-              .reverse()}
-          />
-        ) : null}
-      </XYPlot>
-    );
 
-    if (!loading && xDomain.length > 0) {
-      GraphComponent = metricsData === null ? noDataComponent : Plot;
-    }
+    if (loading || !xDomain || xDomain[0] === undefined || xDomain[1] === undefined)
+      return (
+        <Placeholder name={name} marginClassName={marginClassName} width={width} height={this.height}>
+          <LoadingIndicator centered />
+        </Placeholder>
+      );
 
-    if (error) {
-      GraphComponent = apiErrorComponent;
-    }
+    if (error)
+      return (
+        <Placeholder name={name} marginClassName={marginClassName} width={width} height={this.height}>
+          Could not fetch data
+        </Placeholder>
+      );
+
+    if (metricsData === null)
+      return (
+        <Placeholder name={name} marginClassName={marginClassName} width={width} height={this.height}>
+          No Data
+        </Placeholder>
+      );
+
+    const data = this.getMetricsData();
+    const effectiveYDomain = yDomain || this.calculateYDomain(data);
+
+    const legendFormatter = (value: string): JSX.Element => {
+      const dataVal = this.getData();
+      const foundIdx = dataVal.findIndex(d => d.quantile.toString() === value);
+      if (foundIdx === -1) return <span>N/A</span>;
+      const quantile = dataVal[foundIdx]?.quantile;
+      if (quantile == null) return <span>N/A</span>;
+      return <span>{quantile * 100}th</span>;
+    };
 
     return (
-      <div
-        className={`graph-container ${marginClassName}`}
-        style={{
-          height: this.height,
-        }}
-      >
-        <h3 className="graph-header">{name}</h3>
-        {GraphComponent}
-      </div>
+      <Placeholder name={name} marginClassName={marginClassName} width={width} height={this.height}>
+        <ResponsiveContainer width="100%" height={this.height}>
+          <AreaChart data={data} margin={{ top: 20, bottom: 55, left: 0, right: 0 }}>
+            <XAxis
+              domain={xDomain}
+              tickFormatter={tickFormat}
+              dataKey="x"
+              className="graph-x-axis"
+              tickLine={{ className: 'graph-axis' }}
+              axisLine={{ className: 'graph-axis' }}
+              height={30}
+              type="number"
+              ticks={this.calculateNumericTicks(xDomain)}
+              tickMargin={4}
+              tick={{ dx: 0, dy: 4 }}
+            />
+            <YAxis
+              domain={effectiveYDomain}
+              tickFormatter={this.formatYAxisTick}
+              className="graph-y-axis"
+              tickLine={{ className: 'graph-axis' }}
+              axisLine={{ className: 'graph-axis' }}
+              width={45}
+              ticks={this.calculateYAxisTicks(effectiveYDomain)}
+              tickMargin={4}
+              tick={{ dx: -4, dy: 0 }}
+            />
+            <CartesianGrid horizontal={showHorizontalLines} vertical={false} />
+
+            {this.renderLines()}
+
+            <Tooltip
+              contentStyle={{ fontSize: '0.625rem' }}
+              labelFormatter={(value: number) => new Date(value).toLocaleString()}
+              formatter={(value: number, uname: string) => {
+                if (!showLegend) {
+                  return [this.formatYAxisTick(value)];
+                }
+                const formattedName = Number(uname) * 100;
+                return [this.formatYAxisTick(value), `P${formattedName}`];
+              }}
+            />
+
+            {showLegend && (
+              <Legend
+                align="left"
+                verticalAlign="bottom"
+                height={10}
+                iconType="plainline"
+                formatter={legendFormatter}
+              />
+            )}
+          </AreaChart>
+        </ResponsiveContainer>
+      </Placeholder>
     );
   }
 }

From 258fc937233478810a2b6f40a6442bee833273b7 Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Mon, 3 Mar 2025 16:36:49 +0000
Subject: [PATCH 06/13] fix tests for opsGraph

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../__snapshots__/opsGraph.test.js.snap       |  80 -------------
 .../operationDetailsTable/opsGraph.css        |  29 -----
 .../operationDetailsTable/opsGraph.test.js    | 109 +++++++++++++++---
 .../operationDetailsTable/opsGraph.tsx        |  15 ++-
 4 files changed, 100 insertions(+), 133 deletions(-)
 delete mode 100644 packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/opsGraph.test.js.snap
 delete mode 100644 packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.css

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/opsGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/opsGraph.test.js.snap
deleted file mode 100644
index 670e52c619..0000000000
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/opsGraph.test.js.snap
+++ /dev/null
@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<OperationsGraph> "Couldn’t fetch data" displayed 1`] = `
-<div
-  className="ops-graph-placeholder"
->
-  Couldn’t fetch data
-</div>
-`;
-
-exports[`<OperationsGraph> "Mo data" is displayed 1`] = `
-<div
-  className="ops-graph-placeholder"
->
-  No Data
-</div>
-`;
-
-exports[`<OperationsGraph> Graph rendered successfully 1`] = `
-<div
-  className="ops-container"
->
-  <XYPlot
-    className=""
-    height={15}
-    margin={
-      Object {
-        "bottom": 1,
-        "left": 0,
-        "right": 0,
-        "top": 2,
-      }
-    }
-    width={100}
-  >
-    <AreaSeries
-      className="area-series-example ops-graph-style"
-      color="#FFFFFF"
-      curve="curveLinear"
-      data={
-        Array [
-          Object {
-            "x": 1631534436235,
-            "y": 0.01,
-          },
-          Object {
-            "x": 1631534496235,
-            "y": 0.01,
-          },
-        ]
-      }
-      getNull={[Function]}
-      stack={false}
-      style={Object {}}
-    />
-    <LineSeries
-      className="area-elevated-line-series"
-      color="#FFFFFF"
-      curve={null}
-      data={
-        Array [
-          Object {
-            "x": 1631534436235,
-            "y": 0.01,
-          },
-          Object {
-            "x": 1631534496235,
-            "y": 0.01,
-          },
-        ]
-      }
-      getNull={[Function]}
-      opacity={1}
-      stack={false}
-      strokeStyle="solid"
-      style={Object {}}
-    />
-  </XYPlot>
-</div>
-`;
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.css
deleted file mode 100644
index 51bffa9f68..0000000000
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright (c) 2021 The Jaeger Authors.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.ops-graph-placeholder {
-  vertical-align: middle;
-  text-align: center;
-  display: table-cell;
-}
-
-.ops-container {
-  padding-top: 2px;
-}
-
-.ops-graph-style {
-  opacity: 0.2;
-}
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
index 0503f51f77..80deb95e77 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
@@ -13,38 +13,109 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import OperationsGraph from './opsGraph';
 import { serviceOpsMetrics } from '../../../../reducers/metrics.mock';
 
-const props = {
-  color: '#FFFFFF',
-  dataPoints: [],
-  error: null,
-};
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+window.ResizeObserver = ResizeObserver;
 
 describe('<OperationsGraph>', () => {
-  let wrapper;
+  const defaultProps = {
+    color: '#FFFFFF',
+    dataPoints: [],
+    error: null,
+  };
 
-  beforeEach(() => {
-    wrapper = shallow(<OperationsGraph {...props} />);
+  it('renders placeholder when no data is available', () => {
+    const { container } = render(<OperationsGraph {...defaultProps} />);
+    expect(screen.getByText('No Data')).toBeInTheDocument();
+    expect(container.querySelector('.ops-container')).not.toBeInTheDocument();
   });
 
-  it('does not explode', () => {
-    expect(wrapper.length).toBe(1);
+  it('renders error message when there is an error', () => {
+    const { container } = render(<OperationsGraph {...defaultProps} error={new Error('API Error')} />);
+    expect(screen.getByText("Couldn't fetch data")).toBeInTheDocument();
+    expect(container.querySelector('.ops-container')).not.toBeInTheDocument();
   });
 
-  it('"Mo data" is displayed', () => {
-    expect(wrapper).toMatchSnapshot();
+  it('renders graph when data points are available', () => {
+    const props = {
+      ...defaultProps,
+      dataPoints: serviceOpsMetrics[0].dataPoints.service_operation_call_rate,
+    };
+    const { container } = render(<OperationsGraph {...props} />);
+
+    expect(container.querySelector('.ops-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-area')).toBeInTheDocument();
+  });
+
+  it('renders graph with custom yDomain', () => {
+    const props = {
+      ...defaultProps,
+      dataPoints: [{ x: 1, y: 50 }],
+      yDomain: [0, 100],
+    };
+    const { container } = render(<OperationsGraph {...props} />);
+
+    expect(container.querySelector('.ops-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
   });
 
-  it('"Couldn’t fetch data" displayed', () => {
-    wrapper.setProps({ ...props, error: new Error('API Error') });
-    expect(wrapper).toMatchSnapshot();
+  it('calculates yDomain from data points when not provided', () => {
+    const props = {
+      ...defaultProps,
+      dataPoints: [
+        { x: 1, y: 10 },
+        { x: 2, y: 20 },
+        { x: 3, y: null },
+        { x: 4, y: 30 },
+      ],
+    };
+    const { container } = render(<OperationsGraph {...props} />);
+
+    expect(container.querySelector('.ops-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
   });
 
-  it('Graph rendered successfully', () => {
-    wrapper.setProps({ ...props, dataPoints: serviceOpsMetrics[0].dataPoints.service_operation_call_rate });
-    expect(wrapper).toMatchSnapshot();
+  it('handles empty yValues array when calculating domain', () => {
+    const props = {
+      ...defaultProps,
+      dataPoints: [
+        { x: 1, y: null },
+        { x: 2, y: null },
+      ],
+    };
+    const { container } = render(<OperationsGraph {...props} />);
+
+    expect(container.querySelector('.ops-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+  });
+
+  it('handles various y-value types when calculating domain', () => {
+    const dataPoints = [
+      { x: 1, y: 10 },
+      { x: 2, y: null },
+      { x: 3, y: undefined },
+      { x: 4, y: 30 },
+    ];
+    const { container } = render(<OperationsGraph dataPoints={dataPoints} />);
+    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+  });
+
+  it('generates placeholder with custom text', () => {
+    const customText = 'Custom Placeholder';
+    const placeholder = OperationsGraph.generatePlaceholder(customText);
+    render(placeholder);
+
+    const placeholderElement = screen.getByText(customText);
+    expect(placeholderElement).toBeInTheDocument();
+    expect(placeholderElement).toHaveClass('ops-graph-placeholder');
   });
 });
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
index a65718bddf..6726936634 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
@@ -17,8 +17,6 @@ import { AreaChart, Area, ResponsiveContainer, YAxis } from 'recharts';
 import { ApiError } from '../../../../types/api-error';
 import { Points } from '../../../../types/metrics';
 
-import './opsGraph.css';
-
 type yDomain = [number, number];
 
 type TProps = {
@@ -51,6 +49,13 @@ export class OperationsGraph extends React.PureComponent<TProps> {
 
     if (yDomain) {
       dynProps.domain = yDomain;
+    } else {
+      const yValues = dataPoints.map(point => point.y).filter((y): y is number => y != null);
+      if (yValues.length > 0) {
+        const minY = Math.min(...yValues);
+        const maxY = Math.max(...yValues);
+        dynProps.domain = [minY * 0.999, maxY];
+      }
     }
 
     return (
@@ -67,14 +72,14 @@ export class OperationsGraph extends React.PureComponent<TProps> {
           >
             <YAxis hide {...dynProps} />
             <Area
-              type="monotone"
+              type="linear"
               dataKey="y"
-              stroke={color}
+              stroke="none"
               fill={color}
               fillOpacity={1}
               isAnimationActive={false}
-              dot={false}
               connectNulls
+              dot={false}
             />
           </AreaChart>
         </ResponsiveContainer>

From 727a04fb7d116fc685b8448db2ae1844dede6dfd Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Tue, 4 Mar 2025 15:29:17 +0000
Subject: [PATCH 07/13] minimalize changes

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../__snapshots__/serviceGraph.test.js.snap   | 740 ------------------
 .../operationDetailsTable/opsGraph.test.js    |  22 +-
 .../Monitor/ServicesView/serviceGraph.test.js | 300 ++++---
 .../Monitor/ServicesView/serviceGraph.tsx     |   1 +
 4 files changed, 214 insertions(+), 849 deletions(-)
 delete mode 100644 packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
deleted file mode 100644
index d460ba0e65..0000000000
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ /dev/null
@@ -1,740 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<ServiceGraph> "Couldn’t fetch data" displayed 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <div
-    className="center-placeholder"
-    style={
-      Object {
-        "height": 168,
-        "width": 300,
-      }
-    }
-  >
-    Couldn’t fetch data
-  </div>
-</div>
-`;
-
-exports[`<ServiceGraph> "No data" displayed 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <div
-    className="center-placeholder"
-    style={
-      Object {
-        "height": 168,
-        "width": 300,
-      }
-    }
-  >
-    No Data
-  </div>
-</div>
-`;
-
-exports[`<ServiceGraph> Base graph should be displayed  1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <XYPlot
-    className=""
-    height={168}
-    margin={
-      Object {
-        "bottom": 25,
-      }
-    }
-    onMouseLeave={[Function]}
-    width={300}
-    xDomain={
-      Array [
-        1,
-        2,
-      ]
-    }
-  >
-    <XAxis
-      attr="x"
-      attrAxis="y"
-      orientation="bottom"
-      tickFormat={[Function]}
-      tickTotal={5}
-    />
-    <YAxis
-      attr="y"
-      attrAxis="x"
-      orientation="left"
-    />
-    <AreaSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="0"
-      onNearestX={[Function]}
-      opacity={0.1}
-      stack={false}
-      style={Object {}}
-    />
-    <LineSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      curve={null}
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="1"
-      opacity={1}
-      stack={false}
-      strokeStyle="solid"
-      style={Object {}}
-    />
-    <Crosshair
-      itemsFormat={[Function]}
-      style={
-        Object {
-          "box": Object {},
-          "line": Object {},
-          "title": Object {},
-        }
-      }
-      titleFormat={[Function]}
-      values={Array []}
-    >
-      <div
-        className="crosshair-value"
-      />
-    </Crosshair>
-  </XYPlot>
-</div>
-`;
-
-exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <XYPlot
-    className=""
-    height={168}
-    margin={
-      Object {
-        "bottom": 25,
-      }
-    }
-    onMouseLeave={[Function]}
-    width={300}
-    xDomain={
-      Array [
-        1,
-        2,
-      ]
-    }
-  >
-    <XAxis
-      attr="x"
-      attrAxis="y"
-      orientation="bottom"
-      tickFormat={[Function]}
-      tickTotal={5}
-    />
-    <YAxis
-      attr="y"
-      attrAxis="x"
-      orientation="left"
-    />
-    <AreaSeries
-      className=""
-      color={
-        Array [
-          "AAAAAA",
-        ]
-      }
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="0"
-      onNearestX={[Function]}
-      opacity={0.1}
-      stack={false}
-      style={Object {}}
-    />
-    <LineSeries
-      className=""
-      color={
-        Array [
-          "AAAAAA",
-        ]
-      }
-      curve={null}
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="1"
-      opacity={1}
-      stack={false}
-      strokeStyle="solid"
-      style={Object {}}
-    />
-    <Crosshair
-      itemsFormat={[Function]}
-      style={
-        Object {
-          "box": Object {},
-          "line": Object {},
-          "title": Object {},
-        }
-      }
-      titleFormat={[Function]}
-      values={Array []}
-    >
-      <div
-        className="crosshair-value"
-      />
-    </Crosshair>
-  </XYPlot>
-</div>
-`;
-
-exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <XYPlot
-    className=""
-    height={168}
-    margin={
-      Object {
-        "bottom": 25,
-      }
-    }
-    onMouseLeave={[Function]}
-    width={300}
-    xDomain={
-      Array [
-        1,
-        2,
-      ]
-    }
-  >
-    <HorizontalGridLines
-      attr="y"
-      direction="horizontal"
-    />
-    <XAxis
-      attr="x"
-      attrAxis="y"
-      orientation="bottom"
-      tickFormat={[Function]}
-      tickTotal={5}
-    />
-    <YAxis
-      attr="y"
-      attrAxis="x"
-      orientation="left"
-    />
-    <AreaSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="0"
-      onNearestX={[Function]}
-      opacity={0.1}
-      stack={false}
-      style={Object {}}
-    />
-    <LineSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      curve={null}
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="1"
-      opacity={1}
-      stack={false}
-      strokeStyle="solid"
-      style={Object {}}
-    />
-    <Crosshair
-      itemsFormat={[Function]}
-      style={
-        Object {
-          "box": Object {},
-          "line": Object {},
-          "title": Object {},
-        }
-      }
-      titleFormat={[Function]}
-      values={Array []}
-    >
-      <div
-        className="crosshair-value"
-      />
-    </Crosshair>
-  </XYPlot>
-</div>
-`;
-
-exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <XYPlot
-    className=""
-    height={168}
-    margin={
-      Object {
-        "bottom": 25,
-      }
-    }
-    onMouseLeave={[Function]}
-    width={300}
-    xDomain={
-      Array [
-        1,
-        2,
-      ]
-    }
-  >
-    <XAxis
-      attr="x"
-      attrAxis="y"
-      orientation="bottom"
-      tickFormat={[Function]}
-      tickTotal={5}
-    />
-    <YAxis
-      attr="y"
-      attrAxis="x"
-      orientation="left"
-    />
-    <AreaSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="0"
-      onNearestX={[Function]}
-      opacity={0.1}
-      stack={false}
-      style={Object {}}
-    />
-    <LineSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      curve={null}
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="1"
-      opacity={1}
-      stack={false}
-      strokeStyle="solid"
-      style={Object {}}
-    />
-    <Crosshair
-      itemsFormat={[Function]}
-      style={
-        Object {
-          "box": Object {},
-          "line": Object {},
-          "title": Object {},
-        }
-      }
-      titleFormat={[Function]}
-      values={Array []}
-    >
-      <div
-        className="crosshair-value"
-      />
-    </Crosshair>
-    <DiscreteColorLegendItem
-      className="legend-label"
-      colors={
-        Array [
-          "#12939A",
-          "#79C7E3",
-          "#1A3177",
-          "#FF9833",
-          "#EF5D28",
-        ]
-      }
-      items={
-        Array [
-          Object {
-            "color": "#DCA3D2",
-            "title": "95th",
-          },
-        ]
-      }
-      orientation="horizontal"
-    />
-  </XYPlot>
-</div>
-`;
-
-exports[`<ServiceGraph> Crosshair map test 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <XYPlot
-    className=""
-    height={168}
-    margin={
-      Object {
-        "bottom": 25,
-      }
-    }
-    onMouseLeave={[Function]}
-    width={300}
-    xDomain={
-      Array [
-        1,
-        2,
-      ]
-    }
-  >
-    <XAxis
-      attr="x"
-      attrAxis="y"
-      orientation="bottom"
-      tickFormat={[Function]}
-      tickTotal={5}
-    />
-    <YAxis
-      attr="y"
-      attrAxis="x"
-      orientation="left"
-    />
-    <AreaSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="0"
-      onNearestX={[Function]}
-      opacity={0.1}
-      stack={false}
-      style={Object {}}
-    />
-    <LineSeries
-      className=""
-      color={
-        Array [
-          "#DCA3D2",
-        ]
-      }
-      curve={null}
-      data={
-        Array [
-          Object {
-            "x": 1631271823806,
-            "y": 0.05,
-          },
-          Object {
-            "x": 1631271883806,
-            "y": 0.05,
-          },
-        ]
-      }
-      getNull={[Function]}
-      key="1"
-      opacity={1}
-      stack={false}
-      strokeStyle="solid"
-      style={Object {}}
-    />
-    <Crosshair
-      itemsFormat={[Function]}
-      style={
-        Object {
-          "box": Object {},
-          "line": Object {},
-          "title": Object {},
-        }
-      }
-      titleFormat={[Function]}
-      values={Array []}
-    >
-      <div
-        className="crosshair-value"
-      />
-    </Crosshair>
-  </XYPlot>
-</div>
-`;
-
-exports[`<ServiceGraph> Crosshair mouse hover test 1`] = `
-<path
-  class="rv-xy-plot__series rv-xy-plot__series--line "
-  d="M0,0L0,0L0,0L0,0Z"
-  style="opacity:0.1;stroke:#DCA3D2;fill:#DCA3D2"
-  transform="translate(undefined,undefined)"
-/>
-`;
-
-exports[`<ServiceGraph> Crosshair mouse hover test 2`] = `
-<path
-  class="rv-xy-plot__series rv-xy-plot__series--line "
-  d="M0,0L0,0"
-  style="opacity:1;stroke:#DCA3D2"
-  transform="translate(undefined,undefined)"
-/>
-`;
-
-exports[`<ServiceGraph> Loading indicator is displayed 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <div
-    className="center-placeholder"
-    style={
-      Object {
-        "height": 168,
-        "width": 300,
-      }
-    }
-  >
-    <LoadingIndicator
-      centered={true}
-    />
-  </div>
-</div>
-`;
-
-exports[`<ServiceGraph> Loading indicator is displayed when xDomain is empty 1`] = `
-<div
-  className="graph-container "
-  style={
-    Object {
-      "height": 242,
-    }
-  }
->
-  <h3
-    className="graph-header"
-  >
-    Hello Graph
-  </h3>
-  <div
-    className="center-placeholder"
-    style={
-      Object {
-        "height": 168,
-        "width": 300,
-      }
-    }
-  >
-    <LoadingIndicator
-      centered={true}
-    />
-  </div>
-</div>
-`;
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
index 80deb95e77..9ec301580f 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
@@ -32,25 +32,29 @@ describe('<OperationsGraph>', () => {
     error: null,
   };
 
-  it('renders placeholder when no data is available', () => {
+  it('does not explode', () => {
     const { container } = render(<OperationsGraph {...defaultProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('"No Data" is displayed', () => {
+    render(<OperationsGraph {...defaultProps} />);
     expect(screen.getByText('No Data')).toBeInTheDocument();
-    expect(container.querySelector('.ops-container')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('.ops-container')).not.toBeInTheDocument();
   });
 
-  it('renders error message when there is an error', () => {
-    const { container } = render(<OperationsGraph {...defaultProps} error={new Error('API Error')} />);
+  it('"Couldn\'t fetch data" displayed', () => {
+    render(<OperationsGraph {...defaultProps} error={new Error('API Error')} />);
     expect(screen.getByText("Couldn't fetch data")).toBeInTheDocument();
-    expect(container.querySelector('.ops-container')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('.ops-container')).not.toBeInTheDocument();
   });
 
-  it('renders graph when data points are available', () => {
+  it('Graph rendered successfully', () => {
     const props = {
       ...defaultProps,
       dataPoints: serviceOpsMetrics[0].dataPoints.service_operation_call_rate,
     };
     const { container } = render(<OperationsGraph {...props} />);
-
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
     expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
     expect(container.querySelector('.recharts-area')).toBeInTheDocument();
@@ -63,7 +67,6 @@ describe('<OperationsGraph>', () => {
       yDomain: [0, 100],
     };
     const { container } = render(<OperationsGraph {...props} />);
-
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
     expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
   });
@@ -79,7 +82,6 @@ describe('<OperationsGraph>', () => {
       ],
     };
     const { container } = render(<OperationsGraph {...props} />);
-
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
     expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
   });
@@ -93,7 +95,6 @@ describe('<OperationsGraph>', () => {
       ],
     };
     const { container } = render(<OperationsGraph {...props} />);
-
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
     expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
   });
@@ -113,7 +114,6 @@ describe('<OperationsGraph>', () => {
     const customText = 'Custom Placeholder';
     const placeholder = OperationsGraph.generatePlaceholder(customText);
     render(placeholder);
-
     const placeholderElement = screen.getByText(customText);
     expect(placeholderElement).toBeInTheDocument();
     expect(placeholderElement).toHaveClass('ops-graph-placeholder');
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
index 6f1f1ecd19..0dadf70e9f 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
@@ -13,139 +13,243 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import ServiceGraph, { tickFormat } from './serviceGraph';
+import { Tooltip } from 'recharts';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ServiceGraph, { ServiceGraphImpl, tickFormat } from './serviceGraph';
 import { serviceMetrics } from '../../../reducers/metrics.mock';
 
-const props = {
-  width: 300,
-  error: null,
-  name: 'Hello Graph',
-  metricsData: null,
-  loading: true,
-  marginClassName: '',
-  crosshairValues: [],
-  xDomain: [1, 2],
-};
+// Mock ResizeObserver for Recharts
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+window.ResizeObserver = ResizeObserver;
+
+// Mock SVGElement.getBBox() for Recharts
+if (!SVGElement.prototype.getBBox) {
+  SVGElement.prototype.getBBox = () => ({
+    width: 100,
+    height: 100,
+    x: 0,
+    y: 0,
+  });
+}
+
+// Mock getComputedStyle for Recharts
+window.getComputedStyle = () => ({
+  getPropertyValue: () => '',
+});
 
 describe('<ServiceGraph>', () => {
-  let wrapper;
+  const defaultProps = {
+    width: 300,
+    error: null,
+    name: 'Hello Graph',
+    metricsData: null,
+    loading: true,
+    marginClassName: '',
+    xDomain: [1, 2],
+  };
 
   beforeEach(() => {
-    wrapper = shallow(<ServiceGraph {...props} />);
+    // Clear any previous test DOM
+    document.body.innerHTML = '';
   });
 
-  it('does not explode', () => {
-    expect(wrapper.length).toBe(1);
+  it('renders loading indicator when loading', () => {
+    const { container } = render(<ServiceGraph {...defaultProps} />);
+    const loadingIndicator = container.querySelector('svg.LoadingIndicator');
+    expect(loadingIndicator).toBeInTheDocument();
+    expect(loadingIndicator).toHaveClass('is-centered');
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
   });
 
-  it('Loading indicator is displayed', () => {
-    expect(wrapper).toMatchSnapshot();
+  it('renders loading indicator when xDomain is empty', () => {
+    const { container } = render(<ServiceGraph {...defaultProps} xDomain={[]} loading={false} />);
+    const loadingIndicator = container.querySelector('svg.LoadingIndicator');
+    expect(loadingIndicator).toBeInTheDocument();
+    expect(loadingIndicator).toHaveClass('is-centered');
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
   });
 
-  it('Loading indicator is displayed when xDomain is empty', () => {
-    wrapper.setProps({ ...props, xDomain: [], loading: false });
-    expect(wrapper).toMatchSnapshot();
+  it('renders "No Data" when no metrics data is available', () => {
+    render(<ServiceGraph {...defaultProps} loading={false} />);
+    expect(screen.getByText('No Data')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
   });
 
-  it('"No data" displayed', () => {
-    wrapper.setProps({ ...props, loading: false });
-    expect(wrapper).toMatchSnapshot();
+  it('renders error message when there is an error', () => {
+    render(<ServiceGraph {...defaultProps} loading={false} error={new Error('API Error')} />);
+    expect(screen.getByText('Could not fetch data')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
   });
 
-  it('"Couldn’t fetch data" displayed', () => {
-    wrapper.setProps({ ...props, loading: false, error: new Error('API Error') });
-    expect(wrapper).toMatchSnapshot();
+  it('renders base graph with data', () => {
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={serviceMetrics.service_call_rate} />);
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
   });
 
-  it('Base graph should be displayed ', () => {
-    wrapper.setProps({ ...props, loading: false, metricsData: serviceMetrics.service_call_rate });
-    expect(wrapper).toMatchSnapshot();
+  it('renders graph with legend', () => {
+    const metricsData = [
+      { ...serviceMetrics.service_call_rate, quantile: 0.5 },
+      { ...serviceMetrics.service_call_rate, quantile: 0.95 },
+    ];
+
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} showLegend />);
+
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
   });
 
-  it('Base graph with legends should be displayed', () => {
-    wrapper.setProps({
-      ...props,
-      loading: false,
-      metricsData: serviceMetrics.service_call_rate,
-      showLegend: true,
-    });
-    expect(wrapper).toMatchSnapshot();
+  it('renders graph with horizontal lines', () => {
+    render(
+      <ServiceGraph
+        {...defaultProps}
+        loading={false}
+        metricsData={serviceMetrics.service_call_rate}
+        showHorizontalLines
+      />
+    );
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
   });
 
-  it('Base graph with horizontal lines should be displayed', () => {
-    wrapper.setProps({
-      ...props,
-      loading: false,
-      metricsData: serviceMetrics.service_call_rate,
-      showHorizontalLines: true,
-    });
-    expect(wrapper).toMatchSnapshot();
+  it('renders graph with custom color', () => {
+    render(
+      <ServiceGraph
+        {...defaultProps}
+        loading={false}
+        metricsData={serviceMetrics.service_call_rate}
+        color="AAAAAA"
+      />
+    );
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
   });
 
-  it('Base graph with custom color should be displayed', () => {
-    wrapper.setProps({
-      ...props,
-      loading: false,
-      metricsData: serviceMetrics.service_call_rate,
-      color: 'AAAAAA',
-    });
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('Crosshair map test', () => {
-    wrapper.setProps({
-      ...props,
-      loading: false,
-      metricsData: serviceMetrics.service_call_rate,
-      crosshairValues: [
-        {
-          key: 1,
-          ...serviceMetrics.service_call_rate.metricPoints[0],
-        },
+  it('renders graph with multiple metrics data points', () => {
+    const metricsData = [
+      { ...serviceMetrics.service_call_rate, quantile: 0.5 },
+      { ...serviceMetrics.service_call_rate, quantile: 0.95 },
+    ];
+
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} />);
+    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
+  });
+
+  it('handles edge cases in data rendering', () => {
+    // Test with empty metrics data
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={[]} />);
+    expect(screen.getByText('No Data')).toBeInTheDocument();
+
+    // Test with null values in metrics
+    const metricsWithNull = {
+      ...serviceMetrics.service_call_rate,
+      metricPoints: [
+        { x: 1631271783806, y: null },
+        { x: 1631271783807, y: 5 },
       ],
-    });
-    expect(wrapper).toMatchSnapshot();
+    };
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithNull} />);
+    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+
+    // Test with extreme values
+    const metricsWithExtremes = {
+      ...serviceMetrics.service_call_rate,
+      metricPoints: [
+        { x: 1631271783806, y: 0.0001 },
+        { x: 1631271783807, y: 1000 },
+      ],
+    };
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithExtremes} />);
+    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+  });
+
+  it('formats y-axis ticks for various value ranges', () => {
+    // Test with error rate graph
+    render(
+      <ServiceGraph
+        {...defaultProps}
+        loading={false}
+        metricsData={serviceMetrics.service_call_rate}
+        name="Error rate"
+      />
+    );
+    expect(screen.getByRole('heading', { name: 'Error rate' })).toBeInTheDocument();
+
+    // Test with custom formatter
+    render(
+      <ServiceGraph
+        {...defaultProps}
+        loading={false}
+        metricsData={serviceMetrics.service_call_rate}
+        yAxisTickFormat={v => Math.round(v)}
+      />
+    );
+    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
   });
 
-  it('Crosshair mouse hover test', () => {
-    wrapper.setProps({
-      ...props,
-      loading: false,
-      metricsData: {
+  it('handles various y-axis value ranges', () => {
+    const testCases = [
+      { value: 0, expected: '0' },
+      { value: 0.001, expected: '0.001' },
+      { value: 0.00001, pattern: /\d\.\d+e-\d+/ },
+      { value: 5, expected: '5.00' },
+      { value: 50, expected: '50.0' },
+      { value: 500, expected: '500' },
+    ];
+
+    testCases.forEach(({ value, expected, pattern }) => {
+      const metricsData = {
         ...serviceMetrics.service_call_rate,
-        metricPoints: [{ x: 1631271783806, y: null }, ...serviceMetrics.service_call_rate.metricPoints],
-      },
-      crosshairValues: [
-        {
-          key: 1,
-          ...serviceMetrics.service_call_rate.metricPoints[0],
-        },
-      ],
+        metricPoints: [{ x: 1631271783806, y: value }],
+      };
+
+      render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} />);
+
+      const graph = screen.getByTestId('service-graph');
+      expect(graph).toBeInTheDocument();
+
+      // Cleanup for next test
+      document.body.innerHTML = '';
     });
-    expect(wrapper.find('AreaSeries').render()).toMatchSnapshot();
-    expect(wrapper.find('LineSeries').render()).toMatchSnapshot();
   });
 
-  it('AreaSeries onNearestX, XYPlot onMouseLeave', () => {
-    wrapper.setProps({
-      ...props,
-      loading: false,
-      metricsData: serviceMetrics.service_call_rate,
-    });
-    wrapper.find('AreaSeries').at(0).prop('onNearestX')({ x: 1, y: 2 }, { index: 7 });
-    expect(wrapper.state().crosshairValues).toEqual([{ label: 0.95 }]);
-    wrapper.find('XYPlot').prop('onMouseLeave')();
-    expect(wrapper.state().crosshairValues).toEqual([]);
+  it('handles undefined xDomain values', () => {
+    render(<ServiceGraph {...defaultProps} loading={false} xDomain={[undefined, undefined]} />);
+    const loadingIndicator = document.querySelector('svg.LoadingIndicator');
+    expect(loadingIndicator).toBeInTheDocument();
+  });
+
+  it('handles empty metric points', () => {
+    const emptyMetrics = {
+      ...serviceMetrics.service_call_rate,
+      metricPoints: [],
+    };
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={emptyMetrics} />);
+    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+  });
+
+  it('handles missing metric points', () => {
+    const metricsWithoutPoints = {
+      ...serviceMetrics.service_call_rate,
+      metricPoints: undefined,
+    };
+    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithoutPoints} />);
+    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
   });
 });
 
-describe('<ServiceGraph> util', () => {
-  it('tickFormat singular', () => {
-    expect(tickFormat(Date.UTC(2017, 1, 14, 15, 19)).valueOf()).toBe('15:19');
+describe('tickFormat utility', () => {
+  it('formats time correctly for single digits', () => {
+    expect(tickFormat(Date.UTC(2017, 1, 14, 4, 4))).toBe('04:04');
   });
 
-  it('tickFormat plural', () => {
-    expect(tickFormat(Date.UTC(2017, 1, 14, 4, 4)).valueOf()).toBe('04:04');
+  it('formats time correctly for double digits', () => {
+    expect(tickFormat(Date.UTC(2017, 1, 14, 15, 19))).toBe('15:19');
   });
 });
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index e6df77b0c3..6d60385265 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -62,6 +62,7 @@ const Placeholder = ({ name, marginClassName, width, height, children }: TPlaceh
       style={{
         height,
       }}
+      data-testid="service-graph"
     >
       <h3 className="graph-header">{name}</h3>
       <div

From 099305c20045eb4cf2c9bbcaf14c1b4d58d03c2b Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Tue, 4 Mar 2025 15:47:05 +0000
Subject: [PATCH 08/13] modify scatterplot tests

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../SearchResults/ScatterPlot.test.js         | 217 +++++++++---------
 1 file changed, 103 insertions(+), 114 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
index aae7af5f3b..22841267eb 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import ScatterPlot, { CustomTooltip } from './ScatterPlot';
@@ -43,7 +43,7 @@ class MockResizeObserver {
 }
 
 beforeAll(() => {
-  global.ResizeObserver = MockResizeObserver;
+  window.ResizeObserver = MockResizeObserver;
   SVGElement.prototype.getComputedTextLength = jest.fn().mockReturnValue(50);
   SVGElement.prototype.getBBox = jest.fn().mockReturnValue({
     x: 0,
@@ -111,151 +111,143 @@ describe('ScatterPlot', () => {
     jest.clearAllMocks();
   });
 
-  it('renders correctly with data', () => {
-    const { container } = render(
-      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
-    );
-
-    expect(container.querySelector('.TraceResultsScatterPlot')).toBeTruthy();
-
-    expect(container.querySelector('.recharts-responsive-container')).toBeTruthy();
-    expect(container.querySelector('.recharts-wrapper')).toBeTruthy();
-    expect(container.querySelector('.recharts-scatter')).toBeTruthy();
-    expect(container.querySelector('.recharts-xAxis')).toBeTruthy();
-    expect(container.querySelector('.recharts-yAxis')).toBeTruthy();
-  });
-
-  it('uses default calculateContainerWidth when not provided', () => {
-    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-      configurable: true,
-      value: 500,
+  it('should render base case correctly', () => {
+    const data = [
+      { x: Date.now() - 3000, y: 1, traceID: '1' },
+      { x: Date.now() - 2000, y: 2, traceID: '2' },
+      { x: Date.now() - 1000, y: 2, traceID: '2' },
+      { x: Date.now(), y: 3, traceID: '3' },
+    ];
+    let container;
+    act(() => {
+      const result = render(
+        <ScatterPlot data={data} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+      );
+      container = result.container;
     });
-
-    const { container } = render(<ScatterPlot data={sampleData} onValueClick={mockOnValueClick} />);
-
     expect(container.querySelector('.TraceResultsScatterPlot')).toBeTruthy();
     expect(container.querySelector('.recharts-responsive-container')).toBeTruthy();
-
-    // Restore original clientWidth
-    delete HTMLElement.prototype.clientWidth;
   });
 
-  it('does not render chart when container width is 0', () => {
-    const { container } = render(
-      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 0} />
-    );
-
-    expect(container.querySelector('.TraceResultsScatterPlot')).toBeTruthy();
-    expect(container.querySelector('.recharts-responsive-container')).toBeFalsy();
-  });
-
-  it('formats X axis ticks correctly', () => {
-    const { container } = render(
-      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
-    );
+  it('should render X axis correctly', () => {
+    let container;
+    act(() => {
+      const result = render(
+        <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+      );
+      container = result.container;
+    });
 
     const xAxisTicks = container.querySelectorAll('.recharts-xAxis .recharts-cartesian-axis-tick-value');
+    const tickTexts = Array.from(xAxisTicks).map(tick => tick.textContent);
 
-    expect(xAxisTicks.length).toBeGreaterThan(0);
-
-    xAxisTicks.forEach(tick => {
-      expect(tick.textContent).toBeTruthy();
-    });
+    expect(tickTexts.some(text => text.includes('10:10'))).toBeTruthy();
+    expect(tickTexts.some(text => text.includes('10:11'))).toBeTruthy();
   });
 
-  it('formats Y axis ticks correctly', () => {
-    const { container } = render(
-      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
-    );
+  it('should render Y axis correctly', () => {
+    let container;
+    act(() => {
+      const result = render(
+        <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+      );
+      container = result.container;
+    });
 
     const yAxisTicks = container.querySelectorAll('.recharts-yAxis .recharts-cartesian-axis-tick-value');
-    expect(yAxisTicks.length).toBeGreaterThan(0);
+    const tickTexts = Array.from(yAxisTicks).map(tick => tick.textContent);
 
-    yAxisTicks.forEach(tick => {
-      expect(tick.textContent).toBeTruthy();
-    });
+    expect(tickTexts.some(text => text.includes('ms'))).toBeTruthy();
   });
 
-  it('handles window resize events', () => {
-    const calculateContainerWidth = jest.fn().mockReturnValueOnce(1200).mockReturnValueOnce(800);
+  it('should set fixed container width on initial render', () => {
+    let container;
+    act(() => {
+      const result = render(
+        <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+      );
+      container = result.container;
+    });
 
-    render(
-      <ScatterPlot
-        data={sampleData}
-        onValueClick={mockOnValueClick}
-        calculateContainerWidth={calculateContainerWidth}
-      />
-    );
+    const responsiveContainer = container.querySelector('.recharts-responsive-container');
+    expect(responsiveContainer).toBeTruthy();
+    expect(responsiveContainer.style.width).toBe('100%');
+  });
+
+  it('should update container width on window resize', () => {
+    const calculateContainerWidth = jest.fn().mockReturnValueOnce(1200).mockReturnValueOnce(700);
+
+    let unmount;
+    act(() => {
+      const result = render(
+        <ScatterPlot
+          data={sampleData}
+          onValueClick={mockOnValueClick}
+          calculateContainerWidth={calculateContainerWidth}
+        />
+      );
+      unmount = result.unmount;
+    });
 
     expect(window.addEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
 
-    const resizeHandler = window.addEventListener.mock.calls.find(call => call[0] === 'resize')[1];
-    resizeHandler();
+    act(() => {
+      const resizeHandler = window.addEventListener.mock.calls.find(call => call[0] === 'resize')[1];
+      resizeHandler();
+    });
 
     expect(calculateContainerWidth).toHaveBeenCalledTimes(2);
 
-    const { unmount } = render(
-      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
-    );
-
     unmount();
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
   });
 
-  it('calls onValueClick when a scatter point is clicked', () => {
-    const { container } = render(
-      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
-    );
+  it('should render Hint correctly', () => {
+    let container;
+    act(() => {
+      const result = render(
+        <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+      );
+      container = result.container;
+    });
 
     const scatterPoints = container.querySelectorAll('.recharts-scatter-symbol');
-
     expect(scatterPoints.length).toBeGreaterThan(0);
 
-    fireEvent.click(scatterPoints[0]);
+    // Simulate hover over a point
+    fireEvent.mouseOver(scatterPoints[0]);
+    expect(container.querySelector('.scatter-plot-hint')).toBeTruthy();
 
-    expect(mockOnValueClick).toHaveBeenCalled();
+    // Simulate mouse out
+    fireEvent.mouseOut(scatterPoints[0]);
+    expect(container.querySelector('.scatter-plot-hint')).toBeFalsy();
   });
 
-  it('generates unique ticks for the x-axis', () => {
-    const { container } = render(
-      <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
-    );
-
-    const xTicks = container.querySelectorAll('.recharts-xAxis .recharts-cartesian-axis-tick-value');
-    expect(xTicks.length).toBeGreaterThan(0);
+  it('should handle click events', () => {
+    let container;
+    act(() => {
+      const result = render(
+        <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 1200} />
+      );
+      container = result.container;
+    });
 
-    const tickLabels = Array.from(xTicks).map(tick => tick.textContent);
-    const uniqueLabels = [...new Set(tickLabels)];
-    expect(uniqueLabels.length).toBe(tickLabels.length);
+    const scatterPoints = container.querySelectorAll('.recharts-scatter-symbol');
+    fireEvent.click(scatterPoints[0]);
+    expect(mockOnValueClick).toHaveBeenCalled();
   });
 
-  it('renders with different dot sizes', () => {
-    const { container } = render(
-      <ScatterPlot
-        data={[
-          {
-            ...sampleData[0],
-            size: 100,
-          },
-          {
-            ...sampleData[0],
-            size: 1000,
-            traceID: 'lot-of-spans',
-          },
-        ]}
-        onValueClick={mockOnValueClick}
-        calculateContainerWidth={() => 1200}
-      />
-    );
-
-    const scatterSymbols = container.querySelectorAll('.recharts-scatter-symbol');
-    expect(scatterSymbols.length).toBe(2);
-
-    const firstSymbol = scatterSymbols[0];
-    const secondSymbol = scatterSymbols[1];
-
-    expect(firstSymbol).toBeTruthy();
-    expect(secondSymbol).toBeTruthy();
+  it('should handle zero width container', () => {
+    let container;
+    act(() => {
+      const result = render(
+        <ScatterPlot data={sampleData} onValueClick={mockOnValueClick} calculateContainerWidth={() => 0} />
+      );
+      container = result.container;
+    });
+
+    expect(container.querySelector('.TraceResultsScatterPlot')).toBeTruthy();
+    expect(container.querySelector('.recharts-responsive-container')).toBeFalsy();
   });
 });
 
@@ -279,19 +271,16 @@ describe('CustomTooltip', () => {
 
   it('returns null when not active', () => {
     const { container } = render(<CustomTooltip payload={[{ payload: { name: 'Test' } }]} />);
-
     expect(container.firstChild).toBeNull();
   });
 
   it('returns null when payload is empty', () => {
     const { container } = render(<CustomTooltip active payload={[]} />);
-
     expect(container.firstChild).toBeNull();
   });
 
   it('returns null when payload is not provided', () => {
     const { container } = render(<CustomTooltip active />);
-
     expect(container.firstChild).toBeNull();
   });
 });

From 6d6ca484ec7a024339777dbf281159048576da23 Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Tue, 4 Mar 2025 17:04:30 +0000
Subject: [PATCH 09/13] improve opGraph

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../operationDetailsTable/opsGraph.test.js    | 10 ++--
 .../operationDetailsTable/opsGraph.tsx        | 53 ++++++++++---------
 .../Monitor/ServicesView/serviceGraph.tsx     |  8 ++-
 3 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
index 9ec301580f..ccd6be9430 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js
@@ -56,7 +56,7 @@ describe('<OperationsGraph>', () => {
     };
     const { container } = render(<OperationsGraph {...props} />);
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
-    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-wrapper')).toBeInTheDocument();
     expect(container.querySelector('.recharts-area')).toBeInTheDocument();
   });
 
@@ -68,7 +68,7 @@ describe('<OperationsGraph>', () => {
     };
     const { container } = render(<OperationsGraph {...props} />);
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
-    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-wrapper')).toBeInTheDocument();
   });
 
   it('calculates yDomain from data points when not provided', () => {
@@ -83,7 +83,7 @@ describe('<OperationsGraph>', () => {
     };
     const { container } = render(<OperationsGraph {...props} />);
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
-    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-wrapper')).toBeInTheDocument();
   });
 
   it('handles empty yValues array when calculating domain', () => {
@@ -96,7 +96,7 @@ describe('<OperationsGraph>', () => {
     };
     const { container } = render(<OperationsGraph {...props} />);
     expect(container.querySelector('.ops-container')).toBeInTheDocument();
-    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-wrapper')).toBeInTheDocument();
   });
 
   it('handles various y-value types when calculating domain', () => {
@@ -107,7 +107,7 @@ describe('<OperationsGraph>', () => {
       { x: 4, y: 30 },
     ];
     const { container } = render(<OperationsGraph dataPoints={dataPoints} />);
-    expect(container.querySelector('.recharts-responsive-container')).toBeInTheDocument();
+    expect(container.querySelector('.recharts-wrapper')).toBeInTheDocument();
   });
 
   it('generates placeholder with custom text', () => {
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
index 6726936634..03f58c0e9c 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
@@ -54,35 +54,40 @@ export class OperationsGraph extends React.PureComponent<TProps> {
       if (yValues.length > 0) {
         const minY = Math.min(...yValues);
         const maxY = Math.max(...yValues);
-        dynProps.domain = [minY * 0.999, maxY];
+        if (minY === maxY) {
+          dynProps.domain = [minY * 0.8, minY * 2];
+        } else {
+          dynProps.domain = [minY * 0.99, maxY];
+        }
       }
     }
 
     return (
       <div className="ops-container">
-        <ResponsiveContainer width={100} height={15}>
-          <AreaChart
-            margin={{
-              left: 0,
-              right: 0,
-              bottom: 0,
-              top: 0,
-            }}
-            data={dataPoints}
-          >
-            <YAxis hide {...dynProps} />
-            <Area
-              type="linear"
-              dataKey="y"
-              stroke="none"
-              fill={color}
-              fillOpacity={1}
-              isAnimationActive={false}
-              connectNulls
-              dot={false}
-            />
-          </AreaChart>
-        </ResponsiveContainer>
+        <AreaChart
+          width={100}
+          height={15}
+          margin={{
+            left: 0,
+            right: 0,
+            bottom: 1,
+            top: 0,
+          }}
+          data={dataPoints}
+        >
+          <YAxis hide {...dynProps} />
+          <Area
+            type="linear"
+            dataKey="y"
+            stroke={color}
+            strokeWidth={1}
+            fill={color}
+            fillOpacity={1}
+            isAnimationActive={false}
+            connectNulls
+            dot={false}
+          />
+        </AreaChart>
       </div>
     );
   }
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 6d60385265..2be9481835 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -55,7 +55,13 @@ type TPlaceholder = {
   children: React.ReactNode;
 };
 
-const Placeholder = ({ name, marginClassName, width, height, children }: TPlaceholder): JSX.Element => {
+export const Placeholder = ({
+  name,
+  marginClassName,
+  width,
+  height,
+  children,
+}: TPlaceholder): JSX.Element => {
   return (
     <div
       className={`graph-container ${marginClassName}`}

From 7755cb5f2f27e863c716ec4ae7ab1d3762734663 Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Wed, 5 Mar 2025 13:49:59 +0000
Subject: [PATCH 10/13] add serviceGraph tests

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 .../Monitor/ServicesView/serviceGraph.test.js | 549 +++++++++++++++---
 1 file changed, 468 insertions(+), 81 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
index 0dadf70e9f..0907a1922c 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
@@ -13,12 +13,21 @@
 // limitations under the License.
 
 import React from 'react';
-import { Tooltip } from 'recharts';
-import { render, screen } from '@testing-library/react';
+import { render, screen, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ServiceGraph, { ServiceGraphImpl, tickFormat } from './serviceGraph';
+import { Legend, Tooltip } from 'recharts';
+import ServiceGraph, { ServiceGraphImpl, tickFormat, Placeholder } from './serviceGraph';
 import { serviceMetrics } from '../../../reducers/metrics.mock';
 
+// Mock data with correct structure
+const mockMetricsData = {
+  quantile: 0.95,
+  metricPoints: [
+    { x: 1000, y: 1000 },
+    { x: 2000, y: 2000 },
+  ],
+};
+
 // Mock ResizeObserver for Recharts
 class ResizeObserver {
   observe() {}
@@ -42,21 +51,18 @@ window.getComputedStyle = () => ({
   getPropertyValue: () => '',
 });
 
-describe('<ServiceGraph>', () => {
-  const defaultProps = {
-    width: 300,
-    error: null,
-    name: 'Hello Graph',
-    metricsData: null,
-    loading: true,
-    marginClassName: '',
-    xDomain: [1, 2],
-  };
+const defaultProps = {
+  width: 300,
+  error: null,
+  name: 'Hello Graph',
+  metricsData: null,
+  loading: true,
+  marginClassName: '',
+  xDomain: [1631271783806, 1631271883806],
+};
 
-  beforeEach(() => {
-    // Clear any previous test DOM
-    document.body.innerHTML = '';
-  });
+describe('<ServiceGraph>', () => {
+  afterEach(cleanup);
 
   it('renders loading indicator when loading', () => {
     const { container } = render(<ServiceGraph {...defaultProps} />);
@@ -66,46 +72,57 @@ describe('<ServiceGraph>', () => {
     expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
   });
 
-  it('renders loading indicator when xDomain is empty', () => {
-    const { container } = render(<ServiceGraph {...defaultProps} xDomain={[]} loading={false} />);
-    const loadingIndicator = container.querySelector('svg.LoadingIndicator');
-    expect(loadingIndicator).toBeInTheDocument();
-    expect(loadingIndicator).toHaveClass('is-centered');
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+  it('renders loading indicator when xDomain is empty or undefined', () => {
+    cleanup();
+    const { container: container1 } = render(<ServiceGraph {...defaultProps} xDomain={[]} loading={false} />);
+    expect(container1.querySelector('svg.LoadingIndicator')).toBeInTheDocument();
+
+    cleanup();
+    const { container: container2 } = render(
+      <ServiceGraph {...defaultProps} xDomain={[undefined, undefined]} loading={false} />
+    );
+    expect(container2.querySelector('svg.LoadingIndicator')).toBeInTheDocument();
   });
 
   it('renders "No Data" when no metrics data is available', () => {
-    render(<ServiceGraph {...defaultProps} loading={false} />);
-    expect(screen.getByText('No Data')).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+    cleanup();
+    const { container } = render(<ServiceGraph {...defaultProps} loading={false} />);
+    const placeholder = container.querySelector('.center-placeholder');
+    expect(placeholder).toHaveTextContent('No Data');
   });
 
   it('renders error message when there is an error', () => {
-    render(<ServiceGraph {...defaultProps} loading={false} error={new Error('API Error')} />);
-    expect(screen.getByText('Could not fetch data')).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
+    cleanup();
+    const { container } = render(
+      <ServiceGraph {...defaultProps} loading={false} error={new Error('API Error')} />
+    );
+    const placeholder = container.querySelector('.center-placeholder');
+    expect(placeholder).toHaveTextContent('Could not fetch data');
   });
 
   it('renders base graph with data', () => {
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={serviceMetrics.service_call_rate} />);
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
-    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
+    cleanup();
+    const { container } = render(
+      <ServiceGraph {...defaultProps} loading={false} metricsData={serviceMetrics.service_call_rate} />
+    );
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('renders graph with legend', () => {
+    cleanup();
     const metricsData = [
       { ...serviceMetrics.service_call_rate, quantile: 0.5 },
       { ...serviceMetrics.service_call_rate, quantile: 0.95 },
     ];
-
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} showLegend />);
-
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
-    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
+    const { container } = render(
+      <ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} showLegend />
+    );
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('renders graph with horizontal lines', () => {
-    render(
+    cleanup();
+    const { container } = render(
       <ServiceGraph
         {...defaultProps}
         loading={false}
@@ -113,12 +130,12 @@ describe('<ServiceGraph>', () => {
         showHorizontalLines
       />
     );
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
-    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('renders graph with custom color', () => {
-    render(
+    cleanup();
+    const { container } = render(
       <ServiceGraph
         {...defaultProps}
         loading={false}
@@ -126,27 +143,28 @@ describe('<ServiceGraph>', () => {
         color="AAAAAA"
       />
     );
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
-    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('renders graph with multiple metrics data points', () => {
+    cleanup();
     const metricsData = [
       { ...serviceMetrics.service_call_rate, quantile: 0.5 },
       { ...serviceMetrics.service_call_rate, quantile: 0.95 },
     ];
 
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} />);
-    expect(screen.getByRole('heading', { name: 'Hello Graph' })).toBeInTheDocument();
-    expect(screen.getByTestId('service-graph')).toHaveClass('graph-container');
+    const { container } = render(
+      <ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} />
+    );
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('handles edge cases in data rendering', () => {
-    // Test with empty metrics data
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={[]} />);
-    expect(screen.getByText('No Data')).toBeInTheDocument();
+    const { container } = render(<ServiceGraph {...defaultProps} loading={false} metricsData={null} />);
+    const placeholder = container.querySelector('.center-placeholder');
+    expect(placeholder).toHaveTextContent('No Data');
 
-    // Test with null values in metrics
+    cleanup();
     const metricsWithNull = {
       ...serviceMetrics.service_call_rate,
       metricPoints: [
@@ -154,10 +172,12 @@ describe('<ServiceGraph>', () => {
         { x: 1631271783807, y: 5 },
       ],
     };
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithNull} />);
-    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+    const { container: container2 } = render(
+      <ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithNull} />
+    );
+    expect(container2.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
 
-    // Test with extreme values
+    cleanup();
     const metricsWithExtremes = {
       ...serviceMetrics.service_call_rate,
       metricPoints: [
@@ -165,13 +185,16 @@ describe('<ServiceGraph>', () => {
         { x: 1631271783807, y: 1000 },
       ],
     };
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithExtremes} />);
-    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+    const { container: container3 } = render(
+      <ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithExtremes} />
+    );
+    expect(container3.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('formats y-axis ticks for various value ranges', () => {
-    // Test with error rate graph
-    render(
+    cleanup();
+    // Test error rate formatting
+    const { container: container1 } = render(
       <ServiceGraph
         {...defaultProps}
         loading={false}
@@ -179,10 +202,10 @@ describe('<ServiceGraph>', () => {
         name="Error rate"
       />
     );
-    expect(screen.getByRole('heading', { name: 'Error rate' })).toBeInTheDocument();
+    expect(container1.querySelector('h3')).toHaveTextContent('Error rate');
 
-    // Test with custom formatter
-    render(
+    // Test custom formatter
+    const { container: container2 } = render(
       <ServiceGraph
         {...defaultProps}
         loading={false}
@@ -190,57 +213,233 @@ describe('<ServiceGraph>', () => {
         yAxisTickFormat={v => Math.round(v)}
       />
     );
-    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+    expect(container2.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('handles various y-axis value ranges', () => {
+    cleanup();
     const testCases = [
       { value: 0, expected: '0' },
-      { value: 0.001, expected: '0.001' },
-      { value: 0.00001, pattern: /\d\.\d+e-\d+/ },
+      { value: 0.001, expected: '1.00e-3' },
+      { value: 0.00001, expected: '1.00e-5' },
       { value: 5, expected: '5.00' },
       { value: 50, expected: '50.0' },
       { value: 500, expected: '500' },
     ];
 
-    testCases.forEach(({ value, expected, pattern }) => {
-      const metricsData = {
-        ...serviceMetrics.service_call_rate,
-        metricPoints: [{ x: 1631271783806, y: value }],
-      };
-
-      render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsData} />);
-
-      const graph = screen.getByTestId('service-graph');
-      expect(graph).toBeInTheDocument();
+    const component = new ServiceGraphImpl({
+      ...defaultProps,
+      loading: false,
+      metricsData: serviceMetrics.service_call_rate,
+    });
 
-      // Cleanup for next test
-      document.body.innerHTML = '';
+    testCases.forEach(({ value, expected }) => {
+      expect(component.formatYAxisTick(value)).toBe(expected);
     });
   });
 
   it('handles undefined xDomain values', () => {
-    render(<ServiceGraph {...defaultProps} loading={false} xDomain={[undefined, undefined]} />);
-    const loadingIndicator = document.querySelector('svg.LoadingIndicator');
+    cleanup();
+    const { container } = render(
+      <ServiceGraph {...defaultProps} loading={false} xDomain={[undefined, undefined]} />
+    );
+    const loadingIndicator = container.querySelector('svg.LoadingIndicator');
     expect(loadingIndicator).toBeInTheDocument();
   });
 
   it('handles empty metric points', () => {
+    cleanup();
     const emptyMetrics = {
       ...serviceMetrics.service_call_rate,
       metricPoints: [],
     };
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={emptyMetrics} />);
-    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+    const { container } = render(
+      <ServiceGraph {...defaultProps} loading={false} metricsData={emptyMetrics} />
+    );
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
   });
 
   it('handles missing metric points', () => {
+    cleanup();
     const metricsWithoutPoints = {
       ...serviceMetrics.service_call_rate,
       metricPoints: undefined,
     };
-    render(<ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithoutPoints} />);
-    expect(screen.getByTestId('service-graph')).toBeInTheDocument();
+    const { container } = render(
+      <ServiceGraph {...defaultProps} loading={false} metricsData={metricsWithoutPoints} />
+    );
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
+  });
+
+  it('formats tooltip values correctly', () => {
+    cleanup();
+    const { container } = render(
+      <ServiceGraph
+        {...defaultProps}
+        loading={false}
+        metricsData={serviceMetrics.service_call_rate}
+        showLegend
+      />
+    );
+    const graph = container.querySelector('[data-testid="service-graph"]');
+    expect(graph).toBeInTheDocument();
+
+    const component = new ServiceGraphImpl({
+      ...defaultProps,
+      loading: false,
+      metricsData: serviceMetrics.service_call_rate,
+      showLegend: true,
+    });
+
+    // Test tooltip formatter without legend
+    component.props.showLegend = false;
+    const tooltipProps = component
+      .render()
+      .props.children.props.children.props.children.find(child => child.type === Tooltip).props;
+
+    expect(tooltipProps.formatter(5.123, '0.95')).toEqual([component.formatYAxisTick(5.123)]);
+
+    // Test tooltip formatter with legend
+    component.props.showLegend = true;
+    const tooltipPropsWithLegend = component
+      .render()
+      .props.children.props.children.props.children.find(child => child.type === Tooltip).props;
+
+    expect(tooltipPropsWithLegend.formatter(5.123, '0.95')).toEqual([
+      component.formatYAxisTick(5.123),
+      'P95',
+    ]);
+
+    // Test tooltip label formatter
+    const timestamp = 1631271783806;
+    const formattedDate = new Date(timestamp).toLocaleString();
+    expect(tooltipProps.labelFormatter(timestamp)).toBe(formattedDate);
+  });
+
+  it('formats legend values correctly', () => {
+    cleanup();
+    const { container } = render(
+      <ServiceGraph
+        {...defaultProps}
+        loading={false}
+        metricsData={serviceMetrics.service_call_rate}
+        showLegend
+      />
+    );
+    const graph = container.querySelector('[data-testid="service-graph"]');
+    expect(graph).toBeInTheDocument();
+
+    const component = new ServiceGraphImpl({
+      ...defaultProps,
+      loading: false,
+      metricsData: serviceMetrics.service_call_rate,
+      showLegend: true,
+    });
+
+    const legendProps = component
+      .render()
+      .props.children.props.children.props.children.find(child => child.type === Legend).props;
+
+    // Test legend formatter with valid quantile
+    const legendElement = legendProps.formatter('0.95');
+    const [value, suffix] = legendElement.props.children;
+    expect(value).toBe(95);
+    expect(suffix).toBe('th');
+
+    // Test legend formatter with invalid quantile
+    const invalidLegendElement = legendProps.formatter('invalid');
+    expect(invalidLegendElement.props.children).toBe('N/A');
+
+    // Test legend formatter with null quantile
+    const nullLegendElement = legendProps.formatter('null');
+    expect(nullLegendElement.props.children).toBe('N/A');
+  });
+
+  describe('tooltip and legend formatting', () => {
+    it('formats tooltip values correctly', () => {
+      const component = new ServiceGraphImpl({
+        width: 100,
+        height: 100,
+        name: 'Test Graph',
+        metricsData: mockMetricsData,
+        loading: false,
+        error: null,
+        xDomain: [0, 100],
+        showLegend: true,
+      });
+
+      // Test with showLegend=true
+      const tooltipProps = component
+        .render()
+        .props.children.props.children.props.children.find(child => child.type === Tooltip).props;
+
+      const [value, label] = tooltipProps.formatter(1000, '0.95');
+      expect(value).toBe(component.formatYAxisTick(1000));
+      expect(label).toBe('P95');
+
+      // Test with showLegend=false
+      component.props.showLegend = false;
+      const tooltipPropsNoLegend = component
+        .render()
+        .props.children.props.children.props.children.find(child => child.type === Tooltip).props;
+
+      const [valueOnly] = tooltipPropsNoLegend.formatter(1000, '0.95');
+      expect(valueOnly).toBe(component.formatYAxisTick(1000));
+
+      // Test label formatter
+      const timestamp = 1631271783806;
+      const formattedDate = new Date(timestamp).toLocaleString();
+      expect(tooltipProps.labelFormatter(timestamp)).toBe(formattedDate);
+    });
+
+    it('formats legend values correctly', () => {
+      const component = new ServiceGraphImpl({
+        width: 100,
+        height: 100,
+        name: 'Test Graph',
+        metricsData: mockMetricsData,
+        loading: false,
+        error: null,
+        xDomain: [0, 100],
+        showLegend: true,
+      });
+
+      const legendProps = component
+        .render()
+        .props.children.props.children.props.children.find(child => child.type === Legend).props;
+
+      // Test valid quantile
+      const validResult = legendProps.formatter('0.95');
+      const [value, suffix] = validResult.props.children;
+      expect(value).toBe(95);
+      expect(suffix).toBe('th');
+
+      // Test invalid quantile
+      const invalidResult = legendProps.formatter('invalid');
+      expect(invalidResult.props.children).toBe('N/A');
+
+      // Test null quantile
+      const nullResult = legendProps.formatter('null');
+      expect(nullResult.props.children).toBe('N/A');
+    });
+
+    it('generates placeholder correctly', () => {
+      const component = new ServiceGraphImpl({
+        width: 100,
+        height: 242,
+        name: 'Test Graph',
+        metricsData: mockMetricsData,
+        loading: false,
+        error: null,
+        xDomain: [0, 100],
+      });
+
+      const placeholder = component.generatePlaceholder(<div>Test</div>);
+      expect(placeholder.props.className).toBe('center-placeholder');
+      expect(placeholder.props.style.width).toBe(100);
+      expect(placeholder.props.style.height).toBe(168); // 242 - 74
+      expect(placeholder.props.children).toEqual(<div>Test</div>);
+    });
   });
 });
 
@@ -253,3 +452,191 @@ describe('tickFormat utility', () => {
     expect(tickFormat(Date.UTC(2017, 1, 14, 15, 19))).toBe('15:19');
   });
 });
+
+describe('Placeholder component', () => {
+  it('renders with all props', () => {
+    cleanup();
+    const { container } = render(
+      <Placeholder name="Test" width={300} height={200} marginClassName="test-margin">
+        <div>Test content</div>
+      </Placeholder>
+    );
+    expect(container.querySelector('h3')).toHaveTextContent('Test');
+    expect(container.querySelector('.center-placeholder')).toHaveTextContent('Test content');
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('test-margin');
+  });
+
+  it('renders without optional marginClassName', () => {
+    cleanup();
+    const { container } = render(
+      <Placeholder name="Test" width={300} height={200}>
+        <div>Test content</div>
+      </Placeholder>
+    );
+    expect(container.querySelector('h3')).toHaveTextContent('Test');
+    expect(container.querySelector('[data-testid="service-graph"]')).toHaveClass('graph-container');
+  });
+});
+
+describe('ServiceGraphImpl methods', () => {
+  let component;
+
+  beforeEach(() => {
+    component = new ServiceGraphImpl({
+      ...defaultProps,
+      loading: false,
+      metricsData: serviceMetrics.service_call_rate,
+    });
+  });
+
+  describe('getData', () => {
+    it('handles null metrics data', () => {
+      component = new ServiceGraphImpl({ ...defaultProps, metricsData: null });
+      expect(component.getData()).toEqual([]);
+    });
+
+    it('handles array metrics data', () => {
+      const metricsArray = [
+        { ...serviceMetrics.service_call_rate, quantile: 0.5 },
+        { ...serviceMetrics.service_call_rate, quantile: 0.95 },
+      ];
+      component = new ServiceGraphImpl({ ...defaultProps, metricsData: metricsArray });
+      const result = component.getData();
+      expect(result).toHaveLength(2);
+      expect(result[0].quantile).toBe(0.95);
+      expect(result[1].quantile).toBe(0.5);
+    });
+  });
+
+  describe('getMetricsData', () => {
+    it('handles empty metrics data', () => {
+      component = new ServiceGraphImpl({ ...defaultProps, metricsData: [] });
+      expect(component.getMetricsData()).toEqual([]);
+    });
+
+    it('handles metrics data without metricPoints', () => {
+      component = new ServiceGraphImpl({
+        ...defaultProps,
+        metricsData: { ...serviceMetrics.service_call_rate, metricPoints: undefined },
+      });
+      expect(component.getMetricsData()).toEqual([]);
+    });
+
+    it('processes metrics data correctly', () => {
+      const result = component.getMetricsData();
+      expect(result).toHaveLength(serviceMetrics.service_call_rate.metricPoints.length);
+      expect(result[0]).toHaveProperty('x');
+      expect(result[0]['0.95']).toBeDefined();
+    });
+  });
+
+  describe('calculateYDomain', () => {
+    it('handles empty data', () => {
+      expect(component.calculateYDomain([])).toEqual([0, 1]);
+    });
+
+    it('handles data with only null values', () => {
+      expect(component.calculateYDomain([{ x: 1, y: null }])).toEqual([0, 1]);
+    });
+
+    it('calculates domain with padding', () => {
+      const data = [
+        { x: 1, y: 10 },
+        { x: 2, y: 20 },
+      ];
+      const [min, max] = component.calculateYDomain(data);
+      expect(min).toBeLessThan(10);
+      expect(max).toBeGreaterThan(20);
+    });
+  });
+
+  describe('calculateYAxisTicks', () => {
+    it('generates correct number of ticks', () => {
+      const ticks = component.calculateYAxisTicks([0, 100]);
+      expect(ticks).toHaveLength(5);
+    });
+
+    it('generates evenly spaced ticks', () => {
+      const ticks = component.calculateYAxisTicks([0, 100]);
+      const step = ticks[1] - ticks[0];
+      for (let i = 1; i < ticks.length; i++) {
+        expect(ticks[i] - ticks[i - 1]).toBeCloseTo(step);
+      }
+    });
+  });
+
+  describe('formatYAxisTick', () => {
+    it('handles error rate values', () => {
+      component = new ServiceGraphImpl({ ...defaultProps, name: 'Error rate' });
+      expect(component.formatYAxisTick(1.23)).toBe('1');
+    });
+
+    it('handles custom formatter', () => {
+      component = new ServiceGraphImpl({
+        ...defaultProps,
+        yAxisTickFormat: v => Math.round(v * 100),
+      });
+      expect(component.formatYAxisTick(0.123)).toBe('12');
+    });
+
+    it('formats different value ranges correctly', () => {
+      const testCases = [
+        { value: 0, expected: '0' },
+        { value: 0.001, expected: '1.00e-3' },
+        { value: 0.00001, expected: '1.00e-5' },
+        { value: 0.5, expected: '0.500' },
+        { value: 5, expected: '5.00' },
+        { value: 50, expected: '50.0' },
+        { value: 500, expected: '500' },
+      ];
+
+      testCases.forEach(({ value, expected }) => {
+        expect(component.formatYAxisTick(value)).toBe(expected);
+      });
+    });
+  });
+
+  describe('calculateNumericTicks', () => {
+    it('generates correct number of ticks', () => {
+      const ticks = component.calculateNumericTicks([0, 100]);
+      expect(ticks).toHaveLength(7);
+    });
+
+    it('generates evenly spaced ticks', () => {
+      const ticks = component.calculateNumericTicks([0, 100]);
+      const step = ticks[1] - ticks[0];
+      for (let i = 1; i < ticks.length; i++) {
+        expect(ticks[i] - ticks[i - 1]).toBeCloseTo(step);
+      }
+    });
+  });
+
+  describe('renderLines', () => {
+    it('returns empty array for null metrics data', () => {
+      component = new ServiceGraphImpl({ ...defaultProps, metricsData: null });
+      expect(component.renderLines()).toHaveLength(0);
+    });
+
+    it('renders lines with custom color', () => {
+      component = new ServiceGraphImpl({
+        ...defaultProps,
+        metricsData: serviceMetrics.service_call_rate,
+        color: '#FF0000',
+      });
+      const lines = component.renderLines();
+      expect(lines[0].props.stroke).toBe('#FF0000');
+    });
+
+    it('renders lines with default colors for multiple metrics', () => {
+      const metricsArray = [
+        { ...serviceMetrics.service_call_rate, quantile: 0.5 },
+        { ...serviceMetrics.service_call_rate, quantile: 0.95 },
+      ];
+      component = new ServiceGraphImpl({ ...defaultProps, metricsData: metricsArray });
+      const lines = component.renderLines();
+      expect(lines).toHaveLength(2);
+      expect(lines[0].props.stroke).toBe(component.colors[0]);
+      expect(lines[1].props.stroke).toBe(component.colors[1]);
+    });
+  });
+});

From ffe5017018c6f97f6e83957d9576e1ce57190a4c Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Wed, 5 Mar 2025 13:51:54 +0000
Subject: [PATCH 11/13] take lockfile from main branch

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 package-lock.json | 325 +++++++---------------------------------------
 1 file changed, 45 insertions(+), 280 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 504408f62f..8ce3967b40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4200,75 +4200,75 @@
       "license": "MIT"
     },
     "node_modules/@sentry-internal/browser-utils": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-9.0.0.tgz",
-      "integrity": "sha512-J5aBL0RV42WNx9xlw2a2MK1BBXAOwxYT2Hc9VNkuygwGzVEFimZEUKlaYKaDbM/XRUA0TRcYQaKkmGKqpDbxxw==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-9.3.0.tgz",
+      "integrity": "sha512-G3z4HCUyb5nJe03EPUhWjnaHqMDt4mOTFJDNha3DGoB51lMYojpQI1Qo1u6bY4qkWVSO1c+HqOU0RVsXoAchtQ==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "9.0.0"
+        "@sentry/core": "9.3.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry-internal/feedback": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-9.0.0.tgz",
-      "integrity": "sha512-4k4MxnvNFYbA8mPBOgY0gbK/e6dFA8JTDmt88NppSuBowu1uIYnVEFB3DWyaLvi60RXcbT4LnKvo70LTCpIEfQ==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-9.3.0.tgz",
+      "integrity": "sha512-LQmIbQaATlN5QEwCD2Xt+7VKfwfR5W3dbn0jdF1x4hQFE/srdnOj60xMz/mj3tP5BxV552xJniGsyZ8lXHDb2A==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "9.0.0"
+        "@sentry/core": "9.3.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry-internal/replay": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-9.0.0.tgz",
-      "integrity": "sha512-TqcOA6QhEqq4afR34rb/e0rpusafGh3XujW6hO0AIuv0inpfWhCN6i71hGR0Qt0gJNJaStiNu4Rrwj1AsebGTQ==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-9.3.0.tgz",
+      "integrity": "sha512-ZkH+Gahn89JygpuiFn26ZgAqJXHtnr+HjfQ2ONOFoWQHNH6X5wk75UTma55aYk1d8VcBPFoU6WjFhZoQ55SV1g==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/browser-utils": "9.0.0",
-        "@sentry/core": "9.0.0"
+        "@sentry-internal/browser-utils": "9.3.0",
+        "@sentry/core": "9.3.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry-internal/replay-canvas": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-9.0.0.tgz",
-      "integrity": "sha512-KjN7Dx9CctwU06xfTEQjWz/MK00fDbHF2GUStDYe83Rt+8CmYXUHMRTr/UEMQxL8rH1O4JEGUH5fFWxTWu2gxw==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-9.3.0.tgz",
+      "integrity": "sha512-MhDMJeRGa55a0D541+OzTFMWwbabthhDGbAL90/NpappfyeBbAiktmCNl0BFTZuRbCGrC2m1LLCqHegCVKW4fQ==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/replay": "9.0.0",
-        "@sentry/core": "9.0.0"
+        "@sentry-internal/replay": "9.3.0",
+        "@sentry/core": "9.3.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry/browser": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-9.0.0.tgz",
-      "integrity": "sha512-+BgusObsLnHwiA+xLm9d3YmdzRXFSUTG7YSSZYZ94NpQdnQlEb6a0ER6abCzmxmKAhNykf5MzLrPRz65bL83WQ==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-9.3.0.tgz",
+      "integrity": "sha512-yPwWWQo/hpN63p0NGmk/Dd1Fx5CQRWNMfuV7dtfPBtg3vRjDecA9OLyK29AqK5h3Fl8FuJOyOqB87CvtXUqh5g==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/browser-utils": "9.0.0",
-        "@sentry-internal/feedback": "9.0.0",
-        "@sentry-internal/replay": "9.0.0",
-        "@sentry-internal/replay-canvas": "9.0.0",
-        "@sentry/core": "9.0.0"
+        "@sentry-internal/browser-utils": "9.3.0",
+        "@sentry-internal/feedback": "9.3.0",
+        "@sentry-internal/replay": "9.3.0",
+        "@sentry-internal/replay-canvas": "9.3.0",
+        "@sentry/core": "9.3.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry/core": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.0.0.tgz",
-      "integrity": "sha512-oaOOC1rQ5NHuOJ5ciw5NjdvmgG+q3UJS5v+s1d2eFzi/n5OpxULvqce4aG3XDBJ/Hu+fxW+fbVW96JwAKNk2Tg==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.3.0.tgz",
+      "integrity": "sha512-SxQ4z7wTkfguvYb2ctNEMU9kVAbhl9ymfjhLnrvtygTwL5soLqAKdco/lX/4P9K9Osgb2Dl6urQWRl+AhzKVbQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -4554,48 +4554,23 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
-      "license": "MIT"
-    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
       "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/d3-color": "*"
       }
     },
-    "node_modules/@types/d3-path": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
-      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-scale": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
-      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-time": "*"
-      }
-    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
@@ -4603,27 +4578,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/d3-shape": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
-      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-path": "*"
-      }
-    },
-    "node_modules/@types/d3-time": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
-      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
-      "license": "MIT"
-    },
     "node_modules/@types/d3-zoom": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
@@ -7031,15 +6985,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -7909,12 +7854,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/decimal.js-light": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
-      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
-      "license": "MIT"
-    },
     "node_modules/decode-uri-component": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
@@ -8367,16 +8306,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dom-scroll-into-view": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz",
@@ -9624,6 +9553,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/events": {
@@ -9777,15 +9707,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-equals": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
-      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -11239,15 +11160,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/interpret": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -16444,12 +16356,12 @@
       }
     },
     "node_modules/react-circular-progressbar": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
-      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.2.0.tgz",
+      "integrity": "sha512-cgyqEHOzB0nWMZjKfWN3MfSa1LV3OatcDjPz68lchXQUEiBD5O1WsAtoVK4/DSL0B4USR//cTdok4zCBkq8X5g==",
       "license": "MIT",
       "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=0.14.0"
       }
     },
     "node_modules/react-dom": {
@@ -16487,9 +16399,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
-      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*"
@@ -16682,21 +16594,6 @@
         "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-smooth": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
-      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-equals": "^5.0.1",
-        "prop-types": "^15.8.1",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/react-test-renderer": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz",
@@ -16712,22 +16609,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/react-vis": {
       "version": "1.11.12",
       "resolved": "https://registry.npmjs.org/react-vis/-/react-vis-1.11.12.tgz",
@@ -16887,38 +16768,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/recharts": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
-      "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.0.0",
-        "eventemitter3": "^4.0.1",
-        "lodash": "^4.17.21",
-        "react-is": "^18.3.1",
-        "react-smooth": "^4.0.4",
-        "recharts-scale": "^0.4.4",
-        "tiny-invariant": "^1.3.1",
-        "victory-vendor": "^36.6.8"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/recharts-scale": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
-      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
-      "license": "MIT",
-      "dependencies": {
-        "decimal.js-light": "^2.4.1"
-      }
-    },
     "node_modules/rechoir": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
@@ -18747,9 +18596,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.38.0.tgz",
-      "integrity": "sha512-a4GD5R1TjEeuCT6ZRiYMHmIf7okbCPEuhQET8bczV6FrQMMlFXA1n+G0KKjdlFCm3TEHV77GxfZB3vZSUQGFpg==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
+      "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -19515,89 +19364,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/victory-vendor": {
-      "version": "36.9.2",
-      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
-      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
-      "license": "MIT AND ISC",
-      "dependencies": {
-        "@types/d3-array": "^3.0.3",
-        "@types/d3-ease": "^3.0.0",
-        "@types/d3-interpolate": "^3.0.1",
-        "@types/d3-scale": "^4.0.2",
-        "@types/d3-shape": "^3.1.0",
-        "@types/d3-time": "^3.0.0",
-        "@types/d3-timer": "^3.0.0",
-        "d3-array": "^3.1.6",
-        "d3-ease": "^3.0.1",
-        "d3-interpolate": "^3.0.1",
-        "d3-scale": "^4.0.2",
-        "d3-shape": "^3.1.0",
-        "d3-time": "^3.0.0",
-        "d3-timer": "^3.0.1"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/d3-array": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
-      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
-      "license": "ISC",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-path": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/victory-vendor/node_modules/d3-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
-      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -20360,7 +20126,7 @@
         "@ant-design/compatible": "^5.1.4",
         "@jaegertracing/plexus": "0.2.0",
         "@pyroscope/flamegraph": "0.21.4",
-        "@sentry/browser": "9.0.0",
+        "@sentry/browser": "9.3.0",
         "antd": "^5.23.3",
         "chance": "^1.0.10",
         "classnames": "^2.5.1",
@@ -20381,7 +20147,7 @@
         "prop-types": "^15.5.10",
         "query-string": "^9.0.0",
         "react": "^18.3.1",
-        "react-circular-progressbar": "^2.1.0",
+        "react-circular-progressbar": "^2.2.0",
         "react-dom": "^18.3.1",
         "react-helmet": "^6.1.0",
         "react-icons": "^5.0.1",
@@ -20393,7 +20159,6 @@
         "react-vis": "1.11.12",
         "react-vis-force": "^0.3.1",
         "react-window": "^1.8.10",
-        "recharts": "^2.15.1",
         "redux": "^5.0.1",
         "redux-actions": "2.6.5",
         "redux-first-history": "^5.2.0",
@@ -20899,4 +20664,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

From 6110bbd8c889c04de8fe331bf9d5bb5a46179545 Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Wed, 5 Mar 2025 13:54:05 +0000
Subject: [PATCH 12/13] fix conflicts

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 package-lock.json | 245 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 240 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8ce3967b40..913d431c84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4554,23 +4554,48 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
       "license": "MIT"
     },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
       "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/d3-color": "*"
       }
     },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
@@ -4578,6 +4603,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-zoom": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
@@ -6985,6 +7031,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -7854,6 +7909,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/decode-uri-component": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
@@ -8306,6 +8367,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-scroll-into-view": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz",
@@ -9553,7 +9624,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/events": {
@@ -9707,6 +9777,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -11160,6 +11239,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -16594,6 +16682,21 @@
         "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-test-renderer": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz",
@@ -16609,6 +16712,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/react-vis": {
       "version": "1.11.12",
       "resolved": "https://registry.npmjs.org/react-vis/-/react-vis-1.11.12.tgz",
@@ -16768,6 +16887,38 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
+      "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "node_modules/rechoir": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
@@ -19364,6 +19515,89 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/victory-vendor/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -20147,7 +20381,7 @@
         "prop-types": "^15.5.10",
         "query-string": "^9.0.0",
         "react": "^18.3.1",
-        "react-circular-progressbar": "^2.2.0",
+        "react-circular-progressbar": "^2.1.0",
         "react-dom": "^18.3.1",
         "react-helmet": "^6.1.0",
         "react-icons": "^5.0.1",
@@ -20159,6 +20393,7 @@
         "react-vis": "1.11.12",
         "react-vis-force": "^0.3.1",
         "react-window": "^1.8.10",
+        "recharts": "^2.15.1",
         "redux": "^5.0.1",
         "redux-actions": "2.6.5",
         "redux-first-history": "^5.2.0",
@@ -20664,4 +20899,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

From 04436d0beaac650a9e0629de4477d843cfe39c76 Mon Sep 17 00:00:00 2001
From: Hariom Gupta <guptahariom03082003@gmail.com>
Date: Wed, 5 Mar 2025 14:18:53 +0000
Subject: [PATCH 13/13] remove snapshots and react-vis

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>
---
 package-lock.json                             |  219 +-
 packages/jaeger-ui/package.json               |    1 -
 .../__snapshots__/index.test.js.snap          | 2205 +++++++++--------
 3 files changed, 1198 insertions(+), 1227 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 913d431c84..13f7acbc45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6749,6 +6749,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0",
@@ -7543,12 +7544,6 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
-    "node_modules/d3-array": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/d3-collection": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
@@ -7564,15 +7559,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-contour": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
-      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-array": "^1.1.1"
-      }
-    },
     "node_modules/d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
@@ -7634,27 +7620,6 @@
       "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
       "license": "BSD-3-Clause"
     },
-    "node_modules/d3-geo": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
-      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-array": "1"
-      }
-    },
-    "node_modules/d3-hexbin": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
-      "integrity": "sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/d3-hierarchy": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
-      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -7667,59 +7632,12 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-path": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
-      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/d3-quadtree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
       "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==",
       "license": "BSD-3-Clause"
     },
-    "node_modules/d3-sankey": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.7.1.tgz",
-      "integrity": "sha512-KAyowBWtTLQxyXq1UhXcdCXKbuCQvL51FgqOS+fKlNTQ/4FfSWabRlWs2DezzwKyredAsOhBSQZN/i0XdeE2tQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-array": "1",
-        "d3-collection": "1",
-        "d3-shape": "^1.2.0"
-      }
-    },
-    "node_modules/d3-scale": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
-      "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-array": "^1.2.0",
-        "d3-collection": "1",
-        "d3-color": "1",
-        "d3-format": "1",
-        "d3-interpolate": "1",
-        "d3-time": "1",
-        "d3-time-format": "2"
-      }
-    },
-    "node_modules/d3-scale/node_modules/d3-color": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
-      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/d3-scale/node_modules/d3-interpolate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
-      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-color": "1"
-      }
-    },
     "node_modules/d3-selection": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
@@ -7729,15 +7647,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-shape": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
-      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-path": "1"
-      }
-    },
     "node_modules/d3-time": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
@@ -7781,12 +7690,6 @@
         "d3-selection": "2 - 3"
       }
     },
-    "node_modules/d3-voronoi": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
-      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/d3-zoom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
@@ -8029,6 +7932,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0",
@@ -8056,6 +7960,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
       "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
@@ -8751,6 +8656,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.2.4"
@@ -8763,6 +8669,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -10182,6 +10089,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -10210,6 +10118,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -10239,6 +10148,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -10468,6 +10378,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.1.3"
@@ -10531,6 +10442,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0"
@@ -10543,6 +10455,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -10555,6 +10468,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -10567,6 +10481,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -10582,6 +10497,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -10614,16 +10530,6 @@
         "value-equal": "^1.0.1"
       }
     },
-    "node_modules/hoek": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
-      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
-      "deprecated": "This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -11281,6 +11187,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -11425,6 +11332,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -11707,6 +11615,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -14618,6 +14527,7 @@
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
       "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -14634,6 +14544,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -16519,26 +16430,6 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "license": "MIT"
     },
-    "node_modules/react-motion": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
-      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
-      "license": "MIT",
-      "dependencies": {
-        "performance-now": "^0.2.0",
-        "prop-types": "^15.5.8",
-        "raf": "^3.1.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.9 || ^15.3.0 || ^16.0.0"
-      }
-    },
-    "node_modules/react-motion/node_modules/performance-now": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
-      "integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg==",
-      "license": "MIT"
-    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -16728,39 +16619,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/react-vis": {
-      "version": "1.11.12",
-      "resolved": "https://registry.npmjs.org/react-vis/-/react-vis-1.11.12.tgz",
-      "integrity": "sha512-WuYZrwrH/cXgxKcynciuwZ6+6V9a5N43qa4Wwfgll/tyLq+ACcJ5m8fHFXQk7fQBK80RAp61Oc+a+T64woorvw==",
-      "license": "MIT",
-      "dependencies": {
-        "d3-array": "^1.2.0",
-        "d3-collection": "^1.0.3",
-        "d3-color": "^1.0.3",
-        "d3-contour": "^1.1.0",
-        "d3-format": "^1.2.0",
-        "d3-geo": "^1.6.4",
-        "d3-hexbin": "^0.2.2",
-        "d3-hierarchy": "^1.1.4",
-        "d3-interpolate": "^1.1.4",
-        "d3-sankey": "^0.7.1",
-        "d3-scale": "^1.0.5",
-        "d3-shape": "^1.1.0",
-        "d3-voronoi": "^1.1.2",
-        "deep-equal": "^1.0.1",
-        "global": "^4.3.1",
-        "hoek": "4.2.1",
-        "prop-types": "^15.5.8",
-        "react-motion": "^0.5.2"
-      },
-      "engines": {
-        "node": ">=0.10.0",
-        "npm": ">=3.0"
-      },
-      "peerDependencies": {
-        "react": "15.3.0 - 16.x"
-      }
-    },
     "node_modules/react-vis-force": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/react-vis-force/-/react-vis-force-0.3.1.tgz",
@@ -16777,41 +16635,6 @@
         "react-dom": "0.14.x - 15.x"
       }
     },
-    "node_modules/react-vis/node_modules/d3-color": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
-      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/react-vis/node_modules/d3-interpolate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
-      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-color": "1"
-      }
-    },
-    "node_modules/react-vis/node_modules/deep-equal": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
-      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-arguments": "^1.1.1",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.5.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/react-window": {
       "version": "1.8.10",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
@@ -17052,6 +16875,7 @@
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
       "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -17992,6 +17816,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -18009,6 +17834,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
       "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -20390,7 +20216,6 @@
         "react-redux": "^9.2.0",
         "react-router-dom": "5.3.4",
         "react-router-dom-v5-compat": "^6.24.0",
-        "react-vis": "1.11.12",
         "react-vis-force": "^0.3.1",
         "react-window": "^1.8.10",
         "recharts": "^2.15.1",
diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
index a9587302a6..c6d7f22028 100644
--- a/packages/jaeger-ui/package.json
+++ b/packages/jaeger-ui/package.json
@@ -78,7 +78,6 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "5.3.4",
     "react-router-dom-v5-compat": "^6.24.0",
-    "react-vis": "1.11.12",
     "react-vis-force": "^0.3.1",
     "react-window": "^1.8.10",
     "recharts": "^2.15.1",
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
index c32e3de65d..56e2857785 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
@@ -1263,64 +1263,71 @@ exports[`<OperationTableDetails> render P95 latency with more than 2 decimal pla
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,12L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#869ADD",
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,12"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts55-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,3.369834710743838L100,14L0,14Z"
+                                    fill="#869ADD"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,3.369834710743838"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#869ADD"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -1346,64 +1353,71 @@ exports[`<OperationTableDetails> render P95 latency with more than 2 decimal pla
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,0L0,0Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#4795BA",
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts58-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,11.666666666666668L100,11.666666666666668L100,14L0,14Z"
+                                    fill="#4795BA"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,11.666666666666668L100,11.666666666666668"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#4795BA"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -1429,64 +1443,71 @@ exports[`<OperationTableDetails> render P95 latency with more than 2 decimal pla
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#CD513A",
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts61-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,0L100,14L0,14Z"
+                                    fill="#CD513A"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,0"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#CD513A"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -2313,64 +2334,71 @@ exports[`<OperationTableDetails> render error rate with more than 2 decimal plac
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,12L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#869ADD",
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,12"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts37-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,3.369834710743838L100,14L0,14Z"
+                                    fill="#869ADD"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,3.369834710743838"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#869ADD"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -2396,64 +2424,71 @@ exports[`<OperationTableDetails> render error rate with more than 2 decimal plac
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,0L0,0Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#4795BA",
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts40-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,11.666666666666668L100,11.666666666666668L100,14L0,14Z"
+                                    fill="#4795BA"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,11.666666666666668L100,11.666666666666668"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#4795BA"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -2479,64 +2514,71 @@ exports[`<OperationTableDetails> render error rate with more than 2 decimal plac
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#CD513A",
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts43-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,0L100,14L0,14Z"
+                                    fill="#CD513A"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,0"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#CD513A"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -3363,64 +3405,71 @@ exports[`<OperationTableDetails> render lower than 0.1 P95 latency 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,12L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#869ADD",
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,12"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts46-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,3.369834710743838L100,14L0,14Z"
+                                    fill="#869ADD"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,3.369834710743838"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#869ADD"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -3446,64 +3495,71 @@ exports[`<OperationTableDetails> render lower than 0.1 P95 latency 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,0L0,0Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#4795BA",
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts49-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,11.666666666666668L100,11.666666666666668L100,14L0,14Z"
+                                    fill="#4795BA"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,11.666666666666668L100,11.666666666666668"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#4795BA"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -3529,64 +3585,71 @@ exports[`<OperationTableDetails> render lower than 0.1 P95 latency 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#CD513A",
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts52-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,0L100,14L0,14Z"
+                                    fill="#CD513A"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,0"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#CD513A"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -4413,64 +4476,71 @@ exports[`<OperationTableDetails> render lower than 0.1 error rate 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,12L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#869ADD",
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,12"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts28-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,3.369834710743838L100,14L0,14Z"
+                                    fill="#869ADD"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,3.369834710743838"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#869ADD"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -4496,64 +4566,71 @@ exports[`<OperationTableDetails> render lower than 0.1 error rate 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,0L0,0Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#4795BA",
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts31-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,11.666666666666668L100,11.666666666666668L100,14L0,14Z"
+                                    fill="#4795BA"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,11.666666666666668L100,11.666666666666668"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#4795BA"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -4579,64 +4656,71 @@ exports[`<OperationTableDetails> render lower than 0.1 error rate 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#CD513A",
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts34-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,0L100,14L0,14Z"
+                                    fill="#CD513A"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,0"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#CD513A"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -5463,64 +5547,71 @@ exports[`<OperationTableDetails> render lower than 0.1 request rate value 1`] =
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,12L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#869ADD",
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,12"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts10-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,3.369834710743838L100,14L0,14Z"
+                                    fill="#869ADD"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,3.369834710743838"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#869ADD"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -5546,64 +5637,71 @@ exports[`<OperationTableDetails> render lower than 0.1 request rate value 1`] =
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,0L0,0Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#4795BA",
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts13-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,11.666666666666668L100,11.666666666666668L100,14L0,14Z"
+                                    fill="#4795BA"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,11.666666666666668L100,11.666666666666668"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#4795BA"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -5629,64 +5727,71 @@ exports[`<OperationTableDetails> render lower than 0.1 request rate value 1`] =
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#CD513A",
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts16-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,0L100,14L0,14Z"
+                                    fill="#CD513A"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,0"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#CD513A"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -6513,64 +6618,71 @@ exports[`<OperationTableDetails> render request rate number with more than 2 dec
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,12L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#869ADD",
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,12"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts19-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,3.369834710743838L100,14L0,14Z"
+                                    fill="#869ADD"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,3.369834710743838"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#869ADD"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -6596,64 +6708,71 @@ exports[`<OperationTableDetails> render request rate number with more than 2 dec
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,0L0,0Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#4795BA",
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts22-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,11.666666666666668L100,11.666666666666668L100,14L0,14Z"
+                                    fill="#4795BA"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,11.666666666666668L100,11.666666666666668"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#4795BA"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -6679,64 +6798,71 @@ exports[`<OperationTableDetails> render request rate number with more than 2 dec
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#CD513A",
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts25-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,0L100,14L0,14Z"
+                                    fill="#CD513A"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,0"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#CD513A"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -7563,64 +7689,71 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,12L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#869ADD",
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,12"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#869ADD",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts1-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,3.369834710743838L100,14L0,14Z"
+                                    fill="#869ADD"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,3.369834710743838"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#869ADD"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -7646,64 +7779,71 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,0L0,0Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#4795BA",
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#4795BA",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts4-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,11.666666666666668L100,11.666666666666668L100,14L0,14Z"
+                                    fill="#4795BA"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,11.666666666666668L100,11.666666666666668"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#4795BA"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>
@@ -7729,64 +7869,71 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                           className="ops-container"
                         >
                           <div
-                            className="rv-xy-plot "
+                            className="recharts-wrapper"
                             style={
                               Object {
-                                "height": "15px",
-                                "width": "100px",
+                                "cursor": "default",
+                                "height": 15,
+                                "position": "relative",
+                                "width": 100,
                               }
                             }
                           >
                             <svg
-                              className="rv-xy-plot__inner"
+                              className="recharts-surface"
                               height={15}
-                              onClick={[Function]}
-                              onDoubleClick={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseMove={[Function]}
-                              onMouseUp={[Function]}
-                              onTouchCancel={[Function]}
-                              onTouchEnd={[Function]}
-                              onTouchMove={[Function]}
-                              onTouchStart={[Function]}
-                              onWheel={[Function]}
+                              style={
+                                Object {
+                                  "height": "100%",
+                                  "width": "100%",
+                                }
+                              }
+                              viewBox="0 0 100 15"
                               width={100}
                             >
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-series-example ops-graph-style"
-                                d="M0,0L100,0L100,12L0,12Z"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "fill": "#CD513A",
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
-                              <path
-                                className="rv-xy-plot__series rv-xy-plot__series--line area-elevated-line-series"
-                                d="M0,0L100,0"
-                                onClick={[Function]}
-                                onContextMenu={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                style={
-                                  Object {
-                                    "opacity": 1,
-                                    "stroke": "#CD513A",
-                                    "strokeDasharray": undefined,
-                                    "strokeWidth": undefined,
-                                  }
-                                }
-                                transform="translate(0,2)"
-                              />
+                              <title />
+                              <desc />
+                              <defs>
+                                <clipPath
+                                  id="recharts7-clip"
+                                >
+                                  <rect
+                                    height={14}
+                                    width={100}
+                                    x={0}
+                                    y={0}
+                                  />
+                                </clipPath>
+                              </defs>
+                              <g
+                                className="recharts-layer recharts-area"
+                              >
+                                <g
+                                  className="recharts-layer"
+                                  clipPath={null}
+                                >
+                                  <path
+                                    className="recharts-curve recharts-area-area"
+                                    d="M0,0L100,0L100,14L0,14Z"
+                                    fill="#CD513A"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="none"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                  <path
+                                    className="recharts-curve recharts-area-curve"
+                                    d="M0,0L100,0"
+                                    fill="none"
+                                    fillOpacity={1}
+                                    height={14}
+                                    stroke="#CD513A"
+                                    strokeWidth={1}
+                                    width={100}
+                                  />
+                                </g>
+                              </g>
                             </svg>
                           </div>
                         </div>