Workbench Transition

[dvzacharycutler]

Very big PR containing the workbench transition changes we mentioned. There is still work to do on the transition, but as of this PR we do not lose any functionality compared to the current version, so probably past time to start opening PRs.

Closes https://github.com/datavisyn/reprovisyn/issues/433, https://github.com/datavisyn/reprovisyn/issues/431, https://github.com/datavisyn/reprovisyn/issues/436

Also relies on https://github.com/datavisyn/reprovisyn/pull/467 to work as expected.

Developer Checklist (Definition of Done)

• [ ] Descriptive title for this pull request provided (will be used for release notes later)
• [ ] All acceptance criteria from the issue are met
• [ ] Branch is up-to-date with the branch to be merged with, i.e., develop
• [x] Code is cleaned up and formatted
• [x] Code documentation written
• [ ] Unit tests written
• [x] Tested in Chrome
• [ ] Tested in Firefox
• [x] Build is successful
• [x] Summary of changes written
• [ ] Wiki documentation written
• [x] Assign at least one reviewer
• [x] Assign at least one assignee
• [ ] Add type label (e.g., bug, enhancement) to this pull request
• [ ] Add next version label (e.g., next-version: minor) to this PR following semver

Summary of changes

Quite a few changes here

• Breadcrumb changes. Added an animation to the breadcrumb when switching between workbenches, as well as added a small color change on hover to indicate a breadcrumb is clickable (like a tab). Cleaned up breadcrumb code quite a bit, removed magical numbers, etc. Design wise, I ended up adding nothing to the breadcrumbs other than the workbenches, and of course removed the previous extra breadcrumbs (the +). In my opinion this works, and is both easiest code wise and UX, but is of course up for discussion.

https://user-images.githubusercontent.com/87644761/177564176-a5eff59c-2f44-4508-97de-99eeddc47448.mp4

• New Sidebar. Sidebar for each workbench which is always visible, selecting one of the icons on the sidebar will expand the sidebar and display the selected tab. Currently, only one tab actually has any content, that being the tab which changes the mappings between workbenches. This tab is only visible on the 2nd + workbench. Did not implement size dragging as part of this PR, will be in a future PR

https://user-images.githubusercontent.com/87644761/177564823-7068c873-5425-4fe5-b652-6bcc1a84fbbf.mp4

• Moved the view chooser so it is always displayed on the right side of a workbench. Also added the transition options, the "jumps", into the chooser. Few code changes in the old view chooser code to make this work, and make the ordering changeable. There still needs to be a more clear difference between workbench transitions and normal views, but that can be a future PR I think. Also, the name "Workbench Transition" as the group is awful, open to suggestions for better names :D

https://user-images.githubusercontent.com/87644761/177566172-b653c95c-d6d6-41fe-811e-43591c38edd1.mp4

• General transition changes, and the half and half mode was added. Whenever you select a transition in the view chooser, you will go into the half and half mode. This essentially works as if you were still in the first workbench and just can see the second - you can still add views to the first, re arrange them, etc. You can change mappings for the second, but cannot add new views. Clicking on either breadcrumb will fullscreen that workbench. Obvious problem here of not actually being able to ever return to this 50/50 split if you decide to leave it initially, open to discussion of how UI wise to allow a return.

https://user-images.githubusercontent.com/87644761/177567979-1a6698d2-09c8-42c5-b2a8-0f3243e72b68.mp4

Screenshots

[dvzacharycutler]

Holger and I had a discussion about the open questions. For now, the first question (add views chevron) we will leave out and try out other ways to make the view chooser more obvious in a future PR. And the colored indicator will also be a part of a future PR. otherwise, I addressed all of the issues brought up by holger.

[dvzacharycutler]

Also: Any Tests / Documentation?

Good question, the tests that would ideally come with this at the moment is storybook examples for the new components that are being created with this PR. But setting up storybook within Ordino is a bit harder than anticipated, so although I made storybook files for the new components (WorkbenchUtilsSidebar.stories.tsx, for example), they error when running storybook. I believe Holger is taking a look at how to fix it.

[thinkh]

Chevron tool tip

• [x] Remove tool tip from focus workbench and of both workbenches in 50:50 mode because usually the full title is visible
• [x] Rename tool tip from context workbench to <entity> workbench -> please use sentence case and rename also in chevron

Wrong behavior with multiple workbenches

Steps to reproduce

1. Open workbench (e.g., Drugs)
2. Select drugs
3. Open Cell Line workbench
4. Select cell lines
5. Open Gene workbench

Observed behavior

Switching the workbenches back and forth shows the chevron of first workbench (i.e., Drugs), even though the focus and context workbench is the same at the end and it should not be visible.

ordino-wrong-workbench-chevron.webm

Expected behavior

• [ ] the chevrons should look the same after switching back and forth, as in the first place

[dvzacharycutler]

The text in the login screen is currently broken due to a nowrap style.

Fixed.

I suggest to use the workbench color as active color in the sidebar.

Done, changed the colors in the checkbox as well.

Also fixed the problems mentioned in the most recent comment by holger, except for the last one. We discussed, and ill make some design changes of shrinking the non-immediate chevrons down to be very small and have no text, but in the next PR.

[thinkh]

@dvzacharycutler Thanks for your last iteration. It looks good very good!

I fixed the Storybook SCSS issue. It requires the export in tdp_core with PR https://github.com/datavisyn/tdp_core/pull/753. The Storybook server does start now and you can open the Storybook UI in the browser. However, the story/stories that are already available do not compile due to some React Redux error.

could not find react-redux context value; please ensure the component is wrapped in a <Provider>
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (http://localhost:6006/vendors~main.iframe.bundle.js:214802:11)
    at useSelector (http://localhost:6006/vendors~main.iframe.bundle.js:214951:28)
    at WorkbenchUtilsSidebar (http://localhost:6006/main.iframe.bundle.js:38662:101)
    at renderWithHooks (http://localhost:6006/vendors~main.iframe.bundle.js:199851:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors~main.iframe.bundle.js:202530:13)
    at beginWork (http://localhost:6006/vendors~main.iframe.bundle.js:203644:16)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.iframe.bundle.js:185236:14)
    at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.iframe.bundle.js:185285:16)
    at invokeGuardedCallback (http://localhost:6006/vendors~main.iframe.bundle.js:185340:31)
    at beginWork$1 (http://localhost:6006/vendors~main.iframe.bundle.js:208251:7)

Can you have a look, if this is easily fixable? Otherwise, I'd suggest to take a closer look as part of a separate issue, as this might trigger refactorings of our components.

Further resources

• https://www.digitalocean.com/community/tutorials/react-storybook-with-redux