First version of solid monitor gui

www/src/App.js

@@ -2,7 +2,7 @@ import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
 
 import React from 'react';
-import {Badge,Button,FormControl,Nav,Form,Container,Navbar, Tab, Tabs} from 'react-bootstrap';
+import {Badge,Nav,Form,Container,Navbar, Tab, Tabs} from 'react-bootstrap';
 
 import Display from './Display.js'
 
@@ -14,63 +14,17 @@ class App extends React.Component {
       control: {
         live: this.props.live,
         jsroot: this.props.jsroot,
-        reference: false,
         wasLive: !this.props.live
       },
-      run: {
-        solid: {
-          active: -1,
-          live: -1,
-          finished: false
-        }/*,                //should this be vtpCherenkov?
-        cherenkov: {
-          active: -1,
-          live: -1,
-          finished: false
-	  }*/
-      },
       activeTab: 0,
       activeScreens: this.props.displayInfo.map(
         () => {return {sectionIdx: 0, screenIdx: 0};}),
       previousScreens: this.props.displayInfo.map(
         () => {return {sectionIdx: 0, screenIdx: 0};}),
     };
-    this.inputRun = {
-	// hms: null,
-	solid: null
-	//cherenkov: null
-    };
     if (this.state.control.live) {
       this.startLive();
     }
-    this.setLatestRun();
-    //this.inputRun = {hms: null, shms: null};
-    this.inputRun = {solid:null};  // {solid: null, cherenkov: null};
-  }
-
-  async setLatestRun() {
-    let newRunInfo = {};
-    let haveChange = false;
-    await Promise.all(Object.entries(this.state.run).map(async ([spec, info]) => {
-      const response = await fetch('http://cdaql1.jlab.org:9100/online/latest/' + spec ); //change where it is fetching from, need to remove spectrometer 
-      //const response = await fetch('http://cdaql1.jlab.org:5000/run/latest/' + spec + '/run_number');
-      const run = await response.json();
-      const daq_resp = await fetch('http://cdaql1.jlab.org:9100/online/latest/' + '/active');
-	//const daq_resp = await fetch('http://cdaql1.jlab.org:5000/run/latest/' + spec + '/active');
-      const daq_finished = !(await daq_resp.json());
-      if (run !== info.active) {
-        haveChange = true;
-      }
-      newRunInfo[spec] = info;
-      newRunInfo[spec].active = run;
-      newRunInfo[spec].finished = daq_finished;
-      if (run > info.live) {
-        newRunInfo[spec].live = run;
-      }
-    }));
-    if (haveChange) {
-      this.setState({run: newRunInfo});
-    }
   }
 
   // Select a new section/screen for a particular page
