refactor(components): update deck map styling

update the map view styling for BaseDeck. close RAUT-773
Opentrons · Nov 14, 2023 · 9ae2933 · 9ae2933
1 parent 2655f2b
commit 9ae2933
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 26 deletions.
diff --git a/app/src/App/OnDeviceDisplayApp.tsx b/app/src/App/OnDeviceDisplayApp.tsx
@@ -283,7 +283,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
 
   // TODO (sb:6/12/23) Create a notification manager to set up preference and order of takeover modals
   return (
-    <ApiHostProvider hostname="127.0.0.1">
+    <ApiHostProvider hostname="192.168.0.107">
       <ErrorBoundary FallbackComponent={OnDeviceDisplayAppFallback}>
         <Box width="100%" css="user-select: none;">
           {isIdle ? (

diff --git a/app/src/molecules/DeckThumbnail/index.tsx b/app/src/molecules/DeckThumbnail/index.tsx
@@ -107,15 +107,15 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element | null {
       }
     }
   )
-
+  console.log('showSlotLabels', showSlotLabels)
   return (
     <BaseDeck
       deckConfig={deckConfig}
       deckLayerBlocklist={getStandardDeckViewLayerBlockList(robotType)}
       robotType={robotType}
       labwareLocations={labwareLocations}
       moduleLocations={moduleLocations}
-      showSlotLabels={showSlotLabels}
+      isOnDevice={showSlotLabels}
       {...styleProps}
     ></BaseDeck>
   )

diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
@@ -64,7 +64,7 @@ interface BaseDeckProps {
   lightFill?: string
   darkFill?: string
   children?: React.ReactNode
-  showSlotLabels?: boolean
+  isOnDevice?: boolean
 }
 
 export function BaseDeck(props: BaseDeckProps): JSX.Element {
@@ -80,7 +80,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
     deckConfig = STANDARD_SLOT_DECK_CONFIG_FIXTURE,
     showExpansion = true,
     children,
-    showSlotLabels = false,
+    isOnDevice,
   } = props
   const deckDef = getDeckDefFromRobotType(robotType)
 
@@ -184,6 +184,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   definition={nestedLabwareDef}
                   onLabwareClick={onLabwareClick}
                   wellFill={nestedLabwareWellFill}
+                  isOnDevice={isOnDevice}
                 />
               ) : null}
               {moduleChildren}
@@ -215,13 +216,14 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                 definition={definition}
                 onLabwareClick={onLabwareClick}
                 wellFill={wellFill ?? undefined}
+                isOnDevice={isOnDevice}
               />
               {labwareChildren}
             </g>
           ) : null
         }
       )}
