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 <>
2025-06-19 13:03:37 +00:00 · 2022-04-12 16:27:20 +03:00 · 2022-04-12 16:27:20 +03:00 · df1fd2c3a7
commit df1fd2c3a7
parent f8496c0235
7 changed files with 108 additions and 23 deletions
--- a/ui-common/package.json
+++ b/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",
-    "@types/node": "^12.20.10"
+    "react-dom": "^17.0.2",
+    "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",
-    "@craco/craco": "^6.4.3"
+    "xml-formatter": "^2.6.0"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.1.3",
--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass
+++ b/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

--- a/ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/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}>
+                        <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>
-                            </div>
-                        </ResizableBox>
+                            </Resizeable>
+                        </div>
                        <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 }} />
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.module.sass
@ -16,9 +16,8 @@
        justify-content: space-between

        .TrafficPageStreamStatus
-                display: flex
-                align-items: center
-
+            display: flex
+            align-items: center

 .TrafficPageHeaderImage
    width: 22px
--- a/ui-common/src/components/UI/Resizeable.tsx
+++ b/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;
--- a/ui-common/src/components/UI/style/Resizeable.module.sass
+++ b/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%
--- a/ui-common/src/components/UI/style/SelectList.module.sass
+++ b/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%