Add API, prototype demo UI for interactive filtering

[eweitz]

This updates the IGV API to enable point-and-click filtering for genomic features. That makes analysis richer and nimbler.

Impact

Previously, if users wanted to e.g. subset a VCF track to show only variants that are SNPs with AF > 0.05, then they would need to generate a new track. That requires significant effort writing code, managing resulting data, and configuring IGV.

Now, it's feasible to develop an interactive filtering UI that makes such detailed genome analysis quick and easy in IGV. Below is a filtering UI that shows how a user can load an arbitrary VCF and query genomic features in view by any INFO field.

Categorical fields like "Variant type" or "Ancestral allele" are filterable via checkboxes. Numeric fields like "Allele frequency" or "Read depth" are filterable via range inputs. The distribution of field values can also be assessed at a glance. Checkboxes show counts beside them, and range inputs show a histogram above them. The demo UI shows utility, but it's very unpolished. It simply shows that the API is adequate for the core filtering UI.

The client presents faceted search controls using only pre-existing data; no file-specific configuration or processing is needed to enable filtering. In addition to VCFs as shown below, these API updates also enable developing filtering UIs for BED data.

Here's how it looks!

IGV_interactive_filtering_prototype__2025-01-15.mov

Technical overview

A few small igv.js API updates enable clients to develop an IGV filtering UI:

• FeatureUtils and FeatureCache: surfacing these modules enables efficiently rendering filtered features in a track.
• featuresloaded: this event allows clients to respond to track data updates, and show a faceted search UI on track load

The example demonstrates how those small API changes unlock downstream UI functionality. It uses Crossfilter for fast n-dimensional filtering, grouping, and counting. It makes each INFO field into a queryable dimension. The genomic data is already available in client memory; Crossfilter just makes it easily and efficiently queryable.

The demo UI code is a first pass at porting a mature React IGV filtering UI to plain JavaScript. That aids interoperability and reusability. The React IGV filtering UI is from Single Cell Portal, particularly SCP's multiome filtering functionality. A related announcement shows a richer demo of the faceting widgets in the video above, including possible enhancements like sliders, better collapsing, and sparkbars.

[jrobinso]

Thanks @eweitz, this looks straightforward. The demo looks great. I'll get to this asap, no later than next week.