Update out of date versions for dependencies (#544)

* update out of date versions for dependencies and dev dependencies

.eslintrc.json

@@ -1,6 +1,6 @@
 
 {
-	"parser": "babel-eslint",
+	"parser": "@babel/eslint-parser",
 	"parserOptions": {
 		"ecmaVersion": 6,
 		"sourceType": "module",
@@ -36,4 +36,4 @@
 			"version": "15.6.1"
 		}
 	}
-}
+}

.flowconfig

@@ -14,6 +14,7 @@
 .*node_modules/jshint.*
 .*node_modules/jstransformify.*
 .*node_modules/uglify.*
+.*node_modules/module-deps.*
 .*node_modules/data-canvas.*
 .*node_modules/babel.*
 .*node_modules/d3.*

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/react", "@babel/preset-flow"]
+}

package.json

@@ -50,58 +50,62 @@
   ],
   "dependencies": {
     "backbone": "1.1.2",
-    "jquery": "3.5.0",
     "d3": "^3.5.5",
     "data-canvas": ">=0.1.1",
+    "errorify": "^0.3.1",
+    "file-saver": "2.0.2",
+    "html-to-image": "0.1.1",
     "jbinary": "^2.1.3",
     "jdataview": "^2.5.0",
+    "jquery": "3.5.0",
+    "memory-cache": "0.1.6",
     "pako": "^0.2.5",
     "q": "^1.1.2",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
+    "react": "^17.0.1",
     "react-color": "^2.17.3",
+    "react-dom": "^17.0.1",
     "shallow-equals": "0.0.0",
     "underscore": "^1.7.0",
-    "memory-cache": "0.1.6",
-    "html-to-image": "0.1.1",
-    "file-saver": "2.0.2"
+    "watch": "^1.0.2"
   },
   "devDependencies": {
+    "@babel/cli": "^7.12.16",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/preset-flow": "^7.12.13",
+    "@babel/preset-react": "^7.12.13",
     "arraybuffer-slice": "^0.1.2",
-    "babel": "^5.8.23",
-    "babel-eslint": "8.2.6",
-    "babel-core": "^5.8.23",
-    "babelify": "^6.3.0",
-    "browserify": "^10.2.4",
-    "chai": "^2.0.0",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
+    "chai": "^4.3.0",
     "coveralls": "^3.0.3",
     "envify": "^3.4.0",
-    "eslint": "^5.4.0",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-node": "^7.0.1",
+    "eslint": "^7.20.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-standard": "^3.1.0",
-    "eslint-plugin-react": "7.11.1",
+    "eslint-plugin-react": "7.22.0",
     "exorcist": "^0.4.0",
-    "flow-bin": "^0.79.1",
-    "http-server": "^0.11.0",
+    "flow-bin": "^0.120.1",
+    "http-server": "^0.12.3",
+    "install": "^0.13.0",
     "istanbul": "^0.4.5",
     "jsxhint": "git://github.com/strml/JSXHint.git",
     "lcov-parse": "0.0.9",
-    "mocha": "^5.2.0",
+    "mocha": "^8.3.0",
     "mocha-headless-chrome": "2.0.2",
+    "npm": "^7.5.4",
     "number-to-locale-string": "^1.0.0",
     "parse-data-uri": "^0.2.0",
     "prepush-hook": "^0.1.0",
-    "react-addons-test-utils": "^0.14.0",
-    "sinon": "^7.2.3",
+    "sinon": "^9.2.4",
     "smash": "0.0.14",
-    "source-map": "^0.3.0",
+    "source-map": "^0.7.3",
     "stats.js": "^1.0.0",
     "travis-weigh-in": "^1.0.2",
-    "uglify-js": "^2.4.23",
-    "uglifyify": "^3.0.1",
-    "watchify": "^3.2.1"
+    "uglify-js": "^3.12.8",
+    "uglifyify": "^5.0.2",
+    "watchify": "^4.0.0"
   }
 }

scripts/build.sh

@@ -13,15 +13,15 @@ cp -r src/lib dist/
 # Create dist/tests
 browserify \
   -v \
-  -t [ babelify --ignore src/lib ] \
+  -t [ babelify --ignore [src/lib] ] \
   --debug \
   -o dist/tests.js \
   $(find src/test -name '*.js')
 
 # Create dist/pileup.js
 browserify \
   -v \
-  -t [ babelify --ignore src/lib ] \
+  -t [ babelify --ignore [src/lib] ] \
   -g [ envify --NODE_ENV production ] \
   -g uglifyify \
   src/main/pileup.js \
@@ -34,12 +34,11 @@ cat dist/pileup.js | exorcist --base . dist/pileup.js.map > /dev/null
 
 version=$(grep '"version": ' package.json | sed 's/.*: "//; s/".*//')
 header="/*! pileup v$version | (c) 2015 HammerLab | Apache-2.0 licensed */"
