add some module highlight

Opentrons · Dec 12, 2024 · 34b1f1b · 34b1f1b
1 parent f504eac
commit 34b1f1b
Show file tree

Hide file tree

Showing 11 changed files with 296 additions and 28 deletions.
diff --git a/components/src/organisms/DeckLabelSet/index.tsx b/components/src/organisms/DeckLabelSet/index.tsx
@@ -26,7 +26,7 @@ const DeckLabelSetComponent = (
   return (
     <RobotCoordsForeignDiv x={x} y={y}>
       <StyledBox width={width} height={height} data-testid="DeckLabeSet" />
-      <LabelContainer ref={ref}>
+      <LabelContainer ref={ref} isZoomed={deckLabels[0].isZoomed}>
         {deckLabels.length > 0
           ? deckLabels.map((deckLabel, index) => (
               <DeckLabel
@@ -46,9 +46,14 @@ export const DeckLabelSet = React.forwardRef<HTMLDivElement, DeckLabelSetProps>(
   DeckLabelSetComponent
 )
 
-const StyledBox = styled(Box)`
+interface StyledBoxProps {
+  isZoomed: boolean
+}
+
+const StyledBox = styled(Box)<StyledBoxProps>`
   border-radius: ${BORDERS.borderRadius4};
-  border: 1.5px solid ${COLORS.blue50};
+  border: ${({ isZoomed }) =>
+    isZoomed ? `1.5px solid ${COLORS.blue50}` : `3px solid ${COLORS.blue50}`};
 `
 
 const LabelContainer = styled.div`

diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 import {
   COLORS,
   DIRECTION_COLUMN,
@@ -9,11 +10,9 @@ import {
   SPACING,
   StyledText,
 } from '@opentrons/components'
+import { selectSelection } from '../../ui/steps/actions/actions'
 import type { Options } from '@opentrons/components'
 import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
-import { useDispatch } from 'react-redux'
-import { selectSelection } from '../../ui/steps/actions/actions'
-import { Selection } from '../../ui/steps/actions/types'
 
 export interface DropdownStepFormFieldProps extends FieldProps {
   options: Options
@@ -39,17 +38,17 @@ export function DropdownStepFormField(
     onEnter,
     onExit,
     onFieldBlur,
+    name: fieldName,
   } = props
   const { t } = useTranslation('tooltip')
   const dispatch = useDispatch()
   const availableOptionId = options.find(opt => opt.value === value)
-
   useEffect(() => {
     if (options.length === 1) {
       updateValue(options[0].value)
     }
   }, [])
-
+  console.log(fieldName)
   return (
     <Flex padding={padding ?? SPACING.spacing16}>
       {options.length > 1 || options.length === 0 ? (
@@ -66,9 +65,30 @@ export function DropdownStepFormField(
             availableOptionId ?? { name: 'Choose option', value: '' }
           }
           onClick={value => {
-            const selection = { id: value, text: 'Selected' }
             updateValue(value)
-            dispatch(selectSelection({ selection, mode: 'replace' }))
+            const selection = { id: value, text: 'Selected' }
+            if (
+              fieldName === 'aspirate_labware' ||
+              fieldName === 'labware' ||
+              fieldName === 'moduleId'
+            ) {
+              dispatch(
+                selectSelection({
+                  selection: { ...selection, field: '1' },
+                  mode: 'add',
+                })
+              )
+            } else if (
+              fieldName === 'dispense_labware' ||
+              fieldName === 'newLocation'
+            ) {
+              dispatch(
+                selectSelection({
+                  selection: { ...selection, field: '2' },
+                  mode: 'add',
+                })
+              )
+            }
           }}
           onEnter={onEnter}
           onExit={onExit}

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx
@@ -52,6 +52,7 @@ import type {
 } from '../../../step-forms'
 import type { DeckSetupTabType } from '../types'
 import type { Fixture } from './constants'
+import { HighlightModule } from '../HighlightModule'
 
 interface DeckSetupDetailsProps extends DeckSetupTabType {
   activeDeckSetup: InitialDeckSetup
@@ -271,6 +272,14 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
                 />
               ) : null}
             </Module>
+            <HighlightModule
+              moduleModel={moduleOnDeck.model}
+              moduleId={moduleOnDeck.id}
+              position={slotPosition}
+              orientation={inferModuleOrientationFromXCoordinate(
+                slotPosition[0]
+              )}
+            />
           </Fragment>
         ) : null
       })}

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx b/protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx
@@ -15,7 +15,9 @@ interface ModuleLabelProps {
   orientation: 'left' | 'right'
   isSelected: boolean
   isLast: boolean
+  isZoomed?: boolean
   labwareInfos?: DeckLabelProps[]
+  labelName?: string
 }
 export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
   const {
@@ -25,6 +27,8 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
     isSelected,
     isLast,
     labwareInfos = [],
+    isZoomed = true,
+    labelName,
   } = props
   const labelContainerRef = useRef<HTMLDivElement>(null)
   const [labelContainerHeight, setLabelContainerHeight] = useState(12)
@@ -52,14 +56,14 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
 
   return (
     <DeckLabelSet
-      isZoomed={true}
       ref={labelContainerRef}
       deckLabels={[
         {
-          text: def?.displayName,
+          text: labelName ?? def?.displayName,
           isSelected,
           isLast,
           moduleModel: def?.model,
+          isZoomed: isZoomed,
         },
         ...labwareInfos,
       ]}

diff --git a/protocol-designer/src/pages/Designer/HighlightModule.tsx b/protocol-designer/src/pages/Designer/HighlightModule.tsx
@@ -0,0 +1,47 @@
+import { useSelector } from 'react-redux'
+import {
+  getHoveredSelection,
+  getSelectedSelection,
+} from '../../ui/steps/selectors'
+import { ModuleLabel } from './DeckSetup/ModuleLabel'
+
+import type { CoordinateTuple, ModuleModel } from '@opentrons/shared-data'
+
+interface HighlightModuleProps {
+  moduleModel: ModuleModel
+  position: CoordinateTuple
+  orientation: 'left' | 'right'
+  moduleId: string
+}
+export const HighlightModule = (
+  props: HighlightModuleProps
+): JSX.Element | null => {
+  const { moduleModel, position, orientation, moduleId } = props
+  const hoveredModulSelection = useSelector(getHoveredSelection)
+  const selectedModuleSelection = useSelector(getSelectedSelection)
+  const isSelectedModuleSelected =
+    selectedModuleSelection.find(selected => selected.id === moduleId) != null
+  const highlighted = hoveredModulSelection.id === moduleId
+
+  let labelText
+  if (hoveredModulSelection != null && !isSelectedModuleSelected) {
+    labelText = hoveredModulSelection.text ?? undefined
+  } else if (isSelectedModuleSelected) {
+    labelText = selectedModuleSelection[0].text ?? undefined
+  }
+
+  if (isSelectedModuleSelected || highlighted) {
+    return (
+      <ModuleLabel
+        isLast={true}
+        isSelected={isSelectedModuleSelected}
+        moduleModel={moduleModel}
+        position={position}
+        orientation={orientation}
+        isZoomed={false}
+        labelName={labelText}
+      />
+    )
+  }
+  return null
+}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx
@@ -1,9 +1,10 @@
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   getDisposalOptions,
   getLabwareOptions,
 } from '../../../../../ui/labware/selectors'
+import { hoverSelection } from '../../../../../ui/steps/actions/actions'
 import { DropdownStepFormField } from '../../../../../molecules'
 import type { FieldProps } from '../types'
 
@@ -12,6 +13,7 @@ export function LabwareField(props: FieldProps): JSX.Element {
   const { i18n, t } = useTranslation('protocol_steps')
   const disposalOptions = useSelector(getDisposalOptions)
   const options = useSelector(getLabwareOptions)
+  const dispatch = useDispatch()
   const allOptions =
     name === 'dispense_labware'
       ? [...options, ...disposalOptions]
@@ -23,6 +25,12 @@ export function LabwareField(props: FieldProps): JSX.Element {
       name={name}
       options={allOptions}
       title={i18n.format(t(`${name}`), 'capitalize')}
+      onEnter={(id: string) => {
+        dispatch(hoverSelection({ id, text: 'Select' }))
+      }}
+      onExit={() => {
+        dispatch(hoverSelection({ id: null, text: null }))
+      }}
     />
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -239,8 +239,8 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         })
       )
       dispatch(analyticsEvent(stepDuration))
-      dispatch(selectSelection({ id: null, text: null, fieldType: undefined }))
-      dispatch(hoverSelection({ id: null, text: null, fieldType: undefined }))
+      dispatch(selectSelection({ selection: null, mode: 'clear' }))
+      dispatch(hoverSelection({ id: null, text: null }))
     } else {
       setShowFormErrors(true)
       if (tab === 'aspirate' && isDispenseError && !isAspirateError) {
@@ -302,7 +302,16 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
           </Btn>
         }
         childrenPadding="0"
-        onCloseClick={handleClose}
+        onCloseClick={() => {
+          handleClose()
+          dispatch(
+            selectSelection({
+              selection: null,
+              mode: 'clear',
+            })
+          )
+          dispatch(hoverSelection({ id: null, text: null }))
+        }}
         closeButton={<Icon size="2rem" name="close" />}
         confirmButton={
           <Flex gridGap={SPACING.spacing8}>

diff --git a/...-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx b/...-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
@@ -1,4 +1,4 @@
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   Box,
@@ -16,12 +16,13 @@ import {
 } from '../../../../../../molecules'
 import { getFormErrorsMappedToField, getFormLevelError } from '../../utils'
 import type { StepFormProps } from '../../types'
+import { hoverSelection } from '../../../../../../ui/steps/actions/actions'
 
 export function HeaterShakerTools(props: StepFormProps): JSX.Element {
   const { propsForFields, formData, visibleFormErrors } = props
   const { t } = useTranslation(['application', 'form', 'protocol_steps'])
   const moduleLabwareOptions = useSelector(getHeaterShakerLabwareOptions)
-
+  const dispatch = useDispatch()
   const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
 
   return (
@@ -34,6 +35,13 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
         {...propsForFields.moduleId}
         options={moduleLabwareOptions}
         title={t('protocol_steps:module')}
+        onEnter={(id: string) => {
+          console.log(id)
+          dispatch(hoverSelection({ id, text: 'Select' }))
+        }}
+        onExit={() => {
+          dispatch(hoverSelection({ id: null, text: null }))
+        }}
       />
       <Box borderBottom={`1px solid ${COLORS.grey30}`} />
       <Flex