cscfi / beacon-network-ui Goto Github PK

Description

Beacon2 offers search filtering function.

DoD (Definition of Done)

Beacon2 search filtering is implemented

Testing

E2E tests and peer review

Description

we are lacking in the department of unit tests and we need them

DoD (Definition of Done)

unit test coverage > 50%

Testing

Tests implemented

Update the image used in login button with new LS AAI logo
https://elixir-europe.org/AAI-migration

Description

Currently GitHub actions use https://staging-elixirbeacon.rahtiapp.fi/service-info as a test beacon.
When beaconV2 is implemented the beacons should be built in the GitHub actions.

DoD (Definition of Done)

GitHub actions build beaconV2

Description

BeaconV2 offers listings of different values. Listings are queried ie. /biosamples/{id}/{Individuals}

DoD (Definition of Done)

Listings can be searched(if backend is implemented)
All relevant visual elements are implemented(if backend is not implemented)

Testing

Peer review and tests

Review and fix texts for ELIXIR Style guide compliance.

Description

Current Datastes view displays only datasets names

We need to reflect either on the datasets page or on main page, like:

• externalUrl
• description
• assemblyId
• variantCount
• callCount
• sampleCount

DoD (Definition of Done)

Datasets have richer information

Testing

Peer review

Description

Update advanced search so it supports beaconV2

DoD (Definition of Done)

V2 beacons can be searched using advanced search

Testing

Peer review

Improve accessibility for screen readers by providing more element names and alt texts.

a couple of issues found from the /history page

• date format is not showing preceding 0's in time, e.g. 10:2:16 23.7.2021 should be 10:02:16 23.7.2021
• component title has a typo seesion

Proposed solution

Set focus to the searchbar when user lands on the page, similarly to search engines.

DoD (Definition of Done)

When page loads, focus is on the search bar. Typing will insert to the searchbar, without the need of clicking on it.

Update/rewrite the content in HomeTabs pages About Beacon and How to use..

Description

going to http://localhost:8081/cool curently shows empty page.
We need to be able to show a not found page

DoD (Definition of Done)

add not found route and catch when it happens

Testing

unit and integration tests

Description

