From 952539642d262fd24517b2e6605a409a1a03bfd1 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 4 Nov 2024 09:10:28 +0100
Subject: [PATCH 1/2] Fix Affected Endpoints select

---
 src/components/Errors/NewErrorCard/index.tsx  | 49 ++++++-------
 .../SpaNPlusOneInsightCard/index.tsx          | 69 +++++++++---------
 .../index.tsx                                 | 73 +++++++++----------
 3 files changed, 94 insertions(+), 97 deletions(-)

diff --git a/src/components/Errors/NewErrorCard/index.tsx b/src/components/Errors/NewErrorCard/index.tsx
index ddb9d0034..7f158628b 100644
--- a/src/components/Errors/NewErrorCard/index.tsx
+++ b/src/components/Errors/NewErrorCard/index.tsx
@@ -95,20 +95,17 @@ export const NewErrorCard = ({
       })),
     [affectedEndpoints]
   );
-  const [selectedEndpoint, setSelectedEndpoint] = useState<Option | undefined>(
-    selectorOptions[0]
-  );
+  const [selectedEndpointKey, setSelectedEndpointKey] = useState<
+    string | undefined
+  >(selectorOptions[0] ? getEndpointKey(selectorOptions[0]) : undefined);
 
   useEffect(() => {
-    if (
-      selectedEndpoint &&
-      !selectorOptions.find(
-        (x) => getEndpointKey(x) === getEndpointKey(selectedEndpoint)
-      )
-    ) {
-      setSelectedEndpoint(selectorOptions[0]);
-    }
-  }, [selectorOptions, selectedEndpoint]);
+    const option = selectedEndpointKey
+      ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
+      : undefined;
+
+    setSelectedEndpointKey(option ? getEndpointKey(option) : undefined);
+  }, [selectorOptions, selectedEndpointKey]);
 
   useEffect(() => {
     if (
@@ -143,15 +140,13 @@ export const NewErrorCard = ({
     sendUserActionTrackingEvent(
       trackingEvents.ERROR_CARD_SELECTED_AFFECTED_ENDPOINT_CHANGED
     );
-    const newValue = selectedOption
+    const newOption = selectedOption
       ? selectorOptions.find(
-          (x) =>
-            x.serviceName === selectedOption.serviceName &&
-            x.spanCodeObjectId === selectedOption.spanCodeObjectId
+          (x) => getEndpointKey(x) === getEndpointKey(selectedOption)
         )
       : undefined;
 
-    setSelectedEndpoint(newValue);
+    setSelectedEndpointKey(newOption ? getEndpointKey(newOption) : undefined);
   };
 
   const handleAffectedEndpointLinkClick = (spanCodeObjectId: string) => {
@@ -207,9 +202,13 @@ export const NewErrorCard = ({
 
   const isCritical = score.score > HIGH_SEVERITY_SCORE_THRESHOLD;
 
-  const selectorValue = selectedEndpoint
-    ? getEndpointKey(selectedEndpoint)
-    : undefined;
+  const selectedOption = useMemo(
+    () =>
+      selectedEndpointKey
+        ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
+        : undefined,
+    [selectedEndpointKey, selectorOptions]
+  );
 
   const toolbarActions = [
     ...(isPinEnabled
@@ -224,7 +223,7 @@ export const NewErrorCard = ({
           />
         ]
       : []),
-    ...(isOccurrenceChartEnabled && selectedEndpoint
+    ...(isOccurrenceChartEnabled && selectedEndpointKey
       ? [
           <NewIconButton
             key={"toggle-occurrence-chart"}
@@ -282,12 +281,12 @@ export const NewErrorCard = ({
             <AffectedEndpointsSelector
               onChange={handleAffectedEndpointsSelectorChange}
               onAssetLinkClick={handleAffectedEndpointLinkClick}
-              value={selectorValue}
+              value={selectedEndpointKey}
               options={selectorOptions}
             />
           </s.AffectedEndpointsContainer>
         )}
-        {isOccurrenceChartEnabled && selectedEndpoint && (
+        {isOccurrenceChartEnabled && selectedOption && (
           <>
             <CSSTransition
               in={isHistogramVisible}
@@ -303,8 +302,8 @@ export const NewErrorCard = ({
                 $transitionDuration={s.TRANSITION_DURATION}
               >
                 <OccurrenceChart
-                  service={selectedEndpoint.serviceName}
-                  spanCodeObjectId={selectedEndpoint.spanCodeObjectId}
+                  service={selectedOption.serviceName}
+                  spanCodeObjectId={selectedOption.spanCodeObjectId}
                   errorId={id}
                 />
               </s.OccurrenceChartContainer>
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
index 6405b5f78..555248c60 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useConfigSelector } from "../../../../../../store/config/useConfigSelector";
 import { getDurationString } from "../../../../../../utils/getDurationString";
 import {
@@ -17,6 +17,12 @@ import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
 import { SpaNPlusOneInsightCardProps } from "./types";
 
+const getSelectorOption = (endpoint: NPlusOneEndpointInfo): Option => ({
+  route: endpoint.endpointInfo.route,
+  serviceName: endpoint.endpointInfo.serviceName,
+  spanCodeObjectId: endpoint.endpointInfo.entrySpanCodeObjectId
+});
+
 export const SpaNPlusOneInsightCard = ({
   insight,
   onAssetLinkClick,
@@ -30,15 +36,27 @@ export const SpaNPlusOneInsightCard = ({
   viewMode
 }: SpaNPlusOneInsightCardProps) => {
   const endpoints = useMemo(() => insight.endpoints ?? [], [insight.endpoints]);
+  const selectorOptions = useMemo(
+    () => endpoints.map(getSelectorOption),
+    [endpoints]
+  );
   const endpointWithMaxDuration = endpoints.reduce(
     (acc, cur) => (acc.duration.raw >= cur.duration.raw ? acc : cur),
     endpoints[0]
   );
   const maxDurationString = getDurationString(endpointWithMaxDuration.duration);
   const { isJaegerEnabled } = useConfigSelector();
-  const [selectedEndpoint, setSelectedEndpoint] = useState<
-    NPlusOneEndpointInfo | undefined
-  >(endpoints[0]);
+  const [selectedEndpointKey, setSelectedEndpointKey] = useState<
+    string | undefined
+  >(selectorOptions[0] ? getEndpointKey(selectorOptions[0]) : undefined);
+
+  useEffect(() => {
+    const option = selectedEndpointKey
+      ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
+      : undefined;
+
+    setSelectedEndpointKey(option ? getEndpointKey(option) : undefined);
+  }, [selectorOptions, selectedEndpointKey]);
 
   const handleSpanLinkClick = (spanCodeObjectId?: string) => {
     if (spanCodeObjectId) {
@@ -64,42 +82,23 @@ export const SpaNPlusOneInsightCard = ({
   };
 
   const handleAffectedEndpointsSelectorChange = (option: Option | null) => {
-    const newValue = option
-      ? endpoints.find(
-          (x) =>
-            x.endpointInfo.serviceName === option.serviceName &&
-            x.endpointInfo.entrySpanCodeObjectId === option.spanCodeObjectId
+    const newOption = option
+      ? selectorOptions.find(
+          (x) => getEndpointKey(x) === getEndpointKey(option)
         )
       : undefined;
 
-    setSelectedEndpoint(newValue);
+    setSelectedEndpointKey(newOption ? getEndpointKey(newOption) : undefined);
   };
 
-  const selectorOptions = useMemo(
+  const selectedEndpoint = useMemo(
     () =>
-      endpoints.map((x) => ({
-        route: x.endpointInfo.route,
-        serviceName: x.endpointInfo.serviceName,
-        spanCodeObjectId: x.endpointInfo.entrySpanCodeObjectId
-      })),
-    [endpoints]
-  );
-
-  const selectedOption = useMemo(
-    () =>
-      selectedEndpoint &&
-      selectorOptions.find(
-        (x) =>
-          x.serviceName === selectedEndpoint.endpointInfo.serviceName &&
-          x.spanCodeObjectId ===
-            selectedEndpoint.endpointInfo.entrySpanCodeObjectId
-      ),
-    [selectedEndpoint, selectorOptions]
-  );
-
-  const selectorValue = useMemo(
-    () => (selectedOption ? getEndpointKey(selectedOption) : undefined),
-    [selectedOption]
+      selectedEndpointKey
+        ? endpoints.find(
+            (x) => getEndpointKey(x.endpointInfo) === selectedEndpointKey
+          )
+        : undefined,
+    [selectedEndpointKey, endpoints]
   );
 
   return (
@@ -113,7 +112,7 @@ export const SpaNPlusOneInsightCard = ({
             </Description>
             <s.SelectContainer>
               <AffectedEndpointsSelector
-                value={selectorValue}
+                value={selectedEndpointKey}
                 onChange={handleAffectedEndpointsSelectorChange}
                 options={selectorOptions}
                 onAssetLinkClick={handleSpanLinkClick}
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
index 174d14cca..ab655b162 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useConfigSelector } from "../../../../../../store/config/useConfigSelector";
 import { isNull } from "../../../../../../typeGuards/isNull";
 import { getDurationString } from "../../../../../../utils/getDurationString";
@@ -19,6 +19,12 @@ import { ContentContainer, Description, Details } from "../styles";
 import * as s from "./styles";
 import { SpanEndpointBottleneckInsightCardProps } from "./types";
 
+const getSelectorOption = (endpoint: BottleneckEndpointInfo): Option => ({
+  route: trimEndpointScheme(endpoint.endpointInfo.route),
+  serviceName: endpoint.endpointInfo.serviceName,
+  spanCodeObjectId: endpoint.endpointInfo.spanCodeObjectId
+});
+
 export const SpanEndpointBottleneckInsightCard = ({
   insight,
   onJiraTicketCreate,
@@ -36,6 +42,11 @@ export const SpanEndpointBottleneckInsightCard = ({
     () => insight.slowEndpoints ?? [],
     [insight.slowEndpoints]
   );
+  const selectorOptions: Option[] = useMemo(
+    () => slowEndpoints.map(getSelectorOption),
+    [slowEndpoints]
+  );
+
   const endpointWithMaxDuration =
     slowEndpoints.length > 0
       ? slowEndpoints.reduce(
@@ -51,9 +62,17 @@ export const SpanEndpointBottleneckInsightCard = ({
     ? getDurationString(endpointWithMaxDuration.avgDurationWhenBeingBottleneck)
     : undefined;
 
-  const [selectedEndpoint, setSelectedEndpoint] = useState<
-    BottleneckEndpointInfo | undefined
-  >(slowEndpoints[0]);
+  const [selectedEndpointKey, setSelectedEndpointKey] = useState<
+    string | undefined
+  >(selectorOptions[0] ? getEndpointKey(selectorOptions[0]) : undefined);
+
+  useEffect(() => {
+    const newOption = selectedEndpointKey
+      ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
+      : undefined;
+
+    setSelectedEndpointKey(newOption ? getEndpointKey(newOption) : undefined);
+  }, [selectorOptions, selectedEndpointKey]);
 
   const handleSpanLinkClick = (spanCodeObjectId?: string) => {
     if (spanCodeObjectId) {
@@ -81,42 +100,22 @@ export const SpanEndpointBottleneckInsightCard = ({
   const handleAffectedEndpointsSelectorChange = (
     selectedOption: Option | null
   ) => {
-    const newValue = selectedOption
-      ? slowEndpoints.find(
-          (x) =>
-            x.endpointInfo.spanCodeObjectId ===
-              selectedOption.spanCodeObjectId &&
-            x.endpointInfo.serviceName === selectedOption.serviceName
-        )
-      : undefined;
+    const newValue =
+      selectedOption && selectedEndpointKey
+        ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
+        : undefined;
 
-    setSelectedEndpoint(newValue);
+    setSelectedEndpointKey(newValue ? getEndpointKey(newValue) : undefined);
   };
 
-  const selectorOptions: Option[] = useMemo(
-    () =>
-      slowEndpoints.map((x) => ({
-        route: trimEndpointScheme(x.endpointInfo.route),
-        serviceName: x.endpointInfo.serviceName,
-        spanCodeObjectId: x.endpointInfo.spanCodeObjectId
-      })),
-    [slowEndpoints]
-  );
-
-  const selectedOption = useMemo(
+  const selectedEndpoint = useMemo(
     () =>
-      selectedEndpoint &&
-      selectorOptions.find(
-        (x) =>
-          x.serviceName === selectedEndpoint.endpointInfo.serviceName &&
-          x.spanCodeObjectId === selectedEndpoint.endpointInfo.spanCodeObjectId
-      ),
-    [selectedEndpoint, selectorOptions]
-  );
-
-  const selectorValue = useMemo(
-    () => (selectedOption ? getEndpointKey(selectedOption) : undefined),
-    [selectedOption]
+      selectedEndpointKey
+        ? slowEndpoints.find(
+            (x) => getEndpointKey(x.endpointInfo) === selectedEndpointKey
+          )
+        : undefined,
+    [selectedEndpointKey, slowEndpoints]
   );
 
   return (
@@ -137,7 +136,7 @@ export const SpanEndpointBottleneckInsightCard = ({
               <AffectedEndpointsSelector
                 onChange={handleAffectedEndpointsSelectorChange}
                 onAssetLinkClick={handleSpanLinkClick}
-                value={selectorValue}
+                value={selectedEndpointKey}
                 options={selectorOptions}
                 isDisabled={selectorOptions.length === 0}
               />

From 0eaf606ecd34ae15daca0567509eb0c5c832b4c4 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Tue, 5 Nov 2024 13:57:37 +0100
Subject: [PATCH 2/2] Simplify selected value change logic

---
 src/components/Errors/NewErrorCard/index.tsx         | 12 +++---------
 .../insightCards/SpaNPlusOneInsightCard/index.tsx    | 10 ++--------
 .../SpanEndpointBottleneckInsightCard/index.tsx      | 11 ++---------
 .../common/AffectedEndpointsSelector/index.tsx       |  7 ++-----
 .../common/AffectedEndpointsSelector/types.ts        |  2 +-
 5 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/src/components/Errors/NewErrorCard/index.tsx b/src/components/Errors/NewErrorCard/index.tsx
index 7f158628b..4e6e0bf4e 100644
--- a/src/components/Errors/NewErrorCard/index.tsx
+++ b/src/components/Errors/NewErrorCard/index.tsx
@@ -134,25 +134,19 @@ export const NewErrorCard = ({
     onSourceLinkClick(id);
   };
 
-  const handleAffectedEndpointsSelectorChange = (
-    selectedOption: Option | null
-  ) => {
+  const handleAffectedEndpointsSelectorChange = (endpointKey: string) => {
     sendUserActionTrackingEvent(
       trackingEvents.ERROR_CARD_SELECTED_AFFECTED_ENDPOINT_CHANGED
     );
-    const newOption = selectedOption
-      ? selectorOptions.find(
-          (x) => getEndpointKey(x) === getEndpointKey(selectedOption)
-        )
-      : undefined;
 
-    setSelectedEndpointKey(newOption ? getEndpointKey(newOption) : undefined);
+    setSelectedEndpointKey(endpointKey);
   };
 
   const handleAffectedEndpointLinkClick = (spanCodeObjectId: string) => {
     sendUserActionTrackingEvent(
       trackingEvents.ERROR_CARD_AFFECTED_ENDPOINT_LINK_CLICKED
     );
+
     changeScope({
       span: {
         spanCodeObjectId
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
index 555248c60..ea439e1f8 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpaNPlusOneInsightCard/index.tsx
@@ -81,14 +81,8 @@ export const SpaNPlusOneInsightCard = ({
     }
   };
 
-  const handleAffectedEndpointsSelectorChange = (option: Option | null) => {
-    const newOption = option
-      ? selectorOptions.find(
-          (x) => getEndpointKey(x) === getEndpointKey(option)
-        )
-      : undefined;
-
-    setSelectedEndpointKey(newOption ? getEndpointKey(newOption) : undefined);
+  const handleAffectedEndpointsSelectorChange = (endpointKey: string) => {
+    setSelectedEndpointKey(endpointKey);
   };
 
   const selectedEndpoint = useMemo(
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
index ab655b162..6e5c56622 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanEndpointBottleneckInsightCard/index.tsx
@@ -97,15 +97,8 @@ export const SpanEndpointBottleneckInsightCard = ({
     onTraceButtonClick(trace, insightType, spanCodeObjectId);
   };
 
-  const handleAffectedEndpointsSelectorChange = (
-    selectedOption: Option | null
-  ) => {
-    const newValue =
-      selectedOption && selectedEndpointKey
-        ? selectorOptions.find((x) => getEndpointKey(x) === selectedEndpointKey)
-        : undefined;
-
-    setSelectedEndpointKey(newValue ? getEndpointKey(newValue) : undefined);
+  const handleAffectedEndpointsSelectorChange = (endpointKey: string) => {
+    setSelectedEndpointKey(endpointKey);
   };
 
   const selectedEndpoint = useMemo(
diff --git a/src/components/common/AffectedEndpointsSelector/index.tsx b/src/components/common/AffectedEndpointsSelector/index.tsx
index fc4918c34..4d3df81a7 100644
--- a/src/components/common/AffectedEndpointsSelector/index.tsx
+++ b/src/components/common/AffectedEndpointsSelector/index.tsx
@@ -52,11 +52,8 @@ export const AffectedEndpointsSelector = ({
     }
   };
 
-  const handleSelectChange = (selectedOption: string) => {
-    const selected =
-      options.find((x) => getEndpointKey(x) === selectedOption) ?? null;
-
-    onChange(selected);
+  const handleSelectChange = (value: string) => {
+    onChange(value);
   };
 
   return (
diff --git a/src/components/common/AffectedEndpointsSelector/types.ts b/src/components/common/AffectedEndpointsSelector/types.ts
index 969bf0df4..904384459 100644
--- a/src/components/common/AffectedEndpointsSelector/types.ts
+++ b/src/components/common/AffectedEndpointsSelector/types.ts
@@ -11,7 +11,7 @@ export interface ContainerProps {
 export interface AffectedEndpointsSelectorProps {
   value?: string;
   options: Option[];
-  onChange: (selected: Option | null) => void;
+  onChange: (value: string) => void;
   onAssetLinkClick: (spanCodeObjectId: string) => void;
   isDisabled?: boolean;
 }