From 8dd3afba906bb91215c9d066267e16690171d0cf Mon Sep 17 00:00:00 2001 From: Ezira Yimer Wolle Date: Sun, 9 Jan 2022 15:05:04 -0500 Subject: [PATCH 01/12] Adjusted temperature calibration page layout to accomdate HT_eVOLVER. Group 'vials' based on quads and enable temperature data to be added for 72 vials. --- app/components/Calibrate.css | 43 +++-- app/components/TempCalibrate.js | 156 ++++++++++++------ app/components/calibrationInputs/CalGUI.js | 16 +- app/components/calibrationInputs/CalInputs.js | 12 +- .../calibrationInputs/TempVialOutline.js | 105 ++++++++++++ .../calibrationInputs/VialOutline.js | 4 +- 6 files changed, 264 insertions(+), 72 deletions(-) create mode 100644 app/components/calibrationInputs/TempVialOutline.js diff --git a/app/components/Calibrate.css b/app/components/Calibrate.css index a05d3bce8..c0b09177f 100644 --- a/app/components/Calibrate.css +++ b/app/components/Calibrate.css @@ -122,7 +122,7 @@ label { background: white; width: 90px; height: 90px; - margin: 25.5px 30px 25.5px 21px; + margin: 27px 30px 35px 21px; color: black; text-align: center; } @@ -171,23 +171,38 @@ ul { } .vialOutline { - width: 105px; - height: 105px; - margin: 18px; - border-radius: 60px; - border: 2px solid white; + width: 265px; + height: 265px; + margin: 40px 5px 0px 5px; + border: 5px solid blue; + background: transparent; +} + +.smartQuadOutlineSelected { + width: 265px; + height: 265px; + margin: 40px 5px 0px 5px; + border: 5px solid green; + background: transparent; +} + +.smartQuadOutlineDeSelected { + width: 265px; + height: 265px; + margin: 40px 5px 0px 5px; + border: 5px solid white; background: transparent; } .outlineWrapper { position: absolute; - margin: -579px 0px 0px -10px; + margin: -650px 0px 0px -7px; } .vialOutlineText { position: absolute; padding: 0px 0px 0px 0px; - margin: -17px 0px 0px 0px; + margin: -3px 0px 0px 70px; text-align: center; align-items: center; justify-content: center; @@ -226,7 +241,7 @@ ul { .stepOneBtn { position: absolute; - margin: 540px 0px 0px 63px; + margin: 560px 0px 0px 63px; height: 80px; width: 410px; background-color: white; @@ -237,7 +252,7 @@ ul { .measureBtn { position: absolute; - margin: 540px 0px 0px 196px; + margin: 560px 0px 0px 196px; height: 80px; width: 140px; background-color: white; @@ -255,7 +270,7 @@ ul { .tempAdvanceBtn { position: absolute; - margin: 540px 0px 0px 348px; + margin: 560px 0px 0px 348px; height: 70px; width: 120px; background-color: white; @@ -270,7 +285,7 @@ ul { .tempBackBtn { position: absolute; - margin: 540px 0px 0px 63px; + margin: 560px 0px 0px 63px; height: 70px; width: 120px; background-color: white; @@ -284,7 +299,7 @@ ul { .tempMeasureBtn { position: absolute; - margin: 540px 0px 0px 196px; + margin: 560px 0px 0px 196px; height: 70px; width: 140px; background-color: white; @@ -367,5 +382,3 @@ ul { text-align: center; margin: -6px 0px 0px 0px; } - - diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index 192f5a450..e3e8b3dc9 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -5,7 +5,10 @@ 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 LinearProgress from '@material-ui/core/LinearProgress'; @@ -27,7 +30,7 @@ const styles = { }, progressBar: { flexGrow: 1, - margin: '27px 0px 0px 0px', + margin: '10px 0px 0px 0px', height: 8, }, colorPrimary: { @@ -41,6 +44,13 @@ const styles = { }, circle: { strokeWidth: '3px', + }, + smartQuad0: { + width: 285, + height: 400, + borderWidth: '10px', + borderColor: 'blue', + margin: '0px 0px 0px 5000px' } }; @@ -82,15 +92,17 @@ class TempCal extends React.Component { 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(''), + enteredValues: Array(72).fill(''), generalOpacity: Array(16).fill(1), tempInputsFloat: [], readProgress: 0, - vialProgress: Array(16).fill(0), + vialProgress: 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: [], + selectedSmartQuad: 0, + vialLabels: ['S0','S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13','S14','S15','S16','S17'], + smartQuadLabels: ['TS0','TS1','TS2','TS3','TS4','TS5','TS6','TS7','TS8','TS9','TS10','TS11','TS12','TS13','TS14','TS15'], + quadsData: [], currentPowerLevel: [4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095], tempRawDelta: 500, timesRead: 3, @@ -116,10 +128,10 @@ class TempCal extends React.Component { resumeAnswers: ['New', 'Resume'], keyboardPrompt: "Enter File Name or press ESC to autogenerate." - }; + } this.props.socket.on('broadcast', function(response) { console.log(response); - var newVialData = this.state.vialData; + var newQuadsData = this.state.quadsData; let returnedTemps = generateVialLabel (response, this.state.tempStream, this.state.roomTempAvg) let tempStream = returnedTemps[0]; let valueInputs = returnedTemps[1]; @@ -142,19 +154,19 @@ class TempCal extends React.Component { 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) { @@ -164,10 +176,10 @@ class TempCal extends React.Component { } } this.handleUnlockBtns(); - console.log(this.state.vialData); - var readsFinished = this.state.vialData.length; + console.log(this.state.quadsData); + 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, @@ -237,22 +249,22 @@ class TempCal extends React.Component { } 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); + 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, enteredValues:this.state.enteredValues, }); - this.setState({vialData:newVialData}); + 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']}}); } } @@ -357,11 +369,11 @@ 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; + var displayedData = Array(72).fill(''); + var quadsData = this.state.quadsData + for (var i = 0; i < quadsData.length; i++) { + if (currentStep === this.state.quadsData[i].step) { + displayedData = this.state.quadsData[i].enteredValues; break; } } @@ -369,7 +381,29 @@ class TempCal extends React.Component { } handleTempInput = (tempValues) => { - this.setState({enteredValues: tempValues}); + let oldEnteredValues = this.state.enteredValues; + console.log(oldEnteredValues) + if (this.state.selectedSmartQuad == 0) { + oldEnteredValues.splice(0,18,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]); + }; + if (this.state.selectedSmartQuad == 1) { + oldEnteredValues.splice(18,18,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]); + }; + if (this.state.selectedSmartQuad == 2) { + oldEnteredValues.splice(36,18,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]); + }; + if (this.state.selectedSmartQuad == 3) { + oldEnteredValues.splice(54,18,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 + }, () => { + console.log(this.state.selectedSmartQuad) + }); } handleKeyboardInput = (input) => { @@ -392,14 +426,14 @@ class TempCal extends React.Component { // 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++) { + for(var i = 0; i < this.state.quadsData.length; i++) { + for(var j = 0; j < this.state.quadsData[i].enteredValues.length; j++) { if(!enteredValuesStructured[j]) { enteredValuesStructured.push([]); vialDataStructured.push(new Array(3).fill([])); } - enteredValuesStructured[j].push(parseFloat(this.state.vialData[i].enteredValues[j])); - vialDataStructured[j][i] = this.state.vialData[i].temp[j]; + enteredValuesStructured[j].push(parseFloat(this.state.quadsData[i].enteredValues[j])); + vialDataStructured[j][i] = this.state.quadsData[i].temp[j]; } } var saveData = {name: this.state.experimentName, calibrationType: "temperature", timeCollected: currentTime, measuredData: enteredValuesStructured, fits: [], raw: [{param: 'temp', vialData: vialDataStructured}]} @@ -440,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.

} @@ -462,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 = + + : } +

Smart Quad {items}

+ + ))} + + ); + } +} + + +export default withStyles(styles, { withTheme: true })(TempVialOutline); diff --git a/app/components/calibrationInputs/VialOutline.js b/app/components/calibrationInputs/VialOutline.js index 3be52a28a..b78e87c6b 100644 --- a/app/components/calibrationInputs/VialOutline.js +++ b/app/components/calibrationInputs/VialOutline.js @@ -30,7 +30,7 @@ class VialOutline extends React.Component { super(props); this.state = { readProgress: this.props.readProgress, - items: [12,13,14,15,8,9,10,11,4,5,6,7,0,1,2,3] + items: [2,3,0,1] }; } @@ -72,7 +72,7 @@ class VialOutline extends React.Component { /> -

Vial {items}

+

Smart Quad {items}

))} From 04f8141650f7f746c5479a0a3dc6d3210b58178c Mon Sep 17 00:00:00 2001 From: Ezira Yimer Wolle Date: Sun, 9 Jan 2022 16:44:15 -0500 Subject: [PATCH 02/12] GUI sends proper json calibration to evolver server with 72 recorded temperatures and 16 raw values per temp reading --- app/components/TempCalibrate.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index e3e8b3dc9..6f4054ccb 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -176,7 +176,6 @@ class TempCal extends React.Component { } } this.handleUnlockBtns(); - console.log(this.state.quadsData); var readsFinished = this.state.quadsData.length; this.setState({ progressCompleted: (100 * (this.state.quadsData.length / this.state.deltaTempSteps)), @@ -382,7 +381,6 @@ class TempCal extends React.Component { handleTempInput = (tempValues) => { let oldEnteredValues = this.state.enteredValues; - console.log(oldEnteredValues) if (this.state.selectedSmartQuad == 0) { oldEnteredValues.splice(0,18,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]); }; @@ -419,6 +417,7 @@ class TempCal extends React.Component { handleFinishExpt = (finishFlag) => { this.setState({alertOpen: true}) console.log("Experiment Finished!"); + var d = new Date(); var currentTime = d.getTime(); var enteredValuesStructured = []; @@ -430,9 +429,13 @@ class TempCal extends React.Component { for(var j = 0; j < this.state.quadsData[i].enteredValues.length; j++) { if(!enteredValuesStructured[j]) { enteredValuesStructured.push([]); - vialDataStructured.push(new Array(3).fill([])); } enteredValuesStructured[j].push(parseFloat(this.state.quadsData[i].enteredValues[j])); + } + for (var j = 0; j < this.state.quadsData[0].temp.length; j++) { + if (!vialDataStructured[j]) { + vialDataStructured.push(new Array(3).fill([])); + } vialDataStructured[j][i] = this.state.quadsData[i].temp[j]; } } @@ -580,28 +583,24 @@ class TempCal extends React.Component { let tempCalInput; if (this.state.selectedSmartQuad == 0) { - console.log(this.state.enteredValues) tempCalInput = } else if (this.state.selectedSmartQuad == 1) { - console.log(this.state.enteredValues) tempCalInput = } else if (this.state.selectedSmartQuad == 2) { - console.log(this.state.enteredValues) tempCalInput = } else if (this.state.selectedSmartQuad == 3) { - console.log(this.state.enteredValues) tempCalInput = Date: Tue, 8 Feb 2022 17:09:42 -0500 Subject: [PATCH 03/12] start of od calibration --- .python-version | 1 + app/components/DensityCalibrate.js | 14 ++ app/components/TempCalibrate.js | 2 +- app/components/calibrationInputs/ODCalGUI.js | 185 +++++++++++++++++++ 4 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 .python-version create mode 100644 app/components/calibrationInputs/ODCalGUI.js diff --git a/.python-version b/.python-version new file mode 100644 index 000000000..c19fb689c --- /dev/null +++ b/.python-version @@ -0,0 +1 @@ +evolver-electron diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 8db448a04..8e374e119 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -6,6 +6,10 @@ 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 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 LinearProgress from '@material-ui/core/LinearProgress'; @@ -65,6 +69,7 @@ class ODcal extends React.Component { readProgress: 0, skipFirst: true, vialProgress: Array(16).fill(0), + selectedSmartQuad: 0, vialLabels: ['S0','S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13','S14','S15'], vialData: {'od135':[],'od90':[],'temp':[]}, timesRead: 3, @@ -384,6 +389,14 @@ class ODcal extends React.Component { return shift; } + handleSmartQuadSelection = (selectedSmartQuad) => { + this.setState({ + selectedSmartQuad: selectedSmartQuad + }, () => { + console.log(this.state.selectedSmartQuad) + }); + } + render() { const { classes, theme } = this.props; const { currentStep } = this.state; @@ -504,6 +517,7 @@ class ODcal extends React.Component { valueInputs = {this.state.enteredValuesFloat} initialZipped = {this.state.initialZipped} readProgress = {this.state.vialProgress} + onSmartQuadSelection = {this.handleSmartQuadSelection} vialLabels = {this.state.vialLabels}/> [x, vialOpacitiesNew[i], generalOpacityNew[i], valueInputsNew[i], vialLabelsNew[i]]); + + return zippedSamples +} +//generalOpacity = newState.map((x, i) => x[2]) + +function unzipValues(zippedArray) { + let odState = zippedArray.map((x, i) => x[0]) + let vialOpacities = 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 vialOpacitiesNew = [] + let generalOpacityNew = [] + let valueInputsNew = [] + let vialLabelsNew = [] + + var i; + for (i = 0; i < odState.length; i++) { + vialOpacitiesNew[odState[i]] = vialOpacities[i] + generalOpacityNew[odState[i]] = generalOpacity[i] + valueInputsNew[odState[i]] = valueInputs[i] + vialLabelsNew[odState[i]] = vialLabels[i] + } + + return [ odState, vialOpacitiesNew, generalOpacityNew, valueInputsNew, vialLabelsNew] +} + + +export default class ODcalGUI 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, + 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) + console.log(zippedSamples) + 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 = [] + newState[7] = zippedSamples[0] + newState[0] = zippedSamples[1] + newState[1] = zippedSamples[2] + newState[2] = zippedSamples[3] + newState[11] = zippedSamples[4] + newState[4] = zippedSamples[5] + newState[5] = zippedSamples[6] + newState[6] = zippedSamples[7] + newState[15] = zippedSamples[8] + newState[8] = zippedSamples[9] + newState[9] = zippedSamples[10] + newState[10] = zippedSamples[11] + newState[3] = zippedSamples[12] + newState[12] = zippedSamples[13] + newState[13] = zippedSamples[14] + newState[14] = zippedSamples[15] + + 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) + let newState = [] + newState[0] = zippedSamples[7] + newState[1] = zippedSamples[0] + newState[2] = zippedSamples[1] + newState[3] = zippedSamples[2] + newState[4] = zippedSamples[11] + newState[5] = zippedSamples[4] + newState[6] = zippedSamples[5] + newState[7] = zippedSamples[6] + newState[8] = zippedSamples[15] + newState[9] = zippedSamples[8] + newState[10] = zippedSamples[9] + newState[11] = zippedSamples[10] + newState[12] = zippedSamples[3] + newState[13] = zippedSamples[12] + newState[14] = zippedSamples[13] + newState[15] = zippedSamples[14] + + 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, + }); + }; + + handleSmartQuadSelection = (selectedSmartQuad) => { + this.setState({ + selectedSmartQuad: selectedSmartQuad + }, () => { + this.props.onSmartQuadSelection(this.state.selectedSmartQuad); + }); + } + + render() { + const { odState } = this.state; + + return( +
+ + +
+ + ); + } +} From 84ac470f1e7f274d9453f394a4c79d574fc7dc58 Mon Sep 17 00:00:00 2001 From: HT_eVOLVER Date: Wed, 9 Feb 2022 11:45:16 -0500 Subject: [PATCH 04/12] quick check to observe master version --- app/components/DensityCalibrate.js | 2 +- app/components/PumpCalibrate.js | 4 +- app/components/TempCalibrate.js | 2 +- app/components/calibrationInputs/ODCalGUI.js | 6 +- .../calibrationInputs/ODVialItem.js | 60 +++++++++++++ .../{TempVialOutline.js => QuadOutline.js} | 0 .../{CalGUI.js => TempCalGUI.js} | 4 +- .../calibrationInputs/VialOutline.js | 84 ------------------- 8 files changed, 69 insertions(+), 93 deletions(-) create mode 100644 app/components/calibrationInputs/ODVialItem.js rename app/components/calibrationInputs/{TempVialOutline.js => QuadOutline.js} (100%) rename app/components/calibrationInputs/{CalGUI.js => TempCalGUI.js} (98%) delete mode 100644 app/components/calibrationInputs/VialOutline.js diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 8e374e119..270f22519 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -11,7 +11,7 @@ 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 normalize from 'array-normalize' diff --git a/app/components/PumpCalibrate.js b/app/components/PumpCalibrate.js index ebefb00a8..7fa5090e2 100644 --- a/app/components/PumpCalibrate.js +++ b/app/components/PumpCalibrate.js @@ -7,7 +7,7 @@ import routes from '../constants/routes.json'; 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 CircularProgress from '@material-ui/core/CircularProgress'; @@ -164,7 +164,7 @@ class PumpCal extends React.Component { } else { statusText = `Press PUMP to run ${pumpCalModes[currentStep-1].arrayName} for ${pumpTime} seconds`; - } + } var buttonBackText; var buttonAdvanceText; if (currentStep === 1) { diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index 4df105857..88301c5db 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -10,7 +10,7 @@ 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/ODCalGUI'; +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'; diff --git a/app/components/calibrationInputs/ODCalGUI.js b/app/components/calibrationInputs/ODCalGUI.js index 3a27da2b8..cc9fa3571 100644 --- a/app/components/calibrationInputs/ODCalGUI.js +++ b/app/components/calibrationInputs/ODCalGUI.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import ReactDOM from 'react-dom'; -import VialItem from './VialItem'; -import TempVialOutline from './VialOutline'; +import VialItem from './ODVialItem'; +import QuadOutline from './QuadOutline'; function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabels) { let vialOpacitiesNew = [] @@ -175,7 +175,7 @@ export default class ODcalGUI extends Component { - diff --git a/app/components/calibrationInputs/ODVialItem.js b/app/components/calibrationInputs/ODVialItem.js new file mode 100644 index 000000000..f66261c0e --- /dev/null +++ b/app/components/calibrationInputs/ODVialItem.js @@ -0,0 +1,60 @@ +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 VialItem extends Component { + constructor(props) { + super(props); + this.state = { + items: this.props.currentValue, + }; + } + + componentDidUpdate(prevProps) { + if (this.props.currentValue !== prevProps.currentValue) { + this.setState({ items: this.props.currentValue}) + } + } + + clickButton = (id) => { + console.log(id) + } + + render() { + + + return( +
    + + {this.state.items.map((items,index) => ( + +
    +
    +

    {items[4]}

    +

    {items[3]}

    +     + ))} +     +
+ ); + } +} diff --git a/app/components/calibrationInputs/TempVialOutline.js b/app/components/calibrationInputs/QuadOutline.js similarity index 100% rename from app/components/calibrationInputs/TempVialOutline.js rename to app/components/calibrationInputs/QuadOutline.js diff --git a/app/components/calibrationInputs/CalGUI.js b/app/components/calibrationInputs/TempCalGUI.js similarity index 98% rename from app/components/calibrationInputs/CalGUI.js rename to app/components/calibrationInputs/TempCalGUI.js index 696112ad8..2f33dfed2 100644 --- a/app/components/calibrationInputs/CalGUI.js +++ b/app/components/calibrationInputs/TempCalGUI.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import ReactDOM from 'react-dom'; import VialItem from './VialItem'; -import TempVialOutline from './TempVialOutline'; +import QuadOutline from './QuadOutline'; function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabels) { let vialOpacitiesNew = [] @@ -175,7 +175,7 @@ export default class ODcalGUI extends Component { - diff --git a/app/components/calibrationInputs/VialOutline.js b/app/components/calibrationInputs/VialOutline.js deleted file mode 100644 index b78e87c6b..000000000 --- a/app/components/calibrationInputs/VialOutline.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import CircularProgress from '@material-ui/core/CircularProgress'; -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', - } -}); - - - -class VialOutline extends React.Component { - constructor(props) { - super(props); - this.state = { - readProgress: this.props.readProgress, - items: [2,3,0,1] - }; - } - - componentDidUpdate(prevProps) { - if (this.props.readProgress !== prevProps.readProgress) { - this.setState({ readProgress: this.props.readProgress}) - } - } - - handleButton = (id) => { - console.log(id) - } - - render() { - const { classes, theme } = this.props; - const { readProgress } = this.state; - - - - return( -
    - {this.state.items.map((items,index) => ( -
    - -

    Smart Quad {items}

    -
    - ))} -
- ); - } -} - - -export default withStyles(styles, { withTheme: true })(VialOutline); From 62ebbf9d99573332b81d27c52ffc183374eb353c Mon Sep 17 00:00:00 2001 From: HT_eVOLVER Date: Thu, 10 Feb 2022 10:54:53 -0500 Subject: [PATCH 05/12] change to desk computer --- app/components/DensityCalibrate.js | 37 ++++++++++++++++---- app/components/calibrationInputs/ODCalGUI.js | 2 +- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 270f22519..c8b9c94a2 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; 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 ODcalInput0 from './calibrationInputs/CalInputs'; import ODcalInput1 from './calibrationInputs/CalInputs'; @@ -62,8 +61,8 @@ class ODcal extends React.Component { disableBackward: true, progressCompleted: 0, vialOpacities: [], - enteredValues: Array(16).fill(''), - generalOpacity: Array(16).fill(0), + enteredValues: Array(4).fill().map(() => Array(18).fill('')), //Array(4).fill('') + generalOpacity: Array(4).fill().map(() => Array(18).fill(0)), //Array(4).fill(0) inputsEntered: false, enteredValuesFloat: [], readProgress: 0, @@ -500,13 +499,37 @@ class ODcal extends React.Component { return ; } + let odCalInput; + if (this.state.selectedSmartQuad == 0) { + odCalInput = + } else if (this.state.selectedSmartQuad == 1) { + odCalInput = + } else if (this.state.selectedSmartQuad == 2) { + odCalInput = + } else if (this.state.selectedSmartQuad == 3) { + odCalInput = + }; + return (
- + {odCalInput} {progressButtons} diff --git a/app/components/calibrationInputs/ODCalGUI.js b/app/components/calibrationInputs/ODCalGUI.js index cc9fa3571..3e8b2dee3 100644 --- a/app/components/calibrationInputs/ODCalGUI.js +++ b/app/components/calibrationInputs/ODCalGUI.js @@ -57,7 +57,7 @@ export default class ODcalGUI 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], + odState: [[12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5], [12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5], [12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5], [12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5]], vialOpacities: this.props.vialOpacities, generalOpacity: this.props.generalOpacity, valueInputs: this.props.valueInputs, From 0d922ac8aa490c5c5824959d114888b4698de3bd Mon Sep 17 00:00:00 2001 From: Ezira Yimer Wolle Date: Mon, 14 Feb 2022 18:55:19 -0500 Subject: [PATCH 06/12] style updates --- app/components/Calibrate.css | 49 +++-- app/components/DensityCalibrate.js | 8 +- app/components/PumpCalibrate.js | 4 +- app/components/TempCalibrate.js | 3 +- app/components/calibrationInputs/ODCalGUI.js | 185 ++++++++++++++++++ .../{CalGUI.js => TempCalGUI.js} | 0 .../calibrationInputs/TempVialOutline.js | 2 +- .../calibrationInputs/VialOutline.js | 4 +- 8 files changed, 234 insertions(+), 21 deletions(-) create mode 100644 app/components/calibrationInputs/ODCalGUI.js rename app/components/calibrationInputs/{CalGUI.js => TempCalGUI.js} (100%) diff --git a/app/components/Calibrate.css b/app/components/Calibrate.css index c0b09177f..431249f51 100644 --- a/app/components/Calibrate.css +++ b/app/components/Calibrate.css @@ -171,26 +171,27 @@ ul { } .vialOutline { - width: 265px; - height: 265px; - margin: 40px 5px 0px 5px; - border: 5px solid blue; + width: 105px; + height: 105px; + margin: 18px; + border-radius: 60px; + border: 2px solid white; background: transparent; } .smartQuadOutlineSelected { - width: 265px; - height: 265px; - margin: 40px 5px 0px 5px; - border: 5px solid green; + width: 270px; + height: 270px; + margin: 40px 13px -2px 5px; + border: 7px solid green; background: transparent; } .smartQuadOutlineDeSelected { width: 265px; height: 265px; - margin: 40px 5px 0px 5px; - border: 5px solid white; + margin: 40px 10px -2px 10px; + border: 3px solid white; background: transparent; } @@ -199,10 +200,22 @@ ul { margin: -650px 0px 0px -7px; } +.vialOutlineTextTemp { + 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; +} + .vialOutlineText { position: absolute; padding: 0px 0px 0px 0px; - margin: -3px 0px 0px 70px; + margin: -17px 0px 0px 0px; text-align: center; align-items: center; justify-content: center; @@ -210,6 +223,20 @@ ul { font-size: 20px; 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; diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 8db448a04..a11149a7c 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -7,7 +7,7 @@ import routes from '../constants/routes.json'; import ODcalInput from './calibrationInputs/CalInputs'; import { withStyles } from '@material-ui/core/styles'; 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 normalize from 'array-normalize' @@ -20,7 +20,7 @@ const store = new Store(); //runningODCal const densityButtons = Array.from(Array(16).keys()) const cardStyles = theme => ({ - cardODcalGUI: { + cardODCalGUI: { width: 570, height: 800, backgroundColor: 'transparent', @@ -496,8 +496,8 @@ class ODcal extends React.Component { enteredValues = {this.state.enteredValues}/> {progressButtons} - - + { let oldEnteredValues = this.state.enteredValues; + if (this.state.selectedSmartQuad == 0) { oldEnteredValues.splice(0,18,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]); }; diff --git a/app/components/calibrationInputs/ODCalGUI.js b/app/components/calibrationInputs/ODCalGUI.js new file mode 100644 index 000000000..032f5af21 --- /dev/null +++ b/app/components/calibrationInputs/ODCalGUI.js @@ -0,0 +1,185 @@ +import React, { Component } from 'react' +import ReactDOM from 'react-dom'; +import VialItem from './VialItem'; +import ODVialOutline from './VialOutline'; + +function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabels) { + let vialOpacitiesNew = [] + let generalOpacityNew = [] + let valueInputsNew = [] + let vialLabelsNew = [] + + var i; + for (i = 0; i < odState.length; i++) { + valueInputsNew[i] = valueInputs[odState[i]] + vialOpacitiesNew[i] = vialOpacities[odState[i]] + vialLabelsNew[i] = vialLabels[odState[i]] + + if ( isNaN(valueInputsNew[i]) && (typeof valueInputsNew[i] !== 'string')) { + generalOpacityNew[i] = 0; + } + else{ + generalOpacityNew[i] = generalOpacity[odState[i]] + } + } + + let zippedSamples = odState.map((x, i) => [x, vialOpacitiesNew[i], generalOpacityNew[i], valueInputsNew[i], vialLabelsNew[i]]); + + return zippedSamples +} +//generalOpacity = newState.map((x, i) => x[2]) + +function unzipValues(zippedArray) { + let odState = zippedArray.map((x, i) => x[0]) + let vialOpacities = 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 vialOpacitiesNew = [] + let generalOpacityNew = [] + let valueInputsNew = [] + let vialLabelsNew = [] + + var i; + for (i = 0; i < odState.length; i++) { + vialOpacitiesNew[odState[i]] = vialOpacities[i] + generalOpacityNew[odState[i]] = generalOpacity[i] + valueInputsNew[odState[i]] = valueInputs[i] + vialLabelsNew[odState[i]] = vialLabels[i] + } + + return [ odState, vialOpacitiesNew, generalOpacityNew, valueInputsNew, vialLabelsNew] +} + + +export default class ODCalGUI 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, + 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) + console.log(zippedSamples) + 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 = [] + newState[7] = zippedSamples[0] + newState[0] = zippedSamples[1] + newState[1] = zippedSamples[2] + newState[2] = zippedSamples[3] + newState[11] = zippedSamples[4] + newState[4] = zippedSamples[5] + newState[5] = zippedSamples[6] + newState[6] = zippedSamples[7] + newState[15] = zippedSamples[8] + newState[8] = zippedSamples[9] + newState[9] = zippedSamples[10] + newState[10] = zippedSamples[11] + newState[3] = zippedSamples[12] + newState[12] = zippedSamples[13] + newState[13] = zippedSamples[14] + newState[14] = zippedSamples[15] + + 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) + let newState = [] + newState[0] = zippedSamples[7] + newState[1] = zippedSamples[0] + newState[2] = zippedSamples[1] + newState[3] = zippedSamples[2] + newState[4] = zippedSamples[11] + newState[5] = zippedSamples[4] + newState[6] = zippedSamples[5] + newState[7] = zippedSamples[6] + newState[8] = zippedSamples[15] + newState[9] = zippedSamples[8] + newState[10] = zippedSamples[9] + newState[11] = zippedSamples[10] + newState[12] = zippedSamples[3] + newState[13] = zippedSamples[12] + newState[14] = zippedSamples[13] + newState[15] = zippedSamples[14] + + 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, + }); + }; + + handleSmartQuadSelection = (selectedSmartQuad) => { + this.setState({ + selectedSmartQuad: selectedSmartQuad + }, () => { + this.props.onSmartQuadSelection(this.state.selectedSmartQuad); + }); + } + + render() { + const { odState } = this.state; + + return( +
+ + +
+ + ); + } +} diff --git a/app/components/calibrationInputs/CalGUI.js b/app/components/calibrationInputs/TempCalGUI.js similarity index 100% rename from app/components/calibrationInputs/CalGUI.js rename to app/components/calibrationInputs/TempCalGUI.js diff --git a/app/components/calibrationInputs/TempVialOutline.js b/app/components/calibrationInputs/TempVialOutline.js index e0a7a3d1e..3ed987db7 100644 --- a/app/components/calibrationInputs/TempVialOutline.js +++ b/app/components/calibrationInputs/TempVialOutline.js @@ -93,7 +93,7 @@ class TempVialOutline extends React.Component { size= {104} /> } -

Smart Quad {items}

+

Smart Quad {items}

))} diff --git a/app/components/calibrationInputs/VialOutline.js b/app/components/calibrationInputs/VialOutline.js index b78e87c6b..3be52a28a 100644 --- a/app/components/calibrationInputs/VialOutline.js +++ b/app/components/calibrationInputs/VialOutline.js @@ -30,7 +30,7 @@ class VialOutline extends React.Component { super(props); this.state = { readProgress: this.props.readProgress, - items: [2,3,0,1] + items: [12,13,14,15,8,9,10,11,4,5,6,7,0,1,2,3] }; } @@ -72,7 +72,7 @@ class VialOutline extends React.Component { /> -

Smart Quad {items}

+

Vial {items}

))} From b96d6d05d09ce6285f66e3820e8be15d54807ea4 Mon Sep 17 00:00:00 2001 From: Ezira Yimer Wolle Date: Thu, 24 Feb 2022 17:41:37 -0500 Subject: [PATCH 07/12] updated GUI to support ht evolver for od calibration. data for 72 vials can be entered and supports vial swapping across 4 smart quads. --- app/components/Calibrate.css | 60 +- app/components/DensityCalibrate.js | 584 +++++++----------- app/components/TempCalibrate.js | 7 - app/components/calibrationInputs/NumPad.js | 2 +- app/components/calibrationInputs/ODCalGUI.js | 212 ++++--- .../calibrationInputs/ODVialItem.js | 87 ++- .../calibrationInputs/QuadOutline.js | 18 +- .../calibrationInputs/TempCalGUI.js | 6 +- 8 files changed, 463 insertions(+), 513 deletions(-) diff --git a/app/components/Calibrate.css b/app/components/Calibrate.css index 431249f51..ab739cce6 100644 --- a/app/components/Calibrate.css +++ b/app/components/Calibrate.css @@ -127,6 +127,16 @@ label { text-align: center; } +.odVialItem { + border-radius: 60px; + background: white; + width: 35px; + height: 35px; + margin: 0px 5px 55px 1px; + color: black; + text-align: center; +} + .vialDensity { position: absolute; display: block; @@ -140,6 +150,16 @@ label { background-color: #f58245; } +.odVialDensity { + border-radius: 60px; + width: 35px; + height: 35px; + color: black; + text-align: center; + margin: 0px 0px 0px 0px; + background-color: #f58245; +} + .vialLabels { position: absolute; text-align: center; @@ -149,6 +169,15 @@ label { margin-top: 8px; } +.odVialLabels { + position: absolute; + text-align: center; + width: 35px; + font-size: 15px; + font-weight: bold; + margin-top: -35px; +} + .vialInput { position: absolute; text-align: center; @@ -159,6 +188,16 @@ label { font-style: italic; } +.odVialInput { + position: absolute; + text-align: center; + width: 35px; + font-size: 15px; + margin-top: -20px; + line-height: 20px; + font-style: italic; +} + ul { list-style: none; align-items: center; @@ -180,6 +219,7 @@ ul { } .smartQuadOutlineSelected { + display: block; width: 270px; height: 270px; margin: 40px 13px -2px 5px; @@ -188,6 +228,7 @@ ul { } .smartQuadOutlineDeSelected { + display: block; width: 265px; height: 265px; margin: 40px 10px -2px 10px; @@ -200,27 +241,20 @@ ul { margin: -650px 0px 0px -7px; } -.vialOutlineTextTemp { +.odOutlineWrapper { 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; + margin: -660px 0px 0px -7px; } -.vialOutlineText { +.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; } diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 33a65ce1c..972bc265e 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -1,31 +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 { - 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 {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/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'; @@ -33,19 +20,17 @@ import ModalAlert from './calibrationInputs/ModalAlert'; const Store = require('electron-store'); const store = new Store(); //runningODCal -const densityButtons = Array.from(Array(16).keys()) - const cardStyles = theme => ({ 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: { @@ -73,19 +58,19 @@ class ODcal extends React.Component { disableForward: false, disableBackward: true, progressCompleted: 0, - vialOpacities: [], - enteredValues: Array(4).fill().map(() => Array(18).fill('')), //Array(4).fill('') - generalOpacity: Array(4).fill().map(() => Array(18).fill(0)), //Array(4).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), + vialProgress: Array(4).fill(0), selectedSmartQuad: 0, - vialLabels: ['S0', 'S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8', 'S9', 'S10', 'S11', 'S12', 'S13', 'S14', 'S15'], + vialLabels: Array(4).fill(['S0', 'S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8', 'S9', 'S10', 'S11', 'S12', 'S13', 'S14', 'S15', 'S16', 'S17']), vialData: { - 'od135': [], - 'od90': [], + 'od_90_left': [[],[],[],[]], + 'od_90_right': [[],[],[],[]], 'temp': [] }, timesRead: 3, @@ -101,8 +86,11 @@ class ODcal extends React.Component { vialsRead: 0 }; this.props.socket.on('broadcast', function(response) { + if (response.dummy) { + return; + } console.log(response); - console.log(this.state.vialData); + //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) { @@ -111,7 +99,7 @@ class ODcal extends React.Component { // Add the data into the data structures if (!this.state.skipFirst) { - if (response.data.od_90 && response.data.temp) { + 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, @@ -120,38 +108,50 @@ class ODcal extends React.Component { 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); - if (response.data.od_135) { - newVialData.od135[i][shift].push(parseInt(response.data.od_135[i])); + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 9; j++) { + var shift = this.calculateShift(j); + let odIndex = 9*i + j; + newVialData.od_90_left[i][j][shift].push(parseInt(response.data.od_90_left[odIndex])); + newVialData.od_90_right[i][j][shift].push(parseInt(response.data.od_90_right[odIndex])); + /* + if (response.data.od_135) { + newVialData.od135[i][shift].push(parseInt(response.data.od_135[i])); + } + */ + //newVialData.temp[i][j][shift].push(parseInt(response.data.temp[i])); } - newVialData.od90[i][shift].push(parseInt(response.data.od_90[i])); - newVialData.temp[i][shift].push(parseInt(response.data.temp[i])); } } } else { this.progress(); } - var progressCompleted = (100 * ((this.state.readsFinished) / 16)); + 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; + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 9; j++) { + if (newVialData.od_90_left[i][j].length === this.state.timesRead) { + readsFinished += 1; + } + if (newVialData.od_90_right[i][j].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)); + progressCompleted = (100 * ((readsFinished) / 18)); this.handleUnlockBtns(); newSkipFirst = true; } + console.log(newVialData); this.setState({ vialData: newVialData, readProgress: readProgress, @@ -184,7 +184,7 @@ class ODcal extends React.Component { 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]), }) }; @@ -205,25 +205,32 @@ class ODcal extends React.Component { // 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 (newVialData.od_90_left[0].length === 0) { + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 9; j++) { + //newVialData.od135[i].push([]); + newVialData.od_90_left[i].push([]); + newVialData.od_90_right[i].push([]); + //newVialData.temp[i].push([]); + for (var k = 0; k < 9; k++) { + // fill these guys with nothing to start just to + //newVialData.od135[i][j].push([]); + newVialData.od_90_left[i][j].push([]); + newVialData.od_90_right[i][j].push([]); + //newVialData.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 < 9; j++) { + //newVialData.od135[i][this.calculateShift(j)] = []; + newVialData.od_90_left[i][j][this.calculateShift(j)] = []; + newVialData.od_90_right[i][j][this.calculateShift(j)] = []; + //newVialData.temp[i][this.calculateShift(j)] = []; + } } this.setState({ vialData: newVialData, @@ -242,7 +249,7 @@ class ODcal extends React.Component { newVialData.od135[i][this.state.currentStep - 1] = []; } newVialData.od90[i][this.state.currentStep - 1] = []; - newVialData.temp[i][this.state.currentStep - 1] = []; + //newVialData.temp[i][this.state.currentStep - 1] = []; } } this.setState({ @@ -265,7 +272,7 @@ class ODcal extends React.Component { 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) { @@ -285,8 +292,8 @@ 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; @@ -295,7 +302,7 @@ class ODcal extends React.Component { if (this.state.currentStep === 1) { disableBackward = false; } - if (this.state.currentStep === 15) { + if (this.state.currentStep === 18) { disableForward = true; } @@ -325,7 +332,7 @@ class ODcal extends React.Component { disableBackward = true; disableForward = false; } - if (this.state.currentStep === 16) { + if (this.state.currentStep === 18) { disableBackward = false; disableForward = true; } @@ -336,25 +343,34 @@ class ODcal extends React.Component { }; handleODChange = (odValues) => { + let newEnteredValues = this.state.enteredValues; + newEnteredValues[this.state.selectedSmartQuad] = odValues; this.setState({ - enteredValues: odValues + 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)) }); } @@ -440,7 +456,7 @@ class ODcal extends React.Component { calculateShift = (i) => { var shift = -(this.state.currentStep - 1) + i; if (shift < 0) { - shift = 16 + shift; + shift = 9 + shift; } return shift; } @@ -449,148 +465,83 @@ class ODcal extends React.Component { this.setState({ selectedSmartQuad: selectedSmartQuad }, () => { - console.log(this.state.selectedSmartQuad) }); } render() { - const { - classes, - theme - } = this.props; - const { - currentStep - } = this.state; + const { classes, theme } = this.props; + const { currentStep } = this.state; let measureButton; if (this.state.readProgress === 0) { - measureButton = < - button + measureButton = ; try { if (this.state.vialData.od135[0][this.calculateShift(0)].length === this.state.timesRead) { - - measureButton = < - button + measureButton = ; } } catch (err) {} } else { - measureButton = < - button - className = "measureBtn" - onClick = { - this.stopRead - } > - < - CircularProgress - classes = { - { - colorPrimary: classes.circleProgressColor, - circle: classes.circle - } - } - variant = "static" - value = { - this.state.readProgress - } - color = "primary" - size = { - 50 - } - /> < - FaStop size = { - 15 - } - className = "readStopBtn" / > - < - /button> + measureButton = + } let btnRight; - if ((this.state.progressCompleted >= 100) && (this.state.currentStep === 16)) { - btnRight = < - button - className = "odAdvanceBtn" - onClick = { - this.handleFinishExpt - } > - < - FaPen / > - < - /button> + if ((this.state.progressCompleted >= 100) && (this.state.currentStep === 18)) { + btnRight = + } else { - btnRight = < - button - className = "odAdvanceBtn" - disabled = { - this.state.disableForward - } - onClick = { - this.handleAdvance - } > - < - FaArrowRight / > - < - /button> + btnRight = + } let progressButtons; if (this.state.inputsEntered) { - progressButtons = < - div className = "row" - style = { - { - position: 'absolute' - } - } > - < - button - className = "odBackBtn" - disabled = { - this.state.disableBackward - } - onClick = { - this.handleBack - } > - < - FaArrowLeft / > - < - /button> { - measureButton - } { - btnRight - } < - /div>; + progressButtons = +
+ + {measureButton} + {btnRight} +
; } else { - progressButtons = < - div className = "row" > - < - button - className = "stepOneBtn" - onClick = { - this.handleStepOne - } > - Record Sample Densities < FaPlay size = { - 17 - } - /> < - /button> < - /div>; + progressButtons = +
+ +
; } let statusText; @@ -599,10 +550,7 @@ class ODcal extends React.Component { } else if (this.state.readProgress !== 0) { statusText = < p className = "statusText" > Collecting raw values from eVOLVER... < /p> } else if (this.state.inputsEntered && (this.state.vialData.length !== 0)) { - statusText = < p className = "statusText" > { - this.state.readsFinished - } - /16 Measurements Made

+ 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> } @@ -620,189 +568,81 @@ class ODcal extends React.Component { let odCalInput; if (this.state.selectedSmartQuad == 0) { - odCalInput = < ODcalInput0 - onChangeValue = { - this.handleTempInput - } - onInputsEntered = { - this.state.inputsEntered - } - currentSmartQuad = { - this.state.selectedSmartQuad - } - enteredValues = { - this.state.enteredValues.slice(0, 18) - } - /> + odCalInput = < 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 - onChangeValue = { - this.handleTempInput - } - onInputsEntered = { - this.state.inputsEntered - } - currentSmartQuad = { - this.state.selectedSmartQuad - } - enteredValues = { - this.state.enteredValues.slice(18, 36) - } - /> + odCalInput = < 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 - onChangeValue = { - this.handleTempInput - } - onInputsEntered = { - this.state.inputsEntered - } - currentSmartQuad = { - this.state.selectedSmartQuad - } - enteredValues = { - this.state.enteredValues.slice(36, 54) - } - /> + odCalInput = < 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 - onChangeValue = { - this.handleTempInput - } - onInputsEntered = { - this.state.inputsEntered - } - currentSmartQuad = { - this.state.selectedSmartQuad - } - enteredValues = { - this.state.enteredValues.slice(54, 72) - } - /> + odCalInput = < ODCalInput3 + onChangeValue = {this.handleODChange} + onInputsEntered = {this.state.inputsEntered} + currentSmartQuad = {this.state.selectedSmartQuad} + enteredValues = {this.state.enteredValues[this.state.selectedSmartQuad]}/> }; - return ( < - div > - < - Link className = "backHomeBtn" - id = "experiments" - to = { - { - pathname: routes.CALMENU, - socket: this.props.socket, - logger: this.props.logger - } - } > < FaArrowLeft / > < /Link> { - odCalInput - } { - progressButtons - } - - < - Card className = { - classes.cardODCalGUI - } > - < - ODCalGUI ref = { - this.child - } - vialOpacities = { - this.state.vialOpacities - } - generalOpacity = { - this.state.generalOpacity - } - valueInputs = { - this.state.enteredValuesFloat - } - initialZipped = { - this.state.initialZipped - } - readProgress = { - this.state.vialProgress - } - onSmartQuadSelection = { - this.handleSmartQuadSelection - } - vialLabels = { - this.state.vialLabels - } - /> - - < - LinearProgress classes = { - { + return ( +
+ + {odCalInput} + {progressButtons} + + + + + { - 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 - } - 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> - + }} + variant = "determinate" + value = {this.state.progressCompleted} + /> + {statusText} + + + + + +
); } } export default withStyles(cardStyles, { withTheme: true -})(ODcal); \ No newline at end of file +})(ODcal); diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index 6890c02a3..f44651e90 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -44,13 +44,6 @@ const styles = { }, circle: { strokeWidth: '3px', - }, - smartQuad0: { - width: 285, - height: 400, - borderWidth: '10px', - borderColor: 'blue', - margin: '0px 0px 0px 5000px' } }; diff --git a/app/components/calibrationInputs/NumPad.js b/app/components/calibrationInputs/NumPad.js index 10335aa37..d41be1907 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 index ac28287c3..5322b6840 100644 --- a/app/components/calibrationInputs/ODCalGUI.js +++ b/app/components/calibrationInputs/ODCalGUI.js @@ -1,81 +1,94 @@ import React, { Component } from 'react' import ReactDOM from 'react-dom'; -<<<<<<< HEAD -import VialItem from './VialItem'; -import ODVialOutline from './VialOutline'; -======= -import VialItem from './ODVialItem'; +import ODVialItem from './ODVialItem'; import QuadOutline from './QuadOutline'; ->>>>>>> 62ebbf9d99573332b81d27c52ffc183374eb353c function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabels) { - let vialOpacitiesNew = [] - let generalOpacityNew = [] - let valueInputsNew = [] - let vialLabelsNew = [] - - var i; - for (i = 0; i < odState.length; i++) { - valueInputsNew[i] = valueInputs[odState[i]] - vialOpacitiesNew[i] = vialOpacities[odState[i]] - vialLabelsNew[i] = vialLabels[odState[i]] - - if ( isNaN(valueInputsNew[i]) && (typeof valueInputsNew[i] !== 'string')) { - generalOpacityNew[i] = 0; - } - else{ - generalOpacityNew[i] = generalOpacity[odState[i]] - } + let vialOpacitiesNew = [[],[],[],[]]; + let generalOpacityNew = [[],[],[],[]]; + let valueInputsNew = [[],[],[],[]]; + let vialLabelsNew = [[],[],[],[]]; + let zippedSamples = new Array(4); + for (var i = 0; i < zippedSamples.length; i++) { + zippedSamples[i] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],]; } - let zippedSamples = odState.map((x, i) => [x, vialOpacitiesNew[i], generalOpacityNew[i], valueInputsNew[i], vialLabelsNew[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 = zippedArray.map((x, i) => x[0]) - let vialOpacities = 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 vialOpacitiesNew = [] - let generalOpacityNew = [] - let valueInputsNew = [] - let vialLabelsNew = [] - - var i; - for (i = 0; i < odState.length; i++) { - vialOpacitiesNew[odState[i]] = vialOpacities[i] - generalOpacityNew[odState[i]] = generalOpacity[i] - valueInputsNew[odState[i]] = valueInputs[i] - vialLabelsNew[odState[i]] = vialLabels[i] + 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] } -<<<<<<< HEAD + export default class ODCalGUI 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], -======= -export default class ODcalGUI extends Component { - constructor(props) { - super(props); - this.state = { - odState: [[12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5], [12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5], [12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5], [12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5]], ->>>>>>> 62ebbf9d99573332b81d27c52ffc183374eb353c + odState: Array(4).fill([12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5]), vialOpacities: this.props.vialOpacities, generalOpacity: this.props.generalOpacity, valueInputs: this.props.valueInputs, vialLabels: this.props.vialLabels, - zipped: [], + zipped: [[],[],[],[]], readProgress: this.props.readProgress, selectedSmartQuad: NaN }; @@ -84,7 +97,6 @@ export default class ODcalGUI extends Component { 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) this.setState({ generalOpacity: this.props.generalOpacity, vialOpacities: this.props.vialOpacities, @@ -100,23 +112,30 @@ 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 newState = [] - newState[7] = zippedSamples[0] - newState[0] = zippedSamples[1] - newState[1] = zippedSamples[2] - newState[2] = zippedSamples[3] - newState[11] = zippedSamples[4] - newState[4] = zippedSamples[5] - newState[5] = zippedSamples[6] - newState[6] = zippedSamples[7] - newState[15] = zippedSamples[8] - newState[8] = zippedSamples[9] - newState[9] = zippedSamples[10] - newState[10] = zippedSamples[11] - newState[3] = zippedSamples[12] - newState[12] = zippedSamples[13] - newState[13] = zippedSamples[14] - newState[14] = zippedSamples[15] + 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][11] = 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][17] = 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][5] = 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] @@ -137,25 +156,34 @@ export default class ODcalGUI extends Component { handleAdvance = (event) => { let zippedSamples = zipValues(this.state.odState, this.state.vialOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.vialLabels) - let newState = [] - newState[0] = zippedSamples[7] - newState[1] = zippedSamples[0] - newState[2] = zippedSamples[1] - newState[3] = zippedSamples[2] - newState[4] = zippedSamples[11] - newState[5] = zippedSamples[4] - newState[6] = zippedSamples[5] - newState[7] = zippedSamples[6] - newState[8] = zippedSamples[15] - newState[9] = zippedSamples[8] - newState[10] = zippedSamples[9] - newState[11] = zippedSamples[10] - newState[12] = zippedSamples[3] - newState[13] = zippedSamples[12] - newState[14] = zippedSamples[13] - newState[15] = zippedSamples[14] + 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][11] + 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][17] + 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][5] + 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] @@ -185,16 +213,12 @@ export default class ODcalGUI extends Component { return(
- -<<<<<<< HEAD - >>>>>> 62ebbf9d99573332b81d27c52ffc183374eb353c readProgress = {this.state.readProgress} - onSmartQuadSelection = {this.handleSmartQuadSelection}/> + onSmartQuadSelection = {this.handleSmartQuadSelection} + type = "od"/>
); diff --git a/app/components/calibrationInputs/ODVialItem.js b/app/components/calibrationInputs/ODVialItem.js index f66261c0e..5867d2b33 100644 --- a/app/components/calibrationInputs/ODVialItem.js +++ b/app/components/calibrationInputs/ODVialItem.js @@ -16,11 +16,12 @@ const Item = posed.li({ } }); -export default class VialItem extends Component { +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]] }; } @@ -36,24 +37,76 @@ export default class VialItem extends Component { render() { - return(
    - - {this.state.items.map((items,index) => ( - -
    -
    -

    {items[4]}

    -

    {items[3]}

    -     - ))} -     +
      + + {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 index 3ed987db7..68c6a4c9f 100644 --- a/app/components/calibrationInputs/QuadOutline.js +++ b/app/components/calibrationInputs/QuadOutline.js @@ -25,7 +25,7 @@ const styles = theme => ({ -class TempVialOutline extends React.Component { +class QuadOutline extends React.Component { constructor(props) { super(props); this.state = { @@ -53,15 +53,21 @@ class TempVialOutline extends React.Component { const { classes, theme } = this.props; const { readProgress } = this.state; const selectedSmartQuad = this.state.selectedSmartQuad; + let className; + if (this.props.type == "temp") { + className = "outlineWrapper"; + } else if (this.props.type == "od") { + className = "odOutlineWrapper"; + } return( -
    +
      {this.state.items.map((items,index) => (
      {selectedSmartQuad == items ? } -

      Smart Quad {items}

      +

      Smart Quad {items}

      ))}
    @@ -102,4 +108,4 @@ class TempVialOutline extends React.Component { } -export default withStyles(styles, { withTheme: true })(TempVialOutline); +export default withStyles(styles, { withTheme: true })(QuadOutline); diff --git a/app/components/calibrationInputs/TempCalGUI.js b/app/components/calibrationInputs/TempCalGUI.js index 2f33dfed2..b30c2c532 100644 --- a/app/components/calibrationInputs/TempCalGUI.js +++ b/app/components/calibrationInputs/TempCalGUI.js @@ -173,11 +173,11 @@ export default class ODcalGUI extends Component { return(
    + currentValue = {this.state.zipped}/> + onSmartQuadSelection = {this.handleSmartQuadSelection} + type = "temp"/>
    ); From f1faca07c1bbfaa89b46a4e11ff1795ce42c05a4 Mon Sep 17 00:00:00 2001 From: Ezira Yimer Wolle Date: Sun, 27 Feb 2022 20:11:43 -0500 Subject: [PATCH 08/12] working version of temperature calibration before testing on live HT eVOLVER --- app/components/Calibrate.css | 28 +++--- app/components/DensityCalibrate.js | 85 +++++++++-------- app/components/TempCalibrate.js | 94 ++++++++++--------- .../calibrationInputs/QuadOutline.js | 2 +- .../calibrationInputs/TempCalGUI.js | 67 +++++++------ app/components/calibrationInputs/VialItem.js | 6 +- 6 files changed, 142 insertions(+), 140 deletions(-) diff --git a/app/components/Calibrate.css b/app/components/Calibrate.css index ab739cce6..3f2153973 100644 --- a/app/components/Calibrate.css +++ b/app/components/Calibrate.css @@ -116,13 +116,13 @@ label { background-color: black; } -.vialItem { +.tempVialItem { display: block; - border-radius: 60px; + border-radius: 0px; background: white; - width: 90px; - height: 90px; - margin: 27px 30px 35px 21px; + width: 200px; + height: 200px; + margin: 40px 45px 70px 35px; color: black; text-align: center; } @@ -160,13 +160,13 @@ label { background-color: #f58245; } -.vialLabels { +.tempVialLabels { position: absolute; text-align: center; - width: 90px; + width: 200px; font-size: 24px; font-weight: bold; - margin-top: 8px; + margin: 8px 0px 0px 0px; } .odVialLabels { @@ -178,12 +178,12 @@ label { margin-top: -35px; } -.vialInput { +.tempVialInput { position: absolute; text-align: center; - width: 90px; - font-size: 15px; - margin-top: 40px; + width: 200px; + font-size: 24px; + margin-top: 100px; line-height: 20px; font-style: italic; } @@ -236,9 +236,9 @@ ul { background: transparent; } -.outlineWrapper { +.tempOutlineWrapper { position: absolute; - margin: -650px 0px 0px -7px; + margin: -660px 0px 0px -7px; } .odOutlineWrapper { diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 972bc265e..1f3ba3232 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -69,8 +69,7 @@ class ODcal extends React.Component { selectedSmartQuad: 0, vialLabels: Array(4).fill(['S0', 'S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8', 'S9', 'S10', 'S11', 'S12', 'S13', 'S14', 'S15', 'S16', 'S17']), vialData: { - 'od_90_left': [[],[],[],[]], - 'od_90_right': [[],[],[],[]], + 'od90': [[],[],[],[]], 'temp': [] }, timesRead: 3, @@ -89,9 +88,27 @@ class ODcal extends React.Component { if (response.dummy) { return; } - console.log(response); + + // 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][6], odLeft[i][7], odLeft[i][8], odRight[i][6], odRight[i][7], odRight[i][8]) + 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][0], odLeft[i][1], odLeft[i][2], odRight[i][0], odRight[i][1], odRight[i][2]) + } + + console.log(response.data) + console.log(odData); //console.log(this.state.vialData); - var newVialData = this.state.vialData; + let 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; @@ -109,11 +126,9 @@ class ODcal extends React.Component { do 15 - . */ for (var i = 0; i < 4; i++) { - for (var j = 0; j < 9; j++) { + for (var j = 0; j < 18; j++) { var shift = this.calculateShift(j); - let odIndex = 9*i + j; - newVialData.od_90_left[i][j][shift].push(parseInt(response.data.od_90_left[odIndex])); - newVialData.od_90_right[i][j][shift].push(parseInt(response.data.od_90_right[odIndex])); + newVialData.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])); @@ -133,14 +148,9 @@ class ODcal extends React.Component { var newSkipFirst = false; // Check how many reads have been finished by looking through the data structure - for (var i = 0; i < 4; i++) { - for (var j = 0; j < 9; j++) { - if (newVialData.od_90_left[i][j].length === this.state.timesRead) { - readsFinished += 1; - } - if (newVialData.od_90_right[i][j].length === this.state.timesRead) { - readsFinished += 1; - } + for (var i = 0; i < 18; i++) { + if (newVialData.od90[0][0][i].length === this.state.timesRead) { + readsFinished += 1; } } @@ -205,18 +215,16 @@ class ODcal extends React.Component { // First dimension is Vial // Second dimension is step number // Each step will be a list with 3 technical replicates - if (newVialData.od_90_left[0].length === 0) { + if (newVialData.od90[0].length === 0) { for (var i = 0; i < 4; i++) { - for (var j = 0; j < 9; j++) { + for (var j = 0; j < 18; j++) { //newVialData.od135[i].push([]); - newVialData.od_90_left[i].push([]); - newVialData.od_90_right[i].push([]); + newVialData.od90[i].push([]); //newVialData.temp[i].push([]); - for (var k = 0; k < 9; k++) { + for (var k = 0; k < 18; k++) { // fill these guys with nothing to start just to //newVialData.od135[i][j].push([]); - newVialData.od_90_left[i][j].push([]); - newVialData.od_90_right[i][j].push([]); + newVialData.od90[i][j].push([]); //newVialData.temp[i][j].push([]); } } @@ -225,10 +233,9 @@ class ODcal extends React.Component { // remove existing data for particular layout for (var i = 0; i < 4; i++) { - for (var j = 0; j < 9; j++) { + for (var j = 0; j < 18; j++) { //newVialData.od135[i][this.calculateShift(j)] = []; - newVialData.od_90_left[i][j][this.calculateShift(j)] = []; - newVialData.od_90_right[i][j][this.calculateShift(j)] = []; + newVialData.od90[i][j][this.calculateShift(j)] = []; //newVialData.temp[i][this.calculateShift(j)] = []; } } @@ -245,11 +252,13 @@ class ODcal extends React.Component { 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] = []; + for (var j = 0; j < this.vialData.od90[i].length; j++) { + if (newVialData.od135) { + newVialData.od135[i][this.state.currentStep - 1] = []; + } + newVialData.od90[i][this.state.currentStep - 1] = []; + //newVialData.temp[i][this.state.currentStep - 1] = []; } - newVialData.od90[i][this.state.currentStep - 1] = []; - //newVialData.temp[i][this.state.currentStep - 1] = []; } } this.setState({ @@ -399,25 +408,15 @@ class ODcal extends React.Component { name: this.state.experimentName, calibrationType: "od", timeCollected: currentTime, - measuredData: Array(16).fill(this.state.enteredValuesFloat), + measuredData: this.state.enteredValuesFloat, fits: [] }; if (this.state.vialData.od90[0][0].length > 0) { rawList.push({ - param: 'od_90', + param: 'od_90_right', vialData: this.state.vialData.od90 }); } - if (this.state.vialData.od135[0][0].length > 0) { - rawList.push({ - param: 'od_135', - vialData: this.state.vialData.od135 - }); - } - rawList.push({ - param: 'temp', - vialData: this.state.vialData.temp - }); saveData.raw = rawList; this.props.socket.emit('setrawcalibration', saveData); @@ -456,7 +455,7 @@ class ODcal extends React.Component { calculateShift = (i) => { var shift = -(this.state.currentStep - 1) + i; if (shift < 0) { - shift = 9 + shift; + shift = 18 + shift; } return shift; } diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index f44651e90..0f54de61d 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -30,7 +30,7 @@ const styles = { }, progressBar: { flexGrow: 1, - margin: '10px 0px 0px 0px', + margin: '-10px 0px 0px 0px', height: 8, }, colorPrimary: { @@ -47,26 +47,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, roomTempAvg) { + 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] + " (" + (deltaTempStream[i][0]<0?"":"+") + deltaTempStream[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]))))); @@ -84,19 +84,19 @@ 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(72).fill(''), - generalOpacity: Array(16).fill(1), + quadOpacities: new Array(4).fill(1), + enteredValues: new Array(72).fill(''), + generalOpacity: new Array(4).fill(1), tempInputsFloat: [], readProgress: 0, - vialProgress: Array(4).fill(0), + quadProgress: new Array(4).fill(0), initialZipped: [], inputsEntered: true, selectedSmartQuad: 0, - vialLabels: ['S0','S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13','S14','S15','S16','S17'], - smartQuadLabels: ['TS0','TS1','TS2','TS3','TS4','TS5','TS6','TS7','TS8','TS9','TS10','TS11','TS12','TS13','TS14','TS15'], + quadLabels: ['SQ0', 'SQ1', 'SQ2', 'SQ3'], + smartQuadLabels: ['SQ0 Sensor Average','SQ1 Sensor Average','SQ2 Sensor Average','SQ3 Sensor Average'], quadsData: [], - currentPowerLevel: [4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095,4095], + currentPowerLevel: new Array(4).fill(4095), tempRawDelta: 500, timesRead: 3, valueInputs: [], @@ -124,26 +124,30 @@ class TempCal extends React.Component { } this.props.socket.on('broadcast', function(response) { console.log(response); + if (response.dummy) { + console.log("dummy broadcast received"); + return + } var newQuadsData = this.state.quadsData; - let returnedTemps = generateVialLabel (response, this.state.tempStream, this.state.roomTempAvg) + let returnedTemps = generateQuadLabel (response, this.state.tempStream, this.state.roomTempAvg) let tempStream = returnedTemps[0]; let valueInputs = returnedTemps[1]; - let percentVialProgress = []; + let percentQuadProgress = []; if (this.state.currentStep > 1) { - percentVialProgress = calculateVialProgress (tempStream, this.state.previousLockedTemp, this.state.currentPowerLevel); + percentQuadProgress = calculateQuadProgress (tempStream, this.state.previousLockedTemp, this.state.currentPowerLevel); } 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++) { @@ -175,7 +179,7 @@ class TempCal extends React.Component { readsFinished: readsFinished, readProgress: 0, roomTempAvg: roomTempAvg, - vialProgress: Array(16).fill(0)}, + quadProgress: Array(4).fill(0)}, function() { store.set('runningTempCal', this.state) }); @@ -209,17 +213,17 @@ class TempCal extends React.Component { var buttonAdvanceText = "+" + Math.round(deltaTempSetting * this.state.slopeEstimate) + "\u00b0C"; var buttonBackText = "-" + Math.round(deltaTempSetting * this.state.slopeEstimate) + "\u00b0C"; this.setState({ - vialOpacities: Array(16).fill(0), - generalOpacity: Array(16).fill(1), - valueInputs: Array(16).fill('...'), + quadOpacities: Array(4).fill(0), + generalOpacity: Array(4).fill(1), + valueInputs: Array(4).fill('...'), buttonAdvanceText: buttonAdvanceText, buttonBackText: buttonBackText, }) }; startRead = () => { - var evolverValue = Array(16).fill("NaN"); - for (var i = 0; i < this.state.currentPowerLevel.length; i++) { + let evolverValue = new Array(4).fill("NaN"); + for (var i = 0; i < evolverValue.length; i++) { evolverValue[i] = this.state.currentPowerLevel[i]; } this.props.socket.emit("command", {param: "temp", value: evolverValue, immediate: true}); @@ -227,16 +231,16 @@ class TempCal extends React.Component { if (this.state.equilibrateState){ this.handleLockBtns(); - let percentVialProgress = []; + let percentQuadProgress = []; if (this.state.currentStep > 1) { - percentVialProgress = calculateVialProgress (this.state.tempStream, this.state.tempStream, this.state.currentPowerLevel); + percentQuadProgress = calculateQuadProgress (this.state.tempStream, this.state.tempStream, this.state.currentPowerLevel); } this.setState({ equilibrateState: false, inputsEntered: false, previousLockedTemp: this.state.tempStream, - vialProgress: percentVialProgress + quadProgress: percentQuadProgress }); } else { @@ -245,10 +249,10 @@ class TempCal extends React.Component { // remove existing data for particular layout for (var i = 0; i < newQuadsData.length; i++) { - if (this.state.currentStep === this.state.quadsData[i].step) { - newQuadsData.splice(i, 1); - break; - } + if (this.state.currentStep === this.state.quadsData[i].step) { + newQuadsData.splice(i, 1); + break; + } } newQuadsData.push({ temp:[], @@ -415,7 +419,7 @@ class TempCal extends React.Component { var d = new Date(); var currentTime = d.getTime(); var enteredValuesStructured = []; - var vialDataStructured = []; + var quadDataStructured = []; // 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. @@ -427,15 +431,15 @@ class TempCal extends React.Component { enteredValuesStructured[j].push(parseFloat(this.state.quadsData[i].enteredValues[j])); } for (var j = 0; j < this.state.quadsData[0].temp.length; j++) { - if (!vialDataStructured[j]) { - vialDataStructured.push(new Array(3).fill([])); + if (!quadDataStructured[j]) { + quadDataStructured.push(new Array(3).fill([])); } - vialDataStructured[j][i] = this.state.quadsData[i].temp[j]; + quadDataStructured[j][i] = this.state.quadsData[i].temp[j]; } } - 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); + //this.props.socket.emit('setrawcalibration', saveData); } handleKeyboardModal = () => { @@ -610,13 +614,13 @@ class TempCal extends React.Component { + quadLabels = {this.state.smartQuadLabels}/> [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,37 +31,37 @@ 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, selectedSmartQuad: NaN @@ -69,14 +69,13 @@ export default class ODcalGUI extends Component { } 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, }) } @@ -86,7 +85,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] @@ -107,23 +106,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] @@ -144,18 +143,18 @@ 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, }); }; diff --git a/app/components/calibrationInputs/VialItem.js b/app/components/calibrationInputs/VialItem.js index f66261c0e..8005dc721 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]}

    ))}     From c73c9e7f53c2a029ec6f991cbda5361b53bce5af Mon Sep 17 00:00:00 2001 From: HT_eVOLVER Date: Thu, 3 Mar 2022 13:35:49 -0500 Subject: [PATCH 09/12] modified temperature calibration to for quad progress. adjusted displayed quad temp information. hardcoded set temperature points for calibration and validated ability to send information to evolver. --- app/components/DensityCalibrate.js | 8 + app/components/TempCalibrate.js | 137 +++++++++--------- app/components/calibrationInputs/CalInputs.js | 4 +- .../calibrationInputs/QuadOutline.js | 99 +++++++------ .../calibrationInputs/TempCalGUI.js | 1 + 5 files changed, 138 insertions(+), 111 deletions(-) diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 1f3ba3232..50849ac81 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -568,24 +568,32 @@ class ODcal extends React.Component { let odCalInput; 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} diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index 0f54de61d..7b78834b2 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -5,10 +5,10 @@ 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 TempcalInput0 from './calibrationInputs/CalInputs'; -import TempcalInput1 from './calibrationInputs/CalInputs'; -import TempcalInput2 from './calibrationInputs/CalInputs'; -import TempcalInput3 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/TempCalGUI'; import LinearProgress from '@material-ui/core/LinearProgress'; @@ -47,7 +47,7 @@ const styles = { } }; -function generateQuadLabel (response, oldTempStream, roomTempAvg) { +function generateQuadLabel (response, oldTempStream) { var tempStream = new Array(4).fill('...'); var deltaTempStream = new Array(4).fill('...'); var valueInputs = new Array(4).fill('...'); @@ -59,7 +59,7 @@ function generateQuadLabel (response, oldTempStream, roomTempAvg) { if (isNaN(deltaTempStream[i][0])){ deltaTempStream[i] = "0"; } - valueInputs[i] = tempStream[i][0] + " (" + (deltaTempStream[i][0]<0?"":"+") + deltaTempStream[i][0] + ")" + valueInputs[i] = tempStream[i][0]; // } } @@ -96,18 +96,15 @@ class TempCal extends React.Component { quadLabels: ['SQ0', 'SQ1', 'SQ2', 'SQ3'], smartQuadLabels: ['SQ0 Sensor Average','SQ1 Sensor Average','SQ2 Sensor Average','SQ3 Sensor Average'], quadsData: [], - currentPowerLevel: new Array(4).fill(4095), - tempRawDelta: 500, + powerLevels: [[1000,1000,1000,1000], [2000,2000,2000,2000], [3000,3000,3000,3000]], 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:'', @@ -129,14 +126,13 @@ class TempCal extends React.Component { return } var newQuadsData = this.state.quadsData; - let returnedTemps = generateQuadLabel (response, this.state.tempStream, this.state.roomTempAvg) + let returnedTemps = generateQuadLabel (response, this.state.tempStream) let tempStream = returnedTemps[0]; let valueInputs = returnedTemps[1]; let percentQuadProgress = []; - if (this.state.currentStep > 1) { - percentQuadProgress = calculateQuadProgress (tempStream, this.state.previousLockedTemp, this.state.currentPowerLevel); - } + let powerLevelIndex = this.state.currentStep - 1; + percentQuadProgress = calculateQuadProgress (tempStream, this.state.previousLockedTemp, this.state.powerLevels[powerLevelIndex]); this.setState({ tempStream: tempStream, @@ -165,26 +161,19 @@ class TempCal extends React.Component { function() { 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(); var readsFinished = this.state.quadsData.length; this.setState({ progressCompleted: (100 * (this.state.quadsData.length / this.state.deltaTempSteps)), readsFinished: readsFinished, readProgress: 0, - roomTempAvg: roomTempAvg, quadProgress: Array(4).fill(0)}, function() { store.set('runningTempCal', this.state) }); } }); + console.log(this.state.readProgress) }.bind(this)); this.props.socket.on('calibrationrawcallback', function(response) { @@ -209,32 +198,29 @@ 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({ quadOpacities: Array(4).fill(0), generalOpacity: Array(4).fill(1), valueInputs: Array(4).fill('...'), - buttonAdvanceText: buttonAdvanceText, - buttonBackText: buttonBackText, + buttonMeasureText: buttonMeasureText, + buttonAdvanceText: buttonAdvanceText }) }; startRead = () => { 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.currentPowerLevel[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 percentQuadProgress = []; - if (this.state.currentStep > 1) { - percentQuadProgress = calculateQuadProgress (this.state.tempStream, this.state.tempStream, this.state.currentPowerLevel); - } + percentQuadProgress = calculateQuadProgress (this.state.tempStream, this.state.tempStream, this.state.powerLevels[powerLevelIndex]); this.setState({ equilibrateState: false, @@ -257,11 +243,11 @@ class TempCal extends React.Component { newQuadsData.push({ temp:[], step: this.state.currentStep, - powerLevel:this.state.currentPowerLevel, + powerLevel:this.state.powerLevels[powerLevelIndex], enteredValues:this.state.enteredValues, }); 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']}}); + //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']}}); } } @@ -274,21 +260,25 @@ class TempCal extends React.Component { let readProgress = this.state.readProgress; readProgress = readProgress + (100/this.state.timesRead); this.setState({readProgress: readProgress}); + console.log(this.state.readProgress); }; 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; @@ -301,24 +291,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; @@ -331,8 +324,9 @@ class TempCal extends React.Component { disableForward: disableForward, disableBackward: disableBackward, currentStep: currentStep, - currentPowerLevel: newTempSet, - buttonMeasureText: buttonMeasureText + buttonMeasureText: buttonMeasureText, + buttonAdvanceText: buttonAdvanceText, + buttonBackText: buttonBackText }); }; @@ -397,8 +391,6 @@ class TempCal extends React.Component { handleSmartQuadSelection = (selectedSmartQuad) => { this.setState({ selectedSmartQuad: selectedSmartQuad - }, () => { - console.log(this.state.selectedSmartQuad) }); } @@ -415,6 +407,7 @@ class TempCal extends React.Component { handleFinishExpt = (finishFlag) => { this.setState({alertOpen: true}) console.log("Experiment Finished!"); + this.props.socket.emit("command", {param: "temp", value: this.state.powerLevels[1], immediate: true}); var d = new Date(); var currentTime = d.getTime(); @@ -439,7 +432,7 @@ class TempCal extends React.Component { } 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); + this.props.socket.emit('setrawcalibration', saveData); } handleKeyboardModal = () => { @@ -581,25 +574,33 @@ class TempCal extends React.Component { let tempCalInput; if (this.state.selectedSmartQuad == 0) { - tempCalInput = } else if (this.state.selectedSmartQuad == 1) { - tempCalInput = } else if (this.state.selectedSmartQuad == 2) { - tempCalInput = } else if (this.state.selectedSmartQuad == 3) { - tempCalInput = this.onOpenModal(index)} - key= {index} - id={index} + key= {this.props.key + toString(index)} + id={this.props.id + toString(index)} disabled = {this.state.inputsLocked}> {this.state.enteredValues[index]} diff --git a/app/components/calibrationInputs/QuadOutline.js b/app/components/calibrationInputs/QuadOutline.js index 71a8f1191..8bc638137 100644 --- a/app/components/calibrationInputs/QuadOutline.js +++ b/app/components/calibrationInputs/QuadOutline.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import LinearProgress from '@material-ui/core/LinearProgress'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; @@ -20,6 +20,11 @@ const styles = theme => ({ }, circle: { strokeWidth: '3px', + }, + progressBar: { + flexGrow: 1, + margin: '240px 0px 0px 0px', + height: 8, } }); @@ -54,54 +59,66 @@ class QuadOutline extends React.Component { 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(
      - {this.state.items.map((items,index) => ( -
      - {selectedSmartQuad == items - ? - - : } -

      Smart Quad {items}

      -
      - ))} + {smartQuads}
    ); } diff --git a/app/components/calibrationInputs/TempCalGUI.js b/app/components/calibrationInputs/TempCalGUI.js index 0aa78a99c..a4ba4f321 100644 --- a/app/components/calibrationInputs/TempCalGUI.js +++ b/app/components/calibrationInputs/TempCalGUI.js @@ -82,6 +82,7 @@ export default class TempCalGUI extends Component { if (this.props.readProgress !== prevProps.readProgress) { this.setState({ readProgress: this.props.readProgress}) } + console.log(this.state.readProgress) } handleBack = (event) => { From c30b5c13144e5844919cf8988bea26c9ff9d0195 Mon Sep 17 00:00:00 2001 From: HT_eVOLVER Date: Thu, 31 Mar 2022 15:05:32 -0400 Subject: [PATCH 10/12] updated temp calibrate code --- app/components/DensityCalibrate.js | 8 +-- app/components/TempCalibrate.js | 66 +++++++------------ .../calibrationInputs/TempCalGUI.js | 1 - 3 files changed, 28 insertions(+), 47 deletions(-) diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 50849ac81..6ae3db9ef 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -100,14 +100,14 @@ class ODcal extends React.Component { let odData = [[],[],[],[]] for (var i = 0; i < odData.length; i++) { - odData[i].push(odLeft[i][6], odLeft[i][7], odLeft[i][8], odRight[i][6], odRight[i][7], odRight[i][8]) - 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][0], odLeft[i][1], odLeft[i][2], odRight[i][0], odRight[i][1], odRight[i][2]) + 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]); } console.log(response.data) console.log(odData); - //console.log(this.state.vialData); + console.log(this.state.vialData); let newVialData = this.state.vialData; // if stop was pressed or user still moving vials around, don't want to continue if (this.state.readProgress === 0) { diff --git a/app/components/TempCalibrate.js b/app/components/TempCalibrate.js index 7b78834b2..59a75d66b 100644 --- a/app/components/TempCalibrate.js +++ b/app/components/TempCalibrate.js @@ -85,7 +85,7 @@ class TempCal extends React.Component { disableBackward: true, progressCompleted: 0, quadOpacities: new Array(4).fill(1), - enteredValues: new Array(72).fill(''), + enteredValues: new Array(4).fill().map(() => Array(18).fill('')), generalOpacity: new Array(4).fill(1), tempInputsFloat: [], readProgress: 0, @@ -96,7 +96,7 @@ class TempCal extends React.Component { quadLabels: ['SQ0', 'SQ1', 'SQ2', 'SQ3'], smartQuadLabels: ['SQ0 Sensor Average','SQ1 Sensor Average','SQ2 Sensor Average','SQ3 Sensor Average'], quadsData: [], - powerLevels: [[1000,1000,1000,1000], [2000,2000,2000,2000], [3000,3000,3000,3000]], + powerLevels: [[1250,1250,1250,1250], [1875,1875,1875,1875], [2500,2500,2500,2500]], timesRead: 3, valueInputs: [], tempStream: [], @@ -173,7 +173,7 @@ class TempCal extends React.Component { }); } }); - console.log(this.state.readProgress) + console.log(this.state.quadsData); }.bind(this)); this.props.socket.on('calibrationrawcallback', function(response) { @@ -260,7 +260,6 @@ class TempCal extends React.Component { let readProgress = this.state.readProgress; readProgress = readProgress + (100/this.state.timesRead); this.setState({readProgress: readProgress}); - console.log(this.state.readProgress); }; handleBack = () => { @@ -359,32 +358,19 @@ class TempCal extends React.Component { }; handleRecordedData = (currentStep) => { - var displayedData = Array(72).fill(''); - var quadsData = this.state.quadsData - for (var i = 0; i < quadsData.length; i++) { + 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 = this.state.quadsData[i].enteredValues; - break; - } - } + displayedData = JSON.parse(JSON.stringify(this.state.quadsData[i].enteredValues)); + break; + }; + }; this.setState({enteredValues: displayedData}) } handleTempInput = (tempValues) => { let oldEnteredValues = this.state.enteredValues; - - if (this.state.selectedSmartQuad == 0) { - oldEnteredValues.splice(0,18,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]); - }; - if (this.state.selectedSmartQuad == 1) { - oldEnteredValues.splice(18,18,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]); - }; - if (this.state.selectedSmartQuad == 2) { - oldEnteredValues.splice(36,18,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]); - }; - if (this.state.selectedSmartQuad == 3) { - oldEnteredValues.splice(54,18,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]); - }; + 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}) } @@ -407,27 +393,24 @@ 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 quadDataStructured = []; + 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.quadsData.length; i++) { - for(var j = 0; j < this.state.quadsData[i].enteredValues.length; j++) { - if(!enteredValuesStructured[j]) { - enteredValuesStructured.push([]); + 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.quadsData[i].enteredValues[j])); - } - for (var j = 0; j < this.state.quadsData[0].temp.length; j++) { - if (!quadDataStructured[j]) { - quadDataStructured.push(new Array(3).fill([])); - } - quadDataStructured[j][i] = this.state.quadsData[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', quadsData: quadDataStructured}]} @@ -571,7 +554,6 @@ class TempCal extends React.Component { if (this.state.exiting) { return ; } - let tempCalInput; if (this.state.selectedSmartQuad == 0) { tempCalInput = + enteredValues = {this.state.enteredValues[0]}/> } else if (this.state.selectedSmartQuad == 1) { tempCalInput = + enteredValues = {this.state.enteredValues[1]}/> } else if (this.state.selectedSmartQuad == 2) { tempCalInput = + enteredValues = {this.state.enteredValues[2]}/> } else if (this.state.selectedSmartQuad == 3) { tempCalInput = + enteredValues = {this.state.enteredValues[3]}/> }; return ( diff --git a/app/components/calibrationInputs/TempCalGUI.js b/app/components/calibrationInputs/TempCalGUI.js index a4ba4f321..0aa78a99c 100644 --- a/app/components/calibrationInputs/TempCalGUI.js +++ b/app/components/calibrationInputs/TempCalGUI.js @@ -82,7 +82,6 @@ export default class TempCalGUI extends Component { if (this.props.readProgress !== prevProps.readProgress) { this.setState({ readProgress: this.props.readProgress}) } - console.log(this.state.readProgress) } handleBack = (event) => { From 104caaaf3913d5d311b2a02d1ce19a362b00e1f5 Mon Sep 17 00:00:00 2001 From: HT_eVOLVER Date: Mon, 4 Apr 2022 15:55:53 -0400 Subject: [PATCH 11/12] density and temp calibration files refactored for ht-evolver. integrating experiment manager page and refactoring for ht-evolver --- app/components/DensityCalibrate.js | 4 +-- app/components/Graph.css | 32 ++++++++++++-------- app/components/calibrationInputs/ODCalGUI.js | 8 ++--- app/components/graphing/VialArrayGraph.js | 2 +- app/components/graphing/VialMenu.js | 29 ++++++++++++------ 5 files changed, 47 insertions(+), 28 deletions(-) diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index 6ae3db9ef..a0d3c467d 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -105,8 +105,8 @@ class ODcal extends React.Component { odData[i].push(odLeft[i][6], odLeft[i][7], odLeft[i][8], odRight[i][6], odRight[i][7], odRight[i][8]); } - console.log(response.data) - console.log(odData); + //console.log(response.data) + //console.log(odData); console.log(this.state.vialData); let newVialData = this.state.vialData; // if stop was pressed or user still moving vials around, don't want to continue diff --git a/app/components/Graph.css b/app/components/Graph.css index c524ffd5d..4c4f33fe3 100644 --- a/app/components/Graph.css +++ b/app/components/Graph.css @@ -1,6 +1,6 @@ .vialPlotsMenuBtns{ - width:30px; - height: 30px; + width: 25px; + height: 25px; margin: 2px; border-radius: 20px; background-color: black; @@ -14,32 +14,40 @@ .vialPlotMenuBtnsText { color: orange; - font-size: 17px; + font-size: 15px; font-weight: bold; - margin: -1px 0px 0px 0px; + margin: -3px 0px 0px 0px; } .vialPlotMenuBtnsText:hover{ color: black; } -.vialPlotAllMenuBtns{ - width:70px; - height: 130px; +.quadMenuBtnsText { + color: orange; + font-size: 20px; + font-weight: bold; + margin: -3px 0px 0px 0px; +} + +.quadMenuBtnsText:hover{ + color: black; +} + +.quadMenuBtns{ + width: 50px; + height: 75px; margin: 2px; border-radius: 5px; background-color: black; border: 1px solid white; - position: absolute; - top: 392px; - left: 27px; color: orange; font-size: 17px; font-weight: bold; } -.vialPlotAllMenuBtns:hover{ +.quadMenuBtns:hover{ background-color: orange; color: black; } @@ -72,4 +80,4 @@ position: absolute; top: 10px; left: 350px; -} \ No newline at end of file +} diff --git a/app/components/calibrationInputs/ODCalGUI.js b/app/components/calibrationInputs/ODCalGUI.js index 5322b6840..eb72e31cf 100644 --- a/app/components/calibrationInputs/ODCalGUI.js +++ b/app/components/calibrationInputs/ODCalGUI.js @@ -39,7 +39,7 @@ function zipValues(odState, vialOpacities, generalOpacity, valueInputs, vialLabe zippedSamples[i][j] = temp; } } - console.log(zippedSamples) + //console.log(zippedSamples) return zippedSamples } //generalOpacity = newState.map((x, i) => x[2]) @@ -51,7 +51,7 @@ function unzipValues(zippedArray) { let valueInputs = [[],[],[],[]]; let vialLabels = [[],[],[],[]]; - console.log(zippedArray) + //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]); @@ -156,7 +156,7 @@ export default class ODCalGUI extends Component { handleAdvance = (event) => { let zippedSamples = zipValues(this.state.odState, this.state.vialOpacities, this.state.generalOpacity, this.state.valueInputs, this.state.vialLabels) - console.log(zippedSamples) + //console.log(zippedSamples) let newState = new Array(zippedSamples.length); for (var i = 0; i < newState.length; i++) { newState[i] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],]; @@ -183,7 +183,7 @@ export default class ODCalGUI extends Component { } let unzipped = unzipValues(newState) - console.log(unzipped) + //console.log(unzipped) let odState = unzipped[0] let vialOpacities = unzipped[1] let generalOpacity = unzipped[2] diff --git a/app/components/graphing/VialArrayGraph.js b/app/components/graphing/VialArrayGraph.js index f074deab7..4cb7fe724 100644 --- a/app/components/graphing/VialArrayGraph.js +++ b/app/components/graphing/VialArrayGraph.js @@ -31,7 +31,7 @@ const styles = theme => ({ backgroundColor: 'black', position: 'absolute', top: '390px', - left: '-60px', + left: '-35px', transform: 'rotate(-90deg)', textAlign: 'center' } diff --git a/app/components/graphing/VialMenu.js b/app/components/graphing/VialMenu.js index 6eaaab716..0edf57dac 100644 --- a/app/components/graphing/VialMenu.js +++ b/app/components/graphing/VialMenu.js @@ -8,7 +8,8 @@ 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 = [0,1,2,3]; class VialMenu extends React.Component { @@ -31,11 +32,10 @@ class VialMenu extends React.Component {

    INDIVIDUAL PLOTS

    + margin: '410px 0px 0px 130px'}}> {vialButtons.map((vialButton, index) => (
    - +
    + {quadButtons.map((quadButton, index) => ( + + ))} +
    + ); From 25bc541b5e050ec8c47695abc80ed96027e8ef1d Mon Sep 17 00:00:00 2001 From: HT_eVOLVER Date: Thu, 28 Apr 2022 16:28:56 -0400 Subject: [PATCH 12/12] pre-merge, stable version of ht evolver gui updates --- app/components/DensityCalibrate.js | 70 +++++++------- app/components/Graph.css | 80 ++++++++++++++-- app/components/Graph.js | 35 ++++--- app/components/Setup.js | 14 ++- app/components/calibrationInputs/ODCalGUI.js | 14 +-- app/components/graphing/VialArrayBtns.js | 4 +- app/components/graphing/VialArrayGraph.js | 49 +++++----- app/components/graphing/VialMenu.js | 98 +++++++++++++++----- app/main.dev.js | 2 +- 9 files changed, 250 insertions(+), 116 deletions(-) diff --git a/app/components/DensityCalibrate.js b/app/components/DensityCalibrate.js index a0d3c467d..cb5207a61 100644 --- a/app/components/DensityCalibrate.js +++ b/app/components/DensityCalibrate.js @@ -68,7 +68,7 @@ class ODcal extends React.Component { 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']), - vialData: { + quadsData: { 'od90': [[],[],[],[]], 'temp': [] }, @@ -105,10 +105,7 @@ class ODcal extends React.Component { odData[i].push(odLeft[i][6], odLeft[i][7], odLeft[i][8], odRight[i][6], odRight[i][7], odRight[i][8]); } - //console.log(response.data) - //console.log(odData); - console.log(this.state.vialData); - let newVialData = this.state.vialData; + 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; @@ -128,13 +125,13 @@ class ODcal extends React.Component { for (var i = 0; i < 4; i++) { for (var j = 0; j < 18; j++) { var shift = this.calculateShift(j); - newVialData.od90[i][j][shift].push(parseInt(odData[i][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.temp[i][j][shift].push(parseInt(response.data.temp[i])); + //newquadsData.temp[i][j][shift].push(parseInt(response.data.temp[i])); } } } @@ -149,7 +146,7 @@ class ODcal extends React.Component { // Check how many reads have been finished by looking through the data structure for (var i = 0; i < 18; i++) { - if (newVialData.od90[0][0][i].length === this.state.timesRead) { + if (newquadsData.od90[0][0][i].length === this.state.timesRead) { readsFinished += 1; } } @@ -161,9 +158,8 @@ class ODcal extends React.Component { this.handleUnlockBtns(); newSkipFirst = true; } - console.log(newVialData); this.setState({ - vialData: newVialData, + quadsData: newquadsData, readProgress: readProgress, progressCompleted: progressCompleted, readsFinished: readsFinished, @@ -209,23 +205,23 @@ class ODcal extends React.Component { 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.od90[0].length === 0) { + if (newquadsData.od90[0].length === 0) { for (var i = 0; i < 4; i++) { for (var j = 0; j < 18; j++) { - //newVialData.od135[i].push([]); - newVialData.od90[i].push([]); - //newVialData.temp[i].push([]); + //newquadsData.od135[i].push([]); + newquadsData.od90[i].push([]); + //newquadsData.temp[i].push([]); for (var k = 0; k < 18; k++) { // fill these guys with nothing to start just to - //newVialData.od135[i][j].push([]); - newVialData.od90[i][j].push([]); - //newVialData.temp[i][j].push([]); + //newquadsData.od135[i][j].push([]); + newquadsData.od90[i][j].push([]); + //newquadsData.temp[i][j].push([]); } } } @@ -234,13 +230,13 @@ class ODcal extends React.Component { // remove existing data for particular layout for (var i = 0; i < 4; i++) { for (var j = 0; j < 18; j++) { - //newVialData.od135[i][this.calculateShift(j)] = []; - newVialData.od90[i][j][this.calculateShift(j)] = []; - //newVialData.temp[i][this.calculateShift(j)] = []; + //newquadsData.od135[i][this.calculateShift(j)] = []; + newquadsData.od90[i][j][this.calculateShift(j)] = []; + //newquadsData.temp[i][this.calculateShift(j)] = []; } } this.setState({ - vialData: newVialData, + quadsData: newquadsData, readProgress: this.state.readProgress + .01 }); }; @@ -249,21 +245,21 @@ class ODcal extends React.Component { 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++) { - for (var j = 0; j < this.vialData.od90[i].length; j++) { - if (newVialData.od135) { - newVialData.od135[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] = []; } - newVialData.od90[i][this.state.currentStep - 1] = []; - //newVialData.temp[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, + quadsData: newquadsData, skipFirst: true }); } @@ -411,10 +407,10 @@ class ODcal extends React.Component { measuredData: this.state.enteredValuesFloat, fits: [] }; - if (this.state.vialData.od90[0][0].length > 0) { + if (this.state.quadsData.od90[0][0].length > 0) { rawList.push({ - param: 'od_90_right', - vialData: this.state.vialData.od90 + param: 'od_90', + quadsData: this.state.quadsData.od90 }); } saveData.raw = rawList; @@ -478,7 +474,7 @@ class ODcal extends React.Component { onClick = {this.startRead} > ; try { - if (this.state.vialData.od135[0][this.calculateShift(0)].length === this.state.timesRead) { + if (this.state.quadsData.od135[0][this.calculateShift(0)].length === this.state.timesRead) { measureButton = : + return (

    {exptName}

    {dataDisplay} -
    +
    -
    +
    - +
    - - + + {logGraph}
    diff --git a/app/components/Setup.js b/app/components/Setup.js index 715c3abf7..e3c26ff11 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++) { @@ -116,7 +122,7 @@ export default class Setup extends Component { rawData[i].vial = this.state.vialData[i].vial; rawData[i].selected = this.state.vialData[i].selected; - rawData[i].od_135 = responseData.od_135[i]; + //rawData[i].od_135 = responseData.od_135[i]; rawData[i].od_90 = responseData.od_90[i]; rawData[i].temp = responseData.temp[i]; } @@ -124,7 +130,6 @@ export default class Setup extends Component { } 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'); @@ -169,6 +174,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) { diff --git a/app/components/calibrationInputs/ODCalGUI.js b/app/components/calibrationInputs/ODCalGUI.js index eb72e31cf..cf52868d8 100644 --- a/app/components/calibrationInputs/ODCalGUI.js +++ b/app/components/calibrationInputs/ODCalGUI.js @@ -83,7 +83,7 @@ export default class ODCalGUI extends Component { constructor(props) { super(props); this.state = { - odState: Array(4).fill([12,13,14,15,16,17,6,7,8,9,10,11,0,1,2,3,4,5]), + 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, @@ -117,19 +117,19 @@ export default class ODCalGUI extends Component { newState[i] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],]; } for (var i = 0; i < zippedSamples.length; i++) { - newState[i][11] = zippedSamples[i][0] + 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][17] = zippedSamples[i][6] + 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][5] = zippedSamples[i][12] + newState[i][11] = zippedSamples[i][12] newState[i][12] = zippedSamples[i][13] newState[i][13] = zippedSamples[i][14] newState[i][14] = zippedSamples[i][15] @@ -162,19 +162,19 @@ export default class ODCalGUI extends Component { newState[i] = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],]; } for (var i = 0; i < zippedSamples.length; i++) { - newState[i][0] = zippedSamples[i][11] + 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][17] + 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][5] + newState[i][12] = zippedSamples[i][11] newState[i][13] = zippedSamples[i][12] newState[i][14] = zippedSamples[i][13] newState[i][15] = zippedSamples[i][14] diff --git a/app/components/graphing/VialArrayBtns.js b/app/components/graphing/VialArrayBtns.js index 5513d540d..93edd07dd 100644 --- a/app/components/graphing/VialArrayBtns.js +++ b/app/components/graphing/VialArrayBtns.js @@ -18,11 +18,11 @@ const styles = theme => ({ display: 'flex', width: '300px', padding: '0px 0px 30px 0px', - justifyContent: 'center', + 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 4cb7fe724..58df69b39 100644 --- a/app/components/graphing/VialArrayGraph.js +++ b/app/components/graphing/VialArrayGraph.js @@ -51,13 +51,18 @@ class VialArrayGraph extends React.Component { activePlot: this.props.activePlot, data: [], loaded: false, - missingData: false + missingData: false, + selectedSmartQuad: this.props.selectedSmartQuad }; } 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()) @@ -88,6 +93,7 @@ class VialArrayGraph extends React.Component { } componentDidMount () { + console.log(this.props) setTimeout(this.getData, 100); if (this.timeTicket) { clearInterval(this.timeTicket); @@ -103,8 +109,8 @@ class VialArrayGraph extends React.Component { initializeGraphs = () => { var option = []; - for (var i = 0; i < 16; i++) { - option[i] = this.allVials(i, [], null, null) + for (var i = 0; i < 18; i++) { + option[i] = this.allVials(i, 0, [], null, null) } return option } @@ -114,12 +120,13 @@ class VialArrayGraph extends React.Component { if (this.state.activePlot == 'ALL'){ console.log('Plotting All Vials!') if (!fs.existsSync(path.join(this.props.exptDir,'data'))) { + console.log(path.join(this.props.exptDir,'data')) this.setState({missingData: true}); return; } - for (var i = 0; i < 16; i++) { - 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'); + for (var i = 0; i < 18; i++) { + 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 timePlotted = parseFloat(this.state.timePlotted.substring(0, this.state.timePlotted.length - 1)); @@ -170,15 +177,15 @@ class VialArrayGraph extends React.Component { } compiled_data[i] = data; - option[i] = this.allVials(i, data, ymin, this.state.ymax) + option[i] = this.allVials(i, this.state.selectedSmartQuad, data, ymin, this.state.ymax) } } else { console.log('Plotting Vial: ' + this.state.activePlot) - 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)); @@ -226,14 +233,14 @@ class VialArrayGraph extends React.Component { this.setState({data: compiled_data, option: option, loaded: true, missingData: false}) } - allVials = (vial, data, ymin, ymax) => ({ + allVials = (vial, quad, data, ymin, ymax) => ({ 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: { @@ -312,9 +319,9 @@ class VialArrayGraph extends React.Component { singleVial = (vial, data, ymin, ymax) => ({ title: { - text:'Vial ' + vial, + text:'SQ:' + this.state.selectedSmartQuad.toString() + ' Vial:' + vial, top: 0, - left: '50%', + left: '40%', textStyle: { color: 'white', fontSize: 30, @@ -417,7 +424,7 @@ class VialArrayGraph extends React.Component {
    + style={{height: 190, width: 135}} /> {loadingText}
    ))} @@ -438,13 +445,7 @@ class VialArrayGraph extends React.Component { return ( -
    - - EXPERIMENT TIME (h) - - - {this.state.xaxisName} - +
    {graph}
    diff --git a/app/components/graphing/VialMenu.js b/app/components/graphing/VialMenu.js index 0edf57dac..76f91ac6c 100644 --- a/app/components/graphing/VialMenu.js +++ b/app/components/graphing/VialMenu.js @@ -9,58 +9,106 @@ const styles = { }; const vialButtons = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]; -const quadButtons = [0,1,2,3]; +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; + if (this.state.activePlot == 'ALL') { + plotToggle =
    + width:'200px', + height: '200px', + position: 'absolute', + margin: '455px 0px 0px 25px'}}> + +
    + } else { + plotToggle = +
    + +
    + } + + return ( -

    INDIVIDUAL PLOTS

    +
    +

    PLOT SELECTION

    +
    + {quadButtons.map((quadButton, index) => ( + quadButton == this.state.selectedSmartQuad ? + : + + ))} +
    + {plotToggle}
    + margin: '455px 0px 0px 10px'}}> {vialButtons.map((vialButton, index) => ( ))}
    -
    - {quadButtons.map((quadButton, index) => ( - - ))} -
    diff --git a/app/main.dev.js b/app/main.dev.js index 6f5eb01c9..d50662297 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -72,7 +72,7 @@ function startPythonExpt(exptDir, flag) { // We need to make the path a variable - needs to be either set by user or we require it to be installed at a specific location. var options = { mode: 'text', - pythonPath: '/Library/Frameworks/Python.framework/Versions/3.6/bin/python3', + pythonPath: '/Users/ht_evolver/.pyenv/versions/evolver-electron/bin/python', args: flag }; var pyShell = new PythonShell(scriptName, options);