kids-first / kf-portal-ui

:bar_chart: The Kids First Data Resource Portal and Social Network User Interface

kids-first-portal-ui

Pre-requisites

• Node 16+
• Docker

Get Started

Environment variables:

• Create a .env with the scheme found here: https://github.com/include-dcc/include-portal-ui/blob/main/.env.schema
• Make sure to fill all the variables

Running the project locally

Starting the Bastion

• Start bastion using: igor

Starting the project

• Install dependencies: npm install
• Start the project: npm start

Running the USERS API locally

• Clone: https://github.com/include-dcc/include-users-api
• Follow the steps here: https://github.com/include-dcc/include-users-api/blob/main/README.md
• Make sure to add the include keycloak config for the users-api in your .env

Running NGINX locally

• Follow the steps here: https://github.com/kids-first/kf-portal-ui/blob/2.0/dev_tools/nginx/README.md

Storybook

Run to install storybook submodules

git submodule init
git submodule update

Branch

Name structure is type/SKFP-[github ticker number]/description

e.g.

"fix/SKFP-23432/issue-with-..."

Supported types:

• build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• perf: A code change that improves performance
• refactor: A code change that neither fixes a bug nor adds a feature
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• test: Adding missing tests or correcting existing tests

Commit

Commit message should follow a customized conventional commits specification

Message structure is type([scope]): #[github ticker number] message

e.g.

"fix(CohortBuild): #23432 Resolve issue with ..."

"feat: #23423 Member can now do ..."

Supported types:

• build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• perf: A code change that improves performance
• refactor: A code change that neither fixes a bug nor adds a feature
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• test: Adding missing tests or correcting existing tests

Deployment

See Documentation

Acknowledgement

Docker

Steps from scratch:

1. Clone this repo
2. Checkout branch 2.0
3. Add a .env file with the required values at the root of the project (based on the .env.schema file)
4. docker-compose up

kf-portal-ui's Issues

Set-up role selection at first log-in

Content Edits

We submitted the content for review to CHOP. These edits to content need to be made:

Wizard Step 1

• Change text to: "Your information will be kept confidential and secure and is not shared with any of these providers."

Wizard Step 2

• Change heading from "A bit about you" to: Tell us about yourself
• Change text below heading to: "Please provide information about yourself to help us personalize your experience."
• Change researcher text to: "I’m interested in complex data analysis, cross-disease research, sharing my findings and collaborating in real time with other Kids First researchers."
• Change Patient/Caregiver text to : "I’m interested in learning more about the available treatments for a specific disease type and connecting with researchers who are experts in that disease area."
• Change Clinician text to: "I’m interested in finding treatments that can be adapted to target my patients’ needs based on their genetic characteristics."

User profile

• Change default text in My bio section to: "Share information about your professional background and your research interests."
• Change default text in My story section to: "Share why you’re a part of the Kids First community."

Design mockups for user profile: patient

Design mockups for Create an Account

Retrieve Cavatica and Gen3 Secrets then add to Local Storage

Hook up export files to cavatica button

Design mockups for system walkthrough

When a user sets up an account, the first time login could present them with a series of instructions for how to use the data portal interface. They can also skip this and get right to filling out the profile.

Design mockups: save and share queries

Design: content google document for revisions

Connect to Gen3 and Download Files

Design mockups for user Settings & Privacy section

Landing page

Style landing page/login according to design

Download clinical data (Family)

Download clinical data (Participant)

Design mockups for Dashboard

Profile Wizard

Turn select-role page into the profile wizard and style

Allow logged-in user to edit their profile

Currently limited to City, User Role, and Bio

Design mockups for File Repository

Implement Facebook login

Responsive theme for smaller screens

