From b5c5a8934b78dcf97135d168fdf1f1aec856aa95 Mon Sep 17 00:00:00 2001
From: leon-up9 <97597983+leon-up9@users.noreply.github.com>
Date: Sun, 24 Apr 2022 10:28:00 +0300
Subject: [PATCH] Fix/ui/Service-map-GUI-issues_TRA-4499 (#1034)

* LoadingOverlay z-index

* resizable max width
servicemap edges background color

* z-index as overlay

Co-authored-by: Leon <>
---
 .../ServiceMapModal/ServiceMapModal.tsx          |  2 +-
 .../ServiceMapModal/ServiceMapOptions.ts         |  4 ++--
 ui-common/src/components/UI/Resizeable.tsx       | 16 +++++++---------
 .../components/style/LoadingOverlay.module.sass  |  1 +
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
index 8a223a196..93729d514 100644
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
@@ -178,7 +178,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                 <Box sx={modalStyle}>
                     <div className={styles.modalContainer}>
                         <div className={styles.filterSection}>
-                            <Resizeable minWidth={170}>
+                            <Resizeable minWidth={170} maxWidth={320}>
                                 <div className={styles.filterWrapper}>
                                     <div className={styles.protocolsFilterList}>
                                         <SelectList items={protocols} checkBoxWidth="5%" tableName={"Protocols"} multiSelect={true}
diff --git a/ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts b/ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts
index fffff982a..9344267d3 100644
--- a/ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts
+++ b/ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts
@@ -67,11 +67,11 @@ const ServiceMapOptions = {
             color: '#343434',
             size: 12, // px
             face: 'arial',
-            background: 'none',
+            background: 'rgba(255,255,255,0.7)',
             strokeWidth: 2, // px
             strokeColor: '#ffffff',
             align: 'horizontal',
-            multi: false,
+            multi: false
         },
         labelHighlightBold: true,
         selectionWidth: 1,
diff --git a/ui-common/src/components/UI/Resizeable.tsx b/ui-common/src/components/UI/Resizeable.tsx
index 305b3ea73..c72992f52 100644
--- a/ui-common/src/components/UI/Resizeable.tsx
+++ b/ui-common/src/components/UI/Resizeable.tsx
@@ -5,9 +5,10 @@ import styles from './style/Resizeable.module.sass'
 export interface Props {
     children
     minWidth: number
+    maxWidth?: number
 }
 
-const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
+const Resizeable: React.FC<Props> = ({ children, minWidth, maxWidth }) => {
     const resizeble = useRef(null)
     let mousePos = { x: 0, y: 0 }
     let elementDimention = { w: 0, h: 0 }
@@ -47,14 +48,11 @@ const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
     };
 
     return (
-        <React.Fragment>
-            <div className={styles.resizable} ref={resizeble} style={{ width: elemWidth }}>
-                {children}
-                <div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div>
-                {/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/}
-            </div>
-
-        </React.Fragment>
+        <div className={styles.resizable} ref={resizeble} style={{ width: elemWidth, maxWidth: maxWidth }}>
+            {children}
+            <div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div>
+            {/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/}
+        </div>
     );
 };
 
diff --git a/ui-common/src/components/style/LoadingOverlay.module.sass b/ui-common/src/components/style/LoadingOverlay.module.sass
index 2fd08b3bc..495a38ff3 100644
--- a/ui-common/src/components/style/LoadingOverlay.module.sass
+++ b/ui-common/src/components/style/LoadingOverlay.module.sass
@@ -8,6 +8,7 @@
     align-items: center
     justify-content: center
     background-color: rgba(25, 25, 25, 0.5)
+    z-index: 1000
 
 .loadingOverlaySpinner
     width: 60px