@@ -96,7 +50,6 @@ class App extends React.Component {
   // Update the state, triggers a re-render
   tick() {
     console.log('tick');
-    this.setLatestRun();
     this.setState({
       date: new Date(),
       previousScreens: JSON.parse(JSON.stringify(this.state.activeScreens))
@@ -118,64 +71,22 @@ class App extends React.Component {
   // start live mode, where we update every second (1000ms)
   startLive() {
     this.startTimer();
-    this.setLatestRun();
+    let control = {
+        live: true,
+        jsroot: this.props.jsroot,
+        wasLive: this.props.live
+      };
+    this.setState({control: control});
   }
   // stop live mode
   stopLive() {
     this.stopTimer();
-    if (this.state.control.reference) {
-      this.loadReferenceRun();
-    } else {
-      this.loadInputRun();
-    }
-  }
-  loadInputRun() {
-    this.stopTimer();
-    let newRunInfo = this.state.run;
-    let control = this.state.control;
-    Object.entries(newRunInfo).forEach(([spec, info]) => {
-      if (control.reference) {
-        newRunInfo[spec].active = this.inputRun[spec] > 1000 ? this.inputRun[spec] : info.live;
-      } else {
-        newRunInfo[spec].active = this.inputRun[spec] > 1000 ? this.inputRun[spec] : info.active;
-      }
-    });
-    control.wasLive = control.live;
-    control.live = false;
-    control.reference = false;
-    this.setState({
-      control: control,
-      previousScreens: JSON.parse(JSON.stringify(this.state.activeScreens))
-    });
-  }
-  loadReferenceRun() {
-    this.stopTimer();
-    let newRunInfo = this.state.run;
-    Object.entries(newRunInfo).forEach(([spec, info]) => {
-        newRunInfo[spec].active = this.props.refRun[spec];
-    });
-    let control = this.state.control;
-    control.wasLive = control.live;
-    control.live = false;
-    control.reference = true;
-    this.setState({
-      control: control,
-      previousScreens: JSON.parse(JSON.stringify(this.state.activeScreens))
-    });
-  }
-  clearReferenceRun() {
-    if (this.state.control.wasLive) {
-      let control = this.state.control;
-      control.live = control.wasLive;
-      control.wasLive = false;
-      this.setLatestRun();
-      control.reference = false;
-      this.setState({
-        control: control,
-      });
-    } else {
-      this.loadInputRun();
-    }
+    let control = {
+        live: false,
+        jsroot: this.props.jsroot,
+        wasLive: this.props.live
+      };
+    this.setState({control: control});
   }
 
   isLive() {
@@ -192,7 +103,6 @@ class App extends React.Component {
           <Display 
               display={display}
               control={this.state.control}
-              run={this.state.run}
               visible={visible}
               active={this.state.activeScreens[index]}
               previous={this.state.previousScreens[index]}
@@ -200,55 +110,26 @@ class App extends React.Component {
       </Tab>;
     });
 
-    let runBadgeColor = {}
-    Object.entries(this.state.run).map(([spec, info]) => {
-      runBadgeColor[spec] = 'primary'
-      if (this.state.control.live) {
-        if (info.finished === true) {
-          runBadgeColor[spec] = 'danger';
-        } else {
-          runBadgeColor[spec] = 'success';
-        }
-      } else if (this.state.control.reference) {
-        runBadgeColor[spec] = 'warning';
-      }
-      return runBadgeColor[spec];
-    });
-
-    let referenceButton = (<Button variant="outline-warning" onClick={e => this.loadReferenceRun()} className="ref-btn">Load Reference </Button>);
-    if (this.state.control.reference && !this.state.control.live) {
-      referenceButton = (<Button variant="outline-danger" onClick={e => this.clearReferenceRun()} className="ref-btn">Clear Reference</Button>);
+    let runBadgeColor ='primary'
+    let runBadgeText = 'paused'
+    if (this.state.control.live) {
+      runBadgeColor = 'success';
+      runBadgeText = 'live'
     }
 
     return (
       <div className="App">
         <Navbar bg="light" expand="lg" className="App-nav" variant="light">
-          <Navbar.Brand>Hall C Web Monitor</Navbar.Brand>
-          <Nav className="mr">
-      <Nav.Link href="https://hallcweb.jlab.org/wiki/index.php/Polarized_Helium-3_Experiments#New_Online_Monitoring_Instructions" target="_blank"> // can update the link
-              Monitoring How-to
-            </Nav.Link>
-            <Nav.Link href="https://hallc.slack.com" target="_blank">
-              Hall C Slack
-            </Nav.Link>
-          </Nav>
+          <Navbar.Brand>SoLID Cherenkov Test Monitor</Navbar.Brand>
           <Nav className="mr-auto nav-run-badge">
             <Nav.Item>
-             <Badge variant={runBadgeColor['solid']} className="run-badge align-middle">SOLID: {this.state.run.solid.active}</Badge>
+             <Badge variant={runBadgeColor} className="run-badge align-middle">{runBadgeText}</Badge>
             </Nav.Item>
-      //<Nav.Item>
-      //<Badge variant={runBadgeColor['shms']} className="run-badge">SHMS: {this.state.run.shms.active}</Badge>
-      //</Nav.Item>
           </Nav>
           <Form inline>
             <div key="control">
               <Form.Check inline label="Live" type="switch" id="live" checked={this.isLive()} onChange={this.handleControl}/>
               <Form.Check inline label="JS ROOT" type="switch" id="jsroot" checked={this.state.control.jsroot} onChange={this.handleControl}/>
-              <FormControl id="run-form-solid" type="text" placeholder="SOLID Run" className="mr-sm-2" onChange={e => this.inputRun.solid = e.target.value} />
-      //<FormControl id="run-form-shms" type="text" placeholder="SHMS Run" className="mr-sm-2" onChange={e => this.inputRun.shms = e.target.value} />
-              <Button variant="outline-primary" onClick={e => this.loadInputRun()}>Load</Button>
-              <span className='nav-spacer'></span>
-              {referenceButton}
             </div>
           </Form>
         </Navbar>

www/src/Canvas.js

@@ -6,27 +6,12 @@ import './jsroot.js';
 let JSROOT = window.JSROOT;
 
 function getDir(props) {
-  const {category, spectrometer} = props;
-  const liveRun = props.run[spectrometer].live;
+  const {category} = props;
   const key = props.screen.key;
-  const isAnalysisPlot = category.includes('analysis'); //Is it an analysis plot ---We are looking at raw signals so this can be removed
-  let run = props.run[spectrometer].active;
-  //let port = 8090; //which port is for analysis and for live updating?
-  let port = 9100;
-  if ((props.control.live || run >= liveRun) && !isAnalysisPlot) {
-    run = "latest"
-    port = 9100;
-  } // -> liveRun
-
-  // format should be : "http://cdaql1.jlab.org:"+port+"online"+"latest" 
-
-   return ("http://cdaql1.jlab.org:" + port + "/" + category + "/" + run +
-  "/" + key);
-  //return ("http://cdaql1.jlab.org:" + port + "/" + category + "/" + 
-  //"/" + key);
+  let port = 8100;
+  return ("http://cdaql1.jlab.org:" + port + "/" + category + "/" + key);
 }
 
-// Pulling Static Canvas ---- We are looking for live update --- likely unecessary
 class StaticCanvas extends React.Component {
   getUrl() {
     const time = new Date().getTime();

www/src/Display.js

@@ -13,24 +13,18 @@ class Display extends React.Component {
   //
   
   render() {
-    const {active, visible, previous, display, onSelect, control, run} = this.props;
+    const {active, visible, previous, display, onSelect, control} = this.props;
     const {sectionIdx, screenIdx} = active;
     const screen = display.sections[sectionIdx].screens[screenIdx];
     const category = display.key;
-    //const spectrometer = (category.includes('shms') ? 'shms' : 'hms');
-    const spectrometer = 'solid'
     const softUpdate = (JSON.stringify(active) === JSON.stringify(previous));
     //console.log("softupdate? ", softUpdate);
     
-    let title = screen.name + "  (" + spectrometer.toUpperCase() + " " + run[spectrometer].active;
+    let title = screen.name + "  ("; 
     if (control.live) {
-      if (run[spectrometer].finished) {
-        title += " - run finished";
-      } else {
-        title += " - live";
-      }
-    } else if (control.reference) {
-      title += " - reference";
+        title += "live";
+    } else {
+        title += "paused";
     }
     title += ")";
 
@@ -49,8 +43,6 @@ class Display extends React.Component {
                 <Canvas className="display-canvas" 
                         control={control}
                         softUpdate={softUpdate}
-                        run={run}
-                        spectrometer={spectrometer}
                         visible={visible}
                         category={category}
                         id={category.replace("/", "-")}

www/src/index.js

@@ -9,8 +9,6 @@ import {displays as displayInfo} from './definition.json'
 ReactDOM.render(
   <App live={true} 
        jsroot={true} 
-  //refRun={{hms: 3000, shms: 10044}}
-  refRun={{solid: 160}} // should check with reference run
        displayInfo={displayInfo}/>, 
   document.getElementById('root'));