diff --git a/protocol-designer/src/components/LabwareSelectionModal/LabwareSelectionModal.js b/protocol-designer/src/components/LabwareSelectionModal/LabwareSelectionModal.js index aa6b0e00f86..25b72e50d5a 100644 --- a/protocol-designer/src/components/LabwareSelectionModal/LabwareSelectionModal.js +++ b/protocol-designer/src/components/LabwareSelectionModal/LabwareSelectionModal.js @@ -1,5 +1,6 @@ // @flow import * as React from 'react' +import {getLabwareDiagramURL} from '../../images' import { ClickOutside, OutlineButton, @@ -33,7 +34,8 @@ const hardcodedLabware = { ['tube-rack-.75ml', '0.75mL Tube Rack', 'Tuberack-075ml'], ['tube-rack-2ml', '2mL Tube Rack', 'Tuberack-2ml'], ['24-vial-rack', '3.5mL Tube Rack'], - ['tube-rack-15_50ml', '15mL x 6 + 50mL x 4 Tube Rack', 'Tuberack-15-50ml'], + ['opentrons-tuberack-15_50ml', '15mL x 6 + 50mL x 4 Tube Rack (4-in-1 Rack)', 'Opentrons-4-in-1-tuberack-15-50'], + ['tube-rack-15_50ml', '15mL x 6 + 50mL x 4 Tube Rack (Clear Acrylic)', 'Tuberack-15-50ml'], ], 'Well Plate': [ ['96-deep-well', '96 Deep Well Plate', '96-Deep-Well'], @@ -67,7 +69,7 @@ const labwareSectionOrder: Array<$Keys> = [ class LabwareDropdown extends React.Component { labwareItemMapper = (dataRow, key) => { const {selectLabware} = this.props - const [labwareType, displayName, img] = dataRow + const [labwareType, displayName, imgFileName] = dataRow return ( { displayName={displayName} selectLabware={selectLabware} // TODO: Ian 2018-02-22 If these images stay, factor out this magic URL more obvious (or import them with webpack) - labwareImgUrl={img - ? `http://docs.opentrons.com/_images/${img}.png` - : null - } + labwareImgUrl={getLabwareDiagramURL(imgFileName)} /> ) } diff --git a/protocol-designer/src/components/LabwareSelectionModal/styles.css b/protocol-designer/src/components/LabwareSelectionModal/styles.css index 1b7ca1e7879..748a3b7a698 100644 --- a/protocol-designer/src/components/LabwareSelectionModal/styles.css +++ b/protocol-designer/src/components/LabwareSelectionModal/styles.css @@ -17,7 +17,7 @@ left: 0; right: 0; top: 12%; - max-width: 20rem; + max-width: 25rem; margin: auto; padding: 1rem 2rem; user-select: none; @@ -39,10 +39,13 @@ */ .labware_list_item:hover::after { position: absolute; + width: 32rem; + height: 15rem; + background-color: var(--c-white); content: var(--image-url); border: var(--bd-light); top: 4rem; - left: 8rem; + left: 10rem; /* Images too large, and need to be cropped from left */ zoom: 0.5; diff --git a/protocol-designer/src/images/index.js b/protocol-designer/src/images/index.js new file mode 100644 index 00000000000..873440b405e --- /dev/null +++ b/protocol-designer/src/images/index.js @@ -0,0 +1,2 @@ +// @flow +export {getLabwareDiagramURL} from './labware' diff --git a/protocol-designer/src/images/labware/384-plate.png b/protocol-designer/src/images/labware/384-plate.png new file mode 100644 index 00000000000..8c4bf213046 Binary files /dev/null and b/protocol-designer/src/images/labware/384-plate.png differ diff --git a/protocol-designer/src/images/labware/96-Deep-Well.png b/protocol-designer/src/images/labware/96-Deep-Well.png new file mode 100644 index 00000000000..84e8343bec5 Binary files /dev/null and b/protocol-designer/src/images/labware/96-Deep-Well.png differ diff --git a/protocol-designer/src/images/labware/96-PCR-Flatt.png b/protocol-designer/src/images/labware/96-PCR-Flatt.png new file mode 100644 index 00000000000..b90e7ab6f08 Binary files /dev/null and b/protocol-designer/src/images/labware/96-PCR-Flatt.png differ diff --git a/protocol-designer/src/images/labware/96-PCR-Strip.png b/protocol-designer/src/images/labware/96-PCR-Strip.png new file mode 100644 index 00000000000..5657b407cb5 Binary files /dev/null and b/protocol-designer/src/images/labware/96-PCR-Strip.png differ diff --git a/protocol-designer/src/images/labware/96-PCR-Tall.png b/protocol-designer/src/images/labware/96-PCR-Tall.png new file mode 100644 index 00000000000..687f28988ba Binary files /dev/null and b/protocol-designer/src/images/labware/96-PCR-Tall.png differ diff --git a/protocol-designer/src/images/labware/Opentrons-4-in-1-tuberack-15-50.png b/protocol-designer/src/images/labware/Opentrons-4-in-1-tuberack-15-50.png new file mode 100644 index 00000000000..951a22e86fc Binary files /dev/null and b/protocol-designer/src/images/labware/Opentrons-4-in-1-tuberack-15-50.png differ diff --git a/protocol-designer/src/images/labware/Tiprack-1000.png b/protocol-designer/src/images/labware/Tiprack-1000.png new file mode 100644 index 00000000000..f82c4921133 Binary files /dev/null and b/protocol-designer/src/images/labware/Tiprack-1000.png differ diff --git a/protocol-designer/src/images/labware/Tiprack-1000ul-chem.png b/protocol-designer/src/images/labware/Tiprack-1000ul-chem.png new file mode 100644 index 00000000000..72c666afdc9 Binary files /dev/null and b/protocol-designer/src/images/labware/Tiprack-1000ul-chem.png differ diff --git a/protocol-designer/src/images/labware/Tiprack-10ul-H.png b/protocol-designer/src/images/labware/Tiprack-10ul-H.png new file mode 100644 index 00000000000..cb013f0449d Binary files /dev/null and b/protocol-designer/src/images/labware/Tiprack-10ul-H.png differ diff --git a/protocol-designer/src/images/labware/Tiprack-10ul.png b/protocol-designer/src/images/labware/Tiprack-10ul.png new file mode 100644 index 00000000000..757a207f8f7 Binary files /dev/null and b/protocol-designer/src/images/labware/Tiprack-10ul.png differ diff --git a/protocol-designer/src/images/labware/Tiprack-200ul.png b/protocol-designer/src/images/labware/Tiprack-200ul.png new file mode 100644 index 00000000000..c0f73d1026d Binary files /dev/null and b/protocol-designer/src/images/labware/Tiprack-200ul.png differ diff --git a/protocol-designer/src/images/labware/Trough-12row.png b/protocol-designer/src/images/labware/Trough-12row.png new file mode 100644 index 00000000000..e4d8fe13ae7 Binary files /dev/null and b/protocol-designer/src/images/labware/Trough-12row.png differ diff --git a/protocol-designer/src/images/labware/Tuberack-075ml.png b/protocol-designer/src/images/labware/Tuberack-075ml.png new file mode 100644 index 00000000000..3db2083ac9e Binary files /dev/null and b/protocol-designer/src/images/labware/Tuberack-075ml.png differ diff --git a/protocol-designer/src/images/labware/Tuberack-15-50ml.png b/protocol-designer/src/images/labware/Tuberack-15-50ml.png new file mode 100644 index 00000000000..6406fb7a8cb Binary files /dev/null and b/protocol-designer/src/images/labware/Tuberack-15-50ml.png differ diff --git a/protocol-designer/src/images/labware/Tuberack-2ml.png b/protocol-designer/src/images/labware/Tuberack-2ml.png new file mode 100644 index 00000000000..cd5b3903f47 Binary files /dev/null and b/protocol-designer/src/images/labware/Tuberack-2ml.png differ diff --git a/protocol-designer/src/images/labware/index.js b/protocol-designer/src/images/labware/index.js new file mode 100644 index 00000000000..441c75a259c --- /dev/null +++ b/protocol-designer/src/images/labware/index.js @@ -0,0 +1,20 @@ +// @flow +const _fileMap = { + '96-Deep-Well': require('./96-Deep-Well.png'), + '96-PCR-Flatt': require('./96-PCR-Flatt.png'), + '96-PCR-Tall': require('./96-PCR-Tall.png'), + '384-plate': require('./384-plate.png'), + 'Opentrons-4-in-1-tuberack-15-50': require('./Opentrons-4-in-1-tuberack-15-50.png'), + 'Tiprack-10ul-H': require('./Tiprack-10ul-H.png'), + 'Tiprack-10ul': require('./Tiprack-10ul.png'), + 'Tiprack-200ul': require('./Tiprack-200ul.png'), + 'Tiprack-1000': require('./Tiprack-1000.png'), + 'Tiprack-1000ul-chem': require('./Tiprack-1000ul-chem.png'), + 'Trough-12row': require('./Trough-12row.png'), + 'Tuberack-2ml': require('./Tuberack-2ml.png'), + 'Tuberack-15-50ml': require('./Tuberack-15-50ml.png'), + 'Tuberack-075ml': require('./Tuberack-075ml.png'), +} + +export const getLabwareDiagramURL = (fileName?: string): ?string => + (fileName && _fileMap[fileName]) || null