+sourcemap="content='dist/pileup.js.map',filename='dist/pileup.min.js.map',includeSources=true"
 
 # Create dist/pileup.js.min{,.map}
 uglifyjs --compress --mangle \
-  --preamble "$header" \
-  --in-source-map dist/pileup.js.map \
-  --source-map-include-sources \
-  --source-map dist/pileup.min.js.map \
+  --beautify "beautify=false,preamble='$header'" \
+  --source-map $sourcemap \
   -o dist/pileup.min.js \
   dist/pileup.js

scripts/watch.sh

@@ -8,9 +8,11 @@ trap "trap - SIGTERM && kill -- -$$" SIGINT SIGTERM EXIT
 
 mkdir -p dist  # in case it doesn't exist; watchify needs it
 
+babelify --ignore [src/lib]
+
 # Start watchers
-watchify -v -t [ babelify --ignore src/lib ] src/test/{*.js,**/*.js} --debug -o dist/tests.js &
-watchify -v -t [ babelify --ignore src/lib ] src/main/pileup.js      --debug -o dist/pileup.js --standalone pileup &
+watchify -v -t [ babelify --ignore [src/lib] ] src/test/{*.js,**/*.js} --debug -o dist/tests.js &
+watchify -v -t [babelify --ignore [src/lib] ] src/main/pileup.js      --debug -o dist/pileup.js --standalone pileup &
 
 # Wait until background processes end
 wait

src/main/Controls.js

@@ -151,7 +151,7 @@ class Controls extends React.Component<Props, State> {
         <div className='zoom-controls'>
           <button className='btn-zoom-out' onClick={this.zoomOut.bind(this)}></button>{' '}
           <button className='btn-zoom-in' onClick={this.zoomIn.bind(this)}></button>
-          <input className='zoom-slider' ref ='slider' type="range" min="-15" max="0" onInput={this.handleSliderOnInput.bind(this)} class="slider"></input>
+          <input className='zoom-slider' ref ='slider' type="range" min="-15" max="0" onInput={this.handleSliderOnInput.bind(this)}></input>
         </div>
       </form>
     );

src/main/VisualizationWrapper.js

@@ -85,7 +85,7 @@ class VisualizationWrapper extends React.Component<Props, State> {
     window.removeEventListener('resize', this.onResizeListener);
   }
 
