From 1a2af23524618495ee513e37a3789792b4e49200 Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Tue, 12 Apr 2022 15:13:28 -0400 Subject: [PATCH 01/10] Setup real time messaging and handle errors --- .../prototypes/labgraph_monitor/README.md | 45 +++++++----- .../components/SettingPanel/EdgeSettings.tsx | 68 +++++++++++++++++-- .../src/contexts/WSContext/WSContext.tsx | 39 +++++++---- .../labgraph_monitor/src/mocks/json/demo.json | 60 ++++++++++++---- .../src/mocks/json/simple_viz.json | 20 ++++-- .../src/mocks/json/simple_viz_fixed_rate.json | 20 ++++-- .../src/mocks/json/simple_viz_zmq.json | 29 ++++++-- .../src/mocks/json/simulation.json | 10 ++- .../reducers/graph/common/interfaces/INode.ts | 5 +- 9 files changed, 231 insertions(+), 65 deletions(-) diff --git a/extensions/prototypes/labgraph_monitor/README.md b/extensions/prototypes/labgraph_monitor/README.md index a5b1566b..ca0e8be6 100644 --- a/extensions/prototypes/labgraph_monitor/README.md +++ b/extensions/prototypes/labgraph_monitor/README.md @@ -7,42 +7,35 @@ This extension is an interactive visualization tool to monitor and make real-tim **Prerequisites**: - [Node.js](https://nodejs.org/en/) -- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install) - -Check that node and yarn were properly installed by running the following commands - -``` -node -v -``` - -``` -yarn -v -``` +- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install) (**RECOMMENDED**) **Set up the application** +(!) The following tutorial utilizes **yarn** (recommended) however **npm** can be utilized as well. + 1. Be sure that you are inside **extensions/prototypes/labgraph_monitor** directory ``` -cd extensions/prototypes/labgraph_monitor +labgraph> cd extensions/prototypes/labgraph_monitor +labgraph\extensions\prototypes\labgraph_monitor> ``` 2. Install dependencies by running **yarn** command ``` -yarn +labgraph\extensions\prototypes\labgraph_monitor> yarn ``` 3. Test the application by running the following command ``` -yarn test --watchAll=false +labgraph\extensions\prototypes\labgraph_monitor> yarn test --watchAll=false ``` 4. Run the application ``` -yarn start +labgraph\extensions\prototypes\labgraph_monitor> yarn start ``` (!) The application will be running on **localhost:3000** by default @@ -51,7 +44,7 @@ yarn start -### Mocks: +### Mocks : Mocks are a quick way to get familiar with the user interface. They do not require any connection to the LabGraph Websockets API and provide visualization for most of the existing [LabGraph examples](https://github.com/facebookresearch/labgraph/tree/main/labgraph/examples). @@ -71,7 +64,7 @@ REACT_APP_WS_API="ws://127.0.0.1:9000" (!) LabGraph Websocket server runs on localhost:9000 by default -2. Run Labgraph Websockets server. The following tutorial shows how to run LabGraph Websocket server properly : [tutorial](https://github.com/facebookresearch/labgraph/pull/58/files#diff-247005c77570899ce53f81a83b2a5fe6e7535616cc96564d67378fe7f73dac49) +2. Run Labgraph Websockets server. The following tutorial show how to run LabGraph Websocket server properly : [tutorial](https://github.com/facebookresearch/labgraph/pull/58/files#diff-247005c77570899ce53f81a83b2a5fe6e7535616cc96564d67378fe7f73dac49) 3. Under LabGraph Monitor settings panel click on REALTIME option and click connect. @@ -82,7 +75,7 @@ To see the information related to a specific node or edge, just click on it, the - + @@ -93,3 +86,19 @@ To see the information related to a specific node or edge, just click on it, the **Nodes** : currently when a node is clicked its name will be displayed, However, this feature will be updated in the future to include more information. **Edges** : currently when an edge is clicked the "message_name", "message_fields" and "fields_datatypes" will be displayed, However, this feature will be updated in the future to include more information (E.g: the field value in realtime). + +## Architecture Overview + +This the birdview architecture of the Labgraph Monitor. + + + +This web application is composed of multiple components (redux, pages, mocks, contextx, and components) below is the overview diagram for each: + +### Redux diagram: + + + +### Redux & Edge Settings + + diff --git a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx index be5c4f74..3279287e 100644 --- a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx +++ b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx @@ -14,6 +14,7 @@ import { TableHead, TableRow, Typography, + Button, } from '@mui/material'; import React from 'react'; import { RootState } from '../../redux/store'; @@ -22,7 +23,12 @@ import WS_STATE from '../../redux/reducers/graph/ws/enums/WS_STATE'; interface IMessage { name: string; - fields: { [fieldName: string]: string }; + fields: { + [fieldName: string]: { + type: string; + content: any; + }; + }; } /** @@ -46,6 +52,12 @@ const Edge: React.FC = (): JSX.Element => { selectedEdge.source ] : []; + + const [open, setOpen] = React.useState(false); + + const handleToggle = () => { + setOpen(!open); + }; return ( @@ -62,20 +74,64 @@ const Edge: React.FC = (): JSX.Element => { - {Object.entries(message.fields).map( - ([name, type]) => { + {/* ZMQMessage Edge */} + {Object.entries(message['fields']).map( + (field, index) => { return ( - + - {name} + {field[0]} - {type} + {field[1].type} ); } )} + + + {Object.entries(message['fields']).map( + (field, index) => { + return ( + + {open && ( + + {field[0]} + + )} + + {!open ? null : connection === + WS_STATE.CONNECTED ? ( + + {field[1].content} + + ) : ( + + Hello + {/* {mockData.join(' ')} */} + + )} + + ); + } + )}
NodeEdgeedge
diff --git a/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx b/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx index c640a8ff..b8e806c7 100644 --- a/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx +++ b/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx @@ -34,24 +34,37 @@ const WSContextProvider: React.FC = ({ children }): JSX.Element => { const dispatch = useDispatch(); useEffect(() => { - if (!process.env.REACT_APP_WS_API) return; + console.log('test'); + if (!process.env.REACT_APP_WS_API) { + alert( + 'Error: .env.local file does not exist, check README.md on how to create it' + ); + dispatch(setConnection(WS_STATE.DISCONNECTED)); + // dispatch to be disocnnected disconnect + return; + } switch (connection) { case WS_STATE.IS_CONNECTING: - clientRef.current = new W3CWebSocket( - process.env.REACT_APP_WS_API as string - ); + try { + console.log('connect - test'); + clientRef.current = new W3CWebSocket( + process.env.REACT_APP_WS_API as string + ); - clientRef.current.onopen = () => { - clientRef.current?.send(JSON.stringify(startStreamRequest)); - dispatch(setConnection(WS_STATE.CONNECTED)); - }; - - clientRef.current.onerror = (err: any) => { - dispatch(setConnection(WS_STATE.DISCONNECTED)); - }; + clientRef.current.onopen = () => { + clientRef.current?.send( + JSON.stringify(startStreamRequest) + ); + dispatch(setConnection(WS_STATE.CONNECTED)); + }; + clientRef.current.onerror = (err: any) => { + dispatch(setConnection(WS_STATE.DISCONNECTED)); + }; + } catch (error) { + // catch error + } break; - case WS_STATE.CONNECTED: if (!clientRef.current) return; clientRef.current.onmessage = (message: any) => { diff --git a/extensions/prototypes/labgraph_monitor/src/mocks/json/demo.json b/extensions/prototypes/labgraph_monitor/src/mocks/json/demo.json index 868386e2..c86583f8 100644 --- a/extensions/prototypes/labgraph_monitor/src/mocks/json/demo.json +++ b/extensions/prototypes/labgraph_monitor/src/mocks/json/demo.json @@ -16,8 +16,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931422.141309 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] @@ -29,8 +35,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931422.141309 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] @@ -42,8 +54,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931422.141309 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] @@ -55,8 +73,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931422.141309 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ], @@ -64,8 +88,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931422.141309 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ], @@ -73,8 +103,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931422.141309 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] diff --git a/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz.json b/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz.json index cb09e684..d8ca8be0 100644 --- a/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz.json +++ b/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz.json @@ -13,8 +13,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1647047794.474803 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] @@ -29,8 +35,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1647047794.474803 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] diff --git a/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_fixed_rate.json b/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_fixed_rate.json index efdd93bf..88d93e80 100644 --- a/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_fixed_rate.json +++ b/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_fixed_rate.json @@ -13,8 +13,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644930955.5364213 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] @@ -29,8 +35,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644930955.5364213 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] diff --git a/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_zmq.json b/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_zmq.json index fd54835a..9f3e4c8c 100644 --- a/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_zmq.json +++ b/extensions/prototypes/labgraph_monitor/src/mocks/json/simple_viz_zmq.json @@ -13,8 +13,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931059.3961816 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] @@ -29,7 +35,14 @@ { "name": "ZMQMessage", "fields": { - "data": "bytes" + "timestamp": { + "type":"float", + "content": 1644931059.3961816 + }, + "data": { + "type": "bytes", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] @@ -41,8 +54,14 @@ { "name": "RandomMessage", "fields": { - "timestamp": "float", - "data": "ndarray" + "timestamp": { + "type":"float", + "content": 1644931059.3961816 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] diff --git a/extensions/prototypes/labgraph_monitor/src/mocks/json/simulation.json b/extensions/prototypes/labgraph_monitor/src/mocks/json/simulation.json index 87856e25..22bd68e6 100644 --- a/extensions/prototypes/labgraph_monitor/src/mocks/json/simulation.json +++ b/extensions/prototypes/labgraph_monitor/src/mocks/json/simulation.json @@ -16,8 +16,14 @@ { "name": "SimulationMessage", "fields": { - "timestamp": "ndarray", - "daub_data": "ndarray" + "timestamp": { + "type":"ndarray", + "content": 1644931259.3396878 + }, + "data": { + "type": "ndarray", + "content": [0.77135353, 0.61299748, 0.34146919, 0.46154968, 0.19577749] + } } } ] diff --git a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/common/interfaces/INode.ts b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/common/interfaces/INode.ts index 1e4e5889..aaf63e63 100644 --- a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/common/interfaces/INode.ts +++ b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/common/interfaces/INode.ts @@ -10,7 +10,10 @@ interface INode { [upstream: string]: Array<{ name: string; fields: { - [fieldName: string]: string; + [fieldName: string]: { + type: string; + content: any; + }; }; }>; }; From 41cd833d7d1d0942858f77b5301e9ca7cea01bc9 Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Thu, 14 Apr 2022 13:29:45 -0400 Subject: [PATCH 02/10] Mock Realtime Data --- .../components/SettingPanel/EdgeSettings.tsx | 28 +++++++++++++++---- .../reducers/graph/mock/interfaces/IMock.ts | 1 + .../redux/reducers/graph/mock/mockReducer.ts | 8 +++++- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx index 3279287e..9e5d6707 100644 --- a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx +++ b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx @@ -16,10 +16,11 @@ import { Typography, Button, } from '@mui/material'; -import React from 'react'; +import React, { useEffect } from 'react'; import { RootState } from '../../redux/store'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import WS_STATE from '../../redux/reducers/graph/ws/enums/WS_STATE'; +import { setMockRealtimeData } from '../../redux/reducers/graph/mock/mockReducer'; interface IMessage { name: string; @@ -43,7 +44,9 @@ const Edge: React.FC = (): JSX.Element => { (state: RootState) => state.ws ); const { mockGraph } = useSelector((state: RootState) => state.mock); - + const mockData = useSelector( + (state: RootState) => state.mock.mockRealtimeData + ); const graph = connection === WS_STATE.CONNECTED ? realtimeGraph : mockGraph; const messages: IMessage[] = @@ -58,6 +61,22 @@ const Edge: React.FC = (): JSX.Element => { const handleToggle = () => { setOpen(!open); }; + // creating mock data, check mockReducer.ts, IMock.ts and EdgeSettings.tsx for future updates + const dispatch = useDispatch(); + + useEffect(() => { + const id = setInterval(() => { + const date = Date.now(); + + dispatch( + setMockRealtimeData([date, date % 10, date * 3, date / 4]) + ); + }, 100); + + return () => { + clearInterval(id); + }; + }, []); return ( @@ -124,8 +143,7 @@ const Edge: React.FC = (): JSX.Element => { 'break-word', }} > - Hello - {/* {mockData.join(' ')} */} + {mockData.join(' ')} )} diff --git a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts index 6d6df85e..f407c22a 100644 --- a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts +++ b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts @@ -8,6 +8,7 @@ import IGraph from '../../common/interfaces/IGraph'; interface IMock { mockGraph: IGraph; + mockRealtimeData: any; } export default IMock; diff --git a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/mockReducer.ts b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/mockReducer.ts index ffe996de..d7a335c7 100644 --- a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/mockReducer.ts +++ b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/mockReducer.ts @@ -11,6 +11,7 @@ import { selectMock } from '../../../../mocks'; const initialState: IMock = { mockGraph: {} as IGraph, + mockRealtimeData: [Date.now()], }; export const mockSlice = createSlice({ @@ -30,9 +31,14 @@ export const mockSlice = createSlice({ copyRealtimeGraph: (state, action: PayloadAction) => { state.mockGraph = action.payload; }, + + setMockRealtimeData: (state, action: PayloadAction) => { + state.mockRealtimeData = action.payload; + }, }, }); -export const { copyRealtimeGraph, setMockGraph } = mockSlice.actions; +export const { copyRealtimeGraph, setMockGraph, setMockRealtimeData } = + mockSlice.actions; export default mockSlice.reducer; From fd8200f5ad5c60908327532bf9e70b29fb0fb7ad Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Thu, 14 Apr 2022 15:30:24 -0400 Subject: [PATCH 03/10] UI: Make Panel Resizable --- .../components/SettingPanel/SettingPanel.tsx | 65 +++++++++++++++++-- 1 file changed, 61 insertions(+), 4 deletions(-) diff --git a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx index 2bc3b7a9..5f595941 100644 --- a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx +++ b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx @@ -13,6 +13,7 @@ import { AlignHorizontalLeftOutlined, AlignVerticalTopOutlined, } from '@mui/icons-material'; +import React, { useCallback } from 'react'; import SettingTabs from './SettingTabs'; import { makeStyles } from '@mui/styles'; import { useUIContext } from '../../contexts'; @@ -20,8 +21,9 @@ import { RootState } from '../../redux/store'; import { useSelector, useDispatch } from 'react-redux'; import { setPanel } from '../../redux/reducers/config/configReducer'; -const PANEL_WIDTH = 280; - +export const defaultPanelWidth = 280; +const minPanelWidth = defaultPanelWidth; +const maxPanelWidth = 600; const useStyles = makeStyles({ root: { display: 'flex', @@ -41,10 +43,10 @@ const useStyles = makeStyles({ }, settingPanel: { - width: PANEL_WIDTH, + width: defaultPanelWidth, flexShrink: 0, '& .MuiDrawer-paper': { - width: PANEL_WIDTH, + width: defaultPanelWidth, }, }, @@ -55,6 +57,30 @@ const useStyles = makeStyles({ alignItem: 'center', padding: '2px 4px 2px 4px', }, + dragger_light: { + width: '5px', + cursor: 'ew-resize', + padding: '4px 0 0', + borderTop: '1px solid #ddd', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + zIndex: '100', + backgroundColor: '#f4f7f9', + }, + dragger_dark: { + width: '5px', + cursor: 'ew-resize', + padding: '4px 0 0', + borderTop: '1px solid #111827', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + zIndex: '100', + backgroundColor: '#1f2b3c', + }, }); /** @@ -68,7 +94,23 @@ const SettingPanel: React.FC = (): JSX.Element => { const { mode, layout, toggleMode, toggleLayout } = useUIContext(); const { panelOpen } = useSelector((state: RootState) => state.config); const dispatch = useDispatch(); + const [panelWidth, setPanelWidth] = React.useState(defaultPanelWidth); + const handleMouseDown = (e: any) => { + document.addEventListener('mouseup', handleMouseUp, true); + document.addEventListener('mousemove', handleMouseMove, true); + }; + const handleMouseUp = () => { + document.removeEventListener('mouseup', handleMouseUp, true); + document.removeEventListener('mousemove', handleMouseMove, true); + }; + const handleMouseMove = useCallback((e) => { + const newWidth = + document.body.offsetLeft + document.body.offsetWidth - e.clientX; + if (newWidth > minPanelWidth && newWidth < maxPanelWidth) { + setPanelWidth(newWidth); + } + }, []); return ( @@ -96,6 +138,7 @@ const SettingPanel: React.FC = (): JSX.Element => { className={classes.settingPanel} variant="persistent" anchor="right" + PaperProps={{ style: { width: panelWidth } }} open={panelOpen} > @@ -106,6 +149,20 @@ const SettingPanel: React.FC = (): JSX.Element => { + + {mode === 'light' ? ( +
handleMouseDown(e)} + className={classes.dragger_light} + /> + ) : ( +
handleMouseDown(e)} + className={classes.dragger_dark} + /> + )} Date: Thu, 14 Apr 2022 15:32:17 -0400 Subject: [PATCH 04/10] Update Error Alert --- .../labgraph_monitor/src/contexts/WSContext/WSContext.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx b/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx index b8e806c7..8da012ca 100644 --- a/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx +++ b/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx @@ -36,9 +36,7 @@ const WSContextProvider: React.FC = ({ children }): JSX.Element => { useEffect(() => { console.log('test'); if (!process.env.REACT_APP_WS_API) { - alert( - 'Error: .env.local file does not exist, check README.md on how to create it' - ); + alert('Error: Undefined Environment Variable: REACT_APP_WS_API'); dispatch(setConnection(WS_STATE.DISCONNECTED)); // dispatch to be disocnnected disconnect return; @@ -46,7 +44,6 @@ const WSContextProvider: React.FC = ({ children }): JSX.Element => { switch (connection) { case WS_STATE.IS_CONNECTING: try { - console.log('connect - test'); clientRef.current = new W3CWebSocket( process.env.REACT_APP_WS_API as string ); From 12256a43e5868b58f862fd68656a719126a91fe7 Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Thu, 14 Apr 2022 15:34:22 -0400 Subject: [PATCH 05/10] Update README --- extensions/prototypes/labgraph_monitor/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/extensions/prototypes/labgraph_monitor/README.md b/extensions/prototypes/labgraph_monitor/README.md index ca0e8be6..48fc7a9d 100644 --- a/extensions/prototypes/labgraph_monitor/README.md +++ b/extensions/prototypes/labgraph_monitor/README.md @@ -9,6 +9,16 @@ This extension is an interactive visualization tool to monitor and make real-tim - [Node.js](https://nodejs.org/en/) - [Yarn](https://classic.yarnpkg.com/lang/en/docs/install) (**RECOMMENDED**) +Check that node and yarn were properly installed by running the following commands + +``` +node -v +``` + +``` +yarn -v +``` + **Set up the application** (!) The following tutorial utilizes **yarn** (recommended) however **npm** can be utilized as well. From 2aaaa052b5fb6dc4b1d163d0e99ddbe352d556ec Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Thu, 14 Apr 2022 15:43:42 -0400 Subject: [PATCH 06/10] UI: adjust Tabs size --- .../src/components/SettingPanel/SettingTabs.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingTabs.tsx b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingTabs.tsx index 1ab14f92..412d5cf7 100644 --- a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingTabs.tsx +++ b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingTabs.tsx @@ -18,6 +18,9 @@ const useStyles = makeStyles({ root: { width: '100%', }, + tab: { + width: '33%', + }, }); /** @@ -44,9 +47,9 @@ const SettingTabs: React.FC = (): JSX.Element => { } data-testid="tab-list" > - - - + + + From ab92ab0c69338f4c8b5810442b079319f0a99a80 Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Mon, 18 Apr 2022 14:48:59 -0400 Subject: [PATCH 07/10] Fix lint issues --- .../src/components/SettingPanel/EdgeSettings.tsx | 5 +++-- .../labgraph_monitor/src/contexts/WSContext/WSContext.tsx | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx index 9e5d6707..607822ef 100644 --- a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx +++ b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx @@ -76,7 +76,7 @@ const Edge: React.FC = (): JSX.Element => { return () => { clearInterval(id); }; - }, []); + }, [dispatch]); return ( @@ -132,7 +132,8 @@ const Edge: React.FC = (): JSX.Element => { 'break-word', }} > - {field[1].content} + {field[1].content + + ', '} ) : ( = ({ children }): JSX.Element => { const dispatch = useDispatch(); useEffect(() => { - console.log('test'); if (!process.env.REACT_APP_WS_API) { alert('Error: Undefined Environment Variable: REACT_APP_WS_API'); dispatch(setConnection(WS_STATE.DISCONNECTED)); From 8751c8058f074330ff486a98f0e88a38fd1e6a5a Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Thu, 21 Apr 2022 15:50:49 -0400 Subject: [PATCH 08/10] Code Review implemetation --- .../prototypes/labgraph_monitor/README.md | 6 +-- .../components/SettingPanel/EdgeSettings.tsx | 37 ++++++----------- .../components/SettingPanel/SettingPanel.tsx | 41 +++++++++---------- .../reducers/graph/common/interfaces/INode.ts | 2 +- .../reducers/graph/mock/interfaces/IMock.ts | 2 +- 5 files changed, 36 insertions(+), 52 deletions(-) diff --git a/extensions/prototypes/labgraph_monitor/README.md b/extensions/prototypes/labgraph_monitor/README.md index 48fc7a9d..75b471ee 100644 --- a/extensions/prototypes/labgraph_monitor/README.md +++ b/extensions/prototypes/labgraph_monitor/README.md @@ -54,7 +54,7 @@ labgraph\extensions\prototypes\labgraph_monitor> yarn start -### Mocks : +### Mocks: Mocks are a quick way to get familiar with the user interface. They do not require any connection to the LabGraph Websockets API and provide visualization for most of the existing [LabGraph examples](https://github.com/facebookresearch/labgraph/tree/main/labgraph/examples). @@ -74,7 +74,7 @@ REACT_APP_WS_API="ws://127.0.0.1:9000" (!) LabGraph Websocket server runs on localhost:9000 by default -2. Run Labgraph Websockets server. The following tutorial show how to run LabGraph Websocket server properly : [tutorial](https://github.com/facebookresearch/labgraph/pull/58/files#diff-247005c77570899ce53f81a83b2a5fe6e7535616cc96564d67378fe7f73dac49) +2. Run Labgraph Websockets server. The following tutorial shows how to run LabGraph Websocket server properly: [tutorial](https://github.com/facebookresearch/labgraph/pull/58/files#diff-247005c77570899ce53f81a83b2a5fe6e7535616cc96564d67378fe7f73dac49) 3. Under LabGraph Monitor settings panel click on REALTIME option and click connect. @@ -99,7 +99,7 @@ To see the information related to a specific node or edge, just click on it, the ## Architecture Overview -This the birdview architecture of the Labgraph Monitor. +This is a bird's-eye view of the architecture of Labgraph Monitor. labgraph monitor's architecture overview diff --git a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx index 607822ef..cb086f68 100644 --- a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx +++ b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/EdgeSettings.tsx @@ -48,6 +48,7 @@ const Edge: React.FC = (): JSX.Element => { (state: RootState) => state.mock.mockRealtimeData ); const graph = connection === WS_STATE.CONNECTED ? realtimeGraph : mockGraph; + const [open, setOpen] = React.useState(false); const messages: IMessage[] = graph && selectedEdge.target @@ -55,9 +56,6 @@ const Edge: React.FC = (): JSX.Element => { selectedEdge.source ] : []; - - const [open, setOpen] = React.useState(false); - const handleToggle = () => { setOpen(!open); }; @@ -73,9 +71,7 @@ const Edge: React.FC = (): JSX.Element => { ); }, 100); - return () => { - clearInterval(id); - }; + return () => clearInterval(id); }, [dispatch]); return ( @@ -94,7 +90,7 @@ const Edge: React.FC = (): JSX.Element => { {/* ZMQMessage Edge */} - {Object.entries(message['fields']).map( + {Object.entries(message.fields).map( (field, index) => { return ( @@ -112,7 +108,7 @@ const Edge: React.FC = (): JSX.Element => { {open ? 'Show less' : 'Show more'} - {Object.entries(message['fields']).map( + {Object.entries(message.fields).map( (field, index) => { return ( @@ -121,21 +117,7 @@ const Edge: React.FC = (): JSX.Element => { {field[0]} )} - - {!open ? null : connection === - WS_STATE.CONNECTED ? ( - - {field[1].content + - ', '} - - ) : ( + {open ? ( { 'break-word', }} > - {mockData.join(' ')} + {connection === + WS_STATE.CONNECTED + ? `${field[1].content}, ` + : mockData.join( + ' ' + )} - )} + ) : null} ); } diff --git a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx index 5f595941..24b9883a 100644 --- a/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx +++ b/extensions/prototypes/labgraph_monitor/src/components/SettingPanel/SettingPanel.tsx @@ -12,6 +12,7 @@ import { SettingsApplicationsRounded, AlignHorizontalLeftOutlined, AlignVerticalTopOutlined, + Mode, } from '@mui/icons-material'; import React, { useCallback } from 'react'; import SettingTabs from './SettingTabs'; @@ -21,9 +22,9 @@ import { RootState } from '../../redux/store'; import { useSelector, useDispatch } from 'react-redux'; import { setPanel } from '../../redux/reducers/config/configReducer'; -export const defaultPanelWidth = 280; -const minPanelWidth = defaultPanelWidth; -const maxPanelWidth = 600; +export const DEFAULT_PANEL_WIDTH = 280; +export const MIN_PANEL_WIDTH = 280; +export const MAX_PANEL_WIDTH = 600; const useStyles = makeStyles({ root: { display: 'flex', @@ -43,10 +44,10 @@ const useStyles = makeStyles({ }, settingPanel: { - width: defaultPanelWidth, + width: DEFAULT_PANEL_WIDTH, flexShrink: 0, '& .MuiDrawer-paper': { - width: defaultPanelWidth, + width: DEFAULT_PANEL_WIDTH, }, }, @@ -94,9 +95,8 @@ const SettingPanel: React.FC = (): JSX.Element => { const { mode, layout, toggleMode, toggleLayout } = useUIContext(); const { panelOpen } = useSelector((state: RootState) => state.config); const dispatch = useDispatch(); - const [panelWidth, setPanelWidth] = React.useState(defaultPanelWidth); - - const handleMouseDown = (e: any) => { + const [panelWidth, setPanelWidth] = React.useState(DEFAULT_PANEL_WIDTH); + const handleMouseDown = () => { document.addEventListener('mouseup', handleMouseUp, true); document.addEventListener('mousemove', handleMouseMove, true); }; @@ -107,7 +107,7 @@ const SettingPanel: React.FC = (): JSX.Element => { const handleMouseMove = useCallback((e) => { const newWidth = document.body.offsetLeft + document.body.offsetWidth - e.clientX; - if (newWidth > minPanelWidth && newWidth < maxPanelWidth) { + if (newWidth > MIN_PANEL_WIDTH && newWidth < MAX_PANEL_WIDTH) { setPanelWidth(newWidth); } }, []); @@ -150,19 +150,16 @@ const SettingPanel: React.FC = (): JSX.Element => { - {mode === 'light' ? ( -
handleMouseDown(e)} - className={classes.dragger_light} - /> - ) : ( -
handleMouseDown(e)} - className={classes.dragger_dark} - /> - )} +
handleMouseDown()} + className={ + mode === 'light' + ? classes.dragger_light + : classes.dragger_dark + } + /> + ; diff --git a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts index f407c22a..72cac8da 100644 --- a/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts +++ b/extensions/prototypes/labgraph_monitor/src/redux/reducers/graph/mock/interfaces/IMock.ts @@ -8,7 +8,7 @@ import IGraph from '../../common/interfaces/IGraph'; interface IMock { mockGraph: IGraph; - mockRealtimeData: any; + mockRealtimeData: number[]; } export default IMock; From 330c7634e4be9e79089b64efdc8b81297b2f7086 Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Thu, 21 Apr 2022 15:56:02 -0400 Subject: [PATCH 09/10] Rebase Doc with latest changes PR64 --- extensions/prototypes/labgraph_monitor/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/extensions/prototypes/labgraph_monitor/README.md b/extensions/prototypes/labgraph_monitor/README.md index 75b471ee..698aefca 100644 --- a/extensions/prototypes/labgraph_monitor/README.md +++ b/extensions/prototypes/labgraph_monitor/README.md @@ -74,7 +74,8 @@ REACT_APP_WS_API="ws://127.0.0.1:9000" (!) LabGraph Websocket server runs on localhost:9000 by default -2. Run Labgraph Websockets server. The following tutorial shows how to run LabGraph Websocket server properly: [tutorial](https://github.com/facebookresearch/labgraph/pull/58/files#diff-247005c77570899ce53f81a83b2a5fe6e7535616cc96564d67378fe7f73dac49) +2. Run Labgraph Websockets server. + `python3 extensions/yaml_support/labgraph_monitor/examples/labgraph_monitor_example.py` 3. Under LabGraph Monitor settings panel click on REALTIME option and click connect. From 820f365bbb3cb8e8d07dfc05c256aa8cf5608782 Mon Sep 17 00:00:00 2001 From: Fatima Zahra Chriha Date: Fri, 22 Apr 2022 15:19:49 -0400 Subject: [PATCH 10/10] Alert test & error catch --- .../labgraph_monitor/src/contexts/WSContext/WSContext.tsx | 2 +- extensions/prototypes/labgraph_monitor/src/setupTests.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx b/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx index 53a4056e..a49b6bea 100644 --- a/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx +++ b/extensions/prototypes/labgraph_monitor/src/contexts/WSContext/WSContext.tsx @@ -58,7 +58,7 @@ const WSContextProvider: React.FC = ({ children }): JSX.Element => { dispatch(setConnection(WS_STATE.DISCONNECTED)); }; } catch (error) { - // catch error + dispatch(setConnection(WS_STATE.DISCONNECTED)); } break; case WS_STATE.CONNECTED: diff --git a/extensions/prototypes/labgraph_monitor/src/setupTests.ts b/extensions/prototypes/labgraph_monitor/src/setupTests.ts index 018b9ca0..f2426270 100644 --- a/extensions/prototypes/labgraph_monitor/src/setupTests.ts +++ b/extensions/prototypes/labgraph_monitor/src/setupTests.ts @@ -9,3 +9,6 @@ import '@testing-library/jest-dom/extend-expect'; import ResizeObserver from 'resize-observer-polyfill'; global.ResizeObserver = ResizeObserver; +global.alert = (content: string) => { + console.log('Window alert mock - ', content); +};