diff --git a/components/src/hardware-sim/Deck/RobotCoordsText.tsx b/components/src/hardware-sim/Deck/RobotCoordsText.tsx index 73240e3fbca..92dabd1cfc4 100644 --- a/components/src/hardware-sim/Deck/RobotCoordsText.tsx +++ b/components/src/hardware-sim/Deck/RobotCoordsText.tsx @@ -1,17 +1,31 @@ import type * as React from 'react' +import { css } from 'styled-components' export interface RobotCoordsTextProps extends React.ComponentProps<'text'> { x: number y: number children?: React.ReactNode + canHighlight?: boolean } /** SVG text reflected to use take robot coordinates as props */ // TODO: Ian 2019-05-07 reconcile this with Brian's version export function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element { - const { x, y, children, ...additionalProps } = props + const { x, y, children, canHighlight = true, ...additionalProps } = props return ( - + {children} ) diff --git a/components/src/hardware-sim/Labware/LabwareRender.tsx b/components/src/hardware-sim/Labware/LabwareRender.tsx index 64f2f50eaef..12a60067f2e 100644 --- a/components/src/hardware-sim/Labware/LabwareRender.tsx +++ b/components/src/hardware-sim/Labware/LabwareRender.tsx @@ -61,6 +61,7 @@ export interface LabwareRenderProps { onLabwareClick?: () => void showBorder?: boolean strokeColor?: string + canHighlightLabels?: boolean } export const LabwareRender = (props: LabwareRenderProps): JSX.Element => { @@ -166,6 +167,7 @@ export const LabwareRender = (props: LabwareRenderProps): JSX.Element => { wellLabelOption={props.wellLabelOption} wellLabelColor={props.wellLabelColor} highlightedWellLabels={props.highlightedWellLabels} + canHighlightLabels={props.canHighlightLabels} /> ) : null} diff --git a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx index bc6d0764768..d5b5af77f85 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx @@ -19,6 +19,7 @@ export interface WellLabelsProps { wellLabelOption: WellLabelOption highlightedWellLabels?: HighlightedWellLabels wellLabelColor?: string + canHighlightLabels?: boolean } const Labels = (props: { @@ -28,8 +29,14 @@ const Labels = (props: { isLetterColumn?: boolean highlightedWellLabels?: HighlightedWellLabels wellLabelColor?: string + canHighlightLabels?: boolean }): JSX.Element => { - const { wellLabelOption, highlightedWellLabels, wellLabelColor } = props + const { + wellLabelOption, + highlightedWellLabels, + wellLabelColor, + canHighlightLabels, + } = props const highlightColor = highlightedWellLabels?.color ?? C_BLUE const fillColor = wellLabelColor ?? C_BLACK const LETTER_COLUMN_X = @@ -73,6 +80,7 @@ const Labels = (props: { ? highlightColor : fillColor } + canHighlight={canHighlightLabels} > {(props.isLetterColumn === true ? /[A-Z]+/g : /\d+/g).exec( wellName @@ -90,6 +98,7 @@ export function WellLabelsComponent(props: WellLabelsProps): JSX.Element { wellLabelOption, highlightedWellLabels, wellLabelColor, + canHighlightLabels, } = props const letterColumn = definition.ordering[0] ?? [] const numberRow = definition.ordering.map(wellCol => wellCol[0]) @@ -103,6 +112,7 @@ export function WellLabelsComponent(props: WellLabelsProps): JSX.Element { highlightedWellLabels={highlightedWellLabels} wellLabelColor={wellLabelColor} isLetterColumn + canHighlightLabels={canHighlightLabels} /> ) diff --git a/protocol-designer/src/components/labware/SelectableLabware.tsx b/protocol-designer/src/components/labware/SelectableLabware.tsx index bc5af2d1d30..f9177bb5bfd 100644 --- a/protocol-designer/src/components/labware/SelectableLabware.tsx +++ b/protocol-designer/src/components/labware/SelectableLabware.tsx @@ -229,6 +229,7 @@ export const SelectableLabware = (props: Props): JSX.Element => { )(event) } }} + canHighlightLabels={false} /> )}