-  getScale(): (num: number)=>number {
+  getScale(): any {
     if (!this.props.range) return x => x;
     return d3utils.getTrackScale(this.props.range, this.state.width);
   }

src/main/data/BigBed.js

@@ -162,7 +162,7 @@ class ImmediateBigBed {
   contigMap: {[key:string]: number};
   chrIdToContig: string[];
 
-  constructor(remoteFile, header, cirTree, contigMap: {[key:string]: number}) {
+  constructor(remoteFile: RemoteFile, header: Object, cirTree: Object, contigMap: {[key:string]: number}) {
     this.remoteFile = remoteFile;
     this.header = header;
     this.cirTree = cirTree;

src/main/data/formats/bamTypes.js

@@ -56,6 +56,7 @@ var ThickAlignment = _.extend(_.clone(ThinAlignment), {
   auxiliary: ['array', {
     tag: ['string', 2],
     val_type: 'char',
+    // $FlowIgnore: TODO remove flow suppression
     value: ['if', ctx => ctx.val_type == 'B', {
              val_type: 'char',
              num_values: 'int32',

src/main/data/gene.js

@@ -75,7 +75,7 @@ class Gene {
       codingRegion = new Interval(parseInt(thickStart.values[0].stringValue),
           parseInt(thickEnd.values[0].stringValue));
     } else {
-      codingRegion = new Interval(position.start(), position.end());
+      codingRegion = new Interval(position.start(), position.stop());
     }
 
     return new Gene({

src/main/viz/CoverageTrack.js

@@ -9,7 +9,6 @@ import type {DataSource} from '../sources/DataSource';
 import Feature from '../data/feature';
 import type {DataCanvasRenderingContext2D} from 'data-canvas';
 import type {BinSummary} from './CoverageCache';
-import type {Scale} from './d3utils';
 import type {State} from '../types';
 import type {VizProps} from '../VisualizationWrapper';
 
@@ -199,7 +198,7 @@ class CoverageTrack extends React.Component<VizProps<DataSource<Alignment | Feat
     return <canvas ref='canvas' onClick={this.handleClick.bind(this)} />;
   }
 
-  getScale(): Scale {
+  getScale(): any {
     return d3utils.getTrackScale(this.props.range, this.props.width);
   }
 
@@ -248,7 +247,7 @@ class CoverageTrack extends React.Component<VizProps<DataSource<Alignment | Feat
   }
 
   // Draw three ticks on the left to set the scale for the user
-  renderTicks(ctx: DataCanvasRenderingContext2D, yScale: (num: number)=>number) {
+  renderTicks(ctx: DataCanvasRenderingContext2D, yScale: any) {
     var axisMax = yScale.domain()[0];
     [0, Math.round(axisMax / 2), axisMax].forEach(tick => {
       // Draw a line indicating the tick

src/main/viz/GeneTrack.js

@@ -8,7 +8,6 @@ import type {Strand} from '../Alignment';
 import Gene from '../data/gene';
 import type {DataSource} from '../sources/DataSource';
 import type {VizProps} from '../VisualizationWrapper';
-import type {Scale} from './d3utils';
 import type {State} from '../types';
 
 import GenericFeature from '../data/genericFeature';
@@ -113,7 +112,7 @@ class GeneTrack extends React.Component<VizProps<DataSource<Gene>>, State> {
     this.updateVisualization();
   }
 
-  getScale(): Scale {
+  getScale(): any {
     return d3utils.getTrackScale(this.props.range, this.props.width);
   }
 

src/main/viz/GenotypeTrack.js

@@ -8,7 +8,6 @@ import type {VcfDataSource} from '../sources/VcfDataSource';
 import type {VariantContext} from '../data/variant';
 import type {DataCanvasRenderingContext2D} from 'data-canvas';
 import type {VizProps} from '../VisualizationWrapper';
-import type {Scale} from './d3utils';
 
 import React from 'react';
 import _ from 'underscore';
@@ -184,7 +183,7 @@ class GenotypeTrack extends React.Component<VizProps<VcfDataSource>, State> {
         this.updateVisualization();
   }
 
-  getScale(): Scale {
+  getScale(): any {
     return d3utils.getTrackScale(this.props.range, this.props.width - LABEL_WIDTH);
   }
 

src/main/viz/PileupTrack.js

@@ -11,7 +11,6 @@ import type {VisualAlignment, InsertStats} from './PileupCache';
 import type {VisualGroup} from './AbstractCache';
 import type {DataCanvasRenderingContext2D} from 'data-canvas';
 import type {VizProps} from '../VisualizationWrapper';
-import type {Scale} from './d3utils';
 import type {State, NetworkStatus} from '../types';
 
 import React from 'react';
@@ -310,7 +309,7 @@ class PileupTrack extends React.Component<VizProps<DataSource<Alignment>>, State
     this.updateVisualization();
   }
 
-  getScale(): Scale {
+  getScale(): any {
     return d3utils.getTrackScale(this.props.range, this.props.width);
   }
 

src/test/MappedRemoteFile.js

@@ -61,7 +61,7 @@ class MappedRemoteFile extends RemoteFile {
         return buf;
       });
     } else {
-      return Q.reject(`Request for ${originalRequest} is not mapped in ${this.url}`);
+      return Q.reject(`Request for ${originalRequest.toString()} is not mapped in ${this.url}`);
     }
   }
 

src/test/components-test.js

@@ -83,8 +83,8 @@ describe('pileup', function() {
   };
 
   // TODO: consider moving this into the data-canvas library
-  function hasCanvasAndObjects(div, selector) {
-    return div.querySelector(selector + ' canvas') && drawnObjects(div, selector).length > 0;
+  function hasCanvasAndObjects(div, selector): boolean {
+    return div.querySelector(selector + ' canvas') !== null && drawnObjects(div, selector).length > 0;
   }
 
   var ready = ((): boolean =>

src/test/sources/CytoBandDataSource-test.js

@@ -30,7 +30,7 @@ describe('CytoBandDataSource', function() {
       expect(chr.bands[0].value).to.equal('gvar');
       done();
     });
-    source.rangeChanged(range);
+    source.rangeChanged({contig: range.contig, start: range.start(), stop: range.stop()});
   });
 
   it('should allow a mix of chr and non-chr', function(done) {

src/test/viz/FeatureTrack-test.js

@@ -16,7 +16,7 @@ import {waitFor} from '../async';
 
 import {yForRow} from '../../main/viz/pileuputils';
 
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 
 describe('FeatureTrack', function() {
   var testDiv= document.getElementById('testdiv');

src/test/viz/GenomeTrack-test.js

@@ -9,7 +9,7 @@
 
 import {expect} from 'chai';
 
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 
 import pileup from '../../main/pileup';
 import TwoBit from '../../main/data/TwoBit';

src/test/viz/VariantTrack-test.js

@@ -9,7 +9,7 @@ import pileup from '../../main/pileup';
 import dataCanvas from 'data-canvas';
 import {waitFor} from '../async';
 
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 
 describe('VariantTrack', function() {
   var testDiv = document.getElementById('testdiv');