Update from WashU. Added some functionality to give user more control through the UI

START.bat

@@ -1,2 +1 @@
-npm run server
-pause
+node -r esbuild-register server/index.ts

components/ConnectionStatus/ConnectionState.tsx

@@ -0,0 +1,114 @@
+import { ListGroupItem, ListGroup, Card, Button, Row, Col } from "react-bootstrap";
+import React, { useState, useEffect } from "react";
+import localConfig from "../../server/config/localconfig.json";
+import { useStore } from "../store";
+import SourceButton from "./SourceButton";
+import ParticipantButton from "./ParticipantButton";
+const ConnectionState = () => {
+  const [connectionStatus, setConnectionStatus] = useState("Not Connected");
+  const [subj, setSubj] = useState(useStore.getState().config.subject);
+  useStore.subscribe((state) => state.config.subject, (st) => setSubj(st));
+
+  const [amp, setAmp] = useState(useStore.getState().config.source);
+  useStore.subscribe((state) => state.config.source, (st) => setAmp(st));
+
+  //present buttons to use based on localconfig setting
+  const showButtons = useStore.getState().config.editable ? "flex" : "none";
+  //const [vis, setVis] = useState(useStore.getState().config.editable);
+
+  useEffect(() => {
+    (async () => {
+      let bci = useStore.getState().bci;
+      await bci.connect(`ws://localhost:3000`);
+
+      //bci.execute("Reset System");
+      console.log("Connected!")
+      bci.stateListen();
+      bci.onStateChange = (e) => setConnectionStatus(e);
+    })();
+  }, []);
+
+  return (
+    <div>
+      <Card className="text-center">
+        <Card.Header>
+          <Card.Title>
+            <h3 className="text-center">System</h3>
+          </Card.Title>
+        </Card.Header>
+
+        <ListGroup>
+          <ListGroupItem
+            id="state-label"
+            className="text-start text-muted bigger"
+          >
+            <Row>
+              <Col><strong>Status: </strong>
+              </Col>
+              <Col>{connectionStatus}
+              </Col>
+            </Row>
+            <Row className="justify-content-center" md="auto" style={{paddingTop: 5, display: showButtons}}>
+              <Button variant="primary" onClick={() => useStore.getState().bci.resetSystem()} className="systemButtons">
+                Reset
+              </Button>
+            </Row>
+          </ListGroupItem>
+          <ListGroupItem
+            id="subjectName"
+            className="text-start text-muted bigger"
+          >
+            <Row>
+              <Col><strong>Participant: </strong>
+              </Col>
+              <Col>{subj}
+              </Col>
+            </Row>
+            <Row className="justify-content-center" md="auto" style={{paddingTop: 5, display: showButtons}}>
+              <ParticipantButton/>
+            </Row>
+          </ListGroupItem>
+          <ListGroupItem
+            id="samplifierName"
+            className="text-start text-muted bigger"
+          >
+            <Row>
+              <Col className="justify-content-start"><strong>Amplifier: </strong>
+              </Col>
+              <Col>{amp}
+              </Col>
+            </Row>
+            <Row className="justify-content-center" md="auto" style={{paddingTop: 5, display: showButtons}}>
+              <SourceButton/>
+            </Row>
+          </ListGroupItem>
+        </ListGroup>
+      </Card>
+    </div>
+  );
+};
+const updateLocalConfig = async () => {
+  try {
+    const paradigmsReq = await fetch(`/api/saveLocalConfig`, {method: "POST", 
+                                                                  headers: {
+                                                                    "Content-Type": "application/json",
+                                                                  },
+                                                                  body: JSON.stringify(useStore.getState().config)});
+    //let pReq = await fetch("/api/paradigms/newGo");
+    console.log("created json")
+    console.log(paradigmsReq);
+    const result = await paradigmsReq.json();
+    console.log("success:", result);
+    } catch (error) {
+      console.error(`error: ${error}`);
+    }
+}
+const UpdateLocalConfig = () => {
+  return (
+    <div>
+
+    </div>
+  );
+}
+
+export { ConnectionState, updateLocalConfig };

components/ConnectionStatus/ParticipantButton.tsx

