From d6d9ab426d87c061d401e1fcfb5f2d3d52a70040 Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Wed, 22 Jun 2022 16:21:03 -0400 Subject: [PATCH 01/14] add liquid color enhancements feature flag --- protocol-designer/src/feature-flags/reducers.ts | 2 ++ protocol-designer/src/feature-flags/selectors.ts | 5 +++++ protocol-designer/src/feature-flags/types.ts | 1 + protocol-designer/src/localization/en/feature_flags.json | 4 ++++ 4 files changed, 12 insertions(+) diff --git a/protocol-designer/src/feature-flags/reducers.ts b/protocol-designer/src/feature-flags/reducers.ts index c1c272c1ad4..956707ef643 100644 --- a/protocol-designer/src/feature-flags/reducers.ts +++ b/protocol-designer/src/feature-flags/reducers.ts @@ -21,6 +21,8 @@ const initialFlags: Flags = { process.env.OT_PD_DISABLE_MODULE_RESTRICTIONS === '1' || false, OT_PD_ENABLE_HEATER_SHAKER: process.env.OT_PD_ENABLE_HEATER_SHAKER === '1' || false, + OT_PD_ENABLE_LIQUID_COLOR_ENHANCEMENTS: + process.env.OT_PD_ENABLE_LIQUID_COLOR_ENHANCEMENTS === '1' || false, } // @ts-expect-error(sa, 2021-6-10): cannot use string literals as action type // TODO IMMEDIATELY: refactor this to the old fashioned way if we cannot have type safety: https://github.com/redux-utilities/redux-actions/issues/282#issuecomment-595163081 diff --git a/protocol-designer/src/feature-flags/selectors.ts b/protocol-designer/src/feature-flags/selectors.ts index eca8972d4a5..468be998a0b 100644 --- a/protocol-designer/src/feature-flags/selectors.ts +++ b/protocol-designer/src/feature-flags/selectors.ts @@ -20,3 +20,8 @@ export const getEnabledHeaterShaker: Selector = createSelector( getFeatureFlagData, flags => flags.OT_PD_ENABLE_HEATER_SHAKER ?? false ) + +export const getEnabledLiquidColorEnhancements: Selector = createSelector( + getFeatureFlagData, + flags => flags.OT_PD_ENABLE_LIQUID_COLOR_ENHANCEMENTS ?? false +) diff --git a/protocol-designer/src/feature-flags/types.ts b/protocol-designer/src/feature-flags/types.ts index 2e80ebe91ec..75d15ddc55f 100644 --- a/protocol-designer/src/feature-flags/types.ts +++ b/protocol-designer/src/feature-flags/types.ts @@ -22,6 +22,7 @@ export type FlagTypes = | 'PRERELEASE_MODE' | 'OT_PD_DISABLE_MODULE_RESTRICTIONS' | 'OT_PD_ENABLE_HEATER_SHAKER' + | 'OT_PD_ENABLE_LIQUID_COLOR_ENHANCEMENTS' // flags that are not in this list only show in prerelease mode export const userFacingFlags: FlagTypes[] = [ 'OT_PD_DISABLE_MODULE_RESTRICTIONS', diff --git a/protocol-designer/src/localization/en/feature_flags.json b/protocol-designer/src/localization/en/feature_flags.json index 6a3b56bab1d..34ec8149f61 100644 --- a/protocol-designer/src/localization/en/feature_flags.json +++ b/protocol-designer/src/localization/en/feature_flags.json @@ -19,5 +19,9 @@ "OT_PD_ENABLE_SCHEMA_V6": { "title": "Enable schema v6 support", "description": "Allow users to migrate older protocols to schema v6" + }, + "OT_PD_ENABLE_LIQUID_COLOR_ENHANCEMENTS": { + "title": "Enable liquid color enhancements", + "description": "Allow users to enable liquid color picking" } } From 22eb579f09f71edd7b0ab3221f9d1e2dd945030a Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Thu, 23 Jun 2022 12:16:56 -0400 Subject: [PATCH 02/14] add react-color dependency --- package.json | 1 + protocol-designer/package.json | 1 + yarn.lock | 63 ++++++++++++++++++++++++++++++++-- 3 files changed, 63 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b81e56935f3..94b7834ad36 100755 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@types/lodash": "^4.14.168", "@types/multer": "^1.4.5", "@types/netmask": "^1.0.30", + "@types/react-color": "^3.0.6", "@types/react-redux": "^7.1.16", "@types/react-test-renderer": "^17.0.1", "@types/redux-mock-store": "^1.0.2", diff --git a/protocol-designer/package.json b/protocol-designer/package.json index 0adda883509..0a1e5feea33 100755 --- a/protocol-designer/package.json +++ b/protocol-designer/package.json @@ -38,6 +38,7 @@ "lodash": "4.17.15", "query-string": "6.2.0", "react": "17.0.1", + "react-color": "2.19.3", "react-dnd": "6.0.0", "react-dnd-mouse-backend": "0.1.2", "react-dom": "17.0.1", diff --git a/yarn.lock b/yarn.lock index 999a8f1f5be..b64868d5ecb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1556,6 +1556,11 @@ object-assign "^4.1.1" scheduler "^0.20.1" +"@icons/material@^0.2.4": + version "0.2.4" + resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" + integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw== + "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -4060,6 +4065,14 @@ dependencies: "@types/react" "*" +"@types/react-color@^3.0.6": + version "3.0.6" + resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a" + integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w== + dependencies: + "@types/react" "*" + "@types/reactcss" "*" + "@types/react-dom@*", "@types/react-dom@>=16.9.0": version "17.0.7" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.7.tgz#b8ee15ead9e5d6c2c858b44949fdf2ebe5212232" @@ -4143,6 +4156,13 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/reactcss@*": + version "1.2.6" + resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc" + integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg== + dependencies: + "@types/react" "*" + "@types/redux-actions@2.6.1": version "2.6.1" resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.6.1.tgz#0940e97fa35ad3004316bddb391d8e01d2efa605" @@ -14111,7 +14131,7 @@ lodash@4.17.15: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== -lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.7.0: +lodash@^4.0.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -14450,6 +14470,11 @@ matcher@^3.0.0: dependencies: escape-string-regexp "^4.0.0" +material-colors@^1.2.1: + version "1.2.6" + resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46" + integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg== + mathml-tag-names@^2.1.0: version "2.1.3" resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" @@ -17582,6 +17607,15 @@ prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, object-assign "^4.1.1" react-is "^16.8.1" +prop-types@^15.5.10: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + property-expr@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f" @@ -17912,6 +17946,19 @@ rc@^1.2.7, rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-color@2.19.3: + version "2.19.3" + resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d" + integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA== + dependencies: + "@icons/material" "^0.2.4" + lodash "^4.17.15" + lodash-es "^4.17.15" + material-colors "^1.2.1" + prop-types "^15.5.10" + reactcss "^1.2.0" + tinycolor2 "^1.4.1" + react-colorful@^5.0.1: version "5.2.2" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.2.2.tgz#0a69d0648db47e51359d343854d83d250a742243" @@ -18097,7 +18144,7 @@ react-intersection-observer@^8.33.1: resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.33.1.tgz#8e6442cac7052ed63056e191b7539e423e7d5c64" integrity sha512-3v+qaJvp3D1MlGHyM+KISVg/CMhPiOlO6FgPHcluqHkx4YFCLuyXNlQ/LE6UkbODXlQcLOppfX6UMxCEkUhDLw== -react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0: +react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -18334,6 +18381,13 @@ react@17.0.1: loose-envify "^1.1.0" object-assign "^4.1.1" +reactcss@^1.2.0: + version "1.2.3" + resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" + integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A== + dependencies: + lodash "^4.0.1" + read-cache@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" @@ -21165,6 +21219,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== +tinycolor2@^1.4.1: + version "1.4.2" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803" + integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA== + tmp-promise@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/tmp-promise/-/tmp-promise-3.0.2.tgz#6e933782abff8b00c3119d63589ca1fb9caaa62a" From 9667acb584c7e1d6e0831d35b8c781e19ea1bee1 Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Tue, 28 Jun 2022 13:13:17 -0400 Subject: [PATCH 03/14] add ColorPicker component --- components/src/ui-style-constants/colors.ts | 12 +++++ .../components/ColorPicker/ColorPicker.css | 24 ++++++++++ .../src/components/ColorPicker/index.tsx | 48 +++++++++++++++++++ .../components/LiquidsPage/LiquidEditForm.tsx | 8 +++- .../src/components/forms/forms.css | 4 +- .../src/components/swatchColors.ts | 24 ++++++---- 6 files changed, 106 insertions(+), 14 deletions(-) create mode 100644 protocol-designer/src/components/ColorPicker/ColorPicker.css create mode 100644 protocol-designer/src/components/ColorPicker/index.tsx diff --git a/components/src/ui-style-constants/colors.ts b/components/src/ui-style-constants/colors.ts index d7ec7907569..74f5850bac9 100644 --- a/components/src/ui-style-constants/colors.ts +++ b/components/src/ui-style-constants/colors.ts @@ -58,3 +58,15 @@ export const warningBg = '#fffcf5' export const alphaToOpacity35 = '35' export const backgroundOverlay = `${darkBlack}${alphaToOpacity35}` + +// colors pd liquid +export const electricPurple = '#b925ff' +export const goldenYellow = '#ffd600' +export const aquamarine = '#9dffd8' +export const orangePeel = '#ff9900' +export const skyBlue = '#50d5ff' +export const popPink = '#ff80f5' +export const richBlue = '#0380fb' +export const springGreen = '#7eff42' +export const tartRed = '#ff4f4f' +export const whaleGrey = '#9395a0' diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css new file mode 100644 index 00000000000..8d46c153004 --- /dev/null +++ b/protocol-designer/src/components/ColorPicker/ColorPicker.css @@ -0,0 +1,24 @@ +.swatch { + display: inline-block; + cursor: pointer; +} + +.color { + width: 59px; + height: 24px; + border-radius: 2px; +} + +.popover { + margin-top: 10px; + padding-right: 100px; + position: absolute; +} + +.cover { + position: fixed; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx new file mode 100644 index 00000000000..32a7618d520 --- /dev/null +++ b/protocol-designer/src/components/ColorPicker/index.tsx @@ -0,0 +1,48 @@ +import * as React from 'react' +import { ColorResult, TwitterPicker } from 'react-color' +import { colors } from '../swatchColors' + +import styles from './ColorPicker.css' + +interface ColorPickerProps { + liquidId: string +} + +export function ColorPicker(props: ColorPickerProps): JSX.Element { + const [showColorPicker, setShowColorPicker] = React.useState(false) + const [currentColor, setCurrentColor] = React.useState( + '#000' + ) + return ( +
+
setShowColorPicker(showColorPicker => !showColorPicker)} + > +
+
+ {showColorPicker ? ( +
+
setShowColorPicker(false)} + /> + { + setCurrentColor(color.hex) + setShowColorPicker(showColorPicker => !showColorPicker) + }} + triangle="top-left" + /> +
+ ) : null} +
+ ) +} diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx index e515dbc62b8..5d870d2274e 100644 --- a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx +++ b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx @@ -14,6 +14,7 @@ import styles from './LiquidEditForm.css' import formStyles from '../forms/forms.css' import { LiquidGroup } from '../../labware-ingred/types' +import { ColorPicker } from '../ColorPicker' type Props = LiquidGroup & { canDelete: boolean @@ -81,7 +82,7 @@ export function LiquidEditForm(props: Props): JSX.Element {
+ + +
diff --git a/protocol-designer/src/components/forms/forms.css b/protocol-designer/src/components/forms/forms.css index b9003407bf7..1a46003cff8 100644 --- a/protocol-designer/src/components/forms/forms.css +++ b/protocol-designer/src/components/forms/forms.css @@ -27,8 +27,8 @@ * that doesn't match the layout of transfer/distribute/consolidate/mix. * Eg the Pause form is an example of an exceptional layout. */ -.column_1_2 { - lost-column: 1/2; +.column_1_3 { + lost-column: 1/3; } .row_wrapper { diff --git a/protocol-designer/src/components/swatchColors.ts b/protocol-designer/src/components/swatchColors.ts index 4791782055f..386a5c54c97 100644 --- a/protocol-designer/src/components/swatchColors.ts +++ b/protocol-designer/src/components/swatchColors.ts @@ -1,19 +1,23 @@ import { AIR } from '@opentrons/step-generation' +import { COLORS } from '@opentrons/components' export const MIXED_WELL_COLOR = '#9b9b9b' // NOTE: matches `--c-med-gray` in colors.css // TODO factor into CSS or constants or elsewhere +export const colors = [ + COLORS.electricPurple, + COLORS.goldenYellow, + COLORS.aquamarine, + COLORS.orangePeel, + COLORS.skyBlue, + COLORS.popPink, + COLORS.richBlue, + COLORS.springGreen, + COLORS.tartRed, + COLORS.whaleGrey, +] + export const swatchColors = (ingredGroupId: string): string => { const num = Number(ingredGroupId) - const colors = [ - '#00d781', - '#0076ff', - '#ff4888', - '#7b21d6', - '#ff6161', - '#065596', - '#2a97dc', - '#d24193', - ] if (!Number.isInteger(num)) { if (ingredGroupId !== AIR) { From 1ca6d69c3b363be1c1499c75274d79fbf75317bc Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Tue, 28 Jun 2022 17:28:31 -0400 Subject: [PATCH 04/14] add types --- .../src/components/ColorPicker/index.tsx | 19 +++++++++++-------- .../components/LiquidsPage/LiquidEditForm.tsx | 14 +++++++++++++- .../src/components/LiquidsPage/index.tsx | 2 ++ protocol-designer/src/labware-ingred/types.ts | 2 ++ 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx index 32a7618d520..f097b13c82c 100644 --- a/protocol-designer/src/components/ColorPicker/index.tsx +++ b/protocol-designer/src/components/ColorPicker/index.tsx @@ -5,14 +5,17 @@ import { colors } from '../swatchColors' import styles from './ColorPicker.css' interface ColorPickerProps { - liquidId: string + value: string + onChange: (hex: ColorResult['hex']) => void } export function ColorPicker(props: ColorPickerProps): JSX.Element { const [showColorPicker, setShowColorPicker] = React.useState(false) - const [currentColor, setCurrentColor] = React.useState( - '#000' - ) + + React.useEffect(() => { + console.log(props.value) + }, [props.value]) + return (
@@ -34,9 +37,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element { /> { - setCurrentColor(color.hex) + color={props.value} + onChange={(color, event) => { + props.onChange(color.hex) setShowColorPicker(showColorPicker => !showColorPicker) }} triangle="top-left" diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx index 5d870d2274e..063cf9f7297 100644 --- a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx +++ b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx @@ -15,6 +15,7 @@ import formStyles from '../forms/forms.css' import { LiquidGroup } from '../../labware-ingred/types' import { ColorPicker } from '../ColorPicker' +import { ColorResult } from 'react-color' type Props = LiquidGroup & { canDelete: boolean @@ -25,6 +26,7 @@ type Props = LiquidGroup & { interface LiquidEditFormValues { name: string + displayColor: string description?: string | null serialize?: boolean [key: string]: unknown @@ -38,6 +40,7 @@ export const liquidEditFormSchema: Yup.Schema< name: i18n.t('form.liquid_edit.name'), }) ), + displayColor: Yup.string(), description: Yup.string(), serialize: Yup.boolean(), }) @@ -47,10 +50,15 @@ export function LiquidEditForm(props: Props): JSX.Element { const initialValues: LiquidEditFormValues = { name: props.name || '', + displayColor: props.displayColor || '', description: props.description || '', serialize: props.serialize || false, } + const [currentColor, setCurrentColor] = React.useState( + props.displayColor || '#000' + ) + return ( { saveForm({ name: values.name, + displayColor: currentColor, description: values.description || null, serialize: values.serialize || false, }) @@ -103,7 +112,10 @@ export function LiquidEditForm(props: Props): JSX.Element { /> - +
diff --git a/protocol-designer/src/components/LiquidsPage/index.tsx b/protocol-designer/src/components/LiquidsPage/index.tsx index f6a5e4a20ef..0db89d5dc86 100644 --- a/protocol-designer/src/components/LiquidsPage/index.tsx +++ b/protocol-designer/src/components/LiquidsPage/index.tsx @@ -63,6 +63,8 @@ function mapStateToProps(state: BaseState): SP { name: selectedIngredFields.name, // @ts-expect-error(sa, 2021-6-22): description might not exist description: selectedIngredFields.description, + // @ts-expect-error(sh, 2022-6-28): displayColor might not exist + displayColor: selectedIngredFields.displayColor, // @ts-expect-error(sa, 2021-6-22): serialize might not exist serialize: selectedIngredFields.serialize, } diff --git a/protocol-designer/src/labware-ingred/types.ts b/protocol-designer/src/labware-ingred/types.ts index 92dd0dba100..61f9b722090 100644 --- a/protocol-designer/src/labware-ingred/types.ts +++ b/protocol-designer/src/labware-ingred/types.ts @@ -28,11 +28,13 @@ export interface WellContentsByLabware { export type OrderedLiquids = Array<{ ingredientId: string name: string | null | undefined + displayColor: string }> // TODO: Ian 2018-10-15 audit & rename these confusing types export interface LiquidGroup { name: string | null | undefined description: string | null | undefined + displayColor: string serialize: boolean } export type IngredInputs = LiquidGroup & { From 2176de74c7a8bbb7fb39e86db1d9db265d60cb72 Mon Sep 17 00:00:00 2001 From: smb2268 Date: Wed, 29 Jun 2022 12:55:32 -0400 Subject: [PATCH 05/14] Add display color to liquid type --- components/src/ui-style-constants/colors.ts | 15 ++++++++++- .../src/components/ColorPicker/index.tsx | 4 --- .../components/LiquidsPage/LiquidEditForm.tsx | 27 ++++++++++++------- .../src/components/LiquidsSidebar/index.tsx | 6 +++-- .../src/components/swatchColors.ts | 18 ++----------- .../src/labware-ingred/selectors.ts | 8 +++--- protocol-designer/src/labware-ingred/types.ts | 2 +- 7 files changed, 43 insertions(+), 37 deletions(-) diff --git a/components/src/ui-style-constants/colors.ts b/components/src/ui-style-constants/colors.ts index 74f5850bac9..07480ff1c85 100644 --- a/components/src/ui-style-constants/colors.ts +++ b/components/src/ui-style-constants/colors.ts @@ -59,7 +59,7 @@ export const alphaToOpacity35 = '35' export const backgroundOverlay = `${darkBlack}${alphaToOpacity35}` -// colors pd liquid +// colors liquid export const electricPurple = '#b925ff' export const goldenYellow = '#ffd600' export const aquamarine = '#9dffd8' @@ -70,3 +70,16 @@ export const richBlue = '#0380fb' export const springGreen = '#7eff42' export const tartRed = '#ff4f4f' export const whaleGrey = '#9395a0' + +export const liquidColors = [ + electricPurple, + goldenYellow, + aquamarine, + orangePeel, + skyBlue, + popPink, + richBlue, + springGreen, + tartRed, + whaleGrey, +] diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx index f097b13c82c..ab4c06b8fb5 100644 --- a/protocol-designer/src/components/ColorPicker/index.tsx +++ b/protocol-designer/src/components/ColorPicker/index.tsx @@ -12,10 +12,6 @@ interface ColorPickerProps { export function ColorPicker(props: ColorPickerProps): JSX.Element { const [showColorPicker, setShowColorPicker] = React.useState(false) - React.useEffect(() => { - console.log(props.value) - }, [props.value]) - return (
( - props.displayColor || '#000' - ) - return ( { saveForm({ name: values.name, - displayColor: currentColor, + displayColor: values.displayColor, description: values.description || null, serialize: values.serialize || false, }) @@ -76,6 +78,7 @@ export function LiquidEditForm(props: Props): JSX.Element { handleChange, handleBlur, handleSubmit, + setFieldValue, dirty, errors, isValid, @@ -112,9 +115,13 @@ export function LiquidEditForm(props: Props): JSX.Element { /> - { + setFieldValue('displayColor', color) + }} />
diff --git a/protocol-designer/src/components/LiquidsSidebar/index.tsx b/protocol-designer/src/components/LiquidsSidebar/index.tsx index 83a5e459e5c..65cbef45675 100644 --- a/protocol-designer/src/components/LiquidsSidebar/index.tsx +++ b/protocol-designer/src/components/LiquidsSidebar/index.tsx @@ -27,13 +27,15 @@ function LiquidsSidebarComponent(props: Props): JSX.Element { const { liquids, selectedLiquid, createNewLiquid, selectLiquid } = props return ( - {liquids.map(({ ingredientId, name }) => ( + {liquids.map(({ ingredientId, name, displayColor }) => ( selectLiquid(ingredientId)} iconName="circle" - iconProps={{ style: { fill: swatchColors(ingredientId) } }} + iconProps={{ + style: { fill: displayColor ?? swatchColors(ingredientId) }, + }} title={name || `Unnamed Ingredient ${ingredientId}`} // fallback, should not happen /> ))} diff --git a/protocol-designer/src/components/swatchColors.ts b/protocol-designer/src/components/swatchColors.ts index 386a5c54c97..eb1945cf129 100644 --- a/protocol-designer/src/components/swatchColors.ts +++ b/protocol-designer/src/components/swatchColors.ts @@ -1,20 +1,6 @@ import { AIR } from '@opentrons/step-generation' import { COLORS } from '@opentrons/components' -export const MIXED_WELL_COLOR = '#9b9b9b' // NOTE: matches `--c-med-gray` in colors.css - -// TODO factor into CSS or constants or elsewhere -export const colors = [ - COLORS.electricPurple, - COLORS.goldenYellow, - COLORS.aquamarine, - COLORS.orangePeel, - COLORS.skyBlue, - COLORS.popPink, - COLORS.richBlue, - COLORS.springGreen, - COLORS.tartRed, - COLORS.whaleGrey, -] +export const MIXED_WELL_COLOR = '#9b9b9b' // NOTE: matches `--c-med-gray` in COLORS.liquidColors.css export const swatchColors = (ingredGroupId: string): string => { const num = Number(ingredGroupId) @@ -29,5 +15,5 @@ export const swatchColors = (ingredGroupId: string): string => { return 'transparent' } - return colors[num % colors.length] + return COLORS.liquidColors[num % COLORS.liquidColors.length] } diff --git a/protocol-designer/src/labware-ingred/selectors.ts b/protocol-designer/src/labware-ingred/selectors.ts index feceb5f66fc..0271c535da5 100644 --- a/protocol-designer/src/labware-ingred/selectors.ts +++ b/protocol-designer/src/labware-ingred/selectors.ts @@ -5,6 +5,7 @@ import max from 'lodash/max' import reduce from 'lodash/reduce' import { Options } from '@opentrons/components' import { LabwareLiquidState } from '@opentrons/step-generation' +// import { swatchColors } from '../components/swatchColors' import { RootState, ContainersState, @@ -105,12 +106,13 @@ const allIngredientGroupFields: Selector< const allIngredientNamesIds: Selector< RootSlice, OrderedLiquids -> = createSelector(getLiquidGroupsById, ingreds => - Object.keys(ingreds).map(ingredId => ({ +> = createSelector(getLiquidGroupsById, ingreds => { + return Object.keys(ingreds).map(ingredId => ({ ingredientId: ingredId, name: ingreds[ingredId].name, + displayColor: ingreds[ingredId].displayColor, })) -) +}) const getLabwareSelectionMode: Selector = createSelector( rootSelector, rootState => { diff --git a/protocol-designer/src/labware-ingred/types.ts b/protocol-designer/src/labware-ingred/types.ts index 61f9b722090..f5997158e32 100644 --- a/protocol-designer/src/labware-ingred/types.ts +++ b/protocol-designer/src/labware-ingred/types.ts @@ -28,7 +28,7 @@ export interface WellContentsByLabware { export type OrderedLiquids = Array<{ ingredientId: string name: string | null | undefined - displayColor: string + displayColor: string | null | undefined }> // TODO: Ian 2018-10-15 audit & rename these confusing types export interface LiquidGroup { From f33ff399fcd88143c57a7c3c8004ea5bd3480cac Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Thu, 30 Jun 2022 01:59:59 -0400 Subject: [PATCH 06/14] feat(protocol-designer): add custom liquid color picker This PR adds a custom liquid color picker and field to the liquids page in Protocol Designer. closes #10573, closes #10601 --- .../src/components/ColorPicker/ColorPicker.css | 7 ++++--- .../src/components/ColorPicker/index.tsx | 6 +++--- .../src/components/IngredientsList/index.tsx | 8 +++++--- .../src/components/LiquidsPage/LiquidEditForm.tsx | 8 ++++---- protocol-designer/src/components/forms/forms.css | 15 +++++++++++++-- .../src/file-data/selectors/fileCreator.ts | 3 +-- protocol-designer/src/localization/en/form.json | 1 + 7 files changed, 31 insertions(+), 17 deletions(-) diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css index 8d46c153004..36fef55d50c 100644 --- a/protocol-designer/src/components/ColorPicker/ColorPicker.css +++ b/protocol-designer/src/components/ColorPicker/ColorPicker.css @@ -1,6 +1,7 @@ .swatch { display: inline-block; cursor: pointer; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.41); } .color { @@ -10,14 +11,14 @@ } .popover { - margin-top: 10px; - padding-right: 100px; + margin-top: 15px; position: absolute; + right: 24px; } .cover { position: fixed; - top: 0px; + top: 10px; right: 0px; bottom: 0px; left: 0px; diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx index ab4c06b8fb5..16504f537f4 100644 --- a/protocol-designer/src/components/ColorPicker/index.tsx +++ b/protocol-designer/src/components/ColorPicker/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { ColorResult, TwitterPicker } from 'react-color' -import { colors } from '../swatchColors' +import { COLORS } from '@opentrons/components' import styles from './ColorPicker.css' @@ -32,13 +32,13 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element { onClick={() => setShowColorPicker(false)} /> { props.onChange(color.hex) setShowColorPicker(showColorPicker => !showColorPicker) }} - triangle="top-left" + triangle="top-right" />
) : null} diff --git a/protocol-designer/src/components/IngredientsList/index.tsx b/protocol-designer/src/components/IngredientsList/index.tsx index 61e30b02f35..8c8b1b99ed1 100644 --- a/protocol-designer/src/components/IngredientsList/index.tsx +++ b/protocol-designer/src/components/IngredientsList/index.tsx @@ -1,12 +1,12 @@ // TODO: Ian 2018-10-09 figure out what belongs in LiquidsSidebar vs IngredientsList after #2427 import * as React from 'react' - +import { useSelector } from 'react-redux' +import { selectors } from '../../labware-ingred/selectors' import { IconButton, SidePanel } from '@opentrons/components' import { sortWells } from '@opentrons/shared-data' import { i18n } from '../../localization' import { PDTitledList, PDListItem } from '../lists' import { TitledListNotes } from '../TitledListNotes' -import { swatchColors } from '../swatchColors' import { LabwareDetailsCard } from './LabwareDetailsCard' import styles from './IngredientsList.css' import { LiquidGroupsById, LiquidGroup } from '../../labware-ingred/types' @@ -48,6 +48,8 @@ const LiquidGroupCard = (props: LiquidGroupCardProps): JSX.Element | null => { .sort(sortWells) .filter(well => labwareWellContents[well][groupId]) + const liquidGroups = useSelector(selectors.getLiquidGroupsById) + if (wellsWithIngred.length < 1) { // do not show liquid card if it has no instances for this labware return null @@ -56,7 +58,7 @@ const LiquidGroupCard = (props: LiquidGroupCardProps): JSX.Element | null => { return ( {i18n.t('form.liquid_edit.details')}
-
+
- + = createSelector( [liquidId]: { displayName: liquidData.name, description: liquidData.description ?? '', - displayColor: swatchColors(liquidId), + displayColor: liquidData.displayColor, }, } }, diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json index 8549d16ec49..694756b34db 100644 --- a/protocol-designer/src/localization/en/form.json +++ b/protocol-designer/src/localization/en/form.json @@ -15,6 +15,7 @@ "liquid_edit": { "details": "Details", "description": "Description", + "displayColor": "Color", "name": "Liquid name", "serialize": "Serialize", "serialize_title": "Serialization", From 63498bf0b25cee487a28f04b569c50d33232b87a Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Thu, 30 Jun 2022 12:20:42 -0400 Subject: [PATCH 07/14] fix types --- .../src/labware-ingred/__tests__/ingredients.test.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/protocol-designer/src/labware-ingred/__tests__/ingredients.test.ts b/protocol-designer/src/labware-ingred/__tests__/ingredients.test.ts index 2181ee86edc..0059a3bc473 100644 --- a/protocol-designer/src/labware-ingred/__tests__/ingredients.test.ts +++ b/protocol-designer/src/labware-ingred/__tests__/ingredients.test.ts @@ -18,6 +18,7 @@ describe('DUPLICATE_LABWARE action', () => { wellDetailsByLocation: null, concentration: '50 mol/ng', description: '', + displayColor: '#b925ff', serialize: false, }, ingred4: { @@ -25,6 +26,7 @@ describe('DUPLICATE_LABWARE action', () => { wellDetailsByLocation: null, concentration: '100%', description: '', + displayColor: '#ffd600', serialize: false, }, } From bd4a4d5a8a55776a330eabfe01bfba7e8e35cc4e Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Fri, 1 Jul 2022 11:36:54 -0400 Subject: [PATCH 08/14] fix css lint errors --- .../src/components/ColorPicker/ColorPicker.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css index 36fef55d50c..599b3b6dd8f 100644 --- a/protocol-designer/src/components/ColorPicker/ColorPicker.css +++ b/protocol-designer/src/components/ColorPicker/ColorPicker.css @@ -1,7 +1,7 @@ .swatch { display: inline-block; cursor: pointer; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.41); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.41); } .color { @@ -19,7 +19,7 @@ .cover { position: fixed; top: 10px; - right: 0px; - bottom: 0px; - left: 0px; + right: 0; + bottom: 0; + left: 0; } From 88f95ce795b6e75118f6becd42b2925c2ae047ab Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Tue, 5 Jul 2022 18:02:18 -0400 Subject: [PATCH 09/14] create selector and refactor color sources --- .../src/components/DeckSetup/LabwareOnDeck.tsx | 8 +++++++- .../src/components/IngredientsList/index.tsx | 4 ++-- .../src/components/LiquidPlacementModal.tsx | 10 ++++++++-- .../WellSelectionField/WellSelectionModal.tsx | 6 +++++- .../src/components/labware/BrowsableLabware.tsx | 5 ++++- protocol-designer/src/components/labware/utils.ts | 15 +++++++++++---- .../src/components/steplist/IngredPill.tsx | 7 ++++++- .../src/file-data/selectors/fileCreator.ts | 3 ++- protocol-designer/src/labware-ingred/selectors.ts | 9 +++++++++ 9 files changed, 54 insertions(+), 13 deletions(-) diff --git a/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx b/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx index e9c8eae01ac..390346793b4 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOnDeck.tsx @@ -2,6 +2,7 @@ import * as React from 'react' import { connect } from 'react-redux' import { LabwareRender, WellGroup } from '@opentrons/components' +import { selectors } from '../../labware-ingred/selectors' import * as wellContentsSelectors from '../../top-selectors/well-contents' import * as highlightSelectors from '../../top-selectors/substep-highlight' import * as tipContentsSelectors from '../../top-selectors/tip-contents' @@ -19,6 +20,7 @@ interface OP { interface SP { wellContents: ContentsByWell + liquidDisplayColors: string[] missingTips?: WellGroup | null highlightedWells?: WellGroup | null } @@ -32,7 +34,10 @@ const LabwareOnDeckComponent = (props: Props): JSX.Element => ( > @@ -60,6 +65,7 @@ const mapStateToProps = (state: BaseState, ownProps: OP): SP => { missingTips: missingTipsByLabwareId ? missingTipsByLabwareId[labwareOnDeck.id] : null, + liquidDisplayColors: selectors.getLiquidDisplayColors(state), } } diff --git a/protocol-designer/src/components/IngredientsList/index.tsx b/protocol-designer/src/components/IngredientsList/index.tsx index 8c8b1b99ed1..d64feb99923 100644 --- a/protocol-designer/src/components/IngredientsList/index.tsx +++ b/protocol-designer/src/components/IngredientsList/index.tsx @@ -48,7 +48,7 @@ const LiquidGroupCard = (props: LiquidGroupCardProps): JSX.Element | null => { .sort(sortWells) .filter(well => labwareWellContents[well][groupId]) - const liquidGroups = useSelector(selectors.getLiquidGroupsById) + const liquidDisplayColors = useSelector(selectors.getLiquidDisplayColors) if (wellsWithIngred.length < 1) { // do not show liquid card if it has no instances for this labware @@ -58,7 +58,7 @@ const LiquidGroupCard = (props: LiquidGroupCardProps): JSX.Element | null => { return ( { } render(): JSX.Element { - const { labwareDef, selectedWells } = this.props + const { labwareDef, selectedWells, liquidDisplayColors } = this.props return (
{ wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE, definition: labwareDef, highlightedWells: this.state.highlightedWells, - wellFill: wellFillFromWellContents(this.props.wellContents), + wellFill: wellFillFromWellContents( + this.props.wellContents, + liquidDisplayColors + ), }} selectedPrimaryWells={selectedWells} selectWells={this.props.selectWells} @@ -103,6 +107,7 @@ const mapStateToProps = (state: BaseState): SP => { wellContents: null, labwareDef: null, liquidNamesById: {}, + liquidDisplayColors: [], } } @@ -119,6 +124,7 @@ const mapStateToProps = (state: BaseState): SP => { wellContents, labwareDef, liquidNamesById: selectors.getLiquidNamesById(state), + liquidDisplayColors: selectors.getLiquidDisplayColors(state), } } diff --git a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx index 9ee1c209307..74ccc23e29d 100644 --- a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx +++ b/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx @@ -70,6 +70,7 @@ const WellSelectionModalComponent = ( wellContents, updateHighlightedWells, } = props + const liquidDisplayColors = useSelector(selectors.getLiquidDisplayColors) return ( { +const ingredIdsToColor = ( + groupIds: string[], + displayColors: string[] +): string | null | undefined => { const filteredIngredIds = groupIds.filter(id => id !== AIR) if (filteredIngredIds.length === 0) return null if (filteredIngredIds.length === 1) { - return swatchColors(filteredIngredIds[0]) + return ( + displayColors[Number(filteredIngredIds[0])] ?? + swatchColors(filteredIngredIds[0]) + ) } return MIXED_WELL_COLOR } export const wellFillFromWellContents = ( - wellContents: ContentsByWell + wellContents: ContentsByWell, + displayColors: string[] ): WellFill => reduce( wellContents, (acc: WellFill, wellContents: WellContents, wellName: string) => { - const wellFill = ingredIdsToColor(wellContents.groupIds) + const wellFill = ingredIdsToColor(wellContents.groupIds, displayColors) return wellFill ? { ...acc, [wellName]: wellFill } : acc }, {} diff --git a/protocol-designer/src/components/steplist/IngredPill.tsx b/protocol-designer/src/components/steplist/IngredPill.tsx index 887b47e1d25..6ed6ca255c5 100644 --- a/protocol-designer/src/components/steplist/IngredPill.tsx +++ b/protocol-designer/src/components/steplist/IngredPill.tsx @@ -1,5 +1,7 @@ import * as React from 'react' +import { useSelector } from 'react-redux' import { Pill, UseHoverTooltipTargetProps } from '@opentrons/components' +import { selectors } from '../../labware-ingred/selectors' import { AIR } from '@opentrons/step-generation' import { swatchColors, MIXED_WELL_COLOR } from '../swatchColors' import { WellIngredientVolumeData, WellIngredientNames } from '../../steplist' @@ -14,6 +16,7 @@ interface Props { export function IngredPill(props: Props): JSX.Element { const { ingredNames, targetProps } = props const ingredIds: string[] = Object.keys(props.ingreds) + const liquidDisplayColors = useSelector(selectors.getLiquidDisplayColors) if (ingredIds.filter(id => id !== AIR).length === 0) { // Invisible Pill, but has correct height/margin/etc for spacing @@ -21,7 +24,9 @@ export function IngredPill(props: Props): JSX.Element { } const color = - ingredIds.length === 1 ? swatchColors(ingredIds[0]) : MIXED_WELL_COLOR + ingredIds.length === 1 + ? liquidDisplayColors[Number(ingredIds[0])] ?? swatchColors(ingredIds[0]) + : MIXED_WELL_COLOR return ( = createSelector( [liquidId]: { displayName: liquidData.name, description: liquidData.description ?? '', - displayColor: liquidData.displayColor, + displayColor: liquidData.displayColor ?? swatchColors(liquidId), }, } }, diff --git a/protocol-designer/src/labware-ingred/selectors.ts b/protocol-designer/src/labware-ingred/selectors.ts index 0271c535da5..c25343555f5 100644 --- a/protocol-designer/src/labware-ingred/selectors.ts +++ b/protocol-designer/src/labware-ingred/selectors.ts @@ -149,6 +149,14 @@ const getDeckHasLiquid: Selector = createSelector( getLiquidGroupsOnDeck, liquidGroups => liquidGroups.length > 0 ) +const getLiquidDisplayColors: Selector = createSelector( + getLiquidGroupsById, + liquids => + Object.values(liquids).reduce((acc, curr) => { + acc.push(curr.displayColor) + return acc + }, []) +) // TODO: prune selectors export const selectors = { rootSelector, @@ -168,4 +176,5 @@ export const selectors = { allIngredientNamesIds, selectedAddLabwareSlot, getDeckHasLiquid, + getLiquidDisplayColors, } From 3696d8197c006becfac9becb32b0c11c17a812d4 Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Wed, 6 Jul 2022 02:38:34 -0400 Subject: [PATCH 10/14] fix e2e migrations test --- .../protocol/6/doItAllV3MigratedToV6.json | 16 +++++++------- .../protocol/6/doItAllV4MigratedToV6.json | 20 ++++++++--------- .../6/example_1_1_0MigratedFromV1_0_0.json | 22 +++++++++---------- ...andfatheredProtocolMigratedFromV1_0_0.json | 20 ++++++++--------- .../src/components/IngredientsList/index.tsx | 7 +++++- .../src/components/steplist/SubstepRow.tsx | 9 +++++++- 6 files changed, 53 insertions(+), 41 deletions(-) diff --git a/protocol-designer/fixtures/protocol/6/doItAllV3MigratedToV6.json b/protocol-designer/fixtures/protocol/6/doItAllV3MigratedToV6.json index 26bb0f9fa8e..d214aea56a8 100644 --- a/protocol-designer/fixtures/protocol/6/doItAllV3MigratedToV6.json +++ b/protocol-designer/fixtures/protocol/6/doItAllV3MigratedToV6.json @@ -4,7 +4,7 @@ "author": "Fixture", "description": "Test all v3 commands", "created": 1585930833548, - "lastModified": 1655820379385, + "lastModified": 1657087816127, "category": null, "subcategory": null, "tags": [] @@ -13,7 +13,7 @@ "name": "opentrons/protocol-designer", "version": "6.0.0", "data": { - "_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT", + "_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT", "defaultValues": { "aspirate_mmFromBottom": 1, "dispense_mmFromBottom": 0.5, @@ -201,7 +201,7 @@ "0": { "displayName": "Water", "description": "", - "displayColor": "#00d781" + "displayColor": "#b925ff" } }, "labwareDefinitions": { @@ -2575,7 +2575,7 @@ "modules": {}, "commands": [ { - "key": "52c17e90-f16b-11ec-b2e1-61739b3f8d1d", + "key": "4dec74f0-fcf2-11ec-bdbe-d1c437dcce8c", "commandType": "loadPipette", "params": { "pipetteId": "0b3f2210-75c7-11ea-b42f-4b64e50f43e5", @@ -2583,7 +2583,7 @@ } }, { - "key": "52c1a5a0-f16b-11ec-b2e1-61739b3f8d1d", + "key": "4dec74f1-fcf2-11ec-bdbe-d1c437dcce8c", "commandType": "loadLabware", "params": { "labwareId": "0b44c760-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_96_tiprack_300ul/1", @@ -2591,7 +2591,7 @@ } }, { - "key": "52c1a5a1-f16b-11ec-b2e1-61739b3f8d1d", + "key": "4dec74f2-fcf2-11ec-bdbe-d1c437dcce8c", "commandType": "loadLabware", "params": { "labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1", @@ -2599,7 +2599,7 @@ } }, { - "key": "52c1a5a2-f16b-11ec-b2e1-61739b3f8d1d", + "key": "4dec74f3-fcf2-11ec-bdbe-d1c437dcce8c", "commandType": "loadLabware", "params": { "labwareId": "21ed8f60-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_24_aluminumblock_generic_2ml_screwcap/1", @@ -2608,7 +2608,7 @@ }, { "commandType": "loadLiquid", - "key": "52c1a5a3-f16b-11ec-b2e1-61739b3f8d1d", + "key": "4dec74f4-fcf2-11ec-bdbe-d1c437dcce8c", "params": { "liquidId": "0", "labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1", diff --git a/protocol-designer/fixtures/protocol/6/doItAllV4MigratedToV6.json b/protocol-designer/fixtures/protocol/6/doItAllV4MigratedToV6.json index bbbe40d0d95..d76f55dec1d 100644 --- a/protocol-designer/fixtures/protocol/6/doItAllV4MigratedToV6.json +++ b/protocol-designer/fixtures/protocol/6/doItAllV4MigratedToV6.json @@ -4,7 +4,7 @@ "author": "Fixture", "description": "Test all v4 commands", "created": 1585930833548, - "lastModified": 1655834370844, + "lastModified": 1657088139159, "category": null, "subcategory": null, "tags": [] @@ -13,7 +13,7 @@ "name": "opentrons/protocol-designer", "version": "6.0.0", "data": { - "_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT", + "_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT", "defaultValues": { "aspirate_mmFromBottom": 1, "dispense_mmFromBottom": 0.5, @@ -232,7 +232,7 @@ "0": { "displayName": "Water", "description": "", - "displayColor": "#00d781" + "displayColor": "#b925ff" } }, "labwareDefinitions": { @@ -2613,7 +2613,7 @@ }, "commands": [ { - "key": "e650b5c0-f18b-11ec-8c85-d1e531238b7c", + "key": "0e773a70-fcf3-11ec-b56d-7d2b57b14b6d", "commandType": "loadPipette", "params": { "pipetteId": "0b3f2210-75c7-11ea-b42f-4b64e50f43e5", @@ -2621,7 +2621,7 @@ } }, { - "key": "e650dcd4-f18b-11ec-8c85-d1e531238b7c", + "key": "0e776183-fcf3-11ec-b56d-7d2b57b14b6d", "commandType": "loadModule", "params": { "moduleId": "0b419310-75c7-11ea-b42f-4b64e50f43e5:magneticModuleType", @@ -2629,7 +2629,7 @@ } }, { - "key": "e650dcd5-f18b-11ec-8c85-d1e531238b7c", + "key": "0e776184-fcf3-11ec-b56d-7d2b57b14b6d", "commandType": "loadModule", "params": { "moduleId": "0b4319b0-75c7-11ea-b42f-4b64e50f43e5:temperatureModuleType", @@ -2637,7 +2637,7 @@ } }, { - "key": "e650dcd0-f18b-11ec-8c85-d1e531238b7c", + "key": "0e773a71-fcf3-11ec-b56d-7d2b57b14b6d", "commandType": "loadLabware", "params": { "labwareId": "0b44c760-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_96_tiprack_300ul/1", @@ -2645,7 +2645,7 @@ } }, { - "key": "e650dcd1-f18b-11ec-8c85-d1e531238b7c", + "key": "0e776180-fcf3-11ec-b56d-7d2b57b14b6d", "commandType": "loadLabware", "params": { "labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1", @@ -2655,7 +2655,7 @@ } }, { - "key": "e650dcd2-f18b-11ec-8c85-d1e531238b7c", + "key": "0e776181-fcf3-11ec-b56d-7d2b57b14b6d", "commandType": "loadLabware", "params": { "labwareId": "21ed8f60-75c7-11ea-b42f-4b64e50f43e5:opentrons/opentrons_24_aluminumblock_generic_2ml_screwcap/1", @@ -2666,7 +2666,7 @@ }, { "commandType": "loadLiquid", - "key": "e650dcd3-f18b-11ec-8c85-d1e531238b7c", + "key": "0e776182-fcf3-11ec-b56d-7d2b57b14b6d", "params": { "liquidId": "0", "labwareId": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1", diff --git a/protocol-designer/fixtures/protocol/6/example_1_1_0MigratedFromV1_0_0.json b/protocol-designer/fixtures/protocol/6/example_1_1_0MigratedFromV1_0_0.json index e1a1c572de5..ee7ef067d1e 100644 --- a/protocol-designer/fixtures/protocol/6/example_1_1_0MigratedFromV1_0_0.json +++ b/protocol-designer/fixtures/protocol/6/example_1_1_0MigratedFromV1_0_0.json @@ -4,7 +4,7 @@ "author": "Author name", "description": "Description here", "created": 1560957631666, - "lastModified": 1655834013312, + "lastModified": 1657087289027, "category": null, "subcategory": null, "tags": [] @@ -13,7 +13,7 @@ "name": "opentrons/protocol-designer", "version": "6.0.0", "data": { - "_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT", + "_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT", "defaultValues": { "aspirate_mmFromBottom": 1, "dispense_mmFromBottom": 0.5, @@ -198,9 +198,9 @@ "0": { "displayName": "samples", "description": "", - "displayColor": "#00d781" + "displayColor": "#b925ff" }, - "1": { "displayName": "dna", "description": "", "displayColor": "#0076ff" } + "1": { "displayName": "dna", "description": "", "displayColor": "#ffd600" } }, "labwareDefinitions": { "opentrons/opentrons_96_tiprack_10ul/1": { @@ -3390,7 +3390,7 @@ "modules": {}, "commands": [ { - "key": "1135cf10-f18b-11ec-8c85-d1e531238b7c", + "key": "13bf6130-fcf1-11ec-9196-697464e70343", "commandType": "loadPipette", "params": { "pipetteId": "c6f45030-92a5-11e9-ac62-1b173f839d9e", @@ -3398,7 +3398,7 @@ } }, { - "key": "1135cf11-f18b-11ec-8c85-d1e531238b7c", + "key": "13bf6131-fcf1-11ec-9196-697464e70343", "commandType": "loadPipette", "params": { "pipetteId": "c6f47740-92a5-11e9-ac62-1b173f839d9e", @@ -3406,7 +3406,7 @@ } }, { - "key": "1135cf12-f18b-11ec-8c85-d1e531238b7c", + "key": "13bf6132-fcf1-11ec-9196-697464e70343", "commandType": "loadLabware", "params": { "labwareId": "c6f4ec70-92a5-11e9-ac62-1b173f839d9e:tiprack-10ul", @@ -3414,7 +3414,7 @@ } }, { - "key": "1135cf13-f18b-11ec-8c85-d1e531238b7c", + "key": "13bf6133-fcf1-11ec-9196-697464e70343", "commandType": "loadLabware", "params": { "labwareId": "c6f51380-92a5-11e9-ac62-1b173f839d9e:tiprack-200ul", @@ -3422,7 +3422,7 @@ } }, { - "key": "1135cf14-f18b-11ec-8c85-d1e531238b7c", + "key": "13bf6134-fcf1-11ec-9196-697464e70343", "commandType": "loadLabware", "params": { "labwareId": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well", @@ -3431,7 +3431,7 @@ }, { "commandType": "loadLiquid", - "key": "1135cf16-f18b-11ec-8c85-d1e531238b7c", + "key": "13bf8840-fcf1-11ec-9196-697464e70343", "params": { "liquidId": "1", "labwareId": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well", @@ -3440,7 +3440,7 @@ }, { "commandType": "loadLiquid", - "key": "1135cf15-f18b-11ec-8c85-d1e531238b7c", + "key": "13bf6135-fcf1-11ec-9196-697464e70343", "params": { "liquidId": "0", "labwareId": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well", diff --git a/protocol-designer/fixtures/protocol/6/preFlexGrandfatheredProtocolMigratedFromV1_0_0.json b/protocol-designer/fixtures/protocol/6/preFlexGrandfatheredProtocolMigratedFromV1_0_0.json index 82a4ab80da8..ad631b1cb21 100644 --- a/protocol-designer/fixtures/protocol/6/preFlexGrandfatheredProtocolMigratedFromV1_0_0.json +++ b/protocol-designer/fixtures/protocol/6/preFlexGrandfatheredProtocolMigratedFromV1_0_0.json @@ -4,7 +4,7 @@ "author": "", "description": "", "created": 1547476685921, - "lastModified": 1655819704279, + "lastModified": 1657085442366, "category": null, "subcategory": null, "tags": [] @@ -13,7 +13,7 @@ "name": "opentrons/protocol-designer", "version": "6.0.0", "data": { - "_internalAppBuildDate": "Fri, 17 Jun 2022 19:27:17 GMT", + "_internalAppBuildDate": "Fri, 01 Jul 2022 16:41:32 GMT", "defaultValues": { "aspirate_mmFromBottom": 1, "dispense_mmFromBottom": 0.5, @@ -1826,7 +1826,7 @@ "0": { "displayName": "Liquid", "description": "", - "displayColor": "#00d781" + "displayColor": "#b925ff" } }, "labwareDefinitions": { @@ -4123,7 +4123,7 @@ "modules": {}, "commands": [ { - "key": "c05c7e70-f169-11ec-b2e1-61739b3f8d1d", + "key": "c70d6cf0-fcec-11ec-bd0d-5dfbc21e644d", "commandType": "loadPipette", "params": { "pipetteId": "01217420-180a-11e9-9608-8bed9be8868f", @@ -4131,7 +4131,7 @@ } }, { - "key": "c05c7e71-f169-11ec-b2e1-61739b3f8d1d", + "key": "c70d6cf1-fcec-11ec-bd0d-5dfbc21e644d", "commandType": "loadPipette", "params": { "pipetteId": "01217421-180a-11e9-9608-8bed9be8868f", @@ -4139,7 +4139,7 @@ } }, { - "key": "c05c7e72-f169-11ec-b2e1-61739b3f8d1d", + "key": "c70d6cf2-fcec-11ec-bd0d-5dfbc21e644d", "commandType": "loadLabware", "params": { "labwareId": "0121e950-180a-11e9-9608-8bed9be8868f:tiprack-10ul", @@ -4147,7 +4147,7 @@ } }, { - "key": "c05c7e73-f169-11ec-b2e1-61739b3f8d1d", + "key": "c70d6cf3-fcec-11ec-bd0d-5dfbc21e644d", "commandType": "loadLabware", "params": { "labwareId": "0bc091e0-180a-11e9-9608-8bed9be8868f:trough-12row", @@ -4155,7 +4155,7 @@ } }, { - "key": "c05c7e74-f169-11ec-b2e1-61739b3f8d1d", + "key": "c70d6cf4-fcec-11ec-bd0d-5dfbc21e644d", "commandType": "loadLabware", "params": { "labwareId": "3c1a31c0-180a-11e9-9608-8bed9be8868f:96-flat", @@ -4163,7 +4163,7 @@ } }, { - "key": "c05c7e75-f169-11ec-b2e1-61739b3f8d1d", + "key": "c70d6cf5-fcec-11ec-bd0d-5dfbc21e644d", "commandType": "loadLabware", "params": { "labwareId": "cea1c650-1811-11e9-9608-8bed9be8868f", @@ -4172,7 +4172,7 @@ }, { "commandType": "loadLiquid", - "key": "c05ca580-f169-11ec-b2e1-61739b3f8d1d", + "key": "c70d9400-fcec-11ec-bd0d-5dfbc21e644d", "params": { "liquidId": "0", "labwareId": "0bc091e0-180a-11e9-9608-8bed9be8868f:trough-12row", diff --git a/protocol-designer/src/components/IngredientsList/index.tsx b/protocol-designer/src/components/IngredientsList/index.tsx index d64feb99923..bf6fb583a37 100644 --- a/protocol-designer/src/components/IngredientsList/index.tsx +++ b/protocol-designer/src/components/IngredientsList/index.tsx @@ -7,6 +7,7 @@ import { sortWells } from '@opentrons/shared-data' import { i18n } from '../../localization' import { PDTitledList, PDListItem } from '../lists' import { TitledListNotes } from '../TitledListNotes' +import { swatchColors } from '../swatchColors' import { LabwareDetailsCard } from './LabwareDetailsCard' import styles from './IngredientsList.css' import { LiquidGroupsById, LiquidGroup } from '../../labware-ingred/types' @@ -58,7 +59,11 @@ const LiquidGroupCard = (props: LiquidGroupCardProps): JSX.Element | null => { return ( { + const liquidDisplayColors = useSelector(selectors.getLiquidDisplayColors) const totalLiquidVolume = reduce( props.ingreds, // @ts-expect-error(sa, 2021-6-20): TODO IMMEDIATELY, this could either be single channel OR multi channel volume data @@ -53,7 +56,11 @@ export const PillTooltipContents = (
From fadf4bb24c486966fdc133b2007902355418d547 Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Wed, 6 Jul 2022 14:37:06 -0400 Subject: [PATCH 11/14] add hover effect for swatch --- protocol-designer/src/components/ColorPicker/ColorPicker.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css index 599b3b6dd8f..f4b4f28c75f 100644 --- a/protocol-designer/src/components/ColorPicker/ColorPicker.css +++ b/protocol-designer/src/components/ColorPicker/ColorPicker.css @@ -1,6 +1,9 @@ .swatch { display: inline-block; cursor: pointer; +} + +.swatch:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.41); } From 4253621529e75a013e05ff7f9c8c0bc55f6efc2d Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Wed, 6 Jul 2022 14:43:30 -0400 Subject: [PATCH 12/14] remove comment --- protocol-designer/src/labware-ingred/selectors.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/protocol-designer/src/labware-ingred/selectors.ts b/protocol-designer/src/labware-ingred/selectors.ts index c25343555f5..8238026c0db 100644 --- a/protocol-designer/src/labware-ingred/selectors.ts +++ b/protocol-designer/src/labware-ingred/selectors.ts @@ -5,7 +5,6 @@ import max from 'lodash/max' import reduce from 'lodash/reduce' import { Options } from '@opentrons/components' import { LabwareLiquidState } from '@opentrons/step-generation' -// import { swatchColors } from '../components/swatchColors' import { RootState, ContainersState, From 3349f64e7273814062876d19052aaa07fdb5cc1a Mon Sep 17 00:00:00 2001 From: Sakib Hossain Date: Mon, 11 Jul 2022 08:59:27 -0400 Subject: [PATCH 13/14] add boxShadow when active --- protocol-designer/src/components/ColorPicker/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx index 16504f537f4..e63112ca3c7 100644 --- a/protocol-designer/src/components/ColorPicker/index.tsx +++ b/protocol-designer/src/components/ColorPicker/index.tsx @@ -16,6 +16,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
setShowColorPicker(showColorPicker => !showColorPicker)} >
Date: Mon, 11 Jul 2022 14:06:00 -0400 Subject: [PATCH 14/14] refactor conditional styling --- .../src/components/ColorPicker/ColorPicker.css | 3 ++- protocol-designer/src/components/ColorPicker/index.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css index f4b4f28c75f..61e30efd289 100644 --- a/protocol-designer/src/components/ColorPicker/ColorPicker.css +++ b/protocol-designer/src/components/ColorPicker/ColorPicker.css @@ -3,7 +3,8 @@ cursor: pointer; } -.swatch:hover { +.swatch:hover, +.swatch_enabled { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.41); } diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx index e63112ca3c7..99b470ce2a8 100644 --- a/protocol-designer/src/components/ColorPicker/index.tsx +++ b/protocol-designer/src/components/ColorPicker/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import cx from 'classnames' import { ColorResult, TwitterPicker } from 'react-color' import { COLORS } from '@opentrons/components' @@ -15,10 +16,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element { return (
setShowColorPicker(showColorPicker => !showColorPicker)} >