Add a component which limits the size of sub-components.

This is what it currently looks like in Co-V-Spectrum:

How closely should we follow that?

This should be useful since we have many diagrams:
https://storybook.js.org/docs/writing-tests/visual-testing

Experiment with it and see whether we can use it.

Add a download button to download the data as a TSV (same data as shown in the table)

Maybe as a potential extra feature, list the number of new sequences since last update? Then you could update if there's no new data and just say: +0.

Created from GenSpectrum/cov-spectrum-website#319

@chaoran-chen What did you have in mind here? Different colors for cells with a value on certain percentage ranges?

In #9 we added a date range selector. One test types a specific date into the date from input element and tries to press 'enter'. This does work by hand but not programmatically. Therefor the assertion that the select changes to 'custom' can not be done in the test.

Enable that assertion again, when hitting enter works.

I could not find out what is causing this issue. I would either think of storybook or lit.

Add units to table of prevalence over time.
Also add new columns total sequences, prevalence, sequences, the the columns look like:
date, total samples, EG: prevalence [%], EG: samples, J: prevalence [%], J: samples

This is a follow up to #9

If we run

npm run build
npm run test

we get the error

TypeError: dayjs.extend is not a function

Similarly, we get an error if we build the storybook with

npm run build
npm run build-storybook

Opening the prevalence over time plot, we get:

However, the local development instance of storybook works:

npm run build
npm run storybook

Currently the scaling selector shows also on the table view. This should not be the case. For this you need to find a way to evaluate which is the active tab.

The location filter is an input component that allows users to choose a location. It assumes hierarchical location data stored in different LAPIS fields. (Our SARS-CoV-2 instances have four levels: (1) region, (2) country, (3) division, and (4) location.)

It should provide auto-completion that could look like this:

When the user selects a location, the component should dispatch an event.

Output/Event data example:

{
  region: North America,
  country: USA,
  division: Georgia
}

// It assumes that the fields are provided in hierarchical order
<gs-location-filter fields="[region, country, division, location]" />

Tasks

• #69
• #70
• #75
• #267
• #250
• #273

In many components we need the information if there are segments and which are those. To avoid to extract them every time, we decided to add the reference genome to the context in the GsApp. The reference genome can be queried from LAPIS directly.

When this is done, delete the special logic in mutations.tsx and mutation-comparison.tsx. Maybe there are more locations.

Right now I can't think of a simple way to evaluate relative growth of sublineages of a lineage other than to type them all out manually and compare to baseline.

It could be a nice feature to make a view of sublineages similar to how mutations are shown over time:

For a given query, all lineages that show up for a query (including wild cards if they have sublineages) would be eligible for inclusion - but then one could also threshold with >0.5% say.

Why is including wildcards important? Otherwise all lineages with sublineages are only paraphyletic - which isn't great. It's quite arbitrary what becomes a sublineage and what doesn't. So to compare BQ.1.1 with BQ.1.1.25 is quite meaningless. We should always look at all BQ.1.1* rather than BQ.1.1 which is in fact BQ.1.1* - (BQ.1.1* - BQ.1.1)

