fix(protocol-designer): liquid preservation in zoomed in slot and x b…

…utton (#16722)

closes AUTH-1016, partially addresses RQA-3526

protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx

@@ -1,17 +1,21 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import isEqual from 'lodash/isEqual'
 import { useDispatch, useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
+  Btn,
   DeckInfoLabel,
   DIRECTION_COLUMN,
   Flex,
+  Icon,
   ModuleIcon,
   RadioButton,
   SPACING,
   StyledText,
   Tabs,
   Toolbox,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import {
   FLEX_ROBOT_TYPE,
@@ -48,6 +52,7 @@ import { useKitchen } from '../../../organisms/Kitchen/hooks'
 import { getDismissedHints } from '../../../tutorial/selectors'
 import { createContainerAboveModule } from '../../../step-forms/actions/thunks'
 import { ConfirmDeleteStagingAreaModal } from '../../../organisms'
+import { BUTTON_LINK_STYLE } from '../../../atoms'
 import { FIXTURES, MOAM_MODELS } from './constants'
 import { getSlotInformation } from '../utils'
 import { getModuleModelsBySlot, getDeckErrors } from './utils'
@@ -56,6 +61,7 @@ import { LabwareTools } from './LabwareTools'
 
 import type { ModuleModel } from '@opentrons/shared-data'
 import type { ThunkDispatch } from '../../../types'
+import type { ZoomedIntoSlotInfoState } from '../../../labware-ingred/types'
 import type { Fixture } from './constants'
 
 interface DeckSetupToolsProps {
@@ -90,6 +96,13 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
     selectedNestedLabwareDefUri,
   } = selectedSlotInfo
   const { slot, cutout } = selectedSlot
+
+  //  TODO: fix the bug where selectedSlotInfo isn't initializing correctly
+  //  RQA-3526
+  const initialSelectedSlotInfoRef = useRef<ZoomedIntoSlotInfoState>(
+    selectedSlotInfo
+  )
+
   const [changeModuleWarningInfo, displayModuleWarning] = useState<boolean>(
     false
   )
@@ -232,59 +245,64 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
     handleResetToolbox()
     setSelectedHardware(null)
   }
-
   const handleConfirm = (): void => {
-    //  clear entities first before recreating them
-    handleClear()
+    //  only update info if user changed what was previously selected
+    if (!isEqual(selectedSlotInfo, initialSelectedSlotInfoRef.current)) {
+      //  clear entities first before recreating them
+      handleClear()
 
-    if (selectedFixture != null && cutout != null) {
-      //  create fixture(s)
-      if (selectedFixture === 'wasteChuteAndStagingArea') {
-        dispatch(createDeckFixture('wasteChute', cutout))
-        dispatch(createDeckFixture('stagingArea', cutout))
-      } else {
-        dispatch(createDeckFixture(selectedFixture, cutout))
+      if (selectedFixture != null && cutout != null) {
+        //  create fixture(s)
+        if (selectedFixture === 'wasteChuteAndStagingArea') {
+          dispatch(createDeckFixture('wasteChute', cutout))
+          dispatch(createDeckFixture('stagingArea', cutout))
+        } else {
+          dispatch(createDeckFixture(selectedFixture, cutout))
+        }
       }
+      if (selectedModuleModel != null) {
+        //  create module
+        dispatch(
+          createModule({
+            slot,
+            type: getModuleType(selectedModuleModel),
+            model: selectedModuleModel,
+          })
+        )
+      }
+      if (selectedModuleModel == null && selectedLabwareDefUri != null) {
+        //  create adapter + labware on deck
+        dispatch(
+          createContainer({
+            slot,
+            labwareDefURI:
+              selectedNestedLabwareDefUri == null
+                ? selectedLabwareDefUri
+                : selectedNestedLabwareDefUri,
+            adapterUnderLabwareDefURI:
+              selectedNestedLabwareDefUri == null
+                ? undefined
+                : selectedLabwareDefUri,
+          })
+        )
+      }
+      if (selectedModuleModel != null && selectedLabwareDefUri != null) {
+        //   create adapter + labware on module
+        dispatch(
+          createContainerAboveModule({
+            slot,
+            labwareDefURI: selectedLabwareDefUri,
+            nestedLabwareDefURI: selectedNestedLabwareDefUri ?? undefined,
+          })
+        )
+      }
+      handleResetToolbox()
+      dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
+      onCloseClick()
+    } else {
+      dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
+      onCloseClick()
     }
-    if (selectedModuleModel != null) {
-      //  create module
-      dispatch(
-        createModule({
-          slot,
-          type: getModuleType(selectedModuleModel),
-          model: selectedModuleModel,
-        })
-      )
-    }
-    if (selectedModuleModel == null && selectedLabwareDefUri != null) {
-      //  create adapter + labware on deck
-      dispatch(
-        createContainer({
-          slot,
-          labwareDefURI:
-            selectedNestedLabwareDefUri == null
-              ? selectedLabwareDefUri
-              : selectedNestedLabwareDefUri,
-          adapterUnderLabwareDefURI:
-            selectedNestedLabwareDefUri == null
-              ? undefined
-              : selectedLabwareDefUri,
-        })
-      )
-    }
-    if (selectedModuleModel != null && selectedLabwareDefUri != null) {
-      //   create adapter + labware on module
-      dispatch(
-        createContainerAboveModule({
-          slot,
-          labwareDefURI: selectedLabwareDefUri,
-          nestedLabwareDefURI: selectedNestedLabwareDefUri ?? undefined,
-        })
-      )
-    }
-    handleResetToolbox()
-    dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
-    onCloseClick()
   }
   return (
     <>
@@ -326,22 +344,27 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
             </StyledText>
           </Flex>
         }
-        closeButton={
-          <StyledText desktopStyle="bodyDefaultRegular">
-            {t('clear')}
-          </StyledText>
+        secondaryHeaderButton={
+          <Btn
+            onClick={() => {
+              if (matchingLabwareFor4thColumn != null) {
+                setShowDeleteLabwareModal('clear')
+              } else {
+                handleClear()
+                handleResetToolbox()
+              }
+            }}
+            css={BUTTON_LINK_STYLE}
+            textDecoration={TYPOGRAPHY.textDecorationUnderline}
+          >
+            <StyledText desktopStyle="bodyDefaultRegular">
+              {t('clear')}
+            </StyledText>
+          </Btn>
         }
-        onCloseClick={() => {
-          if (matchingLabwareFor4thColumn != null) {
-            setShowDeleteLabwareModal('clear')
-          } else {
-            handleClear()
-            handleResetToolbox()
-          }
-        }}
-        onConfirmClick={() => {
-          handleConfirm()
-        }}
+        closeButton={<Icon size="2rem" name="close" />}
+        onCloseClick={onCloseClick}
+        onConfirmClick={handleConfirm}
         confirmButtonText={t('done')}
       >
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>

protocol-designer/src/pages/Designer/DeckSetup/LabwareRenderOnDeck.tsx

@@ -0,0 +1,18 @@
+import { LabwareRender } from '@opentrons/components'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+interface LabwareRenderOnDeckProps {
+  labwareDef: LabwareDefinition2
+  x: number
+  y: number
+}
+export function LabwareRenderOnDeck(
+  props: LabwareRenderOnDeckProps
+): JSX.Element {
+  const { x, y, labwareDef } = props
+  return (
+    <g transform={`translate(${x}, ${y})`}>
+      <LabwareRender definition={labwareDef} />
+    </g>
+  )
+}

protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx

@@ -1,5 +1,5 @@
 import { useSelector } from 'react-redux'
-import { LabwareRender, Module } from '@opentrons/components'
+import { Module } from '@opentrons/components'
 import {
   getModuleDef2,
   inferModuleOrientationFromXCoordinate,
@@ -8,10 +8,10 @@ import { selectors } from '../../../labware-ingred/selectors'
 import { getOnlyLatestDefs } from '../../../labware-defs'
 import { getCustomLabwareDefsByURI } from '../../../labware-defs/selectors'
 import { getInitialDeckSetup } from '../../../step-forms/selectors'
-import { LabwareOnDeck } from '../../../components/DeckSetup/LabwareOnDeck'
 import { ModuleLabel } from './ModuleLabel'
-import { LabwareLabel } from '../LabwareLabel'
 import { FixtureRender } from './FixtureRender'
+import { SelectedLabwareRender } from './SelectedLabwareRender'
+import { SelectedModuleLabwareRender } from './SelectedModuleLabwareRender'
 import type {
   CoordinateTuple,
   DeckDefinition,
@@ -84,6 +84,15 @@ export const SelectedHoveredItems = (
       )
     }
   )
+  const selectedLabwareDef =
+    selectedLabwareDefUri != null
+      ? defs[selectedLabwareDefUri] ?? customLabwareDefs[selectedLabwareDefUri]
+      : null
+  const selectedNestedLabwareDef =
+    selectedNestedLabwareDefUri != null
+      ? defs[selectedNestedLabwareDefUri] ??
+        customLabwareDefs[selectedNestedLabwareDefUri]
+      : null
   const hoveredLabwareDef =
     hoveredLabware != null
       ? defs[hoveredLabware] ?? customLabwareDefs[hoveredLabware] ?? null
@@ -109,9 +118,9 @@ export const SelectedHoveredItems = (
     }
     labwareInfos.push(selectedLabwareLabel)
   }
-  if (matchingSelectedNestedLabwareOnDeck != null && hoveredLabware == null) {
+  if (selectedNestedLabwareDef != null && hoveredLabware == null) {
     const selectedNestedLabwareLabel = {
-      text: matchingSelectedNestedLabwareOnDeck.def.metadata.displayName,
+      text: selectedNestedLabwareDef.metadata.displayName,
       isSelected: true,
       isLast: hoveredLabware == null,
     }
@@ -158,29 +167,14 @@ export const SelectedHoveredItems = (
             orientation={orientation}
           >
             <>
-              {matchingSelectedLabwareOnDeck != null &&
-              selectedModuleModel != null &&
-              hoveredLabware == null ? (
-                <LabwareOnDeck
-                  labwareOnDeck={matchingSelectedLabwareOnDeck}
-                  x={0}
-                  y={0}
-                />
-              ) : null}
-              {matchingSelectedNestedLabwareOnDeck != null &&
-              selectedModuleModel != null &&
-              hoveredLabware == null ? (
-                <LabwareOnDeck
-                  labwareOnDeck={matchingSelectedNestedLabwareOnDeck}
-                  x={0}
-                  y={0}
-                />
-              ) : null}
-              {hoveredLabwareDef != null && selectedModuleModel != null ? (
-                <g transform={`translate(0, 0)`}>
-                  <LabwareRender definition={hoveredLabwareDef} />
-                </g>
-              ) : null}
+              <SelectedModuleLabwareRender
+                nestedLabwareDef={selectedNestedLabwareDef}
+                labwareOnDeck={matchingSelectedLabwareOnDeck}
+                labwareDef={selectedLabwareDef}
+                moduleModel={selectedModuleModel}
+                hoveredLabware={hoveredLabware}
+                hoveredLabwareDef={hoveredLabwareDef}
+              />
             </>
           </Module>
           {selectedModuleModel != null ? (
@@ -195,55 +189,28 @@ export const SelectedHoveredItems = (
           ) : null}
         </>
       ) : null}
-      {matchingSelectedLabwareOnDeck != null &&
-      slotPosition != null &&
-      selectedModuleModel == null &&
-      hoveredLabware == null ? (
-        <>
-          <LabwareOnDeck
-            x={slotPosition[0]}
-            y={slotPosition[1]}
-            labwareOnDeck={matchingSelectedLabwareOnDeck}
-          />
-          {selectedNestedLabwareDefUri == null ? (
-            <LabwareLabel
-              isLast={true}
-              isSelected={true}
-              labwareDef={matchingSelectedLabwareOnDeck.def}
-              position={slotPosition}
-            />
-          ) : null}
-        </>
-      ) : null}
-      {matchingSelectedNestedLabwareOnDeck != null &&
-      slotPosition != null &&
-      selectedModuleModel == null &&
-      hoveredLabware == null ? (
-        <>
-          <LabwareOnDeck
-            x={slotPosition[0]}
-            y={slotPosition[1]}
-            labwareOnDeck={matchingSelectedNestedLabwareOnDeck}
-          />
-          {matchingSelectedLabwareOnDeck != null ? (
-            <LabwareLabel
-              isLast={false}
-              isSelected={true}
-              labwareDef={matchingSelectedLabwareOnDeck.def}
-              position={slotPosition}
-              nestedLabwareInfo={[
-                {
-                  text:
-                    matchingSelectedNestedLabwareOnDeck.def.metadata
-                      .displayName,
-                  isSelected: true,
-                  isLast: true,
-                },
-              ]}
-            />
-          ) : null}
-        </>
-      ) : null}
+      <SelectedLabwareRender
+        labwareOnDeck={matchingSelectedLabwareOnDeck}
+        labwareDef={selectedLabwareDef}
+        slotPosition={slotPosition}
+        moduleModel={selectedModuleModel}
+        hoveredLabware={hoveredLabware}
+      />
+      <SelectedLabwareRender
+        labwareOnDeck={matchingSelectedNestedLabwareOnDeck}
+        labwareDef={selectedNestedLabwareDef}
+        slotPosition={slotPosition}
+        moduleModel={selectedModuleModel}
+        hoveredLabware={hoveredLabware}
+        nestedLabwareInfo={[
+          {
+            text:
+              selectedNestedLabwareDef?.metadata.displayName ?? 'unknown name',
+            isSelected: true,
+            isLast: true,
+          },
+        ]}
+      />
     </>
   )
 }