we can make use of cypress to do the integration testing and have github automate the tests (example: https://github.com/CSCfi/metadata-submitter-frontend/blob/master/.github/workflows/e2etests.yml )

DoD (Definition of Done)

e2e tests implemented and added to github actions

Testing

Peer review

Currently we have a separate authentication app written in python.
Retire that app, and have authentication functionality directly in this package.

https://www.npmjs.com/package/openid-client

Proposed solution

@juhtornr suggested a profile page, where the UI would display the contents of the ELIXIR access token. This means that the UI wouldn't store any data, only display user data from the session.

Things we can display from the token with current scopes (openid, ga4gh_passport_v1):

• ELIXIR ID
• Bona Fide status
• Dataset permissions

We could also display for example email or name if needed, but this requires the token scopes to be updated.

DoD (Definition of Done)

• A new user profile view
• Update privacy policy: state that we don't store any data that is displayed in the user profile page, the data comes directly from ELIXIR and the information only exists in the browser session (client side), and is deleted when logged out or after one hour when the access token expires

Describe the bug

The cookie notification will duplicate itself, if it's not accepted (the OK is not clicked).

To Reproduce

Steps to reproduce the behaviour:

1. Load page in private browsing
2. Change view

Expected behavior

A maximum of one cookie notification is displayed.

Screenshots

Description

Currently only 2019 is mentioned as year, show also current year

DoD (Definition of Done)

show Copyright as 2019-2021/2022 (current year)

Testing

Peer Review

Description

Change buttons in upper footer to a navbar like in this example https://bulma.io/documentation/components/navbar/#navbar-menu

DoD (Definition of Done)

Buttons are in a navbar

Testing

Update test to work with this change

BasicSearchV2.test.ts fails.

   1) Basic Search version 2
       can do a example search:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-testid="exampleButton"]`, but never found it.
      at Context.eval (http://localhost:8081/__cypress/tests?p=cypress/integration/BasicSearchV2.test.ts:108:12)

  2) Basic Search version 2
       can display results:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-testid="beacon:5050"]`, but never found it.
      at Context.eval (http://localhost:8081/__cypress/tests?p=cypress/integration/BasicSearchV2.test.ts:114:12)

  3) Basic Search version 2
       can hide results:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-testid="beacon:5050"]`, but never found it.
      at Context.eval (http://localhost:8081/__cypress/tests?p=cypress/integration/BasicSearchV2.test.ts:119:12)

  4) Basic Search version 2
       generates search history:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-testid="historyButton"]`, but never found it.
      at Context.eval (http://localhost:8081/__cypress/tests?p=cypress/integration/BasicSearchV2.test.ts:135:12)

Consider making a registration wizard with steps

Add try this buttons to HomeTabs "how to" section's examples that insert the example query to the search bar.

Description

Update result tiles to support beaconV2 responses

DoD (Definition of Done)

Beacon V2 responses are visible in a similar manner to beacon V1 results

Testing

Peer review and/or e2e tests if gh actions builds V2 beacon

Description

Listing Search is missing links to Advanced Search and Basic Search whilst the other 2 have links to it.

but none in Listing search:

Only has Return to previous page

DoD (Definition of Done)

Add links in Listing search to to Advanced Search and Basic Search or make them consistent to be able to switch between search options

Testing

Peer review

Create a Dockerfile that builds an image with node 14, because OpenShift goes only up to 12

We should display a message when there are no results from the query.
Also maybe disable filters as there is nothing to show, or style it differently so that it make more sense having that Filter results with Hits there ?

Make a logout button and update/make the placeholder "logged in" and "bona fide" tags prettier

1. Investigate ELIXIR AAI access token expiration endpoint
   1.1. https://login.elixir-czech.org/oidc/.well-known/openid-configuration has end_session_endpoint

Description

Beacon2 searches display full url and thus push the date column out of view.

DoD (Definition of Done)

Date column is visible with beacon2 searches.

Testing

Peer review.

Description

Currently if we have multiple results in beacon-network datasets or searchers we select the first element
e.g. https://github.com/CSCfi/beacon-network-ui/blob/dev/cypress/integration/Datasets.test.ts#L8

This is not optimal as we cannot always control the order. We need to select elements based on e.g. data-testids

DoD (Definition of Done)

Refactor e2e tests so that they select elements based on an unique id

Testing

Peer review

For prospective Beacon Implementers there should be details of the Beacon Network Security Best Practice document. There is an updated version here: https://docs.google.com/document/d/1RaxFLossPWPUTT1sMunkqxLpjz06N6dn43Ce-Dd7_A8/edit# taken from the original deliverable here: https://docs.google.com/document/d/13K7bSTcjga0Z0JEey7XHJhrnnj60ffKopqvGG2XT0LE/edit#heading=h.yf4b8i96olrd

The document should be versioned, to take account of updates.

Description

Cypress and Jest coverages are in conflict and therefore cypress code coverage doesn't work

DoD (Definition of Done)

Cypress code coverage works

Proposed solution

It would be nice if we would a view in main page that would list the datasets available in the whole network. This would showcase the datasets for the user. The list of datasets available in each Beacon should be in info endpoint.

DoD (Definition of Done)

This would be an extension to the current main page.

Testing

Proposed solution

Currently basic search term has strict form requirement

CHR : START REF > ALT

Make it more lax, so that the spaces are not required, e.g.

CHR:STARTREF>ALT

DoD (Definition of Done)

Basic search term accepts more or less whitespace around operators.

Testing

Unit tests.

Description

some packages are out of date like buefy and changes to the structure happened
dependabot e.g. https://github.com/CSCfi/swift-browser-ui/blob/master/.github/dependabot.yml#L12-L18

DoD (Definition of Done)

updated packages and dependabot running on a weekly basis

Testing

testing passes

Description

Update guide page https://dev-ui-beacon.rahtiapp.fi/guide to show beacon 2.x queries.

DoD (Definition of Done)

Guide page has beacon 2.x queries

Testing

Peer review

Description

Identified in #91

Not all packages are required when building the production version of the UI for this reason we would like to use

npm install --production
npm build --production

Packages need to be categorised correctly for prod and development

DoD (Definition of Done)

Docker image contain new commands for building for production and documentation is updated

Testing

Peer review

• Add Apache License
• Add Contributing Guidelines based on the ones from beacon-python, customised for javascript

Describe the bug

To Reproduce

Steps to reproduce the behaviour:

1. Go to example query
2. Click on display results
3. See error

Expected behavior

results displayed

Screenshots

Additional context

Description

Continuation of #91
We need to make sure docker file image can still be built on changes either create a separate github action to it or add it as part of e2e tests

DoD (Definition of Done)

Docker file for UI is tested that it can build properly

Testing

Peer review

Give the assembly ID selector a possibility to input a custom assembly.

The UI can support the most common assemblies, but users might want to query with an assembly that we haven't included.

Currently some elements are unreachable without using the cursor. Fix all elements, such as that they are reachable with keyboard.

Things that are not reachable without a mouse (this list is not exhaustive)

• Example variant query
• Example range query
• Advanced search (and basic search) buttons

In the responses view, base-sequences can be very long, and if they are, the table will overflow out of the screen, and the AC and AF numbers are not visible.

Make the base sequence text wrap to new lines instead of overflowing over the edge of the screen.

Description

Footer positioning on short pages, that have little content does not go to the bottom.

We want the footer to stick to the bottom indifferent of the content in the page

DoD (Definition of Done)

Footer is positioned in the bottom of the page

Testing

Peer review

Proposed solution

Don't hide errored Beacons in /results, display them with an error tag instead and maybe some information, for example with a similar button to results: Display errors.

Description

Add support for CSCfi/beacon-network#77

DoD (Definition of Done)

Basic search works

Testing

E2E tests if possible, building beaconV2 in gh actions needs to be implemented first.

Provide support for internationalization with https://kazupon.github.io/vue-i18n/

Description

Add all relevant visual elements for beacon v2 search functionality.

DoD (Definition of Done)

All the relevant visual features are implemented.
Implement /g_variant query

Testing

Unit tests if possible

Review accessibility up to level AA

• https://www.w3.org/TR/WCAG20/
• https://www.wuhcag.com/wcag-checklist/

And make an accessibility statement

• https://www.gov.uk/guidance/make-your-website-or-app-accessible-and-publish-an-accessibility-statement

Dependencies

• #28
• #29

In the responses view, if received variant count and frequency are 0 or null, display nothing instead of 0.

Apparently 0 is a misleading number when it comes to variant statistics, and "nothing" is better.

Save the queries made by the user, and display them in a log for easy review and re-querying.