From 169a877d37266a5d0c5f18298ebc0ac28b1e30a8 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Tue, 7 Nov 2023 14:08:11 +0100
Subject: [PATCH] Group insights by displayName

---
 .../components/Assets/AssetInsights/index.tsx | 31 +++++++++----------
 .../Assets/AssetInsights/typeGuards.ts        |  2 +-
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/Assets/AssetInsights/index.tsx b/ui/src/components/Assets/AssetInsights/index.tsx
index 74b0b23..7ba1b81 100644
--- a/ui/src/components/Assets/AssetInsights/index.tsx
+++ b/ui/src/components/Assets/AssetInsights/index.tsx
@@ -82,7 +82,7 @@ export const getInsightTypeOrderPriority = (type: string): number => {
     [InsightType.SpanDurationBreakdown]: 68
   };
 
-  return insightOrderPriorityMap[type] || Infinity;
+  return insightOrderPriorityMap[type] || -Infinity;
 };
 
 const renderInsightCard = (
@@ -214,7 +214,7 @@ const sortInsightGroupsByName = (a: InsightGroup, b: InsightGroup) => {
 };
 
 export const AssetInsights = (props: AssetInsightsProps) => {
-  const [insights, setInsights] = useState<InsightGroup[]>();
+  const [insightGroups, setInsightGroups] = useState<InsightGroup[]>();
   const previousEnvironment = usePrevious(props.environment);
   const insightsContainerRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
@@ -284,25 +284,24 @@ export const AssetInsights = (props: AssetInsightsProps) => {
         continue;
       }
 
-      const insightSpanCodeObjectId = insight.spanInfo?.spanCodeObjectId;
+      const insightDisplayName = insight.spanInfo?.displayName;
 
-      if (
-        !insightSpanCodeObjectId ||
-        insightSpanCodeObjectId === spanCodeObjectId
-      ) {
+      if (!insightDisplayName || insightDisplayName === displayName) {
         ungroupedInsights.push(insight);
         continue;
       }
 
-      if (!spanInsightGroups[spanCodeObjectId]) {
-        spanInsightGroups[spanCodeObjectId] = [];
+      if (!spanInsightGroups[insightDisplayName]) {
+        spanInsightGroups[insightDisplayName] = [];
       }
 
-      spanInsightGroups[spanCodeObjectId].push(insight);
+      spanInsightGroups[insightDisplayName].push(insight);
     }
 
-    setInsights([
-      { insights: ungroupedInsights },
+    setInsightGroups([
+      ...(ungroupedInsights.length > 0
+        ? [{ insights: ungroupedInsights }]
+        : []),
       // Span insight groups
       ...Object.values(spanInsightGroups)
         .map((x) => ({
@@ -312,7 +311,7 @@ export const AssetInsights = (props: AssetInsightsProps) => {
         }))
         .sort(sortInsightGroupsByName)
     ]);
-  }, [spanCodeObjectId, props.environment]);
+  }, [displayName, spanCodeObjectId, props.environment]);
 
   useEffect(() => {
     void fetchInsights();
@@ -326,7 +325,7 @@ export const AssetInsights = (props: AssetInsightsProps) => {
     return () => {
       window.clearTimeout(timer);
     };
-  }, [insights, fetchInsights]);
+  }, [insightGroups, fetchInsights]);
 
   useEffect(() => {
     if (insightsContainerRef.current) {
@@ -376,9 +375,9 @@ export const AssetInsights = (props: AssetInsightsProps) => {
         </s.Breadcrumbs>
       </s.Header>
       <s.ContentContainer>
-        {insights ? (
+        {insightGroups ? (
           <s.InsightsContainer ref={insightsContainerRef}>
-            {insights.map((x) => (
+            {insightGroups.map((x) => (
               <s.InsightGroup key={x.name || "__ungrouped"}>
                 {x.name && (
                   <s.InsightGroupName>
diff --git a/ui/src/components/Assets/AssetInsights/typeGuards.ts b/ui/src/components/Assets/AssetInsights/typeGuards.ts
index fcd2cfa..e76b0c7 100644
--- a/ui/src/components/Assets/AssetInsights/typeGuards.ts
+++ b/ui/src/components/Assets/AssetInsights/typeGuards.ts
@@ -18,7 +18,7 @@ import {
   SpanInsight,
   SpanNPlusOneInsight,
   SpanScalingBadlyInsight,
-  SpanUsagesInsight,
+  SpanUsagesInsight
 } from "./types";
 
 export const isSpanInsight = (