Widget updates for error messages and styling (bigdatagenomics#578)

* bump frontend version to 0.0.6beta1

* make track error more specific, fix to_pandas

* updated tutorials, removed min height requirement for features

* update hadoop version, remove spark 2 check

docs/jupyterWidgets/usage.rst

@@ -31,7 +31,7 @@ First, install and enable bdgenomics.mango.pileup, a Jupyter Widget:
     jupyter nbextension install --py --sys-prefix widgetsnbextension
 
     jupyter nbextension enable --py --sys-prefix widgetsnbextension
-    jupyter nbextension enable --py --sys-prefix bdgenomics.mango.pileup 
+    jupyter nbextension enable --py --sys-prefix bdgenomics.mango.pileup
 
 This will install the bdgenomics.mango.pileup extension into your current conda environment.
 
@@ -74,7 +74,7 @@ This example shows how to visualize alignments through a Jupyter widget.
     tracks=[Track(viz="pileup", label="my Reads", source=pileup.sources.GA4GHAlignmentJson(GA4GHAlignmentJson))]
 
     # render tracks in widget
-    reads = pileup.PileupViewer(locus="chr17:1-100", reference="hg19", tracks=tracks)
+    reads = pileup.PileupViewer(chrom="chr17", start=1, stop=100, reference="hg19", tracks=tracks)
     reads
 
 .. image:: ../img/jupyterWidgets/pileupWidget.png
@@ -92,7 +92,7 @@ This example shows how to visualize variants through a Jupyter widget.
     tracks=[Track(viz="variants", label="my Variants", source=pileup.sources.VcfDataSource("<path_to_file>/my_vcf.vcf"))]
 
     # render tracks in widget
-    variants = pileup.PileupViewer(locus="chr1:10436-10564", reference="hg19", tracks=tracks)
+    variants = pileup.PileupViewer(chrom="chr1", start=10436, stop=10564, reference="hg19", tracks=tracks)
     variants
 
 .. image:: ../img/jupyterWidgets/variantWidget.png
@@ -112,7 +112,7 @@ This example shows how to visualize features through a Jupyter widget.
     tracks=[Track(viz="features", label="my Features", source=pileup.sources.GA4GHFeatureJson(GA4GHFeatureJson))]
 
     # render tracks in widget
-    features = pileup.PileupViewer(locus='chr1:120000-121000', reference="hg19", tracks=tracks)
+    features = pileup.PileupViewer(chrom="chr1", start=120000, stop=121000, reference="hg19", tracks=tracks)
     features
 
 .. image:: ../img/jupyterWidgets/featureWidget.png
@@ -129,7 +129,7 @@ This example shows how to visualize genotypes through a Jupyter widget.
     tracks=[Track(viz="genotypes", label="my Genotypes", source=pileup.sources.VcfDataSource("<path_to_file>/my_vcf.vcf"))]
 
     # render tracks in widget
-    genotypes = pileup.PileupViewer(locus="chr22:21340030-21340150", reference="hg19", tracks=tracks)
+    genotypes = pileup.PileupViewer(chrom="chr22", start=21340030, stop=21340150, reference="hg19", tracks=tracks)
     genotypes
 
 .. image:: ../img/jupyterWidgets/genotypeWidget.png

mango-pileup/README.md

@@ -1,6 +1,6 @@
 # bdgenomics.mango.pileup
 
-bdgenomics.mango.pileup is a Jupyter widget that allows users to view genomic reads, variants and features in a Jupyter notebook or in Jupyter lab version >2.0.
+bdgenomics.mango.pileup is a Jupyter widget that allows users to view genomic reads, variants and features in a Jupyter notebook or in Jupyter lab version >3.0.0.
 bdgenomics.mango.pileup builds off of [pileup.js](https://github.com/hammerlab/pileup.js).
 
 ## Installation
@@ -13,8 +13,9 @@ bdgenomics.mango.pileup builds off of [pileup.js](https://github.com/hammerlab/p
 
     $ jupyter nbextension enable --py --sys-prefix bdgenomics.mango.pileup  # can be skipped for notebook version 5.3 and above
 
-#### Install widgets for jupyter lab:
+#### Install widgets for jupyterLab:
 
+    $ jupyter labextension install @jupyter-widgets/jupyterlab-manager # install the Jupyter widgets extension
     $ jupyter labextension install bdgenomics.mango.pileup
 
 ## Running Examples
@@ -29,23 +30,22 @@ Or run in Jupyter lab:
 
 ### from Source:
 
-For a development installation (requires npm (version >= 3.8) and node (version >= 4.0)):
+For a development installation (requires npm (version >= 3.8) and node (version >= 12.0)):
 
     $ git clone https://github.com/bdgenomics/mango
     $ cd mango-pileup
-    $ rm -r bdgenomics/mango/pileup/static
 
-Install bdgenomics.mango.pileup:
+Install bdgenomics.mango.pileup as a Jupyter Notebook Extension:
 
+    $ make clean
     $ pip install -e .
     $ jupyter nbextension install --py --symlink --sys-prefix bdgenomics.mango.pileup
-    $ jupyter nbextension enable --py --sys-prefix bdgenomics.mango.pileup]
+    $ jupyter nbextension enable --py --sys-prefix bdgenomics.mango.pileup
 
 Note for developers: the --symlink argument on Linux or OS X allows one to modify the JavaScript code in-place. This feature is not available with Windows.
 
 
-To install the JupyterLab extension, install the Package, the Jupyter widgets extension, and the bdgenomics.mango.pileup extension:
-
+Install bdgenomics.mango.pileup as a JupyterLab extension:
 
     $ pip install -e .
     $ cd bdgenomics/mango/js/

mango-pileup/RELEASE.md

@@ -1,9 +1,11 @@
 # Release on npm
+JupyterLab requires an npm version to be installed.
 To release a new version of bdgenomics.mango.pileup on npm:
 
-- Update
-- cd bdgenomics/mango/js.
-- Update `version` in `package.json`. Commit this change.
+- Update the frontend `version` in `bdgenomics/mango/js/package.json`
+and `bdgenomics/mango/pileup/_version.py`.
+Make sure these versions match. Commit this change.
+- cd into `bdgenomics/mango/js/`
 - Run `scripts/publish.sh`.
 - Run `npm publish`.
 - Push to github.

mango-pileup/bdgenomics/mango/io/genomicfile.py

@@ -53,4 +53,5 @@ def _visualization(cls, df):
     def from_pandas(cls, df):
         df._mango_parse = cls._parse(df)
         df._mango_to_json = cls._to_json(df)
+        df._pileup_visualization = cls._visualization(df)
         return df

mango-pileup/bdgenomics/mango/io/test/test_bed.py

@@ -29,13 +29,13 @@ class BedFileTest(IOTestCase):
     global filename
     filename = "chr17.582500-594500.bed"
 
-    
+
     def test_required_columns(self):
         dataframe = read_bed(self.exampleFile(filename))
         dataframe_columns = list(dataframe.columns)
         for name in ("chrom", "chromStart", "chromEnd"):
             assert(name in dataframe_columns)
-    
+
     def test_column_type(self):
         dataframe = read_bed(self.exampleFile("chr17.582500-594500.bed"))
 
@@ -51,7 +51,7 @@ def test_column_type(self):
 
         for i in range(len(chromosomes)):
             assert(type(chromosomes[i] == int))
-    
+
     def test_validate_num_rows(self):
         file = self.exampleFile(filename)
         dataframe = read_bed(file)
@@ -80,8 +80,9 @@ def test_visualization(self):
 
         assert(dataframe._pileup_visualization == "featureJson")
         tracks=[Track(viz="features", label="my features", source=pileup.sources.DataFrameSource(dataframe))]
-        reads = pileup.PileupViewer(locus="chr22:10436-10564", reference="hg19", tracks=tracks)
+        reads = pileup.PileupViewer(chrom="chr22", start=10436,stop=10564, reference="hg19", tracks=tracks)
         assert(str(type(reads)) == '<class \'bdgenomics.mango.pileup.pileupViewer.PileupViewer\'>')
+        assert(reads.chrom == 'chr22')
 
 
 # Run tests

mango-pileup/bdgenomics/mango/io/test/test_vcf.py

@@ -46,7 +46,7 @@ def enforce_type(item, type_x):
             if (head == 'POS'):
                 current_type = "<class 'numpy.int64'>";
             elif (head == 'QUAL'):
-                current_type = "<class 'numpy.float64'>";                
+                current_type = "<class 'numpy.float64'>";
             result = [enforce_type, list(dataframe[head])]
 
     def test_to_json(self):
@@ -67,9 +67,9 @@ def test_visualization(self):
 
         assert(dataframe._pileup_visualization == "variantJson")
         tracks=[Track(viz="variants", label="my variants", source=pileup.sources.DataFrameSource(dataframe))]
-        reads = pileup.PileupViewer(locus="chr22:10436-10564", reference="hg19", tracks=tracks)
+        reads = pileup.PileupViewer(chrom="chr22",start=10436,stop=10564, reference="hg19", tracks=tracks)
         assert(str(type(reads)) == '<class \'bdgenomics.mango.pileup.pileupViewer.PileupViewer\'>')
-
+        assert(reads.chrom == 'chr22')
 
     # Run tests
 if __name__ == '__main__':

mango-pileup/bdgenomics/mango/js/README.md

@@ -34,11 +34,23 @@ Matching versions:
 
 | npm          | pypi    |
 |--------------|---------|
-| 0.0.5-beta.0 | 0.0.6a1 |
+| 0.0.6-beta.1 | 0.0.6a1 |
 
 
 ## Development
 
-- git clone https://github.com/bigdatagenomics/mango.git
-- cd mango-pileup/bdgenomics/mango/js
-- make develop
+    $ git clone https://github.com/bigdatagenomics/mango.git
+    $ cd mango-pileup/bdgenomics/mango/js
+    $ make develop
+
+## Testing
+
+To run unit tests, run:
+
+    $ npm run watch:js # watches js and automatically updates
+    $ npm run test
+
+To run unit tests in a Chrome browser, run
+
+    $ npm run watch:js # watches js and automatically updates
+    $ npm run test:browser

mango-pileup/bdgenomics/mango/js/css/index.css

@@ -1,7 +1,3 @@
-.reads, .features {
-  height: 200px !important;
-}
-
 /* Used to show overflow for gear dropdown menus.
    Can add :has(> .pileup-root) when css has attribute works. */
 .jupyter-widgets-view, .p-Widget {

mango-pileup/bdgenomics/mango/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bdgenomics.mango.pileup",
-  "version": "0.0.5-beta.1",
+  "version": "0.0.6-beta.1",
   "description": "Interactive Jupyter genome browser",
   "author": "Alyssa Morrow",
   "main": "dist/index.js",
@@ -26,11 +26,12 @@
     "build:js": "tsc",
     "watch:js": "tsc --watch",
     "prepublish": "npm run build",
-    "test": "karma start --single-run --browsers ChromeHeadlessNoSandbox"
+    "test": "karma start --single-run --browsers ChromeHeadlessNoSandbox",
+    "test:browser": "karma start --single-run=false --browsers Chrome"
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@jupyter-widgets/controls": "^1.5.0",
+    "@jupyter-widgets/controls": "^1.5.0 || ^2 || ^3",
     "@types/mocha": "^5.2.7",
     "@types/node": "^12.0.2",
     "css-loader": "^0.23.1",
@@ -57,7 +58,7 @@
     "sinon-chai": "^3.3.0"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^2 || ^3",
+    "@jupyter-widgets/base": "^2 || ^3 || ^4.0.0",
     "@phosphor/messaging": "^1",
     "@phosphor/widgets": "^1",
     "pileup": "0.6.13",

mango-pileup/bdgenomics/mango/js/src/pileupViewer.ts

@@ -17,38 +17,35 @@ var PileupViewerModel = widgets.DOMWidgetModel.extend({
         _view_module : 'bdgenomics.mango.pileup',
         _model_module_version : _version,
         _view_module_version : _version,
-        locus : 'chr1:1-50',
+        chrom: 'chr1',
+        start: 1,
+        stop: 50,
         reference: 'hg19',
         svg: '',
         tracks: []
     })
 });
 
-function stringToLocus(str) {
-    var contig = str.split(':')[0];
-    var start =  parseInt(str.split(':')[1].split('-')[0]);
-    var stop =  parseInt(str.split(':')[1].split('-')[1]);
-    return {contig: contig, start: start, stop: stop};
+function createLocusDict(contig, start, stop) {
+    return { contig: contig, start: start, stop: stop };
 }
 
-function locusToString(locus) {
-    return `${locus.contig}:${locus.start}-${locus.stop}`;
-}
-
-
-
 // Custom View. Renders the widget model.
 var PileupViewerView = widgets.DOMWidgetView.extend({
     pileup: null,
 
     render: function() {
-      this.data_changed();
-      this.listenTo(this.model, 'change:locus', this._locus_changed, this);
-      this.listenTo(this.model, 'change:msg', this._msg_changed, this);
+        this.data_changed();
+        this.listenTo(this.model, 'change:chrom', this._locus_changed, this);
+        this.listenTo(this.model, 'change:start', this._locus_changed, this);
+        this.listenTo(this.model, 'change:stop', this._locus_changed, this);
+        this.listenTo(this.model, 'change:msg', this._msg_changed, this);
     },
 
     _locus_changed: function() {
-        var range = stringToLocus(this.model.get('locus'));
+        var range = createLocusDict(this.model.get('chrom'),
+                                  this.model.get('start'),
+                                  this.model.get('stop'));
         this.pileup.setRange(range);
     },
 
@@ -57,13 +54,18 @@ var PileupViewerView = widgets.DOMWidgetView.extend({
         switch(this.model.get('msg')) {
             case 'zoomIn':
                 var newRange = this.pileup.zoomIn();
-                this.model.set('locus', locusToString(newRange));
+                this.model.set('chrom', newRange.contig);
+                this.model.set('start', newRange.start);
+                this.model.set('stop', newRange.stop);
+
                 this.model.save_changes();
                 break;
 
             case 'zoomOut':
                 var newRange = this.pileup.zoomOut();
-                this.model.set('locus', locusToString(newRange));
+                this.model.set('chrom', newRange.contig);
+                this.model.set('start', newRange.start);
+                this.model.set('stop', newRange.stop);
                 this.model.save_changes();
                 break;
 
@@ -126,7 +128,9 @@ var PileupViewerView = widgets.DOMWidgetView.extend({
         sources.push(newTrack);
       }
 
-      var range = stringToLocus(this.model.get('locus'));
+      var range = createLocusDict(this.model.get('chrom'),
+                                this.model.get('start'),
+                                this.model.get('stop'));
 
       this.pileup = pileup.create(this.el, {
         range: range,