RUI Y3 cosmetic updates

[LibbyUX]

Design Start: RUI Y3 Cosmetic Update

Design work begins today. Attempting a review submission by Friday EOB.

Current Implementation

• 1280x832 is our minimum breakpoint and features are super cramped in the current implementation app. I will iterate & improve:

Entry Point 1920x1080

App 1280x832

App 1920x1080

[LibbyUX]

Ready for dev: RUI cosmetic redesign

Please contact me if you have any questions!

Updates

Design system components have been added everywhere for this cosmetic redesign!

Entry point

• The entry point is now a full screen modal.
• Search autocomplete is needed for organs and consortia.

Application

• More menus added
• Flyouts added for AS and landmarks opacity and tissue block rotation sliders
• The position reporting has been moved from inside the 3D scene to the position column in the Tissue Block Settings panel

Review and download modal

• This modal reports the user's registration in a tabular format. We use our scrollbar that appears on hover if needed.
• A snackbar appears after the user has downloaded their registration.

Resources

• Figma: RUI Y3 Cosmetic Redesign

Open issues that are related to this design/build:

• Chips + chips autocomplete #768
• Error E-40 color update #800
• Text fields (select & input): Fill appearance variant update #801
• Tool Tip for Review and Download Button #743
• Bug Report: Switched Landmarks  #748
• Bug Report: SenNet Embedded RUI Misrepresents Tissue Block #761

[LibbyUX]

@edlu77 & @axdanbol - I started to review the RUI preview today. I noticed that I missed specifying a "we log usage" snackbar, so I added one here in Figma.

The preview is looking amazing! I'll review more of the RUI shortly!

[LibbyUX]

Meeting notes from RUI build check in:

@edlu77 - Thanks for meeting with me today! This build is looking so good! We discussed:

AS & Landmark flyout behavior

Interaction:

• Click the opacity button to open the flyout.
• The flyout opens centered to the right of the AS or Landmark.
• The AS or Landmark shows a selected state while the flyout is open (if possible).
• The flyout is closed when clicking anywhere outside of the flyout.

Rotation input/slider flyout behavior

• Added: Rotation input flyout prototype
  • Interaction: Click the X input to open the flyout and click outside anywhere to close the flyout

More info needed: Rotation slider keyboard modifier

Looping in @andreasbueckle and @bherr2 about our Figma comment thread on this feature. I recall I started this thread because Andi asked if this would be possible, so, we discussed adding a shift button keyboard modifier for the rotation sliders to make it easier for users to be precise in the rotation for their tissue blocks.

Currently, the slider moves in increments of 1 degree, but the ask was to use the keyboard modifier for 1 degree. Edward and I both need to understand precisely how this request is supposed to function. @andreasbueckle and/or @bherr2, can you please follow up with more details about the expected behavior of this interaction?

[andreasbueckle]

@LibbyUX
We could try increases of 0.5 degrees when the user presses the shift key while using the slider. Maybe we can have a test build with different speeds? Happy to sit with @edlu77 and test different increments.

[andreasbueckle]

PS: @LibbyUX
Tinkercad has a good implementation of modified rotation:

It allows two speeds: 1 degree and 22.5 degrees. In the RUI, we would have 1 degree and 0.5 degrees. Happy to demo to @LibbyUX or @edlu77

[LibbyUX]

Hi @bherr2 & @andreasbueckle - I have a question about a specific interaction in the RUI under two different conditions. This is for the "reset tissue block" button in the registration panel with the 3D viewer. @edlu77 noted that the current RUI 3D viewer panel resets differently based on if there is a previous registration file or not:

• Using the reset button on registrations without a previous registration file: Clicking this button resets the RUI location to the default position, size, and rotation.
• When a previous registration file is used: Clicking this button resets the RUI to the uploaded registration file's original position, size, and rotation.

I want to confirm that this is the intended interaction. This seems like it was intentional, but Edward and I want to verify. Thank you!

[LibbyUX]

@axdanbol - Thank you for chatting RUI with me this week!

I edited the spec to show our agreed-on required text field formatting, please see the metadata input field component here! I appreciate you and I hope your day is starting well!