fix(protocol-designer) fix the slot details glitch when wrapping deck…

… view (#16700)

* fix(protocol-designer) fix the slot details glitch when wrapping deck view (#16700)

protocol-designer/src/atoms/constants.ts

@@ -1,5 +1,9 @@
 import { css } from 'styled-components'
-import { COLORS, OVERFLOW_HIDDEN } from '@opentrons/components'
+import {
+  COLORS,
+  DIRECTION_COLUMN,
+  OVERFLOW_HIDDEN,
+} from '@opentrons/components'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
 export const BUTTON_LINK_STYLE = css`
@@ -20,3 +24,11 @@ export const LINE_CLAMP_TEXT_STYLE = (
   -webkit-line-clamp: ${lineClamp};
   word-break: break-all; // for a non word case like aaaaaaaa
 `
+
+const MIN_OVERVIEW_WIDTH = '64rem'
+const COLUMN_GRID_GAP = '5rem'
+export const COLUMN_STYLE = css`
+  flex-direction: ${DIRECTION_COLUMN};
+  min-width: calc((${MIN_OVERVIEW_WIDTH} - ${COLUMN_GRID_GAP}) * 0.5);
+  flex: 1;
+`

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx

@@ -64,7 +64,6 @@ export function ThermocyclerProfileModal(
       zIndexOverlay={11} // toolbox zIndex is set to 10
       title={t('form:step_edit_form.field.thermocyclerProfile.edit')}
       width="45rem"
-      marginLeft="0"
       childrenPadding={SPACING.spacing24}
       footer={
         <Flex

protocol-designer/src/pages/ProtocolOverview/DeckThumbnailDetails.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment } from 'react'
 import values from 'lodash/values'
 
 import { Module } from '@opentrons/components'
@@ -15,6 +15,8 @@ import { LabwareOnDeck } from '../../components/DeckSetup/LabwareOnDeck'
 import { getStagingAreaAddressableAreas } from '../../utils'
 import { getSlotIdsBlockedBySpanningForThermocycler } from '../../step-forms'
 import { SlotHover } from './SlotHover'
+
+import type { Dispatch, SetStateAction } from 'react'
 import type {
   CutoutId,
   DeckDefinition,
@@ -31,7 +33,7 @@ interface DeckSetupDetailsProps {
   deckDef: DeckDefinition
   stagingAreaCutoutIds: CutoutId[]
   hover: string | null
-  setHover: React.Dispatch<React.SetStateAction<string | null>>
+  setHover: Dispatch<SetStateAction<string | null>>
   robotType: RobotType
 }
 
@@ -75,7 +77,7 @@ export const DeckThumbnailDetails = (
         const moduleDef = getModuleDef2(model)
         const labwareLoadedOnModule = allLabware.find(lw => lw.slot === id)
         return (
-          <React.Fragment key={id}>
+          <Fragment key={id}>
             <Module
               key={slot}
               x={slotPosition[0]}
@@ -118,7 +120,7 @@ export const DeckThumbnailDetails = (
                 />
               ) : null}
             </Module>
-          </React.Fragment>
+          </Fragment>
         )
       })}
       {/* all labware on deck NOT those in modules */}
@@ -140,7 +142,7 @@ export const DeckThumbnailDetails = (
           return null
         }
         return (
-          <React.Fragment key={labware.id}>
+          <Fragment key={labware.id}>
             <LabwareOnDeck
               x={slotPosition[0]}
               y={slotPosition[1]}
@@ -153,7 +155,7 @@ export const DeckThumbnailDetails = (
               slotPosition={slotPosition}
               slotId={labware.slot}
             />
-          </React.Fragment>
+          </Fragment>
         )
       })}
 
