genoverse 3.2.0 → 4.0.1

package/index.html

@@ -24,13 +24,12 @@
         <p>Genoverse is a portable, customizable, back-end independent JavaScript and HTML5 based genome browser which allows the user to explore data interactively.</p>
         <p>Data is visualized in the browser, meaning Genoverse can be installed on any website and show data from a wide range of online or local sources.</p>
         <p>Genoverse works with a variety of formats, such as XML, JSON, GFF, GFF3, BED (try drag-n-drop one), and can be customized to parse and display any data source as required.</p>
-        <p>For more information on how to use Genoverse please refer to <a href="help.pdf" target="_blank">this tutorial</a>.</p>
 
         <p class="help">If you have any questions or need help, please raise an issue at <a href="https://github.com/wtsi-web/Genoverse" target="_blank">https://github.com/wtsi-web/Genoverse</a></p>
       </div>
     </div>
 
-    <script type="text/javascript" src="js/genoverse.min.js"></script>
+    <script src="dist/genoverse.js"></script>
     <script>
       new Genoverse({
         container : '#genoverse', // Where to inject Genoverse (css/jQuery selector/DOM element)
@@ -42,25 +41,25 @@
         end       : 32370557,
         plugins   : [ 'controlPanel', [ 'karyotype', { showAssembly: true }], 'trackControls', 'resizer', 'focusRegion', 'fullscreen', 'tooltips', 'fileDrop' ],
         tracks    : [
-          Genoverse.Track.Scaleline.extend({ strand: false }),
-          Genoverse.Track.Scalebar,
-          Genoverse.Track.extend({
+          [ 'Scaleline', { strand: false }],
+          'Scalebar',
+          {
             name       : 'Sequence',
-            controller : Genoverse.Track.Controller.Sequence,
-            model      : Genoverse.Track.Model.Sequence.Ensembl,
-            view       : Genoverse.Track.View.Sequence,
+            controller : 'Sequence',
+            model      : 'Sequence.Ensembl',
+            view       : 'Sequence',
             100000     : false,
             resizable  : 'auto'
-          }),
-          Genoverse.Track.Gene,
-          Genoverse.Track.extend({
+          },
+          'Gene',
+          {
             name            : 'Regulatory Features',
             url             : '//rest.ensembl.org/overlap/region/human/__CHR__:__START__-__END__?feature=regulatory;content-type=application/json',
             resizable       : 'auto',
-            model           : Genoverse.Track.Model.extend({ dataRequestLimit : 5000000 }),
+            model           : { dataRequestLimit : 5000000 },
             setFeatureColor : function (f) { f.color = '#AAA'; }
-          }),
-          Genoverse.Track.dbSNP
+          },
+          'dbSNP'
         ]
       });
     </script>

package/jest.config.js

@@ -1,4 +1,9 @@
 module.exports = {
   testEnvironment : 'jsdom',
   testMatch       : [ '**/test/**/*.test.js' ],
+  setupFiles      : [ '<rootDir>/jest.setup.js' ],
+  transform       : {
+    '\\.js$': 'babel-jest',
+  },
+  transformIgnorePatterns: [ '/node_modules/(?!jquery)' ],
 };

package/jest.setup.js

@@ -0,0 +1,13 @@
+// webpack's require.context is not supported by Jest, but is used in index.js.
+// This plugin adds the function global.__requireContext, which can be used instead,
+// and its presence in babel.config's `plugins` replaces require.context with global.__requireContext
+require('babel-plugin-require-context-hook/register')();
+
+// A hack to make jquery-ui's use of requirejs-style imports work with Jest.
+// babel-plugin-transform-amd-to-commonjs is used to transform calls to define() into require(),
+// but jquery-ui wraps these calls in:
+//   if ( typeof define === "function" && define.amd ) { ... }
+// so just using the transformation by itself is not enough - that code to be run as well.
+// Creating a fake define function solves this problem.
+global.define     = () => {};
+global.define.amd = {};

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "genoverse",
-  "version": "3.2.0",
+  "version": "4.0.1",
   "description": "Genoverse is a portable, customizable, back-end independent JavaScript and HTML5 based genome browser which allows the user to explore data in a dynamic and interactive manner.",
-  "main": "js/Genoverse.js",
+  "main": "src/js/Genoverse.js",
   "directories": {
-    "lib": "js",
+    "lib": "src/js",
     "test": "test"
   },
   "scripts": {
+    "dev": "webpack serve --mode development --env public-path=/dist/",
     "test": "jest",
-    "build": "yarn lint && node utils/makeExpanded.js && webpack",
+    "build": "webpack",
     "lint": "eslint '**/*.js'",
     "server": "node utils/devServer.js"
   },
@@ -24,20 +25,36 @@
   },
   "homepage": "https://wtsi-web.github.io/Genoverse/",
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/runtime-corejs3": "^7.16.7",
+    "@babel/core": "^7.17.2",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/runtime-corejs3": "^7.17.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "babel-plugin-transform-amd-to-commonjs": "^1.4.0",
     "canvas": "^2.8.0",
-    "core-js": "^3.20.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.0",
     "eslint": "^8.6.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-align-assignments": "^1.1.2",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-import": "^2.25.4",
-    "jest": "^27.4.7",
+    "jest": "^27.5.1",
+    "mini-css-extract-plugin": "^2.6.0",
     "terser-webpack-plugin": "^5.3.0",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1"
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.4"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.0.0",
+    "basejs": "^1.1.1",
+    "core-js": "^3.21.0",
+    "jParser": "^1.0.2",
+    "jquery": "^3.6.0",
+    "jquery-ui": "^1.13.0",
+    "lodash": "^4.17.21",
+    "rtree": "^1.4.2"
+  }
 }

package/src/css/fontawesome.css

@@ -0,0 +1,3 @@
+@import url('@fortawesome/fontawesome-free/css/fontawesome.min.css');
+@import url('@fortawesome/fontawesome-free/css/solid.min.css');
+@import url('@fortawesome/fontawesome-free/css/regular.min.css');

package/{css → src/css}/genoverse.css

@@ -180,7 +180,7 @@
 .gv-label-container li .gv-handle {
   float: left;
   position: relative;
-  background-image: url(../i/sort_handle.png);
+  background-image: url(../../assets/sort_handle.png);
   cursor: move;
   display: inline-block;
   height: calc(100% - 20px);

package/{css → src/css}/karyotype.css

@@ -1,3 +1,5 @@
+@import url('./tooltips.css');
+
 .gv-karyotype-plugin .gv-karyotype-container {
   height: 50px;
   overflow: hidden;