From ae0679662d5f2ae8e3ea742e3ef31687257a258f Mon Sep 17 00:00:00 2001
From: Katie Adee <kaa328@nyu.edu>
Date: Fri, 7 Feb 2020 11:58:38 -0500
Subject: [PATCH] feat(protocol-designer): Add module slot placement guidance
 (#4916)

closes #4815
---
 protocol-designer/src/components/FilePage.js  |  2 +-
 .../StepEditForm/forms/PauseForm.js           |  2 +-
 .../modals/EditModulesModal/EditModules.css   | 10 ++-
 .../modals/EditModulesModal/index.js          | 58 +++++++++-------
 .../modals/FilePipettesModal/index.js         |  4 +-
 .../src/components/modules/EditModulesCard.js | 16 ++++-
 .../src/components/modules/ModuleRow.js       | 68 ++++++++++++++++++-
 .../src/components/modules/styles.css         | 11 ++-
 .../src/localization/en/tooltip.json          |  4 ++
 protocol-designer/src/step-forms/utils.js     |  2 +-
 10 files changed, 140 insertions(+), 37 deletions(-)

diff --git a/protocol-designer/src/components/FilePage.js b/protocol-designer/src/components/FilePage.js
index d430e771c47..38bd06e914e 100644
--- a/protocol-designer/src/components/FilePage.js
+++ b/protocol-designer/src/components/FilePage.js
@@ -15,7 +15,7 @@ import i18n from '../localization'
 import { Portal } from './portals/MainPageModalPortal'
 import styles from './FilePage.css'
 import EditPipettesModal from './modals/EditPipettesModal'
-import EditModulesModal from './modals/EditModulesModal'
+import { EditModulesModal } from './modals/EditModulesModal'
 import { EditModulesCard } from './modules'
 import formStyles from '../components/forms/forms.css'
 import type { FileMetadataFields } from '../file-data'
diff --git a/protocol-designer/src/components/StepEditForm/forms/PauseForm.js b/protocol-designer/src/components/StepEditForm/forms/PauseForm.js
index 7f2fb313cb6..9c590a605dc 100644
--- a/protocol-designer/src/components/StepEditForm/forms/PauseForm.js
+++ b/protocol-designer/src/components/StepEditForm/forms/PauseForm.js
@@ -37,7 +37,7 @@ export const PauseForm = (props: PauseFormProps): React.Element<'div'> => {
   )
 
   const pauseUntilTempTooltip = (
-    <div className={styles.slot_tooltip}>
+    <div>
       {i18n.t(
         `tooltip.step_fields.pauseForAmountOfTime.disabled.wait_until_temp`
       )}
diff --git a/protocol-designer/src/components/modals/EditModulesModal/EditModules.css b/protocol-designer/src/components/modals/EditModulesModal/EditModules.css
index e8ad61d8bdd..0633999e25e 100644
--- a/protocol-designer/src/components/modals/EditModulesModal/EditModules.css
+++ b/protocol-designer/src/components/modals/EditModulesModal/EditModules.css
@@ -15,15 +15,16 @@
 .form_row {
   display: flex;
   justify-content: flex-start;
+  align-items: flex-start;
   margin: 2rem 0;
 }
 
 .option_model {
-  flex: 0 0 11rem;
+  flex: 0 1 11rem;
 }
 
 .option_slot {
-  flex: 0 0 11rem;
+  flex: 0 1 11rem;
   margin-left: 3rem;
   padding: 0 0.25rem 0.25rem;
 }
@@ -44,3 +45,8 @@
     margin-left: 1rem;
   }
 }
