VueJS results viewer

[jonathancrabtree]

It would be nice to have an interactive results viewer of some sort with sliders to select ME percent identity / coverage (on a per-ME basis?) and then show summary and detailed info on the resulting call set. It could run off a flat file initially and use the ASCII art graphics, with a possible later upgrade to SVG.

[jonathancrabtree]

Issues to resolve:

• [x] CSV format output from the pipeline with sufficient info to do this
  • [x] Interior insertion sequence
  • [x] Configurable amount of flanking sequence
  • [x] Coordinates of all the identified features
  • [x] Computed scores (percent identity, length, etc.)
  • [x] Actual alignments? (maybe as separate file(s))
• [x] Decide on standalone app vs dynamically served (from where?)

[jonathancrabtree]

Some sample Vue.js dashboards

[jonathancrabtree]

Prototyping in Vue3:

[jonathancrabtree]

Some refinements:

• [x] Use different coordinate scales if lengths of sequences differ by more than some threshold.
• [x] Explicitly label genomic insertion and ME reference
• [x] Add flanking regions to genomic insertion
• [ ] Add hover elements
• [x] Handle reverse strand matches
• [x] Color code regions by percent identity
• [x] Indicate polyA vs polyT
• [x] Add percent identity gradient color key

[jonathancrabtree]

[jonathancrabtree]

Vue3 easy data table with filtering:

[jonathancrabtree]

Prototype deployed at https://jonathancrabtree.github.io/MELT-RISC/