Ui/Resiszable (#990)

* fixed toast
fixed filter refresh on reload

* revarted

* sticky selectlist header

* apply check to filtered items

* grpc filter Bug

* should almost fix filtering

* working without disabled

* handle disabled items

* small refactor

* almost working with weird jesture

* test

* servicesFilterList height

* fixed to work

* refresh margin

* after PR notes

* remove redunded var

* pr review

* Pr comments

* removed line

* removed redundant

* nullable check

Co-authored-by: Leon <>

ui-common/package.json

@@ -26,15 +26,16 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^12.20.10",
     "node-sass": "^6.0.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "recoil": "^0.5.2",
     "react-copy-to-clipboard": "^5.0.3",
-    "@types/jest": "^26.0.22",
+    "react-dom": "^17.0.2",
-    "@types/node": "^12.20.10"
+    "recoil": "^0.5.2"
   },
   "dependencies": {
+    "@craco/craco": "^6.4.3",
     "@types/lodash": "^4.14.179",
     "@uiw/react-textarea-code-editor": "^1.4.12",
     "axios": "^0.25.0",
@@ -49,7 +50,6 @@
     "node-fetch": "^3.1.1",
     "numeral": "^2.0.6",
     "protobuf-decoder": "^0.1.0",
-    "react-resizable": "^3.0.4",
     "react-graph-vis": "^1.0.7",
     "react-lowlight": "^3.0.0",
     "react-router-dom": "^6.2.1",
@@ -59,8 +59,7 @@
     "redoc": "^2.0.0-rc.59",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.1.1",
-    "xml-formatter": "^2.6.0",
+    "xml-formatter": "^2.6.0"
-    "@craco/craco": "^6.4.3"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.1.3",

ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass

@@ -2,7 +2,6 @@
 
 .modalContainer
   display: flex
-  flex-wrap: nowrap
   width: 100%
   height: 100%
 
@@ -11,8 +10,6 @@
 
 .filterSection
   flex: 15%
-  border-right: 1px solid $blue-color
-  margin-right: 2%
   height: 100%
 
   .filters table
@@ -38,6 +35,7 @@
   display: flex
   flex-direction: column
   margin-right: 10px
+  width: 100%
 
 .servicesFilterSearch
   width: calc(100% - 10px)
@@ -47,7 +45,7 @@
   margin-bottom: 5px
 
 .servicesFilter
-  margin-top: clamp(25px,15%,35px)
+  margin-top: 15px
   height: 100%
   overflow: hidden
 

ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx

@@ -12,10 +12,9 @@ import closeIcon from "assets/close.svg"
 import styles from './ServiceMapModal.module.sass'
 import SelectList from "../UI/SelectList";
 import { GraphData, ServiceMapGraph } from "./ServiceMapModalTypes"
-import { ResizableBox } from "react-resizable"
-import "react-resizable/css/styles.css"
 import { Utils } from "../../helpers/Utils";
 import { TOAST_CONTAINER_ID } from "../../configs/Consts";
+import Resizeable from "../UI/Resizeable"
 
 const modalStyle = {
     position: 'absolute',
@@ -176,9 +175,8 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
             <Fade in={isOpen}>
                 <Box sx={modalStyle}>
                     <div className={styles.modalContainer}>
-                        {/* TODO: remove error missing height */}
-                        <ResizableBox width={200} style={{ height: '100%', minWidth: "200px" }} axis={"x"}>
                         <div className={styles.filterSection}>
+                            <Resizeable minWidth={170}>
                                 <div className={styles.filterWrapper}>
                                     <div className={styles.protocolsFilterList}>
                                         <SelectList items={protocols} checkBoxWidth="5%" tableName={"Protocols"} multiSelect={true}
@@ -193,11 +191,11 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                                         </div>
                                     </div>
                                 </div>
+                            </Resizeable>
                         </div>
-                        </ResizableBox>
                         <div className={styles.graphSection}>
                             <div style={{ display: "flex", justifyContent: "space-between" }}>
-                                <Button style={{ marginRight: "3%" }}
+                                <Button style={{ marginLeft: "3%" }}
                                     startIcon={<img src={refreshIcon} className="custom" alt="refresh" style={{ marginRight: "8%" }}></img>}
                                     size="medium"
                                     variant="contained"
@@ -206,7 +204,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                                 >
                                     Refresh
                                 </Button>
-                                <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}></img>
+                                <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }}></img>
                             </div>
                             {isLoading && <div className={spinnerStyle.spinnerContainer}>
                                 <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />

ui-common/src/components/TrafficViewer/TrafficViewer.module.sass

@@ -19,7 +19,6 @@
             display: flex
             align-items: center
 
-
 .TrafficPageHeaderImage
     width: 22px
     height: 22px

ui-common/src/components/UI/Resizeable.tsx

@@ -0,0 +1,61 @@
+import React, { useRef, useState } from "react";
+
+import styles from './style/Resizeable.module.sass'
+
+export interface Props {
+    children
+    minWidth: number
+}
+
+const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
+    const resizeble = useRef(null)
+    let mousePos = { x: 0, y: 0 }
+    let elementDimention = { w: 0, h: 0 }
+    let isPressed = false
+    const [elemWidth, setElemWidth] = useState(resizeble?.current?.style?.width)
+
+    const mouseDownHandler = function (e) {
+        // Get the current mouse position
+        mousePos = { x: e.clientX, y: e.clientY }
+        isPressed = true
+
+        // Calculate the dimension of element
+        const styles = resizeble.current.getBoundingClientRect();
+        elementDimention = { w: parseInt(styles.width, 10), h: parseInt(styles.height, 10) }
+        // Attach the listeners to `document`
+        window.addEventListener('mousemove', mouseMoveHandler);
+        window.addEventListener('mouseup', mouseUpHandler);
+    };
+
+
+    const mouseMoveHandler = function (e) {
+        if (isPressed) {
+            // How far the mouse has been moved
+            const dx = e.clientX - mousePos.x;
+            const widthEl = elementDimention.w + dx
+
+            if (widthEl >= minWidth)
+                // Adjust the dimension of element
+                setElemWidth(widthEl)
+        }
+    };
+
+    const mouseUpHandler = function () {
+        window.removeEventListener('mousemove', mouseMoveHandler);
+        window.removeEventListener('mouseup', mouseUpHandler);
+        isPressed = false
+    };
+
+    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>
+    );
+};
+
+export default Resizeable;

ui-common/src/components/UI/style/Resizeable.module.sass

@@ -0,0 +1,29 @@
+@import "../../../variables.module"
+
+.resizable
+    position: relative
+    align-items: center
+    display: flex
+    overflow: hidden
+    border-right: 1px solid $blue-color
+    height: 100%
+    width: 100%
+    padding-right: 3px
+
+.resizer
+    position: absolute
+
+    &Right
+        cursor: col-resize
+        height: 100%
+        right: 0
+        top: 0
+        width: 5px
+
+    // FutureUse
+    &Bottom
+        bottom: 0
+        cursor: row-resize
+        height: 5px
+        left: 0
+        width: 100%

ui-common/src/components/UI/style/SelectList.module.sass

@@ -3,6 +3,7 @@
 .selectListTable
     overflow: auto
     height: 100%
+    user-select: none // when resizble moved we get unwanted beheviour
 
     table
         width: 100%