overture-stack / website Goto Github PK

View Code? Open in Web Editor NEW

1.0 26.0 2.0 65.99 MB

Overture.bio website, based on Gatsby static site generator

License: GNU Affero General Public License v3.0

JavaScript 70.16% SCSS 29.84%

hacktoberfest gatsby overture genomics genomic-data-science genomic-data

website's Introduction

Overture.bio

Hosted on Netlify. See Deployment for info.
Based on the Gatsby Starter Business.

Additional READMEs

Installation

Node 16 NPM 8
Gatsby CLI: npm install -g [email protected]
Netlify CLI: npm install -g netlify-cli
npm install
Setup Netlify deployment: netlify link and choose 'Use current git remote origin'.

Troubleshooting

Overture.bio requires NPM v^8.3.0, to ensure all dependencies are installed correctly

# If you need to update your NPM version first, use the following command:
  npm i -g npm

Local development

npm start

Deployment

Check your QA builds locally! (See Environments)

Deploy to a Netlify draft URL for QA: npm run deploy
Deploy to https://overture.bio: Merge a PR into the main branch.

Environments

Gatsby has two environments: development (runs a dev server with hot reloading) and production (creates a static build in the ~/public folder).

Gatsby development and production builds are significantly different, so consider running npm run qa (prod build) occasionally to check for issues, and before deploying to QA.

Local environments