+
+.slot_map_container {
+  flex: 0 1 13rem;
+  padding: 0 3rem 0;
+}
diff --git a/protocol-designer/src/components/modals/EditModulesModal/index.js b/protocol-designer/src/components/modals/EditModulesModal/index.js
index 498e57fd814..bf440cb5a12 100644
--- a/protocol-designer/src/components/modals/EditModulesModal/index.js
+++ b/protocol-designer/src/components/modals/EditModulesModal/index.js
@@ -9,6 +9,7 @@ import {
   FormGroup,
   DropdownField,
   HoverTooltip,
+  SlotMap,
 } from '@opentrons/components'
 import {
   selectors as stepFormSelectors,
@@ -35,7 +36,7 @@ type EditModulesProps = {
   onCloseClick: () => mixed,
 }
 
-export default function EditModulesModal(props: EditModulesProps) {
+export function EditModulesModal(props: EditModulesProps) {
   const { moduleType, onCloseClick } = props
   const _initialDeckSetup = useSelector(stepFormSelectors.getInitialDeckSetup)
 
@@ -63,8 +64,9 @@ export default function EditModulesModal(props: EditModulesProps) {
     featureFlagSelectors.getDisableModuleRestrictions
   )
 
-  const occupiedSlotError =
-    !slotIsEmpty && enableSlotSelection ? 'Selected slot is occupied' : null
+  const occupiedSlotError = !slotIsEmpty
+    ? `Slot ${selectedSlot} is occupied by another module or by labware incompatible with this module. Remove module or labware from the slot in order to continue.`
+    : null
 
   const dispatch = useDispatch()
 
@@ -118,7 +120,7 @@ export default function EditModulesModal(props: EditModulesProps) {
         <PDAlert
           alertType="warning"
           title={i18n.t('alert.module_placement.SLOT_OCCUPIED.title')}
-          description={i18n.t('alert.module_placement.SLOT_OCCUPIED.body')}
+          description={''}
         />
       )}
       <form>
@@ -132,25 +134,35 @@ export default function EditModulesModal(props: EditModulesProps) {
             />
           </FormGroup>
           {showSlotOption && (
-            <HoverTooltip
-              placement="bottom"
-              tooltipComponent={enableSlotSelection ? null : slotOptionTooltip}
-            >
-              {hoverTooltipHandlers => (
-                <div {...hoverTooltipHandlers} className={styles.option_slot}>
-                  <FormGroup label="Position">
-                    <DropdownField
-                      tabIndex={1}
-                      options={getAllModuleSlotsByType(moduleType)}
-                      value={selectedSlot}
-                      disabled={!enableSlotSelection}
-                      onChange={handleSlotChange}
-                      error={occupiedSlotError}
-                    />
-                  </FormGroup>
-                </div>
-              )}
-            </HoverTooltip>
+            <>
+              <HoverTooltip
+                placement="top"
+                tooltipComponent={slotOptionTooltip}
+              >
+                {hoverTooltipHandlers => (
+                  <div {...hoverTooltipHandlers} className={styles.option_slot}>
+                    <FormGroup label="Position">
+                      <DropdownField
+                        tabIndex={1}
+                        options={getAllModuleSlotsByType(moduleType)}
+                        value={selectedSlot}
+                        disabled={!enableSlotSelection}
+                        onChange={handleSlotChange}
+                        error={occupiedSlotError}
+                      />
+                    </FormGroup>
+                  </div>
+                )}
+              </HoverTooltip>
+              <div className={styles.slot_map_container}>
+                {selectedSlot && (
+                  <SlotMap
+                    occupiedSlots={[`${selectedSlot}`]}
+                    isError={Boolean(occupiedSlotError)}
+                  />
+                )}
+              </div>
+            </>
           )}
         </div>
       </form>
diff --git a/protocol-designer/src/components/modals/FilePipettesModal/index.js b/protocol-designer/src/components/modals/FilePipettesModal/index.js
index 567219e5be9..549c9fbfcef 100644
--- a/protocol-designer/src/components/modals/FilePipettesModal/index.js
+++ b/protocol-designer/src/components/modals/FilePipettesModal/index.js
@@ -4,7 +4,7 @@ import reduce from 'lodash/reduce'
 import omit from 'lodash/omit'
 import * as React from 'react'
 import cx from 'classnames'
-import { getCrashablePipetteSelected } from '../../../step-forms'
+import { getIsCrashablePipetteSelected } from '../../../step-forms'
 import {
   Modal,
   FormGroup,
@@ -208,7 +208,7 @@ export class FilePipettesModal extends React.Component<Props, State> {
     const canSubmit = pipetteSelectionIsValid && tiprackSelectionIsValid
 
     const showCrashInfoBox =
-      getCrashablePipetteSelected(this.state.pipettesByMount) &&
+      getIsCrashablePipetteSelected(this.state.pipettesByMount) &&
       this.getCrashableModuleSelected(this.state.modulesByType)
 
     const visibleModules = this.props.thermocyclerEnabled
diff --git a/protocol-designer/src/components/modules/EditModulesCard.js b/protocol-designer/src/components/modules/EditModulesCard.js
index f4d065578f5..63a6d3f8402 100644
--- a/protocol-designer/src/components/modules/EditModulesCard.js
+++ b/protocol-designer/src/components/modules/EditModulesCard.js
@@ -4,8 +4,9 @@ import { useSelector } from 'react-redux'
 import { Card } from '@opentrons/components'
 import {
   selectors as stepFormSelectors,
-  getCrashablePipetteSelected,
+  getIsCrashablePipetteSelected,
 } from '../../step-forms'
+import { selectors as featureFlagSelectors } from '../../feature-flags'
 import { SUPPORTED_MODULE_TYPES } from '../../modules'
 import { THERMOCYCLER } from '../../constants'
 import { CrashInfoBox } from './CrashInfoBox'
@@ -31,9 +32,17 @@ export function EditModulesCard(props: Props) {
     stepFormSelectors.getPipettesForEditPipetteForm
   )
 
+  const moduleRestritionsDisabled = Boolean(
+    useSelector(featureFlagSelectors.getDisableModuleRestrictions)
+  )
+  const crashablePipettesSelected = getIsCrashablePipetteSelected(
+    pipettesByMount
+  )
+
+  const warningsEnabled =
+    !moduleRestritionsDisabled && crashablePipettesSelected
   const showCrashInfoBox =
-    getCrashablePipetteSelected(pipettesByMount) &&
-    (modules.magdeck || modules.tempdeck)
+    warningsEnabled && (modules.magdeck || modules.tempdeck)
 
   return (
     <Card title="Modules">
@@ -51,6 +60,7 @@ export function EditModulesCard(props: Props) {
               <ModuleRow
                 type={moduleType}
                 module={moduleData}
+                showCollisionWarnings={warningsEnabled}
                 key={i}
                 openEditModuleModal={openEditModuleModal}
               />
diff --git a/protocol-designer/src/components/modules/ModuleRow.js b/protocol-designer/src/components/modules/ModuleRow.js
index fbaa6df5aaf..acab8b23b46 100644
--- a/protocol-designer/src/components/modules/ModuleRow.js
+++ b/protocol-designer/src/components/modules/ModuleRow.js
@@ -4,7 +4,12 @@ import i18n from '../../localization'
 import { useDispatch } from 'react-redux'
 import { actions as stepFormActions } from '../../step-forms'
 
-import { LabeledValue, OutlineButton } from '@opentrons/components'
+import {
+  LabeledValue,
+  OutlineButton,
+  SlotMap,
+  HoverTooltip,
+} from '@opentrons/components'
 import ModuleDiagram from './ModuleDiagram'
 import { SPAN7_8_10_11_SLOT } from '../../constants'
 import styles from './styles.css'
@@ -14,25 +19,63 @@ import type { ModuleOnDeck } from '../../step-forms'
 
 type Props = {
   module?: ModuleOnDeck,
+  showCollisionWarnings?: boolean,
   type: ModuleType,
   openEditModuleModal: (moduleType: ModuleType, moduleId?: string) => mixed,
 }
 
 export function ModuleRow(props: Props) {
-  const { module, openEditModuleModal } = props
+  const { module, openEditModuleModal, showCollisionWarnings } = props
   const type = module?.type || props.type
 
   const model = module?.model
   const slot = module?.slot
 
+  /*
+  TODO (ka 2020-2-3): This logic is very specific to this individual implementation
+  of SlotMap. Kept it here (for now?) because it spells out the different cases.
+  */
   let slotDisplayName = null
-  if (slot) {
+  let occupiedSlotsForMap: Array<string> = []
+  let collisionSlots: Array<string> = []
+  // Populate warnings are enabled (crashable pipette in protocol + !disable module restrictions)
+  if (showCollisionWarnings && slot === '1') {
+    collisionSlots = ['4']
+  } else if (showCollisionWarnings && slot === '3') {
+    collisionSlots = ['6']
+  }
+
+  // If this module is in a deck slot + is not TC spanning Slot
+  // add to occupiedSlots
+  if (slot && slot !== SPAN7_8_10_11_SLOT) {
     slotDisplayName = `Slot ${slot}`
+    occupiedSlotsForMap = [slot]
   }
+  // If this Module is a TC deck slot and spanning
+  // populate all 4 slots individually
   if (slot === SPAN7_8_10_11_SLOT) {
     slotDisplayName = 'Slot 7'
+    occupiedSlotsForMap = ['7', '8', '10', '11']
   }
 
+  // If collisionSlots are populated, check which slot is occupied
+  // and render module specific crash warning. This logic assumes
+  // default module slot placement magnet = Slot1 temperature = Slot3
+  let collisionTooltipText = null
+  if (collisionSlots && collisionSlots.includes('4')) {
+    collisionTooltipText = i18n.t(
+      `tooltip.edit_module_card.magnetic_module_collision`
+    )
+  } else if (collisionSlots && collisionSlots.includes('6')) {
+    collisionTooltipText = i18n.t(
+      `tooltip.edit_module_card.temperature_module_collision`
+    )
+  }
+
+  const collisionTooltip = collisionTooltipText && (
+    <div className={styles.collision_tolltip}>{collisionTooltipText}</div>
+  )
+
   const setCurrentModule = (moduleType: ModuleType, moduleId?: string) => () =>
     openEditModuleModal(moduleType, moduleId)
 
@@ -61,6 +104,25 @@ export function ModuleRow(props: Props) {
         <div className={styles.module_col}>
           {slot && <LabeledValue label="Position" value={slotDisplayName} />}
         </div>
+        <div className={styles.slot_map}>
+          {slot && (
+            <HoverTooltip
+              placement="bottom"
+              tooltipComponent={
+                collisionSlots.length > 0 ? collisionTooltip : null
+              }
+            >
+              {hoverTooltipHandlers => (
+                <div {...hoverTooltipHandlers}>
+                  <SlotMap
+                    occupiedSlots={occupiedSlotsForMap}
+                    collisionSlots={collisionSlots}
+                  />
+                </div>
+              )}
+            </HoverTooltip>
+          )}
+        </div>
         <div className={styles.modules_button_group}>
           {module && (
             <OutlineButton
diff --git a/protocol-designer/src/components/modules/styles.css b/protocol-designer/src/components/modules/styles.css
index f67cbf76d5c..e1acb0b04d9 100644
--- a/protocol-designer/src/components/modules/styles.css
+++ b/protocol-designer/src/components/modules/styles.css
@@ -27,10 +27,14 @@
 }
 
 .module_col {
-  flex: 1 0 20%;
+  flex: 1 0 15%;
   padding-top: 0.5rem; /* TODO remove padding above once images are cropped properly */
 }
 
+.slot_map {
+  flex: 1 0 12%;
+}
+
 .row_title {
   @apply --font-body-2-dark;
 
@@ -97,3 +101,8 @@
 .link {
   @apply --font-body-1-dark;
 }
+
+.collision_tolltip {
+  width: 13rem;
+  line-height: var(--lh-copy);
+}
diff --git a/protocol-designer/src/localization/en/tooltip.json b/protocol-designer/src/localization/en/tooltip.json
index 86ecdee0418..54b9caaf7a0 100644
--- a/protocol-designer/src/localization/en/tooltip.json
+++ b/protocol-designer/src/localization/en/tooltip.json
@@ -48,6 +48,10 @@
       }
     }
   },
+  "edit_module_card": {
+    "magnetic_module_collision": "When magnetic module is in Slot 1, GEN1 8-Channel pipette cannot access Slot 4.",
+    "temperature_module_collision": "When temperature module is in Slot 3, GEN1 8-Channel pipette cannot access Slot 6. "
+  },
   "edit_module_modal": {
     "slot_selection": "To enable non-default/unrestricted positioning, go to Settings > App > Experimental settings."
   }
diff --git a/protocol-designer/src/step-forms/utils.js b/protocol-designer/src/step-forms/utils.js
index f2ad5feaacf..b448c2169ab 100644
--- a/protocol-designer/src/step-forms/utils.js
+++ b/protocol-designer/src/step-forms/utils.js
@@ -131,7 +131,7 @@ export const getSlotIsEmpty = (
   )
 }
 
-export const getCrashablePipetteSelected = (
+export const getIsCrashablePipetteSelected = (
   pipettesByMount: FormPipettesByMount
 ) => {
   const { left, right } = pipettesByMount