New desktop header #4598

jenibelle08 · 2024-09-07T00:03:04Z

Description

This PR is an initial version of the desktop menu for the homepage revamp. The mobile menu is temporarily removed, so that the desktop menu can be reviewed in isolation.

This PR is not intended for merge into master until the completion of the homepage revamp

Notes

There is still some refactoring and cleanup to do (particularly in the CSS) that will be done as part of a subsequent larger PR that includes the mobile menu. However, the functionality of the desktop can be previewed.

* Add semicolon to server script * Update .gitignore for IDE * Moved the onload functionality into a separate function and fixed typing. * Conversion of homepage.html to React. The homepage now passes template variables to main.ts, which initializes a React app. All homepage components are now implemented via this React app. Typing files that could potentially be shared later were put into typing files in the shared directory. * The backend is now sending the topics to the homepage as json, removing the need for json treatment on the front-end. * The header and footer of the base template are now React apps. A note that we will have to convert in a subsequent push all existing onLoad calls for existing React Apps to use an event listener to allow multiple apps to be called on one page from different places. There is also room for some refactoring and cleanup. * Converted the extraction of translated label meta-data into a loop rather than having it be explicit. * Conversion of window.onload calls to window.addEventListener. The trigger for this change is the chance that we might get multiple window.onload assignments in different places (with only the last applied assignment being run). This became an issue when the base template was given JavaScript (for the header and footer). It isn't a further issue yet because those are using addEventListener, but by pre-emptively converting all window.onloads, we prevent future clashes. * With the goal both of abstracting the data from the content of the header and footer (the menus) and to facilitate customization, the base components have been reworked. The metadata passed to the front-end via the Jinja templates have been separated out from the main template, and the dictionaries they tie into are no longer strict TypeScript objects, but records. They store as keys the original text, and as a value the translation. The objects themselves are proxies that return the original text back if a translation does not exist. This makes the interaction between the templates, the TypeScript/JavaScript and the React components more flexible. The routing has been reworked in the same way. The header and footer menus themselves are json files located in a data directory inside the base app section. They can be overridden to make custom menus by saving them as "header_custom_dc.json" in the same directory and customizing that file (likewise with footer). The webpack configuration is updated to facilitate these optional imports. * The json that supplies the header and footer menu items is now moved to the backend and injected into the context of every endpoint. We still need to consider a simple way to allow for the overriding of this for custom templates. * Update .gitignore for IDE * Moved the onload functionality into a separate function and fixed typing. * Conversion of homepage.html to React. The homepage now passes template variables to main.ts, which initializes a React app. All homepage components are now implemented via this React app. Typing files that could potentially be shared later were put into typing files in the shared directory. * The backend is now sending the topics to the homepage as json, removing the need for json treatment on the front-end. * The header and footer of the base template are now React apps. A note that we will have to convert in a subsequent push all existing onLoad calls for existing React Apps to use an event listener to allow multiple apps to be called on one page from different places. There is also room for some refactoring and cleanup. * Converted the extraction of translated label meta-data into a loop rather than having it be explicit. * Conversion of window.onload calls to window.addEventListener. The trigger for this change is the chance that we might get multiple window.onload assignments in different places (with only the last applied assignment being run). This became an issue when the base template was given JavaScript (for the header and footer). It isn't a further issue yet because those are using addEventListener, but by pre-emptively converting all window.onloads, we prevent future clashes. * With the goal both of abstracting the data from the content of the header and footer (the menus) and to facilitate customization, the base components have been reworked. The metadata passed to the front-end via the Jinja templates have been separated out from the main template, and the dictionaries they tie into are no longer strict TypeScript objects, but records. They store as keys the original text, and as a value the translation. The objects themselves are proxies that return the original text back if a translation does not exist. This makes the interaction between the templates, the TypeScript/JavaScript and the React components more flexible. The routing has been reworked in the same way. The header and footer menus themselves are json files located in a data directory inside the base app section. They can be overridden to make custom menus by saving them as "header_custom_dc.json" in the same directory and customizing that file (likewise with footer). The webpack configuration is updated to facilitate these optional imports. * The json that supplies the header and footer menu items is now moved to the backend and injected into the context of every endpoint. We still need to consider a simple way to allow for the overriding of this for custom templates. * Updated the home page to use the newer routing flow introduced during work on the base section. * Update Ids set in loop to be set based on a sluggified version of the label. --------- Co-authored-by: Jennifer Blumberg <[email protected]>

