Giter Club home page Giter Club logo

portal-ui's Introduction

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Feature flags

This is a simplified list of the available functionalities in this app,

Variable Name Default Description
NEXT_PUBLIC_ENABLE_DOWNLOADS false Enables downloading data at "Exploration" and "Data Releases" pages
NEXT_PUBLIC_ENABLE_LOGIN false Allows submitters to login
NEXT_PUBLIC_ENABLE_REGISTRATION false Allows new submitters to register

portal-ui's People

Contributors

justincorrigible avatar samrichca avatar andricdu avatar scottcain avatar leoraba avatar b-f-chan avatar rosibaj avatar lepsalex avatar yalturmes avatar anncatton avatar

Stargazers

Austin Richardson avatar Cornelius Roemer avatar  avatar Emmanuel Robert Ssebaggala avatar Natalie Knox avatar  avatar Nithu John avatar Marc Perry avatar

Watchers

 avatar James Cloos avatar Melanie Courtot avatar  avatar  avatar Natalie Knox avatar  avatar Christina Yung avatar  avatar Bhavik Bhagat avatar

portal-ui's Issues

UI Updates After schema changes

  • Change the TSV export to all available columns
  • Change the instructions on the submission page:

Virus metadata is submitted as a .tsv file. Viral genome data must be submitted as a .fasta file. Up to 5000 samples can be submitted in a single submission, but note that the larger the file the longer the submission will take. FASTA files are accepted individually, or as a single concatenated FASTA containing all samples in one file.

To format your viral sequence metadata:

  1. Download the metadata TSV Template for the viral sequence metadata and populate it with accepted values for each field. A reference of the accepted values can be found in this resource.
  2. DataHarmonizer is a tool that can be used to help validate the accepted values for each field in your metadata TSV locally before submitting. Download the tool and follow the instructions on the Github repository to validate metadata before submission.
  3. If you are using Excel or Google sheets, make sure all characters are UTF-8 encoded.

To format your viral sequence files:

  1. Make sure they have the file extension .fasta, .fa, or zipped fastas in .gz format.
  2. Each sequence must be preceded be a description line, beginning with a > character. The description line should include >hCoV-19/country/identifier/year sequenced. This identifier must match exactly the "fasta_header_name" column in the metadata TSV file.

API: Upload Errors - Identify, Map, and Implement


  • After identifying each case, implement the error casing.

Expected testable Outcomes

From the Upload Endpoint, use files to test each of these cases identified:

  • Upload File errors
  • Payload Generation Errors
  • Song and Dance Submission Errors

Profile Page Updates

  • copy JWT not API Key
  • when you copy, refresh he JWT

See Zeplin for changes: https://zpl.io/addyQoR
image.png

  • UI bug - the user dropdown is outside of the browser width, causing a horizontal scrollbar to appear on the page.
    image

Update Submission Instructions text

Update the text to this:

To format your viral sequence metadata:

  1. Download the metadata TSV Template for the viral sequence metadata and populate it with accepted values for each field. A reference of the accepted values can be found in this resource.
  2. DataHarmonizer is a tool that can be used to help validate the accepted values for each field in your metadata TSV locally before submitting. Download the tool and follow the instructions on the Github repository to pre-validate each field in your metadata before submission.
  3. If you are using Excel or Google sheets, make sure all characters are UTF-8 encoded.

Links:

Homepage + Footer Updates

