Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(app): add instructional animations to manual move labware intervention modals #13005

Merged
merged 80 commits into from
Jun 30, 2023

Conversation

b-cooper
Copy link
Contributor

@b-cooper b-cooper commented Jun 28, 2023

Overview

Include react-spring to manage orchestration of performant async svg animations.

Closes RLAB-316

manualMoveLabwareAnimations.mov

Test Plan

Changelog

Review requests

Risk assessment

jgbowser added 30 commits April 10, 2023 12:00
adds a pause-type intervention modal for protocol runs. The modal displays the command message as
well as a timer that counts up from the time the pause command started

closes RLAB-319 closes RLAB-320
adds a pause-type intervention modal for protocol runs. The modal displays the command message as
well as a timer that counts up from the time the pause command started

closes RLAB-319 closes RLAB-320
@codecov
Copy link

codecov bot commented Jun 28, 2023

Codecov Report

Merging #13005 (9262d77) into edge (8259fc6) will decrease coverage by 0.71%.
The diff coverage is 47.57%.

Impacted file tree graph

@@            Coverage Diff             @@
##             edge   #13005      +/-   ##
==========================================
- Coverage   73.39%   72.69%   -0.71%     
==========================================
  Files        2313     2369      +56     
  Lines       63157    64672    +1515     
  Branches     7027     7287     +260     
==========================================
+ Hits        46356    47011     +655     
- Misses      15142    15955     +813     
- Partials     1659     1706      +47     
Flag Coverage Δ
app 71.33% <70.96%> (-2.81%) ⬇️
components 64.26% <12.19%> (-2.49%) ⬇️
labware-library 49.61% <ø> (ø)
protocol-designer 44.08% <ø> (ø)

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

Impacted Files Coverage Δ
.../InterventionModal/utils/getRunModuleRenderInfo.ts 100.00% <ø> (ø)
...re-sim/Labware/labwareInternals/LabwareOutline.tsx 11.11% <ø> (ø)
components/src/hardware-sim/Module/index.tsx 8.00% <ø> (-0.70%) ⬇️
...onents/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx 11.11% <11.11%> (ø)
components/src/hardware-sim/utils.ts 20.00% <20.00%> (ø)
...terventionModal/MoveLabwareInterventionContent.tsx 62.85% <59.37%> (+17.40%) ⬆️
app/src/organisms/InterventionModal/index.tsx 84.21% <72.72%> (+6.43%) ⬆️
...InterventionModal/utils/getRunLabwareRenderInfo.ts 88.88% <88.88%> (ø)
app/src/organisms/RunProgressMeter/index.tsx 53.44% <100.00%> (-9.22%) ⬇️

... and 86 files with indirect coverage changes

…ention modals

Include react-spring to manage orchestration of performant async svg animations.

Closes RLAB-316
@b-cooper b-cooper changed the title WIP animated move labware intervention modals feat(app): add instructional animations to manual move labware intervention modals Jun 28, 2023
@b-cooper b-cooper marked this pull request as ready for review June 28, 2023 21:44
@b-cooper b-cooper requested review from a team as code owners June 28, 2023 21:44
Copy link
Contributor

@brenthagen brenthagen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested with a protocol with two move labware commands - looks good, works well. code is clear and easy to follow ✔️

// we can run into issues when there are 2 back to back move labware commands
// the modal never really un-renders and so the animations break after the first modal
// not really a fan of this, but haven't been able to fix the problem any other way
setTimeout(() => setShowInterventionModal(true), 0)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agreed this is not ideal but ok to merge and investigate later if it causes issues

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could think about attaching the intervention modal to a different component, for example. i think it's reasonable to display the modal if the user is anywhere on the run page


return (
<AnimatedSvg
viewBox={wholeDeckViewBox}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dropping a note here (for me, mostly) to look at viewbox dimensions when slot labels added later

@brenthagen brenthagen merged commit 6ecbd96 into edge Jun 30, 2023
@brenthagen brenthagen deleted the app_intervention-animation-react-spring branch June 30, 2023 20:42
mjhuff added a commit that referenced this pull request Dec 18, 2024
Closes RQA-3728

Since the introduction of the move labware intervention deck map, chaining back to back move interventions has posed a challenge, see comments in #13005.

The setTimeout solution proposed in the linked PR effectively worked, and this code looks like it got dropped at some point. However, there are other ways of doing the same thing that are more React Spring-esque, using the API's reset property.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants