diff --git a/.python-version b/.python-version new file mode 100644 index 00000000..c19fb689 --- /dev/null +++ b/.python-version @@ -0,0 +1 @@ +evolver-electron diff --git a/app/components/Calibrate.css b/app/components/Calibrate.css index 2b32d152..0a264e2a 100644 --- a/app/components/Calibrate.css +++ b/app/components/Calibrate.css @@ -97,7 +97,7 @@ label { column-count: 2; column-gap: 60px; width: 400px; - margin: 90px 0px 0px 35px; + margin: 80px 0px 0px 35px; position: absolute; } @@ -116,13 +116,23 @@ label { background-color: black; } -.vialItem { +.tempVialItem { display: block; + border-radius: 0px; + background: white; + width: 200px; + height: 200px; + margin: 40px 45px 70px 35px; + color: black; + text-align: center; +} + +.odVialItem { border-radius: 60px; background: white; - width: 90px; - height: 90px; - margin: 25.5px 30px 25.5px 21px; + width: 35px; + height: 35px; + margin: 0px 5px 55px 1px; color: black; text-align: center; } @@ -140,21 +150,50 @@ label { background-color: #f58245; } -.vialLabels { +.odVialDensity { + border-radius: 60px; + width: 35px; + height: 35px; + color: black; + text-align: center; + margin: 0px 0px 0px 0px; + background-color: #f58245; +} + +.tempVialLabels { position: absolute; text-align: center; - width: 90px; + width: 200px; font-size: 24px; font-weight: bold; - margin-top: 8px; + margin: 8px 0px 0px 0px; } -.vialInput { +.odVialLabels { position: absolute; text-align: center; - width: 90px; + width: 35px; + font-size: 15px; + font-weight: bold; + margin-top: -35px; +} + +.tempVialInput { + position: absolute; + text-align: center; + width: 200px; + font-size: 24px; + margin-top: 100px; + line-height: 20px; + font-style: italic; +} + +.odVialInput { + position: absolute; + text-align: center; + width: 35px; font-size: 15px; - margin-top: 40px; + margin-top: -20px; line-height: 20px; font-style: italic; } @@ -179,25 +218,62 @@ ul { background: transparent; } -.outlineWrapper { +.smartQuadOutlineSelected { + display: block; + width: 270px; + height: 270px; + margin: 40px 13px -2px 5px; + border: 7px solid green; + background: transparent; +} + +.smartQuadOutlineDeSelected { + display: block; + width: 265px; + height: 265px; + margin: 40px 10px -2px 10px; + border: 3px solid white; + background: transparent; +} + +.tempOutlineWrapper { position: absolute; - margin: -579px 0px 0px -10px; + margin: -660px 0px 0px -7px; } -.vialOutlineText { +.odOutlineWrapper { + position: absolute; + margin: -660px 0px 0px -7px; +} + +.quadOutlineText { position: absolute; padding: 0px 0px 0px 0px; - margin: -17px 0px 0px 0px; + margin: 0px 0px 0px 60px; text-align: center; align-items: center; justify-content: center; - width: 141px; - font-size: 20px; + width: 170px; + font-size: 23px; font-style: italic; } + +.vialOutlineTextSelected { + position: absolute; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 60px; + text-align: center; + align-items: center; + justify-content: center; + width: 170px; + font-size: 23px; + font-style: italic; + color: green; +} + .odAdvanceBtn { position: absolute; - margin: 540px 0px 0px 348px; + margin: 545px 0px 0px 348px; height: 40px; width: 120px; background-color: white; @@ -212,7 +288,7 @@ ul { .odBackBtn { position: absolute; - margin: 540px 0px 0px 63px; + margin: 545px 0px 0px 63px; height: 40px; width: 120px; background-color: white; @@ -226,7 +302,7 @@ ul { .stepOneBtn { position: absolute; - margin: 540px 0px 0px 63px; + margin: 550px 0px 0px 63px; height: 80px; width: 410px; background-color: white; @@ -237,7 +313,7 @@ ul { .measureBtn { position: absolute; - margin: 540px 0px 0px 196px; + margin: 545px 0px 0px 196px; height: 40px; width: 140px; background-color: white; @@ -256,12 +332,13 @@ ul { .odViewGraphBtnBack { position: absolute; - height: 40px; - width: 150px; + height: 30px; + width: 100px; background-color: white; color: black; - top: 590px; - left: 48px; + top: 600px; + line-height: 0.25em; + left: 10px; } .statusText { @@ -275,7 +352,7 @@ ul { .tempAdvanceBtn { position: absolute; - margin: 540px 0px 0px 348px; + margin: 545px 0px 0px 348px; height: 40px; width: 120px; background-color: white; @@ -290,7 +367,7 @@ ul { .tempBackBtn { position: absolute; - margin: 540px 0px 0px 63px; + margin: 545px 0px 0px 63px; height: 40px; width: 120px; background-color: white; @@ -304,7 +381,7 @@ ul { .tempMeasureBtn { position: absolute; - margin: 540px 0px 0px 196px; + margin: 545px 0px 0px 196px; height: 40px; width: 140px; background-color: white; @@ -387,5 +464,3 @@ ul { text-align: center; margin: -6px 0px 0px 0px; } - - diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 9bc5cece..966dca7a 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -1,15 +1,18 @@ // @flow import React from 'react'; import PropTypes from 'prop-types'; -import { Redirect } from 'react-router'; -import { Link } from 'react-router-dom'; +import {Redirect} from 'react-router'; +import {Link} from 'react-router-dom'; import routes from '../constants/routes.json'; -import ODcalInput from './calibrationInputs/CalInputs'; -import { withStyles } from '@material-ui/core/styles'; +import {withStyles} from '@material-ui/core/styles'; +import ODCalInput0 from './calibrationInputs/CalInputs'; +import ODCalInput1 from './calibrationInputs/CalInputs'; +import ODCalInput2 from './calibrationInputs/CalInputs'; +import ODCalInput3 from './calibrationInputs/CalInputs'; import Card from '@material-ui/core/Card'; -import ODcalGUI from './calibrationInputs/CalGUI'; +import ODCalGUI from './calibrationInputs/ODCalGUI'; import LinearProgress from '@material-ui/core/LinearProgress'; -import {FaPlay, FaArrowLeft, FaArrowRight, FaStop, FaCheck, FaPen } from 'react-icons/fa'; +import {FaPlay,FaArrowLeft,FaArrowRight,FaStop,FaCheck,FaPen} from 'react-icons/fa'; import normalize from 'array-normalize' import CircularProgress from '@material-ui/core/CircularProgress'; import TextKeyboard from './calibrationInputs/TextKeyboard'; @@ -25,19 +28,17 @@ const http = require('https'); var path = require('path'); var fs = require('fs'); -const densityButtons = Array.from(Array(16).keys()) - const cardStyles = theme => ({ - cardODcalGUI: { + cardODCalGUI: { width: 570, height: 800, backgroundColor: 'transparent', - margin: '0px 0px 0px 500px', + margin: '-17px 0px 0px 500px', position: 'absolute' }, progressBar: { flexGrow: 1, - margin: '27px 0px 0px 0px', + margin: '-15px 0px 0px 0px', height: 8 }, colorPrimary: { @@ -50,7 +51,7 @@ const cardStyles = theme => ({ color: '#f58245' }, circle: { - strokeWidth: '4px' + strokeWidth: '5px' } }); @@ -65,18 +66,19 @@ class ODcal extends React.Component { disableForward: false, disableBackward: true, progressCompleted: 0, - vialOpacities: [], - enteredValues: Array(16).fill(''), - generalOpacity: Array(16).fill(0), + vialOpacities: [[],[],[],[]],//new Array(4).fill([]), + enteredValues: new Array(4).fill().map(() => Array(18).fill('')), //Array(4).fill('') + generalOpacity: new Array(4).fill().map(() => Array(18).fill(0)), //Array(4).fill(0) inputsEntered: false, - enteredValuesFloat: [], + enteredValuesFloat: [[],[],[],[]], //Array(4).fill([]), readProgress: 0, skipFirst: true, - vialProgress: Array(16).fill(0), - vialLabels: ['S0','S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13','S14','S15'], - vialData: {'od135':[],'od90':[],'temp':[]}, + vialProgress: Array(4).fill(0), + selectedSmartQuad: 0, + vialLabels: Array(4).fill(['S0', 'S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8', 'S9', 'S10', 'S11', 'S12', 'S13', 'S14', 'S15', 'S16', 'S17']), + quadsData: {'od90': [[],[],[],[]]}, timesRead: 3, - experimentName:'', + experimentName: '', alertOpen: false, alertQuestion: 'Running calibration...', alertAnswers: ['Retry', 'Exit'], @@ -93,74 +95,97 @@ class ODcal extends React.Component { if (!fs.existsSync(path.join(app.getPath('userData'), 'calibration'))) { fs.mkdirSync(path.join(app.getPath('userData'), 'calibration')); var calibrationsFile = fs.createWriteStream(path.join(app.getPath('userData'), 'calibration', 'calibrate.py')); - var calibrationScriptRequest = http.get("https://raw.githubusercontent.com/FYNCH-BIO/dpu/rc/calibration/calibrate.py", function(response) {response.pipe(calibrationsFile)}); + var calibrationScriptRequest = http.get("https://raw.githubusercontent.com/ezirayw/dpu/ht-evolver/calibration/calibrate.py", function(response) {response.pipe(calibrationsFile)}); } ipcRenderer.on('calibration-finished', (event, calibrationName) => {this.props.socket.emit('getcalibration', {name: calibrationName})}); this.props.socket.on('calibration', function(response) { this.setState({displayGraphs: true, displayCalibration: true, alertOpen: false, calibration: response}); }.bind(this)); this.props.socket.on('broadcast', function(response) { - console.log(this.state.vialData); - var newVialData = this.state.vialData; - // if stop was pressed or user still moving vials around, don't want to continue - if (this.state.readProgress === 0) { - return; - } + if (response.dummy) { + return; + } - // Add the data into the data structures - if (!this.state.skipFirst) { - if (response.data.od_90 && response.data.temp) { - this.progress(); - /* - Note on indexing: Because vials are being shuffled around during a calibration, - the data is not collected in order, ie the vial with OD 0 would be the 3rd - data point collected for vial 2. To shift them properly, - use the formula: (-currentStep -1) + vialIndex. If this is negative, - do 15 - . - */ - for (var i = 0; i < response.data.od_90.length; i++) { - var shift = this.calculateShift(i); + // Structure incoming od_90_left and od_90_right data to properly map onto vial order on smart quad + let indexValues = [[0,1,2,3,4,5,6,7,8],[9,10,11,12,13,14,15,16,17],[18,19,20,21,22,23,24,25,26],[27,28,29,30,31,32,33,34,35]] + let odLeft = [[],[],[],[]]; + let odRight = [[],[],[],[]]; + for (var i = 0; i < odLeft.length; i++) { + odLeft[i] = response.data.od_90_left.filter((x,index) => indexValues[i].includes(index)); + odRight[i] = response.data.od_90_right.filter((x,index) => indexValues[i].includes(index)); + } + + let odData = [[],[],[],[]] + for (var i = 0; i < odData.length; i++) { + odData[i].push(odLeft[i][0], odLeft[i][1], odLeft[i][2], odRight[i][0], odRight[i][1], odRight[i][2]); + odData[i].push(odLeft[i][3], odLeft[i][4], odLeft[i][5], odRight[i][3], odRight[i][4], odRight[i][5]); + odData[i].push(odLeft[i][6], odLeft[i][7], odLeft[i][8], odRight[i][6], odRight[i][7], odRight[i][8]); + } + + let newquadsData = this.state.quadsData; + // if stop was pressed or user still moving vials around, don't want to continue + if (this.state.readProgress === 0) { + return; + } + + // Add the data into the data structures + if (!this.state.skipFirst) { + if (response.data.od_90_left && response.data.od_90_right) { + this.progress(); + /* + Note on indexing: Because vials are being shuffled around during a calibration, + the data is not collected in order, ie the vial with OD 0 would be the 3rd + data point collected for vial 2. To shift them properly, + use the formula: (-currentStep -1) + vialIndex. If this is negative, + do 15 - . + */ + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 18; j++) { + var shift = this.calculateShift(j); + newquadsData.od90[i][j][shift].push(parseInt(odData[i][j])); + /* if (response.data.od_135) { - newVialData.od135[i][shift].push(parseInt(response.data.od_135[i])); + newquadsData.od135[i][shift].push(parseInt(response.data.od_135[i])); } - newVialData.od90[i][shift].push(parseInt(response.data.od_90[i])); - newVialData.temp[i][shift].push(parseInt(response.data.temp[i])); + */ + //newquadsData.temp[i][j][shift].push(parseInt(response.data.temp[i])); } } } - else { - this.progress(); - } + } else { + this.progress(); + } - var progressCompleted = (100 * ((this.state.readsFinished) / 16)); - var readProgress = this.state.readProgress; - var readsFinished = 0; - var newSkipFirst = false; + var progressCompleted = (100 * ((this.state.readsFinished) / 18)); + var readProgress = this.state.readProgress; + var readsFinished = 0; + var newSkipFirst = false; - // Check how many reads have been finished by looking through the data structure - for (var i = 0; i < 16; i++) { - if (newVialData.od90[0][i].length === this.state.timesRead) { - readsFinished += 1; - } + // Check how many reads have been finished by looking through the data structure + for (var i = 0; i < 18; i++) { + if (newquadsData.od90[0][0][i].length === this.state.timesRead) { + readsFinished += 1; } + } - // This means we've finished - we have all the measurements we need for this step. - if (readProgress >= 100) { - readProgress = 0; - progressCompleted = (100 * ((readsFinished) / 16)); - this.handleUnlockBtns(); - newSkipFirst = true; + // This means we've finished - we have all the measurements we need for this step. + if (readProgress >= 100) { + readProgress = 0; + progressCompleted = (100 * ((readsFinished) / 18)); + this.handleUnlockBtns(); + newSkipFirst = true; + } + this.setState({ + quadsData: newquadsData, + readProgress: readProgress, + progressCompleted: progressCompleted, + readsFinished: readsFinished, + skipFirst: newSkipFirst + }, function() { + if (this.state.progressCompleted === 100) { + store.set('runningODCal', this.state); } - this.setState({vialData: newVialData, - readProgress: readProgress, - progressCompleted: progressCompleted, - readsFinished: readsFinished, - skipFirst: newSkipFirst - }, function() { - if (this.state.progressCompleted === 100) { - store.set('runningODCal', this.state); - } - }); + }); }.bind(this)); this.props.socket.on('calibrationrawcallback', function(response) { @@ -173,86 +198,102 @@ class ODcal extends React.Component { componentDidMount() { this.props.logger.info('Routed to Density Calibration Page.') - if (store.has('runningODCal')){ - this.setState({resumeOpen:true}) + if (store.has('runningODCal')) { + this.setState({ + resumeOpen: true + }) } else { this.keyboard.current.onOpenModal(); } this.setState({ - vialOpacities: Array(16).fill(0), - }) + vialOpacities: Array(4).fill([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]), + }) }; componentWillUnmount() { this.props.socket.removeAllListeners('broadcast'); this.props.socket.removeAllListeners('calibrationrawcallback'); - this.setState({readProgress: 0}); + this.setState({ + readProgress: 0 + }); }; startRead = () => { this.handleLockBtns(); - var newVialData = this.state.vialData; + var newquadsData = this.state.quadsData; // Initialization of data lists // First dimension is Vial // Second dimension is step number // Each step will be a list with 3 technical replicates - if (newVialData.od135.length === 0) { - for (var i = 0; i < 16; i++) { - newVialData.od135.push([]); - newVialData.od90.push([]); - newVialData.temp.push([]); - for (var j = 0; j < 16; j++) { - // fill these guys with nothing to start just to - newVialData.od135[i].push([]); - newVialData.od90[i].push([]); - newVialData.temp[i].push([]); + if (newquadsData.od90[0].length === 0) { + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 18; j++) { + newquadsData.od90[i].push([]); + //newquadsData.temp[i].push([]); + for (var k = 0; k < 18; k++) { + // fill these guys with nothing to start just to + newquadsData.od90[i][j].push([]); + //newquadsData.temp[i][j].push([]); + } } } } // remove existing data for particular layout - for (var i = 0; i < newVialData.od135.length; i++) { - newVialData.od135[i][this.calculateShift(i)] = []; - newVialData.od90[i][this.calculateShift(i)] = []; - newVialData.temp[i][this.calculateShift(i)] = []; + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 18; j++) { + newquadsData.od90[i][j][this.calculateShift(j)] = []; + //newquadsData.temp[i][this.calculateShift(j)] = []; + } } - this.setState({vialData:newVialData, readProgress: this.state.readProgress + .01}); + this.setState({ + quadsData: newquadsData, + readProgress: this.state.readProgress + .01 + }); }; stopRead = () => { this.props.socket.emit('stopread', {}); this.handleUnlockBtns() // remove existing data for particular layout - var newVialData = this.state.vialData; - if (this.vialData) { - for (var i = 0; i < this.vialData.od90.length; i++) { - if (newVialData.od135) { - newVialData.od135[i][this.state.currentStep - 1] = []; - } - newVialData.od90[i][this.state.currentStep - 1] = []; - newVialData.temp[i][this.state.currentStep - 1] = []; + var newquadsData = this.state.quadsData; + if (this.quadsData) { + for (var i = 0; i < this.quadsData.od90.length; i++) { + for (var j = 0; j < this.quadsData.od90[i].length; j++) { + if (newquadsData.od135) { + newquadsData.od135[i][this.state.currentStep - 1] = []; } + newquadsData.od90[i][this.state.currentStep - 1] = []; + //newquadsData.temp[i][this.state.currentStep - 1] = []; + } + } } - this.setState({readProgress: 0, vialData: newVialData, skipFirst: true}); + this.setState({ + readProgress: 0, + quadsData: newquadsData, + skipFirst: true + }); } progress = () => { - let readProgress = this.state.readProgress; - readProgress = readProgress + (100/(this.state.timesRead + 1)); - this.setState({readProgress: readProgress}); - }; + let readProgress = this.state.readProgress; + readProgress = readProgress + (100 / (this.state.timesRead + 1)); + this.setState({ + readProgress: readProgress + }); + }; handleBack = () => { var disableForward; var disableBackward; var currentStep = this.state.currentStep - 1; - if (this.state.currentStep === 16){ + if (this.state.currentStep === 18) { disableForward = false; } - if (this.state.currentStep === 2){ + if (this.state.currentStep === 2) { disableBackward = true; } this.child.current.handleBack(); @@ -260,7 +301,7 @@ class ODcal extends React.Component { disableForward: disableForward, disableBackward: disableBackward, currentStep: currentStep - }); + }); }; handleAdvance = () => { @@ -269,17 +310,17 @@ class ODcal extends React.Component { var currentStep = this.state.currentStep + 1; // Just in case. Somehow this can go out of it's bounds and cause weirdness - if (currentStep > 16) { - currentStep = 16; + if (currentStep > 18) { + currentStep = 18; } if (currentStep < 1) { - currentStep = 1; + currentStep = 1; } - if (this.state.currentStep === 1){ + if (this.state.currentStep === 1) { disableBackward = false; } - if (this.state.currentStep === 15){ + if (this.state.currentStep === 18) { disableForward = true; } @@ -288,7 +329,7 @@ class ODcal extends React.Component { disableForward: disableForward, disableBackward: disableBackward, currentStep: currentStep - }); + }); }; handleLockBtns = () => { @@ -298,114 +339,143 @@ class ODcal extends React.Component { this.setState({ disableForward: disableForward, disableBackward: disableBackward, - }); + }); }; handleUnlockBtns = () => { var disableForward = false; var disableBackward = false; - if (this.state.currentStep === 1){ + if (this.state.currentStep === 1) { disableBackward = true; disableForward = false; } - if (this.state.currentStep === 16){ + if (this.state.currentStep === 18) { disableBackward = false; disableForward = true; } this.setState({ disableForward: disableForward, disableBackward: disableBackward, - }); + }); }; handleODChange = (odValues) => { - this.setState({enteredValues: odValues}); - } + let newEnteredValues = this.state.enteredValues; + newEnteredValues[this.state.selectedSmartQuad] = odValues; + this.setState({ + enteredValues: newEnteredValues + }); + } handleStepOne = () => { - let floatValues = []; - var i; - for (i = 0; i < this.state.enteredValues.length; i++) { - floatValues[i] = parseFloat(this.state.enteredValues[i]); + let floatValues = this.state.enteredValuesFloat; + for (var i = 0; i < this.state.enteredValues.length; i++) { + let temp = []; + for (var j = 0; j < this.state.enteredValues[i].length; j++) { + temp[j] = parseFloat(this.state.enteredValues[i][j]); + } + floatValues[i] = temp; } - let inputOD = JSON.parse(JSON.stringify(floatValues)); - let normalizedOD = normalize(inputOD); + let newVialOpacities = this.state.vialOpacities; + for (var i = 0; i < this.state.enteredValues.length; i++) { + let inputOD = JSON.parse(JSON.stringify(floatValues[i])); + let normalizedOD = normalize(inputOD); + newVialOpacities[i] = normalizedOD; + } this.setState({ enteredValuesFloat: floatValues, - vialOpacities: normalizedOD, + vialOpacities: newVialOpacities, inputsEntered: true, - generalOpacity: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], + generalOpacity: Array(4).fill().map(() => Array(18).fill(1)) }); } handleKeyboardInput = (input) => { var exptName; - if (input == ''){ + if (input == '') { exptName = 'ODCal-' + new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') } else { exptName = input } - this.setState({experimentName: exptName}); + this.setState({ + experimentName: exptName + }); } handleFinishExpt = () => { this.setState({alertOpen: true}) + console.log("Experiment Finished!"); var d = new Date(); var currentTime = d.getTime(); var rawList = []; - var saveData = {name: this.state.experimentName, calibrationType: "od", timeCollected: currentTime, measuredData: Array(16).fill(this.state.enteredValuesFloat), fits:[]}; - if (this.state.vialData.od90[0][0].length > 0) { - rawList.push({param: 'od_90', vialData: this.state.vialData.od90}); - } - if (this.state.vialData.od135[0][0].length > 0) { - rawList.push({param: 'od_135', vialData: this.state.vialData.od135}); + var saveData = { + name: this.state.experimentName, + calibrationType: "od", + timeCollected: currentTime, + measuredData: this.state.enteredValuesFloat, + fits: [] + }; + if (this.state.quadsData.od90[0][0].length > 0) { + rawList.push({ + param: 'od_90', + quadsData: this.state.quadsData.od90 + }); } - rawList.push({param: 'temp', vialData: this.state.vialData.temp}); saveData.raw = rawList; this.props.socket.emit('setrawcalibration', saveData); - } + }; handleKeyboardModal = () => { this.keyboard.current.onOpenModal(); - } + }; onAlertAnswer = (answer) => { - if (answer == 'Retry'){ + if (answer == 'Retry') { this.handleFinishExpt(); } - if (answer == 'Exit'){ + if (answer == 'Exit') { store.delete('runningODCal'); - this.setState({exiting: true}); + this.setState({ + exiting: true + }); } - } + }; onResumeAnswer = (answer) => { - if (answer == 'New'){ + if (answer == 'New') { this.keyboard.current.onOpenModal(); store.delete('runningODCal'); } - if (answer == 'Resume'){ + if (answer == 'Resume') { var previousState = store.get('runningODCal'); this.setState(previousState); } - this.setState({resumeOpen:false}) - } + this.setState({ + resumeOpen: false + }) + }; calculateShift = (i) => { var shift = -(this.state.currentStep - 1) + i; if (shift < 0) { - shift = 16 + shift; + shift = 18 + shift; } return shift; - } + }; + + handleSmartQuadSelection = (selectedSmartQuad) => { + this.setState({ + selectedSmartQuad: selectedSmartQuad + }, () => { + }); + }; handleGraph = () => { - this.setState({displayGraphs: !this.state.displayGraphs}); - } + this.setState({displayGraphs: !this.state.displayGraphs})}; render() { const { classes, theme } = this.props; @@ -413,58 +483,51 @@ class ODcal extends React.Component { let measureButton; if (this.state.readProgress === 0) { - measureButton = - ; - try { - if (this.state.vialData.od135[0][this.calculateShift(0)].length === this.state.timesRead){ - - measureButton = - ; - } + measureButton = ; + try { + if (this.state.quadsData.od135[0][this.calculateShift(0)].length === this.state.timesRead) { + measureButton = ; } - catch(err) {} + } catch (err) {} } else { measureButton = - + variant="static" + value={this.state.readProgress} + color="primary" + size={35} + /> + + } let btnRight; - if ((this.state.progressCompleted >= 100) && (this.state.currentStep === 16)){ + if ((this.state.progressCompleted >= 100) && (this.state.currentStep === 18)) { btnRight = } else { btnRight = } @@ -473,10 +536,9 @@ class ODcal extends React.Component { progressButtons =
{measureButton} {btnRight} @@ -485,42 +547,46 @@ class ODcal extends React.Component {
; } else { progressButtons = -
+
; - } + } let calGraphic = null; let statusText; if (!this.state.inputsEntered) { - statusText =

Please enter OD calibration Values.

- } - else if (this.state.readProgress !== 0){ - statusText =

Collecting raw values from eVOLVER...

- } - else if (this.state.inputsEntered && (this.state.vialData.length !== 0)){ - statusText =

{this.state.readsFinished}/16 Measurements Made

- } - else if (this.state.inputsEntered){ - statusText =

Calibration values locked! Follow sample mapping above.

+ statusText = < p className = "statusText" > Please enter OD calibration Values. < /p> + } else if (this.state.readProgress !== 0) { + statusText = < p className = "statusText" > Collecting raw values from eVOLVER... < /p> + } else if (this.state.inputsEntered && (this.state.quadsData.length !== 0)) { + statusText = < p className = "statusText" > {this.state.readsFinished}/18 Measurements Made

+ } else if (this.state.inputsEntered) { + statusText = < p className = "statusText" > Calibration values locked!Follow sample mapping above. < /p> } if (this.state.exiting) { - return ; + return ; } let linearProgress; let graphs; - let calInputs; + let odCalInput; let odCalTitles =
; let backArrow = ; if (this.state.displayGraphs) { linearProgress =
graphs = ; - calInputs =
; + passedData = {{quadsData: this.state.quadsData, enteredValuesFloat: this.state.enteredValuesFloat, calibration: this.state.calibration}}/>; + odCalInput =
; progressButtons =
; backArrow = } else { - linearProgress =
- {statusText}
; - graphs =
; - calInputs = - odCalTitles = + linearProgress =
+ {statusText}
; + graphs =
; + + if (this.state.selectedSmartQuad == 0) { + odCalInput = < ODCalInput0 + key={'ODCalInput0'} + id={'ODCalInput0'} + onChangeValue = {this.handleODChange} + onInputsEntered = {this.state.inputsEntered} + currentSmartQuad = {this.state.selectedSmartQuad} + enteredValues = {this.state.enteredValues[this.state.selectedSmartQuad]}/> + } else if (this.state.selectedSmartQuad == 1) { + odCalInput = < ODCalInput1 + key={'ODCalInput1'} + id={'ODCalInput1'} + onChangeValue = {this.handleODChange} + onInputsEntered = {this.state.inputsEntered} + currentSmartQuad = {this.state.selectedSmartQuad} + enteredValues = {this.state.enteredValues[this.state.selectedSmartQuad]}/> + } else if (this.state.selectedSmartQuad == 2) { + odCalInput = < ODCalInput2 + key={'ODCalInput2'} + id={'ODCalInput2'} + onChangeValue = {this.handleODChange} + onInputsEntered = {this.state.inputsEntered} + currentSmartQuad = {this.state.selectedSmartQuad} + enteredValues = {this.state.enteredValues[this.state.selectedSmartQuad]}/> + } else if (this.state.selectedSmartQuad == 3) { + odCalInput = < ODCalInput3 + key={'ODCalInput3'} + id={'ODCalInput3'} + onChangeValue = {this.handleODChange} + onInputsEntered = {this.state.inputsEntered} + currentSmartQuad = {this.state.selectedSmartQuad} + enteredValues = {this.state.enteredValues[this.state.selectedSmartQuad]}/> + } + odCalTitles = } - calGraphic =
- + {linearProgress}
- return (
{backArrow} {calGraphic} + {odCalInput} {graphs} {progressButtons} - {calInputs} {odCalTitles} + { var disablePlay = false; var changeNameDisabled = false; @@ -87,7 +88,7 @@ class Graph extends React.Component { this.setState({disablePlay: disablePlay, changeNameDisabled: changeNameDisabled}); }); - ipcRenderer.send('running-expts'); + ipcRenderer.send('running-expts'); } componentDidMount() { @@ -122,9 +123,7 @@ class Graph extends React.Component { handleYmax = event => { console.log(event) - this.setState({ - ymax: event - }) + this.setState({ymax: event}) }; handleTimePlotted = event => { @@ -151,12 +150,12 @@ class Graph extends React.Component { handleParameterSelect = event => { var ymaxChoices, ymax, xaxisName if (event == 'OD'){ - ymax = '0.5' + ymax = '0.5'; ymaxChoices = ymaxChoicesOD; xaxisName = xAxisNameOD; } if (event == 'Temp'){ - ymax = '40' + ymax = '40'; ymaxChoices = ymaxChoicesTemp; xaxisName = xAxisNameTemp; } @@ -188,57 +187,62 @@ class Graph extends React.Component { this.setState({logToggleState: logToggleState, logToggleText: logToggleText}); } - handleActivePlot = (event) => { - this.setState({activePlot: event}) + handleActivePlot = (vial) => { + this.setState({activePlot:vial}) + } + + handleSmartQuadSelection = (smartQuad) => { + this.setState({selectedSmartQuad: smartQuad}) } - + setAllGraphs = () => { this.setState({activePlot: 'ALL'}); } - + handlePlay = (exptToPlay) => { ipcRenderer.send('start-script', exptToPlay); this.setState({disablePlay:true}); + } - + onStop = (exptToStop) => { ipcRenderer.send('stop-script', exptToStop); } - + handleReset = (exptToStop) => { var directions = "Are you sure you want to reset the experiment " + this.state.exptName + "?"; this.setState({deleteExptAlertDirections: directions}, function() { this.setState({deleteExptAlertOpen: true}); }.bind(this)); } - + deleteExptAlertAnswer = (response) => { this.setState({deleteExptAlertOpen: false}); if (response) { if (this.state.disablePlay) { ipcRenderer.send('stop-script', this.state.exptDir); - } + } if (fs.existsSync(path.join(this.state.exptDir, 'data'))) { - rimraf.sync(path.join(this.state.exptDir, 'data')); - } + rimraf.sync(path.join(this.state.exptDir, 'data')); + } } } - + cloneExpt = () => { this.setState({cloneOpen: true}); } - + onResumeClone = (exptName) => { this.setState({cloneOpen: false}); if (exptName !== false) { this.createNewExperiment(exptName); } } - + handleDataZoom = () => { - this.setState({timePlotted:'None'}); + this.setState({timePlotted:'None'}); } - + createNewExperiment = (exptName) => { var newDir = path.join(this.state.exptLocation, 'experiments', exptName); var oldDir = path.join(this.state.exptDir); @@ -251,19 +255,20 @@ class Graph extends React.Component { fs.copyFileSync(path.join(oldDir, filename), path.join(newDir, filename)); } }); - } + } render() { const { classes } = this.props; - var backButton = this.state.activePlot == 'ALL' ? - : - ; - var exptName = path.basename(this.props.exptDir); - var dataDisplay = this.state.logToggleState ? + var backButton = this.state.activePlot == 'ALL' ? + : + ; + var exptName = path.basename(this.props.exptDir); + var dataDisplay = this.state.logToggleState ?
var exptControlButtons =
- {this.state.disablePlay ? : } - - + {this.state.disablePlay ? : } + +
; - return ( + return (
{backButton}

{exptName}

{dataDisplay} -
+
-
+
- {exptControlButtons} - + {exptControlButtons} +
- - -
+ + +
- ); } } diff --git a/app/components/PumpCalibrate.js b/app/components/PumpCalibrate.js index b3bce67f..5bbec968 100644 --- a/app/components/PumpCalibrate.js +++ b/app/components/PumpCalibrate.js @@ -1,15 +1,28 @@ // @flow import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; -import { Redirect } from 'react-router'; +import { + Link +} from 'react-router-dom'; +import { + Redirect +} from 'react-router'; import routes from '../constants/routes.json'; -import { withStyles } from '@material-ui/core/styles'; +import { + withStyles +} from '@material-ui/core/styles'; import PumpcalInput from './calibrationInputs/CalInputs'; import Card from '@material-ui/core/Card'; -import PumpCalGUI from './calibrationInputs/CalGUI'; +import PumpCalGUI from './calibrationInputs/TempCalGUI'; import LinearProgress from '@material-ui/core/LinearProgress'; -import {FaPlay, FaArrowLeft, FaArrowRight, FaStop, FaCheck, FaPen } from 'react-icons/fa'; +import { + FaPlay, + FaArrowLeft, + FaArrowRight, + FaStop, + FaCheck, + FaPen +} from 'react-icons/fa'; import CircularProgress from '@material-ui/core/CircularProgress'; import TextKeyboard from './calibrationInputs/TextKeyboard'; import ModalAlert from './calibrationInputs/ModalAlert'; @@ -88,20 +101,36 @@ class PumpCal extends React.Component { this.keyboard = React.createRef(); var vialData = [] for (var i = 0; i < data.length; i++) { - vialData.push(Object.assign({},data[i])); + vialData.push(Object.assign({}, data[i])); } this.state = { currentStep: 0, - pumpCalModes: [{arrayName: 'IN1', arrayMode: 'NA'}, {arrayName: 'IN2', arrayMode: 'NA'}, {arrayName: 'E', arrayMode: 'NA'}], + pumpCalModes: [{ + arrayName: 'IN1', + arrayMode: 'NA' + }, { + arrayName: 'IN2', + arrayMode: 'NA' + }, { + arrayName: 'E', + arrayMode: 'NA' + }], pumpCalModesFiltered: [], - pumpTimes: {slow: 100, fast: 10}, - enteredValues: {IN1: Array(16).fill(''), IN2: Array(16).fill(''), E: Array(16).fill('')}, + pumpTimes: { + slow: 100, + fast: 10 + }, + enteredValues: { + IN1: Array(16).fill(''), + IN2: Array(16).fill(''), + E: Array(16).fill('') + }, vialData: vialData, buttonAdvanceText: '', buttonBackText: '', pumpButtonText: 'PUMP', statusText: '', - experimentName:'', + experimentName: '', alertOpen: false, alertQuestion: 'Logging Values...', alertAnswers: ['Retry', 'Exit'], @@ -114,15 +143,19 @@ class PumpCal extends React.Component { }; this.props.socket.on('calibrationrawcallback', function(response) { - if (response == 'success'){ - this.setState({alertQuestion: 'Successfully Logged. Do you want to exit?'}) + if (response == 'success') { + this.setState({ + alertQuestion: 'Successfully Logged. Do you want to exit?' + }) } }.bind(this)); } componentWillUnmount() { this.props.socket.removeAllListeners('calibrationrawcallback'); - this.setState({readProgress: 0}); + this.setState({ + readProgress: 0 + }); } componentDidMount() { @@ -132,8 +165,10 @@ class PumpCal extends React.Component { initialData = this.formatVialSelectStrings(initialData, 'IN2'); initialData = this.formatVialSelectStrings(initialData, 'E'); - if (store.has('runningPumpCal')){ - this.setState({resumeOpen:true}) + if (store.has('runningPumpCal')) { + this.setState({ + resumeOpen: true + }) } else { this.keyboard.current.onOpenModal(); } @@ -145,60 +180,69 @@ class PumpCal extends React.Component { vialData: initialData, buttonAdvanceText: buttonAdvanceText, buttonBackText: buttonBackText, - }) + }) }; generateButtonText = (currentStep) => { if (currentStep === 0) { - this.setState({statusText: ''}); + this.setState({ + statusText: '' + }); return; } - var pumpCalModes = this.state.pumpCalModes.filter(function (mode) { + var pumpCalModes = this.state.pumpCalModes.filter(function(mode) { return mode.arrayMode !== "NA"; }); - var pumpTime = pumpCalModes[currentStep-1].arrayMode === 'fast' ? this.state.pumpTimes.fast : this.state.pumpTimes.slow; + var pumpTime = pumpCalModes[currentStep - 1].arrayMode === 'fast' ? this.state.pumpTimes.fast : this.state.pumpTimes.slow; var statusText = this.state.statusText; if (currentStep === 0) { statusText = ''; - } - else { + } else { statusText = `Press PUMP to run ${pumpCalModes[currentStep-1].arrayName} for ${pumpTime} seconds`; } var buttonBackText; var buttonAdvanceText; if (currentStep === 1) { buttonBackText = 'Pump Config'; - } - else { - buttonBackText = pumpCalModes[currentStep-2].arrayName; + } else { + buttonBackText = pumpCalModes[currentStep - 2].arrayName; } if (currentStep !== pumpCalModes.length) { buttonAdvanceText = pumpCalModes[currentStep].arrayName; } - this.setState({statusText: statusText, buttonAdvanceText: buttonAdvanceText, buttonBackText: buttonBackText, pumpCalModesFiltered: pumpCalModes}); + this.setState({ + statusText: statusText, + buttonAdvanceText: buttonAdvanceText, + buttonBackText: buttonBackText, + pumpCalModesFiltered: pumpCalModes + }); }; handleBack = () => { - var currentStep = this.state.currentStep - 1; - this.generateButtonText(currentStep); - this.setState({currentStep: currentStep}); + var currentStep = this.state.currentStep - 1; + this.generateButtonText(currentStep); + this.setState({ + currentStep: currentStep + }); }; handleAdvance = () => { var currentStep = this.state.currentStep + 1; this.generateButtonText(currentStep); - this.setState({currentStep: currentStep}); + this.setState({ + currentStep: currentStep + }); }; //BUG HERE - if only cal IN1 and E fast, E shows slow rate. handlePumpAmountInput = (pumpAmountValues) => { var enteredValues = this.state.enteredValues; - enteredValues[this.state.pumpCalModesFiltered[this.state.currentStep-1].arrayName] = pumpAmountValues; + enteredValues[this.state.pumpCalModesFiltered[this.state.currentStep - 1].arrayName] = pumpAmountValues; var vialData = this.state.vialData; console.log(vialData); for (var i = 0; i < vialData.length; i++) { - vialData[i][this.state.pumpCalModesFiltered[this.state.currentStep-1].arrayName] = pumpAmountValues[i] !== '' ? pumpAmountValues[i] / this.state.pumpTimes[this.state.pumpCalModesFiltered[this.state.currentStep-1].arrayMode] : '--'; + vialData[i][this.state.pumpCalModesFiltered[this.state.currentStep - 1].arrayName] = pumpAmountValues[i] !== '' ? pumpAmountValues[i] / this.state.pumpTimes[this.state.pumpCalModesFiltered[this.state.currentStep - 1].arrayMode] : '--'; } vialData = this.formatVialSelectStrings(vialData, this.state.pumpCalModesFiltered[this.state.currentStep-1].arrayName); @@ -292,33 +336,35 @@ class PumpCal extends React.Component { } if (parameter == 'E'){ value = newData[i].E === '--' ? '--' : newData[i].E.toFixed(2); - newData[i].E = 'E: ' + value + ' ml/s'; - } - } - return newData - }; + newData[i].E = 'E: ' + value + ' ml/s'; + } + } + return newData + }; - handleSelectRadio = (name,value) => { + handleSelectRadio = (name, value) => { console.log(value); - var pumpCalModes = this.state.pumpCalModes - for (var i = 0; i < pumpCalModes.length; i++) { + var pumpCalModes = this.state.pumpCalModes + for (var i = 0; i < pumpCalModes.length; i++) { if (pumpCalModes[i].arrayName === name) { pumpCalModes[i].arrayMode = value; } - } - this.setState({pumpCalModes: pumpCalModes}); - }; + } + this.setState({ + pumpCalModes: pumpCalModes + }); + }; - handleSubmit = () => { + handleSubmit = () => { console.log("Submitting pump calibration to server"); - }; + }; - runPumps = () => { + runPumps = () => { console.log("Running Pumps"); var vials = this.state.selectedVials.map(item => item.props.vial); var evolverMessage = Array(48).fill("--"); - var pumpArray = this.state.pumpCalModesFiltered[this.state.currentStep-1].arrayName; - var pumpTime = this.state.pumpCalModesFiltered[this.state.currentStep-1].arrayMode === 'fast' ? this.state.pumpTimes.fast : this.state.pumpTimes.slow; + var pumpArray = this.state.pumpCalModesFiltered[this.state.currentStep - 1].arrayName; + var pumpTime = this.state.pumpCalModesFiltered[this.state.currentStep - 1].arrayMode === 'fast' ? this.state.pumpTimes.fast : this.state.pumpTimes.slow; for (var i = 0; i < vials.length; i++) { if (pumpArray == 'IN1') { evolverMessage[vials[i]] = pumpTime; @@ -330,12 +376,21 @@ class PumpCal extends React.Component { evolverMessage[vials[i] + 32] = pumpTime; } } - this.props.socket.emit("command", {param: 'pump', value: evolverMessage, immediate: true}); - } + this.props.socket.emit("command", { + param: 'pump', + value: evolverMessage, + immediate: true + }); + } render() { - const { classes, theme } = this.props; - const { currentStep } = this.state; + const { + classes, + theme + } = this.props; + const { + currentStep + } = this.state; var pumpConfig; var statusText =

{this.state.statusText}

@@ -344,122 +399,284 @@ class PumpCal extends React.Component { var pumpButton = null; if (this.state.currentStep == 0) { - pumpConfig =
-

Select the pump configuration for your eVOLVER setup

-
-
-
FastSlowNA
-
- IN1 - -
-
- IN2 - -
-
- E -
- -
-
-
-
+ pumpConfig = < div style = { + { + position: 'absolute', + top: '140px', + left: '60px' + } + } > + < + div className = "instructionsDiv" > < p className = "configInstructions" > Select the pump configuration + for your eVOLVER setup < /p>
+ < + br / > + < + div className = 'col' + style = { + { + position: 'absolute', + left: '20px' + } + } > + < + div className = "radioBtnTitles" > < span className = "radioBtnTitleText" > Fast < /span>Slow < span className = "radioBtnTitleText" > NA < /span>
+ < + div className = 'row' > + < + span className = "radioBtnRowLabel" > IN1 < /span> < + PumpCalRadioButtons name = 'IN1' + onSelectRadio = { + this.handleSelectRadio + } + value = { + this.state.pumpCalModes[0].arrayMode + } + /> < + /div> < + div className = 'row' > + < + span className = "radioBtnRowLabel" > IN2 < /span> < + PumpCalRadioButtons name = 'IN2' + onSelectRadio = { + this.handleSelectRadio + } + value = { + this.state.pumpCalModes[1].arrayMode + } + /> < + /div> < + div className = 'row' > + < + span className = "radioBtnRowLabel" + style = { + { + margin: '-5px 1px 0px 10px' + } + } > E < /span> < + div style = { + { + marginLeft: '10px' + } + } > + < + PumpCalRadioButtons name = 'E' + onSelectRadio = { + this.handleSelectRadio + } + value = { + this.state.pumpCalModes[2].arrayMode + } + /> < + /div> < + /div> < + /div> < + /div> } else { - pumpConfig = - + pumpConfig = < + PumpcalInput + onChangeValue = { + this.handlePumpAmountInput + } + onInputsEntered = { + this.state.inputsEntered + } + enteredValues = { + this.state.enteredValues[this.state.pumpCalModesFiltered[currentStep - 1].arrayName] + } + /> } if (this.state.currentStep != 0) { - var pumpButtonText = this.state.pumpButtonText + ' ' + this.state.pumpCalModesFiltered[currentStep-1].arrayName; - pumpButton = - ; - var rightButton; - if (this.state.currentStep == this.state.pumpCalModesFiltered.length) { - rightButton = - + var pumpButtonText = this.state.pumpButtonText + ' ' + this.state.pumpCalModesFiltered[currentStep - 1].arrayName; + pumpButton = < + button + className = "tempMeasureBtn" + onClick = { + this.runPumps + } > { + pumpButtonText + } < + /button>; + var rightButton; + if (this.state.currentStep == this.state.pumpCalModesFiltered.length) { + rightButton = < + button + className = "tempAdvanceBtn" + onClick = { + this.handleFinishExpt + } > + < + FaPen / > + < + /button> + } else { + rightButton = < + button + className = "tempAdvanceBtn" + disabled = { + this.state.disableForward } - else { - rightButton = - + onClick = { + this.handleAdvance + } > { + this.state.buttonAdvanceText + } < FaArrowRight size = { + 13 + } + /> < + /button> + } + leftButton = < + button + className = "tempBackBtn" + disabled = { + this.state.disableBackward + } + onClick = { + this.handleBack + } > + < + FaArrowLeft size = { + 13 } - leftButton = - - progressButtons = -
- {leftButton} - {pumpButton} - {rightButton} -
+ />{this.state.buttonBackText} < + /button> + progressButtons = < + div className = "row" + style = { + { + position: 'absolute' + } + } > { + leftButton + } { + pumpButton + } { + rightButton + } < + /div> } else { - progressButtons = -
- -
; + progressButtons = < + div className = "row" > + < + button + className = "stepOneBtn" + onClick = { + this.handleAdvance + } > + Start Pump Calibration < FaPlay size = { + 17 + } + /> < + /button> < + /div>; } if (this.state.exiting) { - return ; + return ; } - return ( -
- - {pumpConfig} - {progressButtons} - - - - {statusText} - - - - - - - - -
+ return ( < + div > + < + Link className = "backHomeBtn" + id = "experiments" + to = { + { + pathname: routes.CALMENU, + socket: this.props.socket, + logger: this.props.logger + } + } > < FaArrowLeft / > < /Link> { + pumpConfig + } { + progressButtons + } + + < + Card className = { + classes.cardPumpCalGUI + } > + < + VialSelectorPumpCal items = { + this.state.vialData + } + vialSelectionFinish = { + this.onSelectVials + } + /> { + statusText + } + + < + /Card> + + < + button className = "odCalTitles" + onClick = { + this.handleKeyboardModal + } > + < + h4 style = { + { + fontWeight: 'bold', + fontStyle: 'italic' + } + } > { + this.state.experimentName + } < /h4> < + /button> < + TextKeyboard ref = { + this.keyboard + } + onKeyboardInput = { + this.handleKeyboardInput + } + onFinishedExpt = { + this.handleFinishExpt + } + keyboardPrompt = { + this.state.keyboardPrompt + } + /> < + ModalAlert alertOpen = { + this.state.alertOpen + } + alertQuestion = { + this.state.alertQuestion + } + alertAnswers = { + this.state.alertAnswers + } + onAlertAnswer = { + this.onAlertAnswer + } + /> < + ModalAlert alertOpen = { + this.state.resumeOpen + } + alertQuestion = { + this.state.resumeQuestion + } + alertAnswers = { + this.state.resumeAnswers + } + onAlertAnswer = { + this.onResumeAnswer + } + /> + + < + /div> ); } diff --git a/app/components/ScriptEditor.css b/app/components/ScriptEditor.css index d5b91eaa..4767ff8e 100644 --- a/app/components/ScriptEditor.css +++ b/app/components/ScriptEditor.css @@ -101,8 +101,8 @@ } .ebfe { - width: 60px; - height: 50px; + width: 45px; + height: 45px; } .editor-buttons .ebfe { diff --git a/app/components/Setup.js b/app/components/Setup.js index cd398d9d..d4c51594 100644 --- a/app/components/Setup.js +++ b/app/components/Setup.js @@ -38,7 +38,10 @@ export default class Setup extends Component { this.control = Array.from(new Array(32).keys()).map(item => Math.pow(2,item)); this.props.socket.emit('getactivecal', {}); this.props.socket.emit('getfitnames', {}); - this.props.socket.on('broadcast', function(response) {this.handleRawData(this.handlePiIncoming(response.data), this.state.showRawOD, this.state.showRawTemp)}.bind(this)); + this.props.socket.on('broadcast', function(response) { + if (!response.dummy) { + this.handleRawData(this.handlePiIncoming(response.data), this.state.showRawOD, this.state.showRawTemp) + }}.bind(this)); this.props.socket.on('fitnames', function(response) { var odCalFiles = []; var tempCalFiles = []; @@ -58,6 +61,7 @@ export default class Setup extends Component { }.bind(this)) this.props.socket.on('activecalibrations', function(response) { + console.log(response) var activeODCal; var activeTempCal; var activePumpCal; @@ -87,6 +91,7 @@ export default class Setup extends Component { console.log(this.props.socket) this.props.logger.info('Routed to Setup Page.') var initialData = this.state.rawVialData; + console.log(initialData) initialData = this.handleRawToCal(initialData); initialData = this.formatVialSelectStrings(initialData, 'od'); initialData = this.formatVialSelectStrings(initialData, 'temp'); @@ -109,6 +114,7 @@ export default class Setup extends Component { } handlePiIncoming = (response) => { + console.log(response) var responseData = JSON.parse(JSON.stringify(response)); var rawData = Array.apply(null, Array(16)).map(function () {}); for(var i = 0; i < this.state.vialData.length; i++) { @@ -118,20 +124,19 @@ export default class Setup extends Component { if (responseData.od_135) { - rawData[i].od_135 = responseData.od_135[i]; + rawData[i].od_135 = responseData.od_135[i]; } if (responseData.od_90) { - rawData[i].od_90 = responseData.od_90[i]; + rawData[i].od_90 = responseData.od_90[i]; } if (responseData.temp) { - rawData[i].temp = responseData.temp[i]; - } + rawData[i].temp = responseData.temp[i]; + } } return rawData } handleRawData = (rawData, showRawOD, showRawTemp) => { - console.log(rawData) var newVialData = this.handleRawToCal(rawData, showRawOD, showRawTemp); if (!showRawOD && (this.state.odCal.length !== 0)){ newVialData = this.formatVialSelectStrings(newVialData, 'od'); @@ -176,6 +181,9 @@ export default class Setup extends Component { console.log(err); } try { + console.log(newVialData) + console.log(this.state.tempCal) + console.log(showRawTemp) if ((!showRawTemp) && (this.state.tempCal.length !== 0)){ newVialData[i].temp = this.linearRawToCal(newVialData[i].temp, this.state.tempCal.coefficients[i]).toFixed(2); } else if (this.state.tempCal.length == 0) { @@ -233,7 +241,7 @@ export default class Setup extends Component { evolverMessage = Array(16).fill("NaN") if (evolverComponent == "pump") { evolverMessage = Array(48).fill("--"); - for (var i = 0; i < 48; i++) { + for (var i = 0; i < 48; i++) { if (value.in1) { evolverMessage[vials[i]] = value.time; } diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index ba3f752d..542c2276 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -5,9 +5,12 @@ import { Link } from 'react-router-dom'; import { Redirect } from 'react-router'; import routes from '../constants/routes.json'; import { withStyles } from '@material-ui/core/styles'; -import TempcalInput from './calibrationInputs/CalInputs'; +import TempCalInput0 from './calibrationInputs/CalInputs'; +import TempCalInput1 from './calibrationInputs/CalInputs'; +import TempCalInput2 from './calibrationInputs/CalInputs'; +import TempCalInput3 from './calibrationInputs/CalInputs'; import Card from '@material-ui/core/Card'; -import TempCalGUI from './calibrationInputs/CalGUI'; +import TempCalGUI from './calibrationInputs/TempCalGUI'; import LinearProgress from '@material-ui/core/LinearProgress'; import {FaPlay, FaArrowLeft, FaArrowRight, FaStop, FaCheck, FaPen } from 'react-icons/fa'; import CircularProgress from '@material-ui/core/CircularProgress'; @@ -34,7 +37,7 @@ const styles = { }, progressBar: { flexGrow: 1, - margin: '27px 0px 0px 0px', + margin: '-10px 0px 0px 0px', height: 8, }, colorPrimary: { @@ -51,26 +54,26 @@ const styles = { } }; -function generateVialLabel (response, oldTempStream, roomTempAvg) { - var tempStream = Array(16).fill('...'); - var deltaTempStream = Array(16).fill('...'); - var valueInputs = Array(16).fill('...') +function generateQuadLabel (response, oldTempStream) { + var tempStream = new Array(4).fill('...'); + var deltaTempStream = new Array(4).fill('...'); + var valueInputs = new Array(4).fill('...'); for (var i = 0; i < response.data.temp.length; i++) { // To Not show value during RT reading // if (roomTempAvg.length !== 0){ - tempStream[i] = response.data.temp[i] + tempStream[i] = [response.data.temp[i]] deltaTempStream[i] = tempStream[i] - oldTempStream[i]; - if (isNaN(deltaTempStream[i])){ - deltaTempStream[i] = "0" + if (isNaN(deltaTempStream[i][0])){ + deltaTempStream[i] = "0"; } - valueInputs[i] = tempStream[i] + " (" + (deltaTempStream[i]<0?"":"+") + deltaTempStream[i] + ")" + valueInputs[i] = tempStream[i][0]; // } } return [tempStream, valueInputs] } -function calculateVialProgress (currentTemp, previousLockedTemp, targetTemp){ +function calculateQuadProgress (currentTemp, previousLockedTemp, targetTemp){ var percentCompleted = [] for (var i = 0; i < currentTemp.length; i++) { percentCompleted[i] = Math.round(5 + (95 *Math.abs(((currentTemp[i] - previousLockedTemp[i])/(targetTemp[i] - previousLockedTemp[i]))))); @@ -88,28 +91,27 @@ class TempCal extends React.Component { disableForward: false, disableBackward: true, progressCompleted: 0, - vialOpacities: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], - enteredValues: Array(16).fill(''), - generalOpacity: Array(16).fill(1), + quadOpacities: new Array(4).fill(1), + enteredValues: new Array(4).fill().map(() => Array(18).fill('')), + generalOpacity: new Array(4).fill(1), tempInputsFloat: [], readProgress: 0, - vialProgress: Array(16).fill(0), + quadProgress: new Array(4).fill(0), initialZipped: [], inputsEntered: true, - vialLabels: ['S0','S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13','S14','S15'], - vialData: [], - currentPowerLevel: [4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095], - tempRawDelta: 500, + selectedSmartQuad: 0, + quadLabels: ['SQ0', 'SQ1', 'SQ2', 'SQ3'], + smartQuadLabels: ['SQ0 Sensor Average','SQ1 Sensor Average','SQ2 Sensor Average','SQ3 Sensor Average'], + quadsData: {'temp':[]}, + powerLevels: [[1250,1250,1250,1250], [1875,1875,1875,1875], [2500,2500,2500,2500]], timesRead: 3, valueInputs: [], tempStream: [], - deltaTempRange: [0, 1000], //slope around 0.02 C per a.u. deltaTempSteps: 3, equilibrateState: true, - roomTempAvg: [], buttonAdvanceText: '', buttonBackText: '', - buttonMeasureText: 'RT', + buttonMeasureText: '', slopeEstimate: .02, previousLockedTemp: [], experimentName:'', @@ -136,64 +138,60 @@ class TempCal extends React.Component { this.setState({displayGraphs: true, displayCalibration: true, alertOpen: false, calibration: response}); }.bind(this)); this.props.socket.on('broadcast', function(response) { - var newVialData = this.state.vialData; - let returnedTemps = generateVialLabel (response, this.state.tempStream, this.state.roomTempAvg) + console.log(response) + if (response.dummy) { + console.log("dummy broadcoast received"); + return + } + var newQuadsData = this.state.quadsData; + let returnedTemps = generateQuadLabel (response, this.state.tempStream, this.state.roomTempAvg) let tempStream = returnedTemps[0]; let valueInputs = returnedTemps[1]; - let percentVialProgress = []; - if (this.state.currentStep > 1) { - percentVialProgress = calculateVialProgress (tempStream, this.state.previousLockedTemp, this.state.currentPowerLevel); - } + let percentQuadProgress = []; + let powerLevelIndex = this.state.currentStep - 1; + percentQuadProgress = calculateQuadProgress (tempStream, this.state.previousLockedTemp, this.state.powerLevels[powerLevelIndex]); this.setState({ tempStream: tempStream, valueInputs: valueInputs, - vialProgress: percentVialProgress + quadProgress: percentQuadProgress }) // if stop was pressed or user still moving vials around, don't want to continue if (this.state.readProgress === 0) { - return; - } + return; + }; this.progress(); for (var i = 0; i < response.data.temp.length; i++) { - if (newVialData[newVialData.length - 1].temp.length <= i) { - newVialData[newVialData.length - 1].temp.push([]); + if (newQuadsData[newQuadsData.length - 1].temp.length <= i) { + newQuadsData[newQuadsData.length - 1].temp.push([]); } - newVialData[newVialData.length - 1].temp[i].push(parseInt(response.data.temp[i])); + newQuadsData[newQuadsData.length - 1].temp[i].push(parseInt(response.data.temp[i])); } this.setState({ tempStream: tempStream, valueInputs: valueInputs, - vialData: newVialData, + quadsData: newQuadsData, equilibrateState: true}, //Runs when collected enough measurements function() { - var tempArray = this.state.vialData[newVialData.length - 1].temp; + var tempArray = this.state.quadsData[newQuadsData.length - 1].temp; if (tempArray[0].length === this.state.timesRead) { - var roomTempAvg = this.state.roomTempAvg; - if (this.state.currentStep == 1) { - for (var i = 0; i < tempArray.length; i++) { - let average = (array) => array.reduce((a, b) => a + b) / array.length; - roomTempAvg[i] = Math.round(average(tempArray[i])); - } - } this.handleUnlockBtns(); - console.log(this.state.vialData); - var readsFinished = this.state.vialData.length; + var readsFinished = this.state.quadsData.length; this.setState({ - progressCompleted: (100 * (this.state.vialData.length / this.state.deltaTempSteps)), + progressCompleted: (100 * (this.state.quadsData.length / this.state.deltaTempSteps)), readsFinished: readsFinished, readProgress: 0, - roomTempAvg: roomTempAvg, - vialProgress: Array(16).fill(0)}, + quadProgress: Array(4).fill(0)}, function() { store.set('runningTempCal', this.state) }); } }); + console.log(this.state.quadsData); }.bind(this)); this.props.socket.on('calibrationrawcallback', function(response) { @@ -219,59 +217,56 @@ class TempCal extends React.Component { this.keyboard.current.onOpenModal(); } - var deltaTempSetting = (this.state.deltaTempRange[1] - this.state.deltaTempRange[0])/(this.state.deltaTempSteps-1); - var buttonAdvanceText = "+" + Math.round(deltaTempSetting * this.state.slopeEstimate) + "\u00b0C"; - var buttonBackText = "-" + Math.round(deltaTempSetting * this.state.slopeEstimate) + "\u00b0C"; + let buttonAdvanceText = this.state.powerLevels[this.state.currentStep][0].toString().concat(' ADC'); + let buttonMeasureText = this.state.powerLevels[this.state.currentStep - 1][0].toString().concat(' ADC'); this.setState({ - vialOpacities: Array(16).fill(0), - generalOpacity: Array(16).fill(1), - valueInputs: Array(16).fill('...'), - buttonAdvanceText: buttonAdvanceText, - buttonBackText: buttonBackText, + quadOpacities: Array(4).fill(0), + generalOpacity: Array(4).fill(1), + valueInputs: Array(4).fill('...'), + buttonMeasureText: buttonMeasureText, + buttonAdvanceText: buttonAdvanceText }) }; startRead = () => { - var evolverValue = Array(16).fill("NaN"); - for (var i = 0; i < this.state.currentPowerLevel.length; i++) { - evolverValue[i] = this.state.currentPowerLevel[i]; + let evolverValue = new Array(4).fill("NaN"); + let powerLevelIndex = this.state.currentStep - 1; + for (var i = 0; i < evolverValue.length; i++) { + evolverValue[i] = this.state.powerLevels[powerLevelIndex][i]; } this.props.socket.emit("command", {param: "temp", value: evolverValue, immediate: true}); - if (this.state.equilibrateState){ this.handleLockBtns(); - let percentVialProgress = []; - if (this.state.currentStep > 1) { - percentVialProgress = calculateVialProgress (this.state.tempStream, this.state.tempStream, this.state.currentPowerLevel); - } + let percentQuadProgress = []; + percentQuadProgress = calculateQuadProgress (this.state.tempStream, this.state.tempStream, this.state.powerLevels[powerLevelIndex]); this.setState({ equilibrateState: false, inputsEntered: false, previousLockedTemp: this.state.tempStream, - vialProgress: percentVialProgress + quadProgress: percentQuadProgress }); } else { this.setState({readProgress: this.state.readProgress + .01, inputsEntered: true}); - var newVialData = this.state.vialData; + var newQuadsData = this.state.quadsData; // remove existing data for particular layout - for (var i = 0; i < newVialData.length; i++) { - if (this.state.currentStep === this.state.vialData[i].step) { - newVialData.splice(i, 1); - break; - } + for (var i = 0; i < newQuadsData.length; i++) { + if (this.state.currentStep === this.state.quadsData[i].step) { + newQuadsData.splice(i, 1); + break; + } } - newVialData.push({ + newQuadsData.push({ temp:[], step: this.state.currentStep, - powerLevel:this.state.currentPowerLevel, + powerLevel:this.state.powerLevels[powerLevelIndex], enteredValues:this.state.enteredValues, }); - this.setState({vialData:newVialData}); - this.props.socket.emit('data', {config:{od:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], temp:['NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN']}}); + this.setState({quadsData:newQuadsData}); + //this.props.socket.emit('data', {config:{od:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], temp:['NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN','NaN']}}); } } @@ -287,18 +282,21 @@ class TempCal extends React.Component { }; handleBack = () => { - var disableForward; - var disableBackward; - var currentStep = this.state.currentStep - 1; - var deltaTempSetting = (currentStep - 1) * (this.state.deltaTempRange[1] - this.state.deltaTempRange[0])/(this.state.deltaTempSteps-1); - var newTempSet = this.state.roomTempAvg.map((a, i) => a - deltaTempSetting); - var buttonMeasureText = ''; - if (currentStep - 1 == 0){ - var buttonMeasureText = "RT" + let disableForward; + let disableBackward; + let currentStep = this.state.currentStep - 1; + let buttonMeasureText = this.state.powerLevels[currentStep - 1][0].toString().concat(' ADC'); + let buttonBackText = ''; + let buttonAdvanceText = '' + if (currentStep < 3) { + buttonAdvanceText = this.state.powerLevels[currentStep][0].toString().concat(' ADC'); } - else{ - var buttonMeasureText = "RT + " + Math.round(deltaTempSetting* this.state.slopeEstimate) + "\u00b0C"; - } + if (currentStep > 1) { + buttonBackText = this.state.powerLevels[currentStep - 2][0].toString().concat(' ADC'); + } + //let buttonBackText = this.state.powerLevels[currentStep - 2][0].toString(); + //let buttonAdvanceText = this.state.powerLevels[currentStep - 1][0].toString(); + if (this.state.currentStep === this.state.deltaTempSteps){ disableForward = false; @@ -311,24 +309,27 @@ class TempCal extends React.Component { disableForward: disableForward, disableBackward: disableBackward, currentStep: currentStep, - currentPowerLevel: newTempSet, - buttonMeasureText: buttonMeasureText + buttonMeasureText: buttonMeasureText, + buttonAdvanceText: buttonAdvanceText, + buttonBackText: buttonBackText }); }; handleAdvance = () => { - var disableForward; - var disableBackward; - var currentStep = this.state.currentStep + 1; - var deltaTempSetting = (currentStep - 1) * (this.state.deltaTempRange[1] - this.state.deltaTempRange[0])/(this.state.deltaTempSteps-1); - var newTempSet = this.state.roomTempAvg.map((a, i) => a - deltaTempSetting); - var buttonMeasureText = ''; - if (currentStep - 1 == 0){ - var buttonMeasureText = "RT" + let disableForward; + let disableBackward; + let currentStep = this.state.currentStep + 1; + let buttonMeasureText = this.state.powerLevels[currentStep - 1][0].toString().concat(' ADC'); + let buttonBackText = ''; + let buttonAdvanceText = '' + if (currentStep < 3) { + buttonAdvanceText = this.state.powerLevels[currentStep][0].toString().concat(' ADC'); } - else{ - var buttonMeasureText = "RT + " + Math.round(deltaTempSetting* this.state.slopeEstimate) + "\u00b0C"; - } + if (currentStep > 1) { + buttonBackText = this.state.powerLevels[currentStep - 2][0].toString().concat(' ADC'); + } + //let buttonBackText = this.state.powerLevels[currentStep - 2][0].toString(); + //let buttonAdvanceText = this.state.powerLevels[currentStep - 1][0].toString(); if (this.state.currentStep === 1){ disableBackward = false; @@ -341,8 +342,9 @@ class TempCal extends React.Component { disableForward: disableForward, disableBackward: disableBackward, currentStep: currentStep, - currentPowerLevel: newTempSet, - buttonMeasureText: buttonMeasureText + buttonMeasureText: buttonMeasureText, + buttonAdvanceText: buttonAdvanceText, + buttonBackText: buttonBackText }); }; @@ -375,20 +377,27 @@ class TempCal extends React.Component { }; handleRecordedData = (currentStep) => { - var displayedData = Array(16).fill(''); - var vialData = this.state.vialData; - for (var i = 0; i < vialData.length; i++) { - if (currentStep === this.state.vialData[i].step) { - displayedData = this.state.vialData[i].enteredValues; - break; - } - } + let displayedData = new Array(4).fill().map(() => Array(18).fill('')); + for (var i = 0; i < this.state.quadsData.length; i++) { + if (currentStep === this.state.quadsData[i].step) { + displayedData = JSON.parse(JSON.stringify(this.state.quadsData[i].enteredValues)); + break; + }; + }; this.setState({enteredValues: displayedData}) } handleTempInput = (tempValues) => { - this.setState({enteredValues: tempValues}); - } + let oldEnteredValues = this.state.enteredValues; + oldEnteredValues[this.state.selectedSmartQuad] = [tempValues[0],tempValues[1],tempValues[2],tempValues[3],tempValues[4],tempValues[5],tempValues[6],tempValues[7],tempValues[8],tempValues[9],tempValues[10],tempValues[11],tempValues[12],tempValues[13],tempValues[14],tempValues[15],tempValues[16],tempValues[17]]; + this.setState({enteredValues:oldEnteredValues}) + } + + handleSmartQuadSelection = (selectedSmartQuad) => { + this.setState({ + selectedSmartQuad: selectedSmartQuad + }); + } handleKeyboardInput = (input) => { var exptName; @@ -402,24 +411,29 @@ class TempCal extends React.Component { handleFinishExpt = (finishFlag) => { this.setState({alertOpen: true}) + console.log("Experiment Finished!"); + console.log(this.state.quadsData); + this.props.socket.emit("command", {param: "temp", value: this.state.powerLevels[1], immediate: true}); + var d = new Date(); var currentTime = d.getTime(); - var enteredValuesStructured = []; - var vialDataStructured = []; + var enteredValuesStructured = [new Array(3), new Array(3), new Array(3), new Array(3)]; + var quadDataStructured = [new Array(3), new Array(3), new Array(3), new Array(3)]; // TODO: Change data structure so that we don't have to do this transformation. Would require other code restructure // Data should be saved vial -> step -> data format, not step -> vial -> data as it is here. - for(var i = 0; i < this.state.vialData.length; i++) { - for(var j = 0; j < this.state.vialData[i].enteredValues.length; j++) { - if(!enteredValuesStructured[j]) { - enteredValuesStructured.push([]); - vialDataStructured.push(new Array(3).fill([])); + for (var i = 0; i < this.state.quadLabels.length; i++) { + for(var j = 0; j < this.state.quadsData.length; j++) { + let enteredValuesTemp = new Array(18).fill(0); + for (var k = 0; k < this.state.quadsData[j].enteredValues[i].length; k++) { + enteredValuesTemp[k] = parseFloat(this.state.quadsData[j].enteredValues[i][k]); } - enteredValuesStructured[j].push(parseFloat(this.state.vialData[i].enteredValues[j])); - vialDataStructured[j][i] = this.state.vialData[i].temp[j]; + enteredValuesStructured[i][j] = JSON.parse(JSON.stringify(enteredValuesTemp)); + quadDataStructured[i][j] = JSON.parse(JSON.stringify(this.state.quadsData[j].temp[i])) } } - var saveData = {name: this.state.experimentName, calibrationType: "temperature", timeCollected: currentTime, measuredData: enteredValuesStructured, fits: [], raw: [{param: 'temp', vialData: vialDataStructured}]} + var saveData = {name: this.state.experimentName, calibrationType: "temperature", timeCollected: currentTime, measuredData: enteredValuesStructured, fits: [], raw: [{param: 'temp', quadsData: quadDataStructured}]} + console.log(saveData); this.props.socket.emit('setrawcalibration', saveData); } @@ -460,16 +474,16 @@ class TempCal extends React.Component { let measureButton; let statusText; - if ((this.state.vialData.length == 0) && (this.state.equilibrateState)) { - statusText =

Load vessels w/ 15 mL of room temp water.

+ if ((this.state.quadsData.length == 0) && (this.state.equilibrateState)) { + statusText =

Load vials w/ 5 mL of room temp water.

} - else if ((this.state.vialData.length == 0) && (!this.state.equilibrateState)) { - statusText =

Heaters turned off. Let equilibrate, then enter values.

+ else if ((this.state.quadsData.length == 0) && (!this.state.equilibrateState)) { + statusText =

Peltiers OFF - Let equilibrate, select SQ, and enter values.

} - else if ((this.state.vialData.length !== 0) && (this.state.equilibrateState)) { + else if ((this.state.quadsData.length !== 0) && (this.state.equilibrateState)) { statusText =

{this.state.readsFinished}/{this.state.deltaTempSteps} Measurements Made

} - else if ((this.state.vialData.length !== 0) && (!this.state.equilibrateState)) { + else if ((this.state.quadsData.length !== 0) && (!this.state.equilibrateState)) { statusText =

Temperature set! Let equilibrate, then enter values.

} @@ -482,9 +496,9 @@ class TempCal extends React.Component { onClick = {this.startRead}> {this.state.buttonMeasureText} ; - for (var i = 0; i < this.state.vialData.length; i++) { - if ((this.state.currentStep === this.state.vialData[i].step) && (typeof(this.state.vialData[i].temp[0]) !== "undefined")) { - if (this.state.vialData[i].temp[0].length === this.state.timesRead){ + for (var i = 0; i < this.state.quadsData.length; i++) { + if ((this.state.currentStep === this.state.quadsData[i].step) && (typeof(this.state.quadsData[i].temp[0]) !== "undefined")) { + if (this.state.quadsData[i].temp[0].length === this.state.timesRead){ measureButton =
; backArrow = } else { - graphs =
; - calInputs = ; + if (this.state.selectedSmartQuad == 0) { + tempCalInput = ; - tempCalTitles = ; - linearProgress =
+ } else if (this.state.selectedSmartQuad == 1) { + tempCalInput = + } else if (this.state.selectedSmartQuad == 2) { + tempCalInput = + } else if (this.state.selectedSmartQuad == 3) { + tempCalInput = + }; + + tempCalTitles = ; + linearProgress =
+ readProgress = {this.state.quadProgress} + onSmartQuadSelection = {this.handleSmartQuadSelection} + quadLabels = {this.state.smartQuadLabels}/> {linearProgress} @@ -628,10 +673,9 @@ class TempCal extends React.Component {
{backArrow} {calGraphic} - {calInputs} + {tempCalInput} {graphs} {progressButtons} - {progressButtons} {tempCalTitles} diff --git a/app/components/calibrationInputs/CalInputs.js b/app/components/calibrationInputs/CalInputs.js index 88df15f9..1bc86fd2 100644 --- a/app/components/calibrationInputs/CalInputs.js +++ b/app/components/calibrationInputs/CalInputs.js @@ -9,13 +9,14 @@ import Card from '@material-ui/core/Card'; import { withStyles } from '@material-ui/core/styles'; -const densityButtons = Array.from(Array(16).keys()) +const densityButtons = Array.from(Array(18).keys()) const cardStyles = theme => ({ cardIndividualInput: { width: 200, - height: 55, + height: 50, backgroundColor: 'black', + marginBottom: '2px' } }); @@ -61,7 +62,7 @@ class CalInput extends React.Component { clickBack = (event,value) => { let nextID = this.state.numPadID if (this.state.numPadID == 0){ - nextID = nextID + 15 + nextID = nextID + 17 } else { nextID = nextID - 1 @@ -71,8 +72,8 @@ class CalInput extends React.Component { clickForward = (event,value) => { let nextID = this.state.numPadID - if (this.state.numPadID == 15){ - nextID = nextID - 15 + if (this.state.numPadID == 17){ + nextID = nextID - 17 } else { nextID = nextID + 1 @@ -85,7 +86,6 @@ class CalInput extends React.Component { const { open } = this.state; const { classes, theme } = this.props; - return (
@@ -96,8 +96,8 @@ class CalInput extends React.Component { diff --git a/app/components/calibrationInputs/NumPad.js b/app/components/calibrationInputs/NumPad.js index 10335aa3..d41be190 100644 --- a/app/components/calibrationInputs/NumPad.js +++ b/app/components/calibrationInputs/NumPad.js @@ -91,7 +91,7 @@ class NumPad extends React.Component { } handleNumButtons = (id) => { - let newString = this.state.inputString + let newString = this.state.inputString; if (newString.length < 7){ if (id == '.'){ if (!(newString.indexOf('.') > -1)){ diff --git a/app/components/calibrationInputs/ODCalGUI.js b/app/components/calibrationInputs/ODCalGUI.js new file mode 100644 index 00000000..4e689f32 --- /dev/null +++ b/app/components/calibrationInputs/ODCalGUI.js @@ -0,0 +1,231 @@ +import React, { Component } from 'react' +import ReactDOM from 'react-dom'; +import ODVialItem from './ODVialItem'; +import QuadOutline from './QuadOutline'; + +function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabels) { + let vialOpacitiesNew = [[],[],[],[]]; + let generalOpacityNew = [[],[],[],[]]; + let valueInputsNew = [[],[],[],[]]; + let vialLabelsNew = [[],[],[],[]]; + let zippedSamples = new Array(4); + for (var i = 0; i < zippedSamples.length; i++) { + zippedSamples[i] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],]; + } + + for (var i = 0; i < odState.length; i++) { + for (var j = 0; j < odState[i].length; j++) { + valueInputsNew[i][j] = valueInputs[i][odState[i][j]]; + vialOpacitiesNew[i][j] = vialOpacities[i][odState[i][j]]; + vialLabelsNew[i][j] = vialLabels[i][odState[i][j]]; + + if ( isNaN(valueInputsNew[i][j]) && (typeof valueInputsNew[i][j] !== 'string')) { + generalOpacityNew[i][j] = 0; + } + else{ + generalOpacityNew[i][j] = generalOpacity[i][odState[i][j]]; + } + } + } + + for (var i = 0; i < zippedSamples.length; i++) { + for (var j = 0; j < odState[i].length; j++) { + let temp = new Array(5); + temp[0] = odState[i][j]; + temp[1] = vialOpacitiesNew[i][j]; + temp[2] = generalOpacityNew[i][j]; + temp[3] = valueInputsNew[i][j]; + temp[4] = vialLabelsNew[i][j]; + zippedSamples[i][j] = temp; + } + } + //console.log(zippedSamples) + return zippedSamples +} +//generalOpacity = newState.map((x, i) => x[2]) + +function unzipValues(zippedArray) { + let odState = [[],[],[],[]]; + let vialOpacities = [[],[],[],[]]; + let generalOpacity = [[],[],[],[]]; + let valueInputs = [[],[],[],[]]; + let vialLabels = [[],[],[],[]]; + + //console.log(zippedArray) + for (var i = 0; i < zippedArray.length; i++) { + odState[i] = zippedArray[i].map((x,j) => x[0]); + vialOpacities[i] = zippedArray[i].map((x,j) => x[1]); + generalOpacity[i] = zippedArray[i].map((x,j) => x[2]); + valueInputs[i] = zippedArray[i].map((x,j) => x[3]); + vialLabels[i] = zippedArray[i].map((x,j) => x[4]) + } + + let vialOpacitiesNew = [[],[],[],[]]; + let generalOpacityNew = [[],[],[],[]]; + let valueInputsNew = [[],[],[],[]]; + let vialLabelsNew = [[],[],[],[]]; + + for (var i = 0; i < odState.length; i++) { + for (var j = 0; j < odState[i].length; j++) { + vialOpacitiesNew[i][odState[i][j]] = vialOpacities[i][j]; + generalOpacityNew[i][odState[i][j]] = generalOpacity[i][j]; + valueInputsNew[i][odState[i][j]] = valueInputs[i][j]; + vialLabelsNew[i][odState[i][j]] = vialLabels[i][j]; + } + } + + return [ odState, vialOpacitiesNew, generalOpacityNew, valueInputsNew, vialLabelsNew] +} + + + +export default class ODCalGUI extends Component { + constructor(props) { + super(props); + this.state = { + odState: Array(4).fill([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]), + vialOpacities: this.props.vialOpacities, + generalOpacity: this.props.generalOpacity, + valueInputs: this.props.valueInputs, + vialLabels: this.props.vialLabels, + zipped: [[],[],[],[]], + readProgress: this.props.readProgress, + selectedSmartQuad: NaN + }; + } + + componentDidUpdate(prevProps) { + if ((this.props.generalOpacity !== prevProps.generalOpacity) || this.props.vialOpacities !== prevProps.vialOpacities || this.props.valueInputs !== prevProps.valueInputs || this.props.vialLabels !== prevProps.vialLabels) { + let zippedSamples = zipValues(this.state.odState, this.props.vialOpacities, this.props.generalOpacity, this.props.valueInputs, this.props.vialLabels) + this.setState({ + generalOpacity: this.props.generalOpacity, + vialOpacities: this.props.vialOpacities, + valueInputs: this.props.valueInputs, + vialLabels: this.props.vialLabels, + zipped: zippedSamples, + }) + } + if (this.props.readProgress !== prevProps.readProgress) { + this.setState({ readProgress: this.props.readProgress}) + } + } + + handleBack = (event) => { + let zippedSamples = zipValues(this.state.odState, this.state.vialOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.vialLabels) + let newState = new Array(zippedSamples.length); + for (var i = 0; i < newState.length; i++) { + newState[i] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],]; + } + for (var i = 0; i < zippedSamples.length; i++) { + newState[i][17] = zippedSamples[i][0] + newState[i][0] = zippedSamples[i][1] + newState[i][1] = zippedSamples[i][2] + newState[i][2] = zippedSamples[i][3] + newState[i][3] = zippedSamples[i][4] + newState[i][4] = zippedSamples[i][5] + newState[i][5] = zippedSamples[i][6] + newState[i][6] = zippedSamples[i][7] + newState[i][7] = zippedSamples[i][8] + newState[i][8] = zippedSamples[i][9] + newState[i][9] = zippedSamples[i][10] + newState[i][10] = zippedSamples[i][11] + newState[i][11] = zippedSamples[i][12] + newState[i][12] = zippedSamples[i][13] + newState[i][13] = zippedSamples[i][14] + newState[i][14] = zippedSamples[i][15] + newState[i][15] = zippedSamples[i][16] + newState[i][16] = zippedSamples[i][17] + } + + let unzipped = unzipValues(newState) + let odState = unzipped[0] + let vialOpacities = unzipped[1] + let generalOpacity = unzipped[2] + let valueInputs = unzipped[3] + let vialLabels = unzipped[4] + + this.setState({ + zipped: newState, + odState: odState, + vialOpacities: vialOpacities, + generalOpacity: generalOpacity, + valueInputs: valueInputs, + vialLabels: vialLabels, + }); + } + + handleAdvance = (event) => { + let zippedSamples = zipValues(this.state.odState, this.state.vialOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.vialLabels) + //console.log(zippedSamples) + let newState = new Array(zippedSamples.length); + for (var i = 0; i < newState.length; i++) { + newState[i] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],]; + } + for (var i = 0; i < zippedSamples.length; i++) { + newState[i][0] = zippedSamples[i][17] + newState[i][1] = zippedSamples[i][0] + newState[i][2] = zippedSamples[i][1] + newState[i][3] = zippedSamples[i][2] + newState[i][4] = zippedSamples[i][3] + newState[i][5] = zippedSamples[i][4] + newState[i][6] = zippedSamples[i][5] + newState[i][7] = zippedSamples[i][6] + newState[i][8] = zippedSamples[i][7] + newState[i][9] = zippedSamples[i][8] + newState[i][10] = zippedSamples[i][9] + newState[i][11] = zippedSamples[i][10] + newState[i][12] = zippedSamples[i][11] + newState[i][13] = zippedSamples[i][12] + newState[i][14] = zippedSamples[i][13] + newState[i][15] = zippedSamples[i][14] + newState[i][16] = zippedSamples[i][15] + newState[i][17] = zippedSamples[i][16] + } + + let unzipped = unzipValues(newState) + //console.log(unzipped) + let odState = unzipped[0] + let vialOpacities = unzipped[1] + let generalOpacity = unzipped[2] + let valueInputs = unzipped[3] + let vialLabels = unzipped[4] + + this.setState({ + zipped: newState, + odState: odState, + vialOpacities: vialOpacities, + generalOpacity: generalOpacity, + valueInputs: valueInputs, + vialLabels: vialLabels, + }); + }; + + handleSmartQuadSelection = (selectedSmartQuad) => { + this.setState({ + selectedSmartQuad: selectedSmartQuad + }, () => { + this.props.onSmartQuadSelection(this.state.selectedSmartQuad); + }); + } + + render() { + const { odState } = this.state; + let outputs; + if (this.props.displayGraphs) { + outputs =
+ } else { + outputs = +
+ + +
+ } + return( +
{outputs}
+ ); + } +} diff --git a/app/components/calibrationInputs/ODVialItem.js b/app/components/calibrationInputs/ODVialItem.js new file mode 100644 index 00000000..5867d2b3 --- /dev/null +++ b/app/components/calibrationInputs/ODVialItem.js @@ -0,0 +1,113 @@ +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import posed, { PoseGroup } from 'react-pose'; +import shuffle from './shuffle'; + +const Item = posed.li({ + flip: { + scale: 1, + transition: { + scale: { + type: 'spring', + velocity: .5, + stiffness:1000, + } + } + } +}); + +export default class ODVialItem extends Component { + constructor(props) { + super(props); + this.state = { + items: this.props.currentValue, + keys: [[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],[36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],[54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71]] + }; + } + + componentDidUpdate(prevProps) { + if (this.props.currentValue !== prevProps.currentValue) { + this.setState({ items: this.props.currentValue}) + } + } + + clickButton = (id) => { + console.log(id) + } + + render() { + + return( +
    +
      + + {this.state.items[2].map((items,index) => ( + +
      +
      +

      {items[4]}

      +

      {items[3]}

      +       + ))} +       +
    +
      + + {this.state.items[3].map((items,index) => ( + +
      +
      +

      {items[4]}

      +

      {items[3]}

      +       + ))} +       +
    +
      + + {this.state.items[0].map((items,index) => ( + +
      +
      +

      {items[4]}

      +

      {items[3]}

      +       + ))} +       +
    +
      + + {this.state.items[1].map((items,index) => ( + +
      +
      +

      {items[4]}

      +

      {items[3]}

      +       + ))} +       +
    +
+ ); + } +} diff --git a/app/components/calibrationInputs/QuadOutline.js b/app/components/calibrationInputs/QuadOutline.js new file mode 100644 index 00000000..8bc63813 --- /dev/null +++ b/app/components/calibrationInputs/QuadOutline.js @@ -0,0 +1,128 @@ +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + + +const styles = theme => ({ + progressRoot:{ + margin: '-1.52px 0px 0px -1.2px' + }, + colorPrimary: { + backgroundColor: 'white', + }, + bar: { + backgroundColor: '#f58245', + }, + circleProgressColor: { + color: '#f58245', + }, + circle: { + strokeWidth: '3px', + }, + progressBar: { + flexGrow: 1, + margin: '240px 0px 0px 0px', + height: 8, + } +}); + + + +class QuadOutline extends React.Component { + constructor(props) { + super(props); + this.state = { + readProgress: this.props.readProgress, + items: [2,3,0,1], + selectedSmartQuad: 0 + }; + } + + componentDidUpdate(prevProps) { + if (this.props.readProgress !== prevProps.readProgress) { + this.setState({ readProgress: this.props.readProgress}) + } + } + + handleButton = (id) => { + this.setState({ + selectedSmartQuad: id + }, () => { + this.props.onSmartQuadSelection(id); + }); + } + + render() { + const { classes, theme } = this.props; + const { readProgress } = this.state; + const selectedSmartQuad = this.state.selectedSmartQuad; + let className; + let smartQuads; + if (this.props.type == "temp") { + className = "tempOutlineWrapper"; + smartQuads = this.state.items.map((items,index) => ( +
+ {selectedSmartQuad == items + ? + + : } +

Smart Quad {items}

+
)); + } else if (this.props.type == "od") { + className = "odOutlineWrapper"; + smartQuads = this.state.items.map((items,index) => ( +
+ {selectedSmartQuad == items + ? + + : } +

Smart Quad {items}

+
)); + } + + return( +
    + {smartQuads} +
+ ); + } +} + + +export default withStyles(styles, { withTheme: true })(QuadOutline); diff --git a/app/components/calibrationInputs/CalGUI.js b/app/components/calibrationInputs/TempCalGUI.js similarity index 61% rename from app/components/calibrationInputs/CalGUI.js rename to app/components/calibrationInputs/TempCalGUI.js index ca9bbd9a..319d519b 100644 --- a/app/components/calibrationInputs/CalGUI.js +++ b/app/components/calibrationInputs/TempCalGUI.js @@ -1,19 +1,19 @@ import React, { Component } from 'react' import ReactDOM from 'react-dom'; import VialItem from './VialItem'; -import VialOutline from './VialOutline'; +import QuadOutline from './QuadOutline'; -function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabels) { - let vialOpacitiesNew = [] - let generalOpacityNew = [] - let valueInputsNew = [] - let vialLabelsNew = [] +function zipValues(odState, quadOpacities, generalOpacity, valueInputs, quadLabels) { + let quadOpacitiesNew = []; + let generalOpacityNew = []; + let valueInputsNew = []; + let quadLabelsNew = []; var i; for (i = 0; i < odState.length; i++) { valueInputsNew[i] = valueInputs[odState[i]] - vialOpacitiesNew[i] = vialOpacities[odState[i]] - vialLabelsNew[i] = vialLabels[odState[i]] + quadOpacitiesNew[i] = quadOpacities[odState[i]] + quadLabelsNew[i] = quadLabels[odState[i]] if ( isNaN(valueInputsNew[i]) && (typeof valueInputsNew[i] !== 'string')) { generalOpacityNew[i] = 0; @@ -23,7 +23,7 @@ function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabe } } - let zippedSamples = odState.map((x, i) => [x, vialOpacitiesNew[i], generalOpacityNew[i], valueInputsNew[i], vialLabelsNew[i]]); + let zippedSamples = odState.map((x, i) => [x, quadOpacitiesNew[i], generalOpacityNew[i], valueInputsNew[i], quadLabelsNew[i]]); return zippedSamples } @@ -31,51 +31,52 @@ function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabe function unzipValues(zippedArray) { let odState = zippedArray.map((x, i) => x[0]) - let vialOpacities = zippedArray.map((x, i) => x[1]) + let quadOpacities = zippedArray.map((x, i) => x[1]) let generalOpacity = zippedArray.map((x, i) => x[2]) let valueInputs = zippedArray.map((x, i) => x[3]) - let vialLabels = zippedArray.map((x, i) => x[4]) + let quadLabels = zippedArray.map((x, i) => x[4]) - let vialOpacitiesNew = [] + let quadOpacitiesNew = [] let generalOpacityNew = [] let valueInputsNew = [] - let vialLabelsNew = [] + let quadLabelsNew = [] var i; for (i = 0; i < odState.length; i++) { - vialOpacitiesNew[odState[i]] = vialOpacities[i] + quadOpacitiesNew[odState[i]] = quadOpacities[i] generalOpacityNew[odState[i]] = generalOpacity[i] valueInputsNew[odState[i]] = valueInputs[i] - vialLabelsNew[odState[i]] = vialLabels[i] + quadLabelsNew[odState[i]] = quadLabels[i] } - return [ odState, vialOpacitiesNew, generalOpacityNew, valueInputsNew, vialLabelsNew] + return [ odState, quadOpacitiesNew, generalOpacityNew, valueInputsNew, quadLabelsNew] } -export default class ODcalGUI extends Component { +export default class TempCalGUI extends Component { constructor(props) { super(props); this.state = { - odState: [12,13,14,15,8,9,10,11,4,5,6,7,0,1,2,3], - vialOpacities: this.props.vialOpacities, + odState: [2,3,0,1], + quadOpacities: this.props.quadOpacities, generalOpacity: this.props.generalOpacity, valueInputs: this.props.valueInputs, - vialLabels: this.props.vialLabels, + quadLabels: this.props.quadLabels, zipped: [], readProgress: this.props.readProgress, + displayGraphs: this.props.displayGraphs, + selectedSmartQuad: NaN }; } componentDidUpdate(prevProps) { - if ((this.props.generalOpacity !== prevProps.generalOpacity) || this.props.vialOpacities !== prevProps.vialOpacities || this.props.valueInputs !== prevProps.valueInputs || this.props.vialLabels !== prevProps.vialLabels) { - let zippedSamples = zipValues(this.state.odState, this.props.vialOpacities, this.props.generalOpacity, this.props.valueInputs, this.props.vialLabels) - console.log(zippedSamples) + if ((this.props.generalOpacity !== prevProps.generalOpacity) || this.props.quadOpacities !== prevProps.quadOpacities || this.props.valueInputs !== prevProps.valueInputs || this.props.quadLabels !== prevProps.quadLabels) { + let zippedSamples = zipValues(this.state.odState, this.props.quadOpacities, this.props.generalOpacity, this.props.valueInputs, this.props.quadLabels) this.setState({ generalOpacity: this.props.generalOpacity, - vialOpacities: this.props.vialOpacities, + quadOpacities: this.props.quadOpacities, valueInputs: this.props.valueInputs, - vialLabels: this.props.vialLabels, + quadLabels: this.props.quadLabels, zipped: zippedSamples, }) } @@ -85,7 +86,7 @@ export default class ODcalGUI extends Component { } handleBack = (event) => { - let zippedSamples = zipValues(this.state.odState, this.state.vialOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.vialLabels) + let zippedSamples = zipValues(this.state.odState, this.state.quadOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.quadLabels) let newState = [] newState[7] = zippedSamples[0] newState[0] = zippedSamples[1] @@ -106,23 +107,23 @@ export default class ODcalGUI extends Component { let unzipped = unzipValues(newState) let odState = unzipped[0] - let vialOpacities = unzipped[1] + let quadOpacities = unzipped[1] let generalOpacity = unzipped[2] let valueInputs = unzipped[3] - let vialLabels = unzipped[4] + let quadLabels = unzipped[4] this.setState({ zipped: newState, odState: odState, - vialOpacities: vialOpacities, + quadOpacities: quadOpacities, generalOpacity: generalOpacity, valueInputs: valueInputs, - vialLabels: vialLabels, + quadLabels: quadLabels, }); } handleAdvance = (event) => { - let zippedSamples = zipValues(this.state.odState, this.state.vialOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.vialLabels) + let zippedSamples = zipValues(this.state.odState, this.state.quadOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.quadLabels) let newState = [] newState[0] = zippedSamples[7] newState[1] = zippedSamples[0] @@ -143,18 +144,26 @@ export default class ODcalGUI extends Component { let unzipped = unzipValues(newState) let odState = unzipped[0] - let vialOpacities = unzipped[1] + let quadOpacities = unzipped[1] let generalOpacity = unzipped[2] let valueInputs = unzipped[3] - let vialLabels = unzipped[4] + let quadLabels = unzipped[4] this.setState({ zipped: newState, odState: odState, - vialOpacities: vialOpacities, + quadOpacities: quadOpacities, generalOpacity: generalOpacity, valueInputs: valueInputs, - vialLabels: vialLabels, + quadLabels: quadLabels, + }); + }; + + handleSmartQuadSelection = (selectedSmartQuad) => { + this.setState({ + selectedSmartQuad: selectedSmartQuad + }, () => { + this.props.onSmartQuadSelection(this.state.selectedSmartQuad); }); } @@ -162,22 +171,21 @@ export default class ODcalGUI extends Component { const { odState } = this.state; let outputs; if (this.props.displayGraphs) { - outputs =
+ outputs =
} else { - outputs = -
+ outputs =
- + currentValue = {this.state.zipped}/> +
} return(
{outputs}
- - ); +); } } diff --git a/app/components/calibrationInputs/VialItem.js b/app/components/calibrationInputs/VialItem.js index f66261c0..8005dc72 100644 --- a/app/components/calibrationInputs/VialItem.js +++ b/app/components/calibrationInputs/VialItem.js @@ -42,15 +42,15 @@ export default class VialItem extends Component { {this.state.items.map((items,index) => (
-

{items[4]}

-

{items[3]}

+

{items[4]}

+

{items[3]}

))} diff --git a/app/components/graphing/VialArrayBtns.js b/app/components/graphing/VialArrayBtns.js index 18009879..c1e544e2 100644 --- a/app/components/graphing/VialArrayBtns.js +++ b/app/components/graphing/VialArrayBtns.js @@ -17,12 +17,12 @@ const styles = theme => ({ borderRadius: '10px', display: 'flex', width: '300px', - padding: '0px 0px 15px 0px', - justifyContent: 'center', + padding: '0px 0px 30px 0px', + justifyContent: 'left', }, label: { color: 'white', - textAlign: 'center', + textAlign: 'left', fontSize: '20px', fontWeight: 'bold', '&$focused': { diff --git a/app/components/graphing/VialArrayGraph.js b/app/components/graphing/VialArrayGraph.js index ff95335c..0dff23d7 100644 --- a/app/components/graphing/VialArrayGraph.js +++ b/app/components/graphing/VialArrayGraph.js @@ -25,12 +25,27 @@ const styles = theme => ({ backgroundColor: 'black', position: 'absolute', top: '570px', - left: '270px' + left: '275px' }, yaxisTitle: { backgroundColor: 'black', position: 'absolute', - top: '390px', + top: '385px', + left: '-25px', + transform: 'rotate(-90deg)', + textAlign: 'center' + }, + xaxisTitleCalibration: { + display: 'flex', + backgroundColor: 'black', + position: 'absolute', + top: '570px', + left: '390px' + }, + yaxisTitleCalibration: { + backgroundColor: 'black', + position: 'absolute', + top: '385px', left: '-60px', transform: 'rotate(-90deg)', textAlign: 'center' @@ -42,7 +57,7 @@ class VialArrayGraph extends React.Component { constructor(props) { super(props); this.state = { - option: this.initializeGraphs(), + option: this.initializeGraphs(0), ymax: this.props.ymax, ymin: -0.1, timePlotted: this.props.timePlotted, @@ -54,6 +69,7 @@ class VialArrayGraph extends React.Component { data: [], loaded: false, missingData: false, + selectedSmartQuad: this.props.selectedSmartQuad, useDatazoomForAll: false, datazoomStart: 0, datazoomEnd: 100, @@ -66,6 +82,10 @@ class VialArrayGraph extends React.Component { timeTicket = null; componentDidUpdate(prevProps) { + if (this.props.selectedSmartQuad !== prevProps.selectedSmartQuad) { + this.setState({ selectedSmartQuad: this.props.selectedSmartQuad}, + () => this.getData()) + } if (this.props.activePlot !== prevProps.activePlot) { this.setState({ activePlot: this.props.activePlot}, () => this.getData()) @@ -117,10 +137,10 @@ class VialArrayGraph extends React.Component { } }; - initializeGraphs = () => { + initializeGraphs = (quad) => { var option = []; - for (var i = 0; i < 16; i++) { - option[i] = this.allVials(i, [], null, null, null) + for (var i = 0; i < 18; i++) { + option[i] = this.allVials(i, [], null, null, null, null, quad) } return option } @@ -151,7 +171,7 @@ class VialArrayGraph extends React.Component { }) } - + getStandardDeviation = (array, mean) => { var n = array.length; var sumSquares = 0 @@ -164,17 +184,18 @@ class VialArrayGraph extends React.Component { getData = () => { var option = []; var compiled_data = []; var calibrationData = []; var compiledCalibrationData = []; var errorData = []; var compiledErrorData = []; - if (this.state.activePlot == 'ALL'){ + if (this.state.activePlot == 'ALL') { console.log('Plotting All Vials!'); if (this.state.dataType.type !== 'calibration' && !fs.existsSync(path.join(this.props.exptDir,'data'))) { - this.setState({missingData: true}); + option = this.initializeGraphs(this.state.selectedSmartQuad) + this.setState({option: option, missingData: true}); return; } - for (var i = 0; i < 16; i++) { + for (var i = 0; i < 18; i++) { var maxDataPoint = this.state.ymax; var minDataPoint = this.state.ymin; - var odPath = path.join(this.props.exptDir, 'data','OD', 'vial' + i + '_OD.txt'); - var tempPath = path.join(this.props.exptDir, 'data', 'temp', 'vial' + i + '_temp.txt'); + var odPath = path.join(this.props.exptDir, 'data','quad_' + this.state.selectedSmartQuad.toString(), 'OD', 'quad' + this.state.selectedSmartQuad.toString() + '_vial' + i.toString() + '_OD.txt'); + var tempPath = path.join(this.props.exptDir, 'data','quad_' + this.state.selectedSmartQuad.toString(), 'temp', 'quad' + this.state.selectedSmartQuad.toString() + '_vial' + i.toString() + '_temp.txt'); var data = []; var ymin; var calibrationData = []; var errorData = []; var timePlotted = Number.MAX_SAFE_INTEGER; if (this.state.timePlotted !== 'ALL' && this.state.dataType.type !== 'calibration') { @@ -182,47 +203,47 @@ class VialArrayGraph extends React.Component { } if (this.props.dataType.type === 'calibration') { - var vialData; + var quadData; try { - if (this.state.dataType.param === 'od90') { - vialData = this.state.passedData.vialData[this.state.dataType.param][i] - for (var j = 0; j < vialData.length; j++) { - var dataAverage = 0; - for (var k = 0; k < vialData[j].length; k++) { - dataAverage = dataAverage + vialData[j][k] - } - dataAverage = dataAverage / vialData[j].length; - if (dataAverage > maxDataPoint) { - maxDataPoint = dataAverage; - } - if (dataAverage < minDataPoint) { - minDataPoint = Math.max(-0.1, dataAverage); - } - data.push([this.state.passedData.enteredValuesFloat[j], dataAverage]); - if (this.state.passedData.enteredValuesFloat[j].length != 0 && !isNaN(dataAverage)) { - var stdDev = this.getStandardDeviation(vialData[j], dataAverage); - errorData.push([this.state.passedData.enteredValuesFloat[j], dataAverage + stdDev, dataAverage - stdDev]); - } + if (this.state.dataType.param === 'od90') { + quadData = this.state.passedData.quadsData[this.state.dataType.param][this.state.selectedSmartQuad][i] + for (var j = 0; j < Object.keys(quadData).length; j++) { + var dataAverage = 0; + for (var k = 0; k < quadData[j].length; k++) { + dataAverage = dataAverage + quadData[j][k] + } + dataAverage = dataAverage / quadData[j].length; + if (dataAverage > maxDataPoint) { + maxDataPoint = dataAverage; + } + if (dataAverage < minDataPoint) { + minDataPoint = Math.max(-0.1, dataAverage); + } + data.push([this.state.passedData.enteredValuesFloat[this.state.selectedSmartQuad][j], dataAverage]); + if (this.state.passedData.enteredValuesFloat[this.state.selectedSmartQuad][j].length != 0 && !isNaN(dataAverage)) { + var stdDev = this.getStandardDeviation(quadData[j], dataAverage); + errorData.push([this.state.passedData.enteredValuesFloat[this.state.selectedSmartQuad][j], dataAverage + stdDev, dataAverage - stdDev]); } } - if (this.state.dataType.param === 'temp') { - vialData = this.state.passedData.vialData; - for (var j = 0; j < vialData.length; j++) { - var tempData = vialData[j].temp; - var averageTemp = 0; - for (var k = 0; k < tempData[i].length; k++) { - averageTemp = averageTemp + tempData[i][k]; - } - averageTemp = averageTemp / tempData[i].length; - if (dataAverage > maxDataPoint) { - maxDataPoint = dataAverage; - } - if (dataAverage < minDataPoint) { - minDataPoint = dataAverage; - } - data.push([averageTemp, parseFloat(vialData[j].enteredValues[i])]); + } + if (this.state.dataType.param === 'temp') { + quadData = this.state.passedData.vialData; + for (var j = 0; j < vialData.length; j++) { + var tempData = vialData[j].temp; + var averageTemp = 0; + for (var k = 0; k < tempData[i].length; k++) { + averageTemp = averageTemp + tempData[i][k]; } + averageTemp = averageTemp / tempData[i].length; + if (dataAverage > maxDataPoint) { + maxDataPoint = dataAverage; + } + if (dataAverage < minDataPoint) { + minDataPoint = dataAverage; + } + data.push([averageTemp, parseFloat(vialData[j].enteredValues[i])]); } + } } catch (error) { console.log(error); @@ -231,9 +252,10 @@ class VialArrayGraph extends React.Component { } if (this.state.passedData.calibration) { if (this.state.passedData.calibration.fits.length > 0) { + console.log(this.state.passedData.calibration.fits) var fit = this.state.passedData.calibration.fits[0]; - var coefficients = fit.coefficients[i] - var measuredData = this.state.passedData.calibration.measuredData[i]; + var coefficients = fit.coefficients[this.state.selectedSmartQuad][i] + var measuredData = this.state.passedData.calibration.measuredData[this.state.selectedSmartQuad].filter(element => element!=null); if (fit.type === 'sigmoid') { var a = coefficients[0]; var b = coefficients[1]; @@ -332,11 +354,11 @@ class VialArrayGraph extends React.Component { compiled_data[i] = data; compiledCalibrationData[i] = calibrationData; compiledErrorData[i] = errorData; - option[i] = this.allVials(i, data, minDataPoint, maxDataPoint, calibrationData, errorData) + option[i] = this.allVials(i, data, minDataPoint, maxDataPoint, calibrationData, errorData, this.state.selectedSmartQuad) } } else { - var odPath = path.join(this.props.exptDir, 'data', 'OD', 'vial' + this.state.activePlot + '_OD.txt'); - var tempPath = path.join(this.props.exptDir, 'data', 'temp', 'vial' + this.state.activePlot + '_temp.txt'); + var odPath = path.join(this.props.exptDir, 'data','quad_' + this.state.selectedSmartQuad.toString(), 'OD', 'quad' + this.state.selectedSmartQuad.toString() + '_vial' + this.state.activePlot.toString() + '_OD.txt'); + var tempPath = path.join(this.props.exptDir, 'data','quad_' + this.state.selectedSmartQuad.toString(), 'temp', 'quad' + this.state.selectedSmartQuad.toString() + '_vial' + this.state.activePlot.toString() + '_temp.txt'); var data = []; var ymin; var timePlotted = parseFloat(this.state.timePlotted.substring(0, this.state.timePlotted.length - 1)); @@ -347,7 +369,8 @@ class VialArrayGraph extends React.Component { odArray = fs.readFileSync(odPath).toString().split('\n'); } catch (error) { - this.setState({missingData: true}); + option.push(this.singleVial(this.state.activePlot, [], null, null, this.state.selectedSmartQuad)) + this.setState({option: option, missingData: true}); return; } var lastTime = odArray[odArray.length -2].split(',')[0] @@ -366,7 +389,8 @@ class VialArrayGraph extends React.Component { tempArray = fs.readFileSync(tempPath).toString().split('\n'); } catch (error) { - this.setState({missingData: true}); + option.push(this.singleVial(this.state.activePlot, [], null, null, this.state.selectedSmartQuad)) + this.setState({option: option, missingData: true}); return; } var lastTime = tempArray[tempArray.length -2].split(',')[0] @@ -378,23 +402,19 @@ class VialArrayGraph extends React.Component { } } compiled_data[i] = data; - option.push(this.singleVial(this.state.activePlot, data, ymin, this.state.ymax)) - } - if (this.state.dataType.type === 'calibration') { - compiled_data = compiled_data.slice(12,16).concat(compiled_data.slice(8,12)).concat(compiled_data.slice(4,8)).concat(compiled_data.slice(0,4)); - option = option.slice(12,16).concat(option.slice(8,12)).concat(option.slice(4,8)).concat(option.slice(0,4)); + option.push(this.singleVial(this.state.activePlot, data, ymin, this.state.ymax, this.state.selectedSmartQuad)) } this.setState({data: compiled_data, option: option, loaded: true, missingData: false}); } - allVials = (vial, data, ymin, ymax, calibrationData, errorData) => ({ + allVials = (vial, data, ymin, ymax, calibrationData, errorData, quad) => ({ title: { - text:'Vial ' + vial, - top: -5, - left: '41%', + text: 'SQ:' + quad + ' Vial ' + vial, + top: 0, + left: '22%', textStyle: { color: 'white', - fontSize: 20, + fontSize: 15, } }, dataZoom: { @@ -520,11 +540,11 @@ class VialArrayGraph extends React.Component { ] }); - singleVial = (vial, data, ymin, ymax) => ({ + singleVial = (vial, data, ymin, ymax, quad) => ({ title: { - text:'Vial ' + vial, + text:'SQ:' + quad + ' Vial:' + vial, top: 0, - left: '50%', + left: '40%', textStyle: { color: 'white', fontSize: 30, @@ -607,20 +627,24 @@ class VialArrayGraph extends React.Component { render() { const { classes, theme } = this.props; - var graphMargin = '25px 20px 0px 345px'; - var graphWidth = '190px'; + var graphMargin = '25px 20px 0px 300px'; + var graphWidth = '130px'; + let xaxisTitleClass = classes.xaxisTitle; + let yaxisTitleClass = classes.yaxisTitle; if (this.state.dataType.type === 'calibration') { - graphMargin = '30px 40px 0px 85px'; - graphWidth = '250px'; + graphMargin = '30px 0px 0px 90px'; + graphWidth = '165px'; + xaxisTitleClass = classes.xaxisTitleCalibration; + yaxisTitleClass = classes.yaxisTitleCalibration; } let loadingText; if (!this.state.loaded) { if (this.state.missingData) { - loadingText =

No Data!

+ loadingText =

No Data!

} else { loadingText = -

Loading...

+

Loading...

} } @@ -632,7 +656,7 @@ class VialArrayGraph extends React.Component {
+ style={{height: 190, width: graphWidth}} /> {loadingText}
))} @@ -656,10 +680,10 @@ class VialArrayGraph extends React.Component { return (
- + {this.state.xaxisName} - + {this.state.yaxisName} {graph} diff --git a/app/components/graphing/VialMenu.js b/app/components/graphing/VialMenu.js index 74955781..50604869 100644 --- a/app/components/graphing/VialMenu.js +++ b/app/components/graphing/VialMenu.js @@ -8,49 +8,118 @@ const styles = { }; -const vialButtons = [12,13,14,15,8,9,10,11,4,5,6,7,0,1,2,3]; +const vialButtons = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]; +const quadButtons = [2,3,0,1]; class VialMenu extends React.Component { constructor(props) { super(props); this.state = { + selectedSmartQuad: 0, + activePlot: 'ALL' }; } - handleVialBtns = (id) => { - this.props.onSelectGraph(id); + handlePlotToggle = (activePlot) => { + this.props.onSelectGraph(activePlot); + this.setState({activePlot:activePlot}) } - render() { - return ( + handleSmartQuadSelection = (smartQuad) => { + this.setState({selectedSmartQuad: smartQuad}); + this.props.onSmartQuadSelect(smartQuad); + } + + render() { + let plotToggle; + let title; + if (this.state.activePlot == 'ALL') { + title = `SQ${this.state.selectedSmartQuad} ALL` + plotToggle =
+ width:'200px', + height: '200px', + position: 'absolute', + margin: '440px 0px 0px 25px'}}> + +
+ } else { + plotToggle = +
+ +
+ } + + return ( -

INDIVIDUAL PLOTS

+
+

PLOT SELECTION

+
+ {quadButtons.map((quadButton, index) => ( + quadButton == this.state.selectedSmartQuad ? + : + + ))} +
+ {plotToggle}
+ margin: '440px 0px 0px 10px'}}> {vialButtons.map((vialButton, index) => ( + vialButton == this.state.activePlot ? + : ))}
- +
); diff --git a/app/components/python-shell/ScriptFinder.js b/app/components/python-shell/ScriptFinder.js index 8a8a24d4..fc1ee3b2 100755 --- a/app/components/python-shell/ScriptFinder.js +++ b/app/components/python-shell/ScriptFinder.js @@ -8,6 +8,7 @@ import parsePath from 'parse-filepath'; import jsonQuery from 'json-query'; import {MdCached} from 'react-icons/md'; import ReactTable from "react-table"; +import ReactTooltip from 'react-tooltip'; import {FaPlay, FaStop, FaPen, FaChartBar } from 'react-icons/fa'; import { Link } from 'react-router-dom'; import routes from '../../constants/routes.json'; @@ -48,7 +49,7 @@ moment.updateLocale('en', { function dirTree(dirname) { if (!fs.existsSync(dirname)) { - fs.mkdirSync(dirname); + fs.mkdirSync(dirname); } var folderStats = fs.lstatSync(dirname), info = { @@ -105,7 +106,7 @@ class ScriptFinder extends React.Component { if (this.props.exptLocation !== prevProps.exptLocation) { this.setState({exptLocation: this.props.exptLocation}, function() { this.handleRefresh(this.props.subFolder); - }); + }); } } @@ -224,9 +225,10 @@ loadFileDir = (subFolder, isScript) => { { Header: '', Cell: (cellInfo) => (
- - - {this.props.runningExpts.includes(path.join(this.state.exptLocation, this.props.subFolder, cellInfo.row.key)) ? : ()} + + + + {this.props.runningExpts.includes(path.join(this.state.exptLocation, this.props.subFolder, cellInfo.row.key)) ? : ()}
), width: 400 }]; diff --git a/app/main.dev.js b/app/main.dev.js index 549cd0bc..43365638 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -42,7 +42,8 @@ const { PythonShell } = require('python-shell'); const store = new Store({ defaults:{ running_expts: [], - first_visit: null + first_visit: null, + dpu_env: '/Users/ezirayimerwolle/.pyenv/versions/dpu' } }); var backgroundShells = []; @@ -73,7 +74,7 @@ function storeRunningExpts() { /* Handle startup of a python shell instance to run the DPU */ function startPythonExpt(exptDir, flag) { var scriptName = path.join(exptDir, 'eVOLVER.py'); - var pythonPath = path.join(store.get('dpu-env'), 'bin', 'python3'); + var pythonPath = path.join(store.get('dpu_env'), 'bin', 'python3'); if (isWin) { pythonPath = path.join(store.get('dpu-env'), 'Scripts', 'python'); } @@ -100,7 +101,7 @@ function startPythonExpt(exptDir, flag) { function startPythonCalibration(calibrationName, ip, fitType, fitName, params) { var scriptName = path.join(app.getPath('userData'), 'calibration', 'calibrate.py'); - var pythonPath = path.join(store.get('dpu-env'), 'bin', 'python3'); + var pythonPath = path.join(store.get('dpu_env'), 'bin', 'python3'); if (isWin) { pythonPath = path.join(store.get('dpu-env'), 'Scripts', 'python'); }