diff --git a/app/src/assets/localization/en/quick_transfer.json b/app/src/assets/localization/en/quick_transfer.json
index 294e946aa46..b6e5cccfe57 100644
--- a/app/src/assets/localization/en/quick_transfer.json
+++ b/app/src/assets/localization/en/quick_transfer.json
@@ -1,10 +1,12 @@
{
+ "add_or_remove_columns": "add or remove columns",
"add_or_remove": "add or remove",
"advanced_settings": "Advanced settings",
"all": "All labware",
"aspirate_volume": "Aspirate volume per well",
"aspirate_volume_µL": "Aspirate volume per well (µL)",
"both_mounts": "Left + Right Mount",
+ "columns": "columns",
"create_new_transfer": "Create new quick transfer",
"create_transfer": "Create transfer",
"destination": "Destination",
@@ -21,6 +23,7 @@
"reservoir": "Reservoirs",
"source": "Source",
"select_attached_pipette": "Select attached pipette",
+ "select_by": "select by",
"select_dest_labware": "Select destination labware",
"select_dest_wells": "Select destination wells",
"select_source_labware": "Select source labware",
@@ -31,6 +34,7 @@
"set_transfer_volume": "Set transfer volume",
"source_labware": "Source labware",
"source_labware_d2": "Source labware in D2",
+ "starting_well": "starting well",
"use_deck_slots": "Quick transfers use deck slots B2-D2. These slots hold a tip rack, a source labware, and a destination labware.Make sure that your deck configuration is up to date to avoid collisions.",
"tip_management": "Tip management",
"tip_rack": "Tip rack",
@@ -42,5 +46,6 @@
"pipette_currently_attached": "Quick transfer options depend on the pipettes currently attached to your robot.",
"wellPlate": "Well plates",
"well_selection": "Well selection",
- "well_ratio": "Quick transfers with multiple source wells can either be one-to-one (select {{wells}} for this transfer) or consolidate (select 1 destination well)."
+ "well_ratio": "Quick transfers with multiple source wells can either be one-to-one (select {{wells}} for this transfer) or consolidate (select 1 destination well).",
+ "wells": "wells"
}
diff --git a/app/src/atoms/buttons/IconButton.tsx b/app/src/atoms/buttons/IconButton.tsx
index 6012fc35c20..48524f45205 100644
--- a/app/src/atoms/buttons/IconButton.tsx
+++ b/app/src/atoms/buttons/IconButton.tsx
@@ -1,17 +1,25 @@
import * as React from 'react'
-import { BORDERS, COLORS, Icon, RESPONSIVENESS } from "@opentrons/components"
-import { ODD_FOCUS_VISIBLE } from "./constants"
-import styled, { css } from "styled-components"
+import { css } from 'styled-components'
+import {
+ BORDERS,
+ Btn,
+ COLORS,
+ Icon,
+ RESPONSIVENESS,
+} from '@opentrons/components'
+import { ODD_FOCUS_VISIBLE } from './constants'
-interface IconButtonProps extends React.ButtonHTMLAttributes {
+interface IconButtonProps
+ // extends React.ButtonHTMLAttributes {
+ extends React.ComponentProps {
iconName: React.ComponentProps['name']
hasBackground?: boolean
}
-export function IconButton(props: IconButtonProps) {
+export function IconButton(props: IconButtonProps): JSX.Element {
const { iconName, hasBackground = false, ...buttonProps } = props
return (
-
+
)
}
-
-const ButtonWrapper = styled('button')
-
diff --git a/app/src/organisms/WellSelection/index.tsx b/app/src/organisms/WellSelection/index.tsx
index 14160e89a30..07e1388ebc8 100644
--- a/app/src/organisms/WellSelection/index.tsx
+++ b/app/src/organisms/WellSelection/index.tsx
@@ -1,9 +1,10 @@
import * as React from 'react'
+import { useTranslation } from 'react-i18next'
import reduce from 'lodash/reduce'
import {
- ALIGN_STRETCH,
Box,
+ Checkbox,
COLORS,
DIRECTION_COLUMN,
Flex,
@@ -15,6 +16,9 @@ import {
TYPOGRAPHY,
WELL_LABEL_OPTIONS,
} from '@opentrons/components'
+
+import { IconButton } from '../../atoms/buttons/IconButton'
+import { RadioButton } from '../../atoms/buttons/RadioButton'
import {
arrayToWellGroup,
getCollidingWells,
@@ -28,8 +32,6 @@ import type {
PipetteChannels,
} from '@opentrons/shared-data'
import type { GenericRect } from './types'
-import { useTranslation } from 'react-i18next'
-import { IconButton } from '../../atoms/buttons/IconButton'
interface WellSelectionProps {
definition: LabwareDefinition2
@@ -108,18 +110,18 @@ export function WellSelection(props: WellSelectionProps): JSX.Element {
const allSelectedWells =
channels === 8 || channels === 96
? reduce(
- selectedPrimaryWells,
- (acc, _, wellName): WellGroup => {
- const wellSet = getWellSetForMultichannel(
- definition,
- wellName,
- channels
- )
- if (!wellSet) return acc
- return { ...acc, ...arrayToWellGroup(wellSet) }
- },
- {}
- )
+ selectedPrimaryWells,
+ (acc, _, wellName): WellGroup => {
+ const wellSet = getWellSetForMultichannel(
+ definition,
+ wellName,
+ channels
+ )
+ if (!wellSet) return acc
+ return { ...acc, ...arrayToWellGroup(wellSet) }
+ },
+ {}
+ )
: selectedPrimaryWells
const wellFill: WellFill = {}
@@ -150,48 +152,117 @@ export function WellSelection(props: WellSelectionProps): JSX.Element {
)
return definition.parameters.format === '384Standard' ? (
-
+
{labwareRender}
-
+
+ {channels === 1 ? : }
+
+
) : (
- { labwareRender }
-
+ {labwareRender}
+
)
}
-interface ButtonControlsProps {
- channels: PipetteChannels
- flex: React.ComponentProps['flex']
-}
-function ButtonControls(props: ButtonControlsProps): JSX.Element {
- const { channels, flex } = props
+function SelectBy(): JSX.Element {
const { t, i18n } = useTranslation('quick_transfer')
- const addOrRemoveButtons = channels !== 96 ? (
-
- {i18n.format(t('add_or_remove'), 'capitalize')}
-
- { console.log('TODO handle minus') }}
- iconName="minus"
- hasBackground />
- { console.log('TODO handle plus') }}
- iconName="plus"
- hasBackground />
-
+ return (
+
+
+ {i18n.format(t('select_by'), 'capitalize')}
+
+ console.log('columns')}
+ radioButtonType="small"
+ />
+ console.log('wells')}
+ radioButtonType="small"
+ />
- ) : null
+ )
+}
+
+function StartingWell({
+ channels,
+}: {
+ channels: PipetteChannels
+}): JSX.Element {
+ const { t, i18n } = useTranslation('quick_transfer')
+
+ const checkboxWellOptions =
+ channels === 8 ? ['A1', 'B1'] : ['A1', 'A2', 'B1', 'B2']
+
return (
-
- {addOrRemoveButtons}
+
+
+ {i18n.format(t('starting_well'), 'capitalize')}
+
+ {checkboxWellOptions.map(well => (
+ console.log(well)}
+ />
+ ))}
)
}
+
+interface ButtonControlsProps {
+ channels: PipetteChannels
+}
+function ButtonControls(props: ButtonControlsProps): JSX.Element {
+ const { channels } = props
+ const { t, i18n } = useTranslation('quick_transfer')
+
+ const addOrRemoveButtons =
+ channels !== 96 ? (
+
+
+ {i18n.format(
+ t(channels === 8 ? 'add_or_remove_columns' : 'add_or_remove'),
+ 'capitalize'
+ )}
+
+
+ {
+ console.log('TODO handle minus')
+ }}
+ iconName="minus"
+ hasBackground
+ flex="1"
+ />
+ {
+ console.log('TODO handle plus')
+ }}
+ iconName="plus"
+ hasBackground
+ flex="1"
+ />
+
+
+ ) : null
+ return {addOrRemoveButtons}
+}
diff --git a/components/src/atoms/index.ts b/components/src/atoms/index.ts
index 93a5eb64f26..f5ecc5bb98c 100644
--- a/components/src/atoms/index.ts
+++ b/components/src/atoms/index.ts
@@ -1,4 +1,5 @@
export * from './buttons'
+export * from './Checkbox'
export * from './CheckboxField'
export * from './Chip'
export * from './StepMeter'