feat(protocol-designer): assorted form tweaks (#3260)

* add/update change tip, touch tip, & well order tooltips * shuffle advanced settings fields around
Opentrons · Mar 26, 2019 · a14fca9 · a14fca9
1 parent 9861463
commit a14fca9
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 54 deletions.
diff --git a/protocol-designer/src/components/StepEditForm/StepEditForm.css b/protocol-designer/src/components/StepEditForm/StepEditForm.css
@@ -58,8 +58,6 @@
   border: none;
   overflow: auto;
   outline: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
   box-shadow: none;
   resize: none;
 }

diff --git a/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js b/protocol-designer/src/components/StepEditForm/fields/ChangeTip/ChangeTip.js
@@ -18,11 +18,20 @@ const ChangeTipField = (props: Props) => {
   const {name, disabledOptions} = props
 
   const options = props.options.map((value) => {
-    const toolTip = i18n.t(`form.step_edit_form.field.change_tip.option_tooltip.${value}`)
+    const tooltip = (
+      <div className={styles.tooltip}>
+        {i18n.t(`form.step_edit_form.field.change_tip.option_tooltip.${value}`)}
+      </div>
+    )
+
     const option = i18n.t(`form.step_edit_form.field.change_tip.option.${value}`)
     const label = (
-      <HoverTooltip tooltipComponent={toolTip} positionFixed placement='top'>
-        {(hoverTooltipHandlers) => <div {...hoverTooltipHandlers}>{option}</div>}
+      <HoverTooltip
+        positionFixed
+        tooltipComponent={tooltip}
+        placement='bottom'
+        modifiers={{offset: {offset: `0, 18`}, preventOverflow: {boundariesElement: 'window'}}}
+      >{(hoverTooltipHandlers) => <div {...hoverTooltipHandlers}>{option}</div>}
       </HoverTooltip>
     )
     return {

diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js b/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js
@@ -49,7 +49,7 @@ class TipPositionInput extends React.Component<OP & SP, TipPositionInputState> {
     const isTouchTipField = getIsTouchTipField(this.props.fieldName)
 
     const Wrapper = ({children, hoverTooltipHandlers}) => isTouchTipField
-      ? <React.Fragment>{children}</React.Fragment>
+      ? <div {...hoverTooltipHandlers}>{children}</div>
       : <FormGroup
         label={i18n.t('form.step_edit_form.field.tip_position.label')}
         disabled={disabled}
@@ -82,7 +82,7 @@ class TipPositionInput extends React.Component<OP & SP, TipPositionInputState> {
               readOnly
               onClick={this.handleOpen}
               value={String(value)}
-              units="mm" />
+              units={i18n.t('application.units.millimeter')} />
           </Wrapper>
         )}
       </HoverTooltip>

diff --git a/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js b/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js
@@ -1,15 +1,18 @@
 // @flow
 import * as React from 'react'
 import {connect} from 'react-redux'
-import {FormGroup} from '@opentrons/components'
+import {HoverTooltip, FormGroup} from '@opentrons/components'
 import cx from 'classnames'
+import i18n from '../../../../localization'
 import {selectors as stepFormSelectors} from '../../../../step-forms'
-import styles from './WellOrderInput.css'
-import stepEditStyles from '../../StepEditForm.css'
-import WellOrderModal from './WellOrderModal'
 import ZIG_ZAG_IMAGE from '../../../../images/zig_zag_icon.svg'
+import WellOrderModal from './WellOrderModal'
+
 import type {BaseState} from '../../../../types'
 
+import stepEditStyles from '../../StepEditForm.css'
+import styles from './WellOrderInput.css'
+
 type OP = {
   className?: ?string,
   label?: string,
@@ -30,20 +33,26 @@ class WellOrderInput extends React.Component<OP & SP, WellOrderInputState> {
       [stepEditStyles.no_label]: !this.props.label,
     })
     return (
-      <FormGroup label={this.props.label} className={className}>
-        <WellOrderModal
-          prefix={this.props.prefix}
-          closeModal={this.handleClose}
-          isOpen={this.state.isModalOpen} />
-        <img
-          onClick={this.handleOpen}
-          src={ZIG_ZAG_IMAGE}
-          className={cx(
-            styles.well_order_icon,
-            {[styles.icon_with_label]: this.props.label},
-            ...this.props.iconClassNames,
-          )} />
-      </FormGroup>
+      <HoverTooltip tooltipComponent={i18n.t('form.step_edit_form.field.well_order.label')}>
+        {(hoverTooltipHandlers) =>
+          <div {...hoverTooltipHandlers}>
+            <FormGroup label={this.props.label} className={className}>
+              <WellOrderModal
+                prefix={this.props.prefix}
+                closeModal={this.handleClose}
+                isOpen={this.state.isModalOpen} />
+              <img
+                onClick={this.handleOpen}
+                src={ZIG_ZAG_IMAGE}
+                className={cx(
+                  styles.well_order_icon,
+                  {[styles.icon_with_label]: this.props.label},
+                  ...this.props.iconClassNames,
+                )} />
+            </FormGroup>
+          </div>
+        }
+      </HoverTooltip>
     )
   }
 }

diff --git a/protocol-designer/src/components/StepEditForm/forms/Mix.js b/protocol-designer/src/components/StepEditForm/forms/Mix.js
@@ -97,6 +97,7 @@ class MixForm extends React.Component<Props, State> {
               <CheckboxRowField
                 className={styles.small_field}
                 label={i18n.t('form.step_edit_form.field.touchTip.label')}
+                tooltipComponent={i18n.t('tooltip.step_fields.defaults.mix_touchTip_checkbox')}
                 name={'mix_touchTip_checkbox'}
               >
                 <TipPositionField fieldName={'mix_touchTip_mmFromBottom'} />

diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js
@@ -29,6 +29,24 @@ function SourceDestFields (props: Props) {
   const {className, focusHandlers, prefix} = props
   const addFieldNamePrefix = makeAddFieldNamePrefix(prefix)
 
+  const mixFields = (
+    <CheckboxRowField
+      name={addFieldNamePrefix('mix_checkbox')}
+      label={i18n.t('form.step_edit_form.field.mix.label')}
+      className={styles.small_field}>
+      <TextField
+        name={addFieldNamePrefix('mix_volume')}
+        units={i18n.t('application.units.microliter')}
+        className={styles.small_field}
+        {...focusHandlers} />
+      <TextField
+        name={addFieldNamePrefix('mix_times')}
+        units={i18n.t('application.units.times')}
+        className={styles.small_field}
+        {...focusHandlers} />
+    </CheckboxRowField>
+  )
+
   return (
     <div className={className}>
       <div className={styles.form_row}>
@@ -48,6 +66,7 @@ function SourceDestFields (props: Props) {
               label={i18n.t('form.step_edit_form.field.preWetTip.label')}
               className={styles.small_field}
             />
+            {mixFields}
             <CheckboxRowField
               disabled
               tooltipComponent={i18n.t('tooltip.not_in_beta')}
@@ -64,28 +83,18 @@ function SourceDestFields (props: Props) {
             </CheckboxRowField>
           </React.Fragment>
         }
+
+        {prefix === 'dispense' && mixFields}
+
         <CheckboxRowField
           name={addFieldNamePrefix('touchTip_checkbox')}
+          tooltipComponent={i18n.t(`tooltip.step_fields.defaults.${addFieldNamePrefix('touchTip_checkbox')}`)}
           label={i18n.t('form.step_edit_form.field.touchTip.label')}
           className={styles.small_field}
         >
           <TipPositionField fieldName={addFieldNamePrefix('touchTip_mmFromBottom')} />
         </CheckboxRowField>
-        <CheckboxRowField
-          name={addFieldNamePrefix('mix_checkbox')}
-          label={i18n.t('form.step_edit_form.field.mix.label')}
-          className={styles.small_field}>
-          <TextField
-            name={addFieldNamePrefix('mix_volume')}
-            units={i18n.t('application.units.microliter')}
-            className={styles.small_field}
-            {...focusHandlers} />
-          <TextField
-            name={addFieldNamePrefix('mix_times')}
-            units={i18n.t('application.units.times')}
-            className={styles.small_field}
-            {...focusHandlers} />
-        </CheckboxRowField>
+
         {prefix === 'dispense' &&
           <CheckboxRowField
             name='blowout_checkbox'

diff --git a/protocol-designer/src/components/StepEditForm/utils.js b/protocol-designer/src/components/StepEditForm/utils.js
@@ -71,11 +71,9 @@ export function getTooltipForField (stepType: ?string, name: string): ?React.Nod
     : name
 
   // specificity cascade for names.
-  // first level: try getting from step_fields.moveLiquid, fallback to step_fields.default
+  // first level: "disabled" wins out if disabled arg is true
   // second level: prefix. "aspirate_foo" wins over "foo"
   const text: string = i18n.t([
-    `tooltip.step_fields.${stepType}.${name}`,
-    `tooltip.step_fields.${stepType}.${nameWithoutPrefix}`,
     `tooltip.step_fields.defaults.${name}`,
     `tooltip.step_fields.defaults.${nameWithoutPrefix}`,
     '',

diff --git a/protocol-designer/src/localization/en/application.json b/protocol-designer/src/localization/en/application.json
@@ -5,6 +5,7 @@
     "pause": "pause"
   },
   "units": {
+    "millimeter": "mm",
     "microliter": "μL",
     "microliterPerSec": "μL/s",
     "times": "x",

diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json
@@ -44,24 +44,24 @@
       "change_tip": {
         "label": "change tip",
         "option": {
-          "always": "Always",
-          "once": "Once",
-          "perSource": "Per Source Well",
-          "perDest": "Per Destination Well",
+          "always": "Before every aspirate",
+          "once": "Once at the start of step",
+          "perSource": "Per source well",
+          "perDest": "Per destination well",
           "never": "Never"
         },
         "option_tooltip": {
-          "always": "Avoid contaminating both source & destination wells",
-          "once": "Only at start of step",
-          "perSource": "Avoid cross-contaminating source wells",
-          "perDest": "Avoid cross-contaminating destination wells",
-          "never": "Use same tip as last step"
+          "always": "Always aspirate with a fresh tip.",
+          "once": "Get one new tip to use for the whole step.",
+          "perSource": "Get a new tip when aspirating from a new source well. Keep tip for repeat aspirations from the same source well.",
+          "perDest": "Get a new tip when dispensing into a new destination well. Keep tip for repeat dispenses into the same destination well.",
+          "never": "Use same tip as the previous step."
         }
       },
       "tip_position": {"label": "tip position"},
       "volume": {"label": "volume"},
       "well_order": {
-        "label": "Well Order",
+        "label": "Well order",
         "option": {
           "l2r": "Left to right",
           "r2l": "Right to left",

diff --git a/protocol-designer/src/localization/en/tooltip.json b/protocol-designer/src/localization/en/tooltip.json
@@ -24,7 +24,10 @@
       "changeTip": "Choose when the robot picks up fresh tips",
       "preWetTip": "Pre-wet pipette tip by aspirating and dispensing 2/3 of the tip's max volume",
       "tipPosition": "Distance from the bottom of the well",
-      "touchTip_checkbox": "Touch tip to 4 sides of the well",
+
+      "aspirate_touchTip_checkbox": "Touch tip to each side of well after aspirating",
+      "dispense_touchTip_checkbox": "Touch tip to each side of well after dispensing",
+      "mix_touchTip_checkbox": "Touch tip to each side of the well after mixing",
 
       "volume": "Volume to dispense in each well"
     }