feature: Loading from the landing page, viewer page routing #212

ShrimpCryptid · 2024-04-11T19:39:49Z

Estimated review size: medium, 30-40 minutes

Closes #188, the landing page implementation!

This change finishes implementing loading from the landing page and also sets up routing for the app.

These changes seem large, but the majority of the changes are just file moves and renames! I'll note what files you can compare between, and a summary of any changes on each file.

Changes:

Adds react-router-dom and routes for the landing page (at root URL, /) and viewer (/viewer).
The landing page can now redirect to the viewer when a Load button is clicked, and passes the app arguments as state through the navigation API.
Renamed the landing-page directory to website, since it now includes several website-related components.
Adds a new AppWrapper component, which wraps ImageViewerApp.
- Handles retrieving app arguments from URL or from routing.
Moves the URL parsing logic to url_utils.tsx.

Videos (🔊)

Browser Router:

2024-04-12.11-38-40.mp4

Hash Router:

2024-04-12.11-40-15.mp4

Loading empty viewer:

Validation:

Run the app locally. The default URL should open on the landing page.
Click on the "Load" button, and it should open the volume in the /viewer page.
Refreshing the page should still show the same volume.
Go to http://localhost:9020/viewer?url=https://animatedcell-test-data.s3.us-west-2.amazonaws.com/20200323_F01_001/P13-C4.zarr . This should also open correctly in the browser.
Go to http://localhost:9020?url=https://animatedcell-test-data.s3.us-west-2.amazonaws.com/20200323_F01_001/P13-C4.zarr . This will redirect to the /viewer page.

…-landing-page

ShrimpCryptid · 2024-04-11T19:41:35Z

src/landing-page/components/LandingPage/content.ts

Moved to website/LandingPage/content.ts. I updated the viewerSettings argument to enable channels, but otherwise everything else is the same.

ShrimpCryptid · 2024-04-11T19:42:00Z

src/landing-page/types.ts

-// TBD what URL parameters to include here
-export type ViewerArgs = {
-  baseurl: string;
-  cellid: number;
-  cellPath: string;
-  fovPath: string;
-  fovDownloadHref: string;
-  cellDownloadHref: string;
-  viewerSettings: ViewerChannelSettings;
-};


This was removed and replaced with the AppProps type that Cameron introduced in another PR.

ShrimpCryptid · 2024-04-11T19:44:05Z

public/index.tsx

-import { ImageViewerApp, RenderMode, ViewerChannelSettings, ViewMode } from "../src";
-import FirebaseRequest, { DatasetMetaData } from "./firebase";
-import { AppProps, GlobalViewerSettings } from "../src/aics-image-viewer/components/App/types";


All of the parsing logic below was moved to src/website/utils/url_utils.tsx.

ShrimpCryptid · 2024-04-11T23:45:25Z

src/aics-image-viewer/components/Toolbar/index.tsx

This code was throwing an error due to the various refs being undefined on startup.

ShrimpCryptid · 2024-04-12T00:05:36Z

src/website/components/ErrorPage.tsx

@@ -0,0 +1,54 @@
+import React, { ReactElement } from "react";


This file is copied from https://github.com/allen-cell-animated/nucmorph-colorizer/blob/main/src/routes/ErrorPage.tsx. The only change was editing the page content to give a more helpful error message.

ShrimpCryptid · 2024-04-12T00:07:05Z

src/website/components/LandingPage/content.ts

Moved this file and edited the groups argument. Same as the deleted content.ts file.

…ce file size

…-styling - Adds the banner video MP4, which autoplays when loaded. - Also added an accessibility feature, where the video playback is disabled if `prefers-reduced-motion` is set to true. - Adds `Open Sans` via Google fonts. Existing fonts are still included to ensure compatibility with embedded use cases, but will be removed in the future. - Adds the `StyleProvider` component, which will wrap the `LandingPage` and `App` in the future to provide a central location for CSS variables. - Implements styling for the landing page.

src/website/types.ts

toloudis · 2024-04-16T22:45:59Z

public/index.tsx

 // vars filled at build time using webpack DefinePlugin
 console.log(`website-3d-cell-viewer ${WEBSITE3DCELLVIEWER_BUILD_ENVIRONMENT} build`);
 console.log(`website-3d-cell-viewer Version ${WEBSITE3DCELLVIEWER_VERSION}`);
 console.log(`volume-viewer Version ${VOLUMEVIEWER_VERSION}`);

