-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(protocol-designer): create view to browse final liquid state (#2451
) Build the ability to drill down into a labware from the final deck state in order to inspect the resulting liquid state of your protocol. Closes #2335
- Loading branch information
Showing
24 changed files
with
345 additions
and
123 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
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
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
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
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
92 changes: 92 additions & 0 deletions
92
protocol-designer/src/components/labware/BrowseLabwareModal.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,92 @@ | ||
| // @flow | ||
| import * as React from 'react' | ||
| import cx from 'classnames' | ||
| import map from 'lodash/map' | ||
| import {connect} from 'react-redux' | ||
|
|
||
| import {getWellDefsForSVG} from '@opentrons/shared-data' | ||
|
|
||
| import { | ||
| Modal, | ||
| Well, | ||
| LabwareOutline, | ||
| LabwareLabels, | ||
| ingredIdsToColor, | ||
| } from '@opentrons/components' | ||
| import type {BaseState, ThunkDispatch} from '../../types' | ||
| import i18n from '../../localization' | ||
|
|
||
| import * as wellContentsSelectors from '../../top-selectors/well-contents' | ||
| import {selectors} from '../../labware-ingred/reducers' | ||
| import * as labwareIngredsActions from '../../labware-ingred/actions' | ||
| import type {ContentsByWell} from '../../labware-ingred/types' | ||
|
|
||
| import SingleLabwareWrapper from '../SingleLabware' | ||
|
|
||
| import modalStyles from '../modals/modal.css' | ||
| import styles from './labware.css' | ||
|
|
||
| type SP = { | ||
| wellContents: ContentsByWell, | ||
| labwareType: string, | ||
| } | ||
| type DP = { | ||
| drillUp: () => mixed, | ||
| } | ||
|
|
||
| type Props = SP & DP | ||
|
|
||
| class BrowseLabwareModal extends React.Component<Props> { | ||
| handleClose = () => { | ||
| this.props.drillUp() | ||
| } | ||
|
|
||
| render () { | ||
| const allWellDefsByName = getWellDefsForSVG(this.props.labwareType) | ||
|
|
||
| return ( | ||
| <Modal | ||
| className={modalStyles.modal} | ||
| contentsClassName={cx(modalStyles.modal_contents, modalStyles.transparent_content)} | ||
| onCloseClick={this.handleClose}> | ||
| <SingleLabwareWrapper showLabels> | ||
| <g> | ||
| <LabwareOutline /> | ||
| {map(this.props.wellContents, (well, wellName) => ( | ||
| <Well | ||
| selectable | ||
| key={wellName} | ||
| wellName={wellName} | ||
| highlighted={well.highlighted} | ||
| selected={well.selected} | ||
| fillColor={ingredIdsToColor(well.groupIds)} | ||
| svgOffset={{x: 1, y: -3}} | ||
| wellDef={allWellDefsByName[wellName]} /> | ||
| ))} | ||
| </g> | ||
| <LabwareLabels labwareType={this.props.labwareType} inner={false} /> | ||
| </SingleLabwareWrapper> | ||
| <div className={styles.modal_instructions}>{i18n.t('modal.browse_labware.instructions')}</div> | ||
| </Modal> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| function mapStateToProps (state: BaseState): SP { | ||
| const labwareId = selectors.getDrillDownLabwareId(state) | ||
| const allLabware = selectors.getLabware(state) | ||
| const labware = labwareId && allLabware ? allLabware[labwareId] : null | ||
| const allWellContents = wellContentsSelectors.lastValidWellContents(state) | ||
| const wellContents = labwareId && allWellContents ? allWellContents[labwareId] : {} | ||
|
|
||
| return { | ||
| wellContents, | ||
| labwareType: labware ? labware.type : 'missing labware', | ||
| } | ||
| } | ||
|
|
||
| function mapDispatchToProps (dispatch: ThunkDispatch<*>): DP { | ||
| return {drillUp: () => dispatch(labwareIngredsActions.drillUpFromLabware())} | ||
| } | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(BrowseLabwareModal) |
24 changes: 24 additions & 0 deletions
24
protocol-designer/src/components/labware/BrowseLabwareOverlay.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,24 @@ | ||
| // @flow | ||
| import React from 'react' | ||
| import cx from 'classnames' | ||
| import styles from './labware.css' | ||
|
|
||
| import ClickableText from './ClickableText' | ||
|
|
||
| type Props = { | ||
| drillDown: () => mixed, | ||
| drillUp: () => mixed, | ||
| } | ||
|
|
||
| function BrowseLabwareOverlay (props: Props) { | ||
| return ( | ||
| <g className={cx(styles.slot_overlay, styles.appear_on_mouseover)}> | ||
| <rect className={styles.overlay_panel} /> | ||
| <ClickableText | ||
| onClick={props.drillDown} | ||
| iconName='water' y='40%' text='View Liquids' /> | ||
| </g> | ||
| ) | ||
| } | ||
|
|
||
| export default BrowseLabwareOverlay |
Oops, something went wrong.