The mutation component is for the analysis of the mutations of a single variant. To compare the mutations of multiple variants, the mutations comparison component (#6) should be used.

Tasks

• #57
• #107
  • Mutations should be sorted by their position (if segmented, they should first be sorted by their segment and then by their position within the segment)
• Table: Add basic styling
• #59
• #58
  • Table: Only mutations greater-than-equal the min proportion should be shown
  • Grid: Only rows where at least one mutation is greater-than-equal the min proportion should be shown
• #105
• #106
• #60
• Write a basic description

I'd love it if you could invest a little into more sophisticated display of query results, with a plot similar in style to this outbreak.info one - it would really add a lot and shouldn't be too hard to create.

The input data you have already, all you need is the visualisation:

It consists of three main features (in my eyes):

1. 7d rolling mean as opposed to bars for weeks
2. Not only avg but also confidence intervals based on sampling intensity
3. Explicit display of samples per day below the main graph -> this allows quick scanning of interesting patterns (like submission once a month/week etc.)

In #31 we used the index.html to show a demo version of the components.

Put this demo to a more suitable place then in the root folder.

The mutation and lineage filter is an input component that should function similarly to the one that we have on CoV-Spectrum:

Mutations (substitutions/deletions/insertions) have a defined format in LAPIS but lineages, for different pathogens, do not. This means that we need an extensible system where it is possible to add support for different lineage systems. Hereby, it's great if we can make it easy for the library user to do it but that is not necessary. It's just important that it is easy to extend the library and support multiple lineage systems and that the library user can then select which lineage system to activate.

Tasks

• #155
• #156
• #157
• #182
• (Optional) Show selected mutations in input field (instead of above the input field)

• Set min and max proportion
• always fetch all proportions from LAPIS
• filter in the browser
• maybe add a button that opens a modal? Selecting a range might be too big (UI wise) for a small button on the top of a diagram.

We could replicate the implementation on CoV-Spectrum:

Important capabilities are:

• Select special data ranges such as "2023" or "past 2 weeks"
• Select a date through a date picker.
• Type in a date in the ISO format (i.e., yyyy-mm-dd)
• Edit a date in the date field directly (e.g., change 2023-09-17 to 2023-10-17 by selecting 09 in the field and then typing 10)
• Copy&paste a date in the ISO format into a date field

Tasks

tbd

Setup some framework so that we can test our web components.

• #42
• #43
• #44

We have the component Temporal. This component is not much tested, but used very often. Add more tests. Especially, check why the dates with a daily granularity do not match the monthly granularity. (Both screenshots take the same input, but one of them goes from 2023-01 till 2024-01, the other only to 2024-11 and does not start from 2023-01)

Currently, the stories use the open LAPIS 1 instance. Migrate to LAPIS 2.

It would be amazing if you could create a 2D plot of collections like this plot from Moritz Gerstung:

X-axis number of samples, y axis growth advantage

Or maybe more stable: y-axis is share of sequences uploaded in last 10 days, x axis is number of samples uploaded in last 90 days

Currently, it looks like this when the LAPIS call fails:

What should we display instead?

We should run the tests in GitHub actions after fixing #1.

#96 introduces a proportion filter for mutations. Use this filter here as well. Set the initial min proportion to 50%.

The mutation comparison component serves the comparison of mutations of multiple variants. To analyze the mutations of a single variant, the mutations component (#5) should be used.

Tasks

• #77
  • Allow users to sort by any of the columns (similar to #5)
• #78
• UpSet diagram: Add a UpSet diagram (or something inspired by it)
  • Each row is a mutation and each column is a variant.
• #108
• #109
• #110
• Develop insertion comparison visualization
• Write a basic description

For advanced users, it should be possible to configure the confidence level.

• The default confidence level is and should remain 95%.
• If the confidence level, the confidence level should be visually very clear to see. The confidence level has to be visible in screenshots taken from the affected plots.

Add a download button to download the (calculated) data as a TSV (same data as shown in the table).

Remove components/src/storybook-declarations.d.ts once the module declaration is fixed. Possibly with version 8 of storybook.

The workaround was taken from
storybookjs/storybook#21887

In all the tables, we should show proportions as xx.xx%. (In the downloaded CSV files, the values should not change.)

Tasks

• #15
• #16
• #17
• #18
• Add bubble chart
  • The size of the bubbles scales with the absolute number of available sequences.
• #111
• #61
• Dispatch an event when the user hovers over a date range
• Write a basic description
• #112
• #272

In #31 we removed the custom elements manifest because we did not use it and have no way to test it. Bring this back.

https://github.com/webcomponents/custom-elements-manifest

Currently, when using a smoothingWindow > 0, then the tooltip in the prevalence of time bubble plot, shows non rounded numbers. Change this, so it rounds to the first digit (or make it configurable)

Tasks

• #67
• #193
• Dispatch an event when the user hovers over a date range
• #231

Mutations table with nucleotides