https://bravo.sph.umich.edu/region.html?variant_type=snv&chrom=11&start=5225464&stop=5229395

The gene bar component is wider than the viewing area. As a result the current location indicator doesn't track with the above and below figures as the x-axis translation is different due to a wider axis.

It appears that the /search endpoint from the API is currently unused. The /autocomplete endpoint is being used to handle the search requests.

• Verify the endpoint isn't hard coded in any of the urls.
• Review & refactor uses of searchapi to actually used endpoint.

The dashed "centerline" of IGV.js browser should be centered in the component and help the user when scrolling down through the reads to keep track of the variant's position.

The dashed line appears to the right of the position it should be bracketing. The positioning of the centerline can be made worse by resizing the web browser's window. Eventually, this will push the the "centerline" entirely to the right of the rendered component.

• Currently, the applied filters affects all the displays.
• The controls are directly above the snv table.

Provide panel component that summarizes the applied filters such that it is immediately apparent about which data displayed is affected by the filters.

The consequence, annotation, and loftee columns have special case handling between gene and region views in Bravo2. These columns remain to be implmented for src/components/tables/BaseSNVTable.vue and
src/components/tables/RegionSNVTable.vue

• method for specifying additional columns in extending component.
• implement additional columns in extending component (RegionSNVTable)

On https://bravo.sph.umich.edu/freeze8/hg38/gene/snv/TTN , the server takes 10 seconds to return the summaries at the top of the page, like the number of synonymous variants, frameshifts, etc. That information could be cached to be fast after the first load. If this issue isn't relevant for the new architecture, feel free to close it.