@@ -0,0 +1,57 @@
+import { Container, Card, ListGroupItem, Button, Modal, Form, FloatingLabel, Row, Col, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
+import React, { useState, useEffect, useContext } from "react";
+import { useStore } from "../store";
+import { updateLocalConfig } from "./ConnectionState";
+
+const SourceButton = (settings) => {
+  const [show, setShow] = useState(false);
+  const [subject, setParticipant] = useState(useStore.getState().config.subject);
+
+  const handleClose = () => {
+    setShow(false);
+  }
+  const handleShow = async () => {
+    console.log(useStore.getState().config.subject);
+    setParticipant(useStore.getState().config.subject)
+    setShow(true);
+  }
+  const handleChange = (e) => {
+    let newSourceName = e.target.value;
+    setParticipant(newSourceName)
+  }
+  const handleSubmit = () => {
+    let newConfig = useStore.getState().config;
+    newConfig.subject = subject;
+    useStore.setState({config : newConfig})
+    updateLocalConfig();
+    setShow(false);
+  }
+
+  return (
+    <>
+    <Button variant="primary" onClick={handleShow} className="systemButtons">Change Participant</Button>   
+    <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Change your participant!</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
+              <Form.Label>New participant name:</Form.Label>
+              <Form.Control onChange={handleChange}/>
+            </Form.Group>
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleSubmit}>
+            Change Name
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+export default SourceButton;

components/ConnectionStatus/SourceButton.tsx

@@ -0,0 +1,113 @@
+import { Container, Card, ListGroupItem, Button, Modal, Form, FloatingLabel, Row, Col, ToggleButton, ToggleButtonGroup } from "react-bootstrap";
+import React, { useState, useEffect, useContext } from "react";
+import { useStore } from "../store";
+import { updateLocalConfig } from "./ConnectionState";
+//import fs from "fs";
+const ParameterDescription = (input) => {
+  const prm = input.prm;
+  const checkPrm = (prm) => {
+    //recursively print object
+    if (prm.constructor === ({}).constructor) {
+      return (<><ParameterDescription prm={prm}/></>)
+    }
+    else {
+      return (<>{prm}</>);
+    }
+  }
+  return (
+    <ul>
+    {Object.values(prm).map((x: any, idx) => (
+      <li key={idx}><strong>{Object.keys(prm)[idx]}: </strong> {checkPrm(x)}</li>
+      ))}
+    </ul>
+  );
+}
+
+const SourceButton = (settings) => {
+  //let setDispTxt = settings.dispSt;
+  const [show, setShow] = useState(false);
+  const [amps, setAmps] = useState({});
+  const [source, setLocalSource] = useState(useStore.getState().config.source);
+
+  const handleClose = () => {
+    setShow(false);
+  }
+  const handleShow = async () => {
+    let ampsReq = await fetch("/api/amplifiers");
+    let ampsRes = await ampsReq.json();
+    setAmps(ampsRes);
+    console.log(useStore.getState().config.source);
+    setLocalSource(useStore.getState().config.source)
+    setShow(true);
+  }
+  const handleClick = (e) => {
+    let newSourceName = e.target.innerHTML;
+    setLocalSource(newSourceName)
+  }
+  // const updateLocalConfig = async () => {
+  //   try {
+  //     const paradigmsReq = await fetch(`/api/saveLocalConfig`, {method: "POST", 
+  //                                                                   headers: {
+  //                                                                     "Content-Type": "application/json",
+  //                                                                   },
+  //                                                                   body: JSON.stringify(useStore.getState().config)});
+  //     //let pReq = await fetch("/api/paradigms/newGo");
+  //     console.log("created json")
+  //     console.log(paradigmsReq);
+  //     const result = await paradigmsReq.json();
+  //     console.log("success:", result);
+  //     } catch (error) {
+  //       console.error(`error: ${error}`);
+  //     }
+  // }
+  const handleSubmit = () => {
+    let newConfig = useStore.getState().config;
+    newConfig.source = source;
+    useStore.setState({config : newConfig})
+    updateLocalConfig();
+    setShow(false);
+  }
+
+  return (
+    <>
+    <Button variant="primary" onClick={handleShow} className="systemButtons">Change Source</Button>   
+    <Modal show={show} onHide={handleClose} size="lg">
+        <Modal.Header closeButton>
+          <Modal.Title>Choose from available amplifiers</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Container>
+            <Row style={{ width: "100%" }}>
+              <Col md="auto">
+                <ToggleButtonGroup type="radio" name="options" defaultValue={source} vertical>
+                  {Array(Object.keys(amps).length)
+                      .fill(0)
+                      .map((x, idx) => (
+                        <ToggleButton 
+                            variant={(useStore.getState().config.source === Object.keys(amps)[idx]) ? "primary": "secondary"} 
+                            onClick={handleClick} key={idx} id={idx.toString()} 
+                            value={Object.keys(amps)[idx]}>
+                          {Object.keys(amps)[idx]}
+                        </ToggleButton>
+                  ))}
+                </ToggleButtonGroup>
+              </Col>
+              <Col>
+                <ParameterDescription id="wrapWords" key="parentPRM" prm={amps[source]}/>
+              </Col>
+            </Row>
+          </Container>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleSubmit}>
+            Change Amplifier
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+export default SourceButton;

components/ExperimentConfiguration.tsx

@@ -0,0 +1,44 @@
+import { useState, useContext, useEffect } from "react";
+import { Row, Col, Navbar, Container, Form, Button } from "react-bootstrap";
+import { ConnectionState } from "./ConnectionStatus/ConnectionState";
+import Toolbox from "./Toolbox";
+import {
+  ReplayParadigms,
+  ReplayTasks,
+} from "./ToolboxComps/Replay";
+import Paradigms from "./Paradigms";
+import Tasks from "./Tasks";
+import { useStore } from "./store";
+import Notes from "./Notes";
+
+export default function ExperimentConfiguration() {
+
+  return (
+      <Container fluid>
+        <Row style={{ width: "100%" }}>
+          <Col sm={3} md={3}>
+            <ConnectionState />
+            <Toolbox />
+          </Col>
+          <Col>
+            {useStore.getState().replayMode ? (
+              <ReplayParadigms />
+            ) : (
+              <Paradigms />
+            )}
+          </Col>
+          <Col>
+            {useStore.getState().replayMode &&
+            useStore.getState().replayTask != null ? (
+              <ReplayTasks />
+            ) : (
+              <Tasks />
+            )}
+          </Col>
+          <Col>
+            <Notes></Notes>
+          </Col>
+        </Row>
+      </Container>
+  );
+}