From 02b3672e09b8f7e46778313da586d11b7f6172ae Mon Sep 17 00:00:00 2001
From: leon-up9 <97597983+leon-up9@users.noreply.github.com>
Date: Mon, 30 May 2022 13:13:07 +0300
Subject: [PATCH] added map object (#1119)

Co-authored-by: Leon <>
---
 .../ServiceMapModal/ServiceMapModal.module.sass   |  2 --
 .../ServiceMapModal/ServiceMapModal.tsx           | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass b/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
index adb1503d8..6e496aafc 100644
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
@@ -34,8 +34,6 @@
     font-weight: 600
     margin-right: 35px
 
-  & .actions
-
 .graphSection
   flex: 85%
 
diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
index 4d267bd1e..c34169115 100644
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
@@ -33,6 +33,11 @@ const modalStyle = {
     padding: "1px 1px",
     paddingBottom: "15px"
 };
+
+const protocolDisplayNameMap = {
+    "GQL": "GraphQL"
+}
+
 interface LegentLabelProps {
     color: string,
     name: string
@@ -119,7 +124,11 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
     const getProtocolsForFilter = useMemo(() => {
         return serviceMapApiData.edges.reduce<ProtocolType[]>((returnArr, currentValue, currentIndex, array) => {
             if (!returnArr.find(prot => prot.key === currentValue.protocol.abbr))
-                returnArr.push({ key: currentValue.protocol.abbr, value: currentValue.protocol.abbr, component: <LegentLabel color={currentValue.protocol.backgroundColor} name={currentValue.protocol.abbr} /> })
+                returnArr.push({
+                    key: currentValue.protocol.abbr, value: currentValue.protocol.abbr,
+                    component: <LegentLabel color={currentValue.protocol.backgroundColor}
+                        name={protocolDisplayNameMap[currentValue.protocol.abbr] ? protocolDisplayNameMap[currentValue.protocol.abbr] : currentValue.protocol.abbr} />
+                })
             return returnArr
         }, new Array<ProtocolType>())
     }, [serviceMapApiData])
@@ -221,12 +230,12 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                                     <div className={styles.card}>
                                         <SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"PROTOCOLS"} multiSelect={true}
                                             checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters}
-                                            inputSearchClass={styles.servicesFilterSearch} isFilterable={false}/>
+                                            inputSearchClass={styles.servicesFilterSearch} isFilterable={false} />
                                     </div>
                                     <div className={styles.servicesFilterWrapper + ` ${styles.card}`}>
                                         <div className={styles.servicesFilterList}>
                                             <SelectList items={getServicesForFilter} tableName={"SERVICES"} tableClassName={styles.filters} multiSelect={true}
-                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch}/>
+                                                checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch} />
                                         </div>
                                     </div>
                                 </div>