feat: Upgrade Ant to version 5 #166

ShrimpCryptid · 2024-06-06T18:59:27Z

Problem

Closes #165, upgrading Ant Design to version 5. This is a required dependency of website-3d-volume-viewer as of version 2.9.0, and unblocks #164.

Estimated size: large, ~50-60 minutes, but it's all CSS. Turning off whitespace changes is recommended.

Solution

Removes old Less styling rules and replaces it with Ant's new ConfigProvider model.
Fixed an existing bug where, on narrow screens, parts of the Gallery could not be interacted with.
Fixed an existing bug where a gap would appear next to the main plot view.
Fixes a list of roughly 50 UI-related issues, as noted in Upgrade to Ant Design v5 #165.

Type of change

Bug fix (non-breaking change which fixes an issue)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Steps to Verify:

Run locally. Click around to interact

Screenshots (optional):

Keyfiles (delete if not relevant):

main file/entry point
other important file

Thanks for contributing!

…ncluded in package-lock.json

ShrimpCryptid · 2024-06-11T18:51:59Z

src/components/DatasetCard/index.tsx

+            <Descriptions column={1} size="small" colon={false}>
+                {userData.totalCells && <Descriptions.Item label="Number of Cells:">


Makes colons part of the label to prevent a weird alignment bug with multiline labels

interim17

Running locally looks good and all the changes look sensible.

To be fair its a lot of code and its very similar to the code its replacing, which I think makes it easy to miss things in review, but I didn't catch anything. Tried to interact with all the pieces in the UI.

Nice job with the refactor!

frasercl

This looks like a lot of work and is overall a massive improvement - thank you for doing it! Realizing looking back that I left a lot of comments... but that's only down to the size of this PR. They're mostly minor polish, and none are blocking.

src/components/GalleryCard/index.tsx

frasercl · 2024-06-17T16:37:02Z

src/components/GalleryCard/index.tsx

-                <Button icon="download" />
+        <Tooltip key={`${props.cellID}-download`} title={hasDownload ? null : NO_DOWNLOADS_TOOLTIP}>
+            <Dropdown menu={{ items: menuItems }} trigger={["click"]}>
+                <Button className={hasDownload ? "" : styles.disabled}>


just curious: was this disabled behavior just not working before, or is this a class that antd 3 used to apply that our code now applies itself?

Disabled styling doesn't seem to have worked very well before. I ended up removing the disabled behavior from the 3D view button, and fixing the Dropdown to work correctly as a disabled component.

src/components/LandingPage/style.css

frasercl · 2024-06-17T18:38:25Z

src/components/MouseFollower/index.tsx

+const MouseFollower = React.forwardRef<HTMLDivElement, React.PropsWithChildren<MouseFollowerProps>>(
+    (props, ref) => {


src/components/SliderWithCustomMarks/index.tsx

src/containers/Cfe/index.tsx

src/containers/Cfe/style.css

src/containers/MainPlotContainer/index.tsx

src/containers/ThumbnailGallery/index.tsx

Co-authored-by: Cameron Fraser <53030214+frasercl@users.noreply.github.com>

…ated/cell-feature-explorer into feat/upgrade-ant

- Updates web-3d-viewer to version 2.9.0. - Updates the API for the web-3d-viewer. - Fixes some broken styling caused by Ant version mismatch. (Will be removed in #166.) Full changes: * fix: Changed props for ImageViewerApp to match new w3cv API * refactor: Upgrade web-3d-viewer to 2.9.0 * fix: Fix styling on channel settings tab due to ant version or font * fix: Fixed missing ant drawer * fix: Icons in toolbar were off-center * fix: Missing type declaration in tests * test: Update CI action to node v20 * test: Import type declarations * test: Use original type declaration import, change CI action ordering * fix: Fixed build issues caused by local w3cv project instance being included in package-lock.json

- Removes old Less styling rules and replaces it with Ant's new `ConfigProvider` model. - Fixed an existing bug where, on narrow screens, parts of the Gallery could not be interacted with. - Fixed an existing bug where a gap would appear next to the main plot view. - Fixes a list of roughly 50 UI-related issues, as noted in #165. Full changes: * fix: Changed props for ImageViewerApp to match new w3cv API * refactor: Upgrade web-3d-viewer to 2.9.0 * fix: Fix styling on channel settings tab due to ant version or font * fix: Fixed missing ant drawer * fix: Icons in toolbar were off-center * fix: Missing type declaration in tests * test: Update CI action to node v20 * test: Import type declarations * test: Use original type declaration import, change CI action ordering * fix: Fixed build issues caused by local w3cv project instance being included in package-lock.json * refactor: Upgrade to Ant ^5.16.2, fix compile issues * fix: Removed unsupported babel plugin * fix: Text colors, title colors, header font weight * fix: Page background color, link color * fix: Header alignment * fix: Button colors and shadows, landing page text size * fix: Title color, paragraph padding, table margins * fix: Bad colon alignment on dataset descriptions * fix: Layout issues on viewer page * fix: Loading spinner color * fix: Header colors, alignment * feat: Increased tab icon sizes, alignment fixes * refactor: Make palette colors a constant * fix: Fixed overlap of viewer title and menu tab buttons * fix: Header menu tab styling * fix: Incorrect font in cookie banner * fix: Sider background colors * fix: Card action formatting * fix: Gallery background width, transparency * fix: Button and icon styling on gallery sidebar * fix: Action list on button icons * fix: Menu header being the incorrect height * fix: Album list hover and selection colors * fix: Removed extra margin at bottom of page caused by gallery sider * fix: Unclickable gallery close button, searchbar overlapping scrollbar * fix: Removed deprecated properties on menus, modals, and dropdowns * fix: Checkbox colors * fix: Fixed 3d viewer and plot extending into gallery sider * fix: Close button on selected set * fix: Album text alignment * fix: Popconfirm background color, removed button shadows * fix: Axis dropdown not changing on selection, showing keys instead of names on dropdown * feat: Adjusted selected set delete button style * fix: Style matching on thumbnail popover * fix: Popover now follows mouse * refactor: Deleted unused style CSS * feat: Adjusted margin on gallery buttons * fix: Gallery card button spacing, fixed download dropdown * fix: Dropdowns extending up into header and being unclickable * fix: Temporarily fixed dropdowns by overriding width * fix: Linting * refactor: Restored .gitkeep * refactor: Import sorting, renamed variables * refactor: Palette now has base colors to prevent reused strings * refactor: Code cleanup, increased tab icon size * fix: Alignment of 3d viewer text, increased plot height * fix: Dropdown arrow color, dropdown width * fix: Alignment on gallery header * refactor: Removed style overrides for CellViewer * refactor: Removed unused less dependencies * refactor: Removed additional unused dependencies * refactor: Sorted imports, moved CSS * refactor: Moved imports, prevented theme re-calculation * refactor: Use single JSX tag instead of opening + closing tags Co-authored-by: Cameron Fraser <53030214+frasercl@users.noreply.github.com> * refactor: More import sorting, removed unused CSS * fix: Disabled button styling in Gallery view * fix: Linting --------- Co-authored-by: Cameron Fraser <53030214+frasercl@users.noreply.github.com> refactor: Upgrade web-3d-viewer to 2.9.0 fix: Fix styling on channel settings tab due to ant version or font fix: Icons in toolbar were off-center fix: Missing type declaration in tests test: Update CI action to node v20 test: Import type declarations test: Use original type declaration import, change CI action ordering fix: Fixed build issues caused by local w3cv project instance being included in package-lock.json

ShrimpCryptid added 30 commits May 8, 2024 14:12

fix: Changed props for ImageViewerApp to match new w3cv API

781ba97

refactor: Upgrade web-3d-viewer to 2.9.0

2a4c28c

fix: Fix styling on channel settings tab due to ant version or font

88585e8

fix: Fixed missing ant drawer

b4a70e8

fix: Icons in toolbar were off-center

881b654

fix: Missing type declaration in tests

8cf5f14

test: Update CI action to node v20

e47064f

test: Import type declarations

1b60ba1

test: Use original type declaration import, change CI action ordering

1e6ae81

fix: Fixed build issues caused by local w3cv project instance being i…

74978ef

…ncluded in package-lock.json

refactor: Upgrade to Ant ^5.16.2, fix compile issues

ae2c0f0

fix: Removed unsupported babel plugin

1787e6b

fix: Text colors, title colors, header font weight

020057c

fix: Page background color, link color

372bc74

fix: Header alignment

877f372

fix: Button colors and shadows, landing page text size

433c5db

fix: Title color, paragraph padding, table margins

fef7e1f

fix: Bad colon alignment on dataset descriptions

1f3f033

fix: Layout issues on viewer page

8004c2b

fix: Loading spinner color

a1dca40

fix: Header colors, alignment

e029d8f

feat: Increased tab icon sizes, alignment fixes

6ca9243

refactor: Make palette colors a constant

d0422a9

fix: Fixed overlap of viewer title and menu tab buttons

8ad0a01

fix: Header menu tab styling

fd77766

fix: Incorrect font in cookie banner

c89e8a2

fix: Sider background colors

37bc4eb

fix: Card action formatting

a2bb87b

fix: Gallery background width, transparency

1c271b4

fix: Button and icon styling on gallery sidebar

0537334

ShrimpCryptid marked this pull request as ready for review June 11, 2024 18:47

ShrimpCryptid requested a review from a team as a code owner June 11, 2024 18:47

ShrimpCryptid requested review from blairlyons, frasercl and interim17 and removed request for a team and blairlyons June 11, 2024 18:47

ShrimpCryptid commented Jun 11, 2024

View reviewed changes

ShrimpCryptid added 3 commits June 11, 2024 12:00

refactor: Removed style overrides for CellViewer

dd6c38c

refactor: Removed unused less dependencies

0b2f0fe

refactor: Removed additional unused dependencies

0fff136

ShrimpCryptid mentioned this pull request Jun 11, 2024

refactor: Upgrade website-3d-cell-viewer #164

Merged

ShrimpCryptid changed the base branch from feat/upgrade-w3cv to main June 13, 2024 16:59

ShrimpCryptid changed the base branch from main to feat/upgrade-w3cv June 13, 2024 17:01

ShrimpCryptid linked an issue Jun 13, 2024 that may be closed by this pull request

Upgrade to Ant Design v5 #165

Closed

53 tasks

interim17 approved these changes Jun 13, 2024

View reviewed changes

frasercl approved these changes Jun 17, 2024

View reviewed changes

ShrimpCryptid and others added 7 commits June 17, 2024 13:14

refactor: Sorted imports, moved CSS

e1310dc

refactor: Moved imports, prevented theme re-calculation

20b7368

refactor: Use single JSX tag instead of opening + closing tags

98ee918

Co-authored-by: Cameron Fraser <53030214+frasercl@users.noreply.github.com>

refactor: More import sorting, removed unused CSS

ac0bb28

Merge branch 'feat/upgrade-ant' of https://github.com/allen-cell-anim…

0010843

…ated/cell-feature-explorer into feat/upgrade-ant

fix: Disabled button styling in Gallery view

f366e61

fix: Linting

345cbfc

Base automatically changed from feat/upgrade-w3cv to main June 18, 2024 16:19

Merge branch 'main' into feat/upgrade-ant

f34d2f7

ShrimpCryptid merged commit 65d2ecf into main Jun 18, 2024
1 check passed

ShrimpCryptid deleted the feat/upgrade-ant branch June 18, 2024 16:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Upgrade Ant to version 5 #166

feat: Upgrade Ant to version 5 #166

ShrimpCryptid commented Jun 6, 2024 •

edited

Loading

ShrimpCryptid Jun 11, 2024

interim17 left a comment

frasercl left a comment

frasercl Jun 17, 2024

ShrimpCryptid Jun 17, 2024

frasercl Jun 17, 2024

		<Descriptions column={1} size="small" colon={false}>
		{userData.totalCells && <Descriptions.Item label="Number of Cells:">

		const MouseFollower = React.forwardRef<HTMLDivElement, React.PropsWithChildren<MouseFollowerProps>>(
		(props, ref) => {

feat: Upgrade Ant to version 5 #166

feat: Upgrade Ant to version 5 #166

Conversation

ShrimpCryptid commented Jun 6, 2024 • edited Loading

Problem

Solution

Type of change

Steps to Verify:

Screenshots (optional):

Keyfiles (delete if not relevant):

ShrimpCryptid Jun 11, 2024

Choose a reason for hiding this comment

interim17 left a comment

Choose a reason for hiding this comment

frasercl left a comment

Choose a reason for hiding this comment

frasercl Jun 17, 2024

Choose a reason for hiding this comment

ShrimpCryptid Jun 17, 2024

Choose a reason for hiding this comment

frasercl Jun 17, 2024

Choose a reason for hiding this comment

ShrimpCryptid commented Jun 6, 2024 •

edited

Loading