refactor(components, protocol-designer): update Toolbox implementations (#17050)

ncdiehl11 · web-flow · commit 315a366c78f9 · 2024-12-09T12:23:19.000-05:00
Refactors Toolbox and updates its implementations across PD app to more
closely mirror designs. Importantly, sets DeckSetupTools implementation
to absolute to accommodate full-screen zoom on selected slot/cutout.
diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx
@@ -5,31 +5,27 @@ import {
   DIRECTION_COLUMN,
   JUSTIFY_SPACE_BETWEEN,
   NO_WRAP,
-  POSITION_FIXED,
+  POSITION_RELATIVE,
 } from '../../styles'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
 import { PrimaryButton } from '../../atoms'
 import { textDecorationUnderline } from '../../ui-style-constants/typography'
+import type { StyleProps } from '../../primitives'
 
-export interface ToolboxProps {
+export interface ToolboxProps extends StyleProps {
   title: JSX.Element
   children: React.ReactNode
   disableCloseButton?: boolean
-  width?: string
-  height?: string
   confirmButtonText?: string
   onConfirmClick?: () => void
   confirmButton?: JSX.Element
   onCloseClick?: () => void
   closeButton?: JSX.Element
-  side?: 'left' | 'right'
-  horizontalSide?: 'top' | 'bottom'
   titlePadding?: string
   childrenPadding?: string
   subHeader?: JSX.Element | null
   secondaryHeaderButton?: JSX.Element
-  position?: string
 }
 
 export function Toolbox(props: ToolboxProps): JSX.Element {
@@ -43,14 +39,13 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     height = '100%',
     disableCloseButton = false,
     width = '19.5rem',
-    side = 'right',
-    horizontalSide = 'bottom',
     confirmButton,
     titlePadding = SPACING.spacing16,
     childrenPadding = SPACING.spacing16,
     subHeader,
     secondaryHeaderButton,
-    position = POSITION_FIXED,
+    position = POSITION_RELATIVE,
+    ...styleProps
   } = props
 
   const slideOutRef = useRef<HTMLDivElement>(null)
@@ -69,26 +64,17 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     handleScroll()
   }, [slideOutRef])
 
-  const positionStyles =
-    position === POSITION_FIXED
-      ? {
-          ...(side === 'right' && { right: '0' }),
-          ...(side === 'left' && { left: '0' }),
-          ...(horizontalSide === 'bottom' && { bottom: '0' }),
-          ...(horizontalSide === 'top' && { top: '5rem' }),
-          zIndex: 10,
-        }
-      : {}
   return (
     <Flex
       cursor="auto"
       backgroundColor={COLORS.white}
       boxShadow="0px 3px 6px rgba(0, 0, 0, 0.23)"
       height={height}
-      {...positionStyles}
-      borderRadius={BORDERS.borderRadius8}
       width={width}
+      position={position}
+      borderRadius={BORDERS.borderRadius8}
       flex="0"
+      {...styleProps}
     >
       <Flex
         width={width}
@@ -101,15 +87,15 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
           flexDirection={DIRECTION_COLUMN}
           borderBottom={`1px solid ${COLORS.grey30}`}
         >
-          {subHeader != null ? subHeader : null}
+          {subHeader ?? null}
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
             gridGap={SPACING.spacing12}
           >
             {title}
             <Flex gridGap={SPACING.spacing4}>
-              {secondaryHeaderButton != null ? secondaryHeaderButton : null}
+              {secondaryHeaderButton ?? null}
               {onCloseClick != null && closeButton != null ? (
                 <Btn
                   disabled={disableCloseButton}
@@ -151,7 +137,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
                 {confirmButtonText}
               </PrimaryButton>
             ) : null}
-            {confirmButton != null ? confirmButton : null}
+            {confirmButton ?? null}
           </Box>
         ) : null}
       </Flex>
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
@@ -239,7 +239,7 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
           onClose()
         }}
         onCloseClick={handleClearSelectedWells}
