rosibaj commented 3 years ago

Header

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

Footer

[x] Make the text not bold
[x] 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
[x] Remove Genome Canada link (the logo already links)
[x] Change “2021 CanCOGeN VirusSeq Data Portal” to “2021 Canadian VirusSeq Data Portal

Landing page

[x] 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.
[x] Make the above text not bold.
[x] Under “Impact on Canadians”, change “Genomics-based” to “Genomic-based”; “COVID-19 virus” to “SARS-CoV-2 virus”

Explorer

[x] Facet categories, eg. “Analysis Type”, “File Type”, make the fonts smaller, about the same size as “Filters” at the top.
[x] Facet restyling.
[x] selected values: use the darker blue from this mockup (the lighter blue isn't accessible) https://zpl.io/awzeOmK
[ ] ~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.~
[x] 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.
[x] 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.
[x] I thought we were going to show age "bins"? otherwise will this chart be each individual age that's in the portal?
[x] Should we specify what this number is counting for clarity. [not urgent will save for later if desired]

Brand

[x] If there's time, use the font that CanCOGen uses: https://fonts.google.com/specimen/Source+Sans+Pro (this font may make the regular weight not seem as bold?)

Submitter Login page

[x] you could use the same font style as the paragraphs on the homepage, this seems a bit small.
[x] Change "COVID-19 Data is submitted" to "Viral genomes are submitted"
[x] 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

justincorrigible commented 3 years ago

For "Facet categories, eg. “Analysis Type”, “File Type”, make the fonts smaller, about the same size as “Filters” at the top.", Both "Filters" and the category titles, are all 16px. Making the later smaller than instead (14px).

kcullion commented 3 years ago

For "Facet categories, eg. “Analysis Type”, “File Type”, make the fonts smaller, about the same size as “Filters” at the top.", Both "Filters" and the category titles, are all 16px. Making the later smaller than instead (14px).

If you switch the font to source-sans-pro - that may take care of some sizing and fonts looking too bold? If not, you can make the field labels 14px

rosibaj commented 3 years ago

@kcullion 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. No there is no page for this , and might not be how this particular download works. need more info

rosibaj commented 3 years ago

Re: -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

This flow is not in scope of this ticket

justincorrigible commented 3 years ago

@kcullion 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. No there is no page for this , and might not be how this particular download works. need more info

This is carryover from the DMS-UI spec. The document it's meant to be pointed to hasn't been created yet, but I hear it'll be done next week. I can remove this bit meanwhile, if that makes things easier.

rosibaj commented 3 years ago

yes please @caravinci that will work best for now!

justincorrigible commented 3 years ago

Side question: Would it be beneficial if I set a Netlify for this project, so we can do iteration more easily? (given the release/deployment hurdles). I have almost all this stuff done by now, yet I reckon a feedback loop is likely necessary here. Thoughts?

rosibaj commented 3 years ago

@caravinci up to you. if you can do it quickly, sure!

justincorrigible commented 3 years ago

Prepping deployment... NPM takes forever whenever we publish a new version of Arranger. This should address all the items, but of course I may have to release a new version if there's any additional feedback. For instance, the style for pie charts' tooltips is a temporary solution, and I'm working on formatting the age ranges in a more human-readable fashion.

kcullion commented 3 years ago

Thanks @caravinci ..I have some more feedback. @rosibaj please review

[x] Facet panel:
[x] Charts question. Rosi, will they all be eventually plotting viral genomes instead of files? My understanding is that there could be multiple files per one viral genome. But I notice the bar chart says viral genome and the pies seem to be plotting files.
[x] Tooltips suggestions (sort of depends on the answer to the item above)
[x] footer
[x] @rosibaj do we want to customize these file names to VirusSeq? like VirusSeq-file-manifest-20210412.tsv VirusSeq-table-export-20210412.tsv
[ ] @rosibaj is there a default table sort that we can illustrate in the table like the following? In the mock they wanted to sort by sample id to display the files for each sample together, but I don't see sample ID by default in this table.
[x] filtered query bar..this may be a usual Arranger thing - but this query box becomes a bit taller causing a jump on the page when the user filters the table. It is probably the addition of the button. If possible, please make the height of this box fixed

justincorrigible commented 3 years ago

Thanks for the feedback, @kcullion Seems the tooltip for the column chart was meant to be the one for a variants chart that is currently hidden. However, I did apply some of the changes you suggest:

As mentioned in my latest comment, I was working on making the age be a bit more readable. I've added some logic to recognise whether the range limit is included or not. e.g. () vs [], like so: ("to" or "-", is an easy change if there's a preference)

kcullion commented 3 years ago

Thanks @caravinci ..let's wait for @rosibaj when she's back as she may have plans for these charts.

justincorrigible commented 3 years ago

Yep. I'm only acting thus far on the ones I know can be fixed (checked in your list).

However, about that last one with the query bar having a fixed height... The users may still want to see the whole query at a single glance. May I also make the panel resizable?

rosibaj commented 3 years ago

Re:

Charts question. Rosi, will they all be eventually plotting viral genomes instead of files? My understanding is that there could be multiple files per one viral genome. But I notice the bar chart says viral genome and the pies seem to be plotting files.

I already think i told Justin just to say FILES for this chart instead of viral genomes. right now genomes:files is 1:1 but i dont know if that ratio will be maintained. UPDATE: i was confused. i did say viral genomes, which i think it correct right now. can confirm with christina though,.

filtered query bar..this may be a usual Arranger thing - but this query box becomes a bit taller causing a jump on the page when the user filters the table. It is probably the addition of the button. If possible, please make the height of this box fixed

[x] the box is working as expected, we don't want to hide any portion of the query the user has selected or make them resize this portion.. Change the default height BEFORE selection to the height when a query is selected to prevent teh jump:

do we want to customize these file names to VirusSeq? like

@caravinci IF you have time you can do this, if not, then this is not the most important.

For this last one:

is there a default table sort that we can illustrate in the table like the following? In the mock they wanted to sort by sample id to display the files for each sample together, but I don't see sample ID by default in this table.

we might be adding a sample id, im not sure yet. we can revisit default sort when we confirm the exact columns that will be displayed.

justincorrigible commented 3 years ago

Seems I had misread the request to literally "fix the height for the query bar" as "give it a fixed height". Now I understand you want a consistent minimum height. lol Apologies.

I've applied all the aforementioned changes, and will be deploying them soon.

kcullion commented 3 years ago

oops my bad, I didn't explain that query bar correctly..yeah I just mean if it's on one line, prevent that jump. but don't hide any of the query if it's on multiple lines

justincorrigible commented 3 years ago

Nah Kim... My head is just way toooo literal sometimes. Either way, "I fixed it now" 😉

justincorrigible commented 3 years ago

Changes deployed. Please let me know if I missed anything, @kcullion @rosibaj

rosibaj commented 3 years ago

lgtm for now!

virusseq / portal-ui

UI Styling Feedback: Search Page #3

Header

Footer

Landing page

Explorer

Brand

Submitter Login page