- The Github Repository link is added into the footer. - A fix has been applied so that boolean flags pulled from the templates are recognized regardless of the case (this solves the issue where the full footer was always displaying). - TRANSLATORS tags are returned to the templates. Note that some `trans` tags did not have TRANSLATOR tags in the original templates (this is easier to see now that the tags are all in one place). - Comments have been added to functions exported from utilities. - general.ts has been folded into base.ts.

…data-hompeage" (for future collision-proofing), added copywrite note and descriptor to typing files that did not have them.

…e page as the new homepage diverges, we are forking the new homepage to a "_v2". Currently, we are only generating a version two of the JavaScript file, but as we restyle, we will generate a version 2 of the CSS as well. This way, templates that include the old .js and .css files will continue to work as they do now.

…ersion).

…y called once.

… page, and some minor TypeScript fixes. We also added in some missing comments.

We were somewhat limited in how efficiently we could clean up the labels with macros because of the translators tags.

…ric.

…not exist.

…and non-existent routes now throw errors.

…as not been styled to match the design. As part of this commit, we have defined the header structure for the data source that populates the rich menu (a somewhat more complicated structure than the previous header). We have separated the natural languages search bar component into a parent that calls one of two variant implementations in order to accommodate both the header version (which will be quite different in how it looks) and the standard version.

…uch as feeback) that do not trigger a rich menu. This also pushes an initial (very WIP) setup for the mobile menu.

…the footer.

… single bottom border sliding to accommodate the size of the content. Added some transitions to animate the incoming content.

…commons-website into feature/header

…te that this is still substantially unstyled.

…lable to all pages. The header CSS is now renamed to core (and will also provide footer CSS).

…(so that the menu does not follow the user down the screen). This is an issue only if the user uses the scroll wheel while the menu is open.

…er/datacommons-website into feature/header-mobile

# Conflicts: # server/config/base/header_v2.json # static/js/apps/base/components/header_bar.tsx # static/js/apps/base/components/menu_desktop.tsx # static/js/apps/base/components/menu_desktop_rich_menu.tsx # static/js/shared/types/base.ts # static/webpack.config.js

beets

thanks for this - it's nice to see it working across the site. i added some comments - they are mostly very minor and have to do with naming. could you add them as todo's and we can merge this.

beets · 2024-09-08T16:21:40Z

server/config/base/header_v2.json

+      {
+        "title": "Other Data Commons",
+        "items": [
+          {
+            "title": "Biomedical Data Commons",
+            "url": "https://docs.datacommons.org/datasets/Biomedical.html",
+            "type": "external",
+            "description": "Data Commons has invested into harmonized other domain specific topics like Biomedical data"
+          }
+        ]
+      },


please drop this section for now.

beets · 2024-09-08T16:23:27Z

server/__init__.py