-        height="calc(100vh - 64px)"
+        height="100%"
         closeButton={
           <StyledText desktopStyle="bodyDefaultRegular">
             {t('clear_wells')}
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/index.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/index.tsx
@@ -21,6 +21,7 @@ import { getSelectedWells } from '../../well-selection/selectors'
 import { SelectableLabware } from '../Labware/SelectableLabware'
 import { wellFillFromWellContents } from '../LabwareOnDeck/utils'
 import { deselectWells, selectWells } from '../../well-selection/actions'
+import { PROTOCOL_NAV_BAR_HEIGHT_REM } from '../ProtocolNavBar'
 import { LiquidToolbox } from './LiquidToolbox'
 
 import type { WellGroup } from '@opentrons/components'
@@ -51,18 +52,19 @@ export function AssignLiquidsModal(): JSX.Element | null {
 
   return (
     <Flex
+      height={`calc(100vh - ${PROTOCOL_NAV_BAR_HEIGHT_REM}rem)`}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       backgroundColor={COLORS.grey10}
+      padding={SPACING.spacing12}
+      gridGap={SPACING.spacing12}
     >
       <Flex
+        width="100%"
         justifyContent={JUSTIFY_CENTER}
-        width="80%"
         alignItems={ALIGN_CENTER}
-        height="calc(100vh - 64px)"
       >
         <Box
-          width="80vh"
-          height="max-content"
+          width="50vw"
           padding={SPACING.spacing60}
           backgroundColor={COLORS.white}
           borderRadius={BORDERS.borderRadius12}
diff --git a/protocol-designer/src/organisms/ProtocolNavBar/index.tsx b/protocol-designer/src/organisms/ProtocolNavBar/index.tsx
@@ -24,6 +24,8 @@ import { LiquidButton } from './LiquidButton'
 
 import type { StyleProps, TabProps } from '@opentrons/components'
 
+export const PROTOCOL_NAV_BAR_HEIGHT_REM = 4
+
 interface ProtocolNavBarProps {
   hasZoomInSlot?: boolean
   tabs?: TabProps[]
@@ -98,6 +100,7 @@ export function ProtocolNavBar({
 const NavContainer = styled(Flex)<{ showShadow: boolean }>`
   z-index: ${props => (props.showShadow === true ? 11 : 0)};
   padding: ${SPACING.spacing12};
+  height: ${PROTOCOL_NAV_BAR_HEIGHT_REM}rem;
   width: 100%;
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   align-items: ${ALIGN_CENTER};
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState, Fragment } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import round from 'lodash/round'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -35,13 +36,13 @@ import { SlotDetailsContainer } from '../../../organisms'
 import { selectZoomedIntoSlot } from '../../../labware-ingred/actions'
 import { selectors } from '../../../labware-ingred/selectors'
 import { DeckSetupDetails } from './DeckSetupDetails'
+import { DECK_SETUP_TOOLS_WIDTH_REM, DeckSetupTools } from './DeckSetupTools'
 import {
   animateZoom,
   getCutoutIdForAddressableArea,
   useDeckSetupWindowBreakPoint,
   zoomInOnCoordinate,
 } from './utils'
-import { DeckSetupTools } from './DeckSetupTools'
 
 import type { StagingAreaLocation, TrashCutoutId } from '@opentrons/components'
 import type {
@@ -122,19 +123,37 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
   const hasWasteChute =
     wasteChuteFixtures.length > 0 || wasteChuteStagingAreaFixtures.length > 0
 
+  const windowInnerWidthRem = window.innerWidth / 16
+  const deckMapRatio = round(
+    (windowInnerWidthRem - DECK_SETUP_TOOLS_WIDTH_REM) / windowInnerWidthRem,
+    2
+  )
+
   const viewBoxX = deckDef.cornerOffsetFromOrigin[0]
   const viewBoxY = hasWasteChute
     ? deckDef.cornerOffsetFromOrigin[1] -
       WASTE_CHUTE_SPACE -
       DETAILS_HOVER_SPACE
     : deckDef.cornerOffsetFromOrigin[1]
-  const viewBoxWidth = deckDef.dimensions[0]
+  const viewBoxWidth = deckDef.dimensions[0] / deckMapRatio
   const viewBoxHeight = deckDef.dimensions[1] + DETAILS_HOVER_SPACE
 
   const initialViewBox = `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`
 
   const [viewBox, setViewBox] = useState<string>(initialViewBox)
 
+  const isZoomed = Object.values(zoomIn).some(val => val != null)
+  const viewBoxNumerical = viewBox?.split(' ').map(val => Number(val)) ?? []
+  const viewBoxAdjustedNumerical = [
+    ...viewBoxNumerical.slice(0, 2),
+    (viewBoxNumerical[2] - viewBoxNumerical[0]) / deckMapRatio +
+      viewBoxNumerical[0],
+    viewBoxNumerical[3],
+  ]
+  const viewBoxAdjusted = viewBoxAdjustedNumerical.reduce((acc, num, i) => {
+    return i < viewBoxNumerical.length - 1 ? acc + `${num} ` : acc + `${num}`
+  }, '')
+
   const [hoveredLabware, setHoveredLabware] = useState<string | null>(null)
   const [hoveredModule, setHoveredModule] = useState<ModuleModel | null>(null)
   const [hoveredFixture, setHoveredFixture] = useState<Fixture | null>(null)
@@ -202,7 +221,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
         width="100%"
         height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
         flexDirection={DIRECTION_COLUMN}
-        padding={SPACING.spacing24}
+        padding={isZoomed ? '0' : SPACING.spacing24}
       >
         <Flex
           width="100%"
@@ -227,7 +246,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
             }
             minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
             deckDef={deckDef}
-            viewBox={viewBox}
+            viewBox={viewBoxAdjusted}
             outline="auto"
             zoomed={zoomIn.slot != null}
             borderRadius={BORDERS.borderRadius12}
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
@@ -9,6 +9,7 @@ import {
   Flex,
   Icon,
   ModuleIcon,
+  POSITION_FIXED,
   RadioButton,
   SPACING,
   StyledText,
@@ -51,7 +52,10 @@ import { selectors } from '../../../labware-ingred/selectors'
 import { useKitchen } from '../../../organisms/Kitchen/hooks'
 import { getDismissedHints } from '../../../tutorial/selectors'
 import { createContainerAboveModule } from '../../../step-forms/actions/thunks'
-import { ConfirmDeleteStagingAreaModal } from '../../../organisms'
+import {
+  ConfirmDeleteStagingAreaModal,
+  PROTOCOL_NAV_BAR_HEIGHT_REM,
+} from '../../../organisms'
 import { BUTTON_LINK_STYLE } from '../../../atoms'
 import { getSlotInformation } from '../utils'
 import { ALL_ORDERED_CATEGORIES, FIXTURES, MOAM_MODELS } from './constants'
@@ -70,12 +74,19 @@ interface DeckSetupToolsProps {
     setHoveredModule: (model: ModuleModel | null) => void
     setHoveredFixture: (fixture: Fixture | null) => void
   } | null
+  position?: string
 }
 
 export type CategoryExpand = Record<string, boolean>
+export const DECK_SETUP_TOOLS_WIDTH_REM = 21.875
 
 export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
-  const { onCloseClick, setHoveredLabware, onDeckProps } = props
+  const {
+    onCloseClick,
+    setHoveredLabware,
+    onDeckProps,
+    position = POSITION_FIXED,
+  } = props
   const { t, i18n } = useTranslation(['starting_deck_state', 'shared'])
   const { makeSnackbar } = useKitchen()
   const selectedSlotInfo = useSelector(selectors.getZoomedInSlotInfo)
@@ -329,10 +340,7 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
       dispatch(
         createContainer({
           slot,
-          labwareDefURI:
-            selectedNestedLabwareDefUri == null
-              ? selectedLabwareDefUri
-              : selectedNestedLabwareDefUri,
+          labwareDefURI: selectedNestedLabwareDefUri ?? selectedLabwareDefUri,
           adapterUnderLabwareDefURI:
             selectedNestedLabwareDefUri == null
               ? undefined
@@ -358,6 +366,13 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
     dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
     onCloseClick()
   }
+  const positionStyles =
+    position === POSITION_FIXED
+      ? {
+          right: SPACING.spacing12,
+          top: `calc(${PROTOCOL_NAV_BAR_HEIGHT_REM}rem + ${SPACING.spacing12})`,
+        }
+      : {}
   return (
     <>
       {showDeleteLabwareModal != null ? (
@@ -382,8 +397,10 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
       ) : null}
       {changeModuleWarning}
       <Toolbox
-        height="calc(100vh - 64px)"
-        width="23.375rem"
+        height={`calc(100vh - ${PROTOCOL_NAV_BAR_HEIGHT_REM}rem - 2 * ${SPACING.spacing12})`}
+        width={`${DECK_SETUP_TOOLS_WIDTH_REM}rem`}
+        position={position}
+        {...positionStyles}
         title={
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
             <DeckInfoLabel
diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
@@ -62,7 +62,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
     <Flex
       backgroundColor={COLORS.white}
       borderRadius={BORDERS.borderRadius8}
-      width={containerWidth}
+      width="100%"
       height="65vh"
       padding={padding}
       gridGap={SPACING.spacing24}
@@ -85,6 +85,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
         backgroundColor={COLORS.grey20}
         overflowY={OVERFLOW_AUTO}
         flexDirection={DIRECTION_COLUMN}
+        flex="0 0 auto"
       >
         <Flex
           justifyContent={JUSTIFY_CENTER}
diff --git a/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx b/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx
@@ -10,6 +10,7 @@ import {
   Flex,
   JUSTIFY_CENTER,
   LabwareRender,
+  POSITION_RELATIVE,
   RobotCoordsForeignDiv,
   RobotWorkSpace,
   SPACING,
@@ -112,7 +113,12 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
   return (
     <Flex width="100%">
       {selectedSlot.slot === 'offDeck' ? (
-        <Flex alignItems={ALIGN_CENTER} width="100%">
+        <Flex
+          alignItems={ALIGN_CENTER}
+          width="100%"
+          padding={SPACING.spacing12}
+          gridGap={SPACING.spacing12}
+        >
           <Flex justifyContent={JUSTIFY_CENTER} width="100%">
             <Flex
               width="39.4275rem"
@@ -150,6 +156,7 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
             </Flex>
           </Flex>
           <DeckSetupTools
+            position={POSITION_RELATIVE}
             onDeckProps={null}
             setHoveredLabware={setHoveredLabware}
             onCloseClick={() => {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -17,7 +17,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { stepIconsByType } from '../../../../form-types'
-import { FormAlerts } from '../../../../organisms'
+import { FormAlerts, PROTOCOL_NAV_BAR_HEIGHT_REM } from '../../../../organisms'
 import { useKitchen } from '../../../../organisms/Kitchen/hooks'
 import { RenameStepModal } from '../../../../organisms/RenameStepModal'
 import { getFormWarningsForSelectedStep } from '../../../../dismiss/selectors'
@@ -272,7 +272,8 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         />
       ) : null}
       <Toolbox
-        height="calc(100vh - 6rem)"
+        height="100%"
+        maxHeight={`calc(100vh - ${PROTOCOL_NAV_BAR_HEIGHT_REM}rem - 2 * ${SPACING.spacing12})`}
         position={POSITION_RELATIVE}
         subHeader={
           isMultiStepToolbox ? (
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
