feat(simulator): elapsed simulation time

src/components/CodeViewer.js

@@ -6,14 +6,13 @@ import withStyles from "@mui/styles/withStyles";
 import MuiAccordion from "@mui/material/Accordion";
 import MuiAccordionSummary from "@mui/material/AccordionSummary";
 import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import IconButton from "@mui/material/IconButton";
-import { faPlay, faStop } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Card } from "@mui/material";
 import * as Blockly from "blockly";
 import { default as MonacoEditor } from "@monaco-editor/react";
-import { startSimulator, stopSimulator } from "../actions/simulatorActions";
-import SimulatorFlow from "./Simulator";
+import { faMicrochip } from "@fortawesome/free-solid-svg-icons";
+
+import Simulator from "./Simulator";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
 const withWidth = () => (WrappedComponent) => (props) => (
@@ -121,16 +120,16 @@ class CodeViewer extends Component {
           // onChange={this.onChange}
         >
           <AccordionSummary>
-            {/* <b
+            <div
               style={{
-                fontSize: "20px",
-                marginRight: "5px",
-                width: "35px",
+                display: "flex",
+                gap: "1rem",
+                alignItems: "center",
               }}
             >
-              Simulator Icon
-            </b> */}
-            <div style={{ margin: "auto 5px 2px 0px" }}>Simulator</div>
+              <FontAwesomeIcon icon={faMicrochip} size="lg" />
+              <div style={{ margin: "auto 5px 2px 0px" }}>Simulator</div>
+            </div>
           </AccordionSummary>
           <AccordionDetails
             style={{
@@ -139,19 +138,7 @@ class CodeViewer extends Component {
               backgroundColor: "white",
             }}
           >
-            {this.props.isSimulatorRunning ? (
-              <IconButton onClick={this.props.stopSimulator}>
-                <FontAwesomeIcon icon={faStop} />
-              </IconButton>
-            ) : (
-              <IconButton onClick={this.props.startSimulator}>
-                <FontAwesomeIcon icon={faPlay} />
-              </IconButton>
-            )}
-
-            <br />
-
-            <SimulatorFlow modules={this.props.modules} />
+            <Simulator />
           </AccordionDetails>
         </Accordion>
         <Accordion
@@ -239,22 +226,12 @@ CodeViewer.propTypes = {
   arduino: PropTypes.string.isRequired,
   xml: PropTypes.string.isRequired,
   tooltip: PropTypes.string.isRequired,
-  simulator: PropTypes.string.isRequired,
-  startSimulator: PropTypes.func.isRequired,
-  stopSimulator: PropTypes.func.isRequired,
-  isSimulatorRunning: PropTypes.bool.isRequired,
-  modules: PropTypes.array.isRequired,
 };
 
 const mapStateToProps = (state) => ({
   arduino: state.workspace.code.arduino,
   xml: state.workspace.code.xml,
   tooltip: state.workspace.code.tooltip,
-  simulator: state.simulator.code,
-  isSimulatorRunning: state.simulator.isRunning,
-  modules: state.simulator.modules,
 });
 
-export default connect(mapStateToProps, { startSimulator, stopSimulator })(
-  withWidth()(CodeViewer),
-);
+export default connect(mapStateToProps, null)(withWidth()(CodeViewer));

src/components/Simulator/flow.js

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, memo } from "react";
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Connection,
+} from "@xyflow/react";
+import SenseBoxMCUS2 from "./nodes/mcu-s2";
+import "@xyflow/react/dist/style.css";
+import HDC1080 from "./nodes/hdc1080";
+import Display from "./nodes/display";
+
+const nodeTypes = {
+  board: SenseBoxMCUS2,
+  senseBox_hdc1080: HDC1080,
+  senseBox_display: Display,
+};
+
+const initialNodes = [
+  {
+    id: "b_0",
+    type: "board",
+    position: { x: 400, y: 100 },
+  },
+];
+
+const initialEdges = [
+  // { id: "e1-2", source: "1", target: "2" },
+  // { id: "e1-3", source: "1", target: "3" },
+  // { id: "e1-4", source: "1", target: "4" },
+  // { id: "e3-5", source: "3", target: "5" },
+  // { id: "e2-5", source: "2", target: "5" },
+  // { id: "e4-5", source: "4", target: "5" },
+];
+
+const SimulatorFlow = (props) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  useEffect(() => {
+    // calculate new edges
+    const newEdges = [];
+    nodes.forEach((node) => {
+      if (node.type === "board") {
+        props.modules.forEach((module, index) => {
+          newEdges.push({
+            id: `e${node.id}-${index}`,
+            source: node.id,
+            target: `m_${index}`,
+          });
+        });
+      }
+    });
+
+    setEdges([...initialEdges, ...newEdges]);
+  }, [nodes]);
+
+  useEffect(() => {
+    const newNodes = props.modules
+      .map((module, index) => {
+        if (nodes.map((n) => n.type).includes(module)) {
+          return nodes.find((n) => n.type == module);
+        }
+        return {
+          id: `m_${index.toString()}`,
+          type: module,
+          position: { x: 200 + index * 200, y: 400 },
+        };
+      })
+      .filter((e) => e);
+
+    setNodes([initialNodes[0], ...newNodes]);
+  }, [props.modules]);
+
+  const onConnect = useCallback(
+    (params) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges],
+  );
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+        connectionMode="loose"
+      >
+        <Background />
+        <Controls />
+        {/* <MiniMap /> */}
+      </ReactFlow>
+    </div>
+  );
+};
+
+export default memo(SimulatorFlow);