From 2176de74c7a8bbb7fb39e86db1d9db265d60cb72 Mon Sep 17 00:00:00 2001
From: smb2268 <sarah.breen@opentrons.com>
Date: Wed, 29 Jun 2022 12:55:32 -0400
Subject: [PATCH] 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<boolean>(false)
 
-  React.useEffect(() => {
-    console.log(props.value)
-  }, [props.value])
-
   return (
     <div>
       <div
diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
index 063cf9f7297..b7e94e3f6ab 100644
--- a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
+++ b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react'
-import { Formik, FormikProps } from 'formik'
+import { useSelector } from 'react-redux'
+import { Field, Formik, FormikProps } from 'formik'
 import * as Yup from 'yup'
 import { i18n } from '../../localization'
+import { swatchColors } from '../swatchColors'
 import {
   Card,
   CheckboxField,
@@ -10,6 +12,7 @@ import {
   OutlineButton,
   PrimaryButton,
 } from '@opentrons/components'
+import { selectors } from '../../labware-ingred/selectors'
 import styles from './LiquidEditForm.css'
 import formStyles from '../forms/forms.css'
 
@@ -47,18 +50,17 @@ export const liquidEditFormSchema: Yup.Schema<
 
 export function LiquidEditForm(props: Props): JSX.Element {
   const { deleteLiquidGroup, cancelForm, canDelete, saveForm } = props
+  const selectedLiquid = useSelector(selectors.getSelectedLiquidGroupState)
+  const nextGroupId = useSelector(selectors.getNextLiquidGroupId)
+  const liquidId = selectedLiquid.liquidGroupId ?? nextGroupId
 
   const initialValues: LiquidEditFormValues = {
     name: props.name || '',
-    displayColor: props.displayColor || '',
+    displayColor: props.displayColor ?? swatchColors(liquidId),
     description: props.description || '',
     serialize: props.serialize || false,
   }
 
-  const [currentColor, setCurrentColor] = React.useState<ColorResult['hex']>(
-    props.displayColor || '#000'
-  )
-
   return (
     <Formik
       initialValues={initialValues}
@@ -66,7 +68,7 @@ export function LiquidEditForm(props: Props): JSX.Element {
       onSubmit={(values: LiquidEditFormValues) => {
         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 {
                   />
                 </FormGroup>
                 <FormGroup label={'Liquid'} className={formStyles.column_1_3}>
-                  <ColorPicker
-                    value={currentColor}
-                    onChange={setCurrentColor}
+                  <Field
+                    name="displayColor"
+                    component={ColorPicker}
+                    value={values.displayColor}
+                    onChange={(color: ColorResult['hex']) => {
+                      setFieldValue('displayColor', color)
+                    }}
                   />
                 </FormGroup>
               </div>
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 (
     <SidePanel title="Liquids">
-      {liquids.map(({ ingredientId, name }) => (
+      {liquids.map(({ ingredientId, name, displayColor }) => (
         <PDTitledList
           key={ingredientId}
           selected={selectedLiquid === ingredientId}
           onClick={() => 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<RootSlice, boolean> = 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 {