feat(protocol-designer, step-generation, components): pipette edit, m…

…oveLabware, ui changes (#12968)

closes RAUT-512 RAUT-519 RAUT-505 RAUT-509 RAUT-523

components/src/__tests__/__snapshots__/instrument-diagram.test.tsx.snap

@@ -126,11 +126,11 @@ exports[`InstrumentDiagram single-channel GEN3 renders correctly 1`] = `
 `;
 
 exports[`InstrumentGroup Renders correctly 1`] = `
-.c0 {
+.c2 {
   min-width: 0;
 }
 
-.c1 {
+.c3 {
   min-width: 0;
   -webkit-transform: scaleX(-1);
   -ms-transform: scaleX(-1);
@@ -139,14 +139,36 @@ exports[`InstrumentGroup Renders correctly 1`] = `
   filter: FlipH;
 }
 
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  grid-gap: 1rem;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
 <section
   className="pipette_group"
 >
   <div
-    className="pipette left foo"
+    className="c0"
   >
     <div
-      className="pipette_info"
+      className="c1"
     >
       <div>
         <h2
@@ -162,7 +184,7 @@ exports[`InstrumentGroup Renders correctly 1`] = `
       </div>
     </div>
     <div
-      className="c0 pipette_icon"
+      className="c2 pipette_icon"
     >
       <img
         className=""
@@ -171,10 +193,18 @@ exports[`InstrumentGroup Renders correctly 1`] = `
     </div>
   </div>
   <div
-    className="pipette right disabled blah"
+    className="c0"
   >
     <div
-      className="pipette_info"
+      className="c3 pipette_icon"
+    >
+      <img
+        className=""
+        src="single_channel_GEN1_800px.png"
+      />
+    </div>
+    <div
+      className="c1"
     >
       <div>
         <h2
@@ -189,14 +219,6 @@ exports[`InstrumentGroup Renders correctly 1`] = `
         </span>
       </div>
     </div>
-    <div
-      className="c1 pipette_icon"
-    >
-      <img
-        className=""
-        src="single_channel_GEN1_800px.png"
-      />
-    </div>
   </div>
 </section>
 `;

components/src/forms/Select.tsx

@@ -15,6 +15,7 @@ import type {
   StylesConfig,
   CSSObjectWithLabel,
 } from 'react-select'
+import { Box, SPACING } from '..'
 
 export { reactSelectComponents }
 
