From 0a43c8e545e5969960efd52bbc03fa56fc3d68e3 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 5 Jul 2023 17:56:51 +0200
Subject: [PATCH] Fix Y Axis scale when data is outside of P50 - P95 area

---
 .../LiveView/LiveView.stories.tsx             | 196 ++++++++++++++----
 .../RecentActivity/LiveView/index.tsx         |  28 ++-
 2 files changed, 177 insertions(+), 47 deletions(-)

diff --git a/src/components/RecentActivity/LiveView/LiveView.stories.tsx b/src/components/RecentActivity/LiveView/LiveView.stories.tsx
index 6b2cf1fa9..68239a44b 100644
--- a/src/components/RecentActivity/LiveView/LiveView.stories.tsx
+++ b/src/components/RecentActivity/LiveView/LiveView.stories.tsx
@@ -51,6 +51,158 @@ export const WithData: Story = {
   }
 };
 
+export const WithLowLatencyData: Story = {
+  args: {
+    data: {
+      liveDataRecords: [
+        {
+          duration: {
+            value: 0.13508,
+            unit: "ms",
+            raw: 135084
+          },
+          dateTime: "2023-06-30T10:30:18.9634654Z"
+        }
+      ],
+      durationData: {
+        percentiles: [
+          {
+            percentile: 0.5,
+            currentDuration: {
+              value: 0.13508,
+              unit: "ms",
+              raw: 135084
+            },
+            previousDuration: null,
+            changeVerified: null
+          },
+          {
+            percentile: 0.95,
+            currentDuration: {
+              value: 0.13508,
+              unit: "ms",
+              raw: 135084
+            },
+            previousDuration: null,
+            changeVerified: null
+          }
+        ],
+        codeObjectId:
+          "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$method1",
+        displayName: "SampleInsightsController.method1"
+      }
+    }
+  }
+};
+
+export const WithDataOutsideOfTheArea: Story = {
+  args: {
+    data: {
+      liveDataRecords: [
+        {
+          duration: {
+            value: 1.92,
+            unit: "ms",
+            raw: 1921300
+          },
+          dateTime: "2023-07-04T13:52:49.3801706Z"
+        },
+        {
+          duration: {
+            value: 2.16,
+            unit: "ms",
+            raw: 2158300
+          },
+          dateTime: "2023-07-04T13:52:59.9520074Z"
+        },
+        {
+          duration: {
+            value: 5.33,
+            unit: "ms",
+            raw: 5333600
+          },
+          dateTime: "2023-07-04T13:53:04.5185513Z"
+        },
+        {
+          duration: {
+            value: 5.86,
+            unit: "ms",
+            raw: 5855900
+          },
+          dateTime: "2023-07-04T13:53:14.8785927Z"
+        },
+        {
+          duration: {
+            value: 5.24,
+            unit: "ms",
+            raw: 5238100
+          },
+          dateTime: "2023-07-04T13:53:25.2289013Z"
+        },
+        {
+          duration: {
+            value: 7.34,
+            unit: "ms",
+            raw: 7343000
+          },
+          dateTime: "2023-07-04T13:53:35.6438918Z"
+        },
+        {
+          duration: {
+            value: 190.23,
+            unit: "ms",
+            raw: 190230600
+          },
+          dateTime: "2023-07-04T13:54:05.783907Z"
+        },
+        {
+          duration: {
+            value: 2.15,
+            unit: "ms",
+            raw: 2147000
+          },
+          dateTime: "2023-07-04T13:54:34.390596Z"
+        }
+      ],
+      durationData: {
+        percentiles: [
+          {
+            percentile: 0.5,
+            currentDuration: {
+              value: 247.68,
+              unit: "ms",
+              raw: 247684600
+            },
+            previousDuration: {
+              value: 685.83,
+              unit: "ms",
+              raw: 685825500
+            },
+            changeVerified: false
+          },
+          {
+            percentile: 0.95,
+            currentDuration: {
+              value: 6.28,
+              unit: "sec",
+              raw: 6284576400
+            },
+            previousDuration: {
+              value: 7.25,
+              unit: "sec",
+              raw: 7247733745
+            },
+            changeVerified: true
+          }
+        ],
+        codeObjectId:
+          "method:Digma.PluginBackend.Controllers.CodeAnalyticsController$_$GetInsightsOfMethods(InsightOfMethodsRequest)",
+        displayName: "HTTP POST CodeAnalytics/codeObjects/insights_of_methods"
+      }
+    }
+  }
+};
+
 export const WithSlowdown: Story = {
   args: {
     data: {
@@ -119,47 +271,3 @@ export const WithEvaluating: Story = {
     }
   }
 };
-
-export const WithLowLatencyData: Story = {
-  args: {
-    data: {
-      liveDataRecords: [
-        {
-          duration: {
-            value: 0.13508,
-            unit: "ms",
-            raw: 135084
-          },
-          dateTime: "2023-06-30T10:30:18.9634654Z"
-        }
-      ],
-      durationData: {
-        percentiles: [
-          {
-            percentile: 0.5,
-            currentDuration: {
-              value: 0.13508,
-              unit: "ms",
-              raw: 135084
-            },
-            previousDuration: null,
-            changeVerified: null
-          },
-          {
-            percentile: 0.95,
-            currentDuration: {
-              value: 0.13508,
-              unit: "ms",
-              raw: 135084
-            },
-            previousDuration: null,
-            changeVerified: null
-          }
-        ],
-        codeObjectId:
-          "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$method1",
-        displayName: "SampleInsightsController.method1"
-      }
-    }
-  }
-};
diff --git a/src/components/RecentActivity/LiveView/index.tsx b/src/components/RecentActivity/LiveView/index.tsx
index a1d62b8af..5d0ef0b57 100644
--- a/src/components/RecentActivity/LiveView/index.tsx
+++ b/src/components/RecentActivity/LiveView/index.tsx
@@ -156,7 +156,7 @@ const convertTo = (nanoseconds: number, unit: string) => {
   }
 };
 
-const getMaxDuration = (
+const getMaxDurationRecord = (
   records: ExtendedLiveDataRecord[]
 ): ExtendedLiveDataRecord | undefined =>
   records.reduce(
@@ -319,7 +319,29 @@ export const LiveView = (props: LiveViewProps) => {
     })
   );
 
-  const maxDuration = getMaxDuration(data)?.duration;
+  // Add P50 and P95 values to build the correct scale for Y axis
+  const YAxisData = data.concat([
+    ...(p50
+      ? [
+          {
+            dateTime: new Date(0).toISOString(),
+            duration: p50?.duration,
+            dateTimeValue: 0
+          }
+        ]
+      : []),
+    ...(p95
+      ? [
+          {
+            dateTime: new Date(0).toISOString(),
+            duration: p95?.duration,
+            dateTimeValue: 0
+          }
+        ]
+      : [])
+  ]);
+
+  const maxDuration = getMaxDurationRecord(YAxisData)?.duration;
   const maxDurationUnit = maxDuration?.unit || "ns";
   const YAxisTickInterval = roundToNonZeroDecimals(
     convertTo(maxDuration?.raw || 0 / Y_AXIS_TICK_COUNT, maxDurationUnit),
@@ -419,7 +441,7 @@ export const LiveView = (props: LiveViewProps) => {
             >
               <ResponsiveContainer width={"100%"} height={"100%"}>
                 <ComposedChart
-                  data={data}
+                  data={YAxisData}
                   margin={{
                     bottom: 34
                   }}