Development
- Feature flags ON
- Command: npm run dev
- Secrets and settings file: .env.development
QA (check your build before creating a Netlify link for QA)
- Feature flags ON
- Command: npm run qa
- Secrets file: .env.production (overridden by netlify.toml) (ignored by git)
- Settings file: netlify.toml, branch-deploy context
Production (check your build before deploying to https://overture.bio)
- Feature flags OFF
- Command: npm run prod
- Secrets file: .env.production (overridden by netlify.toml) (ignored by git)
- Settings file: netlify.toml, production & deploy-preview contexts

Netlify contexts

These environments only apply when deploying to Netlify. The non-secret settings are stored in netlify.toml.

production: The live site at https://overture.bio, deployed automatically by Netlify when a PR is merged into the main branch.
deploy-preview: Netlify deploys that are automatically generated when there is a PR created/updated on the main branch.
branch-deploy: Other branches and PRs, deployed manually.

Feature flags & environment variables

Feature flags in Gatsby must be environment variables.
Environment variables accessed in client-side code must be prefixed with GATSBY_.
Example: Show something in development and hide it in production:
- FLAG="true" in .env.development and Netlify branch-deploy context in netlify.toml.
- FLAG="false" in Netlify production and deploy-preview contexts in netlify.toml.

website's People

Contributors

Stargazers

Watchers

Forkers

ciaranschutte arka2708

website's Issues

Add Clarification for Format of EGO Redirect URIs

Add note in EGO docs on the proper format for EGO redirect URIs

E.g. Clarify use of forward slashes

Existing docs:
https://www.overture.bio/documentation/ego/
https://github.com/overture-stack/website/tree/develop/markdown/documentation/ego

Documentation Updates

Users have identified some documentation that does not fully aligned with the latest version of the DMS-UI.

There is no Authorize button on the swagger and the docs should reflect this: https://www.overture.bio/documentation/dms/installation/test-upload/#create-study-using-curl
"Authorize" button is not on the top right.
the bash completion (https://www.overture.bio/documentation/dms/installation/installation/#optional-steps) commands don't seem to exist in dms 1.2.0.

slackin broken

Current implementation of slackin is broken. Needs a new approach or refactor to get going again.

Create a persona page on Overture.bio

Depends on: overture-stack/persona#38

Designs: case study, DMS page, credits page

Extra designs to do:

Case study updates: add ICGC ARGO, VirusSeq, update HCMI screenshots: implementation summed up here: #173
Acknowledgement page for Canarie and remove logo on landing page. Add credits link in footer?
Design a product page for DMS and work in callouts to it from the homepage, product landing page, footer, megamenu

Broken link on Ego page for psql-schema.sql file

https://www.overture.bio/products/ego

Current link : https://github.com/overture-stack/ego/blob/develop/src/main/resources/schemas/psql-schema.sql

Should be : https://github.com/overture-stack/ego/blob/develop/src/main/resources/schemas/01-psql-schema.sql

Create Product Page for Muse

Create product page design for Muse on overture.bio

Update product status: Arranger and Maestro

Please update the product status of Arranger to Release Candidate on these pages:

Please update the product status of Maestro to Release Candidate on the website page:

https://www.overture.bio/products/maestro

Make terminal commands copyable on song page.

Deployment Tasks for Doc Site

These deployment tasks need to be done prior to doc site deployment on Mar 31:

Algolia search indexing:
1. Check that this runs when the site is built/deployed on Netlify
2. Check that Algolia keys are added in Netlify
Feature flag removal
1. Docs template
2. Docs landing page
3. Navbar (megamenu)
4. Layout - remove feature flag around , keep isDocs condition
5. Env.example & netlify.toml
6. Footer menu

Gatsby v5: investigation

Investigate updating major dependencies
- Gatsby 5
- React & React-DOM 18
- Node 18
- Other dependencies
What upgrades are involved?
What are the breaking changes?
Are all of our dependencies compatible & still actively maintained? Do we need to replace any of them?
What's the level of effort?

Add SQON Tutorial & Reference Section to Arranger Docs

The Arranger guide on the docs site (https://www.overture.bio/documentation/arranger/) is currently missing info on how to use the SQON filters.

Add a tutorial section as well as reference for filter syntax.

Create Product Page for Lectern

Create product page design for Lectern on overture.bio

Create reusable components

Overture.bio has a lot of code duplication:

buttons: especially Github buttons and the pink chevron links
pages: the Products subpages could be a reusable template made of reusable components rather than hard-coded HTML

Refactoring into reusable components would be helpful for code readability & maintenance.

Documentation: Sidebar is off the page

Do we need to specify a max-width for the tables and codeblock? I could also be the width of the content space needs to be smaller.
https://604be8b3648d6c08d09ccbd3--overture.netlify.app/documentation/song/installation/configuration/id/
in this example, can we left justify the text in table cells by default. It's usually easier to read left justified text over centered.

Fix the issue with accessing "Transfer & Store"

Clicking on "Transfer & Store" goes to "Do Science"

Update All Doc Site Links

Update all missing doc site links prior to deployment on Mar 31:

In DMS Bundle, add "For Users" under "For Administrators" --> Should link to https://overture.bio/documentation/dms/user-guide
In DMS Bundle, change "For Administrators" link to --> https://overture.bio/documentation/dms/admin-guide
Add "Coming Soon" label beside OncoJS, JukeBox, Riff, Persona in Megamenu AND in the page body (with all the product panels)
In page body remove links in the product panels for OncoJS, JukeBox, Riff, Persona
Fix the double active links issue in megamenu for "DMS Bundle" (nested link issue)
Links on Documentation Overview page:
- Installation Instructions button --> https://overture.bio/documentation/dms/installation/installation
  -"...extend the DMS system..." --> this might need to be removed, I don't think is in scope of first release (will confirm)
  -"...customize the look of my DMS..." --> https://overture.bio/documentation/dms/admin-guide/customize
  -"...release notes..." --> https://github.com/overture-stack/dms/releases
  -"...get involved..." --> https://github.com/overture-stack (may need to change will confirm)
  -"...see these products in action..." --> https://overture.bio/documentation/dms/installation/demo

Feature Request: Indent on bullets please

Layouts modifications

Revised layout of contact page to have two columns, with CTA buttons on the right
Add mail icon to the "Contact us" button

Ping Kim for assets
See mockup: https://invis.io/G3L6UX9W9H6#/296968704_Contact

Detailed Description

Add version to footer so we can visibly see at glance which version of site is in prod

Possible Implementation

grab version from package.json and put it in footer

left align codeblocks on documentation

Docs - missing "no results" search state

Need to show a message when there's no results.

Move Sapien Section to Top of OncoJS Page on Overture Website

Move the Sapien section in the OncoJS page on the Overture website to the top, before Lolliplot

This is to make Sapien more prominent

Maintain the alternating white/black backgrounds for each section, starting with white (so now Sapein will be white, followed by Lolliplot gray, etc)

Overture Project progress bar graphic

Design + image production for a vertical and horizontal progress bar - one to go on the Overture project template and one to go on the github readme section.

Documentation: Page jumping when clicking on links

If you click on a link from the content section (like "submitted data" from here: https://604be8b3648d6c08d09ccbd3--overture.netlify.app/documentation/song/installation/configuration/schema/

there's a weird page jump, as if the left sidebar isn't loading or caching.

This happens also if you click on an external link and use the browser back button, like clicking on JSON Schema link here: https://604be8b3648d6c08d09ccbd3--overture.netlify.app/documentation/song/user-guide/schema/

Add Canarie acknowledgement to Overture Documentation site

In all cases, Canarie logo links to Canarie site (open in new window): https://www.canarie.ca/

Docs landing page: https://zpl.io/bPw4ovM
DMS Docs - bottom of sidebar: https://zpl.io/2GDkdod
DMS github page:

Security Upgrade: June 092021

A needed security upgrade has been indicated:

Feature Request: API Documenation from Swagger in Docs Site

Generally good documenation sites have an api guide.

We have swagger docs for our API's that look and function great: https://song.rdpc-qa.cancercollaboratory.org/swagger-ui.htmlm but these are all custom deployments and not publically available.

We need to make this style of API documentation available. For each piece of software,

Have an API section of the documentation
Read/translate a copy of the Swagger JSON to explore the API similar to swagger. The JSON can be generated outside of a deployment to be used by the documentation portion of the website.
When we want to highlight a specific request, have a module to view the enspoin/response, similar to:
https://stripe.com/docs/api/customers/retrieve

Investigate Solution for Gatsby Pre-Fetch/Hard Refresh Issue

Internal links are currently standard HTML links which results in a hard refresh every time you switch pages. Also we can’t maintain the state of the left-hand navigation on Docs pages when you navigate between pages.

They were Gatsby/React links, but in some cases these links sent us to a blank page (i.e. when clicking on the megamenu or search results). This is a new issue likely stemming from adding significantly more content to the site. So I made them into HTML links as a hotfix.

Gatsby normally pre-fetches pages linked to the current page, but it can’t do that with the megamenu or search results because they’re hidden from view by default. It can also pre-fetch when you hover over a link, but we’re probably running into a timing issue now due to the larger amount of data. It can’t pre-fetch fast enough so it loads a blank page.

Netlify link where this is happening: https://60647eb7469043007cabd856--overture.netlify.app/documentation/song/installation/installation/

I also got error 310 on another attempt.
https://reactjs.org/docs/error-decoder.html/?invariant=300
https://reactjs.org/docs/error-decoder.html/?invariant=310

gatsbyjs/gatsby#4779
gatsbyjs/gatsby#24398

Potential solutions, all of these need investigation:

Force a refresh (the official Gatsby site does this)
Enhance server side rendering
Add a loader of some sort, when the app tries to update the route, wait for the data to fetch

Add colour variables to SVGs

SVGs on Overture.bio (i.e. in the Icon component) currently have hard-coded colour hex codes. Using CSS variables to define the colours (with a fallback for Edge) would ensure better visual consistency and reduce the level of effort for future maintenance.

Documentation: sidebar open one section, opens them all

If you click on section with subsections like "Dynamic Schemas", all of the sections with subsections open. Not sure if this was intended, but @samrichca said she would look into.

https://604be8b3648d6c08d09ccbd3--overture.netlify.app/documentation/song/user-guide/analysis/

Fix Oversized Images

Fix oversize images in all product documentation on overture.bio

Create a page for Enrolment

Depends on: overture-stack/enrolment#67

Create a page for Ego

Depends on: overture-stack/ego#64

Investigate accessibility

Determine scope of work and technical approach for making Overture.bio compliant with WCAG AA guidelines.

[UI] Case Study page: add new projects, style fix, make case studies linkable

Goal

Michelle has asked us to add VirusSeq to the overture.bio case studies page so she can tweet about it. While we're in there let's do some other updates:

Ask Kim for the folder of new screenshots.

Add new projects

Content is a WIP but will be updated in: https://zpl.io/a3J7yQN

Add ICGC ARGO as the first case study. ICGC ARGO Data Platform and check it out button open this link in a new window: https://platform.icgc-argo.org/
Add VirusSeq as the second case study. Canadian VirusSeq Data Portal and check it out button open this link in a new window: https://virusseq-dataportal.ca/
Link built in only four weeks to open this article in a new window: https://oicr.on.ca/with-astonishing-speed-oicr-team-creates-national-covid-19-genomic-data-portal/

Update existing project

Update HCMI with new screenshots
Minor content change:
Third gallery bullet point, change to Entry, validation, and bulk upload of clinical and genomic data as well as an editable data dictionary.

Styling fix

Fix the styling for the gallery - the text is illegible (check out the zeplin link for the styles).
For the hover state you can change the font to color: #0b75a2;

Add ids in the url

Michelle wants to tweet about the VirusSeq case study - so we'll need to add an id to the url. i.e. add anchors down the page so each project can be linked to externally. Also, when the user clicks on the logos in the case study nav bar, these urls should reflect what they clicked.
So the anchors would be:
ICGC-ARGO
Virusseq
Kids-First
ICGC-25K
GDC
Cancer-Genome-Collaboratory
HCMI

design overture maintenance page

when a server needs to be brought down for service, we need to redirect the user to an error or maintenance page that returns a 503 Service Unavailable.

The purpose of this task is just to design the look and put the correct text

Accessibility

Placeholder for accessibility epic.

Known accessibility issues based on Ontario.ca's How to make websites accessible

(incomplete)

Level A

Images: make sure images have alt attributes or other text alternatives
- Add alt prop to Icon component, and add alt text to non-decorative icons.
- Check other images
"Success Criterion 1.3.1 Info and relationships" & "Success Criterion 4.1.2 Name, role, value": Use ARIA attributes and semantic HTML
"Success Criterion 1.3.2 Meaningful sequence ": Make sure keyboard tab order & reading order (i.e. for screenreaders) is left to right, top to bottom.
"Success Criterion 2.1.1 Keyboard" & "Success Criterion 2.4.3 Focus order": menus need to be changed to use keyboard input and have proper tab order.
"Success Criterion 2.4.1 Bypass blocks": Add a "skip to main content" link, use ARIA landmarks to identify regions of a page (sidebars, menus, footer, header, etc).
"Success Criterion 2.4.2 Page titled": Page titles on overture.bio (i.e. at the top of the browser window) currently don't reflect their page contents.
"Success Criterion 2.4.4 Link purpose (in context)": Make sure link destinations are clear from context
"Success Criterion 3.2.2 On input" & "Guideline 3.3: Input assistance ": The search input may be failing these criteria.
To my knowledge, there's no video, audio, or gifs on this site.

Level AA

"Success Criterion 1.4.3 Contrast (Minimum)": We opened a ticket for this already.
"Success Criterion 1.4.4 Resize text": I believe this is handled by making the site responsive. When I increase my text size, the page gets re-arranged into a mobile layout as the text gets larger.
"Success Criterion 2.4.5 Multiple ways": We should add a sitemap.xml and a sitemap page, since we don't have site-wide search and sitemaps are useful for multiple things (Docs search, Google indexing, etc).
"Success Criterion 2.4.6 Headings and labels": Make sure things are labelled correctly.
"Success Criterion 2.4.7 Focus visible": Focus is hidden or hard to see across the site right now.
"Success Criterion 3.2.4 Consistent identification": Ensure things are identified consistently across the site. Should be covered by meeting other criteria listed in this issue.
"Success Criterion 3.3.3 Error suggestion": Search errors i.e. 0 results.

General

Problem areas:

Search
Navigation
Images
Semantic HTML & ARIA attributes
Colour contrast

The Ontario.ca link may not be sufficient for addressing these issues in a React/Gatsby application. Need to do more investigation on implementation details: how to make an accessible search input in React, how to make a sitemap in Gatsby, etc.

Clicking on a tab should trigger a scroll position change, which then triggers the waypoint to activate

Sorry to have to have you clean up after me

Currently the onSelect for the tabs directly sets the active tab
Waypoints also set the active tab

This results in confusing behaviour. After clicking a tab, the content changes, but the scroll position does not, so scrolling somewhere would cause the user to activate a tab that doesn't make sense

Switching the onSelect for tabs to scroll to the corresponding Waypoint element for that tab would solve this problem

Add "Join us on Slack" button

Add "Join us on Slack" button to the main nav (to the left of "Get Started")
The link will open a page similar to: http://slack.torontojs.com/
Add "Join us on Slack" as a button on the contact page

Ping Kim for assets
See mockup: https://invis.io/G3L6UX9W9H6#/296968704_Contact