@@ -190,7 +192,7 @@ export const DeckThumbnailDetails = (
             ? allModules.find(module => module.id === slotForOnTheDeck)?.slot
             : null
         return (
-          <React.Fragment key={labware.id}>
+          <Fragment key={labware.id}>
             <LabwareOnDeck
               x={slotPosition[0]}
               y={slotPosition[1]}
@@ -203,7 +205,7 @@ export const DeckThumbnailDetails = (
               slotPosition={slotPosition}
               slotId={slotOnDeck ?? ''}
             />
-          </React.Fragment>
+          </Fragment>
         )
       })}
 
@@ -223,7 +225,7 @@ export const DeckThumbnailDetails = (
         })
         .map(addressableArea => {
           return (
-            <React.Fragment key={addressableArea.id}>
+            <Fragment key={addressableArea.id}>
               <SlotHover
                 robotType={robotType}
                 hover={hover}
@@ -234,7 +236,7 @@ export const DeckThumbnailDetails = (
                 )}
                 slotId={addressableArea.id}
               />
-            </React.Fragment>
+            </Fragment>
           )
         })}
     </>

protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx

@@ -22,6 +22,7 @@ export function LiquidDefinitions({
   allIngredientGroupFields,
 }: LiquidDefinitionsProps): JSX.Element {
   const { t } = useTranslation('protocol_overview')
+
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
       <StyledText desktopStyle="headingSmallBold">
@@ -58,7 +59,9 @@ export function LiquidDefinitions({
                     desktopStyle="bodyDefaultRegular"
                     css={LINE_CLAMP_TEXT_STYLE(10)}
                   >
-                    {liquid.description ?? t('na')}
+                    {liquid.description != null && liquid.description !== ''
+                      ? liquid.description
+                      : t('na')}
                   </StyledText>
                 }
               />

protocol-designer/src/pages/ProtocolOverview/OffdeckThumbnail.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import {
@@ -23,9 +22,11 @@ import { getInitialDeckSetup } from '../../step-forms/selectors'
 import { wellFillFromWellContents } from '../../components/labware'
 import { SlotHover } from './SlotHover'
 
+import type { Dispatch, SetStateAction } from 'react'
+
 interface OffDeckThumbnailProps {
   hover: string | null
-  setHover: React.Dispatch<React.SetStateAction<string | null>>
+  setHover: Dispatch<SetStateAction<string | null>>
   width?: string
 }
 export function OffDeckThumbnail(props: OffDeckThumbnailProps): JSX.Element {

protocol-designer/src/pages/ProtocolOverview/SlotHover.tsx

@@ -1,5 +1,7 @@
-import * as React from 'react'
+import { useCallback, useMemo } from 'react'
 import { useSelector } from 'react-redux'
+import debounce from 'lodash/debounce'
+
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -23,9 +25,13 @@ import type {
   RobotType,
 } from '@opentrons/shared-data'
 
+import type { Dispatch, SetStateAction } from 'react'
+
+const DEBOUNCE_DURATION_MS = 600
+
 interface SlotHoverProps {
   hover: string | null
-  setHover: React.Dispatch<React.SetStateAction<string | null>>
+  setHover: Dispatch<SetStateAction<string | null>>
   slotId: DeckSlotId
   slotPosition: CoordinateTuple | null
   robotType: RobotType
@@ -36,7 +42,7 @@ export function SlotHover(props: SlotHoverProps): JSX.Element | null {
   const { hover, setHover, slotId, slotPosition, robotType } = props
   const deckSetup = useSelector(getInitialDeckSetup)
   const { additionalEquipmentOnDeck, modules } = deckSetup
-  const deckDef = React.useMemo(() => getDeckDefFromRobotType(robotType), [])
+  const deckDef = useMemo(() => getDeckDefFromRobotType(robotType), [])
   const hasTCOnSlot = Object.values(modules).find(
     module => module.slot === slotId && module.type === THERMOCYCLER_MODULE_TYPE
   )
@@ -51,6 +57,13 @@ export function SlotHover(props: SlotHoverProps): JSX.Element | null {
       deckDef.cutoutFixtures
     ) ?? 'cutoutD1'
 
+  const debouncedSetHover = useCallback(
+    debounce((slotId: string | null) => {
+      setHover(slotId)
+    }, DEBOUNCE_DURATION_MS),
+    [setHover]
+  )
+
   //  return null for TC slots
   if (slotPosition === null || (hasTCOnSlot && tcSlots.includes(slotId)))
     return null
@@ -113,10 +126,10 @@ export function SlotHover(props: SlotHoverProps): JSX.Element | null {
           opacity: hoverOpacity,
           flex: '1',
           onMouseEnter: () => {
-            setHover(slotId)
+            debouncedSetHover(slotId)
           },
           onMouseLeave: () => {
-            setHover(null)
+            debouncedSetHover(null)
           },
         }}
       >
@@ -139,10 +152,10 @@ export function SlotHover(props: SlotHoverProps): JSX.Element | null {
           opacity: hoverOpacity,
           flex: '1',
           onMouseEnter: () => {
-            setHover(slotId)
+            debouncedSetHover(slotId)
           },
           onMouseLeave: () => {
-            setHover(null)
+            debouncedSetHover(null)
           },
         }}
       >

protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  StyledText,
+  Btn,
+  TYPOGRAPHY,
+  ToggleGroup,
+} from '@opentrons/components'
+
+import { BUTTON_LINK_STYLE } from '../../atoms'
+import { DeckThumbnail } from './DeckThumbnail'
+import { OffDeckThumbnail } from './OffdeckThumbnail'
+import { SlotDetailsContainer } from '../../organisms'
+
+import type { Dispatch, SetStateAction } from 'react'
+import type { RobotType } from '@opentrons/shared-data'
+
+interface StartingDeckProps {
+  setShowMaterialsListModal: (showMaterialsListModal: boolean) => void
+  leftString: string
+  rightString: string
+  robotType: RobotType
+  hover: string | null
+  setHover: Dispatch<SetStateAction<string | null>>
+  isOffDeckHover: boolean
+}
+
+export function StartingDeck({
+  setShowMaterialsListModal,
+  leftString,
+  rightString,
+  robotType,
+  hover,
+  setHover,
+  isOffDeckHover,
+}: StartingDeckProps): JSX.Element {
+  const { t } = useTranslation('protocol_overview')
+
+  const [deckView, setDeckView] = useState<string>(leftString)
+
+  return (
+    <>
+      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
+        <Flex gridGap="1.875rem" alignItems={ALIGN_CENTER}>
+          <StyledText desktopStyle="headingSmallBold">
+            {t('starting_deck')}
+          </StyledText>
+          <Flex padding={SPACING.spacing4}>
+            <Btn
+              data-testid="Materials_list"
+              textDecoration={TYPOGRAPHY.textDecorationUnderline}
+              onClick={() => {
+                setShowMaterialsListModal(true)
+              }}
+              css={BUTTON_LINK_STYLE}
+            >
+              <StyledText desktopStyle="bodyDefaultRegular">
+                {t('materials_list')}
+              </StyledText>
+            </Btn>
+          </Flex>
+        </Flex>
+        <ToggleGroup
+          selectedValue={deckView}
+          leftText={leftString}
+          rightText={rightString}
+          leftClick={() => {
+            setDeckView(leftString)
+          }}
+          rightClick={() => {
+            setDeckView(rightString)
+          }}
+        />
+      </Flex>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing32}
+        alignItems={ALIGN_CENTER}
+      >
+        {deckView === leftString ? (
+          <DeckThumbnail hoverSlot={hover} setHoverSlot={setHover} />
+        ) : (
+          <OffDeckThumbnail hover={hover} setHover={setHover} width="100%" />
+        )}
+        <SlotDetailsContainer
+          robotType={robotType}
+          slot={isOffDeckHover ? 'offDeck' : hover}
+          offDeckLabwareId={isOffDeckHover ? hover : null}
+        />
+      </Flex>
+    </>
+  )
+}