-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #36 from machineagency/text-workflow
Implement sonication protocol actions
- Loading branch information
Showing
11 changed files
with
412 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
src/components/actions/buildSonicationProtocol/BuildSonicationProtocol.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React from "react"; | ||
| import GenericAction from "../GenericAction"; | ||
| import Inport from "../../base/Inport"; | ||
| import Outport from "../../base/Outport"; | ||
| import SonicationProtocol from "./SonicationProtocol"; | ||
|
|
||
| import "./buildSonicationProtocol.css"; | ||
| import Jubilee from "../jubileedeck/Jubilee"; | ||
|
|
||
| export default class BuildSonicationProtocol extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| inports: [ | ||
| new Inport("Input", Jubilee, new Jubilee(), "The Jubilee Deck"), | ||
| ], | ||
| outports: [ | ||
| new Outport( | ||
| "Output", | ||
| SonicationProtocol, | ||
| new SonicationProtocol(), | ||
| "A sonication protocol." | ||
| ), | ||
| ], | ||
| }; | ||
| } | ||
|
|
||
| static getDerivedStateFromProps(nextProps, prevState) { | ||
| if (!nextProps.payload) return null; | ||
|
|
||
| // This is where data comes in from a link and is assigned to a port | ||
| // This is where you should do anything that should happen when a link is connected | ||
| prevState.inports[0].data = nextProps.payload.data.data; | ||
|
|
||
| return prevState; | ||
| } | ||
|
|
||
| addSonicationCommand(slot) { | ||
| console.log("making a command"); | ||
| console.log(slot); | ||
| } | ||
|
|
||
| renderDeck() { | ||
| if (!this.state.inports[0].data) return; | ||
| let preview = []; | ||
| for (var slot = 0; slot < this.state.inports[0].data.deck.length; slot++) { | ||
| preview.push( | ||
| <div | ||
| className="deckSlot" | ||
| key={slot} | ||
| onClick={this.addSonicationCommand.bind(this, slot)} | ||
| > | ||
| {!this.state.inports[0].data.deck[slot] | ||
| ? "" | ||
| : `${this.state.inports[0].data.deck[slot].name}`} | ||
| <br /> | ||
| {!this.state.inports[0].data.deck[slot] | ||
| ? `empty` | ||
| : `${this.state.inports[0].data.deck[slot].xWells}x${this.state.inports[0].data.deck[slot].yWells}`} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| preview.splice(2, 0, <br key={`break1`} />); | ||
| preview.splice(5, 0, <br key={`break2`} />); | ||
|
|
||
| return preview; | ||
| } | ||
|
|
||
| addStep() { | ||
| let outports = [...this.state.outports]; | ||
| outports[0].data.addStep(1, "A", 2, 3.0, 2, true); | ||
| this.setState({ outports: outports }); | ||
| } | ||
|
|
||
| renderProtocol() { | ||
| if (!this.state.outports[0].data) return; | ||
| let protocolView = []; | ||
| const protocol = this.state.outports[0].data.protocol.protocol; | ||
| for (var step = 0; step < protocol.length; step++) { | ||
| protocolView.push( | ||
| <div key={step}> | ||
| <span>{`${step}. Sonicate well ${protocol[step].specs.row_letter}${ | ||
| step + 1 | ||
| }\n`}</span> | ||
| </div> | ||
| ); | ||
| } | ||
| return protocolView; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <GenericAction | ||
| inports={this.state.inports} | ||
| outports={this.state.outports} | ||
| actionID={this.props.id} | ||
| > | ||
| <div className="actionTitle">Create Sonication Protocol</div> | ||
| <div className="actionContent"> | ||
| <div className="deck">{this.renderDeck.bind(this)()}</div> | ||
| <div> | ||
| <button | ||
| className="planagerButton" | ||
| onClick={this.addStep.bind(this)} | ||
| > | ||
| Add Step | ||
| </button> | ||
| </div> | ||
| <div className="protocol">{this.renderProtocol.bind(this)()}</div> | ||
| </div> | ||
| </GenericAction> | ||
| ); | ||
| } | ||
| } |
50 changes: 50 additions & 0 deletions
50
src/components/actions/buildSonicationProtocol/SonicationProtocol.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /* eslint-disable no-throw-literal */ | ||
|
|
||
| export default class SonicationProtocol { | ||
| constructor() { | ||
| this._protocol = { protocol: [] }; | ||
| } | ||
|
|
||
| toJSON() { | ||
| return `Sonication Protocol object`; | ||
| } | ||
|
|
||
| addStep( | ||
| deck_index, | ||
| row_letter, | ||
| column_index, | ||
| plunge_depth, | ||
| seconds, | ||
| autoclean = true | ||
| ) { | ||
| this._protocol.protocol.push({ | ||
| operation: "sonicate_well", | ||
| specs: { | ||
| deck_index: deck_index, | ||
| row_letter: row_letter, | ||
| column_index: column_index, | ||
| plunge_depth: plunge_depth, | ||
| seconds: seconds, | ||
| autoclean: autoclean, | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| removeStep(index) { | ||
| this._protocol.splice(index, 1); | ||
| } | ||
|
|
||
| /** | ||
| * @returns {Object} | ||
| */ | ||
| get protocol() { | ||
| return this._protocol; | ||
| } | ||
|
|
||
| // /** | ||
| // * @param {Object} Jubilee Deck | ||
| // */ | ||
| set deck(jubileeDeck) { | ||
| this._deck = jubileeDeck; | ||
| } | ||
| } |
20 changes: 20 additions & 0 deletions
20
src/components/actions/buildSonicationProtocol/buildSonicationProtocol.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .deckSlot { | ||
| height: 50px; | ||
| width: 100px; | ||
| padding: 7px; | ||
| border-radius: 4px; | ||
| display: inline-block; | ||
| margin: 3px; | ||
| border: 1px solid gray; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .deck { | ||
| padding: 5px; | ||
| border: 1px solid gray; | ||
| margin: 4px; | ||
| border-radius: 5px; | ||
| background-color: #f7f7f7; | ||
| width: max-content; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React from "react"; | ||
| import GenericAction from "../GenericAction"; | ||
| import Inport from "../../base/Inport"; | ||
| import Outport from "../../base/Outport"; | ||
|
|
||
| export default class DownloadFile extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| inports: [ | ||
| new Inport("Input", "any", null, "The data to be displayed.") | ||
| ], | ||
| outports: [ | ||
| new Outport("Output", "any", null, "The data that was displayed."), | ||
| ], | ||
| }; | ||
| } | ||
|
|
||
| static getDerivedStateFromProps(nextProps, prevState) { | ||
| if (!nextProps.payload) return null; | ||
|
|
||
| // This is where data comes in from a link and is assigned to a port | ||
| // This is where you should do anything that should happen when a link is connected | ||
| prevState.inports[0].data = nextProps.payload.data.data; | ||
| prevState.outports[0].data = nextProps.payload.data.data; | ||
|
|
||
| return prevState; | ||
| } | ||
|
|
||
| download() { | ||
| alert(`Value: ${JSON.stringify(this.state.inports[0].data.protocol)}`); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <GenericAction | ||
| inports={this.state.inports} | ||
| outports={this.state.outports} | ||
| actionID={this.props.id} | ||
| > | ||
| <div className="actionTitle">Download</div> | ||
| <div className="actionContent"> | ||
| <input | ||
| type="button" | ||
| value="Download" | ||
| className="planagerButton" | ||
| onClick={this.download.bind(this)} | ||
| /> | ||
| </div> | ||
| </GenericAction> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React from "react"; | ||
| import GenericAction from "../GenericAction"; | ||
| import Inport from "../../base/Inport"; | ||
| import Outport from "../../base/Outport"; | ||
|
|
||
| export default class ProtocolViewer extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| inports: [new Inport("Input", "any", null, "The data to be displayed.")], | ||
| outports: [ | ||
| new Outport("Output", "any", null, "The data that was displayed."), | ||
| ], | ||
| }; | ||
| } | ||
|
|
||
| static getDerivedStateFromProps(nextProps, prevState) { | ||
| if (!nextProps.payload) return null; | ||
|
|
||
| // This is where data comes in from a link and is assigned to a port | ||
| // This is where you should do anything that should happen when a link is connected | ||
| prevState.inports[0].data = nextProps.payload.data.data; | ||
| prevState.outports[0].data = nextProps.payload.data.data; | ||
|
|
||
| return prevState; | ||
| } | ||
|
|
||
| formatSteps() { | ||
| let steps = []; | ||
| const protocol = this.state.inports[0].data.protocol.protocol; | ||
| for (let step = 0; step < protocol.length; step++) { | ||
| steps.push( | ||
| <div key={step}> | ||
| <span>{`${step}. Sonicate well ${protocol[step].specs.row_letter}${step+1}\n`}</span> | ||
| </div> | ||
| ); | ||
| } | ||
| return steps; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <GenericAction | ||
| inports={this.state.inports} | ||
| outports={this.state.outports} | ||
| actionID={this.props.id} | ||
| > | ||
| <div className="actionTitle">Protocol Viewer</div> | ||
| <div className="actionContent"> | ||
| {this.state.inports[0].data ? this.formatSteps.bind(this)() : "Empty"} | ||
| </div> | ||
| </GenericAction> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.