From e128ab41ebbca5dc2f50db37dd12c391b540d027 Mon Sep 17 00:00:00 2001
From: Thuan Vo <thuan.votann@gmail.com>
Date: Thu, 12 Sep 2024 13:51:00 -0700
Subject: [PATCH] fix(topology): filter options should show unique value only

---
 src/app/Topology/Toolbar/TopologyFilters.tsx | 50 ++++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
index 3af9db717..a66d5fafb 100644
--- a/src/app/Topology/Toolbar/TopologyFilters.tsx
+++ b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -209,20 +209,19 @@ export const TopologyFilter: React.FC<TopologyFilterProps> = ({ isDisabled }) =>
                     return !criteria || !criteria.includes(val);
                   }
                   return true;
-                })
-                .map<TopologyFilterSelectOption>((val) => ({
-                  value: val,
-                  render: () =>
-                    isLabelOrAnnotation(cat) ? (
-                      <Label color="grey" textMaxWidth={LABEL_TEXT_MAXWIDTH}>
-                        {val}
-                      </Label>
-                    ) : (
-                      val
-                    ),
-                })),
+                }),
             ),
-          ),
+          ).map<TopologyFilterSelectOption>((val) => ({
+            value: val,
+            render: () =>
+              isLabelOrAnnotation(cat) ? (
+                <Label color="grey" textMaxWidth={LABEL_TEXT_MAXWIDTH}>
+                  {val}
+                </Label>
+              ) : (
+                val
+              ),
+          })),
         }))
         .filter((group) => group.options && group.options.length); // Do show show empty groups
 
@@ -267,20 +266,19 @@ export const TopologyFilter: React.FC<TopologyFilterProps> = ({ isDisabled }) =>
                 .filter((val) => {
                   const criteria: string[] = targetFilters.filters[cat];
                   return !criteria || !criteria.includes(val);
-                })
-                .map<TopologyFilterSelectOption>((val) => ({
-                  value: val,
-                  render: () =>
-                    isLabelOrAnnotation(cat) ? (
-                      <Label color="grey" textMaxWidth={LABEL_TEXT_MAXWIDTH}>
-                        {val}
-                      </Label>
-                    ) : (
-                      val
-                    ),
-                })),
+                }),
             ),
-          ),
+          ).map<TopologyFilterSelectOption>((val) => ({
+            value: val,
+            render: () =>
+              isLabelOrAnnotation(cat) ? (
+                <Label color="grey" textMaxWidth={LABEL_TEXT_MAXWIDTH}>
+                  {val}
+                </Label>
+              ) : (
+                val
+              ),
+          })),
         },
       ];