-export const VIEWER_3D_SETTINGS: ViewerChannelSettings = {


good to delete yes, but wondering how we can get test data like this into the viewer during dev. These settings are basically how we want the variance dataset to be presented in the viewer.

src/website/components/LandingPage/content.ts

src/website/utils/url_utils.ts

ShrimpCryptid · 2024-04-17T16:46:38Z

good to delete yes, but wondering how we can get test data like this into the viewer during dev. These settings are basically how we want the variance dataset to be presented in the viewer.

Can't respond directly to this for some reason, but I did end up adding props for the AppWrapper component where this could be overridden. You could also edit LandingPage/content.ts to add a button for whatever test data you're working with, or include it via the URL?

- Removes the Merriweather Sans and Overpass font files and replaces them with Open Sans.

ShrimpCryptid · 2024-04-18T18:05:30Z

Leaving further refactor of project until #215.

toloudis · 2024-04-18T15:52:40Z

public/index.tsx


 import "antd/dist/antd.less";

 // Components
+import AppWrapper from "../website/components/AppWrapper";
+import LandingPage from "../website/components/LandingPage";
+import ErrorPage from "../website/components/ErrorPage";


Moving files to a separate website/ dir feels better. But doesn't it seem cleaner to put the contents of website under this public/ dir where index.tsx lives? I'm not sure if now is the time, but moving webpack config and the tsconfig that includes website files into the public app dir would help isolate things more clearly within this repo.

#215 contains the correct answer!

toloudis · 2024-04-18T18:32:11Z

tsconfig.json

  "compilerOptions": {
-    "module": "ES6"
+    "module": "ES6",
+    "outDir": "./dist"


Sanity check: To confirm that the separation is still good, run npm build and check the es/ directory contains none of the website modules.

toloudis · 2024-04-18T20:19:09Z

website/utils/url_utils.ts

+import { ViewMode } from "../../src/aics-image-viewer/shared/enums";
+import { ViewerChannelSettings } from "../../src/aics-image-viewer/shared/utils/viewerChannelSettings";
+
+const paramKeys = ["mask", "ch", "luts", "colors", "url", "file", "dataset", "id", "view"];


an interesting todo is to add comments describing how these are parsed. In particular, the lut setting has some special shorthand encoding using p for percentile and m for median. For later..

Will likely do this when #196 is implemented 👍

website/components/LandingPage/index.tsx

frasercl

Looks good overall!

website/components/LandingPage/index.tsx

public/index.tsx

website/components/AppWrapper.tsx

ShrimpCryptid added 13 commits April 10, 2024 16:00

Merge branch 'main' into feature/loading-from-landing-page

cc58736

feat: Added react-router-dom

12da14d

feat: Loading viewer from button click on landing page

f3e48cd

fix: Load first three channels of the first dataset by default

9a4f105

fix: Fixed dev server not recognizing subpaths

c874c55

fix: Fixed crash caused by bad size check in Toolbar

466d5b7

fix: Linting, video banner color

0f1f8e1

refactor: Renamed landing-page folder to website

b883707

Merge branch 'feature/landing-page-styling' into feature/loading-from…

8d18a12

…-landing-page

refactor: Moved URL handling code to its own utils file

746f473

feat: Viewer retrieves URL parameters

1a16c02

feat: Landing page redirects to viewer if params are received

675591f

refactor: Code cleanup + linting

c68dff3

ShrimpCryptid requested a review from frasercl April 11, 2024 19:39

ShrimpCryptid self-assigned this Apr 11, 2024

ShrimpCryptid commented Apr 11, 2024

View reviewed changes

ShrimpCryptid added 3 commits April 11, 2024 14:08

refactor: Added default app props, typing

b167967

refactor: Removed unused defaults in url_utils

e76894c

feat: Add default error page

9003180

ShrimpCryptid mentioned this pull request Apr 11, 2024

Use browser routing (history API) instead of hash routing on #213

Closed

ShrimpCryptid added 3 commits April 11, 2024 16:36

feat: Added hash routing on public deployments

5c4f77f

fix: Fixed URL search params when using hash-based routing

b72d82d

fix: Linting

33e4990

ShrimpCryptid commented Apr 11, 2024

View reviewed changes

ShrimpCryptid added 2 commits April 11, 2024 17:02

refactor: Code cleanup

4bf2218

feat: Improved error page messaging; link styling

5b56362

ShrimpCryptid commented Apr 12, 2024

View reviewed changes

ShrimpCryptid added 4 commits April 12, 2024 09:23

refactor: Added Open Sans font files

e2cb168

refactor: Added open sans 500

b239dd2

refactor: Switched SVG files to only use basic Latin alphabet to redu…

8cb2ad9

…ce file size

refactor: Removed merriweather sans and overpass font files

3224aa9

ShrimpCryptid requested a review from toloudis April 12, 2024 17:37

ShrimpCryptid marked this pull request as ready for review April 12, 2024 18:45

ShrimpCryptid requested a review from a team as a code owner April 12, 2024 18:45

ShrimpCryptid linked an issue Apr 12, 2024 that may be closed by this pull request

landing page #188

Closed

ShrimpCryptid removed the request for review from a team April 15, 2024 21:28

toloudis reviewed Apr 16, 2024

View reviewed changes

ShrimpCryptid added 2 commits April 17, 2024 09:40

refactor: Moved website directory out of src

b6c00f0

doc: Removed stray comment

68a2c40

feat: Added props to AppWrapper for viewer settings and args

18e9fe3

ShrimpCryptid requested a review from toloudis April 17, 2024 16:47

ShrimpCryptid added 2 commits April 17, 2024 09:49

Merge branch 'main' into feature/embedded-fonts

d8deb01

Merge pull request #214 from allen-cell-animated/feature/embedded-fonts

a1b9774

- Removes the Merriweather Sans and Overpass font files and replaces them with Open Sans.

ShrimpCryptid marked this pull request as draft April 18, 2024 17:04

ShrimpCryptid marked this pull request as ready for review April 18, 2024 18:05

toloudis approved these changes Apr 18, 2024

View reviewed changes

frasercl reviewed Apr 22, 2024

View reviewed changes

website/components/LandingPage/index.tsx Outdated Show resolved Hide resolved

frasercl approved these changes Apr 22, 2024

View reviewed changes

website/components/LandingPage/index.tsx Outdated Show resolved Hide resolved

public/index.tsx Outdated Show resolved Hide resolved

website/components/AppWrapper.tsx Outdated Show resolved Hide resolved

ShrimpCryptid added 3 commits April 23, 2024 09:23

refactor: Sort imports

e06bb53

refactor: Replaced useMemo with useEffect, added missing router type

d0e8862

Merge branch 'main' into feature/loading-from-landing-page

8747501

ShrimpCryptid merged commit d69c6f8 into feature/landing-page-styling Apr 23, 2024
3 checks passed

ShrimpCryptid deleted the feature/loading-from-landing-page branch April 23, 2024 16:37

ShrimpCryptid mentioned this pull request Apr 23, 2024

feature: Landing page loading (merge into main) #223

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature: Loading from the landing page, viewer page routing #212

feature: Loading from the landing page, viewer page routing #212

ShrimpCryptid commented Apr 11, 2024 •

edited

Loading

ShrimpCryptid Apr 11, 2024

ShrimpCryptid Apr 11, 2024

ShrimpCryptid Apr 11, 2024

ShrimpCryptid Apr 11, 2024

ShrimpCryptid Apr 12, 2024 •

edited

Loading

ShrimpCryptid Apr 12, 2024

ShrimpCryptid Apr 12, 2024

toloudis Apr 16, 2024

ShrimpCryptid commented Apr 17, 2024

ShrimpCryptid commented Apr 18, 2024 •

edited

Loading

toloudis Apr 18, 2024

toloudis Apr 18, 2024

toloudis Apr 18, 2024

toloudis Apr 18, 2024

ShrimpCryptid Apr 18, 2024

frasercl left a comment

		@@ -0,0 +1,54 @@
		import React, { ReactElement } from "react";

feature: Loading from the landing page, viewer page routing #212

feature: Loading from the landing page, viewer page routing #212

Conversation

ShrimpCryptid commented Apr 11, 2024 • edited Loading

Changes:

Videos (🔊)

Validation:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShrimpCryptid Apr 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShrimpCryptid commented Apr 17, 2024

ShrimpCryptid commented Apr 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frasercl left a comment

Choose a reason for hiding this comment

ShrimpCryptid commented Apr 11, 2024 •

edited

Loading

ShrimpCryptid Apr 12, 2024 •

edited

Loading

ShrimpCryptid commented Apr 18, 2024 •

edited

Loading