From d785276b8e8ecafd475648be4b78e52f4d4f4140 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Thu, 12 Sep 2024 19:53:51 +0530
Subject: [PATCH] Minor: improve UI of filters in test case graph (#17775)

---
 .../Database/Profiler/TestSummary/TestSummaryGraph.tsx       | 5 +++--
 .../Database/Profiler/TestSummary/test-summary.less          | 5 +++++
 .../src/main/resources/ui/src/constants/profiler.constant.ts | 2 ++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/TestSummaryGraph.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/TestSummaryGraph.tsx
index 0a1601b648b..91ed8b9b31d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/TestSummaryGraph.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/TestSummaryGraph.tsx
@@ -135,6 +135,7 @@ function TestSummaryGraph({
       dataKey: info.label,
       type: 'line',
       color: info.color,
+      inactive: !(activeKeys.length === 0 || activeKeys.includes(info.label)),
     }));
 
     legendPayload.push({
@@ -145,7 +146,7 @@ function TestSummaryGraph({
     } as Payload);
 
     return legendPayload;
-  }, [chartData]);
+  }, [chartData?.information, activeKeys]);
 
   const handleLegendClick: LegendProps['onClick'] = (event) => {
     if (event.dataKey === 'Incident') {
@@ -226,7 +227,7 @@ function TestSummaryGraph({
 
   return (
     <ResponsiveContainer
-      className="bg-white"
+      className="bg-white custom-test-summary-graph"
       id={`${testCaseName}_graph`}
       minHeight={minHeight ?? 400}>
       <ComposedChart
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/test-summary.less b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/test-summary.less
index 028a0e9aa75..1ceca81345e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/test-summary.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TestSummary/test-summary.less
@@ -33,3 +33,8 @@
     }
   }
 }
+.custom-test-summary-graph {
+  .recharts-legend-item {
+    cursor: pointer;
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts b/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts
index d704f7927c1..5c2096314f2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts
@@ -76,6 +76,8 @@ export const PROFILER_METRIC = [
   'customMetricsProfile',
 ];
 
+export const INCIDENT = 'Incident';
+
 export const PROFILER_FILTER_RANGE: DateFilterType = {
   yesterday: {
     days: 1,