From 6676596256d50dc8216bd1bc5cb65f2c00319847 Mon Sep 17 00:00:00 2001 From: Jethary Date: Wed, 18 Dec 2024 12:49:21 -0500 Subject: [PATCH] address feedback --- .../src/hardware-sim/Deck/OT2Layers.tsx | 4 +-- .../assets/localization/en/application.json | 2 +- .../molecules/DropdownStepFormField/index.tsx | 5 +-- .../Designer/DeckSetup/DeckItemHighlight.tsx | 16 +++++++--- .../Designer/DeckSetup/HighlightItems.tsx | 21 +++++++------ .../pages/Designer/DeckSetup/ModuleLabel.tsx | 31 +++++++++++-------- .../Designer/Offdeck/HighlightOffdeckSlot.tsx | 8 ++--- .../pages/Designer/Offdeck/OffDeckDetails.tsx | 21 +++++++------ .../MoveLabwareTools/LabwareLocationField.tsx | 4 +-- .../__tests__/addAndSelectStep.test.ts | 2 +- 10 files changed, 65 insertions(+), 49 deletions(-) diff --git a/components/src/hardware-sim/Deck/OT2Layers.tsx b/components/src/hardware-sim/Deck/OT2Layers.tsx index c86c93a8ef4..cc5b3143aa1 100644 --- a/components/src/hardware-sim/Deck/OT2Layers.tsx +++ b/components/src/hardware-sim/Deck/OT2Layers.tsx @@ -1,4 +1,4 @@ -import { blue50 } from '../../helix-design-system/colors' +import { COLORS } from '../../helix-design-system' export function FixedBase(): JSX.Element { return ( @@ -27,7 +27,7 @@ export function FixedTrash(props: FixedTrashProps): JSX.Element { d="M441.107,289.57v135.86c0,8.368-6.808,15.176-15.176,15.176H283.07c-8.368,0-15.176-6.808-15.176-15.176V289.57c0-8.368,6.808-15.177,15.176-15.177h142.86C434.298,274.394,441.107,281.202,441.107,289.57z M425.053,434H283.947c-1.24,0-2.484-0.034-3.702-0.287c-2-0.416-3.81-1.446-4.884-3.227c-1.152-1.91-1.289-4.185-1.289-6.359v-88.629c0-2.683,0.259-5.609,2.263-7.612c2.004-2.003,4.928-2.263,7.612-2.263h25.939c1.693,0.006,3.545-0.167,4.807-1.429c1.262-1.262,1.435-3.115,1.429-4.807v-28.94c0-2.124,0.129-4.338,1.209-6.225c1.059-1.851,2.904-2.933,4.954-3.36c1.222-0.255,2.468-0.289,3.712-0.289h99.056c2.124,0,4.339,0.129,6.226,1.209c1.851,1.06,2.933,2.904,3.36,4.954c0.255,1.222,0.289,2.468,0.289,3.712v133.68c0,2.684-0.259,5.607-2.263,7.611C430.661,433.741,427.737,434,425.053,434z" style={{ fill: highlight ? 'none' : 'rgb(237, 237, 237)', - stroke: highlight ? blue50 : 'none', + stroke: highlight ? COLORS.blue50 : 'none', fillRule: 'evenodd', strokeWidth: 2, }} diff --git a/protocol-designer/src/assets/localization/en/application.json b/protocol-designer/src/assets/localization/en/application.json index 6b172a4e8a0..3692c9a1fac 100644 --- a/protocol-designer/src/assets/localization/en/application.json +++ b/protocol-designer/src/assets/localization/en/application.json @@ -12,7 +12,7 @@ "information": "Information", "labware": "labware", "last_exported": "Last Exported", - "location": "location", + "location": "Location", "magnet_height_caption": "Must be between {{low}} to {{high}}.", "magnet_recommended": "The recommended height is {{default}}", "manually": "Manually", diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx index 9ad0feb716b..75334fe830a 100644 --- a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx +++ b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx @@ -42,18 +42,19 @@ export function DropdownStepFormField( onFieldBlur, name: fieldName, } = props - const { t, i18n } = useTranslation(['tooltip', 'application']) + const { t } = useTranslation(['tooltip', 'application']) const dispatch = useDispatch() const availableOptionId = options.find(opt => opt.value === value) const handleSelection = (value: string): void => { let text = t('application:selected') if (fieldName === 'newLocation') { - text = i18n.format(t('application:location'), 'capitalize') + text = t('application:location') } else if (fieldName === 'aspirate_labware') { text = t('application:source') } else if (fieldName === 'dispense_labware') { text = t('application:dest') } + const selection = { id: value, text, diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHighlight.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHighlight.tsx index 128e4dbdcf0..98a08fed0a7 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHighlight.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHighlight.tsx @@ -29,7 +29,7 @@ export function DeckItemHighlight( props: DeckItemHighlightProps ): JSX.Element | null { const { tab, slotBoundingBox, itemId, slotPosition } = props - const { t, i18n } = useTranslation('application') + const { t } = useTranslation('application') const hoveredDropdownSelection = useSelector(getHoveredDropdownItem) const selectedDropdownLocation = useSelector(getSelectedDropdownItem) @@ -41,9 +41,15 @@ export function DeckItemHighlight( selected => selected.id === itemId && selected.field === '2' ) - if (tab === 'startingDeck' || slotPosition === null) return null + if ( + tab === 'startingDeck' || + slotPosition === null || + (!isHovered && !isSelected) + ) { + return null + } - return isHovered || isSelected ? ( + return ( <> - ) : null + ) } diff --git a/protocol-designer/src/pages/Designer/DeckSetup/HighlightItems.tsx b/protocol-designer/src/pages/Designer/DeckSetup/HighlightItems.tsx index c616fc07a7c..fd548de360b 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/HighlightItems.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/HighlightItems.tsx @@ -47,7 +47,7 @@ const SLOTS = [ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null { const { robotType, deckDef } = props - const { t, i18n } = useTranslation('application') + const { t } = useTranslation('application') const tab = useSelector(getDesignerTab) const { labware, modules, additionalEquipmentOnDeck } = useSelector( getDeckSetupForActiveItem @@ -106,9 +106,10 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null { .map(item => (item?.id != null ? labware[item.id] : null)) .filter(Boolean) - const labwaresToRender = hoveredItemLabware - ? [hoveredItemLabware] - : selectedLabwaresOnDeck + const labwaresToRender = + hoveredItemLabware != null + ? [hoveredItemLabware] + : selectedLabwaresOnDeck labwaresToRender.forEach((labwareOnDeck, index) => { if (!labwareOnDeck) { @@ -120,7 +121,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null { let labwareSlot = labwareOnDeck.slot const hasTC = Object.values(modules).some( - mod => mod.type === THERMOCYCLER_MODULE_TYPE + module => module.type === THERMOCYCLER_MODULE_TYPE ) if (modules[labwareSlot]) { @@ -131,7 +132,7 @@ export function HighlightItems(props: HighlightItemsProps): JSX.Element | null { } const position = getPositionFromSlotId(labwareSlot, deckDef) - if (position) { + if (position != null) { items.push( { def?.dimensions.labwareInterfaceXDimension != null ? def.dimensions.xDimension - def?.dimensions.labwareInterfaceXDimension : 0 - // TODO(ja 9/6/24): definitely need to refine these overhang values let leftOverhang = overhang - if (def?.moduleType === TEMPERATURE_MODULE_TYPE) { - leftOverhang = overhang * 2 - } else if (def?.moduleType === HEATERSHAKER_MODULE_TYPE) { - leftOverhang = overhang + 14 - } else if (def?.moduleType === MAGNETIC_MODULE_TYPE) { - leftOverhang = overhang + 8 - } else if ( - def?.moduleType === THERMOCYCLER_MODULE_TYPE && - !isZoomed && - robotType === FLEX_ROBOT_TYPE - ) { - leftOverhang = overhang + 20 + + switch (def?.moduleType) { + case TEMPERATURE_MODULE_TYPE: + leftOverhang = overhang * 2 + break + case HEATERSHAKER_MODULE_TYPE: + leftOverhang = overhang + 14 + break + case MAGNETIC_MODULE_TYPE: + leftOverhang = overhang + 8 + break + case THERMOCYCLER_MODULE_TYPE: + if (!isZoomed && robotType === FLEX_ROBOT_TYPE) { + leftOverhang = overhang + 20 + } + break + default: + break } return ( diff --git a/protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx b/protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx index 1c04ee62049..4f8ddfdbbea 100644 --- a/protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx +++ b/protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx @@ -1,6 +1,6 @@ import { useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' -import { DeckLabelSet, Flex } from '@opentrons/components' +import { DeckLabelSet, Flex, POSITION_RELATIVE } from '@opentrons/components' import { getHoveredDropdownItem, getSelectedDropdownItem, @@ -17,7 +17,7 @@ export function HighlightOffdeckSlot( props: HighlightOffdeckSlotProps ): JSX.Element | null { const { labwareOnDeck, position } = props - const { t, i18n } = useTranslation('application') + const { t } = useTranslation('application') const hoveredDropdownItem = useSelector(getHoveredDropdownItem) const selectedDropdownSelection = useSelector(getSelectedDropdownItem) @@ -28,7 +28,7 @@ export function HighlightOffdeckSlot( const highlighted = hoveredDropdownItem.id === labwareOnDeck?.id if (highlighted ?? isLabwareSelectionSelected) { return ( - + void } @@ -154,14 +154,17 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element { menuListId={menuListId} setHover={setHoverSlot} slotBoundingBox={xyzDimensions} - slotPosition={[0, 0, 0]} + slotPosition={ZERO_SLOT_POSITION} itemId={lw.id} tab={tab} /> )} - + {menuListId === lw.id ? ( { setShowMenuListForId(null) }} - menuListSlotPosition={[0, 0, 0]} + menuListSlotPosition={ZERO_SLOT_POSITION} invertY /> @@ -183,7 +186,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element { ) })} - + {tab === 'startingDeck' ? ( diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/LabwareLocationField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/LabwareLocationField.tsx index 920b1157d96..7e31c1f8b32 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/LabwareLocationField.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/LabwareLocationField.tsx @@ -19,7 +19,7 @@ interface LabwareLocationFieldProps extends FieldProps { export function LabwareLocationField( props: LabwareLocationFieldProps ): JSX.Element { - const { t, i18n } = useTranslation(['form', 'protocol_steps']) + const { t } = useTranslation(['form', 'protocol_steps']) const { labware, useGripper } = props const additionalEquipmentEntities = useSelector( getAdditionalEquipmentEntities @@ -54,7 +54,7 @@ export function LabwareLocationField( dispatch( hoverSelection({ id, - text: i18n.format(t('application:location'), 'capitalize'), + text: t('application:location'), }) ) }} diff --git a/protocol-designer/src/ui/steps/actions/__tests__/addAndSelectStep.test.ts b/protocol-designer/src/ui/steps/actions/__tests__/addAndSelectStep.test.ts index ea81dd95a4b..c19e9f56483 100644 --- a/protocol-designer/src/ui/steps/actions/__tests__/addAndSelectStep.test.ts +++ b/protocol-designer/src/ui/steps/actions/__tests__/addAndSelectStep.test.ts @@ -6,8 +6,8 @@ import { addHint } from '../../../../tutorial/actions' import { selectors as labwareIngredSelectors } from '../../../../labware-ingred/selectors' import * as fileDataSelectors from '../../../../file-data/selectors' import { getInitialDeckSetup } from '../../../../step-forms/selectors' -import type { StepType } from '../../../../form-types' import type { LabwareDefinition2 } from '@opentrons/shared-data' +import type { StepType } from '../../../../form-types' vi.mock('../../../../tutorial/actions') vi.mock('../../../../ui/modules/selectors')