feat(protocol-designer, components): add dropdown field deck highlights

[jerader]

closes AUTH-1124

Overview

Screen.Recording.2024-12-17.at.09.19.12.mov

This PR adds deck highlights when hovering and selecting the dropdown options for several fields:

• all module selection fields
• aspirate and dispense labware
• mix labware
• move labware and new location

Additionally, this PR cleans how we auto-populate the dropdown field if only one is available.

Test Plan and Hands on Testing

There is a lot to test here, basically test that the highlight occurs for each module step, mix, transfer and move labware. After you create the steps, reopen them and see that the highlight is auto-populated back in

Changelog

• add some new redux items for hovering and selecting the dropdown item
• add new highlight layers for labware, modules, empty slot and offdeck
• add some test coverage
• fix how we auto-populate dropdown fields with only one item

Risk assessment

low

[jerader]

this patch auto-populates labware locations for aspirate_labware, dispense_labware, and labware (in mix) when there is 1 item available. Before, we were using useEffects in the form toolbox and this way is more clean and follows the pattern of other auto-populated fields

[jerader]

showed this to Felix and there are a few action items remaining

• highlight ot-2 fixed trash
• change copy for selected in a transfer to source and destination

[ncdiehl11]

Mostly looks cool! I notice that the deck label svgs are probably not being mapped in the right order producing occlusion:

Also, some weirdness is going on with the off deck labware rendering

Also looks like some selected labware highlights are persisting even when selecting another step. Here, the mix occurs in the thermocycler plate, but the HS is still highlighted from the previous step selection.

[jerader]

Mostly looks cool! I notice that the deck label svgs are probably not being mapped in the right order producing occlusion:
Also, some weirdness is going on with the off deck labware rendering
Also looks like some selected labware highlights are persisting even when selecting another step. Here, the mix occurs in the thermocycler plate, but the HS is still highlighted from the previous step selection.

@ncdiehl11 thanks! good catch on all of these, will take a look

[ncdiehl11]

Does this come from 3x zooming somewhere? If so, maybe we should have a zoom scalar constant that can be reused

[jerader]

it comes from the designs. DeckLabel was altered before because when you zoom into the viewbox, everything rendered in it is also zoomed in, including the text. 18px is the original text size for when you're not zoomed in

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 74.00%. Comparing base (906d841) to head (b1ed0b9).
Report is 50 commits behind head on edge.

Additional details and impacted files

@@             Coverage Diff             @@
##             edge   #17122       +/-   ##
===========================================
- Coverage   92.43%   74.00%   -18.44%     
===========================================
  Files          77       43       -34     
  Lines        1283     3250     +1967     
===========================================
+ Hits         1186     2405     +1219     
- Misses         97      845      +748     

Flag	Coverage Δ
g-code-testing	?
shared-data	74.00% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 120 files with indirect coverage changes

[ncdiehl11]

Tested on sandbox and works really well. It's a big PR so it's possible we missed something, but I tested every step successfully with a variety of on and off-deck labware, nested on modules/adapters, etc., and the UI functions great. I will keep an eye out for any possible bugs during dev work pre-8.3 release, but I'm comfortable merging. Awesome work