@@ -68,7 +69,10 @@ const NO_STYLE_FN = (): CSSObjectWithLabel => VOID_STYLE as CSSObjectWithLabel
 const CLEAR_STYLES: StylesConfig<SelectOption> = {
   clearIndicator: NO_STYLE_FN,
   container: NO_STYLE_FN,
-  control: NO_STYLE_FN,
+  control: (styles: CSSObjectWithLabel) => ({
+    ...styles,
+    width: '15rem',
+  }),
   dropdownIndicator: NO_STYLE_FN,
   group: NO_STYLE_FN,
   groupHeading: NO_STYLE_FN,
@@ -113,13 +117,20 @@ function DropdownIndicator(
 ): JSX.Element {
   return (
     <reactSelectComponents.DropdownIndicator {...props}>
-      <div
-        className={cx(styles.dropdown_indicator, {
-          [styles.flipped]: props.selectProps.menuIsOpen,
-        })}
+      <Box
+        position={POSITION_ABSOLUTE}
+        top="0.55rem"
+        right={SPACING.spacing8}
+        width={SPACING.spacing20}
       >
-        <Icon name="menu-down" className={cx(styles.dropdown_indicator_icon)} />
-      </div>
+        <Icon
+          name="menu-down"
+          transform={`rotate(${
+            props.selectProps.menuIsOpen === true ? '180' : '0'
+          })`}
+          height="1.25rem"
+        />
+      </Box>
     </reactSelectComponents.DropdownIndicator>
   )
 }

components/src/hardware-sim/Module/HeaterShaker.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+import { getModuleDef2, HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data'
+
+import { COLORS } from '../../ui-style-constants'
+import { RobotCoordsForeignDiv } from '../Deck'
+import { ModuleFromDef } from './ModuleFromDef'
+
+export interface HeaterShakerVizProps {
+  targetTemp: number | null
+}
+
+export function HeaterShaker(props: HeaterShakerVizProps): JSX.Element {
+  const { targetTemp } = props
+  const def = getModuleDef2(HEATERSHAKER_MODULE_V1)
+  let ledLightOverlay: JSX.Element | null = null
+  if (targetTemp != null) {
+    ledLightOverlay = (
+      <RobotCoordsForeignDiv
+        width="3.5"
+        height="16"
+        x="5"
+        y="38"
+        innerDivProps={{
+          borderRadius: '6px',
+          backgroundColor: COLORS.red4,
+          width: '100%',
+          height: '100%',
+        }}
+      />
+    )
+  }
+
+  return (
+    <>
+      <ModuleFromDef def={def} />
+      {ledLightOverlay}
+    </>
+  )
+}

components/src/hardware-sim/Module/ModuleFromDef.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import parseHtml from 'html-react-parser'
 import { stringify } from 'svgson'
 
-import type { ModuleDefinition } from '@opentrons/shared-data'
+import { ModuleDefinition } from '@opentrons/shared-data'
 
 export interface ModuleFromDataProps {
   def: ModuleDefinition

components/src/hardware-sim/Module/Temperature.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+
+import { getModuleDef2, TEMPERATURE_MODULE_V1 } from '@opentrons/shared-data'
+
+import { COLORS } from '../../ui-style-constants'
+import { RobotCoordsForeignDiv } from '../Deck'
+import { ModuleFromDef } from './ModuleFromDef'
+
+export interface TemperatureVizProps {
+  targetTemperature: number | null
+}
+
+const ROOM_TEMPERATURE_C = 23
+
+export function Temperature(props: TemperatureVizProps): JSX.Element {
+  const { targetTemperature } = props
+  const def = getModuleDef2(TEMPERATURE_MODULE_V1)
+  let ledLightOverlay: JSX.Element | null = null
+  if (targetTemperature != null) {
+    ledLightOverlay = (
+      <RobotCoordsForeignDiv
+        width="5.5"
+        height="16"
+        x="23"
+        y="36.5"
+        innerDivProps={{
+          borderRadius: '6px',
+          backgroundColor:
+            targetTemperature <= ROOM_TEMPERATURE_C
+              ? COLORS.mediumBlueEnabled
+              : COLORS.red4,
+          width: '100%',
+          height: '100%',
+        }}
+      />
+    )
+  }
+
+  return (
+    <>
+      <ModuleFromDef def={def} />
+      {ledLightOverlay}
+    </>
+  )
+}

components/src/hardware-sim/Module/Thermocycler.tsx

@@ -5,12 +5,12 @@ import * as React from 'react'
 
 import { THERMOCYCLER_MODULE_V1, getModuleDef2 } from '@opentrons/shared-data'
 
-import { RobotCoordsForeignDiv } from '../Deck'
-import { ModuleFromDef } from './ModuleFromDef'
-
 import { C_MED_LIGHT_GRAY } from '../../styles'
 import { COLORS, BORDERS } from '../../ui-style-constants'
 
+import { RobotCoordsForeignDiv } from '../Deck'
+import { ModuleFromDef } from './ModuleFromDef'
+
 const ROOM_TEMPERATURE_C = 23 // value taken from TC firmware
 export interface ThermocyclerVizProps {
   lidMotorState: 'open' | 'closed' | 'unknown'

components/src/hardware-sim/Module/index.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react'
 import {
   getModuleType,
+  HEATERSHAKER_MODULE_TYPE,
   MAGNETIC_BLOCK_TYPE,
   ModuleDefinition,
   OT2_STANDARD_DECKID,
+  TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 import {
@@ -17,9 +19,10 @@ import {
   ALIGN_CENTER,
 } from '../../styles'
 import { RobotCoordsForeignObject } from '../Deck'
-
 import { Thermocycler } from './Thermocycler'
 import { ModuleFromDef } from './ModuleFromDef'
+import { HeaterShaker } from './HeaterShaker'
+import { Temperature } from './Temperature'
 
 export * from './Thermocycler'
 export * from './ModuleFromDef'
@@ -44,6 +47,8 @@ interface Props {
   innerProps?:
     | React.ComponentProps<typeof Thermocycler>
     | React.ComponentProps<typeof ModuleFromDef>
+    | React.ComponentProps<typeof HeaterShaker>
+    | React.ComponentProps<typeof Temperature>
     | {}
   statusInfo?: React.ReactNode // contents of small status rectangle, not displayed if absent
   children?: React.ReactNode // contents to be rendered on top of the labware mating surface of the module
@@ -183,25 +188,41 @@ export const Module = (props: Props): JSX.Element => {
 
   const magneticBlockLayerBlockList = ['Module_Title', 'Well_Labels', 'Wells']
 
+  let moduleViz: JSX.Element = (
+    <ModuleFromDef
+      layerBlocklist={
+        moduleType === MAGNETIC_BLOCK_TYPE
+          ? magneticBlockLayerBlockList
+          : undefined
+      }
+      {...(innerProps as React.ComponentProps<typeof ModuleFromDef>)}
+      def={def}
+    />
+  )
+  if (moduleType === THERMOCYCLER_MODULE_TYPE) {
+    moduleViz = (
+      <Thermocycler
+        {...(innerProps as React.ComponentProps<typeof Thermocycler>)}
+      />
+    )
+  } else if (moduleType === HEATERSHAKER_MODULE_TYPE) {
+    moduleViz = (
+      <HeaterShaker
+        {...(innerProps as React.ComponentProps<typeof HeaterShaker>)}
+      />
+    )
+  } else if (moduleType === TEMPERATURE_MODULE_TYPE) {
+    moduleViz = (
+      <Temperature
+        {...(innerProps as React.ComponentProps<typeof Temperature>)}
+      />
+    )
+  }
   return (
     <g transform={positionTransform} data-test={`Module_${moduleType}`}>
       <g transform={orientationTransform}>
         <g transform={offsetTransform} style={{ fill: C_DARK_GRAY }}>
-          {moduleType === THERMOCYCLER_MODULE_TYPE ? (
-            <Thermocycler
-              {...(innerProps as React.ComponentProps<typeof Thermocycler>)}
-            />
-          ) : (
-            <ModuleFromDef
-              layerBlocklist={
-                moduleType === MAGNETIC_BLOCK_TYPE
-                  ? magneticBlockLayerBlockList
-                  : undefined
-              }
-              {...(innerProps as React.ComponentProps<typeof ModuleFromDef>)}
-              def={def}
-            />
-          )}
+          {moduleViz}
         </g>
       </g>
       {renderStatusInfo()}