Zeplin link: https://zpl.io/VYqrkrw

  • Since we don't have a chart, please revise the stats display. If we can make the banner a bit shorter, let's do so (as long as the researcher picture isn't cut off too much)
    image

  • Add the COVID Cloud callout at the bottom.
    External links open in a new window:
    DNAstack links to: www.dnastack.com
    the COVID Cloud logo and Explore VirusSeq Data on COVID Cloud link to https://virusseq.covidcloud.ca/
    image

  • Add github link to the right of the overture logo, opens in new window and links to: https://github.com/cancogen-virus-seq
    image

  • Add "About the Team" button to the banner - links to new page from: #29

Suppress Duplicated Data

  • there are 10 duplicated samples from the Jul 13 AB Data Upload
AB_47576
AB_47577
AB_47578
AB_47579
AB_47580
AB_47581
AB_47582
AB_47583
AB_47584
AB_47585
  • Suppress the duplications in analysis

Incorrect sample collection date

Apologies if this isn't the correct issue tracker to report this. I just noticed that sample L00248453 has a collection date of 2011-01-01, which is very unlikely and not consistent with the year field in the sample name (isolate).

Re-enable Downloads + Visible columns

  • Add the download functionality BACK on the search page (e.x #32)
  • Now that the questionable data has been suppressed, we can add some columns back as visible to the platform:
    • Add the Isolate column as an option to select for columns
    • Add host age as a facet, and option for selection in the column. This should be a default visible column.

Update Submission instructions

On the submission UI Dashboard, these instructions are wrong:

image

Change the instructions to this blurb:

Virus metadata is submitted as a .tsv file. Viral genome data must be submitted as a .fasta file. Up to 5000 samples can be submitted in a single submission, but note that the larger the file the longer the submission will take. Fasta files are accepted individually, or as a single concatenated fasta containing all samples in one file.

To format your viral sequence metadata:

  • Sequence metadata must be provided in TSV format according to the accepted values for each field. A reference of the accepted values can be found in this resource.
  • DataHarmonizer is a tool that can be used to help validate your metadata TSV locally before submitting. Download the tool and follow the instructions on the Github repository to pre-validate your metadata before submission.
  • If you are using Excel or Google sheets, make sure all characters are UTF-8 encoded.

To format your viral sequence files:

  • Make sure they have the file extension .fasta.
  • Each sequence must be preceded be a description line, beginning with a >. The description line should include >hCoV-19/country/identifier/year sequenced. This identifier must match exactly the "Isolate" column in the TSV file.

Links:

no1: https://github.com/Public-Health-Bioinformatics/DataHarmonizer/blob/master/template/canada_covid19/SOP.pdf
no2: https://github.com/Public-Health-Bioinformatics/DataHarmonizer

Bug: Email verification link and logging in should just load the dashboard

Steps taken

This is happening in production and dev sites.

  1. Register a new user through keycloak page
  2. Click on Link to e-mail address verification from the email (I'm logged in to my email at this point)
  3. The site opens in the browser. I first see a white page, then the pre-loader, then the login page loads (https://virusseq-dataportal.ca/login) then the dashboard loads
  4. This happens when I logout and log back in as well

Expected Outcome

  • When redirecting to the logged in dashboard, just display the loader then load the dashboard. Do not display that login page first

Add Links to Site Banners + Permanent Banner

  • Add the ability to add links to banners.
  • Add this Banner
    Banner Type: Info and Dismissible
    Banner Title: IMPORTANT: Data Acknowledgement
    Banner Content: You may use the data from the Canadian VirusSeq Data Portal to author results obtained from data analyses, provided that your published results acknowledge the Canadian Public Health Laboratory Network (CPHLN), CanCOGeN VirusSeq, and all laboratories having contributed data. The full acknowledgement and data use policy can be found here. Please note that the data that is being shared is the work of many individuals and should be treated as unpublished data. If you wish to publish research using the data, contact us at [email protected] first to ensure that those who have generated the data can be involved in its analysis. You are responsible to make the best efforts to collaborate with representatives of the data providers responsible for obtaining the specimen(s) and involve them in such analyses and further research using such data.

links

🚨🚨🚨 Facets are not rendering 🚨🚨🚨 10001 buckets

https://virusseq-dataportal.ca/explorer
imageimage

      "path": [
        "file",
        "aggregations"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "name": "ResponseError",
          "meta": {
            "body": {
              "error": {
                "root_cause": [],
                "type": "search_phase_execution_exception",
                "reason": "",
                "phase": "fetch",
                "grouped": true,
                "failed_shards": [],
                "caused_by": {
                  "type": "too_many_buckets_exception",
                  "reason": "Trying to create too many buckets. Must be less than or equal to: [10000] but was [10001]. This limit can be set by changing the [search.max_buckets] cluster level setting.",
                  "max_buckets": 10000
                }
              },
              "status": 503

Google Analytics

  • basic implementation
  • some components
  • remove dev IPS in the filter.

About the Team page

Schema and field updates

We have a new Song Schema: https://github.com/cancogen-virus-seq/metadata-schemas/blob/main/schemas/consensus_sequence.json

  • Make sure its updated in prod cancogen song:
  • Update the Maestro mapping to reflect new fields
  • Update the Arranger project to read the new indexed fields, and arranger configs.
    • Every field should show as a facet
    • age/integer slider facet gets correctly initialized to work with the component

Study level Permissions

  • define study level polices
  • change the song.score configs to know the format of the study level policies
  • update MUSE to look at study-permissions instead of egoid
    • If a submitter submits something for a study they don't have permissions for, then reject the submission and ask them to remove those payloads

Add communication banner to the portal UI

  • With upcoming shutdowns from Scinet and Collab maintenance, the Virus-seq portal will become unavailable for short periods of time.
  • We will need to be able to communicate the outage alerts leading up to the scheduled maintenance via a banner along the top of the portal UI.
  • The text will need to be easily updated via github.

Add new fields to VirusSeq portal - all layers

There will be additional fields added to the virus-seq dataset:

  • 4 new, optional fields.
  • the isolate field is no longer required, thus muse cannot rely on it to associate payloads/files.
  • 1 new required field fasta_header_name. This field should replace all functionality of the isolate field.

Steps to Update

Homepage and team page wording change.

For transparency let's change the wording to this

Genome Canada has also partnered with DNAstack to integrate VirusSeq data with their COVID Cloud Platform. COVID Cloud is a cloud-based platform that helps researchers find, visualize, and analyze genomics and other datasets related to COVID-19.

in these two spots

  • homepage
    image

  • Meet the team page
    image

Support External Read Only Site for Maintenance - Needed June 9-11

  • UI Pages only
  • remove submitter login in footer
  • disable the explore tab, and the explore button from homepage
  • No new data can be posted.
  • hosted on Netlify
  • Add a warning banner to this site with the text:
Data exploration, download and upload are currently unavailable due to site maintenance.  Service should return shortly after the maintenance window completes on June 9. 

UI/BE: Send to Data Curation

  • Add UI flow for users to send to curation
  • Once submitter sends to curation, add to a curation bucket. the TSV/FASTA files can be named based on study_id/egoid to identify the attempted submission
  • When objects are added to the bucket, notify the data curation team.

OPTION 1: use collab, deploy KAFKA write to KAFKA queue, and read send email to helpdesk.
OPTION 2: use aws, pipeline and sns publish. free tier possible can work.

Change the data ingestion process

Currently: metadata/fasta uploaded → validated → reformatted → submitted to Song/Score → indexed by Maestro → released to Portal
Modified to: metadata/fasta uploaded → validated → stored in S3 bucket → curator reviews within 24 hours
if no problem → curator approves → data reformatted → submitted to Song/Score → indexed → Portal.
Problem case 1 → curator emails submitter and recommends changes → submitter resubmits
Problem case 2 → curator changes data directly → curator approves

Support external maintenance page for virus-seq portal

  • With upcoming shutdowns from Scinet and Collab maintenance, the Virus-seq portal will become unavailable for short periods of time.
  • During the outage (scheduled or otherwise), we will need have users directed to a maintenance page. This can be manually triggered.
  • Since the virus-seq portal is hosted entirely on Collab, this page will need ot be hosted externally. Netlify was suggested as an option.
  • virus-seq coordinate the dns change. let's make sure the DNS TTL's (Time To Live) are low.
    • Dont' want the DNS change to take forever to propogate

Maintenance page UI

We are just going with a similar design to the login page. Ping Kim for the background image.

Zeplin: https://zpl.io/br3GAg7

  • Regarding footer: keep the footer but hide the Policies and Submitter Login links

image

Add authorized login to portal

  • Add login button to portal.
  • When user logs in and gets navigated to the Submission Dashboard page. Right now, this page can just be blank (or put some template text or something) with the expected header/footer.
  • Dashboard link appears in header and is selected for the user.

UI Feedback round 2

Search page

  • Scroll bar on dropdown needs to be removed (windows/Google Chrome)
    image.png
  • make the numbers font size 12
    image
  • remove # files in facet
  • Footer link order. Please use the following order: "About CanCOGeN • Policies • Contact Us • Submitter Login"
    image

Modify Download button

image.png

  • Change "File Table" to "Metadata Table" - downloads the metadata tsv
  • Change "File Manifest" to "Consensus Seq" - downloads the fasta file (GZip/XZ)

Report Authentication Error on Submission better

  • As user rosi@oicr I have access to the MUSE-KHSC-ON project.
  • if i submit payloads for studies that i don't have access to (MUSE-UHTC-ON) , this is the error that i see from the UI
    image.png
  • this is not informative to me. Looking in the response i do see this (below) that MUSE is correctly rejecting an upload for a study that I do not have permission to give access to.
    image.png

Theming/Styling Keycloak pages

  • Update the theme to design: https://zpl.io/brqjAy5
  • Add common password restrictions [at least 8 characters, one number one symbol]
  • Add terms and conditions page into the flow with permission.
  • Update the email copy (@rosibaj please provide copy for this) on account verification.
  • Figure out how to add the Keycloak theme to the production deployment
  • Change "VirusSeq Porta" to "VirusSeq Data Portal"

UI Styling Feedback: Search Page

Header

  • Change “About VirusSeq Portal” to “About VirusSeq Data Portal”
  • Change “Explore COVID-19 Data” to “Explore VirusSeq Data”
  • Make the fonts for both bold

Footer

  • Make the text not bold
  • Make the Genome Canada logo bigger. Note for @caravinci when you make this larger can you decrease the top and bottom padding just around this logo, so the footer doesn't get much bigger than it already is? if not, that's fine
  • Remove Genome Canada link (the logo already links)
  • Change “2021 CanCOGeN VirusSeq Data Portal” to “2021 Canadian VirusSeq Data Portal

Landing page

  • Replace The goal of VirusSeq ...and ensuring data access to the research community. with The goal of the CanCOGeN VirusSeq project is to sequence up to 150,000 viral samples from Canadians testing positive for COVID-19. The VirusSeq Data Portal is an open-source and open-access data portal for all Canadian SARS-CoV-2 sequences and associated non-sensitive clinical/epidemiological data. It harmonizes, validates and automates submission to international databases.
  • Make the above text not bold.
  • Under “Impact on Canadians”, change “Genomics-based” to “Genomic-based”; “COVID-19 virus” to “SARS-CoV-2 virus”

Explorer

  • Facet categories, eg. “Analysis Type”, “File Type”, make the fonts smaller, about the same size as “Filters” at the top.

  • Facet restyling.
    image

  • selected values: use the darker blue from this mockup (the lighter blue isn't accessible) https://zpl.io/awzeOmK
    image

  • Download link to docs - @rosibaj is there a page explaining how to download data with a file manifest? I couldn't find this. Also add a period to this sentence.
    image

  • I think this should say "Start by selecting filters." As we call them filters in the title, and technically you are selecting "values" not fields.
    image

  • Make the text in the top right and y axis # Viral Genomes so # Viral Genomes by Province. The tooltip should be fine; the label Host Age is clear.
    image

  • I thought we were going to show age "bins"? otherwise will this chart be each individual age that's in the portal?
    image

  • Should we specify what this number is counting for clarity. [not urgent will save for later if desired]
    image

Brand

Submitter Login page

  • you could use the same font style as the paragraphs on the homepage, this seems a bit small.
  • Change "COVID-19 Data is submitted" to "Viral genomes are submitted"
  • the "request an account" link could link right to the CanCOGen contact form, as well as the footer "contact us" link: @rosibaj Thoughts? https://www.genomecanada.ca/en/cancogen/contact-us

image
image

Portal UI updates

  • Remove "As of April 27, 2021" from the landing page. This should ideally be auto updated with the latest submission date. For now, remove.

image.png

  • Expose the specimen collector sample ID in the table column by default; this should be the first column in the table by default.

Homepage text updates

  • Some small text updates:
    First paragraph:
The goal of the CanCOGeN VirusSeq project is to sequence up to 150,000 viral samples from Canadians testing positive for COVID-19. The VirusSeq Data Portal is an open-source and open-access data portal for all Canadian SARS-CoV-2 sequences and associated non-personal contextual data. It harmonizes, validates and automates submission to international databases.

later fix lab --> laboratories

among Canadian public health laboratories, researchers and other groups interested in accessing the data for research and innovation purposes.
Microbiology Laboratory and provincial public health laboratories across the country.

Add Download All and disable logic for download options

  • DOWNLOAD ALL will be in the header, a pill, this will appear along the navigation bar on the landing page.
  • Grey out other download options if no rows selected. Disable the dropdown, OR disable the options are both acceptable approaches.

API: Upload files - Scheama Validation

Outstanding and Needed

  • finalized song schema
  • finalized TSV schema that maps to analysis schema
  • finalized TSV that the user will submit

Scope of this ticket

  • Implement TSV validation on submission

Expected Testable Outcome

  • Can use the upload endpoint with a BAD file and see it rejected with an error
  • Can use the upload endpoint with a GOOD file and get a submission id

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.