diff --git a/.eslintrc.json b/.eslintrc.json index d2233c8a..0262a8b9 100644 --- a/.eslintrc.json +++ b/.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" } } -} \ No newline at end of file +} diff --git a/.flowconfig b/.flowconfig index a0c26ec9..8782ac64 100644 --- a/.flowconfig +++ b/.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.* diff --git a/babel.config.json b/babel.config.json new file mode 100644 index 00000000..f6841ffa --- /dev/null +++ b/babel.config.json @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "@babel/react", "@babel/preset-flow"] +} diff --git a/package.json b/package.json index 6cdd591d..007979c1 100644 --- a/package.json +++ b/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" } } diff --git a/scripts/build.sh b/scripts/build.sh index c4df70fd..ebe7264a 100755 --- a/scripts/build.sh +++ b/scripts/build.sh @@ -13,7 +13,7 @@ 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') @@ -21,7 +21,7 @@ browserify \ # 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 diff --git a/scripts/watch.sh b/scripts/watch.sh index d1ebd3f4..7865158c 100755 --- a/scripts/watch.sh +++ b/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 diff --git a/src/main/Controls.js b/src/main/Controls.js index e32e641f..a4014b33 100644 --- a/src/main/Controls.js +++ b/src/main/Controls.js @@ -151,7 +151,7 @@ class Controls extends React.Component {
{' '} - +
); diff --git a/src/main/VisualizationWrapper.js b/src/main/VisualizationWrapper.js index 63038341..1ae9d6e3 100644 --- a/src/main/VisualizationWrapper.js +++ b/src/main/VisualizationWrapper.js @@ -85,7 +85,7 @@ class VisualizationWrapper extends React.Component { 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); } diff --git a/src/main/data/BigBed.js b/src/main/data/BigBed.js index 3a174c83..33c0d16e 100644 --- a/src/main/data/BigBed.js +++ b/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; diff --git a/src/main/data/formats/bamTypes.js b/src/main/data/formats/bamTypes.js index c064e2d0..dda255c4 100644 --- a/src/main/data/formats/bamTypes.js +++ b/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', diff --git a/src/main/data/gene.js b/src/main/data/gene.js index 5f3b08ae..ada9c9f1 100644 --- a/src/main/data/gene.js +++ b/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({ diff --git a/src/main/viz/CoverageTrack.js b/src/main/viz/CoverageTrack.js index ff778206..9a4dc460 100644 --- a/src/main/viz/CoverageTrack.js +++ b/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; } - getScale(): Scale { + getScale(): any { return d3utils.getTrackScale(this.props.range, this.props.width); } @@ -248,7 +247,7 @@ class CoverageTrack extends React.Componentnumber) { + renderTicks(ctx: DataCanvasRenderingContext2D, yScale: any) { var axisMax = yScale.domain()[0]; [0, Math.round(axisMax / 2), axisMax].forEach(tick => { // Draw a line indicating the tick diff --git a/src/main/viz/GeneTrack.js b/src/main/viz/GeneTrack.js index 1d56c73b..a213d1fb 100644 --- a/src/main/viz/GeneTrack.js +++ b/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>, State> { this.updateVisualization(); } - getScale(): Scale { + getScale(): any { return d3utils.getTrackScale(this.props.range, this.props.width); } diff --git a/src/main/viz/GenotypeTrack.js b/src/main/viz/GenotypeTrack.js index 9f9009fb..a491a347 100644 --- a/src/main/viz/GenotypeTrack.js +++ b/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, State> { this.updateVisualization(); } - getScale(): Scale { + getScale(): any { return d3utils.getTrackScale(this.props.range, this.props.width - LABEL_WIDTH); } diff --git a/src/main/viz/PileupTrack.js b/src/main/viz/PileupTrack.js index 9688c14b..f267b91e 100644 --- a/src/main/viz/PileupTrack.js +++ b/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>, State this.updateVisualization(); } - getScale(): Scale { + getScale(): any { return d3utils.getTrackScale(this.props.range, this.props.width); } diff --git a/src/test/MappedRemoteFile.js b/src/test/MappedRemoteFile.js index 980292e5..606bed7e 100644 --- a/src/test/MappedRemoteFile.js +++ b/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}`); } } diff --git a/src/test/components-test.js b/src/test/components-test.js index 6db0e301..d81c6529 100644 --- a/src/test/components-test.js +++ b/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 => diff --git a/src/test/sources/CytoBandDataSource-test.js b/src/test/sources/CytoBandDataSource-test.js index 6285d44e..01f9ac72 100644 --- a/src/test/sources/CytoBandDataSource-test.js +++ b/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) { diff --git a/src/test/viz/FeatureTrack-test.js b/src/test/viz/FeatureTrack-test.js index cc9775c0..a134b86b 100644 --- a/src/test/viz/FeatureTrack-test.js +++ b/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'); diff --git a/src/test/viz/GenomeTrack-test.js b/src/test/viz/GenomeTrack-test.js index 644f2c2c..26bc2e82 100644 --- a/src/test/viz/GenomeTrack-test.js +++ b/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'; diff --git a/src/test/viz/VariantTrack-test.js b/src/test/viz/VariantTrack-test.js index c49f0a01..bf64be2b 100644 --- a/src/test/viz/VariantTrack-test.js +++ b/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');