Design mockups: responsive theme (tablet priority

Save query and view my saved queries in my user dashboard

Provide UI to:

• save a query from File Repo (with suggested name corresponding to selected filters + toaster)
• view my saved queries in my user dashboard and related actions: view counts, rename, re-run query, delete

Note: notification system is out of scope.

Specifications and design available on this link:
https://kidsfirst.atlassian.net/wiki/spaces/KFDRC/pages/444956841/Share+and+save+query#Shareandsavequery-3.2Savequery

Design mockups for user profile: researcher

File Repository design review

• Dropdown arrow on facets should be teal, not dark blue (Kim: dark blue looks nice actually)
• Active state on "File Repository" should be the dark blue button (and for any active state within the main navigation - except the user profile)
• All filters button text should be bolded and be light teal-blue
• Copy Files to Cavatica button text should be capitalized, bolded and teal blue
• Clear button beside query text should be light teal-blue and bolded
• Page background should be white, not the microscope design
• On table, download button should always be included on right (user cannot disable)
• 'Showing 1 - 20 file of 9,993' and 'Show XX rows' text is the wrong color. Should be light grey.
• Should be a gap between the query panel and the summary stats/table component
• A "KF hover/active states" has been added to Zeplin to specify the different link/button states
• Footer needs to be implemented
• make sure the correct icons are being used for the stats (most are using the one for Files). Let Kim know if you can't find them.
• can you fix the width of the dropdown actions so the width isn't jumping around when the user selects a shorter or longer value
  

Create blank portal with registration/login/logout

If not logged in, show login button
If logged in:

• display "welcome username"
• display logout link

Download manifest (Participant and Family)

Download biospecimen data from file repository page

Design mockups: Copy files to Cavatica project

Refine Log-in page and Sign-up user flow

Updated status as of February 27, 2018:
The homepage will be shared between the website and the data portal.
Note: a first draft of the homepage is available here: https://projects.invisionapp.com/share/UJF2TO7AX#/screens/281258910_1a

From the data portal perspective, we'll display directly the log-in page.
1- Log-in page: https://invis.io/MQFHWABDK9Y#/281037369_01b-KF-Data-Portal-Login
2- Sign-up page: Sign-up process: https://invis.io/MQFHWABDK9Y#/275376886_10-KF-Signup-V1-Step1
The user can switch between those 2 pages by clicking on "join now"/"log in" buttons.

At any point, when you click on "Log in with " (from the sign up page or from the log in page), 2 scenarios after the user logged in to the selected provider:

1. If user already has a KF account, it should redirect to File Repository (for now, at some point, it will redirect to user dashboard)
2. If the user does not have a KF account yet, it should go through the wizard then the user is redirected to user profile page, encouraged to fill in his profile but still has the opportunity to skip and browse files.

The tooltip tour is out of scope for this ticket. However, when you sign-up and the portal redirects to the user profile, display for now a pop-up:
"Fill out your profile
Skip and browse data" >> which redirects to the File repo.

Implement a table component

• Table
• Filter
• Sort
• Export TSV
• Arrange columns
• Pagination

Tar.gz Biospecimen download

Copy File IDs to Cavatica

Dashboard placeholder page

✨update aggregations based on current sqon

Proper README file

Download Biospecimen data (Participant)

File repo table

Implement a table component as part of the file repository page

wireframe: https://kidsfirst.atlassian.net/wiki/spaces/KFDRC/pages/247005357/File+Table

Features to implement for the table (including architecture of routing, querying, and state management):

• table ui
• table column sorting
• custom column addition
• table counts + pagination

Set-up/Bootstrap repo/netlify for building portal

Profile Wizard UI Design

Make sure profile wizard is compliant with design specifications

Overall (applies to all wizard screens)

• The right font is not being used
• Top numbers steps should be 1,2,3 (not 0,1,2)
• The page fade from the top should be more pronounced
• Add cursor: pointer; to Signup/Login button. When on the profile wizard, the top right button should just be "Log in" - this wizard is the sign up process
• Add more padding inside the wizard container (35px)
• Please use the box border colour value and shadow values from Zeplin. Wizard should have a shadowed edge
• The container is too wide. On desktop, the wizard should have fixed width (defined in Zepplin). (And change for when responsiveness is implemented)
• The step numbers span the width of the container and are a bit larger, with a 1px grey (#d4d6dd) border underneath
• Headlines - please use the font (Montserrat) and sizes from Zeplin (main headline and instruction headline)
• Please use #343434 for the body copy style.
• Bottom cancel button should not be bolded (steps 2, 3)
• Save button should be rounded and match the text styles in zeplin (steps 2, 3)
• When profile or login is complete, user should be re-directed to user profile (when built)
• The Dashboard and File Repository navigation items should not be present until the user finishes this wizard.

Page 1

• In step one of the wizard, the "Basic Info" and "Consent" text should be greyed out

Page 2

• The grey is too dark on the Email field
• Patient role should say Patient/Caregiver
• Text on role boxes is too large - please match zeplin values. Try to make the descriptions span two lines so that the icon isn't so large too. - icon size 35px, font size 12px, title montserrat, body open sans
• Non-selected role boxes should have a white background and grey border. Only the roles that is selected by the radio button should have a blue background with blue border.
• There should be a back button to return to the name/openid page
• Use the form field labels from the mockups to make it friendlier? ("My first name is,... I am a...")
• When I landed on this screen 'Patient" was selected by default. Can we make them all deselected by default?
• Can you make the entire radio button box selectable - so the user can click on anywhere within this box to turn that radio button on.
• Can you increase the space between the radio buttons and the grey border on top of the buttons
• All role text and imagers were revised by KF - can you implement the updated text from Zeplin (https://invis.io/MQFHWABDK9Y#/275376887_11-KF-Signup-V1-Step2)

Page 3

• Terms and conditions box should have rounded edges and be a lighter grey
• finish button should be rounded and blue with white text
• Agreement checkbox should be unselected by default

Nice to haves

• The progress bar at the top is one color. It should be a fade from light to dark blue.

Integrate Advanced Facet View

Refine Beta website header

All pages:

• Use correct branding images and spacing as per spec

Join Kids First page (http://beta.portal.kids-first.io/join)

• Logo, no page links
• same space and sizing in zepplin link below
  (before starting this ticket, check for updated header/wizard specs)

All other pages (logged in) :

• Dashboard link, File Repo link, and user profile link should be visible when logged in

• Do not implement search or language dropdown or my network
  Spec link: https://app.zeplin.io/project/5a69fad2bde6330a929157fd/screen/5a69ff3de0f4923ee24d2304

UI for Login

UI for login as different Personas; takes token from Ego and persists/retrieves profile from Persona

Design mockups for Login

Download table data as TSV

Implement a download table data as TSV

wireframe: https://kidsfirst.atlassian.net/wiki/spaces/KFDRC/pages/247005357/File+Table

Finish share query

Create right sidebar component

This requires implementing a way to have a custom sidebar share data with the existing table

• participants stat in stats bar
• families stat in stats bar

hook up actions for:

• manifest download button
• clinical data download button
• biospecimen download button
• sample sheet button
• export files to cavatica button

User Profile - Researcher

Create separate Netlify project for storybooks

We currently have kf-portal.netlify.com for hosting the entire app

Let's also make kf-portal-stories.netlify.com for hosting the storybook

Can reference this PR
storybookjs/storybook#2340

Download manifest (Participant)

Design mockups: Advanced ("smart") filter feature design

HPO, select Multiple file types, family relationships

https://kidsfirst.atlassian.net/wiki/spaces/KFDRC/pages/294256800/Smart+Filters

https://kidsfirst.atlassian.net/wiki/spaces/KFDRC/pages/416776193/Family+Trio+search+and+display

Add a tag system (backend support)

In the user profile page, a user should be able to add research interests.
We want this to be a free text field so KF users will populate their own database of interests.

Please provide backend support for a tag system. Users should be able to add tags to their user profile:

• by selecting amongst the existing tags
• by creating a new tag if it does not exist

Design:
1- Research interests displayed on the user profile: https://invis.io/MQFHWABDK9Y#/276423115_21-KF-Researcher-Profile-Filled
2- Create a new research interest: https://invis.io/MQFHWABDK9Y#/280722992_20d-KF-Researcher-Profile-Edit-Interests-Autofill