prevent highlightin g of labels when dragging

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 (
-    <text {...additionalProps} x={x} y={-1 * y} transform="scale(1, -1)">
+    <text
+      {...additionalProps}
+      x={x}
+      y={-1 * y}
+      transform="scale(1, -1)"
+      css={
+        !canHighlight
+          ? css`
+              user-select: none;
+            `
+          : undefined
+      }
+    >
       {children}
     </text>
   )

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}
     </g>

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,13 +112,15 @@ export function WellLabelsComponent(props: WellLabelsProps): JSX.Element {
         highlightedWellLabels={highlightedWellLabels}
         wellLabelColor={wellLabelColor}
         isLetterColumn
+        canHighlightLabels={canHighlightLabels}
       />
       <Labels
         definition={definition}
         wells={numberRow}
         wellLabelOption={wellLabelOption}
         highlightedWellLabels={highlightedWellLabels}
         wellLabelColor={wellLabelColor}
+        canHighlightLabels={canHighlightLabels}
       />
     </g>
   )

protocol-designer/src/components/labware/SelectableLabware.tsx

@@ -229,6 +229,7 @@ export const SelectableLabware = (props: Props): JSX.Element => {
                 )(event)
               }
             }}
+            canHighlightLabels={false}
           />
         )}
       </WellTooltip>