@@ -444,7 +444,8 @@ def add_language_code(endpoint, values):
  def inject_common_parameters():
    common_variables = {
      'HEADER_MENU': json.dumps(libutil.get_json("config/base/header.json")),
-      'FOOTER_MENU': json.dumps(libutil.get_json("config/base/footer.json"))
+      'FOOTER_MENU': json.dumps(libutil.get_json("config/base/footer.json")),
+      'HEADER_MENU_V2': json.dumps(libutil.get_json("config/base/header_v2.json")),


could you add a todo here to replace HEADER_MENU

beets · 2024-09-08T16:23:57Z

server/config/base/header_v2.json

+[
+  {
+    "label": "Overview",
+    "ariaLabel": "Data commons overview",


Suggested change

"ariaLabel": "Data commons overview",

"ariaLabel": "Data Commons overview",

beets · 2024-09-08T16:25:57Z

static/css/core.scss

+
+// Styles
+
+#main-nav-v2 {


Can we drop the -v2 prefixes? Let's assume we're going forward with the new design..

beets · 2024-09-08T16:27:39Z

static/css/core.scss

+        transition: max-height 0.4s ease-in-out;
+      }
+
+      .rich-menu-content{


super nit: pelase add a space before {

beets · 2024-09-08T16:30:49Z

static/css/core.scss

+    align-items: stretch;
+    gap: 32px;
+    margin: auto;
+    max-width: 1920px;


I'm hoping these will get lifted up as variables where it makes sense

Yes! We've already started doing that in the next branch coming in.

beets · 2024-09-08T16:40:04Z

static/js/apps/base/components/menu_desktop.tsx

+  const handleMouseLeave = (): void => {
+    resetMenu();
+  };


this seems very eager to close the menu. i wonder if we'll need a timer before triggering the menu close - wdyt @miss-o-soup ?

I've added a little timer (that we can easily remove or change the duration of) to make it a bit less eager to close. Perhaps @miss-o-soup we could do a screen-sharing demo and pick a good duration together? I'll add in a TODO to verify the duration.

beets · 2024-09-08T16:47:11Z

static/js/apps/base/components/menu_desktop.tsx

nit: could we add a header_bar subfolder here, and move the header related files there? since "menu_desktop" sounds like a generic component but it's really header specific. thanks

beets · 2024-09-08T17:04:03Z

static/js/apps/base/components/menu_desktop_rich_menu.tsx

+  open,
+}: MenuDesktopRichMenuProps): ReactElement => {
+  return (
+    <div className={`rich-menu-content ${open ? "open" : ""}`}>


this looks like the only difference between desktop and mobile -- can we fold both into the same component (ok to add a todo for now).

I've added this TODO in. I won't do the actual folding just yet, in case over the review process the two components diverge significantly (probably unlikely).

… rich desktop menu container. This push also contains a rename of the class, removing the v2 in anticipation of moving over to the new design, a capitalization fix and removal of a section in the content of the headers.

…e closing of the menu.

…eader menu when ready.

…n directory).

…obile components together (if no changes come to fork their functionality).

dwnoble

Looks great!

dwnoble · 2024-09-08T22:35:43Z

server/config/base/header_v2.json

@@ -0,0 +1,203 @@
+[


We'll have to think about a good way to add translations to these strings (in a follow-up pr)

dwnoble · 2024-09-08T22:45:36Z

static/js/apps/base/components/header_bar/menu_desktop_rich_menu.tsx

@@ -0,0 +1,74 @@
+/**


(For a follow-up PR): When scrolling down the page with the menu open, the menu sticks to the top.

### Description This PR is an initial version of the desktop menu for the homepage revamp. The mobile menu is temporarily removed, so that the desktop menu can be reviewed in isolation. *This PR is not intended for merge into master until the completion of the homepage revamp* ### Notes There is still some refactoring and cleanup to do (particularly in the CSS) that will be done as part of a subsequent larger PR that includes the mobile menu. However, the functionality of the desktop can be previewed. --------- Co-authored-by: Nicholas Blumberg <[email protected]> Co-authored-by: Nick B <[email protected]> Co-authored-by: Pablo Noel <[email protected]>

nick-next and others added 30 commits September 2, 2024 22:58

File, path and import renaming.

4393072

File formatting, tagged the homepage metadata data container as "meta…

8b3ac39

…data-hompeage" (for future collision-proofing), added copywrite note and descriptor to typing files that did not have them.

Following up from the previous commit, the .ts file for v2 (the new v…

8758913

…ersion).

Factored out the calls to document.getElementById so that it is onl…

3b788c1

…y called once.

Commenting of interfaces, interface properties and files.

d468964

This push brings back the application container for the original home…

ea913a3

… page, and some minor TypeScript fixes. We also added in some missing comments.

Used macros to help render the label and route data containers.

db7146f

We were somewhat limited in how efficiently we could clean up the labels with macros because of the translators tags.

Updating the label and route proxy objects to take the type as a gene…

4bf9b18

…ric.

The label proxy object now emits a log when the requested label does …

8ff02ae

…not exist.

Template routes must now be wrapped in {} in order to be resolved, …

9d35401

…and non-existent routes now throw errors.

WIP We now have the ability to put direct links in the header menu (s…

12abba5

…uch as feeback) that do not trigger a rich menu. This also pushes an initial (very WIP) setup for the mobile menu.

Menu Styles WIP

c6b98d5

better search bar

859a19f

Added in {} tags to remaining routes, and removed an extra logo from …

baeeb68

…the footer.

Menu WIP shadow + arrows

1edc0e6

Menu item link coloring update.

585cc29

Improvement over menu item behaviour

8991754

Animated icon when page is open.

166e32e

WIP improvements for the menu

dfe6c21

Added in TODOs to be resolved before the final PR.

17a6c45

Improvements on menu structure and sizes

37ef92a

Cleaned up the menu sliding action so that it has the appearance of a…

8c97b7b

… single bottom border sliding to accommodate the size of the content. Added some transitions to animate the incoming content.

Update header content to include missing links.

6e6c296

Minor tweaks to the header styles.

bdbd474

Temporarily removed the stand-in for the mobile menu toggle button.

149f0fe

Breakpoints and responsive spacing

6eae1b4

nick-next and others added 4 commits September 6, 2024 15:07

Merge branch 'feature/homepage-revamp' into feature/header

1162697

Refactor search bar component to fix Firefox Issue

a425a31

Merge branch 'feature/header' of https://github.com/Half-Integer/data…

bc80cda

…commons-website into feature/header

new desktop header

1466751

jenibelle08 marked this pull request as draft September 7, 2024 00:05

nick-next added 4 commits September 6, 2024 21:04

WIP: implementation of the mobile menu version of the rich menu. A no…

49aed83

…te that this is still substantially unstyled.

Some refactoring of how the header CSS is applied, so that it is avai…

63423d2

…lable to all pages. The header CSS is now renamed to core (and will also provide footer CSS).

Added in a missing route resolver.

50d4966

If the user scrolls and the desktop rich menu is open, it now closes …

52e4993

…(so that the menu does not follow the user down the screen). This is an issue only if the user uses the scroll wheel while the menu is open.

dwnoble requested review from dwnoble and beets September 7, 2024 18:26

pablonoel and others added 9 commits September 7, 2024 14:59

better styles for mobile menu

c30cf86

Some component renaming

34e917f

Mobile Menu Design Details

16c4fde

Merge branch 'feature/header-mobile' of https://github.com/Half-Integ…

41fe22e

…er/datacommons-website into feature/header-mobile

Small fix on hamburger menu icon font size

f914dd1

Removal of unused prop.

34b79ea

Visual fixes

e77f40d

Removal of unneeded files and imports, as well as an unneeded prop.

027772c

beets approved these changes Sep 8, 2024

View reviewed changes

nick-next added 5 commits September 8, 2024 14:13

Added in a timer (with a TODO to review the length of it) to delay th…

a786739

…e closing of the menu.

Added in a TODO on the server side for moving to version two of the h…

476a2e9

…eader menu when ready.

Directory refactor (placing the header-related components in their ow…

3ac04d6

…n directory).

Added in a TODO for the potential to fold the rich desktop and rich m…

0e28fcc

…obile components together (if no changes come to fork their functionality).

dwnoble approved these changes Sep 8, 2024

View reviewed changes

dwnoble marked this pull request as ready for review September 8, 2024 22:49

dwnoble merged commit a89a191 into datacommonsorg:new-homepage Sep 8, 2024
1 of 2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New desktop header #4598

New desktop header #4598

jenibelle08 commented Sep 7, 2024

beets left a comment

beets Sep 8, 2024

beets Sep 8, 2024

beets Sep 8, 2024

beets Sep 8, 2024

beets Sep 8, 2024

beets Sep 8, 2024

nick-next Sep 8, 2024

beets Sep 8, 2024

nick-next Sep 8, 2024

beets Sep 8, 2024

beets Sep 8, 2024

nick-next Sep 8, 2024

dwnoble left a comment

dwnoble Sep 8, 2024

dwnoble Sep 8, 2024

	"ariaLabel": "Data commons overview",
	"ariaLabel": "Data Commons overview",


		// Styles

		#main-nav-v2 {

New desktop header #4598

New desktop header #4598

Conversation

jenibelle08 commented Sep 7, 2024

Description

Notes

beets left a 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

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

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

dwnoble left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment