feat(protocol-designer): add 4-in-1 15-50 tuberack to PD

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,18 +69,15 @@ const labwareSectionOrder: Array<$Keys<typeof hardcodedLabware>> = [
 class LabwareDropdown extends React.Component <Props> {
   labwareItemMapper = (dataRow, key) => {
     const {selectLabware} = this.props
-    const [labwareType, displayName, img] = dataRow
+    const [labwareType, displayName, imgFileName] = dataRow
     return (
       <LabwareItem
         key={key}
         containerType={labwareType}
         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)}
       />
     )
   }

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;

protocol-designer/src/images/index.js

@@ -0,0 +1,2 @@
+// @flow
+export {getLabwareDiagramURL} from './labware'

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