Redesign 'computational Resources' page

[clansing]

This page: https://msdlive.org/computational-resources

From Casey's email 11/7/2023:

keep description for the UC eBook so let’s let that stand:

For the others, can we put them in two groups? Each group would have a short description and then just a list of the resources under the description:

Model training notebooks: “Learn how to run a variety of MSD models using these interactive model training notebooks.” a. statemodify b. gcamwrapper c. xanthos d. stiches e. hector Interactive data dashboards: “A relatively new feature in MSD-LIVE, we now support interactive data dashboards where users can explore the data underpinning new publications by MSD researchers.” a. lafferty-sriver-2023-downscaling-uncertainty Happy to look at any tries at this on dev. In the future I’d like someone to take a stab at a novel, clean way to display/describe these resources. I dunno what that looks like.

[zguillen]

.

[zguillen]

Lets gather ideas from the team and have Matt do some mockups. We also need a UI that highlights and showcases notebooks since those will be the big new feature for our next release. Carina's old mockups might have something.

Some ideas:

• Screenshots of something cool going on in the notebook on a carousel.
• New section on 'Data Repository' page that lists notebooks
• "breaking news' type of banner across the tippy top 'Check out this new notebook/dashboard!'

[zguillen]

you can view the notebooks by copying the name into https://...name goes here...msdlive.org

[jugovimm]

Draft for Computation Resources Mockup

Notes

• Title blocks are not dropdowns, and all content renders initially
• Under "Model Training Notebooks", we may want to provide a short description of each notebook to simply fill the space left by the short notebook names; we may also want to lengthen that section's general description too (from a design standpoint)
• See further notes here (Resources Page mockup draft): https://github.com/orgs/MSD-LIVE/projects/5/views/1?sliceBy%5BcolumnId%5D=Assignees&sliceBy%5Bvalue%5D=jugovimm&pane=issue&itemId=44055096

Mockup

[zguillen]

Looks good! I really like how the screenshots make the page more appealing visually. One issue though: the screenshot of the notebook I think needs to be closer to the name/link or somehow tied together if I'm understanding the mockup correctly. For example, the blue word hector is a link that will open a new tab to the notebook but the screenshot of it will not be rendered initially and the user might not know to click the right arrow button in order to see it...

[jugovimm]

Computational Resources Redesign v2

Central Navigation Page

• Each block, when clicked, sends the user to its respective sub-page

Uncertainty Characterization

• Because the eBook is the only content on this page, there is no page description, just the one for the eBook
• If the title is too wide, as in this instance, it will simply wrap to the next line, as well as the "Open" button
• The "Open" button links directly to the eBook (if it's an external link, a square-arrow icon should accompany the button)

Model Training Notebooks

• Given we expect a couple dozen of these notebooks:
  • A search bar to filter the notebooks has been provided
  • Pagination should be included so only a handful of results are present per page
• The "Open" button links directly to our page which hosts the notebook
• Each carousel on the left houses a few images or so from the notebook
  • The greyed out side arrow panels mean the user cannot pan that direction (ex. at the start or end of the list of images)
• The "Back to Top" button resets the scroll to the top

Interactive Data Dashboards

• We also expect dozens of these into the future, so this page is very similar to that for Model Training Notebooks

[jugovimm]

Example update to computational resources page

• Note the changes to search and the styling for presentation of notebooks
• The dropdown on the right replaces the search box when the user clicks to begin typing a search term

[zguillen]

UPDATE: ignore my request for review for now @cdburley Matt and I met and another iteration is coming, but each one is getting closer to the final product, I promise :)

Carina and I met to get her and my thoughts on the mockups aligned and ended up with this plan. @cdburley let us know what you think:

1. We propose a page like this one with a sample image, alternating left and right, a blurb, and a Learn more link that takes you to that page for the computation resources menu page. We liked the alternating background color but will see if it works or not with our site's look and feel. The UC E-Book’s learn more would go to that e-book page though, not another msd-live page:

2. The Model Training notebooks and Interactive Data Dashboards' Learn more links would go to a page like this with a title, blurb, and then a list with 1 image on the left, words to the right, the title is a link that would go to the notebook or dashboard:

3. The screenshot in number 2 above would be the template used for all new pages that list things, including tutorials and webinars pages. The screenshot in number 1 above would be the templated used for all new nav pages (so it would be used for a new Resources page that links to webinars, tutorials, and articles)

[cdburley]

Sounds like a good plan. I look forward to the next round of designs from Matt J. with these suggestions incorporated.