fix reconnection issues

Author: fstasi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "arduino-serial-plotter-webapp",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "dependencies": {},
   "license": "AGPL",
   "scripts": {

src/App.tsx

@@ -54,7 +54,8 @@ export default function App() {
         setConfig({ ...config, ...message.data });
       }
     },
-    [setConfig, config]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [config, setConfig]
   );
 
   // as soon as the wsPort is set, create a websocket connection
@@ -63,6 +64,7 @@ export default function App() {
       return;
     }
 
+    console.log(`opening ws connection on localhost:${config?.wsPort}`);
     websocket.current = new WebSocket(`ws://localhost:${config?.wsPort}`);
     websocket.current.onmessage = (res: any) => {
       const message: SerialPlotter.Protocol.Message = JSON.parse(res.data);
@@ -71,9 +73,11 @@ export default function App() {
     const wsCurrent = websocket.current;
 
     return () => {
+      console.log("closing ws connection");
       wsCurrent.close();
     };
-  }, [config?.wsPort, onMiddlewareMessage]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config?.wsPort]);
 
   // at bootstrap read params from the URL
   useEffect(() => {
@@ -99,7 +103,7 @@ export default function App() {
         data: urlSettings,
       });
     }
-  }, [onMiddlewareMessage, config]);
+  }, [config, onMiddlewareMessage]);
 
   // If in "generate" mode, create fake data
   useEffect(() => {

src/Legend.tsx

@@ -37,7 +37,7 @@ export function Legend({
       if (scrollRef.current.getScrollLeft() === 0) setShowScrollLeft(false);
       if (
         scrollRef.current.getScrollLeft() +
-          scrollRef.current.getClientWidth() ===
+          scrollRef.current.getClientWidth() >=
         scrollRef.current.getScrollWidth()
       )
         setShowScrollRight(false);
@@ -86,7 +86,10 @@ export function Legend({
         <Scrollbars
           ref={scrollRef}
           className="scrollbar"
-          hideTracksWhenNotNeeded={true}
+          renderTrackVertical={(props) => <div {...props} className="track" />}
+          renderTrackHorizontal={(props) => (
+            <div {...props} className="track" />
+          )}
           style={{
             height: "29px",
             marginRight: "17px",

src/index.scss

@@ -123,6 +123,7 @@ body {
           scrollbar-width: none;
           scroll-behavior: smooth;
           bottom: -10px;
+          margin-bottom: 16px;
 
           &::-webkit-scrollbar {
             display: none;