Implement expand button for Vitessce #1651

ivababukova · 2023-08-21T13:49:26Z

Fixes #1570

Background

Change List

Added a button that can expand or collapse the view under react-grid-layout on click.
Expanding or collapsing is regulated with css similarly to how dark/light mode works. The button changes the value of data-expanded propertly. In css, there are 2 types of style defined: for when data-expanded=expanded and for when it is not.
Moved the Edit button to appear on the top right of the screen, side by side with the Expand/Collapse button.

Here are screenshots of how this looks in collapsed and expanded mode:

Checklist

Ensure PR works with all demos on the dev.vitessce.io homepage
Open (draft) PR's into vitessce-python and vitessce-r if this is a release PR
Documentation added or updated

ivababukova · 2023-08-21T13:52:55Z

packages/vit-s/src/shared-mui/container.js

@@ -27,6 +27,7 @@ export const useVitessceContainerStyles = makeStyles(theme => ({
      transition: 'height 200ms ease',
      // Custom
      height: 'auto',
+      marginTop: '30px',


I did not find a better way to make the react-grid-layout not render on top of the "Expand/Collapse" button. It is because of the usage of position: absolute in expandButtonContainer, which is necessary for the button to be rendered on the right side of the screen

github-actions · 2023-08-21T13:55:17Z

Size Change: +7.27 kB (0%)

Total Size: 11.4 MB

Filename	Size	Change
`./packages/main/prod/dist/index-********.js`	6.94 MB	+7.27 kB (0%)

ℹ️ View Unchanged

Filename	Size
`./packages/main/prod/dist/deflate-********.js`	243 B
`./packages/main/prod/dist/hglib-********.js`	4.34 MB
`./packages/main/prod/dist/index.min.js`	687 B
`./packages/main/prod/dist/jpeg-********.js`	15.3 kB
`./packages/main/prod/dist/lerc-********.js`	47.2 kB
`./packages/main/prod/dist/lzw-********.js`	2.1 kB
`./packages/main/prod/dist/packbits-********.js`	576 B
`./packages/main/prod/dist/pako.esm-********.js`	68.6 kB
`./packages/main/prod/dist/raw-********.js`	168 B
`./packages/main/prod/dist/webimage-********.js`	872 B

_{compressed-size-action}

ivababukova · 2023-08-21T13:56:29Z

sites/docs/src/pages/styles.module.css

 .vitessceClear {
-  text-align: center;
+  text-align: right;
  width: 100%;
-  margin-bottom: 10px;
+  padding: 10px;
+  display: 'flex';
+  flex: 1;
+  margin-top: auto;


so that the "Edit" button appears on the top right side of the screen, side by side with the Demo description

github-actions · 2023-08-21T14:18:54Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	78.45%	9262 / 11806
🔵	Statements	78.45%	9262 / 11806
🔵	Functions	65.6%	267 / 407
🔵	Branches	79.2%	880 / 1111

File Coverage

No changed files found.

Generated in workflow #3127

keller-mark · 2023-08-21T14:20:10Z

Hi @ivababukova , thanks! Is there a way to do this without modifying any code in packages/, only in sites/docs? We would not want this change to affect how Vitessce is rendered/styled in any other apps / websites that are currently using it.

It should be possible as this is how the HuBMAP Portal implements the expand button, with only code outside of the Vitessce core https://portal.hubmapconsortium.org/browse/dataset/664b8227e17ee2a35a504dd8c19c2531

ivababukova · 2023-08-21T14:25:31Z

Hi @ivababukova , thanks! Is there a way to do this without modifying any code in packages/, only in sites/docs? We would not want this change to affect how Vitessce is rendered/styled in any other apps / websites that are currently using it.

It should be possible as this is how the HuBMAP Portal implements the expand button, with only code outside of the Vitessce core https://portal.hubmapconsortium.org/browse/dataset/664b8227e17ee2a35a504dd8c19c2531

@keller-mark can you point me to the source code of how the expand button for HuBMAP Portal was implemented?

keller-mark · 2023-08-21T14:27:19Z

https://github.com/hubmapconsortium/portal-ui/blob/af546ef912bc7c9259b79dc679245ccee6853774/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.jsx#L137

ivababukova · 2023-08-22T10:53:36Z

@keller-mark I reimplemented this only modifying files under sites/docs. See the updated screenshots in the PR description for how it looks like. Can you review the code?

keller-mark · 2023-08-23T13:04:52Z

Hi @ivababukova, great to see the new implementation. Some comments:

The bottom of the Vitessce component is cut off in expanded mode, can this be addressed?
When I resize the browser window in expanded mode all of the views shift to the top and overlap each other

.changeset/rare-bats-notice.md

Co-authored-by: Mark Keller <7525285+keller-mark@users.noreply.github.com>

ivababukova · 2023-08-24T09:59:16Z

Hi @ivababukova, great to see the new implementation. Some comments:

The bottom of the Vitessce component is cut off in expanded mode, can this be addressed?

When I resize the browser window in expanded mode all of the views shift to the top and overlap each other

Thanks for the review @keller-mark I have fixed those two issues, can you take another look at the PR?

keller-mark · 2023-08-24T19:31:14Z

The browser window resizing still did not work in expanded mode - while the vitessce views did not collapse, the width of the full vitessce component did not change during resizing, i think due to the fixed positioning. I just merged a PR into this branch to fix that and ensure all positioning is absolute or relative

ivababukova · 2023-08-28T13:30:20Z

The browser window resizing still did not work in expanded mode - while the vitessce views did not collapse, the width of the full vitessce component did not change during resizing, i think due to the fixed positioning. I just merged a PR into this branch to fix that and ensure all positioning is absolute or relative

Thank you for checking this thoroughly and fixing it, Mark! I didn't notice this problem when I tested for this case

ivababukova added 6 commits August 16, 2023 16:33

Introduce an Expand button that does nothing and fix the css

90b5ee9

Increase proportion for dataset description

df0a7ab

setup of expanded version of screen

7a4b538

This will not work, but I am commiting the changes for future reference

2efbb8f

full screen mode implemented now have to move button to the right

d68f44f

Button aligned to the right

6724e59

ivababukova commented Aug 21, 2023

View reviewed changes

ivababukova added 2 commits August 21, 2023 15:54

remove unneeded code

388f289

Merge branch 'main' into ivababukova/expand-option

f8c4475

ivababukova commented Aug 21, 2023

View reviewed changes

Added changeset

7fd905a

ivababukova added 2 commits August 21, 2023 16:20

reverse docusaurus changes

4d4717d

remove useless comments

7063eae

ivababukova added 4 commits August 21, 2023 17:22

remove changes made to VitessceGrid

bba1882

collapse and expand working

aad195b

Moved the buttons to right

a137fa7

Clean up code

74ed8ae

keller-mark reviewed Aug 23, 2023

View reviewed changes

.changeset/rare-bats-notice.md Outdated Show resolved Hide resolved

ivababukova and others added 4 commits August 24, 2023 08:39

Update .changeset/rare-bats-notice.md

84f6b7a

Co-authored-by: Mark Keller <7525285+keller-mark@users.noreply.github.com>

make sure that the bottom of the screen fits in expanded mode

c2005fb

Make sure that resizing works in expanded mode

5f51d97

Code improvements

6e052cc

Fixes for expand buttons (#1659)

dac52be

keller-mark approved these changes Aug 24, 2023

View reviewed changes

Revert removed styles

1d31c98

keller-mark merged commit 6762b92 into main Aug 24, 2023

keller-mark deleted the ivababukova/expand-option branch August 24, 2023 19:54

github-actions bot mentioned this pull request Aug 24, 2023

Create release #1639

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement expand button for Vitessce #1651

Implement expand button for Vitessce #1651

ivababukova commented Aug 21, 2023 •

edited

Loading

ivababukova Aug 21, 2023

github-actions bot commented Aug 21, 2023 •

edited

Loading

ivababukova Aug 21, 2023

github-actions bot commented Aug 21, 2023 •

edited

Loading

keller-mark commented Aug 21, 2023

ivababukova commented Aug 21, 2023 •

edited

Loading

keller-mark commented Aug 21, 2023

ivababukova commented Aug 22, 2023 •

edited

Loading

keller-mark commented Aug 23, 2023

ivababukova commented Aug 24, 2023

keller-mark commented Aug 24, 2023

ivababukova commented Aug 28, 2023

Implement expand button for Vitessce #1651

Implement expand button for Vitessce #1651

Conversation

ivababukova commented Aug 21, 2023 • edited Loading

Background

Change List

Checklist

ivababukova Aug 21, 2023

Choose a reason for hiding this comment

github-actions bot commented Aug 21, 2023 • edited Loading

ivababukova Aug 21, 2023

Choose a reason for hiding this comment

github-actions bot commented Aug 21, 2023 • edited Loading

Coverage Report

keller-mark commented Aug 21, 2023

ivababukova commented Aug 21, 2023 • edited Loading

keller-mark commented Aug 21, 2023

ivababukova commented Aug 22, 2023 • edited Loading

keller-mark commented Aug 23, 2023

ivababukova commented Aug 24, 2023

keller-mark commented Aug 24, 2023

ivababukova commented Aug 28, 2023

ivababukova commented Aug 21, 2023 •

edited

Loading

github-actions bot commented Aug 21, 2023 •

edited

Loading

github-actions bot commented Aug 21, 2023 •

edited

Loading

ivababukova commented Aug 21, 2023 •

edited

Loading

ivababukova commented Aug 22, 2023 •

edited

Loading