Accessing the constants in src/domainModel/*.js requires at least an import and possibly an additional private variable declaration to make constants available to templates.

Replace with a vue plugin such that the constants can be provided to the app and the components that use them can simply inject them. E.g.

// in plugins/domainModel.js
app.provide('domain', domainModel)

// in a component
export default {
  inject: ['domain'],

Originally using bootstrap.js to provide modal implementation. Made figuring out what was controlling the DOM difficult to track down and adds another dependency.

Can implement in Vue using teleport.

Affects region and gene pages.

Include autocompleting search in nav bar.

Problem

Importing the tabulator tables styles using a relative path to the node module does not behave as expected.
Confoundingly, the import of the styles from the bootstrap node module behaves as expected.
The relevant docs from Vue's static asset handling indicates the tabulator-tables import should work.

// src/pages/region/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'tabulator-tables/dist/css/tabulator_bootstrap4.css' 

Some discussion about this issue on a VueJS forum post

Existing research

The webpack config that vue-cli ends up using can be profiled using webpack stats:

# emit webpack stats file.
npx webpack --config node_modules/@vue/cli-service/webpack.config.js --profile --json=raw-stats.json
# format emitted stats
jq . raw-stats.json > comp-stats.json 

Looking at the output there, the tabulator-tables module ends up with a null resolved module. E.g.

"resolvedModule": "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-14.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-14.use[2]!./node_modules/tabulator-tables/dist/css/tabulator_bootstrap4.css",
              "type": "harmony side effect evaluation",
              "active": true,
              "explanation": "",
              "userRequest": "../../../css-loader/dist/runtime/api.js",
              "loc": "3:0-82",
              "moduleId": null,
              "resolvedModuleId": null

Workaround

Copying the styles from the tabulator-tables module and then importing them as a project asset is the functioning workaround.

// src/pages/region/main.js
import 'bootstrap/dist/css/bootstrap.css'
import '@/assets/tabulator_workaround.css'

Desired State

• Relative import style from tabulator-tables node module working.
• Test case to verify the style is present

Problem

In the legacy (bravo2) variant page, there was a prop provided to the top level vue component for the number of samples in the underlying data set. This n_samples was hardcoded in the flask template that was generating and serving out the enclosing page html.

<bravovariant :homepage="'{{ url_for('.home', _external = True) }}'" 
:api="'{{ url_for('.home', _external = True) }}'" 
:variant-id="'{{ variant_id }}'" 
:total-samples="132345" />

Hard coding :total-samples="132345" means the number of samples in the data set needs to be known by the UI at coding time. The current workaround moves this to the .env file so it only needs to be known at build time.

Desired State

An way for the API to answer the question, "how many samples are in the underlying data set?".
This could be a separate endpoint or as part of the existing endpoints. Specifically the variant endpoint would need it to be included if this were the case.

In any event, this issue is blocked until it is solved in https://github.com/statgen/bravo_api

Problem

The endpoint url are terminated with .html extensions.

/region.html?variant_type=snv&chrom=11&start=5225000&stop=5229000

This is because of a limitation of webpack dev-server. It will currently serve these endpoints out with the mime-type application/octet-stream.

Serving the extension-less files on a production webserver as the correct 'text/html' mimetype is easy to accomplish.
It is making the development environment capable of doing this as well that is the blocker.

Exising research

This is occurring because the webpack dev-server's underlying package, express, uses a version of mime will provide a default mime-type when one is not deduced from the file extension. The RFC compliant behavior would be to not provide any mime-type in this case.

Webpack's dev-server via webpack-server-middleware is doing the the correct thing and not providing a default mime-type. Unfortunately, that makes it so express does.

Upstream Fix

The closest fix down in the stack is to allow webpack-server-middleware to be configured to emit a default mime type. Functionally, this would only cover files without extensions as there is existing configuration to add mime-type mappings for file extensions. Essentially, a PR to fulfill this feature request

Additionally the underlying express project could be updated to use a more recent version of mime and ensure that the default mime-type is none unless explicitly configured.

On the gene page, the highlighting around the transcript when mouseover is not shifted far enough to the right.

Extend relevant components from Region Dashboard.

Apply solution from proof of concept: https://github.com/grosscol/scenery-bailiff
Blocked. Waiting for API side implementation: statgen/bravo_api#10

Background

There is eQTL scan results for some of the genes and variants in the TOPMed set. Starting out using the Whole Blood tissue sample, there is SuSie fine mapping data (488k variants) and conditional regression data (108k varints) which have ~50k variants when collated.

Cis-eQTL Scan Data

SuSie data columns:

• Column descriptions:
  • phenotype_id: gene identifier
  • variant_id: genetic variant, in format {chr}_{pos}_{ref}_{alt}
  • pip: SuSiE PIP (essentially, the probability the variant is a causal one for this eQTL signal)
  • af: frequency of the alt allele
  • cs_id: Credible set ID. cs_id + phenotype_id together uniquely identify a credible set. A credible set containing more than one genetic variant will span more than one line.

Conditional regression data columns:
Significant independent eQTL signals for each gene (generated using forward-backward linear regression)

• Column descriptions:
  • phenotype_id: gene identifier
  • num_var: number of genetic variants tested for association with this gene's expression
  • beta_shape1: First beta distribution parameter used when computing beta-approximated p-value (see FastQTL publication [1]). When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • beta_shape2: Second beta distribution parameter used when computing beta-approximated p-value (see FastQTL publication [1]). When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • true_df: estimated true degrees of freedom (used when computing beta-approximated p-value; see FastQTL publication [1]). When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • pval_true_df: p-value calculated using true_df (used when computing beta-approximated p-value; see FastQTL publication [1]). When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • variant_id: genetic variant, in format {variant_chromosome}{variant_position}{variant_ref_allele}_{variant_alt_allele}
  • tss_distance: (signed) distance between the gene TSS and the genetic variant
  • ma_samples: number of samples having the minor allele
  • ma_count: minor allele count
  • af: frequency of the alt allele
  • pval_nominal: nominal p-value for association between the gene expression and genetic variant allele dosage. Note that due to underflow, some p-values may be equal to 0. When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • slope: linear regression estimated slope for the allele dosage term when modeling association between gene expression and genetic variant. The effect allele is always the alt allele (which can be inferred from the variant_id as described above), such that in the case of a significant association between gene expression and genetic variant, slope greater than 0 indicates that the alt allele favors higher expression of the gene. When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • slope_se: standard error of the estimated slope
  • pval_perm: empirical p-value for association between the gene expression and genetic variant, adjusted for multiple testing at the gene level (i.e. testing many variants against this one gene; NOT genome-wide corrected) using permutations (see FastQTL publication [1]). When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • pval_beta: p-value for association between the gene expression and genetic variant, adjusted for multiple testing at the gene level (i.e. testing many variants against this one gene; NOT genome-wide corrected) using the fitted beta distribution (see FastQTL publication [1]). Note that due to underflow, some p-values may be equal to 0. When there are multiple independent eQTL signals for a gene, this is computed during the backward step, i.e. controlling for each of the gene's other independent eQTL signals.
  • rank: rank of the association, based on the order in which the association was discovered during the forward step

Design Directions

Questions

What questions should the UI answer?

• Does this gene have any eQTLs?
• How many eQTLs does this gene have?
• How many eQTLs are in this region?
• Which genes in this region have eQTL data?
• What is the magnitude of the effect of an eQTL on a gene?
• How distant is the eQTL from the gene it is affecting the expression of?
• What tissue samples have eQTLs in this gene or region?
• What tissue sample is an eQTL from?
• Which gene in this region has the most eQTLs?

Table

Re-using the tabulator-tables dependency that is currently used to display a table of variants in a region or gene, design new or adapt the variant table for eQTLs.

• Separate table?
• Alternate table swapped for variant table?
• Additional columns to variant table?

Figure

Visual representation of the genomic region of the gene(s) and associated eQTLs.

• What about the existing https://fivex.sph.umich.edu/ is good?
• What about the existing https://fivex.sph.umich.edu/ could be improved upon?
• Re-use existing gene bars adding arcs between gene and eqtl indicating distance and effect size?

Completion Criteria

• A design or sketch for the UI element is attached.
• The data required to power the element is specified.
• A corresponding issue in Bravo API is made

The network calls should be sufficiently simple that the native Fetch API can handle them. This should reduce the number of dependencies and overhead.

Current State

Filters selection, columns showing selection, and panels selections are lost on reload.

Desired State

Allow users to have selections persist between page reloads.

Styles were spread across and repeated in components in Bravo2.
Consolidated styles in src/assets/bravo.css

The extracted classes have not all been renamed to follow BEM conventions.
Refactor bravo classes to follow BEM conventions.