-      {showSlotLabels ? (
+      {isOnDevice ? (
         <SlotLabels robotType={robotType} color={darkFill} />
       ) : null}
       {children}

diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
@@ -96,7 +96,7 @@ export function WasteChute(props: WasteChuteProps): JSX.Element {
         justifyContent={JUSTIFY_CENTER}
         width="100%"
       >
-        <Icon name="trash" color={wasteIconColor} height="3.5rem" />
+        <Icon name="trash" color={wasteIconColor} height="2rem" />
         <Text css={TYPOGRAPHY.bodyTextSemiBold}>Waste chute</Text>
       </Flex>
     </RobotCoordsForeignObject>

diff --git a/components/src/hardware-sim/Deck/FlexTrash.tsx b/components/src/hardware-sim/Deck/FlexTrash.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { Icon } from '../../icons'
 import { Flex, Text } from '../../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import { BORDERS, TYPOGRAPHY } from '../../ui-style-constants'
+import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import { getDeckDefFromRobotType } from '@opentrons/shared-data'
@@ -86,6 +86,7 @@ export const FlexTrash = ({
           backgroundColor={backgroundColor}
           borderRadius={BORDERS.radiusSoftCorners}
           justifyContent={JUSTIFY_CENTER}
+          gridGap={SPACING.spacing8}
           width="100%"
         >
           {rotateDegrees === '180' ? (
@@ -102,7 +103,7 @@ export const FlexTrash = ({
           <Icon
             name="trash"
             color={trashIconColor}
-            height="3.5rem"
+            height="2rem"
             // rotate icon back 180 degrees
             transform={`rotate(${rotateDegrees}deg)`}
             transformOrigin="center"

diff --git a/components/src/hardware-sim/Labware/LabwareRender.tsx b/components/src/hardware-sim/Labware/LabwareRender.tsx
@@ -58,6 +58,8 @@ export interface LabwareRenderProps {
   hover?: boolean
   onLabwareClick?: () => void
   highlightLabware?: boolean
+  /** This will be used for displaying outline of labware */
+  isOnDevice?: boolean
 }
 
 export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
@@ -77,6 +79,7 @@ export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
         hover={props.hover}
         onLabwareClick={props.onLabwareClick}
         highlightLabware={props.highlightLabware}
+        isOnDevice={props.isOnDevice ?? false}
       />
       {props.wellStroke && (
         <StrokedWells

diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.css b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.css
@@ -17,5 +17,5 @@
 }
 
 .hover_outline {
-  stroke: #006cfa;
+  stroke: var(--c-blue-enabled);
 }
diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import cx from 'classnames'
 import { SLOT_RENDER_WIDTH, SLOT_RENDER_HEIGHT } from '@opentrons/shared-data'
+import { COLORS } from '../../../ui-style-constants'
 import styles from './LabwareOutline.css'
 
 import type { CSSProperties } from 'styled-components'
@@ -14,6 +15,7 @@ export interface LabwareOutlineProps {
   hover?: boolean
   stroke?: CSSProperties['stroke']
   highlight?: boolean
+  isOnDevice?: boolean
 }
 
 const OUTLINE_THICKNESS_MM = 1
@@ -27,28 +29,78 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
     stroke,
     hover,
     highlight,
+    isOnDevice = false,
   } = props
   const {
     parameters = { isTiprack },
     dimensions = { xDimension: width, yDimension: height },
   } = definition || {}
-
   return (
     <>
-      <rect
-        x={OUTLINE_THICKNESS_MM}
-        y={OUTLINE_THICKNESS_MM}
-        strokeWidth={OUTLINE_THICKNESS_MM}
-        width={dimensions.xDimension - 2 * OUTLINE_THICKNESS_MM}
-        height={dimensions.yDimension - 2 * OUTLINE_THICKNESS_MM}
-        rx={6 * OUTLINE_THICKNESS_MM}
-        className={cx(styles.labware_outline, {
-          [styles.tiprack_outline]: parameters && parameters.isTiprack,
-          [styles.hover_outline]: hover,
-          [styles.labware_outline_highlight]: highlight,
-        })}
-        style={{ stroke }}
-      />
+      {isOnDevice ? (
+        <svg>
+          <defs>
+            <filter id="feOffset" filterUnits="objectBoundingBox">
+              <feOffset dx="2" dy="2" />
+              <feGaussianBlur stdDeviation="5" result="blur2" />
+              <feMerge>
+                <feMergeNode in="blur2" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          <rect
+            x={OUTLINE_THICKNESS_MM}
+            y={OUTLINE_THICKNESS_MM}
+            strokeWidth={OUTLINE_THICKNESS_MM}
+            width={dimensions.xDimension + 2 * OUTLINE_THICKNESS_MM}
+            height={dimensions.yDimension + 2 * OUTLINE_THICKNESS_MM}
+            rx="8"
+            ry="8"
+            className={cx(styles.labware_outline, {
+              [styles.tiprack_outline]: parameters && parameters.isTiprack,
+              [styles.labware_outline_highlight]: highlight,
+            })}
+            filter="url(#feOffset)"
+            style={{
+              stroke: '#74B0FF',
+              strokeWidth: '3px',
+            }}
+          />
+          <rect
+            x={1.5 * OUTLINE_THICKNESS_MM}
+            y={1.5 * OUTLINE_THICKNESS_MM}
+            strokeWidth={OUTLINE_THICKNESS_MM}
+            width={dimensions.xDimension - 2 * OUTLINE_THICKNESS_MM}
+            height={dimensions.yDimension - 2 * OUTLINE_THICKNESS_MM}
+            className={cx(styles.labware_outline, {
+              [styles.tiprack_outline]: parameters && parameters.isTiprack,
+              [styles.labware_outline_highlight]: highlight,
+            })}
+            rx="4"
+            ry="4"
+            style={{
+              stroke: `${COLORS.blueEnabled}`,
+              strokeWidth: '3px',
+            }}
+          />
+        </svg>
+      ) : (
+        <rect
+          x={OUTLINE_THICKNESS_MM}
+          y={OUTLINE_THICKNESS_MM}
+          strokeWidth={OUTLINE_THICKNESS_MM}
+          width={dimensions.xDimension + 2 * OUTLINE_THICKNESS_MM}
+          height={dimensions.yDimension + 2 * OUTLINE_THICKNESS_MM}
+          rx={6 * OUTLINE_THICKNESS_MM}
+          className={cx(styles.labware_outline, {
+            [styles.tiprack_outline]: parameters && parameters.isTiprack,
+            [styles.hover_outline]: hover,
+            [styles.labware_outline_highlight]: highlight,
+          })}
+          style={{ stroke }}
+        />
+      )}
     </>
   )
 }
diff --git a/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx b/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx
@@ -18,6 +18,7 @@ export interface StaticLabwareProps {
   hover?: boolean
   onLabwareClick?: () => void
   highlightLabware?: boolean
+  isOnDevice?: boolean
 }
 
 const TipDecoration = React.memo(function TipDecoration(props: {
@@ -38,14 +39,14 @@ const TipDecoration = React.memo(function TipDecoration(props: {
 
 export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
   const { isTiprack } = props.definition.parameters
-
   return (
     <g onClick={props.onLabwareClick}>
       <g className={styles.labware_detail_group}>
         <LabwareOutline
           definition={props.definition}
           hover={props.hover}
           highlight={props.highlightLabware === true}
+          isOnDevice={props.isOnDevice ?? false}
         />
       </g>
       <g>