sequenceserver 3.0.1 → 3.1.0

data/public/sequenceserver-report.min.js

@@ -16,7 +16,7 @@
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AlignmentExporter)\n/* harmony export */ });\n/* harmony import */ var _exporter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./exporter */ \"./public/js/exporter.js\");\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\nvar AlignmentExporter = /*#__PURE__*/function () {\n  function AlignmentExporter() {\n    _classCallCheck(this, AlignmentExporter);\n    this.prepare_alignments_for_export = this.prepare_alignments_for_export.bind(this);\n    this.export_alignments = this.export_alignments.bind(this);\n  }\n  _createClass(AlignmentExporter, [{\n    key: \"wrap_string\",\n    value: function wrap_string(str, width) {\n      var idx = 0;\n      var wrapped = '';\n      while (true) {\n        wrapped += str.substring(idx, idx + width);\n        idx += width;\n        if (idx < str.length) {\n          wrapped += '\\n';\n        } else {\n          break;\n        }\n      }\n      return wrapped;\n    }\n  }, {\n    key: \"generate_fasta\",\n    value: function generate_fasta(hsps) {\n      var fasta = '';\n      underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].each(hsps, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (hsp) {\n        fasta += '>' + hsp.query_id + ':' + hsp.qstart + '-' + hsp.qend + '\\n';\n        fasta += hsp.qseq + '\\n';\n        fasta += '>' + hsp.query_id + ':' + hsp.qstart + '-' + hsp.qend + '_alignment_' + hsp.hit_id + ':' + hsp.sstart + '-' + hsp.send + '\\n';\n        fasta += hsp.midline + '\\n';\n        fasta += '>' + hsp.hit_id + ':' + hsp.sstart + '-' + hsp.send + '\\n';\n        fasta += hsp.sseq + '\\n';\n      }, this));\n      return fasta;\n    }\n  }, {\n    key: \"get_alignments_download_metadata\",\n    value: function get_alignments_download_metadata(hsps, filename_prefix) {\n      var fasta = this.generate_fasta(hsps);\n      var blob = new Blob([fasta], {\n        type: 'text/fasta'\n      });\n      var filename = _exporter__WEBPACK_IMPORTED_MODULE_0__.sanitize_filename(filename_prefix) + '.txt';\n      return {\n        filename: filename,\n        blob: blob\n      };\n    }\n  }, {\n    key: \"prepare_alignments_for_export\",\n    value: function prepare_alignments_for_export(hsps, filename_prefix) {\n      var _this$get_alignments_ = this.get_alignments_download_metadata(hsps, filename_prefix),\n        filename = _this$get_alignments_.filename,\n        blob = _this$get_alignments_.blob;\n      var blob_url = _exporter__WEBPACK_IMPORTED_MODULE_0__.generate_blob_url(blob, filename);\n      return blob_url;\n    }\n  }, {\n    key: \"export_alignments\",\n    value: function export_alignments(hsps, filename_prefix) {\n      var _this$get_alignments_2 = this.get_alignments_download_metadata(hsps, filename_prefix),\n        filename = _this$get_alignments_2.filename,\n        blob = _this$get_alignments_2.blob;\n      _exporter__WEBPACK_IMPORTED_MODULE_0__.download_blob(blob, filename);\n    }\n  }]);\n  return AlignmentExporter;\n}();\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/alignment_exporter.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AlignmentExporter)\n/* harmony export */ });\n/* harmony import */ var _exporter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./exporter */ \"./public/js/exporter.js\");\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\nvar AlignmentExporter = /*#__PURE__*/function () {\n  function AlignmentExporter() {\n    _classCallCheck(this, AlignmentExporter);\n    this.prepare_alignments_for_export = this.prepare_alignments_for_export.bind(this);\n    this.export_alignments = this.export_alignments.bind(this);\n  }\n  return _createClass(AlignmentExporter, [{\n    key: \"wrap_string\",\n    value: function wrap_string(str, width) {\n      var idx = 0;\n      var wrapped = '';\n      while (true) {\n        wrapped += str.substring(idx, idx + width);\n        idx += width;\n        if (idx < str.length) {\n          wrapped += '\\n';\n        } else {\n          break;\n        }\n      }\n      return wrapped;\n    }\n  }, {\n    key: \"generate_fasta\",\n    value: function generate_fasta(hsps) {\n      var fasta = '';\n      underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].each(hsps, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (hsp) {\n        fasta += '>' + hsp.query_id + ':' + hsp.qstart + '-' + hsp.qend + '\\n';\n        fasta += hsp.qseq + '\\n';\n        fasta += '>' + hsp.query_id + ':' + hsp.qstart + '-' + hsp.qend + '_alignment_' + hsp.hit_id + ':' + hsp.sstart + '-' + hsp.send + '\\n';\n        fasta += hsp.midline + '\\n';\n        fasta += '>' + hsp.hit_id + ':' + hsp.sstart + '-' + hsp.send + '\\n';\n        fasta += hsp.sseq + '\\n';\n      }, this));\n      return fasta;\n    }\n  }, {\n    key: \"get_alignments_download_metadata\",\n    value: function get_alignments_download_metadata(hsps, filename_prefix) {\n      var fasta = this.generate_fasta(hsps);\n      var blob = new Blob([fasta], {\n        type: 'text/fasta'\n      });\n      var filename = _exporter__WEBPACK_IMPORTED_MODULE_0__.sanitize_filename(filename_prefix) + '.txt';\n      return {\n        filename: filename,\n        blob: blob\n      };\n    }\n  }, {\n    key: \"prepare_alignments_for_export\",\n    value: function prepare_alignments_for_export(hsps, filename_prefix) {\n      var _this$get_alignments_ = this.get_alignments_download_metadata(hsps, filename_prefix),\n        filename = _this$get_alignments_.filename,\n        blob = _this$get_alignments_.blob;\n      var blob_url = _exporter__WEBPACK_IMPORTED_MODULE_0__.generate_blob_url(blob, filename);\n      return blob_url;\n    }\n  }, {\n    key: \"export_alignments\",\n    value: function export_alignments(hsps, filename_prefix) {\n      var _this$get_alignments_2 = this.get_alignments_download_metadata(hsps, filename_prefix),\n        filename = _this$get_alignments_2.filename,\n        blob = _this$get_alignments_2.blob;\n      _exporter__WEBPACK_IMPORTED_MODULE_0__.download_blob(blob, filename);\n    }\n  }]);\n}();\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/alignment_exporter.js?");
 
 /***/ }),
 
@@ -27,7 +27,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../packages/circosJS@1.7.0 */ \"./public/packages/circosJS@1.7.0.js\");\n/* harmony import */ var _packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _grapher__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\n\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svgContainer, props) {\n    var _this = this;\n    _classCallCheck(this, Graph);\n    this.queries = [];\n    props.queries.forEach(function (query) {\n      if (query.hits.length > 0) {\n        _this.queries.push(query);\n      }\n    });\n    this.svgContainer = $svgContainer;\n    this.seq_type = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_4__.get_seq_type(props.program);\n    this.algorithm = props.program;\n    this.initiate();\n  }\n  _createClass(Graph, [{\n    key: \"initiate\",\n    value: function initiate() {\n      // this.width = 700;\n      this.width = this.svgContainer.width();\n      this.height = 600;\n      this.innerRadius = 200;\n      this.outerRadius = 230;\n      this.query_arr = [];\n      this.hit_arr = [];\n      this.layout_arr = [];\n      this.chords_arr = [];\n      // this.max_length = 0;\n      this.hsp_count = 50;\n      this.denominator = 1;\n      this.spacing = 20;\n      this.labelSpacing = 10;\n      var suffixes = {\n        amino_acid: 'aa',\n        nucleic_acid: 'bp'\n      };\n      this.construct_layout();\n      this.iterator_for_edits();\n      this.hit_arr = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].uniq(this.hit_arr);\n      this.handle_spacing();\n      var prefix = d3__WEBPACK_IMPORTED_MODULE_0___default().formatPrefix(this.max_length);\n      this.suffix = ' ' + prefix.symbol + suffixes[this.seq_type.subject_seq_type];\n      if (prefix.symbol == 'k') {\n        this.denominator = 1000;\n      } else if (prefix.symbol == 'M') {\n        this.denominator = 1000000;\n        this.spacing = 1000000;\n        this.labelSpacing = 200000;\n      } else if (prefix.symbol == 'g') {\n        this.denominator = 1000000000;\n      }\n      d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svgContainer[0]).insert('svg', ':first-child').attr('class', 'circosContainer');\n      this.create_instance(this.svgContainer, this.width, this.height);\n      if (this.chords_arr.length && this.layout_arr.length) {\n        this.instance_render();\n      } else {\n        this.render_error();\n      }\n      this.setupTooltip();\n      // this.drawLegend();\n    }\n  }, {\n    key: \"iterator_for_edits\",\n    value: function iterator_for_edits() {\n      this.max_length = this.calculate_max_length();\n      if (this.hit_arr.length > 10) {\n        this.complex_layout_edits();\n      }\n    }\n\n    // Generate both layout_arr and chords_arr with top hsps set by this.hsp_count\n  }, {\n    key: \"construct_layout\",\n    value: function construct_layout() {\n      var hsp_count = 0;\n      var query_count = 0;\n      var num_karyotype = 32;\n      var num_queries = this.queries.length;\n      var x = Math.min(num_karyotype / 2, num_queries);\n      var num_hits = (num_karyotype - x) / x;\n      this.new_layout = [];\n      this.data = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.queries, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        if (query_count < x) {\n          var label = query.id;\n          var len = query.length;\n          var item1 = {\n            len: len,\n            color: '#8dd3c7',\n            label: label,\n            id: 'Query_' + this.clean_id(query.id),\n            ori_id: label\n          };\n          this.layout_arr.push(item1);\n          var hit_details = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(query.hits, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hit) {\n            if (hit.number < num_hits) {\n              var hsp_details = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(hit.hsps, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hsp) {\n                if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.hit_arr, hit.id) == -1) {\n                  var label = hit.id;\n                  var len = hit.length;\n                  this.hit_arr.push(hit.id);\n                  var item2 = {\n                    len: len,\n                    color: '#80b1d3',\n                    label: label,\n                    id: 'Hit_' + this.clean_id(hit.id),\n                    ori_id: label\n                  };\n                  this.layout_arr.push(item2);\n                }\n                var item3 = ['Query_' + this.clean_id(query.id), hsp.qstart, hsp.qend, 'Hit_' + this.clean_id(hit.id), hsp.sstart, hsp.send, hit.number, hsp];\n                this.chords_arr.push(item3);\n                return hsp;\n              }, this));\n              return hit;\n            }\n          }, this));\n        }\n        this.query_arr.push(query.id);\n        return query;\n      }, this));\n    }\n\n    // rearraging hit and query karyotypes to have all query in one place\n  }, {\n    key: \"rearrange_new_layout\",\n    value: function rearrange_new_layout() {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.new_layout, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var id = obj.id.slice(0, 3);\n        if (id == 'Que') {\n          this.layout_arr.push(obj);\n        }\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.new_layout, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var id = obj.id.slice(0, 3);\n        if (id == 'Hit') {\n          this.layout_arr.push(obj);\n        }\n      }, this));\n    }\n\n    // label edits along with deleting hits which are too small to display\n  }, {\n    key: \"complex_layout_edits\",\n    value: function complex_layout_edits() {\n      this.delete_from_layout = [];\n      this.delete_from_chords = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        var rel_length = (obj.len / this.max_length).toFixed(3);\n        var label = obj.label;\n        if (rel_length < 0.1 && obj.id.slice(0, 3) != 'Que') {\n          this.delete_from_layout.push(obj);\n          this.hit_arr.slice(underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.hit_arr, obj.label), 1); // corresponding delete from hit_arr\n        }\n      }, this));\n    }\n\n    // get the chords_arr index based on hit or query id\n  }, {\n    key: \"check_in_chords_arr\",\n    value: function check_in_chords_arr(id, type, index) {\n      var count = 0;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        if (type == 'Que') {\n          if (obj[0] != id) {\n            count++;\n          }\n        }\n      }, this));\n      if (count == this.chords_arr.length) {\n        console.log('no record found ' + id);\n        this.delete_arr.push(index);\n      }\n    }\n\n    // get index of hit_arr based on id\n  }, {\n    key: \"find_index_of_hit\",\n    value: function find_index_of_hit(id) {\n      var found;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.queries, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(query.hits, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hit) {\n          var check_id = 'Hit_' + this.clean_id(hit.id);\n          if (id == check_id) {\n            found = hit.id;\n          }\n        }, this));\n      }, this));\n      return underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.layout_arr, found);\n    }\n  }, {\n    key: \"edit_labels\",\n    value: function edit_labels() {\n      console.log('label edits');\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var rel_length = (obj.len / this.max_length).toFixed(3);\n        var label = obj.label;\n        if (rel_length < 0.41) {\n          obj.label = '..';\n        } else if (label.length > 10) {\n          obj.label = label.slice(0, 2) + '...';\n        } else {\n          obj.label = obj.ori_id;\n        }\n      }, this));\n    }\n  }, {\n    key: \"calculate_multipliers\",\n    value: function calculate_multipliers() {\n      var sum_query_length = 0;\n      var sum_hit_length = 0;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.query_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (id) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.data, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n          if (id == query.id) {\n            sum_query_length += query.length;\n          }\n        }, this));\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.data, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(query.hits, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hit) {\n          var index = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.hit_arr, hit.id);\n          if (index >= 0) {\n            sum_hit_length += hit.length;\n          }\n        }, this));\n      }, this));\n      var mid_sum = (sum_query_length + sum_hit_length) / 2;\n      console.log('mid sum ' + mid_sum + ' hit_sum ' + sum_hit_length + ' query_sum ' + sum_query_length);\n      this.query_multiplier = (mid_sum / sum_query_length).toFixed(3);\n      this.hit_multiplier = (mid_sum / sum_hit_length).toFixed(3);\n      console.log('query ' + this.query_multiplier + ' hit ' + this.hit_multiplier);\n    }\n  }, {\n    key: \"handle_spacing\",\n    value: function handle_spacing() {\n      if (this.max_length > 16000) {\n        this.spacing = 200;\n      } else if (this.max_length > 12000) {\n        this.spacing = 150;\n      } else if (this.max_length > 8000) {\n        this.spacing = 100;\n      } else if (this.max_length > 4000) {\n        this.spacing = 75;\n      } else if (this.max_length > 1800) {\n        this.spacing = 50;\n      }\n    }\n  }, {\n    key: \"calculate_max_length\",\n    value: function calculate_max_length() {\n      var max = 0;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, function (obj) {\n        if (max < obj.len) {\n          max = obj.len;\n        }\n      });\n      return max;\n    }\n  }, {\n    key: \"clean_id\",\n    value: function clean_id(id) {\n      return id.replace(/[^a-zA-Z0-9]/g, '');\n    }\n  }, {\n    key: \"create_instance\",\n    value: function create_instance(container, width, height) {\n      this.instance = new (_packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1___default())({\n        container: '.circosContainer',\n        width: width,\n        height: height\n      });\n      this.chord_layout();\n      this.instance_layout();\n    }\n  }, {\n    key: \"chord_layout\",\n    value: function chord_layout() {\n      if (this.chords_arr.length > 32) {\n        this.paletteSize = 32;\n      } else {\n        this.paletteSize = this.chords_arr.length;\n      }\n      return {\n        usePalette: true,\n        colorPaletteSize: this.paletteSize,\n        // color: 'rgb(0,0,0)',\n        colorPalette: 'RdYlBu',\n        // colors of chords based on last value in chords\n        // tooltipContent: 'Hiten',\n        opacity: 0.85 // add opacity to ribbons\n      };\n    }\n  }, {\n    key: \"instance_layout\",\n    value: function instance_layout() {\n      return {\n        innerRadius: this.innerRadius,\n        outerRadius: this.outerRadius,\n        cornerRadius: 1,\n        // rounding at edges of karyotypes\n        labels: {\n          display: true,\n          size: '10px',\n          radialOffset: 10\n        },\n        ticks: {\n          display: true,\n          spacing: this.spacing,\n          // the ticks values to display\n          labelSpacing: this.labelSpacing,\n          // ticks value apper in interval\n          labelDenominator: this.denominator,\n          // divide the value by this value\n          labelSuffix: this.suffix,\n          labelSize: '10px',\n          majorSpacing: this.labelSpacing,\n          // major ticks apper in interval\n          size: {\n            minor: 0,\n            // to remove minor ticks\n            major: 4\n          }\n        }\n      };\n    }\n  }, {\n    key: \"instance_render\",\n    value: function instance_render() {\n      this.instance.layout(this.instance_layout(), this.layout_arr);\n      this.instance.chord('chord1', this.chord_layout(), this.chords_arr);\n      this.instance.render();\n    }\n  }, {\n    key: \"render_error\",\n    value: function render_error() {\n      this.svgContainer.find('svg').remove();\n      this.svg = d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svgContainer[0]).insert('svg', ':first-child').attr('width', this.svgContainer.width()).attr('height', this.svgContainer.height()).append('g').attr('class', 'circos-error').attr('transform', 'translate(' + this.svgContainer.width() / 2 + ',' + this.svgContainer.height() / 2 + ')').append('text').attr('text-anchor', 'start').attr('dy', '-0.25em').attr('x', -175).style('font-size', '14px').text('Chord diagram looks great with fewer than 16 queries');\n    }\n  }, {\n    key: \"layoutReset\",\n    value: function layoutReset() {\n      this.layoutHide = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, function (obj) {\n        $('.' + obj.id).css('opacity', 1);\n      });\n    }\n  }, {\n    key: \"chordsReset\",\n    value: function chordsReset() {\n      this.chordsHide = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, function (obj) {\n        var slen = obj[1] + obj[2];\n        var tlen = obj[4] + obj[5];\n        $('#' + obj[0] + '_' + slen + '_' + obj[3] + '_' + tlen).show();\n      });\n    }\n  }, {\n    key: \"chordsCheck\",\n    value: function chordsCheck(id, type) {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        if (type == 'Que') {\n          if (obj[0] == id) {\n            this.chordsHide.push(index);\n            this.layoutHide.push(obj[3]);\n          }\n        }\n        if (type == 'Hit') {\n          if (obj[3] == id) {\n            this.chordsHide.push(index);\n            this.layoutHide.push(obj[0]);\n          }\n        }\n      }, this));\n    }\n  }, {\n    key: \"chordsClean\",\n    value: function chordsClean() {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.chordsHide, index) == -1) {\n          var slen = obj[1] + obj[2];\n          var tlen = obj[4] + obj[5];\n          $('#' + obj[0] + '_' + slen + '_' + obj[3] + '_' + tlen).hide();\n        }\n      }, this));\n    }\n  }, {\n    key: \"layoutClean\",\n    value: function layoutClean() {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.layoutHide, obj.id) == -1) {\n          $('.' + obj.id).css('opacity', 0.1);\n        }\n      }, this));\n    }\n  }, {\n    key: \"setupTooltip\",\n    value: function setupTooltip() {\n      var selected = {};\n      $('.circos-distribution').on('click', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (event) {\n        event.stopPropagation();\n        this.layoutReset();\n        this.chordsReset();\n        selected = {};\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.query_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (id, index) {\n        this.chordsHide = [];\n        this.layoutHide = [];\n        if (id) {\n          $('.circos .Query_' + this.clean_id(id)).attr('data-toggle', 'tooltip').attr('title', id).on('click', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (event) {\n            event.stopPropagation();\n            if (selected[index] != id) {\n              selected[index] = id;\n              var cleaned_id = 'Query_' + this.clean_id(id);\n              this.layoutHide.push(cleaned_id);\n              this.chordsCheck(cleaned_id, 'Que');\n              this.chordsClean();\n              this.layoutClean();\n            } else {\n              selected[index] = 0;\n              this.layoutReset();\n              this.chordsReset();\n            }\n          }, this));\n        }\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.hit_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (id, index) {\n        this.chordsHide = [];\n        this.layoutHide = [];\n        if (id) {\n          $('.circos .Hit_' + this.clean_id(id)).attr('data-toggle', 'tooltip').attr('title', id).on('click', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (event) {\n            event.stopPropagation();\n            if (selected[index] != id) {\n              selected[index] = id;\n              var cleaned_id = 'Hit_' + this.clean_id(id);\n              this.layoutHide.push(cleaned_id);\n              this.chordsCheck(cleaned_id, 'Hit');\n              this.chordsClean();\n              this.layoutClean();\n            } else {\n              selected[index] = 0;\n              this.layoutReset();\n              this.chordsReset();\n            }\n          }, this));\n        }\n      }, this));\n      var algorithm = this.algorithm;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, function (obj) {\n        $('#' + obj[0] + '_' + obj[3]).attr('data-toggle', 'tooltip').attr('title', function () {\n          // E value and identity.\n          var alt_tooltip = 'E value: ' + _visualisation_helpers__WEBPACK_IMPORTED_MODULE_4__.prettify_evalue(obj[7].evalue) + \", Identities: \".concat(_utils__WEBPACK_IMPORTED_MODULE_5__[\"default\"].inPercentage(obj[7].identity, obj[7].length));\n          // Positives (for protein alignment).\n          if (algorithm != 'blastn') {\n            alt_tooltip += \"<br>Positives: \".concat(_utils__WEBPACK_IMPORTED_MODULE_5__[\"default\"].inPercentage(obj[7].positives, obj[7].length));\n          }\n          // Gaps. My understanding is that identities and gaps should add up to 100%.\n          alt_tooltip += \", Gaps: \".concat(_utils__WEBPACK_IMPORTED_MODULE_5__[\"default\"].inPercentage(obj[7].gaps, obj[7].length));\n          return alt_tooltip;\n        });\n      });\n      $('[data-toggle=\"tooltip\"]').tooltip({\n        placement: 'top',\n        container: 'body',\n        html: 'true',\n        delay: 0,\n        'white-space': 'nowrap'\n      });\n    }\n  }, {\n    key: \"ratioCalculate\",\n    value: function ratioCalculate(value, min, max, scope, reverse, logScale) {\n      var fraction, scaleLogBase, x;\n      scaleLogBase = logScale ? 2.3 : 1;\n      if (min === max || value === min && !reverse || value === max && reverse) {\n        return 0;\n      }\n      if (value === max || value === min && reverse) {\n        return scope - 1;\n      }\n      fraction = (value - min) / (max - min);\n      x = Math.exp(1 / scaleLogBase * Math.log(fraction));\n      if (reverse) {\n        x = 1 - x;\n      }\n      return Math.floor(scope * x);\n    }\n  }, {\n    key: \"drawLegend\",\n    value: function drawLegend() {\n      this.ratioHSP = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var item = {\n          number: obj[6],\n          evalue: obj[7].evalue\n        };\n        this.ratioHSP.push(item);\n      }, this));\n      var min = d3__WEBPACK_IMPORTED_MODULE_0___default().min(this.ratioHSP, function (d) {\n        return d.number;\n      });\n      var max = d3__WEBPACK_IMPORTED_MODULE_0___default().max(this.ratioHSP, function (d) {\n        return d.number;\n      });\n      console.log('chords_arr ' + this.chords_arr.length);\n      console.log('ratioHSP test ' + this.ratioHSP.length);\n      console.log('paletteSize ' + this.paletteSize);\n      console.log('min ' + min + ' max ' + max);\n      this.legend = d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svgContainer[0]).insert('svg', ':first-child').attr('height', 20).attr('width', this.ratioHSP.length * 30).attr('transform', 'translate(10, 10)').append('g').attr('class', 'RdYlBu').attr('transform', 'translate(10, 0)');\n      var bar = this.legend.selectAll('.bar').data(this.ratioHSP).enter().append('g').attr('class', 'g').attr('transform', function (d, i) {\n        return 'translate(' + i * 30 + ',0)';\n      }).append('rect').attr('class', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (d, i) {\n        var s = this.ratioCalculate(d.number, min, max, this.paletteSize, false, false);\n        console.log('calc ratio ' + s);\n        return 'q' + s + '-' + this.paletteSize;\n      }, this)).attr('data-toggle', 'tooltip').attr('title', function (d) {\n        return d.evalue;\n      }).attr('x', 1).attr('width', 30).attr('height', 20);\n      // .attr('fill','#43ff21');\n\n      var scale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([0, 250]).range([0, 100]);\n\n      // this.legend.append('rect')\n      //     .attr('x', 7*14)\n      //     .attr('width', 2*10)\n      //     .attr('height', 10)\n      //     .attr('fill','#43ff21');\n      //\n      // this.legend.append('text')\n      //     .attr('class','text-legend')\n      //     .attr('transform','translate('+10+',0)')\n      //     .attr('x',6*14)\n      //     .text('Weaker Hits');\n      //\n      // this.legend.append('text')\n      //     .attr('class','text-legend')\n      //     .attr('transform','translate('+10+',0)')\n      //     .attr('x',9*14)\n      //     .text('Stronger Hits');\n\n      // bar.selectAll('rect')\n\n      // this.legend.append('rect')\n      //     .attr('x',1)\n      //     .attr('width', 10)\n      //     .attr('height', 10)\n      //     .attr('fill','#232323');\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Chord diagram of queries and their top hits';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'circos';\n    }\n  }, {\n    key: \"collapseId\",\n    value: function collapseId(props) {\n      return 'circos-collapse';\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'Circos-visualisation';\n    }\n  }]);\n  return Graph;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_grapher__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(Graph));\n\n//# sourceURL=webpack://SequenceServer/./public/js/circos.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../packages/circosJS@1.7.0 */ \"./public/packages/circosJS@1.7.0.js\");\n/* harmony import */ var _packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var grapher__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\n\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svgContainer, props) {\n    var _this = this;\n    _classCallCheck(this, Graph);\n    this.queries = [];\n    props.queries.forEach(function (query) {\n      if (query.hits.length > 0) {\n        _this.queries.push(query);\n      }\n    });\n    this.svgContainer = $svgContainer;\n    this.seq_type = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_4__.get_seq_type(props.program);\n    this.algorithm = props.program;\n    this.initiate();\n  }\n  return _createClass(Graph, [{\n    key: \"initiate\",\n    value: function initiate() {\n      // this.width = 700;\n      this.width = this.svgContainer.width();\n      this.height = 600;\n      this.innerRadius = 200;\n      this.outerRadius = 230;\n      this.query_arr = [];\n      this.hit_arr = [];\n      this.layout_arr = [];\n      this.chords_arr = [];\n      // this.max_length = 0;\n      this.hsp_count = 50;\n      this.denominator = 1;\n      this.spacing = 20;\n      this.labelSpacing = 10;\n      var suffixes = {\n        amino_acid: 'aa',\n        nucleic_acid: 'bp'\n      };\n      this.construct_layout();\n      this.iterator_for_edits();\n      this.hit_arr = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].uniq(this.hit_arr);\n      this.handle_spacing();\n      var prefix = d3__WEBPACK_IMPORTED_MODULE_0___default().formatPrefix(this.max_length);\n      this.suffix = ' ' + prefix.symbol + suffixes[this.seq_type.subject_seq_type];\n      if (prefix.symbol == 'k') {\n        this.denominator = 1000;\n      } else if (prefix.symbol == 'M') {\n        this.denominator = 1000000;\n        this.spacing = 1000000;\n        this.labelSpacing = 200000;\n      } else if (prefix.symbol == 'g') {\n        this.denominator = 1000000000;\n      }\n      d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svgContainer[0]).insert('svg', ':first-child').attr('class', 'circosContainer');\n      this.create_instance(this.svgContainer, this.width, this.height);\n      if (this.chords_arr.length && this.layout_arr.length) {\n        this.instance_render();\n      } else {\n        this.render_error();\n      }\n      this.setupTooltip();\n      // this.drawLegend();\n    }\n  }, {\n    key: \"iterator_for_edits\",\n    value: function iterator_for_edits() {\n      this.max_length = this.calculate_max_length();\n      if (this.hit_arr.length > 10) {\n        this.complex_layout_edits();\n      }\n    }\n\n    // Generate both layout_arr and chords_arr with top hsps set by this.hsp_count\n  }, {\n    key: \"construct_layout\",\n    value: function construct_layout() {\n      var hsp_count = 0;\n      var query_count = 0;\n      var num_karyotype = 32;\n      var num_queries = this.queries.length;\n      var x = Math.min(num_karyotype / 2, num_queries);\n      var num_hits = (num_karyotype - x) / x;\n      this.new_layout = [];\n      this.data = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.queries, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        if (query_count < x) {\n          var label = query.id;\n          var len = query.length;\n          var item1 = {\n            len: len,\n            color: '#8dd3c7',\n            label: label,\n            id: 'Query_' + this.clean_id(query.id),\n            ori_id: label\n          };\n          this.layout_arr.push(item1);\n          var hit_details = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(query.hits, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hit) {\n            if (hit.number < num_hits) {\n              var hsp_details = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(hit.hsps, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hsp) {\n                if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.hit_arr, hit.id) == -1) {\n                  var label = hit.id;\n                  var len = hit.length;\n                  this.hit_arr.push(hit.id);\n                  var item2 = {\n                    len: len,\n                    color: '#80b1d3',\n                    label: label,\n                    id: 'Hit_' + this.clean_id(hit.id),\n                    ori_id: label\n                  };\n                  this.layout_arr.push(item2);\n                }\n                var item3 = ['Query_' + this.clean_id(query.id), hsp.qstart, hsp.qend, 'Hit_' + this.clean_id(hit.id), hsp.sstart, hsp.send, hit.number, hsp];\n                this.chords_arr.push(item3);\n                return hsp;\n              }, this));\n              return hit;\n            }\n          }, this));\n        }\n        this.query_arr.push(query.id);\n        return query;\n      }, this));\n    }\n\n    // rearraging hit and query karyotypes to have all query in one place\n  }, {\n    key: \"rearrange_new_layout\",\n    value: function rearrange_new_layout() {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.new_layout, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var id = obj.id.slice(0, 3);\n        if (id == 'Que') {\n          this.layout_arr.push(obj);\n        }\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.new_layout, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var id = obj.id.slice(0, 3);\n        if (id == 'Hit') {\n          this.layout_arr.push(obj);\n        }\n      }, this));\n    }\n\n    // label edits along with deleting hits which are too small to display\n  }, {\n    key: \"complex_layout_edits\",\n    value: function complex_layout_edits() {\n      this.delete_from_layout = [];\n      this.delete_from_chords = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        var rel_length = (obj.len / this.max_length).toFixed(3);\n        var label = obj.label;\n        if (rel_length < 0.1 && obj.id.slice(0, 3) != 'Que') {\n          this.delete_from_layout.push(obj);\n          this.hit_arr.slice(underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.hit_arr, obj.label), 1); // corresponding delete from hit_arr\n        }\n      }, this));\n    }\n\n    // get the chords_arr index based on hit or query id\n  }, {\n    key: \"check_in_chords_arr\",\n    value: function check_in_chords_arr(id, type, index) {\n      var count = 0;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        if (type == 'Que') {\n          if (obj[0] != id) {\n            count++;\n          }\n        }\n      }, this));\n      if (count == this.chords_arr.length) {\n        console.log('no record found ' + id);\n        this.delete_arr.push(index);\n      }\n    }\n\n    // get index of hit_arr based on id\n  }, {\n    key: \"find_index_of_hit\",\n    value: function find_index_of_hit(id) {\n      var found;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.queries, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(query.hits, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hit) {\n          var check_id = 'Hit_' + this.clean_id(hit.id);\n          if (id == check_id) {\n            found = hit.id;\n          }\n        }, this));\n      }, this));\n      return underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.layout_arr, found);\n    }\n  }, {\n    key: \"edit_labels\",\n    value: function edit_labels() {\n      console.log('label edits');\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var rel_length = (obj.len / this.max_length).toFixed(3);\n        var label = obj.label;\n        if (rel_length < 0.41) {\n          obj.label = '..';\n        } else if (label.length > 10) {\n          obj.label = label.slice(0, 2) + '...';\n        } else {\n          obj.label = obj.ori_id;\n        }\n      }, this));\n    }\n  }, {\n    key: \"calculate_multipliers\",\n    value: function calculate_multipliers() {\n      var sum_query_length = 0;\n      var sum_hit_length = 0;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.query_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (id) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.data, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n          if (id == query.id) {\n            sum_query_length += query.length;\n          }\n        }, this));\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.data, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(query.hits, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (hit) {\n          var index = underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.hit_arr, hit.id);\n          if (index >= 0) {\n            sum_hit_length += hit.length;\n          }\n        }, this));\n      }, this));\n      var mid_sum = (sum_query_length + sum_hit_length) / 2;\n      console.log('mid sum ' + mid_sum + ' hit_sum ' + sum_hit_length + ' query_sum ' + sum_query_length);\n      this.query_multiplier = (mid_sum / sum_query_length).toFixed(3);\n      this.hit_multiplier = (mid_sum / sum_hit_length).toFixed(3);\n      console.log('query ' + this.query_multiplier + ' hit ' + this.hit_multiplier);\n    }\n  }, {\n    key: \"handle_spacing\",\n    value: function handle_spacing() {\n      if (this.max_length > 16000) {\n        this.spacing = 200;\n      } else if (this.max_length > 12000) {\n        this.spacing = 150;\n      } else if (this.max_length > 8000) {\n        this.spacing = 100;\n      } else if (this.max_length > 4000) {\n        this.spacing = 75;\n      } else if (this.max_length > 1800) {\n        this.spacing = 50;\n      }\n    }\n  }, {\n    key: \"calculate_max_length\",\n    value: function calculate_max_length() {\n      var max = 0;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, function (obj) {\n        if (max < obj.len) {\n          max = obj.len;\n        }\n      });\n      return max;\n    }\n  }, {\n    key: \"clean_id\",\n    value: function clean_id(id) {\n      return id.replace(/[^a-zA-Z0-9]/g, '');\n    }\n  }, {\n    key: \"create_instance\",\n    value: function create_instance(container, width, height) {\n      this.instance = new (_packages_circosJS_1_7_0__WEBPACK_IMPORTED_MODULE_1___default())({\n        container: '.circosContainer',\n        width: width,\n        height: height\n      });\n      this.chord_layout();\n      this.instance_layout();\n    }\n  }, {\n    key: \"chord_layout\",\n    value: function chord_layout() {\n      if (this.chords_arr.length > 32) {\n        this.paletteSize = 32;\n      } else {\n        this.paletteSize = this.chords_arr.length;\n      }\n      return {\n        usePalette: true,\n        colorPaletteSize: this.paletteSize,\n        // color: 'rgb(0,0,0)',\n        colorPalette: 'RdYlBu',\n        // colors of chords based on last value in chords\n        // tooltipContent: 'Hiten',\n        opacity: 0.85 // add opacity to ribbons\n      };\n    }\n  }, {\n    key: \"instance_layout\",\n    value: function instance_layout() {\n      return {\n        innerRadius: this.innerRadius,\n        outerRadius: this.outerRadius,\n        cornerRadius: 1,\n        // rounding at edges of karyotypes\n        labels: {\n          display: true,\n          size: '10px',\n          radialOffset: 10\n        },\n        ticks: {\n          display: true,\n          spacing: this.spacing,\n          // the ticks values to display\n          labelSpacing: this.labelSpacing,\n          // ticks value apper in interval\n          labelDenominator: this.denominator,\n          // divide the value by this value\n          labelSuffix: this.suffix,\n          labelSize: '10px',\n          majorSpacing: this.labelSpacing,\n          // major ticks apper in interval\n          size: {\n            minor: 0,\n            // to remove minor ticks\n            major: 4\n          }\n        }\n      };\n    }\n  }, {\n    key: \"instance_render\",\n    value: function instance_render() {\n      this.instance.layout(this.instance_layout(), this.layout_arr);\n      this.instance.chord('chord1', this.chord_layout(), this.chords_arr);\n      this.instance.render();\n    }\n  }, {\n    key: \"render_error\",\n    value: function render_error() {\n      this.svgContainer.find('svg').remove();\n      this.svg = d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svgContainer[0]).insert('svg', ':first-child').attr('width', this.svgContainer.width()).attr('height', this.svgContainer.height()).append('g').attr('class', 'circos-error').attr('transform', 'translate(' + this.svgContainer.width() / 2 + ',' + this.svgContainer.height() / 2 + ')').append('text').attr('text-anchor', 'start').attr('dy', '-0.25em').attr('x', -175).style('font-size', '14px').text('Chord diagram looks great with fewer than 16 queries');\n    }\n  }, {\n    key: \"layoutReset\",\n    value: function layoutReset() {\n      this.layoutHide = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, function (obj) {\n        $('.' + obj.id).css('opacity', 1);\n      });\n    }\n  }, {\n    key: \"chordsReset\",\n    value: function chordsReset() {\n      this.chordsHide = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, function (obj) {\n        var slen = obj[1] + obj[2];\n        var tlen = obj[4] + obj[5];\n        $('#' + obj[0] + '_' + slen + '_' + obj[3] + '_' + tlen).show();\n      });\n    }\n  }, {\n    key: \"chordsCheck\",\n    value: function chordsCheck(id, type) {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        if (type == 'Que') {\n          if (obj[0] == id) {\n            this.chordsHide.push(index);\n            this.layoutHide.push(obj[3]);\n          }\n        }\n        if (type == 'Hit') {\n          if (obj[3] == id) {\n            this.chordsHide.push(index);\n            this.layoutHide.push(obj[0]);\n          }\n        }\n      }, this));\n    }\n  }, {\n    key: \"chordsClean\",\n    value: function chordsClean() {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.chordsHide, index) == -1) {\n          var slen = obj[1] + obj[2];\n          var tlen = obj[4] + obj[5];\n          $('#' + obj[0] + '_' + slen + '_' + obj[3] + '_' + tlen).hide();\n        }\n      }, this));\n    }\n  }, {\n    key: \"layoutClean\",\n    value: function layoutClean() {\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.layout_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj, index) {\n        if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(this.layoutHide, obj.id) == -1) {\n          $('.' + obj.id).css('opacity', 0.1);\n        }\n      }, this));\n    }\n  }, {\n    key: \"setupTooltip\",\n    value: function setupTooltip() {\n      var selected = {};\n      $('.circos-distribution').on('click', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (event) {\n        event.stopPropagation();\n        this.layoutReset();\n        this.chordsReset();\n        selected = {};\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.query_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (id, index) {\n        this.chordsHide = [];\n        this.layoutHide = [];\n        if (id) {\n          $('.circos .Query_' + this.clean_id(id)).attr('data-toggle', 'tooltip').attr('title', id).on('click', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (event) {\n            event.stopPropagation();\n            if (selected[index] != id) {\n              selected[index] = id;\n              var cleaned_id = 'Query_' + this.clean_id(id);\n              this.layoutHide.push(cleaned_id);\n              this.chordsCheck(cleaned_id, 'Que');\n              this.chordsClean();\n              this.layoutClean();\n            } else {\n              selected[index] = 0;\n              this.layoutReset();\n              this.chordsReset();\n            }\n          }, this));\n        }\n      }, this));\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.hit_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (id, index) {\n        this.chordsHide = [];\n        this.layoutHide = [];\n        if (id) {\n          $('.circos .Hit_' + this.clean_id(id)).attr('data-toggle', 'tooltip').attr('title', id).on('click', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (event) {\n            event.stopPropagation();\n            if (selected[index] != id) {\n              selected[index] = id;\n              var cleaned_id = 'Hit_' + this.clean_id(id);\n              this.layoutHide.push(cleaned_id);\n              this.chordsCheck(cleaned_id, 'Hit');\n              this.chordsClean();\n              this.layoutClean();\n            } else {\n              selected[index] = 0;\n              this.layoutReset();\n              this.chordsReset();\n            }\n          }, this));\n        }\n      }, this));\n      var algorithm = this.algorithm;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, function (obj) {\n        $('#' + obj[0] + '_' + obj[3]).attr('data-toggle', 'tooltip').attr('title', function () {\n          // E value and identity.\n          var alt_tooltip = 'E value: ' + _visualisation_helpers__WEBPACK_IMPORTED_MODULE_4__.prettify_evalue(obj[7].evalue) + \", Identities: \".concat(_utils__WEBPACK_IMPORTED_MODULE_5__[\"default\"].inPercentage(obj[7].identity, obj[7].length));\n          // Positives (for protein alignment).\n          if (algorithm != 'blastn') {\n            alt_tooltip += \"<br>Positives: \".concat(_utils__WEBPACK_IMPORTED_MODULE_5__[\"default\"].inPercentage(obj[7].positives, obj[7].length));\n          }\n          // Gaps. My understanding is that identities and gaps should add up to 100%.\n          alt_tooltip += \", Gaps: \".concat(_utils__WEBPACK_IMPORTED_MODULE_5__[\"default\"].inPercentage(obj[7].gaps, obj[7].length));\n          return alt_tooltip;\n        });\n      });\n      $('[data-toggle=\"tooltip\"]').tooltip({\n        placement: 'top',\n        container: 'body',\n        html: 'true',\n        delay: 0,\n        'white-space': 'nowrap'\n      });\n    }\n  }, {\n    key: \"ratioCalculate\",\n    value: function ratioCalculate(value, min, max, scope, reverse, logScale) {\n      var fraction, scaleLogBase, x;\n      scaleLogBase = logScale ? 2.3 : 1;\n      if (min === max || value === min && !reverse || value === max && reverse) {\n        return 0;\n      }\n      if (value === max || value === min && reverse) {\n        return scope - 1;\n      }\n      fraction = (value - min) / (max - min);\n      x = Math.exp(1 / scaleLogBase * Math.log(fraction));\n      if (reverse) {\n        x = 1 - x;\n      }\n      return Math.floor(scope * x);\n    }\n  }, {\n    key: \"drawLegend\",\n    value: function drawLegend() {\n      this.ratioHSP = [];\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.chords_arr, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (obj) {\n        var item = {\n          number: obj[6],\n          evalue: obj[7].evalue\n        };\n        this.ratioHSP.push(item);\n      }, this));\n      var min = d3__WEBPACK_IMPORTED_MODULE_0___default().min(this.ratioHSP, function (d) {\n        return d.number;\n      });\n      var max = d3__WEBPACK_IMPORTED_MODULE_0___default().max(this.ratioHSP, function (d) {\n        return d.number;\n      });\n      console.log('chords_arr ' + this.chords_arr.length);\n      console.log('ratioHSP test ' + this.ratioHSP.length);\n      console.log('paletteSize ' + this.paletteSize);\n      console.log('min ' + min + ' max ' + max);\n      this.legend = d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svgContainer[0]).insert('svg', ':first-child').attr('height', 20).attr('width', this.ratioHSP.length * 30).attr('transform', 'translate(10, 10)').append('g').attr('class', 'RdYlBu').attr('transform', 'translate(10, 0)');\n      var bar = this.legend.selectAll('.bar').data(this.ratioHSP).enter().append('g').attr('class', 'g').attr('transform', function (d, i) {\n        return 'translate(' + i * 30 + ',0)';\n      }).append('rect').attr('class', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (d, i) {\n        var s = this.ratioCalculate(d.number, min, max, this.paletteSize, false, false);\n        console.log('calc ratio ' + s);\n        return 'q' + s + '-' + this.paletteSize;\n      }, this)).attr('data-toggle', 'tooltip').attr('title', function (d) {\n        return d.evalue;\n      }).attr('x', 1).attr('width', 30).attr('height', 20);\n      // .attr('fill','#43ff21');\n\n      var scale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([0, 250]).range([0, 100]);\n\n      // this.legend.append('rect')\n      //     .attr('x', 7*14)\n      //     .attr('width', 2*10)\n      //     .attr('height', 10)\n      //     .attr('fill','#43ff21');\n      //\n      // this.legend.append('text')\n      //     .attr('class','text-legend')\n      //     .attr('transform','translate('+10+',0)')\n      //     .attr('x',6*14)\n      //     .text('Weaker Hits');\n      //\n      // this.legend.append('text')\n      //     .attr('class','text-legend')\n      //     .attr('transform','translate('+10+',0)')\n      //     .attr('x',9*14)\n      //     .text('Stronger Hits');\n\n      // bar.selectAll('rect')\n\n      // this.legend.append('rect')\n      //     .attr('x',1)\n      //     .attr('width', 10)\n      //     .attr('height', 10)\n      //     .attr('fill','#232323');\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Chord diagram of queries and their top hits';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'circos';\n    }\n  }, {\n    key: \"graphId\",\n    value: function graphId(props) {\n      return 'circos-collapse';\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'Circos-visualisation';\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,grapher__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(Graph));\n\n//# sourceURL=webpack://SequenceServer/./public/js/circos.js?");
 
 /***/ }),
 
@@ -38,7 +38,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CloudShareModal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _share_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./share_url */ \"./public/js/share_url.js\");\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n/**\n * Takes sequence accession as props, fetches the sequence from the server, and\n * displays it in a modal.\n */\n\n\n\nvar CloudShareModal = /*#__PURE__*/function (_React$Component) {\n  _inherits(CloudShareModal, _React$Component);\n  var _super = _createSuper(CloudShareModal);\n  function CloudShareModal(props) {\n    var _this;\n    _classCallCheck(this, CloudShareModal);\n    _this = _super.call(this, props);\n    _defineProperty(_assertThisInitialized(_this), \"handleChange\", function (e) {\n      var _e$target = e.target,\n        name = _e$target.name,\n        value = _e$target.value,\n        type = _e$target.type,\n        checked = _e$target.checked;\n      var inputValue = type === 'checkbox' ? checked : value;\n      _this.setState(_defineProperty({}, name, inputValue));\n    });\n    _defineProperty(_assertThisInitialized(_this), \"handleSubmit\", function (e) {\n      e.preventDefault();\n      var email = _this.state.email;\n      var regex = /\\/([^/]+)(?:\\/|#|\\?|$)/;\n      var match = window.location.pathname.match(regex);\n      var jobId = match[1];\n      _this.setState({\n        formState: 'loading'\n      });\n      var requestData = {\n        job_id: jobId,\n        sender_email: email\n      };\n      fetch('/cloud_share', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(requestData)\n      }).then(function (response) {\n        return response.json();\n      }).then(function (data) {\n        if (data.shareable_url) {\n          // Successful response\n          _this.setState({\n            formState: 'results',\n            shareableurl: data.shareable_url\n          });\n        } else if (data.errors) {\n          // Error response with specific error messages\n          var errorMessages = data.errors;\n          _this.setState({\n            formState: 'error',\n            errorMessages: errorMessages\n          });\n        } else {\n          // Generic error message\n          throw new Error('Unknown error submitting form');\n        }\n      })[\"catch\"](function (error) {\n        _this.setState({\n          formState: 'error',\n          errorMessages: [error.message]\n        });\n      });\n    });\n    _this.state = {\n      formState: 'input',\n      // Possible values: 'input', 'loading', 'results', 'error'\n      errorMessages: [],\n      email: '',\n      agreeToTos: false,\n      shareableurl: ''\n    };\n    _this.modalRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this;\n  }\n\n  // Lifecycle methods. //\n  _createClass(CloudShareModal, [{\n    key: \"renderLoading\",\n    value: function renderLoading() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n        className: \"text-center\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n          className: \"fa fa-spinner fa-3x fa-spin\"\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"p\", {\n          children: \"Uploading the job to SequenceServer Cloud, please wait...\"\n        })]\n      });\n    }\n  }, {\n    key: \"renderResults\",\n    value: function renderResults() {\n      var shareableurl = this.state.shareableurl;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_share_url__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        url: shareableurl,\n        querydb: this.props.querydb,\n        program: this.props.program,\n        queryLength: this.props.queryLength\n      });\n    }\n  }, {\n    key: \"renderError\",\n    value: function renderError() {\n      var errorMessages = this.state.errorMessages;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment, {\n        children: [underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(errorMessages, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (errorMessage) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n            className: \"fastan\",\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"section-content\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n                className: \"modal-error\",\n                children: errorMessage\n              })\n            })\n          });\n        }, this)), this.renderForm()]\n      });\n    }\n  }, {\n    key: \"renderForm\",\n    value: function renderForm() {\n      var _this$state = this.state,\n        email = _this$state.email,\n        agreeToTos = _this$state.agreeToTos;\n      var isSubmitDisabled = !agreeToTos;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"form\", {\n        onSubmit: this.handleSubmit,\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n          className: \"form-group\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"label\", {\n            htmlFor: \"emailInput\",\n            children: \"Your Email Address\"\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"input\", {\n            type: \"email\",\n            id: \"emailInput\",\n            className: \"form-control\",\n            placeholder: \"person@example.com\",\n            name: \"email\",\n            value: email,\n            required: \"required\",\n            onChange: this.handleChange\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"p\", {\n          children: [\"By submitting this form you agree to upload this SequenceServer result set to \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"a\", {\n            href: \"https://sequenceserver.com/cloud/\",\n            target: \"_bank\",\n            children: \"SenquenceServer Cloud\"\n          }), \", where it will become available on the internet to everyone with the link. You also agree that your email address will be stored on SequenceServer databases as proof of authentication for support and similar purposes.\"]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n          className: \"form-group form-check\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"input\", {\n            type: \"checkbox\",\n            id: \"tosCheckbox\",\n            className: \"form-check-input\",\n            name: \"agreeToTos\",\n            checked: agreeToTos,\n            onChange: this.handleChange\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"label\", {\n            htmlFor: \"tosCheckbox\",\n            className: \"form-check-label\",\n            children: [\"\\xA0I agree to the \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"b\", {\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"a\", {\n                href: \"https://sequenceserver.com/cloud/terms_and_conditions\",\n                target: \"_blank\",\n                children: \"Terms and Conditions of Service\"\n              })\n            })]\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n          type: \"submit\",\n          className: \"btn btn-primary\",\n          disabled: isSubmitDisabled,\n          children: \"Submit\"\n        })]\n      });\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var formState = this.state.formState;\n      var content;\n      switch (formState) {\n        case 'loading':\n          content = this.renderLoading();\n          break;\n        case 'results':\n          content = this.renderResults();\n          break;\n        case 'error':\n          content = this.renderError();\n          break;\n        case 'input':\n        default:\n          content = this.renderForm();\n          break;\n      }\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: \"modal cloud-share\",\n        ref: this.modalRef,\n        tabIndex: \"-1\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"modal-dialog\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n            className: \"modal-content\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"modal-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h3\", {\n                children: \"Share to SequenceServer Cloud\"\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"modal-body\",\n              children: content\n            })]\n          })\n        })\n      });\n    }\n\n    /*\n     * Returns jQuery reference to the main modal container.\n     */\n  }, {\n    key: \"modal\",\n    value: function modal() {\n      return $(this.modalRef.current);\n    }\n\n    /**\n     * Shows share dialogue.\n     */\n  }, {\n    key: \"show\",\n    value: function show() {\n      var _this2 = this;\n      this.setState({\n        requestCompleted: false\n      }, function () {\n        _this2.modal().modal(\"show\");\n      });\n    }\n\n    /**\n     * Hide share dialogue.\n     */\n  }, {\n    key: \"hide\",\n    value: function hide() {\n      this.modal().modal(\"hide\");\n    }\n  }]);\n  return CloudShareModal;\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component));\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/cloud_share_modal.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CloudShareModal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _share_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./share_url */ \"./public/js/share_url.js\");\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n/**\n * Takes sequence accession as props, fetches the sequence from the server, and\n * displays it in a modal.\n */\n\nvar CloudShareModal = /*#__PURE__*/function (_React$Component) {\n  function CloudShareModal(props) {\n    var _this2;\n    _classCallCheck(this, CloudShareModal);\n    _this2 = _callSuper(this, CloudShareModal, [props]);\n    // Lifecycle methods. //\n    _defineProperty(_this2, \"handleChange\", function (e) {\n      var _e$target = e.target,\n        name = _e$target.name,\n        value = _e$target.value,\n        type = _e$target.type,\n        checked = _e$target.checked;\n      var inputValue = type === 'checkbox' ? checked : value;\n      _this2.setState(_defineProperty({}, name, inputValue));\n    });\n    _defineProperty(_this2, \"handleSubmit\", function (e) {\n      e.preventDefault();\n      var email = _this2.state.email;\n      var regex = /\\/([^/]+)(?:\\/|#|\\?|$)/;\n      var match = window.location.pathname.match(regex);\n      var jobId = match[1];\n      _this2.setState({\n        formState: 'loading'\n      });\n      var requestData = {\n        job_id: jobId,\n        sender_email: email\n      };\n      fetch('/cloud_share', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(requestData)\n      }).then(function (response) {\n        return response.json();\n      }).then(function (data) {\n        if (data.shareable_url) {\n          // Successful response\n          _this2.setState({\n            formState: 'results',\n            shareableurl: data.shareable_url\n          });\n        } else if (data.errors) {\n          // Error response with specific error messages\n          var errorMessages = data.errors;\n          _this2.setState({\n            formState: 'error',\n            errorMessages: errorMessages\n          });\n        } else {\n          // Generic error message\n          throw new Error('Unknown error submitting form');\n        }\n      })[\"catch\"](function (error) {\n        _this2.setState({\n          formState: 'error',\n          errorMessages: [error.message]\n        });\n      });\n    });\n    _this2.state = {\n      formState: 'input',\n      // Possible values: 'input', 'loading', 'results', 'error'\n      errorMessages: [],\n      email: '',\n      agreeToTos: false,\n      shareableurl: ''\n    };\n    _this2.modalRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this2;\n  }\n  _inherits(CloudShareModal, _React$Component);\n  return _createClass(CloudShareModal, [{\n    key: \"renderLoading\",\n    value: function renderLoading() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n        className: \"text-center\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n          className: \"fa fa-spinner fa-3x fa-spin\"\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"p\", {\n          children: \"Uploading the job to SequenceServer Cloud, please wait...\"\n        })]\n      });\n    }\n  }, {\n    key: \"renderResults\",\n    value: function renderResults() {\n      var shareableurl = this.state.shareableurl;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_share_url__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n        url: shareableurl,\n        querydb: this.props.querydb,\n        program: this.props.program,\n        queryLength: this.props.queryLength\n      });\n    }\n  }, {\n    key: \"renderError\",\n    value: function renderError() {\n      var errorMessages = this.state.errorMessages;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment, {\n        children: [underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(errorMessages, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (errorMessage) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n            className: \"fastan\",\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"section-content\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n                className: \"modal-error\",\n                children: errorMessage\n              })\n            })\n          });\n        }, this)), this.renderForm()]\n      });\n    }\n  }, {\n    key: \"renderForm\",\n    value: function renderForm() {\n      var _this$state = this.state,\n        email = _this$state.email,\n        agreeToTos = _this$state.agreeToTos;\n      var isSubmitDisabled = !agreeToTos;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"form\", {\n        onSubmit: this.handleSubmit,\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n          className: \"form-group\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"label\", {\n            htmlFor: \"emailInput\",\n            children: \"Your Email Address\"\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"input\", {\n            type: \"email\",\n            id: \"emailInput\",\n            className: \"form-control\",\n            placeholder: \"person@example.com\",\n            name: \"email\",\n            value: email,\n            required: \"required\",\n            onChange: this.handleChange\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"p\", {\n          children: [\"By submitting this form you agree to upload this SequenceServer result set to \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"a\", {\n            href: \"https://sequenceserver.com/cloud/\",\n            target: \"_bank\",\n            children: \"SenquenceServer Cloud\"\n          }), \", where it will become available on the internet to everyone with the link. You also agree that your email address will be stored on SequenceServer databases as proof of authentication for support and similar purposes.\"]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n          className: \"form-group form-check\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"input\", {\n            type: \"checkbox\",\n            id: \"tosCheckbox\",\n            className: \"form-check-input\",\n            name: \"agreeToTos\",\n            checked: agreeToTos,\n            onChange: this.handleChange\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"label\", {\n            htmlFor: \"tosCheckbox\",\n            className: \"form-check-label\",\n            children: [\"\\xA0I agree to the \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"b\", {\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"a\", {\n                href: \"https://sequenceserver.com/cloud/terms_and_conditions\",\n                target: \"_blank\",\n                children: \"Terms and Conditions of Service\"\n              })\n            })]\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"button\", {\n          type: \"submit\",\n          className: \"btn btn-primary\",\n          disabled: isSubmitDisabled,\n          children: \"Submit\"\n        })]\n      });\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var formState = this.state.formState;\n      var content;\n      switch (formState) {\n        case 'loading':\n          content = this.renderLoading();\n          break;\n        case 'results':\n          content = this.renderResults();\n          break;\n        case 'error':\n          content = this.renderError();\n          break;\n        case 'input':\n        default:\n          content = this.renderForm();\n          break;\n      }\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: \"modal cloud-share\",\n        ref: this.modalRef,\n        tabIndex: \"-1\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"modal-dialog\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n            className: \"modal-content\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"modal-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h3\", {\n                children: \"Share to SequenceServer Cloud\"\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"modal-body\",\n              children: content\n            })]\n          })\n        })\n      });\n    }\n\n    /*\n     * Returns jQuery reference to the main modal container.\n     */\n  }, {\n    key: \"modal\",\n    value: function modal() {\n      return $(this.modalRef.current);\n    }\n\n    /**\n     * Shows share dialogue.\n     */\n  }, {\n    key: \"show\",\n    value: function show() {\n      var _this3 = this;\n      this.setState({\n        requestCompleted: false\n      }, function () {\n        _this3.modal().modal(\"show\");\n      });\n    }\n\n    /**\n     * Hide share dialogue.\n     */\n  }, {\n    key: \"hide\",\n    value: function hide() {\n      this.modal().modal(\"hide\");\n    }\n  }]);\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component));\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/cloud_share_modal.js?");
+
+/***/ }),
+
+/***/ "./public/js/collapse_preferences.js":
+/*!*******************************************!*\
+  !*** ./public/js/collapse_preferences.js ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CollapsePreferences)\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nvar CollapsePreferences = /*#__PURE__*/function () {\n  function CollapsePreferences(component) {\n    _classCallCheck(this, CollapsePreferences);\n    this.component = component;\n    this.collapsePreferences = JSON.parse(localStorage.getItem('collapsePreferences')) || [];\n  }\n  return _createClass(CollapsePreferences, [{\n    key: \"toggleCollapse\",\n    value: function toggleCollapse() {\n      var _this = this;\n      var currentlyCollapsed = this.component.state.collapsed;\n      this.component.setState({\n        collapsed: !currentlyCollapsed\n      });\n      var collapsePreferences = JSON.parse(localStorage.getItem('collapsePreferences')) || [];\n      if (currentlyCollapsed) {\n        localStorage.setItem('collapsePreferences', JSON.stringify(collapsePreferences.filter(function (name) {\n          return name !== _this.component.name;\n        })));\n      } else {\n        var uniqueCollapsePreferences = _toConsumableArray(new Set(collapsePreferences.concat([this.component.name])));\n        localStorage.setItem('collapsePreferences', JSON.stringify(uniqueCollapsePreferences));\n      }\n    }\n  }, {\n    key: \"preferenceStoredAsCollapsed\",\n    value: function preferenceStoredAsCollapsed() {\n      return this.collapsePreferences.includes(this.component.name);\n    }\n  }, {\n    key: \"renderCollapseIcon\",\n    value: function renderCollapseIcon() {\n      return this.component.state.collapsed ? this.plusIcon() : this.minusIcon();\n    }\n  }, {\n    key: \"minusIcon\",\n    value: function minusIcon() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", {\n        className: \"fa fa-minus-square-o\"\n      });\n    }\n  }, {\n    key: \"plusIcon\",\n    value: function plusIcon() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(\"i\", {\n        className: \"fa fa-plus-square-o\"\n      });\n    }\n  }]);\n}();\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/collapse_preferences.js?");
 
 /***/ }),
 
@@ -60,7 +71,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ErrorModal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n/**\n * Takes errorData object with title, message, and more_info keys as props. The\n * component displays a bootstrap modal when mounted. errorData.title is used\n * to set modal title. errorData.message is inserted as HTML text in modal\n * body. And errorData.more_info is shown using a pre tag in modal body.\n *\n * The displayed modal dialog cannot be dismissed.\n * The user must close the tab or press back button to go back to search form.\n */\n\n\nvar ErrorModal = /*#__PURE__*/function (_React$Component) {\n  _inherits(ErrorModal, _React$Component);\n  var _super = _createSuper(ErrorModal);\n  function ErrorModal(props) {\n    var _this;\n    _classCallCheck(this, ErrorModal);\n    _this = _super.call(this, props);\n    _this.state = {\n      errorData: {}\n    };\n    _this.modal = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this;\n  }\n\n  // HTML for Bootstrap modal.\n  _createClass(ErrorModal, [{\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"div\", {\n        id: \"error\",\n        ref: this.modal,\n        className: \"modal fade\",\n        \"data-keyboard\": \"false\",\n        \"data-backdrop\": \"static\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"div\", {\n          className: \"modal-dialog modal-lg\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(\"div\", {\n            className: \"modal-content\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"div\", {\n              className: \"modal-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"h3\", {\n                children: this.state.errorData.title\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(\"div\", {\n              className: \"modal-body\",\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"p\", {\n                dangerouslySetInnerHTML: {\n                  __html: this.state.errorData.message\n                }\n              }), this.state.errorData.more_info && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"pre\", {\n                className: \"pre-scrollable\",\n                children: this.state.errorData.more_info\n              })]\n            })]\n          })\n        })\n      });\n    }\n    /**\n     * Shows error viewer.\n     */\n  }, {\n    key: \"show\",\n    value: function show(errorData, beforeShow) {\n      var _this2 = this;\n      this.setState({\n        errorData: errorData\n      });\n      // Caller can specify an amount of time to wait for before showing the\n      // modal. This is helpful if the caller wants to finish some work\n      // before showing error modal.\n      setTimeout(function () {\n        $(_this2.modal.current).modal('show');\n      }, beforeShow || 0);\n    }\n  }]);\n  return ErrorModal;\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component));\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/error_modal.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ErrorModal)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n/**\n * Takes errorData object with title, message, and more_info keys as props. The\n * component displays a bootstrap modal when mounted. errorData.title is used\n * to set modal title. errorData.message is inserted as HTML text in modal\n * body. And errorData.more_info is shown using a pre tag in modal body.\n *\n * The displayed modal dialog cannot be dismissed.\n * The user must close the tab or press back button to go back to search form.\n */\n\nvar ErrorModal = /*#__PURE__*/function (_React$Component) {\n  function ErrorModal(props) {\n    var _this2;\n    _classCallCheck(this, ErrorModal);\n    _this2 = _callSuper(this, ErrorModal, [props]);\n    _this2.state = {\n      errorData: {}\n    };\n    _this2.modal = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this2;\n  }\n\n  // HTML for Bootstrap modal.\n  _inherits(ErrorModal, _React$Component);\n  return _createClass(ErrorModal, [{\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"div\", {\n        id: \"error\",\n        ref: this.modal,\n        className: \"modal fade\",\n        \"data-keyboard\": \"false\",\n        \"data-backdrop\": \"static\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"div\", {\n          className: \"modal-dialog modal-lg\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(\"div\", {\n            className: \"modal-content\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"div\", {\n              className: \"modal-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"h3\", {\n                children: this.state.errorData.title\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(\"div\", {\n              className: \"modal-body\",\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"p\", {\n                dangerouslySetInnerHTML: {\n                  __html: this.state.errorData.message\n                }\n              }), this.state.errorData.more_info && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"pre\", {\n                className: \"pre-scrollable\",\n                children: this.state.errorData.more_info\n              })]\n            })]\n          })\n        })\n      });\n    }\n    /**\n     * Shows error viewer.\n     */\n  }, {\n    key: \"show\",\n    value: function show(errorData, beforeShow) {\n      var _this3 = this;\n      this.setState({\n        errorData: errorData\n      });\n      // Caller can specify an amount of time to wait for before showing the\n      // modal. This is helpful if the caller wants to finish some work\n      // before showing error modal.\n      setTimeout(function () {\n        $(_this3.modal.current).modal('show');\n      }, beforeShow || 0);\n    }\n  }]);\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component));\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/error_modal.js?");
 
 /***/ }),
 
@@ -82,7 +93,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   fastqToFasta: () => (/* binding */ fastqToFasta)\n/* harmony export */ });\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nvar convertChunk = function convertChunk(fastqChunk) {\n  fastqChunk[0] = '>' + fastqChunk[0].substring(1);\n  return fastqChunk.slice(0, 2);\n};\nvar isValidFastq = function isValidFastq(fastqChunk) {\n  if (fastqChunk.length !== 4) {\n    return false;\n  }\n  return fastqChunk[0][0] === '@' && fastqChunk[2][0] === '+' && fastqChunk[1].length === fastqChunk[3].length;\n};\nvar fastqToFasta = function fastqToFasta(sequence) {\n  var trimmedSequence = sequence.trim();\n  // return unmodified if sequence does not look like fastq\n  if (!trimmedSequence.startsWith('@')) {\n    return sequence;\n  }\n  var sequenceLines = trimmedSequence.split('\\n');\n  var fastaChunks = [];\n  for (var i = 0; i < sequenceLines.length; i += 4) {\n    var fastqChunk = sequenceLines.slice(i, i + 4);\n    if (isValidFastq(fastqChunk)) {\n      fastaChunks.push.apply(fastaChunks, _toConsumableArray(convertChunk(fastqChunk)));\n    } else {\n      // return unmodified sequence if it does not look like valid fastq\n      return sequence;\n    }\n  }\n  return fastaChunks.join('\\n');\n};\n\n//# sourceURL=webpack://SequenceServer/./public/js/fastq_to_fasta.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   fastqToFasta: () => (/* binding */ fastqToFasta)\n/* harmony export */ });\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nvar convertChunk = function convertChunk(fastqChunk) {\n  fastqChunk[0] = '>' + fastqChunk[0].substring(1);\n  return fastqChunk.slice(0, 2);\n};\nvar isValidFastq = function isValidFastq(fastqChunk) {\n  if (fastqChunk.length !== 4) {\n    return false;\n  }\n  return fastqChunk[0][0] === '@' && fastqChunk[2][0] === '+' && fastqChunk[1].length === fastqChunk[3].length;\n};\nvar fastqToFasta = function fastqToFasta(sequence) {\n  var trimmedSequence = sequence.trim();\n  // return unmodified if sequence does not look like fastq\n  if (!trimmedSequence.startsWith('@')) {\n    return sequence;\n  }\n  var sequenceLines = trimmedSequence.split('\\n');\n  var fastaChunks = [];\n  for (var i = 0; i < sequenceLines.length; i += 4) {\n    var fastqChunk = sequenceLines.slice(i, i + 4);\n    if (isValidFastq(fastqChunk)) {\n      fastaChunks.push.apply(fastaChunks, _toConsumableArray(convertChunk(fastqChunk)));\n    } else {\n      // return unmodified sequence if it does not look like valid fastq\n      return sequence;\n    }\n  }\n  return fastaChunks.join('\\n');\n};\n\n//# sourceURL=webpack://SequenceServer/./public/js/fastq_to_fasta.js?");
 
 /***/ }),
 
@@ -93,7 +104,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Grapher)\n/* harmony export */ });\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _svgExporter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./svgExporter */ \"./public/js/svgExporter.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n // create handlers for SVG and PNG download buttons\n\n// Each instance of Grapher is added to this object once the component has been\n// mounted. This is so that grapher can be iterated over and redrawn on window\n// resize event.\n\n\nvar Graphers = {};\n\n// Grapher is a function that takes a Graph class and returns a React component.\n// This React component provides HTML boilerplate to add heading, to make the\n// graphs collapsible, to redraw graphs when window is resized, and SVG and PNG\n// export buttons and functionality.\nfunction Grapher(Graph) {\n  return /*#__PURE__*/function (_React$Component) {\n    _inherits(_class, _React$Component);\n    var _super = _createSuper(_class);\n    function _class(props) {\n      var _this;\n      _classCallCheck(this, _class);\n      _this = _super.call(this, props);\n      _this.state = {\n        collapsed: Graph.canCollapse() && _this.props.collapsed\n      };\n      _this.svgContainerRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n      return _this;\n    }\n    _createClass(_class, [{\n      key: \"collapseId\",\n      value: function collapseId() {\n        return Graph.collapseId(this.props);\n      }\n    }, {\n      key: \"render\",\n      value: function render() {\n        var cssClasses = Graph.className() + ' grapher';\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n          ref: \"grapher\",\n          className: cssClasses,\n          children: [this.header(), this.svgContainerJSX()]\n        });\n      }\n    }, {\n      key: \"header\",\n      value: function header() {\n        if (Graph.canCollapse()) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n            className: \"grapher-header\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"h4\", {\n              className: \"caption\",\n              \"data-toggle\": \"collapse\",\n              \"data-target\": '#' + this.collapseId(),\n              children: [this.state.collapsed ? this.plusIcon() : this.minusIcon(), \"\\xA0\", Graph.name()]\n            }), !this.state.collapsed && this.graphLinksJSX()]\n          });\n        } else {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n            className: \"grapher-header\",\n            children: !this.state.collapsed && this.graphLinksJSX()\n          });\n        }\n      }\n    }, {\n      key: \"minusIcon\",\n      value: function minusIcon() {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n          className: \"fa fa-minus-square-o\"\n        });\n      }\n    }, {\n      key: \"plusIcon\",\n      value: function plusIcon() {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n          className: \"fa fa-plus-square-o\"\n        });\n      }\n    }, {\n      key: \"graphLinksJSX\",\n      value: function graphLinksJSX() {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n          className: \"hit-links graph-links\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"a\", {\n            href: \"#\",\n            className: \"btn-link export-to-svg\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n              className: \"fa fa-download\"\n            }), \" SVG\"]\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"a\", {\n            href: \"#\",\n            className: \"btn-link export-to-png\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n              className: \"fa fa-download\"\n            }), \" PNG\"]\n          })]\n        });\n      }\n    }, {\n      key: \"svgContainerJSX\",\n      value: function svgContainerJSX() {\n        var cssClasses = Graph.className() + ' svg-container collapse';\n        if (!this.state.collapsed) cssClasses += ' in';\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          ref: this.svgContainerRef,\n          id: this.collapseId(),\n          className: cssClasses\n        });\n      }\n    }, {\n      key: \"componentDidMount\",\n      value: function componentDidMount() {\n        Graphers[this.collapseId()] = this;\n\n        // Draw visualisation for the first time. Visualisations are\n        // redrawn when browser window is resized.\n        this.draw();\n      }\n    }, {\n      key: \"componentDidUpdate\",\n      value: function componentDidUpdate() {\n        // Re-draw visualisation when the component change state.\n        this.draw();\n      }\n    }, {\n      key: \"svgContainer\",\n      value: function svgContainer() {\n        return $(this.svgContainerRef.current);\n      }\n    }, {\n      key: \"draw\",\n      value: function draw() {\n        // Clean slate.\n        this.svgContainer().empty();\n        this.graph = null;\n\n        // Draw if uncollapsed.\n        if (this.state.collapsed) {\n          return;\n        }\n        this.graph = new Graph(this.svgContainer(), this.props);\n        this.svgContainer().find('svg').attr('data-name', Graph.dataName(this.props));\n      }\n    }]);\n    return _class;\n  }((react__WEBPACK_IMPORTED_MODULE_1___default().Component));\n}\n\n// Redraw if window resized.\n$(window).resize(underscore__WEBPACK_IMPORTED_MODULE_0__[\"default\"].debounce(function () {\n  underscore__WEBPACK_IMPORTED_MODULE_0__[\"default\"].each(Graphers, function (grapher) {\n    grapher.draw();\n  });\n}, 125));\n\n// Swap-icon and toggle .graph-links on collapse.\n$('body').on('hidden.bs.collapse', '.collapse', function () {\n  var component = Graphers[$(this).attr('id')];\n  if (component) {\n    component.setState({\n      collapsed: true\n    });\n  }\n});\n$('body').on('shown.bs.collapse', '.collapse', function () {\n  var component = Graphers[$(this).attr('id')];\n  if (component) {\n    component.setState({\n      collapsed: false\n    });\n  }\n});\n\n//# sourceURL=webpack://SequenceServer/./public/js/grapher.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Grapher)\n/* harmony export */ });\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _svgExporter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./svgExporter */ \"./public/js/svgExporter.js\");\n/* harmony import */ var _collapse_preferences__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./collapse_preferences */ \"./public/js/collapse_preferences.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n // create handlers for SVG and PNG download buttons\n\n\n// Each instance of Grapher is added to this object once the component has been\n// mounted. This is so that grapher can be iterated over and redrawn on window\n// resize event.\n\nvar Graphers = {};\n\n// Grapher is a function that takes a Graph class and returns a React component.\n// This React component provides HTML boilerplate to add heading, to make the\n// graphs collapsible, to redraw graphs when window is resized, and SVG and PNG\n// export buttons and functionality.\nfunction Grapher(Graph) {\n  return /*#__PURE__*/function (_React$Component) {\n    function _class(props) {\n      var _this2;\n      _classCallCheck(this, _class);\n      _this2 = _callSuper(this, _class, [props]);\n      _this2.name = Graph.name();\n      _this2.collapsePreferences = new _collapse_preferences__WEBPACK_IMPORTED_MODULE_3__[\"default\"](_this2);\n      var isCollapsed = _this2.collapsePreferences.preferenceStoredAsCollapsed();\n      _this2.state = {\n        collapsed: Graph.canCollapse() && (_this2.props.collapsed || isCollapsed)\n      };\n      _this2.svgContainerRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n      return _this2;\n    }\n    _inherits(_class, _React$Component);\n    return _createClass(_class, [{\n      key: \"graphId\",\n      value: function graphId() {\n        return Graph.graphId(this.props);\n      }\n    }, {\n      key: \"render\",\n      value: function render() {\n        // Do not render when Graph.name() is null\n        if (Graph.name() === null) {\n          return null;\n        } else {\n          var cssClasses = Graph.className() + ' grapher';\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n            ref: \"grapher\",\n            className: cssClasses,\n            children: [this.header(), this.svgContainerJSX()]\n          });\n        }\n      }\n    }, {\n      key: \"header\",\n      value: function header() {\n        var _this3 = this;\n        if (Graph.canCollapse()) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n            className: \"grapher-header\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"h4\", {\n              className: \"caption\",\n              onClick: function onClick() {\n                return _this3.collapsePreferences.toggleCollapse();\n              },\n              children: [this.collapsePreferences.renderCollapseIcon(), \"\\xA0\", Graph.name()]\n            }), !this.state.collapsed && this.graphLinksJSX()]\n          });\n        } else {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n            className: \"grapher-header\",\n            children: !this.state.collapsed && this.graphLinksJSX()\n          });\n        }\n      }\n    }, {\n      key: \"graphLinksJSX\",\n      value: function graphLinksJSX() {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n          className: \"hit-links graph-links\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"a\", {\n            href: \"#\",\n            className: \"btn-link export-to-svg\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"i\", {\n              className: \"fa fa-download\"\n            }), \" SVG\"]\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"a\", {\n            href: \"#\",\n            className: \"btn-link export-to-png\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"i\", {\n              className: \"fa fa-download\"\n            }), \" PNG\"]\n          })]\n        });\n      }\n    }, {\n      key: \"svgContainerJSX\",\n      value: function svgContainerJSX() {\n        var cssClasses = Graph.className() + ' svg-container collapse';\n        if (!this.state.collapsed) cssClasses += ' in';\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"div\", {\n          ref: this.svgContainerRef,\n          id: this.graphId(),\n          className: cssClasses\n        });\n      }\n    }, {\n      key: \"componentDidMount\",\n      value: function componentDidMount() {\n        Graphers[this.graphId()] = this;\n\n        // Draw visualisation for the first time. Visualisations are\n        // redrawn when browser window is resized.\n        this.draw();\n      }\n    }, {\n      key: \"componentDidUpdate\",\n      value: function componentDidUpdate() {\n        // Re-draw visualisation when the component change state.\n        this.draw();\n      }\n    }, {\n      key: \"svgContainer\",\n      value: function svgContainer() {\n        return $(this.svgContainerRef.current);\n      }\n    }, {\n      key: \"draw\",\n      value: function draw() {\n        // Clean slate.\n        this.svgContainer().empty();\n        this.graph = null;\n\n        // Draw if uncollapsed.\n        if (this.state.collapsed) {\n          return;\n        }\n        this.graph = new Graph(this.svgContainer(), this.props);\n        this.svgContainer().find('svg').attr('data-name', Graph.dataName(this.props));\n      }\n    }]);\n  }((react__WEBPACK_IMPORTED_MODULE_1___default().Component));\n}\n\n// Redraw if window resized.\n$(window).resize(underscore__WEBPACK_IMPORTED_MODULE_0__[\"default\"].debounce(function () {\n  underscore__WEBPACK_IMPORTED_MODULE_0__[\"default\"].each(Graphers, function (grapher) {\n    grapher.draw();\n  });\n}, 125));\n\n//# sourceURL=webpack://SequenceServer/./public/js/grapher.js?");
 
 /***/ }),
 
@@ -104,7 +115,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ _default)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _kablammo__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./kablammo */ \"./public/js/kablammo.js\");\n/* harmony import */ var _download_fasta__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./download_fasta */ \"./public/js/download_fasta.js\");\n/* harmony import */ var _alignment_exporter__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./alignment_exporter */ \"./public/js/alignment_exporter.js\");\n/* harmony import */ var hit_buttons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! hit_buttons */ \"./public/js/null_plugins/hit_buttons.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n // to download textual alignment\n\n\n/**\n * Component for each hit. Receives props from Report. Has no state.\n */\n\n\nvar _default = /*#__PURE__*/function (_Component) {\n  _inherits(_default, _Component);\n  var _super = _createSuper(_default);\n  function _default(props) {\n    var _this;\n    _classCallCheck(this, _default);\n    _this = _super.call(this, props);\n    _this.accession = _this.accession.bind(_assertThisInitialized(_this));\n    _this.sequenceID = _this.sequenceID.bind(_assertThisInitialized(_this));\n    _this.hitLength = _this.hitLength.bind(_assertThisInitialized(_this));\n    _this.numHSPs = _this.numHSPs.bind(_assertThisInitialized(_this));\n    _this.domID = _this.domID.bind(_assertThisInitialized(_this));\n    _this.databaseIDs = _this.databaseIDs.bind(_assertThisInitialized(_this));\n    _this.showSequenceViewer = _this.showSequenceViewer.bind(_assertThisInitialized(_this));\n    _this.viewSequenceLink = _this.viewSequenceLink.bind(_assertThisInitialized(_this));\n    _this.downloadFASTA = _this.downloadFASTA.bind(_assertThisInitialized(_this));\n    _this.downloadAlignment = _this.downloadAlignment.bind(_assertThisInitialized(_this));\n    _this.headerJSX = _this.headerJSX.bind(_assertThisInitialized(_this));\n    _this.contentJSX = _this.contentJSX.bind(_assertThisInitialized(_this));\n    _this.hitLinks = _this.hitLinks.bind(_assertThisInitialized(_this));\n    _this.viewSequenceButton = _this.viewSequenceButton.bind(_assertThisInitialized(_this));\n    _this.downloadFASTAButton = _this.downloadFASTAButton.bind(_assertThisInitialized(_this));\n    _this.hit_buttons = new hit_buttons__WEBPACK_IMPORTED_MODULE_5__[\"default\"](_assertThisInitialized(_this));\n    return _this;\n  }\n  _createClass(_default, [{\n    key: \"shouldComponentUpdate\",\n    value: function shouldComponentUpdate() {\n      return !this.props.hit;\n    }\n    /**\n     * Returns accession number of the hit sequence.\n     */\n  }, {\n    key: \"accession\",\n    value: function accession() {\n      return this.props.hit.accession;\n    }\n\n    /**\n     * Returns id of the hit sequence.\n     */\n  }, {\n    key: \"sequenceID\",\n    value: function sequenceID() {\n      return this.props.hit.id;\n    }\n\n    /**\n     * Returns length of the hit sequence.\n     */\n  }, {\n    key: \"hitLength\",\n    value: function hitLength() {\n      return this.props.hit.length;\n    }\n  }, {\n    key: \"numHSPs\",\n    value: function numHSPs() {\n      return this.props.hit.hsps.length;\n    }\n\n    // Internal helpers. //\n\n    /**\n     * Returns id that will be used for the DOM node corresponding to the hit.\n     */\n  }, {\n    key: \"domID\",\n    value: function domID() {\n      return 'Query_' + this.props.query.number + '_hit_' + this.props.hit.number;\n    }\n  }, {\n    key: \"databaseIDs\",\n    value: function databaseIDs() {\n      return underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.querydb, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].iteratee('id'));\n    }\n  }, {\n    key: \"showSequenceViewer\",\n    value: function showSequenceViewer() {\n      this.props.showSequenceModal(this.viewSequenceLink());\n    }\n  }, {\n    key: \"viewSequenceLink\",\n    value: function viewSequenceLink() {\n      var sequenceIDs = encodeURIComponent(this.sequenceID());\n      var databaseIDs = encodeURIComponent(this.databaseIDs());\n      return \"get_sequence/?sequence_ids=\".concat(sequenceIDs, \"&database_ids=\").concat(databaseIDs);\n    }\n  }, {\n    key: \"downloadFASTA\",\n    value: function downloadFASTA(event) {\n      var sequenceIDs = [this.sequenceID()];\n      (0,_download_fasta__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(sequenceIDs, this.databaseIDs());\n    }\n\n    // Event-handler for exporting alignments.\n    // Calls relevant method on AlignmentExporter defined in alignment_exporter.js.\n  }, {\n    key: \"downloadAlignment\",\n    value: function downloadAlignment(event) {\n      var hsps = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.hit.hsps, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (hsp) {\n        hsp.query_id = this.props.query.id;\n        hsp.hit_id = this.props.hit.id;\n        return hsp;\n      }, this));\n      var aln_exporter = new _alignment_exporter__WEBPACK_IMPORTED_MODULE_4__[\"default\"]();\n      aln_exporter.export_alignments(hsps, this.props.query.id + '_' + this.props.hit.id);\n    }\n  }, {\n    key: \"headerJSX\",\n    value: function headerJSX() {\n      var meta = \"length: \".concat(this.hitLength().toLocaleString());\n      if (this.props.showQueryCrumbs && this.props.showHitCrumbs) {\n        // Multiper queries, multiple hits\n        meta = \"hit \".concat(this.props.hit.number, \" of query \").concat(this.props.query.number, \", \") + meta;\n      } else if (this.props.showQueryCrumbs && !this.props.showHitCrumbs) {\n        // Multiple queries, single hit\n        meta = \"the only hit of query \".concat(this.props.query.number, \", \") + meta;\n      } else if (!this.props.showQueryCrumbs && this.props.showHitCrumbs) {\n        // Single query, multiple hits\n        meta = \"hit \".concat(this.props.hit.number, \", \") + meta;\n      }\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"section-header\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"h4\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n            className: \"fa fa-minus-square-o\"\n          }), \"\\xA0\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"strong\", {\n            children: this.props.hit.id\n          }), \"\\xA0\", this.props.hit.title]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n          className: \"label label-reset pos-label\",\n          children: meta\n        })]\n      });\n    }\n  }, {\n    key: \"contentJSX\",\n    value: function contentJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"section-content\",\n        \"data-parent-hit\": this.domID(),\n        children: [this.hitLinks(), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_kablammo__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n          query: this.props.query,\n          hit: this.props.hit,\n          algorithm: this.props.algorithm,\n          showHSPCrumbs: this.numHSPs() > 1 && this.numHSPs() < 27,\n          collapsed: this.props.veryBig\n        }, 'kablammo' + this.props.query.id)]\n      });\n    }\n  }, {\n    key: \"hitLinks\",\n    value: function hitLinks() {\n      var _this2 = this;\n      var btns = [];\n      if (!(this.props.imported_xml || this.props.non_parse_seqids)) {\n        btns = btns.concat([this.viewSequenceButton(), this.downloadFASTAButton()]);\n      }\n      btns.push(this.downloadAlignmentButton());\n      this.hit_buttons.buttons().forEach(function (button) {\n        btns.push(button);\n      });\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"hit-links\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"label\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"input\", {\n            type: \"checkbox\",\n            id: this.domID() + '_checkbox',\n            value: this.sequenceID(),\n            onChange: function () {\n              this.props.selectHit(this.domID() + '_checkbox');\n              this.props.onChange();\n            }.bind(this),\n            \"data-target\": '#' + this.domID()\n          }), \" Select\"]\n        }), btns.map(function (btn, index) {\n          return [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }, \"btn-\".concat(index)), _this2.button(Object.assign(btn, {\n            key: index\n          }))];\n        }), this.props.hit.links.map(function (link, index) {\n          return [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }, \"link-\".concat(index)), _this2.a(link, index)];\n        })]\n      });\n    }\n\n    // Return JSX for view sequence button.\n  }, {\n    key: \"viewSequenceButton\",\n    value: function viewSequenceButton() {\n      var _this3 = this;\n      if (this.hitLength() > 10000) {\n        return {\n          text: 'Sequence',\n          icon: 'fa-eye',\n          className: 'view-sequence',\n          title: 'Sequence too long'\n        };\n      } else {\n        return {\n          text: 'Sequence',\n          icon: 'fa-eye',\n          className: 'view-sequence',\n          onClick: function onClick() {\n            return _this3.showSequenceViewer();\n          }\n        };\n      }\n    }\n  }, {\n    key: \"downloadFASTAButton\",\n    value: function downloadFASTAButton() {\n      var _this4 = this;\n      return {\n        text: 'FASTA',\n        icon: 'fa-download',\n        className: 'download-fa',\n        onClick: function onClick() {\n          return _this4.downloadFASTA();\n        }\n      };\n    }\n  }, {\n    key: \"downloadAlignmentButton\",\n    value: function downloadAlignmentButton() {\n      var _this5 = this;\n      return {\n        text: 'Alignment',\n        icon: 'fa-download',\n        className: 'download-aln',\n        onClick: function onClick() {\n          return _this5.downloadAlignment();\n        }\n      };\n    }\n  }, {\n    key: \"button\",\n    value: function button(_ref) {\n      var text = _ref.text,\n        icon = _ref.icon,\n        title = _ref.title,\n        className = _ref.className,\n        onClick = _ref.onClick,\n        key = _ref.key;\n      if (onClick) {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"button\", {\n          className: \"btn-link \".concat(className),\n          title: title,\n          onClick: onClick,\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n            className: \"fa \".concat(icon)\n          }), \" \", text]\n        }, key);\n      } else {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"button\", {\n          className: \"btn-link view-sequence disabled\",\n          title: title,\n          disabled: true,\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n            className: \"fa \".concat(icon)\n          }), \" \", text]\n        }, key);\n      }\n    }\n\n    /**\n     * Render URL for sequence-viewer.\n     */\n  }, {\n    key: \"a\",\n    value: function a(link, key) {\n      if (!link.title || !link.url) return;\n      var className = 'btn btn-link';\n      if (link[\"class\"]) className = \"\".concat(className, \" \").concat(link[\"class\"]);\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n        href: link.url,\n        className: className,\n        target: \"_blank\",\n        children: [link.icon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n          className: 'fa ' + link.icon\n        }), ' ' + link.title + ' ']\n      }, \"\".concat(link.url, \"-\").concat(key));\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"hit\",\n        id: this.domID(),\n        \"data-hit-def\": this.props.hit.id,\n        \"data-hit-len\": this.props.hit.length,\n        \"data-hit-evalue\": this.props.hit.evalue,\n        children: [this.headerJSX(), \" \", this.contentJSX()]\n      });\n    }\n  }]);\n  return _default;\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/hit.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ _default)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _kablammo__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./kablammo */ \"./public/js/kablammo.js\");\n/* harmony import */ var _download_fasta__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./download_fasta */ \"./public/js/download_fasta.js\");\n/* harmony import */ var _alignment_exporter__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./alignment_exporter */ \"./public/js/alignment_exporter.js\");\n/* harmony import */ var hit_buttons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! hit_buttons */ \"./public/js/null_plugins/hit_buttons.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n // to download textual alignment\n\n\n/**\n * Component for each hit. Receives props from Report. Has no state.\n */\n\nvar _default = /*#__PURE__*/function (_Component) {\n  function _default(props) {\n    var _this2;\n    _classCallCheck(this, _default);\n    _this2 = _callSuper(this, _default, [props]);\n    _this2.accession = _this2.accession.bind(_this2);\n    _this2.sequenceID = _this2.sequenceID.bind(_this2);\n    _this2.hitLength = _this2.hitLength.bind(_this2);\n    _this2.numHSPs = _this2.numHSPs.bind(_this2);\n    _this2.domID = _this2.domID.bind(_this2);\n    _this2.databaseIDs = _this2.databaseIDs.bind(_this2);\n    _this2.showSequenceViewer = _this2.showSequenceViewer.bind(_this2);\n    _this2.viewSequenceLink = _this2.viewSequenceLink.bind(_this2);\n    _this2.downloadFASTA = _this2.downloadFASTA.bind(_this2);\n    _this2.downloadAlignment = _this2.downloadAlignment.bind(_this2);\n    _this2.headerJSX = _this2.headerJSX.bind(_this2);\n    _this2.contentJSX = _this2.contentJSX.bind(_this2);\n    _this2.hitLinks = _this2.hitLinks.bind(_this2);\n    _this2.viewSequenceButton = _this2.viewSequenceButton.bind(_this2);\n    _this2.downloadFASTAButton = _this2.downloadFASTAButton.bind(_this2);\n    _this2.hit_buttons = new hit_buttons__WEBPACK_IMPORTED_MODULE_5__[\"default\"](_this2);\n    return _this2;\n  }\n  _inherits(_default, _Component);\n  return _createClass(_default, [{\n    key: \"shouldComponentUpdate\",\n    value: function shouldComponentUpdate() {\n      return !this.props.hit;\n    }\n    /**\n     * Returns accession number of the hit sequence.\n     */\n  }, {\n    key: \"accession\",\n    value: function accession() {\n      return this.props.hit.accession;\n    }\n\n    /**\n     * Returns id of the hit sequence.\n     */\n  }, {\n    key: \"sequenceID\",\n    value: function sequenceID() {\n      return this.props.hit.id;\n    }\n\n    /**\n     * Returns length of the hit sequence.\n     */\n  }, {\n    key: \"hitLength\",\n    value: function hitLength() {\n      return this.props.hit.length;\n    }\n  }, {\n    key: \"numHSPs\",\n    value: function numHSPs() {\n      return this.props.hit.hsps.length;\n    }\n\n    // Internal helpers. //\n\n    /**\n     * Returns id that will be used for the DOM node corresponding to the hit.\n     */\n  }, {\n    key: \"domID\",\n    value: function domID() {\n      return 'Query_' + this.props.query.number + '_hit_' + this.props.hit.number;\n    }\n  }, {\n    key: \"databaseIDs\",\n    value: function databaseIDs() {\n      return underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.querydb, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].iteratee('id'));\n    }\n  }, {\n    key: \"showSequenceViewer\",\n    value: function showSequenceViewer() {\n      this.props.showSequenceModal(this.viewSequenceLink());\n    }\n  }, {\n    key: \"viewSequenceLink\",\n    value: function viewSequenceLink() {\n      var sequenceIDs = encodeURIComponent(this.sequenceID());\n      var databaseIDs = encodeURIComponent(this.databaseIDs());\n      return \"get_sequence/?sequence_ids=\".concat(sequenceIDs, \"&database_ids=\").concat(databaseIDs);\n    }\n  }, {\n    key: \"downloadFASTA\",\n    value: function downloadFASTA(event) {\n      var sequenceIDs = [this.sequenceID()];\n      (0,_download_fasta__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(sequenceIDs, this.databaseIDs());\n    }\n\n    // Event-handler for exporting alignments.\n    // Calls relevant method on AlignmentExporter defined in alignment_exporter.js.\n  }, {\n    key: \"downloadAlignment\",\n    value: function downloadAlignment(event) {\n      var hsps = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.hit.hsps, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (hsp) {\n        hsp.query_id = this.props.query.id;\n        hsp.hit_id = this.props.hit.id;\n        return hsp;\n      }, this));\n      var aln_exporter = new _alignment_exporter__WEBPACK_IMPORTED_MODULE_4__[\"default\"]();\n      aln_exporter.export_alignments(hsps, this.props.query.id + '_' + this.props.hit.id);\n    }\n  }, {\n    key: \"headerJSX\",\n    value: function headerJSX() {\n      var meta = \"length: \".concat(this.hitLength().toLocaleString());\n      if (this.props.showQueryCrumbs && this.props.showHitCrumbs) {\n        // Multiper queries, multiple hits\n        meta = \"hit \".concat(this.props.hit.number, \" of query \").concat(this.props.query.number, \", \") + meta;\n      } else if (this.props.showQueryCrumbs && !this.props.showHitCrumbs) {\n        // Multiple queries, single hit\n        meta = \"the only hit of query \".concat(this.props.query.number, \", \") + meta;\n      } else if (!this.props.showQueryCrumbs && this.props.showHitCrumbs) {\n        // Single query, multiple hits\n        meta = \"hit \".concat(this.props.hit.number, \", \") + meta;\n      }\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"section-header\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"h4\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n            className: \"fa fa-minus-square-o\"\n          }), \"\\xA0\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"strong\", {\n            children: this.props.hit.id\n          }), \"\\xA0\", this.props.hit.title]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n          className: \"label label-reset pos-label\",\n          children: meta\n        })]\n      });\n    }\n  }, {\n    key: \"contentJSX\",\n    value: function contentJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"section-content\",\n        \"data-parent-hit\": this.domID(),\n        children: [this.hitLinks(), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_kablammo__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n          query: this.props.query,\n          hit: this.props.hit,\n          algorithm: this.props.algorithm,\n          showHSPCrumbs: this.numHSPs() > 1 && this.numHSPs() < 27,\n          collapsed: this.props.veryBig\n        }, 'kablammo' + this.props.query.id)]\n      });\n    }\n  }, {\n    key: \"hitLinks\",\n    value: function hitLinks() {\n      var _this3 = this;\n      var btns = [];\n      if (!(this.props.imported_xml || this.props.non_parse_seqids)) {\n        btns = btns.concat([this.viewSequenceButton(), this.downloadFASTAButton()]);\n      }\n      btns.push(this.downloadAlignmentButton());\n      this.hit_buttons.buttons().forEach(function (button) {\n        btns.push(button);\n      });\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"hit-links\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"label\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"input\", {\n            type: \"checkbox\",\n            id: this.domID() + '_checkbox',\n            value: this.sequenceID(),\n            onChange: function () {\n              this.props.selectHit(this.domID() + '_checkbox');\n              this.props.onChange();\n            }.bind(this),\n            \"data-target\": '#' + this.domID()\n          }), \" Select\"]\n        }), btns.map(function (btn, index) {\n          return [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }, \"btn-\".concat(index)), _this3.button(Object.assign(btn, {\n            key: index\n          }))];\n        }), this.props.hit.links.map(function (link, index) {\n          return [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }, \"link-\".concat(index)), _this3.a(link, index)];\n        })]\n      });\n    }\n\n    // Return JSX for view sequence button.\n  }, {\n    key: \"viewSequenceButton\",\n    value: function viewSequenceButton() {\n      var _this4 = this;\n      if (this.hitLength() > 10000) {\n        return {\n          text: 'Sequence',\n          icon: 'fa-eye',\n          className: 'view-sequence',\n          title: 'Sequence too long'\n        };\n      } else {\n        return {\n          text: 'Sequence',\n          icon: 'fa-eye',\n          className: 'view-sequence',\n          onClick: function onClick() {\n            return _this4.showSequenceViewer();\n          }\n        };\n      }\n    }\n  }, {\n    key: \"downloadFASTAButton\",\n    value: function downloadFASTAButton() {\n      var _this5 = this;\n      return {\n        text: 'FASTA',\n        icon: 'fa-download',\n        className: 'download-fa',\n        onClick: function onClick() {\n          return _this5.downloadFASTA();\n        }\n      };\n    }\n  }, {\n    key: \"downloadAlignmentButton\",\n    value: function downloadAlignmentButton() {\n      var _this6 = this;\n      return {\n        text: 'Alignment',\n        icon: 'fa-download',\n        className: 'download-aln',\n        onClick: function onClick() {\n          return _this6.downloadAlignment();\n        }\n      };\n    }\n  }, {\n    key: \"button\",\n    value: function button(_ref) {\n      var text = _ref.text,\n        icon = _ref.icon,\n        title = _ref.title,\n        className = _ref.className,\n        onClick = _ref.onClick,\n        key = _ref.key;\n      if (onClick) {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"button\", {\n          className: \"btn-link \".concat(className),\n          title: title,\n          onClick: onClick,\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n            className: \"fa \".concat(icon)\n          }), \" \", text]\n        }, key);\n      } else {\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"button\", {\n          className: \"btn-link view-sequence disabled\",\n          title: title,\n          disabled: true,\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n            className: \"fa \".concat(icon)\n          }), \" \", text]\n        }, key);\n      }\n    }\n\n    /**\n     * Render URL for sequence-viewer.\n     */\n  }, {\n    key: \"a\",\n    value: function a(link, key) {\n      if (!link.title || !link.url) return;\n      var className = 'btn btn-link';\n      if (link[\"class\"]) className = \"\".concat(className, \" \").concat(link[\"class\"]);\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n        href: link.url,\n        className: className,\n        target: \"_blank\",\n        children: [link.icon && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n          className: 'fa ' + link.icon\n        }), ' ' + link.title + ' ']\n      }, \"\".concat(link.url, \"-\").concat(key));\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"hit\",\n        id: this.domID(),\n        \"data-hit-def\": this.props.hit.id,\n        \"data-hit-len\": this.props.hit.length,\n        \"data-hit-evalue\": this.props.hit.evalue,\n        children: [this.headerJSX(), \" \", this.contentJSX()]\n      });\n    }\n  }]);\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/hit.js?");
 
 /***/ }),
 
@@ -115,7 +126,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _grapher__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svgContainer, props) {\n    _classCallCheck(this, Graph);\n    this.svg_container = $svgContainer;\n    var $queryDiv = $svgContainer.parents('.resultn');\n    var hits = this.extractData(props.query.hits, props.query.number);\n    this.graphIt($queryDiv, $svgContainer, 0, 20, null, hits);\n  }\n  _createClass(Graph, [{\n    key: \"extractData\",\n    value: function extractData(query_hits, number) {\n      var hits = [];\n      query_hits.map(function (hit) {\n        var _hsps = [];\n        var hsps = hit.hsps;\n        underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].each(hsps, function (hsp) {\n          var _hsp = {};\n          _hsp.hspEvalue = hsp.evalue;\n          _hsp.hspStart = hsp.qstart;\n          _hsp.hspEnd = hsp.qend;\n          _hsp.hspFrame = hsp.sframe;\n          _hsp.hspId = 'Query_' + number + '_hit_' + hit.number + '_hsp_' + hsp.number;\n          _hsp.hspIdentity = hsp.identity;\n          _hsp.hspGaps = hsp.gaps;\n          _hsp.hspPositives = hsp.positives;\n          _hsp.hspLength = hsp.length;\n          _hsps.push(_hsp);\n        });\n        _hsps.hitId = hit.id;\n        _hsps.hitDef = 'Query_' + number + '_hit_' + hit.number;\n        _hsps.hitEvalue = hit.hsps[0].evalue;\n        hits.push(_hsps);\n      });\n      return hits;\n    }\n  }, {\n    key: \"setupTooltip\",\n    value: function setupTooltip() {\n      this.svg_container.find('[data-toggle=\"tooltip\"]').tooltip({\n        'placement': 'top',\n        'container': 'body',\n        'html': 'true',\n        'delay': 0,\n        'white-space': 'nowrap'\n      });\n    }\n  }, {\n    key: \"setupClick\",\n    value: function setupClick($graphDiv) {\n      $('a', $graphDiv).click(function (evt) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        window.location.hash = $(this).attr('href');\n      });\n    }\n  }, {\n    key: \"graphControls\",\n    value: function graphControls($queryDiv, $graphDiv, isInit, opts, hits) {\n      var MIN_HITS_TO_SHOW = 20;\n      var totalHits, shownHits, lessButton, moreButton;\n      var countHits = function countHits() {\n        totalHits = hits.length;\n        shownHits = $queryDiv.find('.ghit > g').length;\n      };\n      var setupButtons = function setupButtons($queryDiv, $graphDiv) {\n        $graphDiv.append($('<button/>').addClass('btn btn-link more').attr('type', 'button').attr('data-parent-query', $queryDiv.attr('id')).html('View More&nbsp;').append($('<i/>').html('&nbsp;&nbsp;').addClass('fa fa-angle-double-down')), $('<button/>').addClass('btn btn-link less').attr('type', 'button').attr('data-parent-query', $queryDiv.attr('id')).html('View Less&nbsp;').append($('<i/>').html('&nbsp;&nbsp;').addClass('fa fa-angle-double-up')));\n        lessButton = $('.less', $graphDiv);\n        moreButton = $('.more', $graphDiv);\n      };\n      var initButtons = function initButtons() {\n        countHits();\n        if (totalHits === MIN_HITS_TO_SHOW || shownHits < MIN_HITS_TO_SHOW) {\n          lessButton.hide();\n          moreButton.hide();\n        } else if (shownHits === totalHits) {\n          moreButton.hide();\n          lessButton.show();\n        } else if (shownHits === MIN_HITS_TO_SHOW) {\n          lessButton.hide();\n          moreButton.show();\n        } else {\n          lessButton.show();\n          moreButton.show();\n        }\n      };\n\n      // Setup view buttons' state properly if called for first time.\n      if (isInit === true) {\n        setupButtons($queryDiv, $graphDiv);\n        initButtons();\n      }\n      moreButton.on('click', underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (e) {\n        countHits();\n        this.graphIt($queryDiv, $graphDiv, shownHits, MIN_HITS_TO_SHOW, opts, hits);\n        initButtons();\n        this.setupTooltip();\n        e.stopPropagation();\n      }, this));\n      lessButton.on('click', underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (e) {\n        countHits();\n        var diff = shownHits - MIN_HITS_TO_SHOW;\n\n        // Decrease number of shown hits by defined constant.\n        if (diff >= MIN_HITS_TO_SHOW) {\n          this.graphIt($queryDiv, $graphDiv, shownHits, -MIN_HITS_TO_SHOW, opts, hits);\n          initButtons();\n        } else if (diff !== 0) {\n          // Ensure a certain number of hits always stay in graph.\n          this.graphIt($queryDiv, $graphDiv, shownHits, MIN_HITS_TO_SHOW - shownHits, opts, hits);\n          initButtons();\n        }\n        this.setupTooltip();\n        e.stopPropagation();\n      }, this));\n    }\n  }, {\n    key: \"drawLegend\",\n    value: function drawLegend(svg, options, width, height, hits) {\n      var svg_legend = svg.append('g').attr('transform', 'translate(0,' + (height - 1.75 * options.margin) + ')');\n      svg_legend.append('rect').attr('x', 7.5 * (width - 2 * options.margin) / 10).attr('width', 2 * (width - 4 * options.margin) / 10).attr('height', options.legend).attr('fill', 'url(#legend-grad)');\n      svg_legend.append('text').attr('class', ' legend-text').attr('transform', 'translate(0, ' + options.legend + ')').attr('x', 9.5 * (width - 2 * options.margin) / 10 + options.margin / 2).text('Weaker hits');\n      // .text(function() {\n      //   return Helpers.prettify_evalue(hits[hits.length-1].hitEvalue);\n      // })\n\n      svg_legend.append('text').attr('class', ' legend-text').attr('transform', 'translate(0, ' + options.legend + ')').attr('x', 6.7 * (width - 2 * options.margin) / 10 - options.margin / 2).text('Stronger hits');\n      // .text(function () {\n      //   return Helpers.prettify_evalue(hits[0].hitEvalue);\n      // })\n\n      svg.append('linearGradient').attr('id', 'legend-grad').selectAll('stop').data([{\n        offset: '0%',\n        color: '#000'\n      }, {\n        offset: '45%',\n        color: '#c74f14'\n      }, {\n        offset: '100%',\n        color: '#f6bea2'\n      }]).enter().append('stop').attr('offset', function (d) {\n        return d.offset;\n      }).attr('stop-color', function (d) {\n        return d.color;\n      });\n    }\n  }, {\n    key: \"graphIt\",\n    value: function graphIt($queryDiv, $graphDiv, index, howMany, opts, inhits) {\n      /* barHeight: Height of each hit track.\n       * legend: Height reserved for the overview legend.\n       * margin: Margin around the svg element.\n       */\n      var defaults = {\n          barHeight: 4,\n          legend: inhits.length > 1 ? 3 : 0,\n          margin: 20\n        },\n        options = $.extend(defaults, opts);\n      var hits = inhits.slice(0, index + howMany);\n\n      // Don't draw anything when no hits are obtained.\n      if (hits.length < 1) return false;\n      if (index !== 0) {\n        // Currently, we have no good way to extend pre-existing graph\n        // and hence, are removing the old one and redrawing.\n        $graphDiv.find('svg').remove();\n      }\n      var queryLen = $queryDiv.data().queryLen;\n      var q_i = $queryDiv.attr('id');\n      var width = $graphDiv.width();\n      var height = hits.length * options.barHeight + 2 * options.legend + 4 * options.margin;\n\n      // var height = $graphDiv.height();\n\n      var SEQ_TYPES = {\n        blastn: 'nucleic_acid',\n        blastp: 'amino_acid',\n        blastx: 'nucleic_acid',\n        tblastx: 'nucleic_acid',\n        tblastn: 'amino_acid'\n      };\n      var svg = d3__WEBPACK_IMPORTED_MODULE_0___default().select($graphDiv[0]).selectAll('svg').data([hits]).enter().insert('svg', ':first-child').attr('width', width).attr('height', height).append('g').attr('transform', 'translate(' + options.margin / 2 + ', ' + 1.5 * options.margin + ')');\n      var x = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().range([0, width - options.margin]);\n      x.domain([1, queryLen]);\n      var algorithm = $queryDiv.data().algorithm;\n      var formatter = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.tick_formatter(x, SEQ_TYPES[algorithm]);\n      var _tValues = x.ticks(11);\n      _tValues.pop();\n      var xAxis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().scale(x).orient('top').tickValues(_tValues.concat([1, queryLen])).tickFormat(formatter);\n\n      // Attach the axis to DOM (<svg> element)\n      var container = svg.append('g').attr('transform', 'translate(0, ' + options.margin + ')').append('g').attr('class', 'x axis').call(xAxis);\n\n      // Vertical alignment of ticks\n      container.selectAll('text').attr('x', '25px').attr('y', '2px').attr('transform', 'rotate(-90)');\n      var y = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.ordinal().rangeBands([0, height - 3 * options.margin - 2 * options.legend], 0.3);\n      y.domain(hits.map(function (d) {\n        return d.hitId;\n      }));\n      var gradScale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.log().domain([d3__WEBPACK_IMPORTED_MODULE_0___default().min([1e-5, d3__WEBPACK_IMPORTED_MODULE_0___default().min(hits.map(function (d) {\n        if (parseFloat(d.hitEvalue) === 0.0) return undefined;\n        return d.hitEvalue;\n      }))]), d3__WEBPACK_IMPORTED_MODULE_0___default().max(hits.map(function (d) {\n        return d.hitEvalue;\n      }))]).range([0, 0.8]);\n      svg.append('g').attr('class', 'ghit').attr('transform', 'translate(0, ' + 1.65 * (options.margin - options.legend) + ')').selectAll('.hits').data(hits).enter().append('g').each(function (d, i) {\n        // TODO: Avoid too many variables and improve naming.\n\n        d3__WEBPACK_IMPORTED_MODULE_0___default().select(this).selectAll('.hsp').data(d).enter().append('a').each(function (v, j) {\n          // Drawing the HSPs connector line using the same\n          // color as that of the hit track (using lookahead).\n          var yHspline = y(d.hitId) + options.barHeight / 2;\n          var hsplineColor = d3__WEBPACK_IMPORTED_MODULE_0___default().hsl(20, 0.82, gradScale(v.hspEvalue));\n          if (j + 1 < d.length) {\n            if (d[j].hspEnd <= d[j + 1].hspStart) {\n              d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.parentNode).append('line').attr('x1', x(d[j].hspEnd)).attr('y1', yHspline).attr('x2', x(d[j + 1].hspStart)).attr('y2', yHspline).attr('stroke', hsplineColor);\n            } else if (d[j].hspStart > d[j + 1].hspEnd) {\n              d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.parentNode).append('line').attr('x1', x(d[j + 1].hspEnd)).attr('y1', yHspline).attr('x2', x(d[j].hspStart)).attr('y2', yHspline).attr('stroke', hsplineColor);\n            }\n          }\n          var alt_tooltip = d.hitId + '<br>E value: ' + _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.prettify_evalue(v.hspEvalue) + \"<br>Identities: \".concat(_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(v.hspIdentity, v.hspLength));\n          // if chosen algorithm was blastn, the tooltip won't show the Positives% value in the tooltip\n          if (algorithm != 'blastn') {\n            alt_tooltip += \"<br>Positives: \".concat(_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(v.hspPositives, v.hspLength));\n          }\n          alt_tooltip += \", Gaps: \".concat(_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(v.hspGaps, v.hspLength));\n\n          // Draw the rectangular hit tracks itself.\n          d3__WEBPACK_IMPORTED_MODULE_0___default().select(this).attr('xlink:href', '#' + q_i + '_hit_' + (i + 1)).append('rect').attr('data-toggle', 'tooltip').attr('title', alt_tooltip).attr('class', 'bar').attr('x', function (d) {\n            return x(d.hspStart);\n          }).attr('y', y(d.hitId)).attr('width', function (d) {\n            return x(d.hspEnd - d.hspStart + 1);\n          }).attr('height', options.barHeight).attr('fill', d3__WEBPACK_IMPORTED_MODULE_0___default().rgb(hsplineColor));\n        });\n      });\n\n      // Draw legend only when more than one hit present\n      if (hits.length > 1) {\n        this.drawLegend(svg, options, width, height, inhits);\n      }\n      // Bind listener events once all the graphical elements have\n      // been drawn for first time.\n      if (index === 0) {\n        this.graphControls($queryDiv, $graphDiv, true, opts, inhits);\n      }\n      // Refresh tooltip each time graph is redrawn.\n      this.setupTooltip();\n      // Ensure clicking on 'rect' takes user to the relevant hit on all\n      // browsers.\n      this.setupClick($graphDiv);\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Graphical overview of aligning hit sequences to the query';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'alignment-overview';\n    }\n  }, {\n    key: \"collapseId\",\n    value: function collapseId(props) {\n      return 'alignment_' + props.query.number;\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'Alignment-Overview-' + props.query.id;\n    }\n  }]);\n  return Graph;\n}();\nvar HitsOverview = (0,_grapher__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(Graph);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HitsOverview);\n\n//# sourceURL=webpack://SequenceServer/./public/js/hits_overview.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var grapher__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svgContainer, props) {\n    _classCallCheck(this, Graph);\n    this.svg_container = $svgContainer;\n    var $queryDiv = $svgContainer.parents('.resultn');\n    var hits = this.extractData(props.query.hits, props.query.number);\n    this.graphIt($queryDiv, $svgContainer, 0, 20, null, hits);\n  }\n  return _createClass(Graph, [{\n    key: \"extractData\",\n    value: function extractData(query_hits, number) {\n      var hits = [];\n      query_hits.map(function (hit) {\n        var _hsps = [];\n        var hsps = hit.hsps;\n        underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].each(hsps, function (hsp) {\n          var _hsp = {};\n          _hsp.hspEvalue = hsp.evalue;\n          _hsp.hspStart = hsp.qstart;\n          _hsp.hspEnd = hsp.qend;\n          _hsp.hspFrame = hsp.sframe;\n          _hsp.hspId = 'Query_' + number + '_hit_' + hit.number + '_hsp_' + hsp.number;\n          _hsp.hspIdentity = hsp.identity;\n          _hsp.hspGaps = hsp.gaps;\n          _hsp.hspPositives = hsp.positives;\n          _hsp.hspLength = hsp.length;\n          _hsps.push(_hsp);\n        });\n        _hsps.hitId = hit.id;\n        _hsps.hitDef = 'Query_' + number + '_hit_' + hit.number;\n        _hsps.hitEvalue = hit.hsps[0].evalue;\n        hits.push(_hsps);\n      });\n      return hits;\n    }\n  }, {\n    key: \"setupTooltip\",\n    value: function setupTooltip() {\n      this.svg_container.find('[data-toggle=\"tooltip\"]').tooltip({\n        'placement': 'top',\n        'container': 'body',\n        'html': 'true',\n        'delay': 0,\n        'white-space': 'nowrap'\n      });\n    }\n  }, {\n    key: \"setupClick\",\n    value: function setupClick($graphDiv) {\n      $('a', $graphDiv).click(function (evt) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        window.location.hash = $(this).attr('href');\n      });\n    }\n  }, {\n    key: \"graphControls\",\n    value: function graphControls($queryDiv, $graphDiv, isInit, opts, hits) {\n      var MIN_HITS_TO_SHOW = 20;\n      var totalHits, shownHits, lessButton, moreButton;\n      var countHits = function countHits() {\n        totalHits = hits.length;\n        shownHits = $queryDiv.find('.ghit > g').length;\n      };\n      var setupButtons = function setupButtons($queryDiv, $graphDiv) {\n        $graphDiv.append($('<button/>').addClass('btn btn-link more').attr('type', 'button').attr('data-parent-query', $queryDiv.attr('id')).html('View More&nbsp;').append($('<i/>').html('&nbsp;&nbsp;').addClass('fa fa-angle-double-down')), $('<button/>').addClass('btn btn-link less').attr('type', 'button').attr('data-parent-query', $queryDiv.attr('id')).html('View Less&nbsp;').append($('<i/>').html('&nbsp;&nbsp;').addClass('fa fa-angle-double-up')));\n        lessButton = $('.less', $graphDiv);\n        moreButton = $('.more', $graphDiv);\n      };\n      var initButtons = function initButtons() {\n        countHits();\n        if (totalHits === MIN_HITS_TO_SHOW || shownHits < MIN_HITS_TO_SHOW) {\n          lessButton.hide();\n          moreButton.hide();\n        } else if (shownHits === totalHits) {\n          moreButton.hide();\n          lessButton.show();\n        } else if (shownHits === MIN_HITS_TO_SHOW) {\n          lessButton.hide();\n          moreButton.show();\n        } else {\n          lessButton.show();\n          moreButton.show();\n        }\n      };\n\n      // Setup view buttons' state properly if called for first time.\n      if (isInit === true) {\n        setupButtons($queryDiv, $graphDiv);\n        initButtons();\n      }\n      moreButton.on('click', underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (e) {\n        countHits();\n        this.graphIt($queryDiv, $graphDiv, shownHits, MIN_HITS_TO_SHOW, opts, hits);\n        initButtons();\n        this.setupTooltip();\n        e.stopPropagation();\n      }, this));\n      lessButton.on('click', underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (e) {\n        countHits();\n        var diff = shownHits - MIN_HITS_TO_SHOW;\n\n        // Decrease number of shown hits by defined constant.\n        if (diff >= MIN_HITS_TO_SHOW) {\n          this.graphIt($queryDiv, $graphDiv, shownHits, -MIN_HITS_TO_SHOW, opts, hits);\n          initButtons();\n        } else if (diff !== 0) {\n          // Ensure a certain number of hits always stay in graph.\n          this.graphIt($queryDiv, $graphDiv, shownHits, MIN_HITS_TO_SHOW - shownHits, opts, hits);\n          initButtons();\n        }\n        this.setupTooltip();\n        e.stopPropagation();\n      }, this));\n    }\n  }, {\n    key: \"drawLegend\",\n    value: function drawLegend(svg, options, width, height, hits) {\n      var svg_legend = svg.append('g').attr('transform', 'translate(0,' + (height - 1.75 * options.margin) + ')');\n      svg_legend.append('rect').attr('x', 7.5 * (width - 2 * options.margin) / 10).attr('width', 2 * (width - 4 * options.margin) / 10).attr('height', options.legend).attr('fill', 'url(#legend-grad)');\n      svg_legend.append('text').attr('class', ' legend-text').attr('transform', 'translate(0, ' + options.legend + ')').attr('x', 9.5 * (width - 2 * options.margin) / 10 + options.margin / 2).text('Weaker hits');\n      // .text(function() {\n      //   return Helpers.prettify_evalue(hits[hits.length-1].hitEvalue);\n      // })\n\n      svg_legend.append('text').attr('class', ' legend-text').attr('transform', 'translate(0, ' + options.legend + ')').attr('x', 6.7 * (width - 2 * options.margin) / 10 - options.margin / 2).text('Stronger hits');\n      // .text(function () {\n      //   return Helpers.prettify_evalue(hits[0].hitEvalue);\n      // })\n\n      svg.append('linearGradient').attr('id', 'legend-grad').selectAll('stop').data([{\n        offset: '0%',\n        color: '#000'\n      }, {\n        offset: '45%',\n        color: '#c74f14'\n      }, {\n        offset: '100%',\n        color: '#f6bea2'\n      }]).enter().append('stop').attr('offset', function (d) {\n        return d.offset;\n      }).attr('stop-color', function (d) {\n        return d.color;\n      });\n    }\n  }, {\n    key: \"graphIt\",\n    value: function graphIt($queryDiv, $graphDiv, index, howMany, opts, inhits) {\n      /* barHeight: Height of each hit track.\n       * legend: Height reserved for the overview legend.\n       * margin: Margin around the svg element.\n       */\n      var defaults = {\n          barHeight: 4,\n          legend: inhits.length > 1 ? 3 : 0,\n          margin: 20\n        },\n        options = $.extend(defaults, opts);\n      var hits = inhits.slice(0, index + howMany);\n\n      // Don't draw anything when no hits are obtained.\n      if (hits.length < 1) return false;\n      if (index !== 0) {\n        // Currently, we have no good way to extend pre-existing graph\n        // and hence, are removing the old one and redrawing.\n        $graphDiv.find('svg').remove();\n      }\n      var queryLen = $queryDiv.data().queryLen;\n      var q_i = $queryDiv.attr('id');\n      var width = $graphDiv.width();\n      var height = hits.length * options.barHeight + 2 * options.legend + 4 * options.margin;\n\n      // var height = $graphDiv.height();\n\n      var SEQ_TYPES = {\n        blastn: 'nucleic_acid',\n        blastp: 'amino_acid',\n        blastx: 'nucleic_acid',\n        tblastx: 'nucleic_acid',\n        tblastn: 'amino_acid'\n      };\n      var svg = d3__WEBPACK_IMPORTED_MODULE_0___default().select($graphDiv[0]).selectAll('svg').data([hits]).enter().insert('svg', ':first-child').attr('width', width).attr('height', height).append('g').attr('transform', 'translate(' + options.margin / 2 + ', ' + 1.5 * options.margin + ')');\n      var x = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().range([0, width - options.margin]);\n      x.domain([1, queryLen]);\n      var algorithm = $queryDiv.data().algorithm;\n      var formatter = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.tick_formatter(x, SEQ_TYPES[algorithm]);\n      var _tValues = x.ticks(11);\n      _tValues.pop();\n      var xAxis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().scale(x).orient('top').tickValues(_tValues.concat([1, queryLen])).tickFormat(formatter);\n\n      // Attach the axis to DOM (<svg> element)\n      var container = svg.append('g').attr('transform', 'translate(0, ' + options.margin + ')').append('g').attr('class', 'x axis').call(xAxis);\n\n      // Vertical alignment of ticks\n      container.selectAll('text').attr('x', '25px').attr('y', '2px').attr('transform', 'rotate(-90)');\n      var y = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.ordinal().rangeBands([0, height - 3 * options.margin - 2 * options.legend], 0.3);\n      y.domain(hits.map(function (d) {\n        return d.hitId;\n      }));\n      var gradScale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.log().domain([d3__WEBPACK_IMPORTED_MODULE_0___default().min([1e-5, d3__WEBPACK_IMPORTED_MODULE_0___default().min(hits.map(function (d) {\n        if (parseFloat(d.hitEvalue) === 0.0) return undefined;\n        return d.hitEvalue;\n      }))]), d3__WEBPACK_IMPORTED_MODULE_0___default().max(hits.map(function (d) {\n        return d.hitEvalue;\n      }))]).range([0, 0.8]);\n      svg.append('g').attr('class', 'ghit').attr('transform', 'translate(0, ' + 1.65 * (options.margin - options.legend) + ')').selectAll('.hits').data(hits).enter().append('g').each(function (d, i) {\n        // TODO: Avoid too many variables and improve naming.\n\n        d3__WEBPACK_IMPORTED_MODULE_0___default().select(this).selectAll('.hsp').data(d).enter().append('a').each(function (v, j) {\n          // Drawing the HSPs connector line using the same\n          // color as that of the hit track (using lookahead).\n          var yHspline = y(d.hitId) + options.barHeight / 2;\n          var hsplineColor = d3__WEBPACK_IMPORTED_MODULE_0___default().hsl(20, 0.82, gradScale(v.hspEvalue));\n          if (j + 1 < d.length) {\n            if (d[j].hspEnd <= d[j + 1].hspStart) {\n              d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.parentNode).append('line').attr('x1', x(d[j].hspEnd)).attr('y1', yHspline).attr('x2', x(d[j + 1].hspStart)).attr('y2', yHspline).attr('stroke', hsplineColor);\n            } else if (d[j].hspStart > d[j + 1].hspEnd) {\n              d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.parentNode).append('line').attr('x1', x(d[j + 1].hspEnd)).attr('y1', yHspline).attr('x2', x(d[j].hspStart)).attr('y2', yHspline).attr('stroke', hsplineColor);\n            }\n          }\n          var alt_tooltip = d.hitId + '<br>E value: ' + _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.prettify_evalue(v.hspEvalue) + \"<br>Identities: \".concat(_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(v.hspIdentity, v.hspLength));\n          // if chosen algorithm was blastn, the tooltip won't show the Positives% value in the tooltip\n          if (algorithm != 'blastn') {\n            alt_tooltip += \"<br>Positives: \".concat(_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(v.hspPositives, v.hspLength));\n          }\n          alt_tooltip += \", Gaps: \".concat(_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(v.hspGaps, v.hspLength));\n\n          // Draw the rectangular hit tracks itself.\n          d3__WEBPACK_IMPORTED_MODULE_0___default().select(this).attr('xlink:href', '#' + q_i + '_hit_' + (i + 1)).append('rect').attr('data-toggle', 'tooltip').attr('title', alt_tooltip).attr('class', 'bar').attr('x', function (d) {\n            return x(d.hspStart);\n          }).attr('y', y(d.hitId)).attr('width', function (d) {\n            return x(d.hspEnd - d.hspStart + 1);\n          }).attr('height', options.barHeight).attr('fill', d3__WEBPACK_IMPORTED_MODULE_0___default().rgb(hsplineColor));\n        });\n      });\n\n      // Draw legend only when more than one hit present\n      if (hits.length > 1) {\n        this.drawLegend(svg, options, width, height, inhits);\n      }\n      // Bind listener events once all the graphical elements have\n      // been drawn for first time.\n      if (index === 0) {\n        this.graphControls($queryDiv, $graphDiv, true, opts, inhits);\n      }\n      // Refresh tooltip each time graph is redrawn.\n      this.setupTooltip();\n      // Ensure clicking on 'rect' takes user to the relevant hit on all\n      // browsers.\n      this.setupClick($graphDiv);\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Graphical overview of aligning hit sequences to the query';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'alignment-overview';\n    }\n  }, {\n    key: \"graphId\",\n    value: function graphId(props) {\n      return 'alignment_' + props.query.number;\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'Alignment-Overview-' + props.query.id;\n    }\n  }]);\n}();\nvar HitsOverview = (0,grapher__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(Graph);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HitsOverview);\n\n//# sourceURL=webpack://SequenceServer/./public/js/hits_overview.js?");
 
 /***/ }),
 
@@ -126,7 +137,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ HSP)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\nvar HSPComponents = {};\n\n/**\n * Alignment viewer.\n */\nvar HSP = /*#__PURE__*/function (_React$Component) {\n  _inherits(HSP, _React$Component);\n  var _super = _createSuper(HSP);\n  function HSP(props) {\n    var _this;\n    _classCallCheck(this, HSP);\n    _this = _super.call(this, props);\n    _this.hsp = props.hsp;\n    _this.hspRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this;\n  }\n  _createClass(HSP, [{\n    key: \"domID\",\n    value: function domID() {\n      return \"Query_\" + this.props.query.number + \"_hit_\" + this.props.hit.number + \"_\" + this.props.hsp.number;\n    }\n  }, {\n    key: \"hitDOM_ID\",\n    value: function hitDOM_ID() {\n      return \"Query_\" + this.props.query.number + \"_hit_\" + this.props.hit.number;\n    }\n\n    // Renders pretty formatted alignment.\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n        className: \"hsp\",\n        id: this.domID(),\n        ref: this.hspRef,\n        \"data-parent-hit\": this.hitDOM_ID(),\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"p\", {\n          className: \"pre-reset hsp-stats\",\n          children: [this.props.showHSPNumbers && \"\".concat(_visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.toLetters(this.hsp.number), \". \"), this.hspStats().map(function (s, i) {\n            return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n              children: s\n            }, i);\n          })]\n        }), this.hspLines()]\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      HSPComponents[this.domID()] = this;\n      this.draw();\n    }\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      var charWidth = this.props.getCharacterWidth();\n      var containerWidth = $(this.hspRef.current).width();\n      this.chars = Math.floor((containerWidth - 4) / charWidth);\n      this.forceUpdate();\n    }\n\n    // See Query.shouldComponentUpdate. The same applies for hsp.\n  }, {\n    key: \"shouldComponentUpdate\",\n    value: function shouldComponentUpdate() {\n      return !this.props.hsp;\n    }\n\n    /**\n     * Returns an array of span elements or plain strings (React automatically\n     * adds span tag around strings). This array is passed as it is to JSX to be\n     * rendered just above the pairwise alignment (see render method).\n     *\n     * We cannot return a string from this method otherwise we wouldn't be able\n     * to use JSX elements to format text (like, superscript).\n     */\n  }, {\n    key: \"hspStats\",\n    value: function hspStats() {\n      // An array to hold text or span elements that make up the line.\n      var line = [];\n\n      // Bit score and total score.\n      line.push(\"Score: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inTwoDecimal(this.hsp.bit_score), \" (\").concat(this.hsp.score, \"), \"));\n\n      // E value\n      line.push(\"E value: \");\n      line.push(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inExponential(this.hsp.evalue));\n      line.push(\", \");\n\n      // Identity\n      line.push([\"Identity: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.identity, this.hsp.length), \" (\").concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inPercentage(this.hsp.identity, this.hsp.length), \"), \")]);\n\n      // Positives (for protein alignment).\n      if (this.props.algorithm === \"blastp\" || this.props.algorithm === \"blastx\" || this.props.algorithm === \"tblastn\" || this.props.algorithm === \"tblastx\") {\n        line.push(\"Positives: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.positives, this.hsp.length), \" (\").concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inPercentage(this.hsp.positives, this.hsp.length), \"), \"));\n      }\n\n      // Gaps\n      line.push(\"Gaps: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.gaps, this.hsp.length), \" (\").concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inPercentage(this.hsp.gaps, this.hsp.length), \")\"));\n\n      // Query coverage\n      //line.push(`Query coverage: ${this.hsp.qcovhsp}%, `)\n\n      switch (this.props.algorithm) {\n        case \"tblastx\":\n          line.push(\", Frame: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.qframe, this.hsp.sframe)));\n          break;\n        case \"blastn\":\n          line.push(\", Strand: \".concat(this.hsp.qframe > 0 ? \"+\" : \"-\", \" / \").concat(this.hsp.sframe > 0 ? \"+\" : \"-\"));\n          break;\n        case \"blastx\":\n          line.push(\", Query Frame: \".concat(this.hsp.qframe));\n          break;\n        case \"tblastn\":\n          line.push(\", Hit Frame: \".concat(this.hsp.sframe));\n          break;\n      }\n      return line;\n    }\n\n    /**\n     * Returns array of pre tags containing the three query, middle, and subject\n     * lines that together comprise one 'rendered line' of HSP.\n     */\n  }, {\n    key: \"hspLines\",\n    value: function hspLines() {\n      // Space reserved for showing coordinates\n      var width = this.width();\n\n      // Number of residues we can draw per line is the total number of\n      // characters we can have in a line minus space required to show left\n      // and right coordinates minus 10 characters reserved for displaying\n      // the words Query, Subject and three blank spaces per line.\n      var chars = this.chars - 2 * width - 10;\n\n      // Number of lines of pairwise-alignment (i.e., each line consists of 3\n      // lines). We draw as many pre tags.\n      var lines = Math.ceil(this.hsp.length / chars);\n      var pp = [];\n      var nqseq = this.nqseq();\n      var nsseq = this.nsseq();\n      for (var i = 1; i <= lines; i++) {\n        var seq_start_index = chars * (i - 1);\n        var seq_stop_index = seq_start_index + chars;\n        var lqstart = nqseq;\n        var lqseq = this.hsp.qseq.slice(seq_start_index, seq_stop_index);\n        var lqend = nqseq + (lqseq.length - lqseq.split(\"-\").length) * this.qframe_unit() * this.qframe_sign();\n        nqseq = lqend + this.qframe_unit() * this.qframe_sign();\n        var lmseq = this.hsp.midline.slice(seq_start_index, seq_stop_index);\n        var lsstart = nsseq;\n        var lsseq = this.hsp.sseq.slice(seq_start_index, seq_stop_index);\n        var lsend = nsseq + (lsseq.length - lsseq.split(\"-\").length) * this.sframe_unit() * this.sframe_sign();\n        nsseq = lsend + this.sframe_unit() * this.sframe_sign();\n        pp.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"pre\", {\n          className: \"pre-reset hsp-lines\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \"Query   \".concat(this.formatCoords(lqstart, width), \" \")\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            children: lqseq\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \" \".concat(lqend)\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \"\".concat(this.formatCoords(\"\", width + 8), \" \")\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            children: lmseq\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \"Subject \".concat(this.formatCoords(lsstart, width), \" \")\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            children: lsseq\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \" \".concat(lsend)\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"br\", {})]\n        }, this.hsp.number + \",\" + i));\n      }\n      return pp;\n    }\n\n    // Width of the coordinate part of hsp lines. Essentially the length of\n    // the largest coordinate.\n  }, {\n    key: \"width\",\n    value: function width() {\n      return underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].max(underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map([this.hsp.qstart, this.hsp.qend, this.hsp.sstart, this.hsp.send], function (n) {\n        return n.toString().length;\n      }));\n    }\n\n    // Alignment start coordinate for query sequence.\n    //\n    // This will be qstart or qend depending on the direction in which the\n    // (translated) query sequence aligned.\n  }, {\n    key: \"nqseq\",\n    value: function nqseq() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastx\":\n        case \"tblastn\":\n        case \"tblastx\":\n          return this.hsp.qframe >= 0 ? this.hsp.qstart : this.hsp.qend;\n        case \"blastn\":\n          // BLASTN is a bit weird in that, no matter which direction the query\n          // sequence aligned in, qstart is taken as alignment start coordinate\n          // for query.\n          return this.hsp.qstart;\n      }\n    }\n\n    // Alignment start coordinate for subject sequence.\n    //\n    // This will be sstart or send depending on the direction in which the\n    // (translated) subject sequence aligned.\n  }, {\n    key: \"nsseq\",\n    value: function nsseq() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastx\":\n        case \"tblastn\":\n        case \"tblastx\":\n          return this.hsp.sframe >= 0 ? this.hsp.sstart : this.hsp.send;\n        case \"blastn\":\n          // BLASTN is a bit weird in that, no matter which direction the\n          // subject sequence aligned in, sstart is taken as alignment\n          // start coordinate for subject.\n          return this.hsp.sstart;\n      }\n    }\n\n    // Jump in query coordinate.\n    //\n    // Roughly,\n    //\n    //   qend = qstart + n * qframe_unit\n    //\n    // This will be 1 or 3 depending on whether the query sequence was\n    // translated or not.\n  }, {\n    key: \"qframe_unit\",\n    value: function qframe_unit() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastn\":\n        case \"tblastn\":\n          return 1;\n        case \"blastx\":\n        // _Translated_ nucleotide query against protein database.\n        case \"tblastx\":\n          // _Translated_ nucleotide query against translated\n          // nucleotide database.\n          return 3;\n      }\n    }\n\n    // Jump in subject coordinate.\n    //\n    // Roughly,\n    //\n    //   send = sstart + n * sframe_unit\n    //\n    // This will be 1 or 3 depending on whether the subject sequence was\n    // translated or not.\n  }, {\n    key: \"sframe_unit\",\n    value: function sframe_unit() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastx\":\n        case \"blastn\":\n          return 1;\n        case \"tblastn\":\n          // Protein query against _translated_ nucleotide database.\n          return 3;\n        case \"tblastx\":\n          // Translated nucleotide query against _translated_\n          // nucleotide database.\n          return 3;\n      }\n    }\n\n    // If we should add or subtract qframe_unit from qstart to arrive at qend.\n    //\n    // Roughly,\n    //\n    //   qend = qstart + (qframe_sign) * n * qframe_unit\n    //\n    // This will be +1 or -1, depending on the direction in which the\n    // (translated) query sequence aligned.\n  }, {\n    key: \"qframe_sign\",\n    value: function qframe_sign() {\n      return this.hsp.qframe >= 0 ? 1 : -1;\n    }\n\n    // If we should add or subtract sframe_unit from sstart to arrive at send.\n    //\n    // Roughly,\n    //\n    //   send = sstart + (sframe_sign) * n * sframe_unit\n    //\n    // This will be +1 or -1, depending on the direction in which the\n    // (translated) subject sequence aligned.\n  }, {\n    key: \"sframe_sign\",\n    value: function sframe_sign() {\n      return this.hsp.sframe >= 0 ? 1 : -1;\n    }\n\n    /**\n     * Pad given coord with ' ' till its length == width. Returns undefined if\n     * width is not supplied.\n     */\n  }, {\n    key: \"formatCoords\",\n    value: function formatCoords(coord, width) {\n      if (width) {\n        var padding = width - coord.toString().length;\n        return Array(padding + 1).join(\" \").concat([coord]);\n      }\n    }\n  }, {\n    key: \"spanCoords\",\n    value: function spanCoords(text) {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n        className: \"hsp-coords\",\n        children: text\n      });\n    }\n  }]);\n  return HSP;\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component)); // Redraw if window resized.\n\n$(window).resize(underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].debounce(function () {\n  underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].each(HSPComponents, function (comp) {\n    comp.draw();\n  });\n}, 100));\n\n//# sourceURL=webpack://SequenceServer/./public/js/hsp.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ HSP)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n\nvar HSPComponents = {};\n\n/**\n * Alignment viewer.\n */\nvar HSP = /*#__PURE__*/function (_React$Component) {\n  function HSP(props) {\n    var _this2;\n    _classCallCheck(this, HSP);\n    _this2 = _callSuper(this, HSP, [props]);\n    _this2.hsp = props.hsp;\n    _this2.hspRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this2;\n  }\n  _inherits(HSP, _React$Component);\n  return _createClass(HSP, [{\n    key: \"domID\",\n    value: function domID() {\n      return \"Query_\" + this.props.query.number + \"_hit_\" + this.props.hit.number + \"_\" + this.props.hsp.number;\n    }\n  }, {\n    key: \"hitDOM_ID\",\n    value: function hitDOM_ID() {\n      return \"Query_\" + this.props.query.number + \"_hit_\" + this.props.hit.number;\n    }\n\n    // Renders pretty formatted alignment.\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"div\", {\n        className: \"hsp\",\n        id: this.domID(),\n        ref: this.hspRef,\n        \"data-parent-hit\": this.hitDOM_ID(),\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"p\", {\n          className: \"pre-reset hsp-stats\",\n          children: [this.props.showHSPNumbers && \"\".concat(_visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.toLetters(this.hsp.number), \". \"), this.hspStats().map(function (s, i) {\n            return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n              children: s\n            }, i);\n          })]\n        }), this.hspLines()]\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      HSPComponents[this.domID()] = this;\n      this.draw();\n    }\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      var charWidth = this.props.getCharacterWidth();\n      var containerWidth = $(this.hspRef.current).width();\n      this.chars = Math.floor((containerWidth - 4) / charWidth);\n      this.forceUpdate();\n    }\n\n    // See Query.shouldComponentUpdate. The same applies for hsp.\n  }, {\n    key: \"shouldComponentUpdate\",\n    value: function shouldComponentUpdate() {\n      return !this.props.hsp;\n    }\n\n    /**\n     * Returns an array of span elements or plain strings (React automatically\n     * adds span tag around strings). This array is passed as it is to JSX to be\n     * rendered just above the pairwise alignment (see render method).\n     *\n     * We cannot return a string from this method otherwise we wouldn't be able\n     * to use JSX elements to format text (like, superscript).\n     */\n  }, {\n    key: \"hspStats\",\n    value: function hspStats() {\n      // An array to hold text or span elements that make up the line.\n      var line = [];\n\n      // Bit score and total score.\n      line.push(\"Score: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inTwoDecimal(this.hsp.bit_score), \" (\").concat(this.hsp.score, \"), \"));\n\n      // E value\n      line.push(\"E value: \");\n      line.push(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inExponential(this.hsp.evalue));\n      line.push(\", \");\n\n      // Identity\n      line.push([\"Identity: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.identity, this.hsp.length), \" (\").concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inPercentage(this.hsp.identity, this.hsp.length), \"), \")]);\n\n      // Positives (for protein alignment).\n      if (this.props.algorithm === \"blastp\" || this.props.algorithm === \"blastx\" || this.props.algorithm === \"tblastn\" || this.props.algorithm === \"tblastx\") {\n        line.push(\"Positives: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.positives, this.hsp.length), \" (\").concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inPercentage(this.hsp.positives, this.hsp.length), \"), \"));\n      }\n\n      // Gaps\n      line.push(\"Gaps: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.gaps, this.hsp.length), \" (\").concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inPercentage(this.hsp.gaps, this.hsp.length), \")\"));\n\n      // Query coverage\n      //line.push(`Query coverage: ${this.hsp.qcovhsp}%, `)\n\n      switch (this.props.algorithm) {\n        case \"tblastx\":\n          line.push(\", Frame: \".concat(_utils__WEBPACK_IMPORTED_MODULE_2__[\"default\"].inFraction(this.hsp.qframe, this.hsp.sframe)));\n          break;\n        case \"blastn\":\n          line.push(\", Strand: \".concat(this.hsp.qframe > 0 ? \"+\" : \"-\", \" / \").concat(this.hsp.sframe > 0 ? \"+\" : \"-\"));\n          break;\n        case \"blastx\":\n          line.push(\", Query Frame: \".concat(this.hsp.qframe));\n          break;\n        case \"tblastn\":\n          line.push(\", Hit Frame: \".concat(this.hsp.sframe));\n          break;\n      }\n      return line;\n    }\n\n    /**\n     * Returns array of pre tags containing the three query, middle, and subject\n     * lines that together comprise one 'rendered line' of HSP.\n     */\n  }, {\n    key: \"hspLines\",\n    value: function hspLines() {\n      // Space reserved for showing coordinates\n      var width = this.width();\n\n      // Number of residues we can draw per line is the total number of\n      // characters we can have in a line minus space required to show left\n      // and right coordinates minus 10 characters reserved for displaying\n      // the words Query, Subject and three blank spaces per line.\n      var chars = this.chars - 2 * width - 10;\n\n      // Number of lines of pairwise-alignment (i.e., each line consists of 3\n      // lines). We draw as many pre tags.\n      var lines = Math.ceil(this.hsp.length / chars);\n      var pp = [];\n      var nqseq = this.nqseq();\n      var nsseq = this.nsseq();\n      for (var i = 1; i <= lines; i++) {\n        var seq_start_index = chars * (i - 1);\n        var seq_stop_index = seq_start_index + chars;\n        var lqstart = nqseq;\n        var lqseq = this.hsp.qseq.slice(seq_start_index, seq_stop_index);\n        var lqend = nqseq + (lqseq.length - lqseq.split(\"-\").length) * this.qframe_unit() * this.qframe_sign();\n        nqseq = lqend + this.qframe_unit() * this.qframe_sign();\n        var lmseq = this.hsp.midline.slice(seq_start_index, seq_stop_index);\n        var lsstart = nsseq;\n        var lsseq = this.hsp.sseq.slice(seq_start_index, seq_stop_index);\n        var lsend = nsseq + (lsseq.length - lsseq.split(\"-\").length) * this.sframe_unit() * this.sframe_sign();\n        nsseq = lsend + this.sframe_unit() * this.sframe_sign();\n        pp.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(\"pre\", {\n          className: \"pre-reset hsp-lines\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \"Query   \".concat(this.formatCoords(lqstart, width), \" \")\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            children: lqseq\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \" \".concat(lqend)\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \"\".concat(this.formatCoords(\"\", width + 8), \" \")\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            children: lmseq\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \"Subject \".concat(this.formatCoords(lsstart, width), \" \")\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            children: lsseq\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n            className: \"hsp-coords\",\n            children: \" \".concat(lsend)\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"br\", {})]\n        }, this.hsp.number + \",\" + i));\n      }\n      return pp;\n    }\n\n    // Width of the coordinate part of hsp lines. Essentially the length of\n    // the largest coordinate.\n  }, {\n    key: \"width\",\n    value: function width() {\n      return underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].max(underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map([this.hsp.qstart, this.hsp.qend, this.hsp.sstart, this.hsp.send], function (n) {\n        return n.toString().length;\n      }));\n    }\n\n    // Alignment start coordinate for query sequence.\n    //\n    // This will be qstart or qend depending on the direction in which the\n    // (translated) query sequence aligned.\n  }, {\n    key: \"nqseq\",\n    value: function nqseq() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastx\":\n        case \"tblastn\":\n        case \"tblastx\":\n          return this.hsp.qframe >= 0 ? this.hsp.qstart : this.hsp.qend;\n        case \"blastn\":\n          // BLASTN is a bit weird in that, no matter which direction the query\n          // sequence aligned in, qstart is taken as alignment start coordinate\n          // for query.\n          return this.hsp.qstart;\n      }\n    }\n\n    // Alignment start coordinate for subject sequence.\n    //\n    // This will be sstart or send depending on the direction in which the\n    // (translated) subject sequence aligned.\n  }, {\n    key: \"nsseq\",\n    value: function nsseq() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastx\":\n        case \"tblastn\":\n        case \"tblastx\":\n          return this.hsp.sframe >= 0 ? this.hsp.sstart : this.hsp.send;\n        case \"blastn\":\n          // BLASTN is a bit weird in that, no matter which direction the\n          // subject sequence aligned in, sstart is taken as alignment\n          // start coordinate for subject.\n          return this.hsp.sstart;\n      }\n    }\n\n    // Jump in query coordinate.\n    //\n    // Roughly,\n    //\n    //   qend = qstart + n * qframe_unit\n    //\n    // This will be 1 or 3 depending on whether the query sequence was\n    // translated or not.\n  }, {\n    key: \"qframe_unit\",\n    value: function qframe_unit() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastn\":\n        case \"tblastn\":\n          return 1;\n        case \"blastx\":\n        // _Translated_ nucleotide query against protein database.\n        case \"tblastx\":\n          // _Translated_ nucleotide query against translated\n          // nucleotide database.\n          return 3;\n      }\n    }\n\n    // Jump in subject coordinate.\n    //\n    // Roughly,\n    //\n    //   send = sstart + n * sframe_unit\n    //\n    // This will be 1 or 3 depending on whether the subject sequence was\n    // translated or not.\n  }, {\n    key: \"sframe_unit\",\n    value: function sframe_unit() {\n      switch (this.props.algorithm) {\n        case \"blastp\":\n        case \"blastx\":\n        case \"blastn\":\n          return 1;\n        case \"tblastn\":\n          // Protein query against _translated_ nucleotide database.\n          return 3;\n        case \"tblastx\":\n          // Translated nucleotide query against _translated_\n          // nucleotide database.\n          return 3;\n      }\n    }\n\n    // If we should add or subtract qframe_unit from qstart to arrive at qend.\n    //\n    // Roughly,\n    //\n    //   qend = qstart + (qframe_sign) * n * qframe_unit\n    //\n    // This will be +1 or -1, depending on the direction in which the\n    // (translated) query sequence aligned.\n  }, {\n    key: \"qframe_sign\",\n    value: function qframe_sign() {\n      return this.hsp.qframe >= 0 ? 1 : -1;\n    }\n\n    // If we should add or subtract sframe_unit from sstart to arrive at send.\n    //\n    // Roughly,\n    //\n    //   send = sstart + (sframe_sign) * n * sframe_unit\n    //\n    // This will be +1 or -1, depending on the direction in which the\n    // (translated) subject sequence aligned.\n  }, {\n    key: \"sframe_sign\",\n    value: function sframe_sign() {\n      return this.hsp.sframe >= 0 ? 1 : -1;\n    }\n\n    /**\n     * Pad given coord with ' ' till its length == width. Returns undefined if\n     * width is not supplied.\n     */\n  }, {\n    key: \"formatCoords\",\n    value: function formatCoords(coord, width) {\n      if (width) {\n        var padding = width - coord.toString().length;\n        return Array(padding + 1).join(\" \").concat([coord]);\n      }\n    }\n  }, {\n    key: \"spanCoords\",\n    value: function spanCoords(text) {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"span\", {\n        className: \"hsp-coords\",\n        children: text\n      });\n    }\n  }]);\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component)); // Redraw if window resized.\n\n$(window).resize(underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].debounce(function () {\n  underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].each(HSPComponents, function (comp) {\n    comp.draw();\n  });\n}, 100));\n\n//# sourceURL=webpack://SequenceServer/./public/js/hsp.js?");
 
 /***/ }),
 
@@ -148,7 +159,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jque
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _grapher__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\n/**\n * Renders Kablammo visualization\n *\n * JSON received from server side is modified as JSON expected by kablammo's\n * graph.js.  All the relevant information including a SVG container where\n * visual needs to be rendered, is delegated to graph.js. graph.js renders\n * kablammo visualization and has all event handlers for events performed on\n * the visual.\n *\n * Event handlers related to downloading and viewing of alignments and images\n * have been extracted from grapher.js and interface.js and directly included\n * here.\n */\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svgContainer, props) {\n    _classCallCheck(this, Graph);\n    this._zoom_scale_by = 1.4;\n    this._padding_x = 12;\n    this._padding_y = 50;\n    this._canvas_height = $svgContainer.height();\n    this._canvas_width = $svgContainer.width();\n    this._results = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.get_seq_type(props.algorithm);\n    this._query_id = props.query.id;\n    this._subject_id = props.hit.id;\n    this._query_length = props.query.length;\n    this._subject_length = props.hit.length;\n    this._show_numbers = props.showHSPCrumbs;\n    // this._hsps = this.toKablammo(props.hit.hsps, props.query);\n    this._hsps = props.hit.hsps;\n    this._maxBitScore = props.query.hits[0].hsps[0].bit_score;\n    this.svgContainer_d3 = d3__WEBPACK_IMPORTED_MODULE_0___default().select($svgContainer[0]);\n    this._svg = {};\n    this._svg.jq = $(this._svg.raw);\n    this._scales = this._create_scales();\n    this.use_complement_coords = false;\n    this._axis_ticks = 10;\n    this._initiate();\n    this.bindHoverHandler($svgContainer);\n  }\n  _createClass(Graph, [{\n    key: \"bindHoverHandler\",\n    value: function bindHoverHandler($svgContainer) {\n      // Raise polygon on hover.\n      $svgContainer.find('polygon').hover(function () {\n        var $g = $(this).parent();\n        $g.parent().append($g);\n      });\n    }\n  }, {\n    key: \"_initiate\",\n    value: function _initiate() {\n      this._svg.d3 = this.svgContainer_d3.insert('svg', ':first-child').attr('height', this._canvas_height).attr('width', this._canvas_width);\n      this._svg.raw = this._svg.d3[0][0];\n      this._render_graph();\n    }\n  }, {\n    key: \"_rotate_axis_labels\",\n    value: function _rotate_axis_labels(text, text_anchor, dx, dy) {\n      text.style('text-anchor', text_anchor).attr('x', dx).attr('y', dy)\n      // When axis orientation is \"bottom\", d3 automataically applies a 0.71em\n      // dy offset to labels. As Inkscape does not seem to properly interpret\n      // such values, force them to be zero. When calling this function, then,\n      // you must compensate by adding 0.71em worth of offset to the dy value\n      // you provide.\n      .attr('dx', 0).attr('dy', 0).attr('transform', 'rotate(-90)');\n    }\n  }, {\n    key: \"_create_axis\",\n    value: function _create_axis(scale, orientation, height, text_anchor, dx, dy, seq_type) {\n      var formatter = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.tick_formatter(scale, seq_type);\n      var tvalues = scale.ticks();\n      tvalues.pop();\n      var axis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().ticks(this._axis_ticks).scale(scale).tickValues(tvalues.concat(scale.domain())).tickFormat(formatter).orient(orientation);\n      var container = this._svg.d3.append('g').attr('class', 'axis').attr('transform', 'translate(0,' + height + ')').call(axis);\n      this._rotate_axis_labels(container.selectAll('text'), text_anchor, dx, dy);\n      return container;\n    }\n  }, {\n    key: \"_is_domain_within_orig\",\n    value: function _is_domain_within_orig(original_domain, new_domain) {\n      return original_domain[0] <= new_domain[0] && original_domain[1] >= new_domain[1];\n    }\n  }, {\n    key: \"_zoom_scale\",\n    value: function _zoom_scale(scale, original_domain, zoom_from, scale_by) {\n      var l = scale.domain()[0];\n      var r = scale.domain()[1];\n      l = zoom_from - (zoom_from - l) / scale_by;\n      r = zoom_from + (r - zoom_from) / scale_by;\n      l = Math.round(l);\n      r = Math.round(r);\n      if (r - l < this._axis_ticks) return;\n      var new_domain = [l, r];\n      if (this._is_domain_within_orig(original_domain, new_domain)) scale.domain(new_domain);else scale.domain(original_domain);\n    }\n  }, {\n    key: \"_pan_scale\",\n    value: function _pan_scale(existing_scale, original_domain, delta) {\n      var scale = (existing_scale.domain()[1] - existing_scale.domain()[0]) / (existing_scale.range()[1] - existing_scale.range()[0]);\n      var scaled_delta = -delta * scale;\n      var domain = existing_scale.domain();\n      var l = domain[0] + scaled_delta;\n      var r = domain[1] + scaled_delta;\n      var new_domain = [l, r];\n      if (this._is_domain_within_orig(original_domain, new_domain)) existing_scale.domain(new_domain);\n    }\n  }, {\n    key: \"_render_polygons\",\n    value: function _render_polygons() {\n      var self = this;\n\n      // Remove all existing child elements.\n      this._svg.d3.selectAll('*').remove();\n      this._polygons = this._svg.d3.selectAll('polygon').data(this._hsps.slice().reverse()).enter().append('g').attr('class', 'polygon');\n      this._polygons.append('polygon').attr('class', 'hit').attr('fill', function (hsp) {\n        return self.determine_colour(hsp.bit_score / self._maxBitScore);\n      }).attr('points', function (hsp) {\n        // We create query_x_points such that the 0th element will *always* be\n        // on the left of the 1st element, regardless of whether the axis is\n        // drawn normally (i.e., ltr) or reversed (i.e., rtl). We do the same\n        // for subject_x_points. As our parsing code guarantees start < end, we\n        // decide on this ordering based on the reading frame, because it\n        // determines whether our axis will be reversed or not.\n        var query_x_points = [self._scales.query.scale(hsp.qstart), self._scales.query.scale(hsp.qend)];\n        var subject_x_points = [self._scales.subject.scale(hsp.sstart), self._scales.subject.scale(hsp.send)];\n\n        // Axis will be rendered with 5' end on right and 3' end on left, so we\n        // must reverse the order of vertices for the polygon we will render to\n        // prevent the polygon from \"crossing over\" itself.\n        if (!self.use_complement_coords) {\n          if (hsp.qframe < 0) query_x_points.reverse();\n          if (hsp.sframe < 0) subject_x_points.reverse();\n        }\n        var points = [[query_x_points[0], self._scales.query.height + 1], [subject_x_points[0], self._scales.subject.height - 1], [subject_x_points[1], self._scales.subject.height - 1], [query_x_points[1], self._scales.query.height + 1]];\n        return points.map(function (point) {\n          return point[0] + ',' + point[1];\n        }).join(' ');\n      });\n      if (self._show_numbers) {\n        this._polygons.append('text').attr('x', function (hsp) {\n          var query_x_points = [self._scales.query.scale(hsp.qstart), self._scales.query.scale(hsp.qend)];\n          var subject_x_points = [self._scales.subject.scale(hsp.sstart), self._scales.subject.scale(hsp.send)];\n          var middle1 = (query_x_points[0] + subject_x_points[0]) * 0.5;\n          var middle2 = (query_x_points[1] + subject_x_points[1]) * 0.5;\n          return (middle2 + middle1) * 0.5;\n        }).attr('y', function (hsp) {\n          var a = self._scales.query.height;\n          var b = self._scales.subject.height;\n          var middle = (b - a) / 2;\n          return a + middle + 2; // for font-height 10px\n        }).text(function (hsp) {\n          return _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.toLetters(hsp.number);\n        });\n      }\n    }\n  }, {\n    key: \"_overlaps\",\n    value: function _overlaps(s1, e1, s2, e2) {\n      return Math.min(e1, e2) > Math.max(s1, s2);\n    }\n  }, {\n    key: \"_rects_overlap\",\n    value: function _rects_overlap(rect1, rect2, padding) {\n      padding = padding || 0;\n      return this._overlaps(rect1.left - padding, rect1.right + padding, rect2.left, rect2.right) && this._overlaps(rect1.top - padding, rect1.bottom + padding, rect2.top, rect2.bottom);\n    }\n  }, {\n    key: \"_render_axes\",\n    value: function _render_axes() {\n      var query_axis = this._create_axis(this._scales.query.scale, 'top', this._scales.query.height, 'start', '9px', '2px', this._results.query_seq_type);\n      var subject_axis = this._create_axis(this._scales.subject.scale, 'bottom', this._scales.subject.height, 'end', '-11px', '3px', this._results.subject_seq_type);\n    }\n  }, {\n    key: \"_render_graph\",\n    value: function _render_graph() {\n      this._render_polygons();\n      this._render_axes();\n    }\n  }, {\n    key: \"_find_nearest_scale\",\n    value: function _find_nearest_scale(point) {\n      var nearest = null;\n      var smallest_distance = Number.MAX_VALUE;\n      var self = this;\n      Object.keys(this._scales).forEach(function (scale_name) {\n        var scale = self._scales[scale_name].scale;\n        var scale_height = self._scales[scale_name].height;\n        var delta = Math.abs(scale_height - point[1]);\n        if (delta < smallest_distance) {\n          nearest = scale;\n          smallest_distance = delta;\n        }\n      });\n      return nearest;\n    }\n  }, {\n    key: \"_create_scales\",\n    value: function _create_scales() {\n      var query_range = [this._padding_x, this._canvas_width - this._padding_x];\n      var subject_range = [this._padding_x, this._canvas_width - this._padding_x];\n\n      // If we wish to show the HSPs relative to the original (input or DB)\n      // sequence rather than its complement (i.e., use_complement_coords = false),\n      // even when the HSPs lie on the complement, then we must display the axis\n      // with its 5' end on the right and 3' end on the left. In this case, you can\n      // imagine the invisible complementary strand (with its 5' end on left and 3'\n      // end on right) floating above the rendered original strand, with the hits\n      // actually falling on the complementary strand.\n      //\n      // If we show the HSPs relative to the complementary strand (i.e.,\n      // use_complement_coords = true), then we *always* wish to show the axis with\n      // its 5' end on the left and 3' end on the right.\n      //\n      // Regardless of whether this value is true or falase, the rendered polygons\n      // will be precisely the same (meaning down to the pixel -- they will be\n      // *identical*). Only the direction of the axis, and the coordinates of\n      // points falling along it, change.\n      if (!this.use_complement_coords) {\n        if (this._hsps[0].qframe < 0) query_range.reverse();\n        if (this._hsps[0].sframe < 0) subject_range.reverse();\n      }\n      var query_scale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([1, this._query_length]).range(query_range);\n      var subject_scale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([1, this._subject_length]).range(subject_range);\n      query_scale.original_domain = query_scale.domain();\n      subject_scale.original_domain = subject_scale.domain();\n      var query_height = this._padding_y;\n      var subject_height = this._canvas_height - this._padding_y;\n      var scales = {\n        subject: {\n          height: subject_height,\n          scale: subject_scale\n        },\n        query: {\n          height: query_height,\n          scale: query_scale\n        }\n      };\n      return scales;\n    }\n  }, {\n    key: \"_rgba_to_rgb\",\n    value: function _rgba_to_rgb(rgba, matte_rgb) {\n      // Algorithm taken from http://stackoverflow.com/a/2049362/1691611.\n      var normalize = function normalize(colour) {\n        return colour.map(function (channel) {\n          return channel / 255;\n        });\n      };\n      var denormalize = function denormalize(colour) {\n        return colour.map(function (channel) {\n          return Math.round(Math.min(255, channel * 255));\n        });\n      };\n      var norm = normalize(rgba.slice(0, 3));\n      matte_rgb = normalize(matte_rgb);\n      var alpha = rgba[3] / 255;\n      var rgb = [alpha * norm[0] + (1 - alpha) * matte_rgb[0], alpha * norm[1] + (1 - alpha) * matte_rgb[1], alpha * norm[2] + (1 - alpha) * matte_rgb[2]];\n      return denormalize(rgb);\n    }\n\n    /**\n    * Determines colour of a hsp based on normalized bit-score.\n    *\n    * Taken from grapher.js\n    */\n  }, {\n    key: \"determine_colour\",\n    value: function determine_colour(level) {\n      var graph_colour = {\n        r: 199,\n        g: 79,\n        b: 20\n      };\n      var matte_colour = {\n        r: 255,\n        g: 255,\n        b: 255\n      };\n      var min_opacity = 0.3;\n      var opacity = (1 - min_opacity) * level + min_opacity;\n      var rgb = this._rgba_to_rgb([graph_colour.r, graph_colour.g, graph_colour.b, 255 * opacity], [matte_colour.r, matte_colour.g, matte_colour.b]);\n      return 'rgb(' + rgb.join(',') + ')';\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Graphical overview of aligning region(s)';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'kablammo';\n    }\n  }, {\n    key: \"collapseId\",\n    value: function collapseId(props) {\n      return 'kablammo_' + props.query.number + '_' + props.hit.number;\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'Kablammo-' + props.query.id + '-' + props.hit.id;\n    }\n  }]);\n  return Graph;\n}();\nvar Kablammo = (0,_grapher__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(Graph);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Kablammo);\n\n//# sourceURL=webpack://SequenceServer/./public/js/kablammo.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var grapher__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\n/**\n * Renders Kablammo visualization\n *\n * JSON received from server side is modified as JSON expected by kablammo's\n * graph.js.  All the relevant information including a SVG container where\n * visual needs to be rendered, is delegated to graph.js. graph.js renders\n * kablammo visualization and has all event handlers for events performed on\n * the visual.\n *\n * Event handlers related to downloading and viewing of alignments and images\n * have been extracted from grapher.js and interface.js and directly included\n * here.\n */\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svgContainer, props) {\n    _classCallCheck(this, Graph);\n    this._zoom_scale_by = 1.4;\n    this._padding_x = 12;\n    this._padding_y = 50;\n    this._canvas_height = $svgContainer.height();\n    this._canvas_width = $svgContainer.width();\n    this._results = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.get_seq_type(props.algorithm);\n    this._query_id = props.query.id;\n    this._subject_id = props.hit.id;\n    this._query_length = props.query.length;\n    this._subject_length = props.hit.length;\n    this._show_numbers = props.showHSPCrumbs;\n    // this._hsps = this.toKablammo(props.hit.hsps, props.query);\n    this._hsps = props.hit.hsps;\n    this._maxBitScore = props.query.hits[0].hsps[0].bit_score;\n    this.svgContainer_d3 = d3__WEBPACK_IMPORTED_MODULE_0___default().select($svgContainer[0]);\n    this._svg = {};\n    this._svg.jq = $(this._svg.raw);\n    this._scales = this._create_scales();\n    this.use_complement_coords = false;\n    this._axis_ticks = 10;\n    this._initiate();\n    this.bindHoverHandler($svgContainer);\n  }\n  return _createClass(Graph, [{\n    key: \"bindHoverHandler\",\n    value: function bindHoverHandler($svgContainer) {\n      // Raise polygon on hover.\n      $svgContainer.find('polygon').hover(function () {\n        var $g = $(this).parent();\n        $g.parent().append($g);\n      });\n    }\n  }, {\n    key: \"_initiate\",\n    value: function _initiate() {\n      this._svg.d3 = this.svgContainer_d3.insert('svg', ':first-child').attr('height', this._canvas_height).attr('width', this._canvas_width);\n      this._svg.raw = this._svg.d3[0][0];\n      this._render_graph();\n    }\n  }, {\n    key: \"_rotate_axis_labels\",\n    value: function _rotate_axis_labels(text, text_anchor, dx, dy) {\n      text.style('text-anchor', text_anchor).attr('x', dx).attr('y', dy)\n      // When axis orientation is \"bottom\", d3 automataically applies a 0.71em\n      // dy offset to labels. As Inkscape does not seem to properly interpret\n      // such values, force them to be zero. When calling this function, then,\n      // you must compensate by adding 0.71em worth of offset to the dy value\n      // you provide.\n      .attr('dx', 0).attr('dy', 0).attr('transform', 'rotate(-90)');\n    }\n  }, {\n    key: \"_create_axis\",\n    value: function _create_axis(scale, orientation, height, text_anchor, dx, dy, seq_type) {\n      var formatter = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.tick_formatter(scale, seq_type);\n      var tvalues = scale.ticks();\n      tvalues.pop();\n      var axis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().ticks(this._axis_ticks).scale(scale).tickValues(tvalues.concat(scale.domain())).tickFormat(formatter).orient(orientation);\n      var container = this._svg.d3.append('g').attr('class', 'axis').attr('transform', 'translate(0,' + height + ')').call(axis);\n      this._rotate_axis_labels(container.selectAll('text'), text_anchor, dx, dy);\n      return container;\n    }\n  }, {\n    key: \"_is_domain_within_orig\",\n    value: function _is_domain_within_orig(original_domain, new_domain) {\n      return original_domain[0] <= new_domain[0] && original_domain[1] >= new_domain[1];\n    }\n  }, {\n    key: \"_zoom_scale\",\n    value: function _zoom_scale(scale, original_domain, zoom_from, scale_by) {\n      var l = scale.domain()[0];\n      var r = scale.domain()[1];\n      l = zoom_from - (zoom_from - l) / scale_by;\n      r = zoom_from + (r - zoom_from) / scale_by;\n      l = Math.round(l);\n      r = Math.round(r);\n      if (r - l < this._axis_ticks) return;\n      var new_domain = [l, r];\n      if (this._is_domain_within_orig(original_domain, new_domain)) scale.domain(new_domain);else scale.domain(original_domain);\n    }\n  }, {\n    key: \"_pan_scale\",\n    value: function _pan_scale(existing_scale, original_domain, delta) {\n      var scale = (existing_scale.domain()[1] - existing_scale.domain()[0]) / (existing_scale.range()[1] - existing_scale.range()[0]);\n      var scaled_delta = -delta * scale;\n      var domain = existing_scale.domain();\n      var l = domain[0] + scaled_delta;\n      var r = domain[1] + scaled_delta;\n      var new_domain = [l, r];\n      if (this._is_domain_within_orig(original_domain, new_domain)) existing_scale.domain(new_domain);\n    }\n  }, {\n    key: \"_render_polygons\",\n    value: function _render_polygons() {\n      var self = this;\n\n      // Remove all existing child elements.\n      this._svg.d3.selectAll('*').remove();\n      this._polygons = this._svg.d3.selectAll('polygon').data(this._hsps.slice().reverse()).enter().append('g').attr('class', 'polygon');\n      this._polygons.append('polygon').attr('class', 'hit').attr('fill', function (hsp) {\n        return self.determine_colour(hsp.bit_score / self._maxBitScore);\n      }).attr('points', function (hsp) {\n        // We create query_x_points such that the 0th element will *always* be\n        // on the left of the 1st element, regardless of whether the axis is\n        // drawn normally (i.e., ltr) or reversed (i.e., rtl). We do the same\n        // for subject_x_points. As our parsing code guarantees start < end, we\n        // decide on this ordering based on the reading frame, because it\n        // determines whether our axis will be reversed or not.\n        var query_x_points = [self._scales.query.scale(hsp.qstart), self._scales.query.scale(hsp.qend)];\n        var subject_x_points = [self._scales.subject.scale(hsp.sstart), self._scales.subject.scale(hsp.send)];\n\n        // Axis will be rendered with 5' end on right and 3' end on left, so we\n        // must reverse the order of vertices for the polygon we will render to\n        // prevent the polygon from \"crossing over\" itself.\n        if (!self.use_complement_coords) {\n          if (hsp.qframe < 0) query_x_points.reverse();\n          if (hsp.sframe < 0) subject_x_points.reverse();\n        }\n        var points = [[query_x_points[0], self._scales.query.height + 1], [subject_x_points[0], self._scales.subject.height - 1], [subject_x_points[1], self._scales.subject.height - 1], [query_x_points[1], self._scales.query.height + 1]];\n        return points.map(function (point) {\n          return point[0] + ',' + point[1];\n        }).join(' ');\n      });\n      if (self._show_numbers) {\n        this._polygons.append('text').attr('x', function (hsp) {\n          var query_x_points = [self._scales.query.scale(hsp.qstart), self._scales.query.scale(hsp.qend)];\n          var subject_x_points = [self._scales.subject.scale(hsp.sstart), self._scales.subject.scale(hsp.send)];\n          var middle1 = (query_x_points[0] + subject_x_points[0]) * 0.5;\n          var middle2 = (query_x_points[1] + subject_x_points[1]) * 0.5;\n          return (middle2 + middle1) * 0.5;\n        }).attr('y', function (hsp) {\n          var a = self._scales.query.height;\n          var b = self._scales.subject.height;\n          var middle = (b - a) / 2;\n          return a + middle + 2; // for font-height 10px\n        }).text(function (hsp) {\n          return _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.toLetters(hsp.number);\n        });\n      }\n    }\n  }, {\n    key: \"_overlaps\",\n    value: function _overlaps(s1, e1, s2, e2) {\n      return Math.min(e1, e2) > Math.max(s1, s2);\n    }\n  }, {\n    key: \"_rects_overlap\",\n    value: function _rects_overlap(rect1, rect2, padding) {\n      padding = padding || 0;\n      return this._overlaps(rect1.left - padding, rect1.right + padding, rect2.left, rect2.right) && this._overlaps(rect1.top - padding, rect1.bottom + padding, rect2.top, rect2.bottom);\n    }\n  }, {\n    key: \"_render_axes\",\n    value: function _render_axes() {\n      var query_axis = this._create_axis(this._scales.query.scale, 'top', this._scales.query.height, 'start', '9px', '2px', this._results.query_seq_type);\n      var subject_axis = this._create_axis(this._scales.subject.scale, 'bottom', this._scales.subject.height, 'end', '-11px', '3px', this._results.subject_seq_type);\n    }\n  }, {\n    key: \"_render_graph\",\n    value: function _render_graph() {\n      this._render_polygons();\n      this._render_axes();\n    }\n  }, {\n    key: \"_find_nearest_scale\",\n    value: function _find_nearest_scale(point) {\n      var nearest = null;\n      var smallest_distance = Number.MAX_VALUE;\n      var self = this;\n      Object.keys(this._scales).forEach(function (scale_name) {\n        var scale = self._scales[scale_name].scale;\n        var scale_height = self._scales[scale_name].height;\n        var delta = Math.abs(scale_height - point[1]);\n        if (delta < smallest_distance) {\n          nearest = scale;\n          smallest_distance = delta;\n        }\n      });\n      return nearest;\n    }\n  }, {\n    key: \"_create_scales\",\n    value: function _create_scales() {\n      var query_range = [this._padding_x, this._canvas_width - this._padding_x];\n      var subject_range = [this._padding_x, this._canvas_width - this._padding_x];\n\n      // If we wish to show the HSPs relative to the original (input or DB)\n      // sequence rather than its complement (i.e., use_complement_coords = false),\n      // even when the HSPs lie on the complement, then we must display the axis\n      // with its 5' end on the right and 3' end on the left. In this case, you can\n      // imagine the invisible complementary strand (with its 5' end on left and 3'\n      // end on right) floating above the rendered original strand, with the hits\n      // actually falling on the complementary strand.\n      //\n      // If we show the HSPs relative to the complementary strand (i.e.,\n      // use_complement_coords = true), then we *always* wish to show the axis with\n      // its 5' end on the left and 3' end on the right.\n      //\n      // Regardless of whether this value is true or falase, the rendered polygons\n      // will be precisely the same (meaning down to the pixel -- they will be\n      // *identical*). Only the direction of the axis, and the coordinates of\n      // points falling along it, change.\n      if (!this.use_complement_coords) {\n        if (this._hsps[0].qframe < 0) query_range.reverse();\n        if (this._hsps[0].sframe < 0) subject_range.reverse();\n      }\n      var query_scale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([1, this._query_length]).range(query_range);\n      var subject_scale = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([1, this._subject_length]).range(subject_range);\n      query_scale.original_domain = query_scale.domain();\n      subject_scale.original_domain = subject_scale.domain();\n      var query_height = this._padding_y;\n      var subject_height = this._canvas_height - this._padding_y;\n      var scales = {\n        subject: {\n          height: subject_height,\n          scale: subject_scale\n        },\n        query: {\n          height: query_height,\n          scale: query_scale\n        }\n      };\n      return scales;\n    }\n  }, {\n    key: \"_rgba_to_rgb\",\n    value: function _rgba_to_rgb(rgba, matte_rgb) {\n      // Algorithm taken from http://stackoverflow.com/a/2049362/1691611.\n      var normalize = function normalize(colour) {\n        return colour.map(function (channel) {\n          return channel / 255;\n        });\n      };\n      var denormalize = function denormalize(colour) {\n        return colour.map(function (channel) {\n          return Math.round(Math.min(255, channel * 255));\n        });\n      };\n      var norm = normalize(rgba.slice(0, 3));\n      matte_rgb = normalize(matte_rgb);\n      var alpha = rgba[3] / 255;\n      var rgb = [alpha * norm[0] + (1 - alpha) * matte_rgb[0], alpha * norm[1] + (1 - alpha) * matte_rgb[1], alpha * norm[2] + (1 - alpha) * matte_rgb[2]];\n      return denormalize(rgb);\n    }\n\n    /**\n    * Determines colour of a hsp based on normalized bit-score.\n    *\n    * Taken from grapher.js\n    */\n  }, {\n    key: \"determine_colour\",\n    value: function determine_colour(level) {\n      var graph_colour = {\n        r: 199,\n        g: 79,\n        b: 20\n      };\n      var matte_colour = {\n        r: 255,\n        g: 255,\n        b: 255\n      };\n      var min_opacity = 0.3;\n      var opacity = (1 - min_opacity) * level + min_opacity;\n      var rgb = this._rgba_to_rgb([graph_colour.r, graph_colour.g, graph_colour.b, 255 * opacity], [matte_colour.r, matte_colour.g, matte_colour.b]);\n      return 'rgb(' + rgb.join(',') + ')';\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Graphical overview of aligning region(s)';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'kablammo';\n    }\n  }, {\n    key: \"graphId\",\n    value: function graphId(props) {\n      return 'kablammo_' + props.query.number + '_' + props.hit.number;\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'Kablammo-' + props.query.id + '-' + props.hit.id;\n    }\n  }]);\n}();\nvar Kablammo = (0,grapher__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(Graph);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Kablammo);\n\n//# sourceURL=webpack://SequenceServer/./public/js/kablammo.js?");
 
 /***/ }),
 
@@ -159,7 +170,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _grapher__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\n/**\n * Renders Length Distribution of all hits per query\n */\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svg_container, props) {\n    _classCallCheck(this, Graph);\n    this.query = props.query;\n    this._seq_type = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.get_seq_type(props.algorithm);\n    this.svg_container = $svg_container;\n    if (props.algorithm == 'blastx') {\n      this.query_length = this.query.length / 3;\n    } else if (props.algorithm == 'tblastn') {\n      this.query_length = this.query.length * 3;\n    } else {\n      this.query_length = this.query.length;\n    }\n    this._margin = {\n      top: 30,\n      right: 25,\n      bottom: 55,\n      left: 12.5\n    };\n    this.initiate($svg_container.width(), $svg_container.height());\n  }\n  _createClass(Graph, [{\n    key: \"initiate\",\n    value: function initiate(width, height) {\n      this._width = width - this._margin.left - this._margin.right;\n      this._height = height - this._margin.top - this._margin.bottom;\n      this.svg = d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svg_container[0]).insert('svg', ':first-child').attr('width', this._width + this._margin.right + this._margin.left).attr('height', this._height + this._margin.top + this._margin.bottom).append('g').attr('transform', 'translate(' + this._margin.left + ',' + this._margin.top + ')');\n      this.hit_lengths();\n      this.define_scale_and_bins();\n      this.update_data();\n      this.draw();\n    }\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      this.draw_rectangles();\n      this.draw_query_line();\n      this.draw_axes();\n      this.setupTooltip();\n    }\n  }, {\n    key: \"define_scale_and_bins\",\n    value: function define_scale_and_bins() {\n      this._scale_x = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([0, d3__WEBPACK_IMPORTED_MODULE_0___default().max([this.query_length, d3__WEBPACK_IMPORTED_MODULE_0___default().max(this._data)]) * 1.01]).nice().range([0, this._width]);\n      this._bins = d3__WEBPACK_IMPORTED_MODULE_0___default().layout.histogram().range(this._scale_x.domain()).bins(this._scale_x.ticks(50))(this._data);\n      this._scale_y = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([0, d3__WEBPACK_IMPORTED_MODULE_0___default().max(this._bins, function (d) {\n        return d.length;\n      })]).range([this._height, 0]).nice();\n    }\n  }, {\n    key: \"hit_lengths\",\n    value: function hit_lengths() {\n      this._data = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.query.hits, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].iteratee('length'));\n    }\n  }, {\n    key: \"setupTooltip\",\n    value: function setupTooltip() {\n      this.svg_container.find('[data-toggle=\"tooltip\"]').tooltip({\n        'placement': 'top',\n        'container': 'body',\n        'html': 'true',\n        'delay': 0,\n        'white-space': 'nowrap'\n      });\n    }\n  }, {\n    key: \"setupResponsiveness\",\n    value: function setupResponsiveness() {\n      var currentWidth = $(window).width();\n      console.log('cureent ' + currentWidth);\n      var debounced_draw = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].debounce(underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function () {\n        if (currentWidth != $(window).width()) {\n          console.log('redraw initiated ' + this._height);\n          this.draw();\n          currentWidth = $(window).width();\n        }\n      }, this), 125);\n      $(window).resize(debounced_draw);\n    }\n  }, {\n    key: \"tick_formatter\",\n    value: function tick_formatter(seq_type) {\n      var ticks = this._scale_x.ticks();\n      var format = d3__WEBPACK_IMPORTED_MODULE_0___default().format('.1f');\n      var prefix = d3__WEBPACK_IMPORTED_MODULE_0___default().formatPrefix(ticks[ticks.length - 1]);\n      var suffixes = {\n        amino_acid: 'aa',\n        nucleic_acid: 'bp'\n      };\n      return function (d) {\n        if (d === 0) {\n          return;\n        }\n        if (underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].indexOf(ticks, d) >= 0) {\n          if (suffixes[seq_type] == 'aa') {\n            return d + ' ' + suffixes[seq_type];\n          } else {\n            return format(prefix.scale(d)) + ' ' + prefix.symbol + suffixes[seq_type];\n          }\n        } else {\n          return;\n        }\n      };\n    }\n  }, {\n    key: \"update_data\",\n    value: function update_data() {\n      var self = this;\n      var data2 = [];\n      this._bins.map(function (bin) {\n        var inner_data = [];\n        bin.reverse();\n        var y0 = bin.length;\n        bin.map(function (d, i) {\n          var y1 = bin.length - (i + 1);\n          var len_index = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].findIndex(self.query.hits, {\n            length: d\n          });\n          var evalue = self.query.hits[len_index].hsps[0].evalue;\n          var item = {\n            value: d,\n            id: self.query.hits[len_index].id,\n            evalue: evalue,\n            url: '#Query_' + self.query.number + '_hit_' + self.query.hits[len_index].number,\n            y0: y0,\n            y1: y0 += y1 - y0,\n            color: _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.get_colors_for_evalue(evalue, self.query.hits)\n          };\n          inner_data.push(item);\n        });\n        var item = {\n          data: inner_data,\n          x: bin.x,\n          dx: bin.dx,\n          length: bin.length\n        };\n        data2.push(item);\n      });\n      this._update_data = data2;\n    }\n  }, {\n    key: \"draw_rectangles\",\n    value: function draw_rectangles() {\n      var self = this;\n      var bar = this.svg.selectAll('.bar').data(this._update_data).enter().append('g').attr('class', 'g').attr('transform', function (d) {\n        return 'translate(' + (self._scale_x(d.x) + self._margin.left) + ',0)';\n      });\n      bar.selectAll('rect').data(function (d) {\n        return d.data;\n      }).enter().append('a').attr('xlink:href', function (i) {\n        return i.url;\n      }).append('rect').attr('class', 'bar').attr('data-toggle', 'tooltip').attr('title', function (i) {\n        return i.id + ' ' + '<br>E value: ' + _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.prettify_evalue(i.evalue) + '<br>Length: ' + i.value;\n      }).attr('x', 1).attr('y', function (i) {\n        return self._scale_y(i.y0);\n      }).attr('width', self._scale_x(this._bins[1].x) - self._scale_x(this._bins[0].x) - 1).attr('height', function (i) {\n        return self._scale_y(i.y1) - self._scale_y(i.y0);\n      }).attr('fill', function (i) {\n        return i.color;\n      });\n    }\n  }, {\n    key: \"draw_query_line\",\n    value: function draw_query_line() {\n      var query_line = this.svg.append('g').attr('class', 'query_line').attr('transform', 'translate(' + (this._margin.left + this._scale_x(this.query_length)) + ',0)');\n      query_line.append('rect').attr('x', 1).attr('class', 'bar').attr('width', 4).attr('height', this._height).style('fill', '#c74f14');\n      query_line.append('text').attr('dy', '0.75em').attr('y', -10).attr('x', 2).attr('text-anchor', 'start').text('Query').style('fill', '#000').attr('transform', 'rotate(-45)');\n    }\n  }, {\n    key: \"draw_axes\",\n    value: function draw_axes() {\n      var space, len;\n      len = this._scale_y.ticks().length;\n      if (len >= 5) {\n        space = 5;\n      } else {\n        space = len;\n      }\n      var formatter = this.tick_formatter(this._seq_type.subject_seq_type);\n      var x_axis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().scale(this._scale_x).orient('bottom').ticks(50).tickFormat(formatter);\n      var y_axis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().scale(this._scale_y).orient('left').tickValues(this._scale_y.ticks(space)).outerTickSize(0).tickFormat(function (e) {\n        if (Math.floor(e) != e) {\n          return;\n        }\n        return e;\n      });\n      var ticks = this._scale_y.ticks();\n      for (var i in ticks) {\n        if (ticks[i] % 1 != 0) {\n          y_axis.tickValues(d3__WEBPACK_IMPORTED_MODULE_0___default().range(0, d3__WEBPACK_IMPORTED_MODULE_0___default().max(this._bins, function (d) {\n            return d.length;\n          }) + 1));\n          break;\n        }\n      }\n      var self = this;\n      var xContainer = this.svg.append('g').attr('class', 'axis axis--x').attr('transform', 'translate(' + this._margin.left + ',' + this._height + ')').call(x_axis);\n      xContainer.selectAll('line').attr('y2', function (d) {\n        var ticks = self._scale_x.ticks();\n        if (underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].indexOf(ticks, d) >= 0) {\n          return 7;\n        } else {\n          return 4;\n        }\n      });\n      xContainer.selectAll('text').style('text-anchor', 'end').attr('x', '-8px').attr('y', '3px').attr('dy', '0').attr('transform', 'rotate(-90)');\n      var yContainer = this.svg.append('g').attr('class', 'axis axis--y').attr('transform', 'translate(' + this._margin.left + ',0)').call(y_axis);\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Length distribution of matching hit sequences';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'length-distribution';\n    }\n  }, {\n    key: \"collapseId\",\n    value: function collapseId(props) {\n      return 'length_' + props.query.number;\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'length-distribution-' + props.query.id;\n    }\n  }]);\n  return Graph;\n}();\nvar LengthDistribution = (0,_grapher__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(Graph);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LengthDistribution);\n\n//# sourceURL=webpack://SequenceServer/./public/js/length_distribution.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! d3 */ \"./node_modules/d3/d3.js\");\n/* harmony import */ var d3__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var grapher__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! grapher */ \"./public/js/grapher.js\");\n/* harmony import */ var _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./visualisation_helpers */ \"./public/js/visualisation_helpers.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\n\n\n\n/**\n * Renders Length Distribution of all hits per query\n */\nvar Graph = /*#__PURE__*/function () {\n  function Graph($svg_container, props) {\n    _classCallCheck(this, Graph);\n    this.query = props.query;\n    this._seq_type = _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.get_seq_type(props.algorithm);\n    this.svg_container = $svg_container;\n    if (props.algorithm == 'blastx') {\n      this.query_length = this.query.length / 3;\n    } else if (props.algorithm == 'tblastn') {\n      this.query_length = this.query.length * 3;\n    } else {\n      this.query_length = this.query.length;\n    }\n    this._margin = {\n      top: 30,\n      right: 25,\n      bottom: 55,\n      left: 12.5\n    };\n    this.initiate($svg_container.width(), $svg_container.height());\n  }\n  return _createClass(Graph, [{\n    key: \"initiate\",\n    value: function initiate(width, height) {\n      this._width = width - this._margin.left - this._margin.right;\n      this._height = height - this._margin.top - this._margin.bottom;\n      this.svg = d3__WEBPACK_IMPORTED_MODULE_0___default().select(this.svg_container[0]).insert('svg', ':first-child').attr('width', this._width + this._margin.right + this._margin.left).attr('height', this._height + this._margin.top + this._margin.bottom).append('g').attr('transform', 'translate(' + this._margin.left + ',' + this._margin.top + ')');\n      this.hit_lengths();\n      this.define_scale_and_bins();\n      this.update_data();\n      this.draw();\n    }\n  }, {\n    key: \"draw\",\n    value: function draw() {\n      this.draw_rectangles();\n      this.draw_query_line();\n      this.draw_axes();\n      this.setupTooltip();\n    }\n  }, {\n    key: \"define_scale_and_bins\",\n    value: function define_scale_and_bins() {\n      this._scale_x = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([0, d3__WEBPACK_IMPORTED_MODULE_0___default().max([this.query_length, d3__WEBPACK_IMPORTED_MODULE_0___default().max(this._data)]) * 1.01]).nice().range([0, this._width]);\n      this._bins = d3__WEBPACK_IMPORTED_MODULE_0___default().layout.histogram().range(this._scale_x.domain()).bins(this._scale_x.ticks(50))(this._data);\n      this._scale_y = d3__WEBPACK_IMPORTED_MODULE_0___default().scale.linear().domain([0, d3__WEBPACK_IMPORTED_MODULE_0___default().max(this._bins, function (d) {\n        return d.length;\n      })]).range([this._height, 0]).nice();\n    }\n  }, {\n    key: \"hit_lengths\",\n    value: function hit_lengths() {\n      this._data = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.query.hits, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].iteratee('length'));\n    }\n  }, {\n    key: \"setupTooltip\",\n    value: function setupTooltip() {\n      this.svg_container.find('[data-toggle=\"tooltip\"]').tooltip({\n        'placement': 'top',\n        'container': 'body',\n        'html': 'true',\n        'delay': 0,\n        'white-space': 'nowrap'\n      });\n    }\n  }, {\n    key: \"setupResponsiveness\",\n    value: function setupResponsiveness() {\n      var currentWidth = $(window).width();\n      console.log('cureent ' + currentWidth);\n      var debounced_draw = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].debounce(underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function () {\n        if (currentWidth != $(window).width()) {\n          console.log('redraw initiated ' + this._height);\n          this.draw();\n          currentWidth = $(window).width();\n        }\n      }, this), 125);\n      $(window).resize(debounced_draw);\n    }\n  }, {\n    key: \"tick_formatter\",\n    value: function tick_formatter(seq_type) {\n      var ticks = this._scale_x.ticks();\n      var format = d3__WEBPACK_IMPORTED_MODULE_0___default().format('.1f');\n      var prefix = d3__WEBPACK_IMPORTED_MODULE_0___default().formatPrefix(ticks[ticks.length - 1]);\n      var suffixes = {\n        amino_acid: 'aa',\n        nucleic_acid: 'bp'\n      };\n      return function (d) {\n        if (d === 0) {\n          return;\n        }\n        if (underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].indexOf(ticks, d) >= 0) {\n          if (suffixes[seq_type] == 'aa') {\n            return d + ' ' + suffixes[seq_type];\n          } else {\n            return format(prefix.scale(d)) + ' ' + prefix.symbol + suffixes[seq_type];\n          }\n        } else {\n          return;\n        }\n      };\n    }\n  }, {\n    key: \"update_data\",\n    value: function update_data() {\n      var self = this;\n      var data2 = [];\n      this._bins.map(function (bin) {\n        var inner_data = [];\n        bin.reverse();\n        var y0 = bin.length;\n        bin.map(function (d, i) {\n          var y1 = bin.length - (i + 1);\n          var len_index = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].findIndex(self.query.hits, {\n            length: d\n          });\n          var evalue = self.query.hits[len_index].hsps[0].evalue;\n          var item = {\n            value: d,\n            id: self.query.hits[len_index].id,\n            evalue: evalue,\n            url: '#Query_' + self.query.number + '_hit_' + self.query.hits[len_index].number,\n            y0: y0,\n            y1: y0 += y1 - y0,\n            color: _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.get_colors_for_evalue(evalue, self.query.hits)\n          };\n          inner_data.push(item);\n        });\n        var item = {\n          data: inner_data,\n          x: bin.x,\n          dx: bin.dx,\n          length: bin.length\n        };\n        data2.push(item);\n      });\n      this._update_data = data2;\n    }\n  }, {\n    key: \"draw_rectangles\",\n    value: function draw_rectangles() {\n      var self = this;\n      var bar = this.svg.selectAll('.bar').data(this._update_data).enter().append('g').attr('class', 'g').attr('transform', function (d) {\n        return 'translate(' + (self._scale_x(d.x) + self._margin.left) + ',0)';\n      });\n      bar.selectAll('rect').data(function (d) {\n        return d.data;\n      }).enter().append('a').attr('xlink:href', function (i) {\n        return i.url;\n      }).append('rect').attr('class', 'bar').attr('data-toggle', 'tooltip').attr('title', function (i) {\n        return i.id + ' ' + '<br>E value: ' + _visualisation_helpers__WEBPACK_IMPORTED_MODULE_3__.prettify_evalue(i.evalue) + '<br>Length: ' + i.value;\n      }).attr('x', 1).attr('y', function (i) {\n        return self._scale_y(i.y0);\n      }).attr('width', self._scale_x(this._bins[1].x) - self._scale_x(this._bins[0].x) - 1).attr('height', function (i) {\n        return self._scale_y(i.y1) - self._scale_y(i.y0);\n      }).attr('fill', function (i) {\n        return i.color;\n      });\n    }\n  }, {\n    key: \"draw_query_line\",\n    value: function draw_query_line() {\n      var query_line = this.svg.append('g').attr('class', 'query_line').attr('transform', 'translate(' + (this._margin.left + this._scale_x(this.query_length)) + ',0)');\n      query_line.append('rect').attr('x', 1).attr('class', 'bar').attr('width', 4).attr('height', this._height).style('fill', '#c74f14');\n      query_line.append('text').attr('dy', '0.75em').attr('y', -10).attr('x', 2).attr('text-anchor', 'start').text('Query').style('fill', '#000').attr('transform', 'rotate(-45)');\n    }\n  }, {\n    key: \"draw_axes\",\n    value: function draw_axes() {\n      var space, len;\n      len = this._scale_y.ticks().length;\n      if (len >= 5) {\n        space = 5;\n      } else {\n        space = len;\n      }\n      var formatter = this.tick_formatter(this._seq_type.subject_seq_type);\n      var x_axis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().scale(this._scale_x).orient('bottom').ticks(50).tickFormat(formatter);\n      var y_axis = d3__WEBPACK_IMPORTED_MODULE_0___default().svg.axis().scale(this._scale_y).orient('left').tickValues(this._scale_y.ticks(space)).outerTickSize(0).tickFormat(function (e) {\n        if (Math.floor(e) != e) {\n          return;\n        }\n        return e;\n      });\n      var ticks = this._scale_y.ticks();\n      for (var i in ticks) {\n        if (ticks[i] % 1 != 0) {\n          y_axis.tickValues(d3__WEBPACK_IMPORTED_MODULE_0___default().range(0, d3__WEBPACK_IMPORTED_MODULE_0___default().max(this._bins, function (d) {\n            return d.length;\n          }) + 1));\n          break;\n        }\n      }\n      var self = this;\n      var xContainer = this.svg.append('g').attr('class', 'axis axis--x').attr('transform', 'translate(' + this._margin.left + ',' + this._height + ')').call(x_axis);\n      xContainer.selectAll('line').attr('y2', function (d) {\n        var ticks = self._scale_x.ticks();\n        if (underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].indexOf(ticks, d) >= 0) {\n          return 7;\n        } else {\n          return 4;\n        }\n      });\n      xContainer.selectAll('text').style('text-anchor', 'end').attr('x', '-8px').attr('y', '3px').attr('dy', '0').attr('transform', 'rotate(-90)');\n      this.svg.append('g').attr('class', 'axis axis--y').attr('transform', 'translate(' + this._margin.left + ',0)').call(y_axis);\n    }\n  }], [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return true;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return 'Length distribution of matching hit sequences';\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return 'length-distribution';\n    }\n  }, {\n    key: \"graphId\",\n    value: function graphId(props) {\n      return 'length_' + props.query.number;\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(props) {\n      return 'length-distribution-' + props.query.id;\n    }\n  }]);\n}();\nvar LengthDistribution = (0,grapher__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(Graph);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LengthDistribution);\n\n//# sourceURL=webpack://SequenceServer/./public/js/length_distribution.js?");
 
 /***/ }),
 
@@ -181,7 +192,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar DownloadLinks = /*#__PURE__*/function (_React$Component) {\n  _inherits(DownloadLinks, _React$Component);\n  var _super = _createSuper(DownloadLinks);\n  function DownloadLinks() {\n    _classCallCheck(this, DownloadLinks);\n    return _super.apply(this, arguments);\n  }\n  _createClass(DownloadLinks, [{\n    key: \"render\",\n    value: function render() {}\n  }]);\n  return DownloadLinks;\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DownloadLinks);\n\n//# sourceURL=webpack://SequenceServer/./public/js/null_plugins/download_links.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nvar DownloadLinks = /*#__PURE__*/function (_React$Component) {\n  function DownloadLinks() {\n    _classCallCheck(this, DownloadLinks);\n    return _callSuper(this, DownloadLinks, arguments);\n  }\n  _inherits(DownloadLinks, _React$Component);\n  return _createClass(DownloadLinks, [{\n    key: \"render\",\n    value: function render() {}\n  }]);\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DownloadLinks);\n\n//# sourceURL=webpack://SequenceServer/./public/js/null_plugins/download_links.js?");
+
+/***/ }),
+
+/***/ "./public/js/null_plugins/grapher/histogram.js":
+/*!*****************************************************!*\
+  !*** ./public/js/null_plugins/grapher/histogram.js ***!
+  \*****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var grapher__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! grapher */ \"./public/js/grapher.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar Graph = /*#__PURE__*/function () {\n  function Graph() {\n    _classCallCheck(this, Graph);\n  }\n  return _createClass(Graph, null, [{\n    key: \"canCollapse\",\n    value: function canCollapse() {\n      return false;\n    }\n  }, {\n    key: \"name\",\n    value: function name() {\n      return null;\n    }\n  }, {\n    key: \"className\",\n    value: function className() {\n      return null;\n    }\n  }, {\n    key: \"dataName\",\n    value: function dataName(_props) {\n      return null;\n    }\n  }, {\n    key: \"graphId\",\n    value: function graphId() {\n      return null;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,grapher__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(Graph));\n\n//# sourceURL=webpack://SequenceServer/./public/js/null_plugins/grapher/histogram.js?");
 
 /***/ }),
 
@@ -192,7 +214,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nvar HitButtons = /*#__PURE__*/function () {\n  function HitButtons(hit) {\n    _classCallCheck(this, HitButtons);\n    this.hit = hit;\n  }\n  _createClass(HitButtons, [{\n    key: \"buttons\",\n    value: function buttons() {\n      return [];\n    }\n  }]);\n  return HitButtons;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HitButtons);\n\n//# sourceURL=webpack://SequenceServer/./public/js/null_plugins/hit_buttons.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nvar HitButtons = /*#__PURE__*/function () {\n  function HitButtons(hit) {\n    _classCallCheck(this, HitButtons);\n    this.hit = hit;\n  }\n  return _createClass(HitButtons, [{\n    key: \"buttons\",\n    value: function buttons() {\n      return [];\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HitButtons);\n\n//# sourceURL=webpack://SequenceServer/./public/js/null_plugins/hit_buttons.js?");
 
 /***/ }),
 
@@ -203,7 +225,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nvar ReportPlugins = /*#__PURE__*/function () {\n  function ReportPlugins(parent) {\n    _classCallCheck(this, ReportPlugins);\n    this.parent = parent;\n  }\n  _createClass(ReportPlugins, [{\n    key: \"init\",\n    value: function init() {}\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate(_prevProps, _prevState) {}\n  }, {\n    key: \"queryResults\",\n    value: function queryResults(_query) {\n      return [];\n    }\n  }]);\n  return ReportPlugins;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ReportPlugins);\n\n//# sourceURL=webpack://SequenceServer/./public/js/null_plugins/report_plugins.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var histogram__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! histogram */ \"./public/js/null_plugins/grapher/histogram.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\n\nvar ReportPlugins = /*#__PURE__*/function () {\n  function ReportPlugins(parent) {\n    _classCallCheck(this, ReportPlugins);\n    this.parent = parent;\n  }\n  return _createClass(ReportPlugins, [{\n    key: \"init\",\n    value: function init() {}\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate(_prevProps, _prevState) {}\n  }, {\n    key: \"queryResults\",\n    value: function queryResults(_query) {\n      return [];\n    }\n  }, {\n    key: \"generateStats\",\n    value: function generateStats() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(histogram__WEBPACK_IMPORTED_MODULE_0__[\"default\"], {});\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ReportPlugins);\n\n//# sourceURL=webpack://SequenceServer/./public/js/null_plugins/report_plugins.js?");
 
 /***/ }),
 
@@ -214,7 +236,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ReportQuery: () => (/* binding */ ReportQuery),\n/* harmony export */   SearchQueryWidget: () => (/* binding */ SearchQueryWidget)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _hits_overview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hits_overview */ \"./public/js/hits_overview.js\");\n/* harmony import */ var _length_distribution__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./length_distribution */ \"./public/js/length_distribution.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* harmony import */ var _fastq_to_fasta__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./fastq_to_fasta */ \"./public/js/fastq_to_fasta.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n // length distribution of hits\n\n\n\n/**\n * Query component displays query defline, graphical overview, length\n * distribution, and hits table.\n */\n\n\nvar ReportQuery = /*#__PURE__*/function (_Component) {\n  _inherits(ReportQuery, _Component);\n  var _super = _createSuper(ReportQuery);\n  function ReportQuery() {\n    _classCallCheck(this, ReportQuery);\n    return _super.apply(this, arguments);\n  }\n  _createClass(ReportQuery, [{\n    key: \"shouldComponentUpdate\",\n    value:\n    // Each update cycle will cause all previous queries to be re-rendered.\n    // We avoid that by implementing shouldComponentUpdate life-cycle hook.\n    // The trick is to simply check if the components has recieved props\n    // before.\n    function shouldComponentUpdate() {\n      // If the component has received props before, query property will\n      // be set on it. If it is, we return false so that the component\n      // is not re-rendered. If the query property is not set, we return\n      // true: this must be the first time react is trying to render the\n      // component.\n      return !this.props.query;\n    }\n    // Kind of public API //\n\n    /**\n     * Returns the id of query.\n     */\n  }, {\n    key: \"domID\",\n    value: function domID() {\n      return 'Query_' + this.props.query.number;\n    }\n  }, {\n    key: \"queryLength\",\n    value: function queryLength() {\n      return this.props.query.length;\n    }\n\n    /**\n     * Returns number of hits.\n     */\n  }, {\n    key: \"numhits\",\n    value: function numhits() {\n      return this.props.query.hits.length;\n    }\n  }, {\n    key: \"headerJSX\",\n    value: function headerJSX() {\n      var meta = \"length: \".concat(this.queryLength().toLocaleString());\n      if (this.props.showQueryCrumbs) {\n        meta = \"query \".concat(this.props.query.number, \", \") + meta;\n      }\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"section-header\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"h3\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"strong\", {\n            children: [\"Query=\\xA0\", this.props.query.id]\n          }), \"\\xA0\", this.props.query.title]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n          className: \"label label-reset pos-label\",\n          children: meta\n        })]\n      });\n    }\n  }, {\n    key: \"hitsListJSX\",\n    value: function hitsListJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"section-content\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_hits_overview__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n          query: this.props.query,\n          program: this.props.program,\n          collapsed: this.props.veryBig\n        }, 'GO_' + this.props.query.number), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_length_distribution__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n          query: this.props.query,\n          algorithm: this.props.program,\n          collapsed: \"true\"\n        }, 'LD_' + this.props.query.id), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(HitsTable, {\n          query: this.props.query,\n          imported_xml: this.props.imported_xml\n        }, 'HT_' + this.props.query.number)]\n      });\n    }\n  }, {\n    key: \"noHitsJSX\",\n    value: function noHitsJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n        className: \"section-content\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"strong\", {\n          children: \" ****** No BLAST hits found ****** \"\n        })\n      });\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"resultn\",\n        id: this.domID(),\n        \"data-query-len\": this.props.query.length,\n        \"data-algorithm\": this.props.program,\n        children: [this.headerJSX(), this.numhits() && this.hitsListJSX() || this.noHitsJSX()]\n      });\n    }\n  }]);\n  return ReportQuery;\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n/**\n * Query widget for Search component.\n */\nvar SearchQueryWidget = /*#__PURE__*/function (_Component2) {\n  _inherits(SearchQueryWidget, _Component2);\n  var _super2 = _createSuper(SearchQueryWidget);\n  function SearchQueryWidget(props) {\n    var _this;\n    _classCallCheck(this, SearchQueryWidget);\n    _this = _super2.call(this, props);\n    _this.state = {\n      value: $('input#input_sequence').val() || ''\n    };\n    _this.value = _this.value.bind(_assertThisInitialized(_this));\n    _this.clear = _this.clear.bind(_assertThisInitialized(_this));\n    _this.focus = _this.focus.bind(_assertThisInitialized(_this));\n    _this.isEmpty = _this.isEmpty.bind(_assertThisInitialized(_this));\n    _this.textarea = _this.textarea.bind(_assertThisInitialized(_this));\n    _this.controls = _this.controls.bind(_assertThisInitialized(_this));\n    _this.handleInput = _this.handleInput.bind(_assertThisInitialized(_this));\n    _this.hideShowButton = _this.hideShowButton.bind(_assertThisInitialized(_this));\n    _this.indicateError = _this.indicateError.bind(_assertThisInitialized(_this));\n    _this.indicateNormal = _this.indicateNormal.bind(_assertThisInitialized(_this));\n    _this.type = _this.type.bind(_assertThisInitialized(_this));\n    _this.guessSequenceType = _this.guessSequenceType.bind(_assertThisInitialized(_this));\n    _this.preProcessSequence = _this.preProcessSequence.bind(_assertThisInitialized(_this));\n    _this.notify = _this.notify.bind(_assertThisInitialized(_this));\n    _this.textareaRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    _this.controlsRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this;\n  }\n\n  // LIFECYCLE Methods\n  _createClass(SearchQueryWidget, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      $('body').click(function () {\n        $('.notifications .active').hide('drop', {\n          direction: 'up'\n        }).removeClass('active');\n      });\n    }\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate() {\n      this.hideShowButton();\n      this.preProcessSequence();\n      var type = this.type();\n      if (!type || type !== this._type) {\n        this._type = type;\n        this.notify(type);\n        this.props.onSequenceTypeChanged(type);\n      }\n    }\n\n    // Kind of public API. //\n\n    /**\n     * Returns query sequence if no argument is provided (or null or undefined\n     * is provided as argument). Otherwise, sets query sequence to the given\n     * value and returns `this`.\n     *\n     * Default/initial state of query sequence is an empty string. Caller must\n     * explicitly provide empty string as argument to \"reset\" query sequence.\n     */\n  }, {\n    key: \"value\",\n    value: function value(val) {\n      if (val == null) {\n        // i.e., val is null or undefined\n        return this.state.value;\n      } else {\n        this.setState({\n          value: val\n        });\n        return this;\n      }\n    }\n\n    /**\n     * Clears textarea. Returns `this`.\n     *\n     * Clearing textarea also causes it to be focussed.\n     */\n  }, {\n    key: \"clear\",\n    value: function clear() {\n      return this.value('').focus();\n    }\n\n    /**\n     * Focuses textarea. Returns `this`.\n     */\n  }, {\n    key: \"focus\",\n    value: function focus() {\n      this.textarea().focus();\n      return this;\n    }\n\n    /**\n     * Returns true if query is absent ('', undefined, null), false otherwise.\n     */\n  }, {\n    key: \"isEmpty\",\n    value: function isEmpty() {\n      return !this.value();\n    }\n\n    // Internal helpers. //\n  }, {\n    key: \"textarea\",\n    value: function textarea() {\n      return $(this.textareaRef.current);\n    }\n  }, {\n    key: \"controls\",\n    value: function controls() {\n      return $(this.controlsRef.current);\n    }\n  }, {\n    key: \"handleInput\",\n    value: function handleInput(evt) {\n      this.value(evt.target.value);\n    }\n\n    /**\n     * Hides or shows 'clear sequence' button.\n     *\n     * Rendering the 'clear sequence' button takes into account presence or\n     * absence of a scrollbar.\n     *\n     * Called by `componentDidUpdate`.\n     */\n  }, {\n    key: \"hideShowButton\",\n    value: function hideShowButton() {\n      if (!this.isEmpty()) {\n        // Calculation below is based on -\n        // http://chris-spittles.co.uk/jquery-calculate-scrollbar-width/\n        // FIXME: can reflow be avoided here?\n        var textareaNode = this.textarea()[0];\n        var sequenceControlsRight = textareaNode.offsetWidth - textareaNode.clientWidth;\n        this.controls().css('right', sequenceControlsRight + 17);\n        this.controls().removeClass('hidden');\n      } else {\n        // FIXME: what are lines 1, 2, & 3 doing here?\n        this.textarea().parent().removeClass('has-error');\n        this.$sequenceFile = $('#sequence-file');\n        this.$sequenceFile.empty();\n        this.controls().addClass('hidden');\n      }\n    }\n\n    /**\n     * Put red border around textarea.\n     */\n  }, {\n    key: \"indicateError\",\n    value: function indicateError() {\n      this.textarea().parent().addClass('has-error');\n    }\n\n    /**\n     * Put normal blue border around textarea.\n     */\n  }, {\n    key: \"indicateNormal\",\n    value: function indicateNormal() {\n      this.textarea().parent().removeClass('has-error');\n    }\n\n    /**\n     * Returns type of the query sequence (nucleotide, protein, mixed).\n     *\n     * Query widget supports executing a callback when the query type changes.\n     * Components interested in query type should register a callback instead\n     * of directly calling this method.\n     */\n  }, {\n    key: \"type\",\n    value: function type() {\n      var sequence = this.value().trim();\n      // FASTQ detected, but we don't know if conversion has succeeded yet\n      // will notify separately if it does\n      if (sequence.startsWith('@')) {\n        return undefined;\n      }\n      var sequences = sequence.split(/>.*/);\n      var type, tmp;\n      for (var i = 0; i < sequences.length; i++) {\n        tmp = this.guessSequenceType(sequences[i]);\n\n        // could not guess the sequence type; try the next sequence\n        if (!tmp) {\n          continue;\n        }\n        if (!type) {\n          // successfully guessed the type of atleast one sequence\n          type = tmp;\n        } else if (tmp !== type) {\n          // user has mixed different type of sequences\n          return 'mixed';\n        }\n      }\n      return type;\n    }\n  }, {\n    key: \"preProcessSequence\",\n    value: function preProcessSequence() {\n      var sequence = this.value();\n      var updatedSequence = (0,_fastq_to_fasta__WEBPACK_IMPORTED_MODULE_5__.fastqToFasta)(sequence);\n      if (sequence !== updatedSequence) {\n        this.value(updatedSequence);\n        this.notify('fastq');\n      }\n    }\n\n    /**\n     * Guesses and returns the type of the given sequence (nucleotide,\n     * protein).\n     */\n  }, {\n    key: \"guessSequenceType\",\n    value: function guessSequenceType(sequence) {\n      // remove 'noisy' characters\n      sequence = sequence.replace(/[^A-Z]/gi, ''); // non-letter characters\n      sequence = sequence.replace(/[NX]/gi, ''); // ambiguous  characters\n\n      // can't determine the type of ultrashort queries\n      if (sequence.length < 10) {\n        return undefined;\n      }\n\n      // count the number of putative NA\n      var putative_NA_count = 0;\n      for (var i = 0; i < sequence.length; i++) {\n        if (sequence[i].match(/[ACGTU]/i)) {\n          putative_NA_count += 1;\n        }\n      }\n      var threshold = 0.9 * sequence.length;\n      return putative_NA_count > threshold ? 'nucleotide' : 'protein';\n    }\n  }, {\n    key: \"notify\",\n    value: function notify(type) {\n      this.indicateNormal();\n      clearTimeout(this.notification_timeout);\n      // $('.notifications .active').hide().removeClass('active');\n\n      if (type) {\n        $('#' + type + '-sequence-notification').show('drop', {\n          direction: 'up'\n        }).addClass('active');\n        this.notification_timeout = setTimeout(function () {\n          $('.notifications .active').hide('drop', {\n            direction: 'up'\n          }).removeClass('active');\n        }, 5000);\n        if (type === 'mixed') {\n          this.indicateError();\n        }\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"col-md-12\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"sequence\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"textarea\", {\n            id: \"sequence\",\n            ref: this.textareaRef,\n            className: \"form-control text-monospace\",\n            name: \"sequence\",\n            value: this.state.value,\n            placeholder: \"Paste query sequence(s) or drag file containing query sequence(s) in FASTA format here ...\",\n            spellCheck: \"false\",\n            autoFocus: true,\n            onChange: this.handleInput\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"hidden\",\n          style: {\n            position: 'absolute',\n            top: '4px',\n            right: '19px'\n          },\n          ref: this.controlsRef,\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"button\", {\n            type: \"button\",\n            className: \"btn btn-sm btn-default\",\n            id: \"btn-sequence-clear\",\n            title: \"Clear query sequence(s).\",\n            onClick: this.clear,\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n              id: \"sequence-file\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n              className: \"fa fa-times\"\n            })]\n          })\n        })]\n      });\n    }\n  }]);\n  return SearchQueryWidget;\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n/**\n * Renders summary of all hits per query in a tabular form.\n */\nvar HitsTable = /*#__PURE__*/function (_Component3) {\n  _inherits(HitsTable, _Component3);\n  var _super3 = _createSuper(HitsTable);\n  function HitsTable(props) {\n    _classCallCheck(this, HitsTable);\n    return _super3.call(this, props);\n  }\n  _createClass(HitsTable, [{\n    key: \"render\",\n    value: function render() {\n      var hasName = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].every(this.props.query.hits, function (hit) {\n        return hit.sciname !== '';\n      });\n\n      // Width of sequence column is 55% when species name is not shown and\n      // query coverage is.\n      var seqwidth = 55;\n      // If we are going to show species name, then reduce the width of\n      // sequence column by the width of species column.\n      if (hasName) seqwidth -= 15;\n      // If we are not going to show query coverage (i.e. for imported XML),\n      // then increase the width of sequence column by the width of coverage\n      // column.\n      if (this.props.imported_xml) seqwidth += 15;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"table-hit-overview\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"h4\", {\n          className: \"caption\",\n          \"data-toggle\": \"collapse\",\n          \"data-target\": '#Query_' + this.props.query.number + 'HT_' + this.props.query.number,\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n            className: \"fa fa-minus-square-o\"\n          }), \"\\xA0\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            children: \"Hit sequences producing significant alignments\"\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"collapsed in\",\n          id: 'Query_' + this.props.query.number + 'HT_' + this.props.query.number,\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"table\", {\n            className: \"table table-hover table-condensed tabular-view \",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"thead\", {\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"tr\", {\n                children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"th\", {\n                  className: \"text-left\",\n                  children: \"#\"\n                }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"th\", {\n                  width: \"\".concat(seqwidth, \"%\"),\n                  children: \"Similar sequences\"\n                }), hasName && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"th\", {\n                  width: \"15%\",\n                  className: \"text-left\",\n                  children: \"Species\"\n                }), !this.props.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"th\", {\n                  width: \"15%\",\n                  className: \"text-right\",\n                  children: \"Query coverage (%)\"\n                }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"th\", {\n                  width: \"10%\",\n                  className: \"text-right\",\n                  children: \"Total score\"\n                }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"th\", {\n                  width: \"10%\",\n                  className: \"text-right\",\n                  children: \"E value\"\n                }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"th\", {\n                  width: \"10%\",\n                  className: \"text-right\",\n                  children: \"Identity (%)\"\n                })]\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"tbody\", {\n              children: underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.query.hits, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (hit) {\n                return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"tr\", {\n                  children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"td\", {\n                    className: \"text-left\",\n                    children: hit.number + '.'\n                  }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"td\", {\n                    className: \"nowrap-ellipsis\",\n                    title: \"\".concat(hit.id, \" \").concat(hit.title),\n                    \"data-toggle\": \"tooltip\",\n                    \"data-placement\": \"left\",\n                    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n                      href: '#Query_' + this.props.query.number + '_hit_' + hit.number,\n                      className: \"btn-link\",\n                      children: [hit.id, \" \", hit.title]\n                    })\n                  }), hasName && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"td\", {\n                    className: \"nowrap-ellipsis\",\n                    title: hit.sciname,\n                    \"data-toggle\": \"tooltip\",\n                    \"data-placement\": \"top\",\n                    children: hit.sciname\n                  }), !this.props.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"td\", {\n                    className: \"text-right\",\n                    children: hit.qcovs\n                  }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"td\", {\n                    className: \"text-right\",\n                    children: hit.total_score\n                  }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"td\", {\n                    className: \"text-right\",\n                    children: _utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inExponential(hit.hsps[0].evalue)\n                  }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"td\", {\n                    className: \"text-right\",\n                    children: _utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(hit.hsps[0].identity, hit.hsps[0].length)\n                  })]\n                }, hit.number);\n              }, this))\n            })]\n          })\n        })]\n      });\n    }\n  }]);\n  return HitsTable;\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n//# sourceURL=webpack://SequenceServer/./public/js/query.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ReportQuery: () => (/* binding */ ReportQuery),\n/* harmony export */   SearchQueryWidget: () => (/* binding */ SearchQueryWidget)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _hits_overview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hits_overview */ \"./public/js/hits_overview.js\");\n/* harmony import */ var _length_distribution__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./length_distribution */ \"./public/js/length_distribution.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./public/js/utils.js\");\n/* harmony import */ var _fastq_to_fasta__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./fastq_to_fasta */ \"./public/js/fastq_to_fasta.js\");\n/* harmony import */ var _collapse_preferences__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./collapse_preferences */ \"./public/js/collapse_preferences.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n // length distribution of hits\n\n\n\n\n/**\n * Query component displays query defline, graphical overview, length\n * distribution, and hits table.\n */\n\nvar ReportQuery = /*#__PURE__*/function (_Component) {\n  function ReportQuery() {\n    _classCallCheck(this, ReportQuery);\n    return _callSuper(this, ReportQuery, arguments);\n  }\n  _inherits(ReportQuery, _Component);\n  return _createClass(ReportQuery, [{\n    key: \"shouldComponentUpdate\",\n    value:\n    // Each update cycle will cause all previous queries to be re-rendered.\n    // We avoid that by implementing shouldComponentUpdate life-cycle hook.\n    // The trick is to simply check if the components has recieved props\n    // before.\n    function shouldComponentUpdate() {\n      // If the component has received props before, query property will\n      // be set on it. If it is, we return false so that the component\n      // is not re-rendered. If the query property is not set, we return\n      // true: this must be the first time react is trying to render the\n      // component.\n      return !this.props.query;\n    }\n    // Kind of public API //\n\n    /**\n     * Returns the id of query.\n     */\n  }, {\n    key: \"domID\",\n    value: function domID() {\n      return 'Query_' + this.props.query.number;\n    }\n  }, {\n    key: \"queryLength\",\n    value: function queryLength() {\n      return this.props.query.length;\n    }\n\n    /**\n     * Returns number of hits.\n     */\n  }, {\n    key: \"numhits\",\n    value: function numhits() {\n      return this.props.query.hits.length;\n    }\n  }, {\n    key: \"headerJSX\",\n    value: function headerJSX() {\n      var meta = \"length: \".concat(this.queryLength().toLocaleString());\n      if (this.props.showQueryCrumbs) {\n        meta = \"query \".concat(this.props.query.number, \", \") + meta;\n      }\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n        className: \"section-header\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"h3\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"strong\", {\n            children: [\"Query=\\xA0\", this.props.query.id]\n          }), \"\\xA0\", this.props.query.title]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n          className: \"label label-reset pos-label\",\n          children: meta\n        })]\n      });\n    }\n  }, {\n    key: \"hitsListJSX\",\n    value: function hitsListJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n        className: \"section-content\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_hits_overview__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n          query: this.props.query,\n          program: this.props.program,\n          collapsed: this.props.veryBig\n        }, 'GO_' + this.props.query.number), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_length_distribution__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n          query: this.props.query,\n          algorithm: this.props.program\n        }, 'LD_' + this.props.query.id), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(HitsTable, {\n          query: this.props.query,\n          imported_xml: this.props.imported_xml\n        }, 'HT_' + this.props.query.number)]\n      });\n    }\n  }, {\n    key: \"noHitsJSX\",\n    value: function noHitsJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n        className: \"section-content\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"strong\", {\n          children: \" ****** No BLAST hits found ****** \"\n        })\n      });\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n        className: \"resultn\",\n        id: this.domID(),\n        \"data-query-len\": this.props.query.length,\n        \"data-algorithm\": this.props.program,\n        children: [this.headerJSX(), this.numhits() && this.hitsListJSX() || this.noHitsJSX()]\n      });\n    }\n  }]);\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n/**\n * Query widget for Search component.\n */\nvar SearchQueryWidget = /*#__PURE__*/function (_Component2) {\n  function SearchQueryWidget(props) {\n    var _this2;\n    _classCallCheck(this, SearchQueryWidget);\n    _this2 = _callSuper(this, SearchQueryWidget, [props]);\n    _this2.state = {\n      value: $('input#input_sequence').val() || ''\n    };\n    _this2.value = _this2.value.bind(_this2);\n    _this2.clear = _this2.clear.bind(_this2);\n    _this2.focus = _this2.focus.bind(_this2);\n    _this2.isEmpty = _this2.isEmpty.bind(_this2);\n    _this2.textarea = _this2.textarea.bind(_this2);\n    _this2.controls = _this2.controls.bind(_this2);\n    _this2.handleInput = _this2.handleInput.bind(_this2);\n    _this2.hideShowButton = _this2.hideShowButton.bind(_this2);\n    _this2.indicateError = _this2.indicateError.bind(_this2);\n    _this2.indicateNormal = _this2.indicateNormal.bind(_this2);\n    _this2.type = _this2.type.bind(_this2);\n    _this2.guessSequenceType = _this2.guessSequenceType.bind(_this2);\n    _this2.preProcessSequence = _this2.preProcessSequence.bind(_this2);\n    _this2.notify = _this2.notify.bind(_this2);\n    _this2.textareaRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    _this2.controlsRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)();\n    return _this2;\n  }\n\n  // LIFECYCLE Methods\n  _inherits(SearchQueryWidget, _Component2);\n  return _createClass(SearchQueryWidget, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      $('body').click(function () {\n        $('[data-notifications] [data-role=notification].active').hide('drop', {\n          direction: 'up'\n        }).removeClass('active');\n      });\n    }\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate() {\n      this.hideShowButton();\n      this.preProcessSequence();\n      this.props.onSequenceChanged(this.residuesCount());\n      var type = this.type();\n      if (!type || type !== this._type) {\n        this._type = type;\n        this.notify(type);\n        this.props.onSequenceTypeChanged(type);\n      }\n    }\n\n    // Kind of public API. //\n\n    /**\n     * Returns query sequence if no argument is provided (or null or undefined\n     * is provided as argument). Otherwise, sets query sequence to the given\n     * value and returns `this`.\n     *\n     * Default/initial state of query sequence is an empty string. Caller must\n     * explicitly provide empty string as argument to \"reset\" query sequence.\n     */\n  }, {\n    key: \"value\",\n    value: function value(val) {\n      if (val == null) {\n        // i.e., val is null or undefined\n        return this.state.value;\n      } else {\n        this.setState({\n          value: val\n        });\n        return this;\n      }\n    }\n  }, {\n    key: \"residuesCount\",\n    value: function residuesCount() {\n      var sequence = this.value();\n      var lines = sequence.split('\\n');\n      var residuesCount = lines.reduce(function (count, line) {\n        if (!line.startsWith('>')) {\n          return count + line.length;\n        }\n        return count;\n      }, 0);\n      return residuesCount;\n    }\n\n    /**\n     * Clears textarea. Returns `this`.\n     *\n     * Clearing textarea also causes it to be focussed.\n     */\n  }, {\n    key: \"clear\",\n    value: function clear() {\n      return this.value('').focus();\n    }\n\n    /**\n     * Focuses textarea. Returns `this`.\n     */\n  }, {\n    key: \"focus\",\n    value: function focus() {\n      this.textarea().focus();\n      return this;\n    }\n\n    /**\n     * Returns true if query is absent ('', undefined, null), false otherwise.\n     */\n  }, {\n    key: \"isEmpty\",\n    value: function isEmpty() {\n      return !this.value();\n    }\n\n    // Internal helpers. //\n  }, {\n    key: \"textarea\",\n    value: function textarea() {\n      return $(this.textareaRef.current);\n    }\n  }, {\n    key: \"controls\",\n    value: function controls() {\n      return $(this.controlsRef.current);\n    }\n  }, {\n    key: \"handleInput\",\n    value: function handleInput(evt) {\n      this.value(evt.target.value);\n    }\n\n    /**\n     * Hides or shows 'clear sequence' button.\n     *\n     * Rendering the 'clear sequence' button takes into account presence or\n     * absence of a scrollbar.\n     *\n     * Called by `componentDidUpdate`.\n     */\n  }, {\n    key: \"hideShowButton\",\n    value: function hideShowButton() {\n      if (!this.isEmpty()) {\n        // Calculation below is based on -\n        // http://chris-spittles.co.uk/jquery-calculate-scrollbar-width/\n        // FIXME: can reflow be avoided here?\n        var textareaNode = this.textarea()[0];\n        var sequenceControlsRight = textareaNode.offsetWidth - textareaNode.clientWidth;\n        this.controls().css('right', sequenceControlsRight + 17);\n        this.controls().removeClass('hidden');\n      } else {\n        // FIXME: what are lines 1, 2, & 3 doing here?\n        this.textarea().parent().removeClass('has-error');\n        this.$sequenceFile = $('#sequence-file');\n        this.$sequenceFile.empty();\n        this.controls().addClass('hidden');\n      }\n    }\n\n    /**\n     * Put red border around textarea.\n     */\n  }, {\n    key: \"indicateError\",\n    value: function indicateError() {\n      this.textarea().parent().addClass('has-error');\n    }\n\n    /**\n     * Put normal blue border around textarea.\n     */\n  }, {\n    key: \"indicateNormal\",\n    value: function indicateNormal() {\n      this.textarea().parent().removeClass('has-error');\n    }\n\n    /**\n     * Returns type of the query sequence (nucleotide, protein, mixed).\n     *\n     * Query widget supports executing a callback when the query type changes.\n     * Components interested in query type should register a callback instead\n     * of directly calling this method.\n     */\n  }, {\n    key: \"type\",\n    value: function type() {\n      var sequence = this.value().trim();\n      // FASTQ detected, but we don't know if conversion has succeeded yet\n      // will notify separately if it does\n      if (sequence.startsWith('@')) {\n        return undefined;\n      }\n      var sequences = sequence.split(/>.*/);\n      var type, tmp;\n      for (var i = 0; i < sequences.length; i++) {\n        tmp = this.guessSequenceType(sequences[i]);\n\n        // could not guess the sequence type; try the next sequence\n        if (!tmp) {\n          continue;\n        }\n        if (!type) {\n          // successfully guessed the type of atleast one sequence\n          type = tmp;\n        } else if (tmp !== type) {\n          // user has mixed different type of sequences\n          return 'mixed';\n        }\n      }\n      return type;\n    }\n  }, {\n    key: \"preProcessSequence\",\n    value: function preProcessSequence() {\n      var sequence = this.value();\n      var updatedSequence = (0,_fastq_to_fasta__WEBPACK_IMPORTED_MODULE_5__.fastqToFasta)(sequence);\n      if (sequence !== updatedSequence) {\n        this.value(updatedSequence);\n        this.notify('fastq');\n      }\n    }\n\n    /**\n     * Guesses and returns the type of the given sequence (nucleotide,\n     * protein).\n     */\n  }, {\n    key: \"guessSequenceType\",\n    value: function guessSequenceType(sequence) {\n      // remove 'noisy' characters\n      sequence = sequence.replace(/[^A-Z]/gi, ''); // non-letter characters\n      sequence = sequence.replace(/[NX]/gi, ''); // ambiguous  characters\n\n      // can't determine the type of ultrashort queries\n      if (sequence.length < 10) {\n        return undefined;\n      }\n\n      // count the number of putative NA\n      var putative_NA_count = 0;\n      for (var i = 0; i < sequence.length; i++) {\n        if (sequence[i].match(/[ACGTU]/i)) {\n          putative_NA_count += 1;\n        }\n      }\n      var threshold = 0.9 * sequence.length;\n      return putative_NA_count > threshold ? 'nucleotide' : 'protein';\n    }\n  }, {\n    key: \"notify\",\n    value: function notify(type) {\n      this.indicateNormal();\n      clearTimeout(this.notification_timeout);\n      // $('[data-notifications] [data-role=notification].active').hide().removeClass('active');\n\n      if (type) {\n        $('#' + type + '-sequence-notification').show('drop', {\n          direction: 'up'\n        }).addClass('active');\n        this.notification_timeout = setTimeout(function () {\n          $('[data-notifications] [data-role=notification].active').hide('drop', {\n            direction: 'up'\n          }).removeClass('active');\n        }, 5000);\n        if (type === 'mixed') {\n          this.indicateError();\n        }\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n        className: \"relative\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n          className: \"sequence\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"textarea\", {\n            id: \"sequence\",\n            ref: this.textareaRef,\n            className: \"block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-base text-monospace\",\n            name: \"sequence\",\n            value: this.state.value,\n            rows: \"6\",\n            required: \"required\",\n            placeholder: \"Paste query sequence(s) or drag file containing query sequence(s) in FASTA format here ...\",\n            spellCheck: \"false\",\n            autoFocus: true,\n            onChange: this.handleInput\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n          className: \"hidden absolute top-2 right-2\",\n          ref: this.controlsRef,\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"button\", {\n            type: \"button\",\n            className: \"border border-gray-300 rounded bg-white hover:bg-gray-200\",\n            id: \"btn-sequence-clear\",\n            title: \"Clear query sequence(s).\",\n            onClick: this.clear,\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n              id: \"sequence-file\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"i\", {\n              className: \"fa fa-times w-6 h-6 p-1\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n              className: \"sr-only\",\n              children: \"Clear query sequence(s).\"\n            })]\n          })\n        })]\n      });\n    }\n  }]);\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n/**\n * Renders summary of all hits per query in a tabular form.\n */\nvar HitsTable = /*#__PURE__*/function (_Component3) {\n  function HitsTable(props) {\n    var _this3;\n    _classCallCheck(this, HitsTable);\n    _this3 = _callSuper(this, HitsTable, [props]);\n    _this3.name = 'Hit sequences producing significant alignments';\n    _this3.collapsePreferences = new _collapse_preferences__WEBPACK_IMPORTED_MODULE_6__[\"default\"](_this3);\n    _this3.state = {\n      collapsed: _this3.collapsePreferences.preferenceStoredAsCollapsed()\n    };\n    return _this3;\n  }\n  _inherits(HitsTable, _Component3);\n  return _createClass(HitsTable, [{\n    key: \"tableJSX\",\n    value: function tableJSX() {\n      var hasName = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].every(this.props.query.hits, function (hit) {\n        return hit.sciname !== '';\n      });\n\n      // Width of sequence column is 55% when species name is not shown and\n      // query coverage is.\n      var seqwidth = 55;\n      // If we are going to show species name, then reduce the width of\n      // sequence column by the width of species column.\n      if (hasName) seqwidth -= 15;\n      // If we are not going to show query coverage (i.e. for imported XML),\n      // then increase the width of sequence column by the width of coverage\n      // column.\n      if (this.props.imported_xml) seqwidth += 15;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"table\", {\n        className: \"table table-hover table-condensed tabular-view \",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"thead\", {\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"tr\", {\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"th\", {\n              className: \"text-left\",\n              children: \"#\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"th\", {\n              width: \"\".concat(seqwidth, \"%\"),\n              children: \"Similar sequences\"\n            }), hasName && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"th\", {\n              width: \"15%\",\n              className: \"text-left\",\n              children: \"Species\"\n            }), !this.props.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"th\", {\n              width: \"15%\",\n              className: \"text-right\",\n              children: \"Query coverage (%)\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"th\", {\n              width: \"10%\",\n              className: \"text-right\",\n              children: \"Total score\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"th\", {\n              width: \"10%\",\n              className: \"text-right\",\n              children: \"E value\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"th\", {\n              width: \"10%\",\n              className: \"text-right\",\n              children: \"Identity (%)\"\n            })]\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"tbody\", {\n          children: underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.query.hits, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].bind(function (hit) {\n            return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"tr\", {\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"td\", {\n                className: \"text-left\",\n                children: hit.number + '.'\n              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"td\", {\n                className: \"nowrap-ellipsis\",\n                title: \"\".concat(hit.id, \" \").concat(hit.title),\n                \"data-toggle\": \"tooltip\",\n                \"data-placement\": \"left\",\n                children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"a\", {\n                  href: '#Query_' + this.props.query.number + '_hit_' + hit.number,\n                  className: \"btn-link\",\n                  children: [hit.id, \" \", hit.title]\n                })\n              }), hasName && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"td\", {\n                className: \"nowrap-ellipsis\",\n                title: hit.sciname,\n                \"data-toggle\": \"tooltip\",\n                \"data-placement\": \"top\",\n                children: hit.sciname\n              }), !this.props.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"td\", {\n                className: \"text-right\",\n                children: hit.qcovs\n              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"td\", {\n                className: \"text-right\",\n                children: hit.total_score\n              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"td\", {\n                className: \"text-right\",\n                children: _utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inExponential(hit.hsps[0].evalue)\n              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"td\", {\n                className: \"text-right\",\n                children: _utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"].inPercentage(hit.hsps[0].identity, hit.hsps[0].length)\n              })]\n            }, hit.number);\n          }, this))\n        })]\n      });\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this4 = this;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n        className: \"table-hit-overview\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"h4\", {\n          className: \"caption\",\n          onClick: function onClick() {\n            return _this4.collapsePreferences.toggleCollapse();\n          },\n          children: [this.collapsePreferences.renderCollapseIcon(), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"span\", {\n            children: [\" \", this.name]\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"div\", {\n          id: 'Query_' + this.props.query.number + 'HT_' + this.props.query.number,\n          children: !this.state.collapsed && this.tableJSX()\n        })]\n      });\n    }\n  }]);\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n//# sourceURL=webpack://SequenceServer/./public/js/query.js?");
 
 /***/ }),
 
@@ -225,7 +247,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _jquery_world__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jquery_world */ \"./public/js/jquery_world.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _sidebar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sidebar */ \"./public/js/sidebar.js\");\n/* harmony import */ var _circos__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./circos */ \"./public/js/circos.js\");\n/* harmony import */ var _query__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./query */ \"./public/js/query.js\");\n/* harmony import */ var _hit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./hit */ \"./public/js/hit.js\");\n/* harmony import */ var _hsp__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./hsp */ \"./public/js/hsp.js\");\n/* harmony import */ var _alignment_exporter__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./alignment_exporter */ \"./public/js/alignment_exporter.js\");\n/* harmony import */ var report_plugins__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! report_plugins */ \"./public/js/null_plugins/report_plugins.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n // for custom $.tooltip function\n\n\n\n\n\n\n\n\n\n\n/**\n * Renders entire report.\n *\n * Composed of Query and Sidebar components.\n */\n\n\nvar Report = /*#__PURE__*/function (_Component) {\n  _inherits(Report, _Component);\n  var _super = _createSuper(Report);\n  function Report(props) {\n    var _this;\n    _classCallCheck(this, Report);\n    _this = _super.call(this, props);\n    // Properties below are internal state used to render results in small\n    // slices (see updateState).\n    _this.numUpdates = 0;\n    _this.nextQuery = 0;\n    _this.nextHit = 0;\n    _this.nextHSP = 0;\n    _this.maxHSPs = 3; // max HSPs to render in a cycle\n    _this.state = {\n      user_warning: null,\n      download_links: [],\n      search_id: '',\n      seqserv_version: '',\n      program: '',\n      program_version: '',\n      submitted_at: '',\n      queries: [],\n      results: [],\n      querydb: [],\n      params: [],\n      stats: [],\n      alignment_blob_url: '',\n      allQueriesLoaded: false,\n      cloud_sharing_enabled: false\n    };\n    _this.prepareAlignmentOfSelectedHits = _this.prepareAlignmentOfSelectedHits.bind(_assertThisInitialized(_this));\n    _this.prepareAlignmentOfAllHits = _this.prepareAlignmentOfAllHits.bind(_assertThisInitialized(_this));\n    _this.setStateFromJSON = _this.setStateFromJSON.bind(_assertThisInitialized(_this));\n    _this.plugins = new report_plugins__WEBPACK_IMPORTED_MODULE_9__[\"default\"](_assertThisInitialized(_this));\n    return _this;\n  }\n\n  /**\n  * Fetch results.\n  */\n  _createClass(Report, [{\n    key: \"fetchResults\",\n    value: function fetchResults() {\n      var path = location.pathname + '.json' + location.search;\n      this.pollPeriodically(path, this.setStateFromJSON, this.props.showErrorModal);\n    }\n  }, {\n    key: \"pollPeriodically\",\n    value: function pollPeriodically(path, callback, errCallback) {\n      var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];\n      function poll() {\n        $.getJSON(path).complete(function (jqXHR) {\n          switch (jqXHR.status) {\n            case 202:\n              var interval;\n              if (intervals.length === 1) {\n                interval = intervals[0];\n              } else {\n                interval = intervals.shift();\n              }\n              setTimeout(poll, interval);\n              break;\n            case 200:\n              callback(jqXHR.responseJSON);\n              break;\n            case 400:\n            case 422:\n            case 500:\n              errCallback(jqXHR.responseJSON);\n              break;\n          }\n        });\n      }\n      poll();\n    }\n\n    /**\n    * Calls setState after any required modification to responseJSON.\n    */\n  }, {\n    key: \"setStateFromJSON\",\n    value: function setStateFromJSON(responseJSON) {\n      this.lastTimeStamp = Date.now();\n      // the callback prepares the download link for all alignments\n      if (responseJSON.user_warning == 'LARGE_RESULT') {\n        this.setState({\n          user_warning: responseJSON.user_warning,\n          download_links: responseJSON.download_links\n        });\n      } else {\n        this.setState(responseJSON, this.prepareAlignmentOfAllHits);\n      }\n    }\n\n    /**\n    * Called as soon as the page has loaded and the user sees the loading spinner.\n    * We use this opportunity to setup services that make use of delegated events\n    * bound to the window, document, or body.\n    */\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      this.fetchResults();\n      this.plugins.init();\n      // This sets up an event handler which enables users to select text from\n      // hit header without collapsing the hit.\n      this.preventCollapseOnSelection();\n      this.toggleTable();\n    }\n\n    /**\n    * Called for the first time after as BLAST results have been retrieved from\n    * the server and added to this.state by fetchResults. Only summary overview\n    * and circos would have been rendered at this point. At this stage we kick\n    * start iteratively adding 1 HSP to the page every 25 milli-seconds.\n    */\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate(prevProps, prevState) {\n      var _this2 = this;\n      // Log to console how long the last update take?\n      // console.log((Date.now() - this.lastTimeStamp) / 1000);\n\n      // Lock sidebar in its position on the first update.\n      if (this.nextQuery == 0 && this.nextHit == 0 && this.nextHSP == 0) {\n        this.affixSidebar();\n      }\n\n      // Queue next update if we have not rendered all results yet.\n      if (this.nextQuery < this.state.queries.length) {\n        // setTimeout is used to clear call stack and space out\n        // the updates giving the browser a chance to respond\n        // to user interactions.\n        setTimeout(function () {\n          return _this2.updateState();\n        }, 25);\n      } else {\n        this.componentFinishedUpdating();\n      }\n      this.plugins.componentDidUpdate(prevProps, prevState);\n    }\n\n    /**\n    * Push next slice of results to React for rendering.\n    */\n  }, {\n    key: \"updateState\",\n    value: function updateState() {\n      var results = [];\n      var numHSPsProcessed = 0;\n      while (this.nextQuery < this.state.queries.length) {\n        var query = this.state.queries[this.nextQuery];\n\n        // We may see a query multiple times during rendering because only\n        // 3 hsps are rendered in each cycle, but we want to create the\n        // corresponding Query component only the first time we see it.\n        if (this.nextHit == 0 && this.nextHSP == 0) {\n          results.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_query__WEBPACK_IMPORTED_MODULE_5__.ReportQuery, {\n            query: query,\n            program: this.state.program,\n            querydb: this.state.querydb,\n            showQueryCrumbs: this.state.queries.length > 1,\n            non_parse_seqids: this.state.non_parse_seqids,\n            imported_xml: this.state.imported_xml,\n            veryBig: this.state.veryBig\n          }, 'Query_' + query.id));\n          results.push.apply(results, _toConsumableArray(this.plugins.queryResults(query)));\n        }\n        while (this.nextHit < query.hits.length) {\n          var hit = query.hits[this.nextHit];\n          // We may see a hit multiple times during rendering because only\n          // 10 hsps are rendered in each cycle, but we want to create the\n          // corresponding Hit component only the first time we see it.\n          if (this.nextHSP == 0) {\n            results.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_hit__WEBPACK_IMPORTED_MODULE_6__[\"default\"], _objectSpread({\n              query: query,\n              hit: hit,\n              algorithm: this.state.program,\n              querydb: this.state.querydb,\n              selectHit: this.selectHit,\n              imported_xml: this.state.imported_xml,\n              non_parse_seqids: this.state.non_parse_seqids,\n              showQueryCrumbs: this.state.queries.length > 1,\n              showHitCrumbs: query.hits.length > 1,\n              veryBig: this.state.veryBig,\n              onChange: this.prepareAlignmentOfSelectedHits\n            }, this.props), 'Query_' + query.number + '_Hit_' + hit.number));\n          }\n          while (this.nextHSP < hit.hsps.length) {\n            // Get nextHSP and increment the counter.\n            var hsp = hit.hsps[this.nextHSP++];\n            results.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_hsp__WEBPACK_IMPORTED_MODULE_7__[\"default\"], _objectSpread({\n              query: query,\n              hit: hit,\n              hsp: hsp,\n              algorithm: this.state.program,\n              showHSPNumbers: hit.hsps.length > 1\n            }, this.props), 'Query_' + query.number + '_Hit_' + hit.number + '_HSP_' + hsp.number));\n            numHSPsProcessed++;\n            if (numHSPsProcessed == this.maxHSPs) break;\n          }\n          // Are we here because we have iterated over all hsps of a hit,\n          // or because of the break clause in the inner loop?\n          if (this.nextHSP == hit.hsps.length) {\n            this.nextHit = this.nextHit + 1;\n            this.nextHSP = 0;\n          }\n          if (numHSPsProcessed == this.maxHSPs) break;\n        }\n\n        // Are we here because we have iterated over all hits of a query,\n        // or because of the break clause in the inner loop?\n        if (this.nextHit == query.hits.length) {\n          this.nextQuery = this.nextQuery + 1;\n          this.nextHit = 0;\n        }\n        if (numHSPsProcessed == this.maxHSPs) break;\n      }\n\n      // Push the components to react for rendering.\n      this.numUpdates++;\n      this.lastTimeStamp = Date.now();\n      this.setState({\n        results: this.state.results.concat(results),\n        veryBig: this.numUpdates >= 250\n      });\n    }\n\n    /**\n    * Called after all results have been rendered.\n    */\n  }, {\n    key: \"componentFinishedUpdating\",\n    value: function componentFinishedUpdating() {\n      if (this.state.allQueriesLoaded) return;\n      this.shouldShowIndex() && this.setupScrollSpy();\n      this.setState({\n        allQueriesLoaded: true\n      });\n    }\n\n    /**\n    * Returns loading message\n    */\n  }, {\n    key: \"loadingJSX\",\n    value: function loadingJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n        className: \"row\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n          className: \"col-md-6 col-md-offset-3 text-center\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"h1\", {\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"i\", {\n              className: \"fa fa-cog fa-spin\"\n            }), \"\\xA0 BLAST-ing\"]\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), \"This can take some time depending on the size of your query and database(s). The page will update automatically when BLAST is done.\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), \"You can bookmark the page and come back to it later or share the link with someone.\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}),  false && /*#__PURE__*/0]\n          })]\n        })\n      });\n    }\n\n    /**\n    * Return results JSX.\n    */\n  }, {\n    key: \"resultsJSX\",\n    value: function resultsJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: \"row\",\n        id: \"results\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n          className: \"col-md-3 hidden-sm hidden-xs\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_sidebar__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n            data: this.state,\n            atLeastOneHit: this.atLeastOneHit(),\n            shouldShowIndex: this.shouldShowIndex(),\n            allQueriesLoaded: this.state.allQueriesLoaded,\n            cloudSharingEnabled: this.state.cloud_sharing_enabled\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n          className: \"col-md-9\",\n          children: [this.overviewJSX(), this.circosJSX(), this.state.results]\n        })]\n      });\n    }\n  }, {\n    key: \"warningJSX\",\n    value: function warningJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n        className: \"container\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n          className: \"row\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n            className: \"col-md-6 col-md-offset-3 text-center\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"h1\", {\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"i\", {\n                className: \"fa fa-exclamation-triangle\"\n              }), \"\\xA0 Warning\"]\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), \"The BLAST result might be too large to load in the browser. If you have a powerful machine you can try loading the results anyway. Otherwise, you can download the results and view them locally.\"]\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n              children: this.state.download_links.map(function (link, index) {\n                return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n                  href: link.url,\n                  className: \"btn btn-secondary\",\n                  children: link.name\n                }, 'download_link_' + index);\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n                href: location.pathname + '?bypass_file_size_warning=true',\n                className: \"btn btn-primary\",\n                children: \"View results in browser anyway\"\n              })\n            })]\n          })\n        })\n      });\n    }\n    /**\n    * Renders report overview.\n    */\n  }, {\n    key: \"overviewJSX\",\n    value: function overviewJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: \"overview\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"strong\", {\n            children: [\"SequenceServer \", this.state.seqserv_version]\n          }), \" using\", ' ', /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"strong\", {\n            children: this.state.program_version\n          }), this.state.submitted_at && \", query submitted on \".concat(this.state.submitted_at)]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"strong\", {\n            children: \" Databases: \"\n          }), this.state.querydb.map(function (db) {\n            return db.title;\n          }).join(', '), ' ', \"(\", this.state.stats.nsequences, \" sequences,\\xA0\", this.state.stats.ncharacters, \" characters)\"]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"strong\", {\n            children: \"Parameters: \"\n          }), ' ', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.state.params, function (val, key) {\n            return key + ' ' + val;\n          }).join(', ')]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [\"Please cite:\", ' ', /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n            href: \"https://doi.org/10.1093/molbev/msz185\",\n            children: \"https://doi.org/10.1093/molbev/msz185\"\n          })]\n        })]\n      });\n    }\n\n    /**\n    * Return JSX for circos if we have at least one hit.\n    */\n  }, {\n    key: \"circosJSX\",\n    value: function circosJSX() {\n      return this.atLeastTwoHits() ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_circos__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        queries: this.state.queries,\n        program: this.state.program,\n        collapsed: \"true\"\n      }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {});\n    }\n\n    // Controller //\n\n    /**\n    * Returns true if results have been fetched.\n    *\n    * A holding message is shown till results are fetched.\n    */\n  }, {\n    key: \"isResultAvailable\",\n    value: function isResultAvailable() {\n      return this.state.queries.length >= 1;\n    }\n\n    /**\n     * Indicates the response contains a warning message for the user\n     * in which case we should not render the results and render the\n     * warning instead.\n     **/\n  }, {\n    key: \"isUserWarningPresent\",\n    value: function isUserWarningPresent() {\n      return this.state.user_warning;\n    }\n\n    /**\n    * Returns true if we have at least one hit.\n    */\n  }, {\n    key: \"atLeastOneHit\",\n    value: function atLeastOneHit() {\n      return this.state.queries.some(function (query) {\n        return query.hits.length > 0;\n      });\n    }\n\n    /**\n    * Does the report have at least two hits? This is used to determine\n    * whether Circos should be enabled or not.\n    */\n  }, {\n    key: \"atLeastTwoHits\",\n    value: function atLeastTwoHits() {\n      var hit_num = 0;\n      return this.state.queries.some(function (query) {\n        hit_num += query.hits.length;\n        return hit_num > 1;\n      });\n    }\n\n    /**\n    * Returns true if index should be shown in the sidebar. Index is shown\n    * only for 2 and 8 queries.\n    */\n  }, {\n    key: \"shouldShowIndex\",\n    value: function shouldShowIndex() {\n      var num_queries = this.state.queries.length;\n      return num_queries >= 2 && num_queries <= 12;\n    }\n\n    /**\n    * Prevents folding of hits during text-selection.\n    */\n  }, {\n    key: \"preventCollapseOnSelection\",\n    value: function preventCollapseOnSelection() {\n      $('body').on('mousedown', '.hit > .section-header > h4', function (event) {\n        var $this = $(this);\n        $this.on('mouseup mousemove', function handler(event) {\n          if (event.type === 'mouseup') {\n            // user wants to toggle\n            var hitID = $this.parents('.hit').attr('id');\n            $(\"div[data-parent-hit=\".concat(hitID, \"]\")).toggle();\n            $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');\n          } else {\n            // user wants to select\n            $this.attr('data-toggle', '');\n          }\n          $this.off('mouseup mousemove', handler);\n        });\n      });\n    }\n\n    /* Handling the fa icon when Hit Table is collapsed */\n  }, {\n    key: \"toggleTable\",\n    value: function toggleTable() {\n      $('body').on('mousedown', '.resultn .caption[data-toggle=\"collapse\"]', function (event) {\n        var $this = $(this);\n        $this.on('mouseup mousemove', function handler(event) {\n          $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');\n          $this.off('mouseup mousemove', handler);\n        });\n      });\n    }\n\n    /**\n    * Affixes the sidebar.\n    */\n  }, {\n    key: \"affixSidebar\",\n    value: function affixSidebar() {\n      var $sidebar = $('.sidebar');\n      var sidebarOffset = $sidebar.offset();\n      if (sidebarOffset) {\n        $sidebar.affix({\n          offset: {\n            top: sidebarOffset.top\n          }\n        });\n      }\n    }\n\n    /**\n    * For the query in viewport, highlights corresponding entry in the index.\n    */\n  }, {\n    key: \"setupScrollSpy\",\n    value: function setupScrollSpy() {\n      $('body').scrollspy({\n        target: '.sidebar'\n      });\n    }\n\n    /**\n    * Event-handler when hit is selected\n    * Adds glow to hit component.\n    * Updates number of Fasta that can be downloaded\n    */\n  }, {\n    key: \"selectHit\",\n    value: function selectHit(id) {\n      var checkbox = $('#' + id);\n      var num_checked = $('.hit-links :checkbox:checked').length;\n      if (!checkbox || !checkbox.val()) {\n        return;\n      }\n      var $hit = $(checkbox.data('target'));\n\n      // Highlight selected hit and enable 'Download FASTA/Alignment of\n      // selected' links.\n      if (checkbox.is(':checked')) {\n        $hit.addClass('glow');\n        $hit.next('.hsp').addClass('glow');\n        $('.download-fasta-of-selected').enable();\n        $('.download-alignment-of-selected').enable();\n      } else {\n        $hit.removeClass('glow');\n        $hit.next('.hsp').removeClass('glow');\n        $('.download-fasta-of-selected').attr('href', '#').removeAttr('download');\n      }\n      var $a = $('.download-fasta-of-selected');\n      var $b = $('.download-alignment-of-selected');\n      if (num_checked >= 1) {\n        $a.find('.text-bold').html(num_checked);\n        $b.find('.text-bold').html(num_checked);\n      }\n      if (num_checked == 0) {\n        $a.addClass('disabled').find('.text-bold').html('');\n        $b.addClass('disabled').find('.text-bold').html('');\n      }\n    }\n  }, {\n    key: \"populate_hsp_array\",\n    value: function populate_hsp_array(hit, query_id) {\n      return hit.hsps.map(function (hsp) {\n        return Object.assign(hsp, {\n          hit_id: hit.id,\n          query_id: query_id\n        });\n      });\n    }\n  }, {\n    key: \"prepareAlignmentOfSelectedHits\",\n    value: function prepareAlignmentOfSelectedHits() {\n      var sequence_ids = $('.hit-links :checkbox:checked').map(function () {\n        return this.value;\n      }).get();\n      if (!sequence_ids.length) {\n        // remove attributes from link if sequence_ids array is empty\n        $('.download-alignment-of-selected').attr('href', '#').removeAttr('download');\n        return;\n      }\n      if (this.state.alignment_blob_url) {\n        // always revoke existing url if any because this method will always create a new url\n        window.URL.revokeObjectURL(this.state.alignment_blob_url);\n      }\n      var hsps_arr = [];\n      var aln_exporter = new _alignment_exporter__WEBPACK_IMPORTED_MODULE_8__[\"default\"]();\n      var self = this;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.state.queries, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(query.hits, function (hit) {\n          if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(sequence_ids, hit.id) != -1) {\n            hsps_arr = hsps_arr.concat(self.populate_hsp_array(hit, query.id));\n          }\n        });\n      }, this));\n      var filename = 'alignment-' + sequence_ids.length + '_hits.txt';\n      var blob_url = aln_exporter.prepare_alignments_for_export(hsps_arr, filename);\n      // set required download attributes for link\n      $('.download-alignment-of-selected').attr('href', blob_url).attr('download', filename);\n      // track new url for future removal\n      this.setState({\n        alignment_blob_url: blob_url\n      });\n    }\n  }, {\n    key: \"prepareAlignmentOfAllHits\",\n    value: function prepareAlignmentOfAllHits() {\n      var _this3 = this;\n      // Get number of hits and array of all hsps.\n      var num_hits = 0;\n      var hsps_arr = [];\n      if (!this.state.queries.length) {\n        return;\n      }\n      this.state.queries.forEach(function (query) {\n        return query.hits.forEach(function (hit) {\n          num_hits++;\n          hsps_arr = hsps_arr.concat(_this3.populate_hsp_array(hit, query.id));\n        });\n      });\n      var aln_exporter = new _alignment_exporter__WEBPACK_IMPORTED_MODULE_8__[\"default\"]();\n      var file_name = \"alignment-\".concat(num_hits, \"_hits.txt\");\n      var blob_url = aln_exporter.prepare_alignments_for_export(hsps_arr, file_name);\n      $('.download-alignment-of-all').attr('href', blob_url).attr('download', file_name);\n      return false;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      if (this.isUserWarningPresent()) {\n        return this.warningJSX();\n      } else if (this.isResultAvailable()) {\n        return this.resultsJSX();\n      } else {\n        return this.loadingJSX();\n      }\n    }\n  }]);\n  return Report;\n}(react__WEBPACK_IMPORTED_MODULE_1__.Component);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Report);\n\n//# sourceURL=webpack://SequenceServer/./public/js/report.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _jquery_world__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jquery_world */ \"./public/js/jquery_world.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _sidebar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sidebar */ \"./public/js/sidebar.js\");\n/* harmony import */ var _circos__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./circos */ \"./public/js/circos.js\");\n/* harmony import */ var _query__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./query */ \"./public/js/query.js\");\n/* harmony import */ var _hit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./hit */ \"./public/js/hit.js\");\n/* harmony import */ var _hsp__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./hsp */ \"./public/js/hsp.js\");\n/* harmony import */ var _alignment_exporter__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./alignment_exporter */ \"./public/js/alignment_exporter.js\");\n/* harmony import */ var report_plugins__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! report_plugins */ \"./public/js/null_plugins/report_plugins.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n // for custom $.tooltip function\n\n\n\n\n\n\n\n\n\n\n/**\n * Renders entire report.\n *\n * Composed of Query and Sidebar components.\n */\n\nvar Report = /*#__PURE__*/function (_Component) {\n  function Report(props) {\n    var _this2;\n    _classCallCheck(this, Report);\n    _this2 = _callSuper(this, Report, [props]);\n    // Properties below are internal state used to render results in small\n    // slices (see updateState).\n    _this2.numUpdates = 0;\n    _this2.nextQuery = 0;\n    _this2.nextHit = 0;\n    _this2.nextHSP = 0;\n    _this2.maxHSPs = 3; // max HSPs to render in a cycle\n    _this2.state = {\n      user_warning: null,\n      download_links: [],\n      search_id: '',\n      seqserv_version: '',\n      program: '',\n      program_version: '',\n      submitted_at: '',\n      queries: [],\n      results: [],\n      querydb: [],\n      params: [],\n      stats: [],\n      alignment_blob_url: '',\n      allQueriesLoaded: false,\n      cloud_sharing_enabled: false\n    };\n    _this2.prepareAlignmentOfSelectedHits = _this2.prepareAlignmentOfSelectedHits.bind(_this2);\n    _this2.prepareAlignmentOfAllHits = _this2.prepareAlignmentOfAllHits.bind(_this2);\n    _this2.setStateFromJSON = _this2.setStateFromJSON.bind(_this2);\n    _this2.plugins = new report_plugins__WEBPACK_IMPORTED_MODULE_9__[\"default\"](_this2);\n    return _this2;\n  }\n\n  /**\n  * Fetch results.\n  */\n  _inherits(Report, _Component);\n  return _createClass(Report, [{\n    key: \"fetchResults\",\n    value: function fetchResults() {\n      var path = location.pathname + '.json' + location.search;\n      this.pollPeriodically(path, this.setStateFromJSON, this.props.showErrorModal);\n    }\n  }, {\n    key: \"pollPeriodically\",\n    value: function pollPeriodically(path, callback, errCallback) {\n      var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];\n      function poll() {\n        $.getJSON(path).complete(function (jqXHR) {\n          switch (jqXHR.status) {\n            case 202:\n              var interval;\n              if (intervals.length === 1) {\n                interval = intervals[0];\n              } else {\n                interval = intervals.shift();\n              }\n              setTimeout(poll, interval);\n              break;\n            case 200:\n              callback(jqXHR.responseJSON);\n              break;\n            case 400:\n            case 422:\n            case 500:\n              errCallback(jqXHR.responseJSON);\n              break;\n          }\n        });\n      }\n      poll();\n    }\n\n    /**\n    * Calls setState after any required modification to responseJSON.\n    */\n  }, {\n    key: \"setStateFromJSON\",\n    value: function setStateFromJSON(responseJSON) {\n      this.lastTimeStamp = Date.now();\n      // the callback prepares the download link for all alignments\n      if (responseJSON.user_warning == 'LARGE_RESULT') {\n        this.setState({\n          user_warning: responseJSON.user_warning,\n          download_links: responseJSON.download_links\n        });\n      } else {\n        this.setState(responseJSON, this.prepareAlignmentOfAllHits);\n      }\n    }\n\n    /**\n    * Called as soon as the page has loaded and the user sees the loading spinner.\n    * We use this opportunity to setup services that make use of delegated events\n    * bound to the window, document, or body.\n    */\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      this.fetchResults();\n      this.plugins.init();\n      // This sets up an event handler which enables users to select text from\n      // hit header without collapsing the hit.\n      this.preventCollapseOnSelection();\n      this.toggleTable();\n    }\n\n    /**\n    * Called for the first time after as BLAST results have been retrieved from\n    * the server and added to this.state by fetchResults. Only summary overview\n    * and circos would have been rendered at this point. At this stage we kick\n    * start iteratively adding 1 HSP to the page every 25 milli-seconds.\n    */\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate(prevProps, prevState) {\n      var _this3 = this;\n      // Log to console how long the last update take?\n      // console.log((Date.now() - this.lastTimeStamp) / 1000);\n\n      // Lock sidebar in its position on the first update.\n      if (this.nextQuery == 0 && this.nextHit == 0 && this.nextHSP == 0) {\n        this.affixSidebar();\n      }\n\n      // Queue next update if we have not rendered all results yet.\n      if (this.nextQuery < this.state.queries.length) {\n        // setTimeout is used to clear call stack and space out\n        // the updates giving the browser a chance to respond\n        // to user interactions.\n        setTimeout(function () {\n          return _this3.updateState();\n        }, 25);\n      } else {\n        this.componentFinishedUpdating();\n      }\n      this.plugins.componentDidUpdate(prevProps, prevState);\n    }\n\n    /**\n    * Push next slice of results to React for rendering.\n    */\n  }, {\n    key: \"updateState\",\n    value: function updateState() {\n      var results = [];\n      var numHSPsProcessed = 0;\n      while (this.nextQuery < this.state.queries.length) {\n        var query = this.state.queries[this.nextQuery];\n\n        // We may see a query multiple times during rendering because only\n        // 3 hsps are rendered in each cycle, but we want to create the\n        // corresponding Query component only the first time we see it.\n        if (this.nextHit == 0 && this.nextHSP == 0) {\n          results.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_query__WEBPACK_IMPORTED_MODULE_5__.ReportQuery, {\n            query: query,\n            program: this.state.program,\n            querydb: this.state.querydb,\n            showQueryCrumbs: this.state.queries.length > 1,\n            non_parse_seqids: this.state.non_parse_seqids,\n            imported_xml: this.state.imported_xml,\n            veryBig: this.state.veryBig\n          }, 'Query_' + query.id));\n          results.push.apply(results, _toConsumableArray(this.plugins.queryResults(query)));\n        }\n        while (this.nextHit < query.hits.length) {\n          var hit = query.hits[this.nextHit];\n          // We may see a hit multiple times during rendering because only\n          // 10 hsps are rendered in each cycle, but we want to create the\n          // corresponding Hit component only the first time we see it.\n          if (this.nextHSP == 0) {\n            results.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_hit__WEBPACK_IMPORTED_MODULE_6__[\"default\"], _objectSpread({\n              query: query,\n              hit: hit,\n              algorithm: this.state.program,\n              querydb: this.state.querydb,\n              selectHit: this.selectHit,\n              imported_xml: this.state.imported_xml,\n              non_parse_seqids: this.state.non_parse_seqids,\n              showQueryCrumbs: this.state.queries.length > 1,\n              showHitCrumbs: query.hits.length > 1,\n              veryBig: this.state.veryBig,\n              onChange: this.prepareAlignmentOfSelectedHits\n            }, this.props), 'Query_' + query.number + '_Hit_' + hit.number));\n          }\n          while (this.nextHSP < hit.hsps.length) {\n            // Get nextHSP and increment the counter.\n            var hsp = hit.hsps[this.nextHSP++];\n            results.push( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_hsp__WEBPACK_IMPORTED_MODULE_7__[\"default\"], _objectSpread({\n              query: query,\n              hit: hit,\n              hsp: hsp,\n              algorithm: this.state.program,\n              showHSPNumbers: hit.hsps.length > 1\n            }, this.props), 'Query_' + query.number + '_Hit_' + hit.number + '_HSP_' + hsp.number));\n            numHSPsProcessed++;\n            if (numHSPsProcessed == this.maxHSPs) break;\n          }\n          // Are we here because we have iterated over all hsps of a hit,\n          // or because of the break clause in the inner loop?\n          if (this.nextHSP == hit.hsps.length) {\n            this.nextHit = this.nextHit + 1;\n            this.nextHSP = 0;\n          }\n          if (numHSPsProcessed == this.maxHSPs) break;\n        }\n\n        // Are we here because we have iterated over all hits of a query,\n        // or because of the break clause in the inner loop?\n        if (this.nextHit == query.hits.length) {\n          this.nextQuery = this.nextQuery + 1;\n          this.nextHit = 0;\n        }\n        if (numHSPsProcessed == this.maxHSPs) break;\n      }\n\n      // Push the components to react for rendering.\n      this.numUpdates++;\n      this.lastTimeStamp = Date.now();\n      this.setState({\n        results: this.state.results.concat(results),\n        veryBig: this.numUpdates >= 250\n      });\n    }\n\n    /**\n    * Called after all results have been rendered.\n    */\n  }, {\n    key: \"componentFinishedUpdating\",\n    value: function componentFinishedUpdating() {\n      if (this.state.allQueriesLoaded) return;\n      this.shouldShowIndex() && this.setupScrollSpy();\n      this.setState({\n        allQueriesLoaded: true\n      });\n    }\n\n    /**\n    * Returns loading message\n    */\n  }, {\n    key: \"loadingJSX\",\n    value: function loadingJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n        className: \"row\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n          className: \"col-md-6 col-md-offset-3 text-center\",\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"h1\", {\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"i\", {\n              className: \"fa fa-cog fa-spin\"\n            }), \"\\xA0 BLAST-ing\"]\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), \"This can take some time depending on the size of your query and database(s). The page will update automatically when BLAST is done.\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), \"You can bookmark the page and come back to it later or share the link with someone.\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}),  false && /*#__PURE__*/0]\n          })]\n        })\n      });\n    }\n\n    /**\n    * Return results JSX.\n    */\n  }, {\n    key: \"resultsJSX\",\n    value: function resultsJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: \"row\",\n        id: \"results\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n          className: \"col-md-3 hidden-sm hidden-xs\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_sidebar__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n            data: this.state,\n            atLeastOneHit: this.atLeastOneHit(),\n            shouldShowIndex: this.shouldShowIndex(),\n            allQueriesLoaded: this.state.allQueriesLoaded,\n            cloudSharingEnabled: this.state.cloud_sharing_enabled\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n          className: \"col-md-9\",\n          children: [this.overviewJSX(), this.circosJSX(), this.plugins.generateStats(), this.state.results]\n        })]\n      });\n    }\n  }, {\n    key: \"warningJSX\",\n    value: function warningJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n        className: \"container\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n          className: \"row\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n            className: \"col-md-6 col-md-offset-3 text-center\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"h1\", {\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"i\", {\n                className: \"fa fa-exclamation-triangle\"\n              }), \"\\xA0 Warning\"]\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), \"The BLAST result might be too large to load in the browser. If you have a powerful machine you can try loading the results anyway. Otherwise, you can download the results and view them locally.\"]\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n              children: this.state.download_links.map(function (link, index) {\n                return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n                  href: link.url,\n                  className: \"btn btn-secondary\",\n                  children: link.name\n                }, 'download_link_' + index);\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n                href: location.pathname + '?bypass_file_size_warning=true',\n                className: \"btn btn-primary\",\n                children: \"View results in browser anyway\"\n              })\n            })]\n          })\n        })\n      });\n    }\n    /**\n    * Renders report overview.\n    */\n  }, {\n    key: \"overviewJSX\",\n    value: function overviewJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: \"overview\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"strong\", {\n            children: [\"SequenceServer \", this.state.seqserv_version]\n          }), \" using\", ' ', /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"strong\", {\n            children: this.state.program_version\n          }), this.state.submitted_at && \", query submitted on \".concat(this.state.submitted_at)]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"strong\", {\n            children: \" Databases: \"\n          }), this.state.querydb.map(function (db) {\n            return db.title;\n          }).join(', '), ' ', \"(\", this.state.stats.nsequences, \" sequences,\\xA0\", this.state.stats.ncharacters, \" characters)\"]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"strong\", {\n            children: \"Parameters: \"\n          }), ' ', underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.state.params, function (val, key) {\n            return key + ' ' + val;\n          }).join(', ')]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"p\", {\n          children: [\"Please cite:\", ' ', /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n            href: \"https://doi.org/10.1093/molbev/msz185\",\n            children: \"https://doi.org/10.1093/molbev/msz185\"\n          })]\n        })]\n      });\n    }\n\n    /**\n    * Return JSX for circos if we have at least one hit.\n    */\n  }, {\n    key: \"circosJSX\",\n    value: function circosJSX() {\n      return this.atLeastTwoHits() ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_circos__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n        queries: this.state.queries,\n        program: this.state.program\n      }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"span\", {});\n    }\n\n    // Controller //\n\n    /**\n    * Returns true if results have been fetched.\n    *\n    * A holding message is shown till results are fetched.\n    */\n  }, {\n    key: \"isResultAvailable\",\n    value: function isResultAvailable() {\n      return this.state.queries.length >= 1;\n    }\n\n    /**\n     * Indicates the response contains a warning message for the user\n     * in which case we should not render the results and render the\n     * warning instead.\n     **/\n  }, {\n    key: \"isUserWarningPresent\",\n    value: function isUserWarningPresent() {\n      return this.state.user_warning;\n    }\n\n    /**\n    * Returns true if we have at least one hit.\n    */\n  }, {\n    key: \"atLeastOneHit\",\n    value: function atLeastOneHit() {\n      return this.state.queries.some(function (query) {\n        return query.hits.length > 0;\n      });\n    }\n\n    /**\n    * Does the report have at least two hits? This is used to determine\n    * whether Circos should be enabled or not.\n    */\n  }, {\n    key: \"atLeastTwoHits\",\n    value: function atLeastTwoHits() {\n      var hit_num = 0;\n      return this.state.queries.some(function (query) {\n        hit_num += query.hits.length;\n        return hit_num > 1;\n      });\n    }\n\n    /**\n    * Returns true if index should be shown in the sidebar. Index is shown\n    * only for 2 and 8 queries.\n    */\n  }, {\n    key: \"shouldShowIndex\",\n    value: function shouldShowIndex() {\n      var num_queries = this.state.queries.length;\n      return num_queries >= 2 && num_queries <= 12;\n    }\n\n    /**\n    * Prevents folding of hits during text-selection.\n    */\n  }, {\n    key: \"preventCollapseOnSelection\",\n    value: function preventCollapseOnSelection() {\n      $('body').on('mousedown', '.hit > .section-header > h4', function (event) {\n        var $this = $(this);\n        $this.on('mouseup mousemove', function handler(event) {\n          if (event.type === 'mouseup') {\n            // user wants to toggle\n            var hitID = $this.parents('.hit').attr('id');\n            $(\"div[data-parent-hit=\".concat(hitID, \"]\")).toggle();\n            $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');\n          } else {\n            // user wants to select\n            $this.attr('data-toggle', '');\n          }\n          $this.off('mouseup mousemove', handler);\n        });\n      });\n    }\n\n    /* Handling the fa icon when Hit Table is collapsed */\n  }, {\n    key: \"toggleTable\",\n    value: function toggleTable() {\n      $('body').on('mousedown', '.resultn .caption[data-toggle=\"collapse\"]', function (event) {\n        var $this = $(this);\n        $this.on('mouseup mousemove', function handler(event) {\n          $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');\n          $this.off('mouseup mousemove', handler);\n        });\n      });\n    }\n\n    /**\n    * Affixes the sidebar.\n    */\n  }, {\n    key: \"affixSidebar\",\n    value: function affixSidebar() {\n      var $sidebar = $('.sidebar');\n      var sidebarOffset = $sidebar.offset();\n      if (sidebarOffset) {\n        $sidebar.affix({\n          offset: {\n            top: sidebarOffset.top\n          }\n        });\n      }\n    }\n\n    /**\n    * For the query in viewport, highlights corresponding entry in the index.\n    */\n  }, {\n    key: \"setupScrollSpy\",\n    value: function setupScrollSpy() {\n      $('body').scrollspy({\n        target: '.sidebar'\n      });\n    }\n\n    /**\n    * Event-handler when hit is selected\n    * Adds glow to hit component.\n    * Updates number of Fasta that can be downloaded\n    */\n  }, {\n    key: \"selectHit\",\n    value: function selectHit(id) {\n      var checkbox = $('#' + id);\n      var num_checked = $('.hit-links :checkbox:checked').length;\n      if (!checkbox || !checkbox.val()) {\n        return;\n      }\n      var $hit = $(checkbox.data('target'));\n\n      // Highlight selected hit and enable 'Download FASTA/Alignment of\n      // selected' links.\n      if (checkbox.is(':checked')) {\n        $hit.addClass('glow');\n        $hit.next('.hsp').addClass('glow');\n        $('.download-fasta-of-selected').enable();\n        $('.download-alignment-of-selected').enable();\n      } else {\n        $hit.removeClass('glow');\n        $hit.next('.hsp').removeClass('glow');\n        $('.download-fasta-of-selected').attr('href', '#').removeAttr('download');\n      }\n      var $a = $('.download-fasta-of-selected');\n      var $b = $('.download-alignment-of-selected');\n      if (num_checked >= 1) {\n        $a.find('.text-bold').html(num_checked);\n        $b.find('.text-bold').html(num_checked);\n      }\n      if (num_checked == 0) {\n        $a.addClass('disabled').find('.text-bold').html('');\n        $b.addClass('disabled').find('.text-bold').html('');\n      }\n    }\n  }, {\n    key: \"populate_hsp_array\",\n    value: function populate_hsp_array(hit, query_id) {\n      return hit.hsps.map(function (hsp) {\n        return Object.assign(hsp, {\n          hit_id: hit.id,\n          query_id: query_id\n        });\n      });\n    }\n  }, {\n    key: \"prepareAlignmentOfSelectedHits\",\n    value: function prepareAlignmentOfSelectedHits() {\n      var sequence_ids = $('.hit-links :checkbox:checked').map(function () {\n        return this.value;\n      }).get();\n      if (!sequence_ids.length) {\n        // remove attributes from link if sequence_ids array is empty\n        $('.download-alignment-of-selected').attr('href', '#').removeAttr('download');\n        return;\n      }\n      if (this.state.alignment_blob_url) {\n        // always revoke existing url if any because this method will always create a new url\n        window.URL.revokeObjectURL(this.state.alignment_blob_url);\n      }\n      var hsps_arr = [];\n      var aln_exporter = new _alignment_exporter__WEBPACK_IMPORTED_MODULE_8__[\"default\"]();\n      var self = this;\n      underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(this.state.queries, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (query) {\n        underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].each(query.hits, function (hit) {\n          if (underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].indexOf(sequence_ids, hit.id) != -1) {\n            hsps_arr = hsps_arr.concat(self.populate_hsp_array(hit, query.id));\n          }\n        });\n      }, this));\n      var filename = 'alignment-' + sequence_ids.length + '_hits.txt';\n      var blob_url = aln_exporter.prepare_alignments_for_export(hsps_arr, filename);\n      // set required download attributes for link\n      $('.download-alignment-of-selected').attr('href', blob_url).attr('download', filename);\n      // track new url for future removal\n      this.setState({\n        alignment_blob_url: blob_url\n      });\n    }\n  }, {\n    key: \"prepareAlignmentOfAllHits\",\n    value: function prepareAlignmentOfAllHits() {\n      var _this4 = this;\n      // Get number of hits and array of all hsps.\n      var num_hits = 0;\n      var hsps_arr = [];\n      if (!this.state.queries.length) {\n        return;\n      }\n      this.state.queries.forEach(function (query) {\n        return query.hits.forEach(function (hit) {\n          num_hits++;\n          hsps_arr = hsps_arr.concat(_this4.populate_hsp_array(hit, query.id));\n        });\n      });\n      var aln_exporter = new _alignment_exporter__WEBPACK_IMPORTED_MODULE_8__[\"default\"]();\n      var file_name = \"alignment-\".concat(num_hits, \"_hits.txt\");\n      var blob_url = aln_exporter.prepare_alignments_for_export(hsps_arr, file_name);\n      $('.download-alignment-of-all').attr('href', blob_url).attr('download', file_name);\n      return false;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      if (this.isUserWarningPresent()) {\n        return this.warningJSX();\n      } else if (this.isResultAvailable()) {\n        return this.resultsJSX();\n      } else {\n        return this.loadingJSX();\n      }\n    }\n  }]);\n}(react__WEBPACK_IMPORTED_MODULE_1__.Component);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Report);\n\n//# sourceURL=webpack://SequenceServer/./public/js/report.js?");
 
 /***/ }),
 
@@ -236,7 +258,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _jquery_world__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jquery_world */ \"./public/js/jquery_world.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _report__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./report */ \"./public/js/report.js\");\n/* harmony import */ var _sequence_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./sequence_modal */ \"./public/js/sequence_modal.js\");\n/* harmony import */ var _error_modal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./error_modal */ \"./public/js/error_modal.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n/* eslint-disable no-unused-vars */\n // for custom $.tooltip function\n\n\n\n\n\n\n/**\n * Base component of report page. This component is later rendered into page's\n * '#view' element.\n */\n\n\nvar Page = /*#__PURE__*/function (_Component) {\n  _inherits(Page, _Component);\n  var _super = _createSuper(Page);\n  function Page(props) {\n    var _this;\n    _classCallCheck(this, Page);\n    _this = _super.call(this, props);\n    _this.showSequenceModal = _this.showSequenceModal.bind(_assertThisInitialized(_this));\n    _this.showErrorModal = _this.showErrorModal.bind(_assertThisInitialized(_this));\n    _this.getCharacterWidth = _this.getCharacterWidth.bind(_assertThisInitialized(_this));\n    _this.hspChars = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n    return _this;\n  }\n  _createClass(Page, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      var job_id = location.pathname.split('/').pop();\n      sessionStorage.setItem('job_id', job_id);\n    }\n  }, {\n    key: \"showSequenceModal\",\n    value: function showSequenceModal(url) {\n      this.refs.sequenceModal.show(url);\n    }\n  }, {\n    key: \"showErrorModal\",\n    value: function showErrorModal(errorData, beforeShow) {\n      this.refs.errorModal.show(errorData, beforeShow);\n    }\n  }, {\n    key: \"getCharacterWidth\",\n    value: function getCharacterWidth() {\n      if (!this.characterWidth) {\n        var $hspChars = $(this.hspChars.current);\n        this.characterWidth = $hspChars.width() / 29;\n      }\n      return this.characterWidth;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"container\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_report__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n            showSequenceModal: function showSequenceModal(_) {\n              return _this2.showSequenceModal(_);\n            },\n            getCharacterWidth: function getCharacterWidth() {\n              return _this2.getCharacterWidth();\n            },\n            showErrorModal: function showErrorModal() {\n              return _this2.showErrorModal.apply(_this2, arguments);\n            }\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"pre\", {\n          className: \"pre-reset hsp-lines\",\n          ref: this.hspChars,\n          hidden: true,\n          children: \"ABCDEFGHIJKLMNOPQRSTUVWXYZ +-\"\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"canvas\", {\n          id: \"png-exporter\",\n          hidden: true\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_sequence_modal__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          ref: \"sequenceModal\",\n          showErrorModal: function showErrorModal() {\n            return _this2.showErrorModal.apply(_this2, arguments);\n          }\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_error_modal__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n          ref: \"errorModal\"\n        })]\n      });\n    }\n  }]);\n  return Page;\n}(react__WEBPACK_IMPORTED_MODULE_1__.Component);\nvar root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(document.getElementById('view'));\nroot.render( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(Page, {}));\n\n//# sourceURL=webpack://SequenceServer/./public/js/report_root.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _jquery_world__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jquery_world */ \"./public/js/jquery_world.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _report__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./report */ \"./public/js/report.js\");\n/* harmony import */ var _sequence_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./sequence_modal */ \"./public/js/sequence_modal.js\");\n/* harmony import */ var _error_modal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./error_modal */ \"./public/js/error_modal.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n/* eslint-disable no-unused-vars */\n // for custom $.tooltip function\n\n\n\n\n\n\n/**\n * Base component of report page. This component is later rendered into page's\n * '#view' element.\n */\n\nvar Page = /*#__PURE__*/function (_Component) {\n  function Page(props) {\n    var _this2;\n    _classCallCheck(this, Page);\n    _this2 = _callSuper(this, Page, [props]);\n    _this2.showSequenceModal = _this2.showSequenceModal.bind(_this2);\n    _this2.showErrorModal = _this2.showErrorModal.bind(_this2);\n    _this2.getCharacterWidth = _this2.getCharacterWidth.bind(_this2);\n    _this2.hspChars = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n    return _this2;\n  }\n  _inherits(Page, _Component);\n  return _createClass(Page, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      var job_id = location.pathname.split('/').pop();\n      sessionStorage.setItem('job_id', job_id);\n    }\n  }, {\n    key: \"showSequenceModal\",\n    value: function showSequenceModal(url) {\n      this.refs.sequenceModal.show(url);\n    }\n  }, {\n    key: \"showErrorModal\",\n    value: function showErrorModal(errorData, beforeShow) {\n      this.refs.errorModal.show(errorData, beforeShow);\n    }\n  }, {\n    key: \"getCharacterWidth\",\n    value: function getCharacterWidth() {\n      if (!this.characterWidth) {\n        var $hspChars = $(this.hspChars.current);\n        this.characterWidth = $hspChars.width() / 29;\n      }\n      return this.characterWidth;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this3 = this;\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"container\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_report__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n            showSequenceModal: function showSequenceModal(_) {\n              return _this3.showSequenceModal(_);\n            },\n            getCharacterWidth: function getCharacterWidth() {\n              return _this3.getCharacterWidth();\n            },\n            showErrorModal: function showErrorModal() {\n              return _this3.showErrorModal.apply(_this3, arguments);\n            }\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"pre\", {\n          className: \"pre-reset hsp-lines\",\n          ref: this.hspChars,\n          hidden: true,\n          children: \"ABCDEFGHIJKLMNOPQRSTUVWXYZ +-\"\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"canvas\", {\n          id: \"png-exporter\",\n          hidden: true\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_sequence_modal__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          ref: \"sequenceModal\",\n          showErrorModal: function showErrorModal() {\n            return _this3.showErrorModal.apply(_this3, arguments);\n          }\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_error_modal__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n          ref: \"errorModal\"\n        })]\n      });\n    }\n  }]);\n}(react__WEBPACK_IMPORTED_MODULE_1__.Component);\nvar root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(document.getElementById('view'));\nroot.render( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(Page, {}));\n\n//# sourceURL=webpack://SequenceServer/./public/js/report_root.js?");
 
 /***/ }),
 
@@ -247,7 +269,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _jqu
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);\n/* provided dependency */ var jQuery = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nvar require;function _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nrequire = function e(t, n, r) {\n  function s(o, u) {\n    if (!n[o]) {\n      if (!t[o]) {\n        var a = undefined;\n        if (!u && a) return require(o, !0);\n        if (i) return i(o, !0);\n        var f = new Error('Cannot find module \\'' + o + '\\'');\n        throw f.code = 'MODULE_NOT_FOUND', f;\n      }\n      var l = n[o] = {\n        exports: {}\n      };\n      t[o][0].call(l.exports, function (e) {\n        var n = t[o][1][e];\n        return s(n ? n : e);\n      }, l, l.exports, e, t, n, r);\n    }\n    return n[o].exports;\n  }\n  var i = undefined;\n  for (var o = 0; o < r.length; o++) {\n    s(r[o]);\n  }\n  return s;\n}({\n  1: [function (require, module, exports) {\n    // legacy!!\n    (jquery__WEBPACK_IMPORTED_MODULE_0___default().browser) = require('jquery-browser-plugin');\n\n    /**\n    * THIS FILE HAS BEEN MODIFIED FROM THE ORIGINAL\n    * (https://github.com/ljgarcia/biojs-vis-sequence/blob/master/lib/index.js).\n    *\n    * Sequence component \n    * \n    * @class\n    * @extends Biojs\n    * \n    * @author <a href=\"mailto:johncar@gmail.com\">John Gomez</a>, <a href=\"mailto:secevalliv@gmail.com\">Jose Villaveces</a>\n    * @version 1.0.0\n    * @category 3\n    * \n    * @requires <a href='http://blog.jquery.com/2011/09/12/jquery-1-6-4-released/'>jQuery Core 1.6.4</a>\n    * @dependency <script language=\"JavaScript\" type=\"text/javascript\" src=\"../biojs/dependencies/jquery/jquery-1.4.2.min.js\"></script>\n    * \n    * @requires <a href='http://jqueryui.com/download'>jQuery UI 1.8.16</a>\n    * @dependency <script language=\"JavaScript\" type=\"text/javascript\" src=\"../biojs/dependencies/jquery/jquery-ui-1.8.2.custom.min.js\"></script>\n    *\n    * @requires <a href='Biojs.Tooltip.css'>Biojs.Tooltip</a>\n    * @dependency <script language=\"JavaScript\" type=\"text/javascript\" src=\"src/Biojs.Tooltip.js\"></script>\n    * \n    * @param {Object} options An object with the options for Sequence component.\n    *    \n    * @option {string} target \n    *    Identifier of the DIV tag where the component should be displayed.\n    *    \n    * @option {string} sequence \n    *    The sequence to be displayed.\n    *    \n    * @option {string} [id] \n    *    Sequence identifier if apply.\n    *    \n    * @option {string} [format=\"FASTA\"] \n    *    The display format for the sequence representation.\n    *    \n    * @option {Object[]} [highlights] \n    * \t  For highlighting multiple regions. \n    *    <pre class=\"brush: js\" title=\"Syntax:\"> \n    *    [\n    *    \t// Highlight aminoacids from 'start' to 'end' of the current strand using the specified 'color' (optional) and 'background' (optional).\n    *    \t{ start: &lt;startVal1&gt;, end: &lt;endVal1&gt; [, id:&lt;idVal1&gt;] [, color: &lt;HTMLColor&gt;] [, background: &lt;HTMLColor&gt;]}, \n    *    \t//\n    *    \t// Any others highlights\n    *    \t...,  \n    *    \t// \n    *    \t{ start: &lt;startValN&gt;, end: &lt;endValN&gt; [, id:&lt;idValN&gt;] [, color: &lt;HTMLColor&gt;] [, background: &lt;HTMLColor&gt;]}\n    *    ]</pre>\n    * \n    * <pre class=\"brush: js\" title=\"Example:\"> \n    * highlights : [\n    * \t\t{ start:30, end:42, color:\"white\", background:\"green\", id:\"spin1\" },\n    *\t\t{ start:139, end:140 }, \n    *\t\t{ start:631, end:633, color:\"white\", background:\"blue\" }\n    *\t]\n    * </pre>\n    * \n    * @option {Object} [columns={size:40,spacedEach:10}] \n    * \t  Options for displaying the columns. Syntax: { size: &lt;numCols&gt;, spacedEach: &lt;numCols&gt;}\n    * \n    * @option {Object} [selection] \n    * \t  Positions for the current selected region. Syntax: { start: &lt;startValue&gt;, end: &lt;endValue&gt;}\n    * \n    * @option {Object[]} [annotations] \n    *    Set of overlapping annotations. Must be an array of objects following the syntax:\n    *     \t\t<pre class=\"brush: js\" title=\"Syntax:\">\n    *            [ \n    *              // An annotation:\n    *              { name: &lt;name&gt;, \n    *                html: &lt;message&gt;, \n    *                color: &lt;color_code&gt;, \n    *                regions: [{ start: &lt;startVal1&gt;, end: &lt;endVal1&gt; color: &lt;HTMLColor&gt;}, ...,{ start: &lt;startValN&gt;, end: &lt;endValN&gt;, color: &lt;HTMLColor&gt;}] \n    *              }, \n    *              \n    *              // ...\n    *              // more annotations here \n    *              // ...\n    *            ]\n    *    \t\t </pre>\n    *    where:\n    *      <ul>\n    *        <li><b>name</b> is the unique name for the annotation</li>\n    *        <li><b>html</b> is the message (can be HTML) to be displayed in the tool tip.</li>\n    *        <li><b>color</b> is the default HTML color code for all the regions.</li>\n    *        <li><b>regions</b> array of objects defining the intervals which belongs to the annotation.</li>\n    *        <li><b>regions[i].start</b> is the starting character for the i-th interval.</li>\n    *        <li><b>regions[i].end</b> is the ending character for the i-th interval.</li>\n    *        <li><b>regions[i].color</b> is an optional color for the i-th interval.   \n    *      </ul> \n    *      \n    * @option {Object} [formatOptions={title:true, footer:true}] \n    * \t  Options for displaying the title. by now just affecting the CODATA format.\n    *    <pre class=\"brush: js\" title=\"Syntax:\"> \n    * \t\tformatOptions : {\n    * \t\t\ttitle:false,\n    * \t\t\tfooter:false\n    * \t\t}\n    *    </pre>\n    *    \n    * @example \n    * var theSequence = \"METLCQRLNVCQDKILTHYENDSTDLRDHIDYWKHMRLECAIYYKAREMGFKHINHQVVPTLAVSKNKALQAIELQLTLETIYNSQYSNEKWTLQDVSLEVYLTAPTGCIKKHGYTVEVQFDGDICNTMHYTNWTHIYICEEAojs SVTVVEGQVDYYGLYYVHEGIRTYFVQFKDDAEKYSKNKVWEVHAGGQVILCPTSVFSSNEVSSPEIIRQHLANHPAATHTKAVALGTEETQTTIQRPRSEPDTGNPCHTTKLLHRDSVDSAPILTAFNSSHKGRINCNSNTTPIVHLKGDANTLKCLRYRFKKHCTLYTAVSSTWHWTGHNVKHKSAIVTLTYDSEWQRDQFLSQVKIPKTITVSTGFMSI\";\n    * var mySequence = new Sequence({\n    * \t\tsequence : theSequence,\n    * \t\ttarget : \"YourOwnDivId\",\n    * \t\tformat : 'CODATA',\n    * \t\tid : 'P918283',\n    * \t\tannotations: [\n    *        { name:\"CATH\", \n    * \t  \t\tcolor:\"#F0F020\", \n    * \t  \t\thtml: \"Using color code #F0F020 \", \n    * \t  \t\tregions: [{start: 122, end: 135}]\n    * \t\t  },\n    *        { name:\"TEST\", \n    *          html:\"&lt;br&gt; Example of &lt;b&gt;HTML&lt;/b&gt;\", \n    *          color:\"green\", \n    *          regions: [\n    *            {start: 285, end: 292},\n    *            {start: 293, end: 314, color: \"#2E4988\"}]\n    *        }\n    *      ],\n    *      highlights : [\n    *      \t{ start:30, end:42, color:\"white\", background:\"green\", id:\"spin1\" },\n    *      \t{ start:139, end:140 }, \n    *      \t{ start:631, end:633, color:\"white\", background:\"blue\" }\n    *      ]\n    * });\t\n    * \n    */\n\n    var Class = require('js-class');\n    var EVT_ON_SELECTION_CHANGE = 'onSelectionChange';\n    var EVT_ON_SELECTION_CHANGED = 'onSelectionChanged';\n    var EVT_ON_ANNOTATION_CLICKED = 'onAnnotationClicked';\n    __webpack_require__.g.Sequence = Class( /** @lends Sequence# */\n    {\n      constructor: function constructor(options) {\n        var self = this;\n        this.opt = jQuery.extend(this.opt, options);\n        this._container = jQuery(this.opt.target);\n\n        // legacy support (target id without '#')\n        if (this._container.length == 0) {\n          this._container = jQuery('#' + this.opt.target);\n        }\n        if (this._container.length == 0) {\n          console.log('empty target container');\n        }\n\n        // legacy: copy target id\n        this.opt.target = this._container[0].id;\n\n        // Lazy initialization \n        this._container.ready(function () {\n          self._initialize();\n        });\n      },\n      /**\n      * Default values for the options\n      * @name Sequence-opt\n      */\n      opt: {\n        sequence: '',\n        id: '',\n        target: '',\n        format: 'FASTA',\n        selection: {\n          start: 0,\n          end: 0\n        },\n        columns: {\n          size: 35,\n          spacedEach: 10\n        },\n        highlights: [],\n        annotations: [],\n        sequenceUrl: 'http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/sequence',\n        // Styles \n        selectionColor: 'Yellow',\n        selectionFontColor: 'black',\n        highlightFontColor: 'red',\n        highlightBackgroundColor: 'white',\n        fontColor: 'inherit',\n        backgroundColor: 'inherit',\n        width: undefined,\n        height: undefined,\n        formatSelectorVisible: true\n      },\n      /**\n      * Array containing the supported event names\n      * @name Sequence-eventTypes\n      */\n      eventTypes: [\n      /**\n      * @name Sequence#onSelectionChanged\n      * @event\n      * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.\n      * @eventData {Object} source The component which did triggered the event.\n      * @eventData {string} type The name of the event.\n      * @eventData {int} start A number indicating the start of the selection.\n      * @eventData {int} end A number indicating the ending of selection.\n      * @example \n      * mySequence.onSelectionChanged(\n      *    function( objEvent ) {\n      *       alert(\"Selected: \" + objEvent.start + \", \" + objEvent.end );\n      *    }\n      * ); \n      * \n      * */\n      'onSelectionChanged',\n      /**\n      * @name Sequence#onSelectionChange\n      * @event\n      * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.\n      * @eventData {Object} source The component which did triggered the event.\n      * @eventData {string} type The name of the event.\n      * @eventData {int} start A number indicating the start of the selection.\n      * @eventData {int} end A number indicating the ending of selection.\n      * @example \n      * mySequence.onSelectionChange(\n      *    function( objEvent ) {\n      *       alert(\"Selection in progress: \" + objEvent.start + \", \" + objEvent.end );\n      *    }\n      * );  \n      * \n      * \n      * */\n      'onSelectionChange',\n      /**\n      * @name Sequence#onAnnotationClicked\n      * @event\n      * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.\n      * @eventData {Object} source The component which did triggered the event.\n      * @eventData {string} type The name of the event.\n      * @eventData {string} name The name of the selected annotation.\n      * @eventData {int} pos A number indicating the position of the selected amino acid.\n      * @example \n      * mySequence.onAnnotationClicked(\n      *    function( objEvent ) {\n      *       alert(\"Clicked \" + objEvent.name + \" on position \" + objEvent.pos );\n      *    }\n      * );  \n      * \n      * */\n      'onAnnotationClicked'],\n      getId: function getId() {\n        return this.opt.id;\n      },\n      // internal members\n      _headerDiv: null,\n      _contentDiv: null,\n      // Methods\n\n      _initialize: function _initialize() {\n        if (this.opt.width !== undefined) {\n          this._container.width(this.opt.width);\n        }\n        if (this.opt.height !== undefined) {\n          this._container.height(this.opt.height);\n        }\n\n        // DIV for the format selector\n        this._buildFormatSelector();\n\n        // DIV for the sequence\n        this._contentDiv = jQuery('<div/>').appendTo(this._container);\n\n        // Initialize highlighting \n        this._highlights = this.opt.highlights;\n\n        // Initialize annotations\n        this._annotations = this.opt.annotations;\n\n        //Initialize tooltip\n        var tooltip = 'sequenceTip' + this.opt.target;\n        jQuery('<div id=\"' + tooltip + '\"></div>').css({\n          'position': 'absolute',\n          'z-index': '999999',\n          'color': '#fff',\n          'font-size': '12px',\n          'width': 'auto',\n          'display': 'none'\n        }).addClass('tooltip').appendTo('body').hide();\n        this.opt._tooltip = document.getElementById(tooltip);\n        if (this.opt.sequence) {\n          this._redraw();\n        } else if (this.opt.id) {\n          this._requestSequence(this.opt.id);\n        } else {\n          this.clearSequence('No sequence available', '../biojs/css/images/warning_icon.png');\n        }\n      },\n      /**\n      * Shows the columns indicated by the indexes array.\n      * @param {string} seq The sequence strand.\n      * @param {string} [identifier] Sequence identifier.\n      * \n      * @example \n      * mySequence.setSequence(\"P99999\");\n      * \n      */\n      setSequence: function setSequence(seq, identifier) {\n        if (seq.match(/^([A-N,R-Z][0-9][A-Z][A-Z, 0-9][A-Z, 0-9][0-9])|([O,P,Q][0-9][A-Z, 0-9][A-Z, 0-9][A-Z, 0-9][0-9])(\\.\\d+)?$/i)) {\n          this._requestSequence(arguments[0]);\n        } else {\n          this.opt.sequence = seq;\n          this.opt.id = identifier;\n          this._highlights = [];\n          this._highlightsCount = 0;\n          this.opt.selection = {\n            start: 0,\n            end: 0\n          };\n          this._annotations = [];\n          this._contentDiv.children().remove();\n          this._redraw();\n        }\n      },\n      _requestSequence: function _requestSequence(accession) {\n        var self = this;\n        console.log('Requesting sequence for: ' + accession);\n        jQuery.ajax({\n          url: self.opt.sequenceUrl,\n          dataType: 'xml',\n          data: {\n            segment: accession\n          },\n          success: function success(xml) {\n            try {\n              var sequenceNode = jQuery(xml).find('SEQUENCE:first');\n              self.setSequence(sequenceNode.text(), sequenceNode.attr('id'), sequenceNode.attr('label'));\n            } catch (e) {\n              console.log('Error decoding response data: ' + e.message);\n              self.clearSequence('No sequence available', '../biojs/css/images/warning_icon.png');\n            }\n          },\n          error: function error(jqXHR, textStatus, errorThrown) {\n            console.log('Error decoding response data: ' + textStatus);\n            self.clearSequence('Error requesting the sequence to the server ' + this.url, '../biojs/css/images/warning_icon.png');\n          }\n        });\n      },\n      /**\n      * Shows the columns indicated by the indexes array.\n      * @param {string} [showMessage] Message to be showed.\n      * @param {string} [icon] Icon to be showed a side of the message\n      * \n      * @example \n      * mySequence.clearSequence(\"No sequence available\", \"../biojs/css/images/warning_icon.png\");\n      * \n      */\n      clearSequence: function clearSequence(showMessage, icon) {\n        var message = undefined;\n        this.opt.sequence = '';\n        this.opt.id = '';\n        this._highlights = [];\n        this._highlightsCount = 0;\n        this.opt.selection = {\n          start: 0,\n          end: 0\n        };\n        this._annotations = [];\n        this._contentDiv.children().remove();\n        this._headerDiv.hide();\n        if (undefined !== showMessage) {\n          message = jQuery('<div>' + showMessage + '</div>').appendTo(this._contentDiv).addClass('message');\n          if (undefined !== icon) {\n            message.css({\n              'background': 'transparent url(\"' + icon + '\") no-repeat center left',\n              'padding-left': '20px'\n            });\n          }\n        }\n      },\n      /**\n      * Set the current selection in the sequence causing the event {@link Sequence#onSelectionChanged}\n      *\n      * @example\n      * // set selection from the position 100 to 150 \n      * mySequence.setSelection(100, 150);\n      * \n      * @param {int} start The starting character of the selection.\n      * @param {int} end The ending character of the selection\n      */\n      setSelection: function setSelection(start, end) {\n        if (start > end) {\n          var aux = end;\n          end = start;\n          start = aux;\n        }\n        if (start != this.opt.selection.start || end != this.opt.selection.end) {\n          this._setSelection(start, end);\n          this.trigger(EVT_ON_SELECTION_CHANGED, {\n            'start': start,\n            'end': end\n          });\n        }\n      },\n      _buildFormatSelector: function _buildFormatSelector() {\n        var self = this;\n        this._headerDiv = jQuery('<div></div>').appendTo(this._container);\n        this._headerDiv.append('Format: ');\n        this._formatSelector = jQuery('<select> ' + '<option value=\"FASTA\">FASTA</option>' + '<option value=\"CODATA\">CODATA</option>' + '<option value=\"PRIDE\">PRIDE</option>' + '<option value=\"RAW\">RAW</option></select>').appendTo(self._headerDiv);\n        this._formatSelector.change(function (e) {\n          self.opt.format = jQuery(this).val();\n          self._redraw();\n        });\n        this._formatSelector.val(self.opt.format);\n        this.formatSelectorVisible(this.opt.formatSelectorVisible);\n      },\n      /**\n      * Highlights a region using the font color defined in {Sequence#highlightFontColor} by default is red.\n      *\n      * @example\n      * // highlight the characters within the position 100 to 150, included.\n      * mySequence.addHighlight( { \"start\": 100, \"end\": 150, \"color\": \"white\", \"background\": \"red\", \"id\": \"aaa\" } );\n      * \n      * @param {Object} h The highlight defined as follows:\n      * \t\n      * \n      * @return {int} representing the id of the highlight on the internal array. Returns -1 on failure  \n      */\n      addHighlight: function addHighlight(h) {\n        var id = '-1';\n        var color = '';\n        var background = '';\n        var highlight = {};\n        if (h instanceof Object && h.start <= h.end) {\n          color = 'string' == typeof h.color ? h.color : this.opt.highlightFontColor;\n          background = 'string' == typeof h.background ? h.background : this.opt.highlightBackgroundColor;\n          id = 'string' == typeof h.id ? h.id : new Number(this._highlightsCount++).toString();\n          highlight = {\n            'start': h.start,\n            'end': h.end,\n            'color': color,\n            'background': background,\n            'id': id\n          };\n          this._highlights.push(highlight);\n          this._applyHighlight(highlight);\n          this._restoreSelection(h.start, h.end);\n        }\n        return id;\n      },\n      /* \n      * Function: Sequence._applyHighlight\n      * Purpose:  Apply the specified color and background to a region between 'start' and 'end'.\n      * Returns:  -\n      * Inputs: highlight -> {Object} An object containing the fields start (int), end (int), \n      * \t\t\t\t\t\tcolor (HTML color string) and background (HTML color string).\n      */\n      _applyHighlight: function _applyHighlight(highlight) {\n        var seq = this._contentDiv.find('.sequence');\n        for (var i = highlight.start - 1; i < highlight.end; i++) {\n          zindex = jQuery(seq[i]).css('z-index');\n          if (zindex == 'auto') {\n            z = 1;\n            o = 1;\n          } else {\n            z = 0;\n            o = 0.5;\n          }\n          jQuery(seq[i]).css({\n            'color': highlight.color,\n            'background-color': highlight.background,\n            'z-index': z,\n            'opacity': o\n          }).addClass('highlighted');\n        }\n      },\n      /* \n      * Function: Sequence._applyHighlights\n      * Purpose:  Apply the specified highlights.\n      * Returns:  -\n      * Inputs: highlights -> {Object[]} An array containing the highlights to be applied.\n      */\n      _applyHighlights: function _applyHighlights(highlights) {\n        for (var i in highlights) {\n          this._applyHighlight(highlights[i]);\n        }\n      },\n      /* \n      * Function: Sequence._restoreHighlights\n      * Purpose:  Repaint the highlights in the specified region.\n      * Returns:  -\n      * Inputs: start -> {int} Start of the region to be restored.\n      * \t\t   end -> {int} End of the region to be restored.\n      */\n      _restoreHighlights: function _restoreHighlights(start, end) {\n        var h = this._highlights;\n        // paint the region using default blank settings\n        this._applyHighlight({\n          'start': start,\n          'end': end,\n          'color': this.opt.fontColor,\n          'background': this.opt.backgroundColor\n        });\n        // restore highlights in that region\n        for (var i in h) {\n          // interval intersects with highlight i ?\n          if (!(h[i].start > end || h[i].end < start)) {\n            a = h[i].start < start ? start : h[i].start;\n            b = h[i].end > end ? end : h[i].end;\n            this._applyHighlight({\n              'start': a,\n              'end': b,\n              'color': h[i].color,\n              'background': h[i].background\n            });\n          }\n        }\n      },\n      /* \n      * Function: Sequence._restoreSelection\n      * Purpose:  Repaint the current selection in the specified region. \n      * \t\t\t It is used in the case of any highlight do overriding of the current selection. \n      * Returns:  -\n      * Inputs: start -> {int} Start of the region to be restored.\n      * \t\t   end -> {int} End of the region to be restored.\n      */\n      _restoreSelection: function _restoreSelection(start, end) {\n        var sel = this.opt.selection;\n        // interval intersects with current selection ?\n        // restore selection\n        if (!(start > sel.end || end < sel.start)) {\n          a = start < sel.start ? sel.start : start;\n          b = end > sel.end ? sel.end : end;\n          this._applyHighlight({\n            'start': a,\n            'end': b,\n            'color': this.opt.selectionFontColor,\n            'background': this.opt.selectionColor\n          });\n        }\n      },\n      /**\n      * Remove a highlight.\n      *\n      * @example\n      * // Clear the highlighted characters within the position 100 to 150, included.\n      * mySequence.removeHighlight(\"spin1\");\n      * \n      * @param {string} id The id of the highlight on the internal array. This value is returned by method highlight.\n      */\n      removeHighlight: function removeHighlight(id) {\n        var h = this._highlights;\n        for (i in h) {\n          if (h[i].id == id) {\n            start = h[i].start;\n            end = h[i].end;\n            h.splice(i, 1);\n            this._restoreHighlights(start, end);\n            this._restoreSelection(start, end);\n            break;\n          }\n        }\n      },\n      /**\n      * Remove all the highlights of whole sequence.\n      *\n      * @example\n      * mySequence.removeAllHighlights();\n      */\n      removeAllHighlights: function removeAllHighlights() {\n        this._highlights = [];\n        this._restoreHighlights(1, this.opt.sequence.length);\n        this._restoreSelection(1, this.opt.sequence.length);\n      },\n      /**\n      * Changes the current displaying format of the sequence.\n      *\n      * @example\n      * // Set format to 'FASTA'.\n      * mySequence.setFormat('FASTA');\n      * \n      * @param {string} format The format for the sequence to be displayed.\n      */\n      setFormat: function setFormat(format) {\n        if (this.opt.format != format.toUpperCase()) {\n          this.opt.format = format.toUpperCase();\n          this._redraw();\n        }\n        var self = this;\n        // Changes the option in the combo box\n        this._headerDiv.find('option').each(function () {\n          if (jQuery(this).val() == self.opt.format.toUpperCase()) {\n            jQuery(this).attr('selected', 'selected');\n          }\n        });\n      },\n      /**\n      * Changes the current number of columns in the displayed sequence.\n      *\n      * @example\n      * // Set the number of columns to 70.\n      * mySequence.setNumCols(70);\n      * \n      * @param {int} numCols The number of columns.\n      */\n      setNumCols: function setNumCols(numCols) {\n        this.opt.columns.size = numCols;\n        this._redraw();\n      },\n      /**\n      * Set the visibility of the drop-down list of formats.\n      * \n      * @param {boolean} visible true: show; false: hide.\n      */\n      formatSelectorVisible: function formatSelectorVisible(visible) {\n        if (visible) {\n          this._headerDiv.show();\n        } else {\n          this._headerDiv.hide();\n        }\n      },\n      /**\n      * This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'true' argument.\n      *\n      * @example\n      * // Shows the format selector.\n      * mySequence.showFormatSelector();\n      * \n      */\n      showFormatSelector: function showFormatSelector() {\n        this._headerDiv.show();\n      },\n      /**\n      * This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'false' argument.\n      * \n      * @example\n      * // Hides the format selector.\n      * mySequence.hideFormatSelector();\n      * \n      */\n      hideFormatSelector: function hideFormatSelector() {\n        this._headerDiv.hide();\n      },\n      /**\n      * Hides the whole component.\n      * \n      */\n      hide: function hide() {\n        this._headerDiv.hide();\n        this._contentDiv.hide();\n      },\n      /**\n      * Shows the whole component.\n      * \n      */\n      show: function show() {\n        this._headerDiv.show();\n        this._contentDiv.show();\n      },\n      /* \n      * Function: Sequence._setSelection\n      * Purpose:  Update the current selection. \n      * Returns:  -\n      * Inputs: start -> {int} Start of the region to be selected.\n      * \t\t   end -> {int} End of the region to be selected.\n      */\n      _setSelection: function _setSelection(start, end) {\n        //alert(\"adsas\");\n\n        var current = this.opt.selection;\n        var change = {};\n\n        // Which is the change on selection?\n        if (current.start == start) {\n          // forward?\n          if (current.end < end) {\n            change.start = current.end;\n            change.end = end;\n          } else {\n            this._restoreHighlights(end + 1, current.end);\n          }\n        } else if (current.end == end) {\n          // forward?\n          if (current.start > start) {\n            change.start = start;\n            change.end = current.start;\n          } else {\n            this._restoreHighlights(current.start, start - 1);\n          }\n        } else {\n          this._restoreHighlights(current.start, current.end);\n          change.start = start;\n          change.end = end;\n        }\n        current.start = start;\n        current.end = end;\n      },\n      /* \n      * Function: Sequence._repaintSelection\n      * Purpose:  Repaint the whole current selection. \n      * Returns:  -\n      * Inputs: -\n      */\n      _repaintSelection: function _repaintSelection() {\n        var s = this.opt.selection;\n        this._setSelection(0, 0);\n        this._setSelection(s.start, s.end);\n      },\n      /* \n      * Function: Sequence._redraw\n      * Purpose:  Repaint the current sequence. \n      * Returns:  -\n      * Inputs: -\n      */\n      _redraw: function _redraw() {\n        var i = 0;\n        var self = this;\n\n        // Reset the content\n        //this._contentDiv.text('');\n        this._contentDiv.children().remove();\n\n        // Rebuild the spans of the sequence \n        // according to format\n        if (this.opt.format == 'RAW') {\n          this._drawRaw();\n        } else if (this.opt.format == 'CODATA') {\n          this._drawCodata();\n        } else if (this.opt.format == 'FASTA') {\n          this._drawFasta();\n        } else {\n          this.opt.format = 'PRIDE';\n          this._drawPride();\n        }\n\n        // Restore the highlighted regions\n        this._applyHighlights(this._highlights);\n        this._repaintSelection();\n        this._addSpanEvents();\n      },\n      /* \n      * Function: Sequence._drawFasta\n      * Purpose:  Repaint the current sequence using FASTA format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawFasta: function _drawFasta() {\n        var self = this;\n        var a = this.opt.sequence.toUpperCase().split('');\n        var pre = jQuery('<pre></pre>').appendTo(this._contentDiv);\n        var i = 1;\n        var arr = [];\n        var str = '>' + this.opt.id + ' ' + a.length + ' bp<br/>';\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numCols: numCols,\n          numColsForSpace: 0\n        };\n        str += this._drawSequence(a, opt);\n        pre.html(str);\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawCodata\n      * Purpose:  Repaint the current sequence using CODATA format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawCodata: function _drawCodata() {\n        var seq = this.opt.sequence.toUpperCase().split('');\n\n        // Add header.\n        if (this.opt.formatOptions !== undefined) {\n          if (this.opt.formatOptions.title !== undefined) {\n            if (this.opt.formatOptions.title != false) {\n              var header = jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').addClass('header').appendTo(this._contentDiv);\n              header.html('ENTRY           ' + this.opt.id + '<br/>SEQUENCE<br/>');\n            }\n          }\n        }\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numLeft: true,\n          numLeftSize: 7,\n          numLeftPad: ' ',\n          numTop: true,\n          numTopEach: 5,\n          numCols: numCols,\n          numColsForSpace: 0,\n          spaceBetweenChars: true\n        };\n        this._drawSequence(seq, opt);\n\n        // Add footer.\n        if (this.opt.formatOptions !== undefined) {\n          if (this.opt.formatOptions.footer !== undefined) {\n            if (this.opt.formatOptions.footer != false) {\n              var footer = jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').addClass('footer').appendTo(this._contentDiv);\n              footer.html('<br/>///');\n            }\n          }\n        }\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawAnnotations\n      * Purpose:  Paint the annotations on the sequence.  \n      * Returns:  -\n      * Inputs: settings -> {object} \n      */\n      _drawAnnotations: function _drawAnnotations(settings) {\n        var self = this;\n        var a = this.opt.sequence.toLowerCase().split('');\n        var annotations = this._annotations;\n        var leftSpaces = '';\n        var row = '';\n        var annot = '';\n\n        // Index at the left?\n        if (settings.numLeft) {\n          leftSpaces += this._formatIndex(' ', settings.numLeftSize + 2, ' ');\n        }\n        for (var i = 0; i < a.length; i += settings.numCols) {\n          row = '';\n          for (var key in annotations) {\n            annotations[key].id = this.getId() + '_' + key;\n            annot = this._getHTMLRowAnnot(i + 1, annotations[key], settings);\n            if (annot.length > 0) {\n              row += '<br/>';\n              row += leftSpaces;\n              row += annot;\n              row += '<br/>';\n            }\n          }\n          var numCols = settings.numCols;\n          var charRemaining = a.length - i;\n          if (charRemaining < numCols) {\n            numCols = charRemaining;\n          }\n          if (settings.numRight) {\n            jQuery(row).insertAfter('div#' + self.opt.target + ' div pre span#numRight_' + this.getId() + '_' + (i + numCols));\n          } else {\n            jQuery(row).insertAfter('div#' + self.opt.target + ' div pre span#' + this.getId() + '_' + (i + numCols));\n          }\n        }\n\n        // add tool tips and background' coloring effect\n        jQuery(this._contentDiv).find('.annotation').each(function () {\n          self._addToolTip(this, function () {\n            return self._getAnnotationString(jQuery(this).attr('id'));\n          });\n          jQuery(this).mouseover(function (e) {\n            jQuery('.annotation.' + jQuery(e.target).attr('id')).each(function () {\n              jQuery(this).css('background-color', jQuery(this).attr('color'));\n            });\n          }).mouseout(function () {\n            jQuery('.annotation').css('background-color', 'transparent');\n          }).click(function (e) {\n            var name = undefined;\n            var id = jQuery(e.target).attr('id');\n            for (var i = 0; i < self._annotations.length; i++) {\n              if (self._annotations[i].id == id) {\n                name = self._annotations[i].name;\n                continue;\n              }\n            }\n            self.trigger(EVT_ON_ANNOTATION_CLICKED, {\n              'name': name\n              //\"pos\": parseInt( jQuery(e.target).attr(\"pos\") )\n            });\n          });\n        });\n      },\n\n      /* \n      * Function: Sequence._getAnnotationString\n      * Purpose:  Get the annotation text message for the tooltip \n      * Returns:  {string} Annotation text for the annotation\n      * Inputs:   id -> {int} index of the internal annotation array\n      */\n      _getAnnotationString: function _getAnnotationString(id) {\n        var annotation = this._annotations[id.substr(id.indexOf('_') + 1)];\n        return annotation.name + '<br/>' + (annotation.html ? annotation.html : '');\n      },\n      /* \n      * Function: Sequence._getHTMLRowAnnot\n      * Purpose:  Build an annotation\n      * Returns:  HTML of the annotation\n      * Inputs:   currentPos -> {int}\n      * \t\t\t annotation -> {Object} \n      *  \t\t settings -> {Object}\n      */\n      _getHTMLRowAnnot: function _getHTMLRowAnnot(currentPos, annotation, settings) {\n        var styleBegin = 'border-left:1px solid; border-bottom:1px solid; border-color:';\n        var styleOn = 'border-bottom:1px solid; border-color:';\n        var styleEnd = 'border-bottom:1px solid; border-right:1px solid; border-color:';\n        var styleBeginAndEnd = 'border-left:1px solid; border-right:1px solid; border-bottom:1px solid; border-color:';\n        var row = [];\n        var end = currentPos + settings.numCols;\n        var spaceBetweenChars = settings.spaceBetweenChars ? ' ' : '';\n        var defaultColor = annotation.color;\n        var id = annotation.id;\n        for (var pos = currentPos; pos < end; pos++) {\n          // regions\n          for (var r in annotation.regions) {\n            region = annotation.regions[r];\n            spaceAfter = '';\n            spaceAfter += pos % settings.numColsForSpace == 0 ? ' ' : '';\n            spaceAfter += spaceBetweenChars;\n            color = region.color ? region.color : defaultColor;\n            data = 'class=\"annotation ' + id + '\" id=\"' + id + '\" color=\"' + color + '\" pos=\"' + pos + '\"';\n            if (pos == region.start && pos == region.end) {\n              row[pos] = '<span style=\"' + styleBeginAndEnd + color + '\" ' + data + '> ';\n              row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (pos == region.start) {\n              row[pos] = '<span style=\"' + styleBegin + color + '\" ' + data + '> ';\n              row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (pos == region.end) {\n              row[pos] = '<span style=\"' + styleEnd + color + ' \" ' + data + '> ';\n              //row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (pos > region.start && pos < region.end) {\n              row[pos] = '<span style=\"' + styleOn + color + '\" ' + data + '> ';\n              row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (!row[pos]) {\n              row[pos] = ' ';\n              row[pos] += spaceAfter;\n            }\n          }\n        }\n        var str = row.join('');\n        return str.indexOf('span') == -1 ? '' : str;\n      },\n      /* \n      * Function: Sequence._drawRaw\n      * Purpose:  Repaint the current sequence using RAW format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawRaw: function _drawRaw() {\n        var self = this;\n        var a = this.opt.sequence.toLowerCase().split('');\n        var i = 0;\n        var arr = [];\n        var pre = jQuery('<pre></pre>').appendTo(this._contentDiv);\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numCols: numCols\n        };\n        pre.html(this._drawSequence(a, opt));\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawPride\n      * Purpose:  Repaint the current sequence using PRIDE format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawPride: function _drawPride() {\n        var seq = this.opt.sequence.toUpperCase().split('');\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numLeft: true,\n          numLeftSize: 5,\n          numLeftPad: ' ',\n          numRight: false,\n          numRightSize: 5,\n          numRightPad: '',\n          numCols: numCols,\n          numColsForSpace: this.opt.columns.spacedEach\n        };\n        this._drawSequence(seq, opt);\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawSequence\n      * Purpose:  Repaint the current sequence using CUSTOM format.  \n      * Returns:  -\n      * Inputs:   a -> {char[]} a The sequence strand.\n      * \t\t\t opt -> {Object} opt The CUSTOM format.\n      */\n      _drawSequence: function _drawSequence(a, opt) {\n        var indL = '';\n        var indT = '';\n        var indR = '\\n';\n        var str = '';\n\n        // Index at top?\n        if (opt.numTop) {\n          indT += '<span class=\"numTop pos-marker\">';\n          var size = opt.spaceBetweenChars ? opt.numTopEach * 2 : opt.numTopEach;\n          if (opt.numLeft) {\n            indT += this._formatIndex(' ', opt.numLeftSize, ' ');\n          }\n          indT += this._formatIndex(' ', size, ' ');\n          for (var x = opt.numTopEach; x < opt.numCols; x += opt.numTopEach) {\n            indT += this._formatIndex(x, size, ' ', true);\n          }\n          indT += '</span>';\n        }\n\n        // Index at the left?\n        if (opt.numLeft) {\n          indL += '<span id=\"numLeft_' + this.getId() + '_' + 0 + '\"';\n          indL += 'class=\"pos-marker\">';\n          indL += this._formatIndex(1, opt.numLeftSize, opt.numLeftPad);\n          indL += '  ';\n          indL += '</span>';\n          indL += '\\n';\n        }\n        var j = 1;\n        for (var i = 1; i <= a.length; i++) {\n          if (i % opt.numCols == 0) {\n            str += '<span class=\"sequence\" id=\"' + this.getId() + '_' + i + '\">' + a[i - 1] + '</span>';\n            if (opt.numRight) {\n              indR += '<span id=\"numRight_' + this.getId() + '_' + i + '\"';\n              indR += 'class=\"pos-marker\">';\n              indR += '  ';\n              indR += this._formatIndex(i, opt.numRightSize, opt.numRightPad);\n              indR += '</span>';\n              indR += '\\n';\n            }\n            str += '<br/>';\n            var aaRemaining = a.length - i;\n            if (opt.numLeft && aaRemaining > 0) {\n              indL += '<span id=\"numLeft_' + this.getId() + '_' + i + '\"';\n              indL += 'class=\"pos-marker\">';\n              indL += this._formatIndex(i + 1, opt.numLeftSize, opt.numLeftPad);\n              indL += '  ';\n              indL += '</span>';\n              indL += '\\n';\n            }\n            j = 1;\n          } else {\n            str += '<span class=\"sequence\" id=\"' + this.getId() + '_' + i + '\"';\n            str += j % opt.numColsForSpace == 0 ? ' style=\"letter-spacing: 1em;\"' : '';\n            str += opt.spaceBetweenChars ? ' style=\"letter-spacing: 1em;\"' : '';\n            str += '\">' + a[i - 1];\n            str += '</span>';\n            j++;\n          }\n        }\n        str += '<br/>';\n        if (jQuery.browser.msie) {\n          str = '<pre>' + str + '</pre>';\n        }\n        var ret = [];\n        if (opt.numTop) {\n          jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(indT).addClass('indT').css({\n            color: '#aaa'\n          }).appendTo(this._contentDiv);\n        }\n        if (opt.numLeft) {\n          jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(indL).addClass('indL').css({\n            color: '#aaa',\n            display: 'inline-block'\n          }).appendTo(this._contentDiv);\n        }\n        jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(str).addClass('seqF').css({\n          display: 'inline-block'\n        }).appendTo(this._contentDiv);\n        if (opt.numRight) {\n          jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(indR).addClass('indR').css({\n            color: '#aaa',\n            display: 'inline-block'\n          }).appendTo(this._contentDiv);\n        }\n        return str;\n      },\n      /* \n      * Function: Sequence._formatIndex\n      * Purpose:  Build the HTML corresponding to counting numbers (top, left, right) in the strand.\n      * Returns:  -\n      * Inputs:   number -> {int} The number \n      * \t\t\t size -> {int} Number of bins to suit the number.\n      * \t\t\t fillingChar -> {char} Character to be used for filling out blank bins.\n      * \t\t\t alignLeft -> {bool} Tell if aligned to the left.\n      */\n      _formatIndex: function _formatIndex(number, size, fillingChar, alignLeft) {\n        var str = number.toString();\n        var filling = '';\n        var padding = size - str.length;\n        if (padding > 0) {\n          while (padding-- > 0) {\n            filling += '<span>' + fillingChar + '</span>';\n          }\n          if (alignLeft) {\n            str = number + filling;\n          } else {\n            str = filling + number;\n          }\n        }\n        return str;\n      },\n      /* \n      * Function: Sequence._addSpanEvents\n      * Purpose:  Add the event handlers to the strand.\n      * Returns:  -\n      * Inputs:   -\n      */\n      _addSpanEvents: function _addSpanEvents() {\n        var self = this;\n        var isMouseDown = false;\n        var clickPos;\n        var currentPos;\n        self._contentDiv.find('.sequence').each(function () {\n          // Register the starting position\n          jQuery(this).mousedown(function () {\n            var id = jQuery(this).attr('id');\n            currentPos = parseInt(id.substr(id.indexOf('_') + 1));\n            clickPos = currentPos;\n            self._setSelection(clickPos, currentPos);\n            isMouseDown = true;\n\n            // Selection is happening, raise an event\n            self.trigger(EVT_ON_SELECTION_CHANGE, {\n              'start': self.opt.selection.start,\n              'end': self.opt.selection.end\n            });\n          }).mouseover(function () {\n            // Update selection\n            // Show tooltip containing the position\n            var id = jQuery(this).attr('id');\n            currentPos = parseInt(id.substr(id.indexOf('_') + 1));\n            if (isMouseDown) {\n              if (currentPos > clickPos) {\n                self._setSelection(clickPos, currentPos);\n              } else {\n                self._setSelection(currentPos, clickPos);\n              }\n\n              // Selection is happening, raise an event\n              self.trigger(EVT_ON_SELECTION_CHANGE, {\n                'start': self.opt.selection.start,\n                'end': self.opt.selection.end\n              });\n            }\n          }).mouseup(function () {\n            isMouseDown = false;\n            // Selection is done, raise an event\n            self.trigger(EVT_ON_SELECTION_CHANGED, {\n              'start': self.opt.selection.start,\n              'end': self.opt.selection.end\n            });\n          });\n\n          // Add a tooltip for this sequence base.\n          self._addToolTip.call(self, this, function () {\n            if (isMouseDown) {\n              return '[' + self.opt.selection.start + ', ' + self.opt.selection.end + ']';\n            } else {\n              return currentPos;\n            }\n          });\n        }).css('cursor', 'pointer');\n      },\n      /* \n      * Function: Sequence._addTooltip\n      * Purpose:  Add a tooltip around the target DOM element provided as argument\n      * Returns:  -\n      * Inputs:   target -> {Element} DOM element wich is the targeted focus for the tooltip.\n      * \t\t\t cbGetMessageFunction -> {function} A callback function wich returns the message to be displayed in the tip.\n      */\n      _addToolTip: function _addToolTip(target, cbGetMessageFunction) {\n        var tipId = this.opt._tooltip;\n        jQuery(target).mouseover(function (e) {\n          var offset = jQuery(e.target).offset();\n          if (!jQuery(tipId).is(':visible')) {\n            jQuery(tipId).css({\n              'background-color': '#000',\n              'padding': '3px 10px 3px 10px',\n              'top': offset.top + jQuery(e.target).height() + 'px',\n              'left': offset.left + jQuery(e.target).width() + 'px'\n            }).animate({\n              opacity: '0.85'\n            }, 10).html(cbGetMessageFunction.call(target)).show();\n          }\n        }).mouseout(function () {\n          //Remove the appended tooltip template\n          jQuery(tipId).hide();\n        });\n      },\n      /**\n      * Annotate a set of intervals provided in the argument.\n      * \n      * @example\n      * // Annotations using regions with different colors.\n      * mySequence.addAnnotation({\n      *    name:\"UNIPROT\", \n      *    html:\"&lt;br&gt; Example of &lt;b&gt;HTML&lt;/b&gt;\", \n      *    color:\"green\", \n      *    regions: [\n      *       {start: 540, end: 560},\n      *       {start: 561, end:580, color: \"#FFA010\"}, \n      *       {start: 581, end:590, color: \"red\"}, \n      *       {start: 690, end:710}]\n      * });\n      * \n      * \n      * @param {Object} annotation The intervals belonging to the same annotation. \n      * Syntax: { name: &lt;value&gt;, color: &lt;HTMLColorCode&gt;, html: &lt;HTMLString&gt;, regions: [{ start: &lt;startVal1&gt;, end: &lt;endVal1&gt;}, ...,  { start: &lt;startValN&gt;, end: &lt;endValN&gt;}] }\n      */\n      addAnnotation: function addAnnotation(annotation) {\n        this._annotations.push(annotation);\n        this._redraw();\n      },\n      /**\n      * Removes an annotation by means of its name.\n      * \n      * @example \n      * // Remove the UNIPROT annotation.\n      * mySequence.removeAnnotation('UNIPROT'); \n      * \n      * @param {string} name The name of the annotation to be removed.\n      * \n      */\n      removeAnnotation: function removeAnnotation(name) {\n        for (var i = 0; i < this._annotations.length; i++) {\n          if (name != this._annotations[i].name) {\n            this._annotations.splice(i, 1);\n            this._redraw();\n            break;\n          }\n        }\n      },\n      /**\n      * Removes all the current annotations.\n      * \n      * @example \n      * mySequence.removeAllAnnotations(); \n      * \n      */\n      removeAllAnnotations: function removeAllAnnotations() {\n        this._annotations = [];\n        this._redraw();\n      }\n    });\n    require('biojs-events').mixin(Sequence.prototype);\n  }, {\n    'biojs-events': 2,\n    'jquery-browser-plugin': 20,\n    'js-class': 22\n  }],\n  2: [function (require, module, exports) {\n    var events = require('backbone-events-standalone');\n    events.onAll = function (callback, context) {\n      this.on('all', callback, context);\n      return this;\n    };\n\n    // Mixin utility\n    events.oldMixin = events.mixin;\n    events.mixin = function (proto) {\n      events.oldMixin(proto);\n      // add custom onAll\n      var exports = ['onAll'];\n      for (var i = 0; i < exports.length; i++) {\n        var name = exports[i];\n        proto[name] = this[name];\n      }\n      return proto;\n    };\n    module.exports = events;\n  }, {\n    'backbone-events-standalone': 4\n  }],\n  3: [function (require, module, exports) {\n    /**\n     * Standalone extraction of Backbone.Events, no external dependency required.\n     * Degrades nicely when Backone/underscore are already available in the current\n     * global context.\n     *\n     * Note that docs suggest to use underscore's `_.extend()` method to add Events\n     * support to some given object. A `mixin()` method has been added to the Events\n     * prototype to avoid using underscore for that sole purpose:\n     *\n     *     var myEventEmitter = BackboneEvents.mixin({});\n     *\n     * Or for a function constructor:\n     *\n     *     function MyConstructor(){}\n     *     MyConstructor.prototype.foo = function(){}\n     *     BackboneEvents.mixin(MyConstructor.prototype);\n     *\n     * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud Inc.\n     * (c) 2013 Nicolas Perriault\n     */\n    /* global exports:true, define, module */\n    (function () {\n      var root = this,\n        breaker = {},\n        nativeForEach = Array.prototype.forEach,\n        hasOwnProperty = Object.prototype.hasOwnProperty,\n        slice = Array.prototype.slice,\n        idCounter = 0;\n\n      // Returns a partial implementation matching the minimal API subset required\n      // by Backbone.Events\n      function miniscore() {\n        return {\n          keys: Object.keys || function (obj) {\n            if (_typeof(obj) !== 'object' && typeof obj !== 'function' || obj === null) {\n              throw new TypeError('keys() called on a non-object');\n            }\n            var key,\n              keys = [];\n            for (key in obj) {\n              if (obj.hasOwnProperty(key)) {\n                keys[keys.length] = key;\n              }\n            }\n            return keys;\n          },\n          uniqueId: function uniqueId(prefix) {\n            var id = ++idCounter + '';\n            return prefix ? prefix + id : id;\n          },\n          has: function has(obj, key) {\n            return hasOwnProperty.call(obj, key);\n          },\n          each: function each(obj, iterator, context) {\n            if (obj == null) return;\n            if (nativeForEach && obj.forEach === nativeForEach) {\n              obj.forEach(iterator, context);\n            } else if (obj.length === +obj.length) {\n              for (var i = 0, l = obj.length; i < l; i++) {\n                if (iterator.call(context, obj[i], i, obj) === breaker) return;\n              }\n            } else {\n              for (var key in obj) {\n                if (this.has(obj, key)) {\n                  if (iterator.call(context, obj[key], key, obj) === breaker) return;\n                }\n              }\n            }\n          },\n          once: function once(func) {\n            var ran = false,\n              memo;\n            return function () {\n              if (ran) return memo;\n              ran = true;\n              memo = func.apply(this, arguments);\n              func = null;\n              return memo;\n            };\n          }\n        };\n      }\n      var _ = miniscore(),\n        Events;\n\n      // Backbone.Events\n      // ---------------\n\n      // A module that can be mixed in to *any object* in order to provide it with\n      // custom events. You may bind with `on` or remove with `off` callback\n      // functions to an event; `trigger`-ing an event fires all callbacks in\n      // succession.\n      //\n      //     var object = {};\n      //     _.extend(object, Backbone.Events);\n      //     object.on('expand', function(){ alert('expanded'); });\n      //     object.trigger('expand');\n      //\n      Events = {\n        // Bind an event to a `callback` function. Passing `\"all\"` will bind\n        // the callback to all events fired.\n        on: function on(name, callback, context) {\n          if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;\n          this._events || (this._events = {});\n          var events = this._events[name] || (this._events[name] = []);\n          events.push({\n            callback: callback,\n            context: context,\n            ctx: context || this\n          });\n          return this;\n        },\n        // Bind an event to only be triggered a single time. After the first time\n        // the callback is invoked, it will be removed.\n        once: function once(name, callback, context) {\n          if (!eventsApi(this, 'once', name, [callback, context]) || !callback) return this;\n          var self = this;\n          var once = _.once(function () {\n            self.off(name, once);\n            callback.apply(this, arguments);\n          });\n          once._callback = callback;\n          return this.on(name, once, context);\n        },\n        // Remove one or many callbacks. If `context` is null, removes all\n        // callbacks with that function. If `callback` is null, removes all\n        // callbacks for the event. If `name` is null, removes all bound\n        // callbacks for all events.\n        off: function off(name, callback, context) {\n          var retain, ev, events, names, i, l, j, k;\n          if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;\n          if (!name && !callback && !context) {\n            this._events = {};\n            return this;\n          }\n          names = name ? [name] : _.keys(this._events);\n          for (i = 0, l = names.length; i < l; i++) {\n            name = names[i];\n            if (events = this._events[name]) {\n              this._events[name] = retain = [];\n              if (callback || context) {\n                for (j = 0, k = events.length; j < k; j++) {\n                  ev = events[j];\n                  if (callback && callback !== ev.callback && callback !== ev.callback._callback || context && context !== ev.context) {\n                    retain.push(ev);\n                  }\n                }\n              }\n              if (!retain.length) delete this._events[name];\n            }\n          }\n          return this;\n        },\n        // Trigger one or many events, firing all bound callbacks. Callbacks are\n        // passed the same arguments as `trigger` is, apart from the event name\n        // (unless you're listening on `\"all\"`, which will cause your callback to\n        // receive the true name of the event as the first argument).\n        trigger: function trigger(name) {\n          if (!this._events) return this;\n          var args = slice.call(arguments, 1);\n          if (!eventsApi(this, 'trigger', name, args)) return this;\n          var events = this._events[name];\n          var allEvents = this._events.all;\n          if (events) triggerEvents(events, args);\n          if (allEvents) triggerEvents(allEvents, arguments);\n          return this;\n        },\n        // Tell this object to stop listening to either specific events ... or\n        // to every object it's currently listening to.\n        stopListening: function stopListening(obj, name, callback) {\n          var listeners = this._listeners;\n          if (!listeners) return this;\n          var deleteListener = !name && !callback;\n          if (_typeof(name) === 'object') callback = this;\n          if (obj) (listeners = {})[obj._listenerId] = obj;\n          for (var id in listeners) {\n            listeners[id].off(name, callback, this);\n            if (deleteListener) delete this._listeners[id];\n          }\n          return this;\n        }\n      };\n\n      // Regular expression used to split event strings.\n      var eventSplitter = /\\s+/;\n\n      // Implement fancy features of the Events API such as multiple event\n      // names `\"change blur\"` and jQuery-style event maps `{change: action}`\n      // in terms of the existing API.\n      var eventsApi = function eventsApi(obj, action, name, rest) {\n        if (!name) return true;\n\n        // Handle event maps.\n        if (_typeof(name) === 'object') {\n          for (var key in name) {\n            obj[action].apply(obj, [key, name[key]].concat(rest));\n          }\n          return false;\n        }\n\n        // Handle space separated event names.\n        if (eventSplitter.test(name)) {\n          var names = name.split(eventSplitter);\n          for (var i = 0, l = names.length; i < l; i++) {\n            obj[action].apply(obj, [names[i]].concat(rest));\n          }\n          return false;\n        }\n        return true;\n      };\n\n      // A difficult-to-believe, but optimized internal dispatch function for\n      // triggering events. Tries to keep the usual cases speedy (most internal\n      // Backbone events have 3 arguments).\n      var triggerEvents = function triggerEvents(events, args) {\n        var ev,\n          i = -1,\n          l = events.length,\n          a1 = args[0],\n          a2 = args[1],\n          a3 = args[2];\n        switch (args.length) {\n          case 0:\n            while (++i < l) {\n              (ev = events[i]).callback.call(ev.ctx);\n            }\n            return;\n          case 1:\n            while (++i < l) {\n              (ev = events[i]).callback.call(ev.ctx, a1);\n            }\n            return;\n          case 2:\n            while (++i < l) {\n              (ev = events[i]).callback.call(ev.ctx, a1, a2);\n            }\n            return;\n          case 3:\n            while (++i < l) {\n              (ev = events[i]).callback.call(ev.ctx, a1, a2, a3);\n            }\n            return;\n          default:\n            while (++i < l) {\n              (ev = events[i]).callback.apply(ev.ctx, args);\n            }\n        }\n      };\n      var listenMethods = {\n        listenTo: 'on',\n        listenToOnce: 'once'\n      };\n\n      // Inversion-of-control versions of `on` and `once`. Tell *this* object to\n      // listen to an event in another object ... keeping track of what it's\n      // listening to.\n      _.each(listenMethods, function (implementation, method) {\n        Events[method] = function (obj, name, callback) {\n          var listeners = this._listeners || (this._listeners = {});\n          var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));\n          listeners[id] = obj;\n          if (_typeof(name) === 'object') callback = this;\n          obj[implementation](name, callback, this);\n          return this;\n        };\n      });\n\n      // Aliases for backwards compatibility.\n      Events.bind = Events.on;\n      Events.unbind = Events.off;\n\n      // Mixin utility\n      Events.mixin = function (proto) {\n        var exports = ['on', 'once', 'off', 'trigger', 'stopListening', 'listenTo', 'listenToOnce', 'bind', 'unbind'];\n        _.each(exports, function (name) {\n          proto[name] = this[name];\n        }, this);\n        return proto;\n      };\n\n      // Export Events as BackboneEvents depending on current context\n      if (typeof define === 'function') {\n        define(function () {\n          return Events;\n        });\n      } else if (typeof exports !== 'undefined') {\n        if (typeof module !== 'undefined' && module.exports) {\n          exports = module.exports = Events;\n        }\n        exports.BackboneEvents = Events;\n      } else {\n        root.BackboneEvents = Events;\n      }\n    })(this);\n  }, {}],\n  4: [function (require, module, exports) {\n    module.exports = require('./backbone-events-standalone');\n  }, {\n    './backbone-events-standalone': 3\n  }],\n  5: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var GenericReader, xhr;\n    xhr = require('nets');\n    module.exports = GenericReader = function () {\n      function GenericReader() {}\n      GenericReader.read = function (url, callback) {\n        var onret;\n        onret = function (_this) {\n          return function (err, response, text) {\n            return _this._onRetrieval(text, callback);\n          };\n        }(this);\n        return xhr(url, onret);\n      };\n      GenericReader._onRetrieval = function (text, callback) {\n        var rText;\n        rText = this.parse(text);\n        return callback(rText);\n      };\n      return GenericReader;\n    }();\n  }, {\n    'nets': 12\n  }],\n  6: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var Fasta,\n      GenericReader,\n      Seq,\n      Str,\n      __hasProp = {}.hasOwnProperty,\n      __extends = function __extends(child, parent) {\n        for (var key in parent) {\n          if (__hasProp.call(parent, key)) child[key] = parent[key];\n        }\n        function ctor() {\n          this.constructor = child;\n        }\n        ctor.prototype = parent.prototype;\n        child.prototype = new ctor();\n        child.__super__ = parent.prototype;\n        return child;\n      };\n    Str = require('./strings');\n    GenericReader = require('./generic_reader');\n    Seq = require('biojs-model').seq;\n    module.exports = Fasta = function (_super) {\n      __extends(Fasta, _super);\n      function Fasta() {\n        return Fasta.__super__.constructor.apply(this, arguments);\n      }\n      Fasta.parse = function (text) {\n        var currentSeq, database, databaseID, identifiers, k, label, line, seqs, _i, _len;\n        seqs = [];\n        if (Object.prototype.toString.call(text) !== '[object Array]') {\n          text = text.split('\\n');\n        }\n        for (_i = 0, _len = text.length; _i < _len; _i++) {\n          line = text[_i];\n          if (line[0] === '>' || line[0] === ';') {\n            label = line.slice(1);\n            currentSeq = new Seq('', label, seqs.length);\n            seqs.push(currentSeq);\n            if (Str.contains('|', line)) {\n              identifiers = label.split('|');\n              k = 1;\n              while (k < identifiers.length) {\n                database = identifiers[k];\n                databaseID = identifiers[k + 1];\n                currentSeq.meta[database] = databaseID;\n                k += 2;\n              }\n              currentSeq.name = identifiers[identifiers.length - 1];\n            }\n          } else {\n            currentSeq.seq += line;\n          }\n        }\n        return seqs;\n      };\n      return Fasta;\n    }(GenericReader);\n  }, {\n    './generic_reader': 5,\n    './strings': 7,\n    'biojs-model': 10\n  }],\n  7: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var strings;\n    strings = {\n      contains: function contains(text, search) {\n        return ''.indexOf.call(text, search, 0) !== -1;\n      }\n    };\n    module.exports = strings;\n  }, {}],\n  8: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var Utils;\n    Utils = {};\n    Utils.splitNChars = function (txt, num) {\n      var i, result, _i, _ref;\n      result = [];\n      for (i = _i = 0, _ref = txt.length - 1; num > 0 ? _i <= _ref : _i >= _ref; i = _i += num) {\n        result.push(txt.substr(i, num));\n      }\n      return result;\n    };\n    module.exports = Utils;\n  }, {}],\n  9: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var FastaExporter, Utils;\n    Utils = require('./utils');\n    module.exports = FastaExporter = function () {\n      function FastaExporter() {}\n      FastaExporter['export'] = function (seqs, access) {\n        var seq, text, _i, _len;\n        text = '';\n        for (_i = 0, _len = seqs.length; _i < _len; _i++) {\n          seq = seqs[_i];\n          if (access != null) {\n            seq = access(seq);\n          }\n          text += '>' + seq.name + '\\n';\n          text += Utils.splitNChars(seq.seq, 80).join('\\n');\n          text += '\\n';\n        }\n        return text;\n      };\n      return FastaExporter;\n    }();\n  }, {\n    './utils': 8\n  }],\n  10: [function (require, module, exports) {\n    module.exports.seq = require('./seq');\n  }, {\n    './seq': 11\n  }],\n  11: [function (require, module, exports) {\n    module.exports = function (seq, name, id) {\n      this.seq = seq;\n      this.name = name;\n      this.id = id;\n      this.meta = {};\n    };\n  }, {}],\n  12: [function (require, module, exports) {\n    var req = require('request');\n    module.exports = Nets;\n    function Nets(uri, opts, cb) {\n      req(uri, opts, cb);\n    }\n  }, {\n    'request': 13\n  }],\n  13: [function (require, module, exports) {\n    var window = require('global/window');\n    var once = require('once');\n    var parseHeaders = require('parse-headers');\n    var messages = {\n      '0': 'Internal XMLHttpRequest Error',\n      '4': '4xx Client Error',\n      '5': '5xx Server Error'\n    };\n    var XHR = window.XMLHttpRequest || noop;\n    var XDR = 'withCredentials' in new XHR() ? XHR : window.XDomainRequest;\n    module.exports = createXHR;\n    function createXHR(options, callback) {\n      if (typeof options === 'string') {\n        options = {\n          uri: options\n        };\n      }\n      options = options || {};\n      callback = once(callback);\n      var xhr = options.xhr || null;\n      if (!xhr) {\n        if (options.cors || options.useXDR) {\n          xhr = new XDR();\n        } else {\n          xhr = new XHR();\n        }\n      }\n      var uri = xhr.url = options.uri || options.url;\n      var method = xhr.method = options.method || 'GET';\n      var body = options.body || options.data;\n      var headers = xhr.headers = options.headers || {};\n      var sync = !!options.sync;\n      var isJson = false;\n      var key;\n      var load = options.response ? loadResponse : loadXhr;\n      if ('json' in options) {\n        isJson = true;\n        headers['Accept'] = 'application/json';\n        if (method !== 'GET' && method !== 'HEAD') {\n          headers['Content-Type'] = 'application/json';\n          body = JSON.stringify(options.json);\n        }\n      }\n      xhr.onreadystatechange = readystatechange;\n      xhr.onload = load;\n      xhr.onerror = error;\n      // IE9 must have onprogress be set to a unique function.\n      xhr.onprogress = function () {\n        // IE must die\n      };\n      // hate IE\n      xhr.ontimeout = noop;\n      xhr.open(method, uri, !sync);\n      //backward compatibility\n      if (options.withCredentials || options.cors && options.withCredentials !== false) {\n        xhr.withCredentials = true;\n      }\n\n      // Cannot set timeout with sync request\n      if (!sync) {\n        xhr.timeout = 'timeout' in options ? options.timeout : 5000;\n      }\n      if (xhr.setRequestHeader) {\n        for (key in headers) {\n          if (headers.hasOwnProperty(key)) {\n            xhr.setRequestHeader(key, headers[key]);\n          }\n        }\n      } else if (options.headers) {\n        throw new Error('Headers cannot be set on an XDomainRequest object');\n      }\n      if ('responseType' in options) {\n        xhr.responseType = options.responseType;\n      }\n      if ('beforeSend' in options && typeof options.beforeSend === 'function') {\n        options.beforeSend(xhr);\n      }\n      xhr.send(body);\n      return xhr;\n      function readystatechange() {\n        if (xhr.readyState === 4) {\n          load();\n        }\n      }\n      function getBody() {\n        // Chrome with requestType=blob throws errors arround when even testing access to responseText\n        var body = null;\n        if (xhr.response) {\n          body = xhr.response;\n        } else if (xhr.responseType === 'text' || !xhr.responseType) {\n          body = xhr.responseText || xhr.responseXML;\n        }\n        if (isJson) {\n          try {\n            body = JSON.parse(body);\n          } catch (e) {}\n        }\n        return body;\n      }\n      function getStatusCode() {\n        return xhr.status === 1223 ? 204 : xhr.status;\n      }\n\n      // if we're getting a none-ok statusCode, build & return an error\n      function errorFromStatusCode(status, body) {\n        var error = null;\n        if (status === 0 || status >= 400 && status < 600) {\n          var message = (typeof body === 'string' ? body : false) || messages[String(status).charAt(0)];\n          error = new Error(message);\n          error.statusCode = status;\n        }\n        return error;\n      }\n\n      // will load the data & process the response in a special response object\n      function loadResponse() {\n        var status = getStatusCode();\n        var body = getBody();\n        var error = errorFromStatusCode(status, body);\n        var response = {\n          body: body,\n          statusCode: status,\n          statusText: xhr.statusText,\n          raw: xhr\n        };\n        if (xhr.getAllResponseHeaders) {\n          //remember xhr can in fact be XDR for CORS in IE\n          response.headers = parseHeaders(xhr.getAllResponseHeaders());\n        } else {\n          response.headers = {};\n        }\n        callback(error, response, response.body);\n      }\n\n      // will load the data and add some response properties to the source xhr\n      // and then respond with that\n      function loadXhr() {\n        var status = getStatusCode();\n        var error = errorFromStatusCode(status);\n        xhr.status = xhr.statusCode = status;\n        xhr.body = getBody();\n        xhr.headers = parseHeaders(xhr.getAllResponseHeaders());\n        callback(error, xhr, xhr.body);\n      }\n      function error(evt) {\n        callback(evt, xhr);\n      }\n    }\n    function noop() {}\n  }, {\n    'global/window': 14,\n    'once': 15,\n    'parse-headers': 19\n  }],\n  14: [function (require, module, exports) {\n    (function (global) {\n      if (typeof window !== 'undefined') {\n        module.exports = window;\n      } else if (typeof global !== 'undefined') {\n        module.exports = global;\n      } else if (typeof self !== 'undefined') {\n        module.exports = self;\n      } else {\n        module.exports = {};\n      }\n    }).call(this, typeof __webpack_require__.g !== 'undefined' ? __webpack_require__.g : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {});\n  }, {}],\n  15: [function (require, module, exports) {\n    module.exports = once;\n    once.proto = once(function () {\n      Object.defineProperty(Function.prototype, 'once', {\n        value: function value() {\n          return once(this);\n        },\n        configurable: true\n      });\n    });\n    function once(fn) {\n      var called = false;\n      return function () {\n        if (called) return;\n        called = true;\n        return fn.apply(this, arguments);\n      };\n    }\n  }, {}],\n  16: [function (require, module, exports) {\n    var isFunction = require('is-function');\n    module.exports = forEach;\n    var toString = Object.prototype.toString;\n    var hasOwnProperty = Object.prototype.hasOwnProperty;\n    function forEach(list, iterator, context) {\n      if (!isFunction(iterator)) {\n        throw new TypeError('iterator must be a function');\n      }\n      if (arguments.length < 3) {\n        context = this;\n      }\n      if (toString.call(list) === '[object Array]') forEachArray(list, iterator, context);else if (typeof list === 'string') forEachString(list, iterator, context);else forEachObject(list, iterator, context);\n    }\n    function forEachArray(array, iterator, context) {\n      for (var i = 0, len = array.length; i < len; i++) {\n        if (hasOwnProperty.call(array, i)) {\n          iterator.call(context, array[i], i, array);\n        }\n      }\n    }\n    function forEachString(string, iterator, context) {\n      for (var i = 0, len = string.length; i < len; i++) {\n        // no such thing as a sparse string.\n        iterator.call(context, string.charAt(i), i, string);\n      }\n    }\n    function forEachObject(object, iterator, context) {\n      for (var k in object) {\n        if (hasOwnProperty.call(object, k)) {\n          iterator.call(context, object[k], k, object);\n        }\n      }\n    }\n  }, {\n    'is-function': 17\n  }],\n  17: [function (require, module, exports) {\n    module.exports = isFunction;\n    var toString = Object.prototype.toString;\n    function isFunction(fn) {\n      var string = toString.call(fn);\n      return string === '[object Function]' || typeof fn === 'function' && string !== '[object RegExp]' || typeof window !== 'undefined' && (\n      // IE8 and below\n      fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt);\n    }\n  }, {}],\n  18: [function (require, module, exports) {\n    exports = module.exports = trim;\n    function trim(str) {\n      return str.replace(/^\\s*|\\s*$/g, '');\n    }\n    exports.left = function (str) {\n      return str.replace(/^\\s*/, '');\n    };\n    exports.right = function (str) {\n      return str.replace(/\\s*$/, '');\n    };\n  }, {}],\n  19: [function (require, module, exports) {\n    var trim = require('trim'),\n      forEach = require('for-each'),\n      isArray = function isArray(arg) {\n        return Object.prototype.toString.call(arg) === '[object Array]';\n      };\n    module.exports = function (headers) {\n      if (!headers) return {};\n      var result = {};\n      forEach(trim(headers).split('\\n'), function (row) {\n        var index = row.indexOf(':'),\n          key = trim(row.slice(0, index)).toLowerCase(),\n          value = trim(row.slice(index + 1));\n        if (typeof result[key] === 'undefined') {\n          result[key] = value;\n        } else if (isArray(result[key])) {\n          result[key].push(value);\n        } else {\n          result[key] = [result[key], value];\n        }\n      });\n      return result;\n    };\n  }, {\n    'for-each': 16,\n    'trim': 18\n  }],\n  20: [function (require, module, exports) {\n    module.exports = require('./jquery.browser');\n  }, {\n    './jquery.browser': 21\n  }],\n  21: [function (require, module, exports) {\n    /*!\n     * jQuery Browser Plugin v0.0.6\n     * https://github.com/gabceb/jquery-browser-plugin\n     *\n     * Original jquery-browser code Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors\n     * http://jquery.org/license\n     *\n     * Modifications Copyright 2013 Gabriel Cebrian\n     * https://github.com/gabceb\n     *\n     * Released under the MIT license\n     *\n     * Date: 2013-07-29T17:23:27-07:00\n     */\n\n    var matched, browser;\n    var uaMatch = function uaMatch(ua) {\n      ua = ua.toLowerCase();\n      var match = /(opr)[\\/]([\\w.]+)/.exec(ua) || /(chrome)[ \\/]([\\w.]+)/.exec(ua) || /(version)[ \\/]([\\w.]+).*(safari)[ \\/]([\\w.]+)/.exec(ua) || /(webkit)[ \\/]([\\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ \\/]([\\w.]+)/.exec(ua) || /(msie) ([\\w.]+)/.exec(ua) || ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) || ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) || [];\n      var platform_match = /(ipad)/.exec(ua) || /(iphone)/.exec(ua) || /(android)/.exec(ua) || /(windows phone)/.exec(ua) || /(win)/.exec(ua) || /(mac)/.exec(ua) || /(linux)/.exec(ua) || /(cros)/i.exec(ua) || [];\n      return {\n        browser: match[3] || match[1] || '',\n        version: match[2] || '0',\n        platform: platform_match[0] || ''\n      };\n    };\n    matched = uaMatch(window.navigator.userAgent);\n    browser = {};\n    browser.uaMatch = uaMatch;\n    if (matched.browser) {\n      browser[matched.browser] = true;\n      browser.version = matched.version;\n      browser.versionNumber = parseInt(matched.version);\n    }\n    if (matched.platform) {\n      browser[matched.platform] = true;\n    }\n\n    // These are all considered mobile platforms, meaning they run a mobile browser\n    if (browser.android || browser.ipad || browser.iphone || browser['windows phone']) {\n      browser.mobile = true;\n    }\n\n    // These are all considered desktop platforms, meaning they run a desktop browser\n    if (browser.cros || browser.mac || browser.linux || browser.win) {\n      browser.desktop = true;\n    }\n\n    // Chrome, Opera 15+ and Safari are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari) {\n      browser.webkit = true;\n    }\n\n    // IE11 has a new token so we will assign it msie to avoid breaking changes\n    if (browser.rv) {\n      var ie = 'msie';\n      matched.browser = ie;\n      browser[ie] = true;\n    }\n\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n      var opera = 'opera';\n      matched.browser = opera;\n      browser[opera] = true;\n    }\n\n    // Stock Android browsers are marked as Safari on Android.\n    if (browser.safari && browser.android) {\n      var android = 'android';\n      matched.browser = android;\n      browser[android] = true;\n    }\n\n    // Assign the name and platform variable\n    browser.name = matched.browser;\n    browser.platform = matched.platform;\n    module.exports = browser;\n  }, {}],\n  22: [function (require, module, exports) {\n    (function (global) {\n      /** @preserve http://github.com/easeway/js-class */\n\n      // Class Definition using ECMA5 prototype chain\n\n      function inherit(dest, src, noParent) {\n        while (src && src !== Object.prototype) {\n          Object.getOwnPropertyNames(src).forEach(function (name) {\n            if (name != '.class' && !dest.hasOwnProperty(name)) {\n              var desc = Object.getOwnPropertyDescriptor(src, name);\n              Object.defineProperty(dest, name, desc);\n            }\n          });\n          if (noParent) {\n            break;\n          }\n          src = src.__proto__;\n        }\n        return dest;\n      }\n      var Class = function Class(base, proto, options) {\n        if (typeof base != 'function') {\n          options = proto;\n          proto = base;\n          base = Object;\n        }\n        if (!proto) {\n          proto = {};\n        }\n        if (!options) {\n          options = {};\n        }\n        var meta = {\n          name: options.name,\n          base: base,\n          \"implements\": []\n        };\n        var classProto = Class.clone(proto);\n        if (options[\"implements\"]) {\n          (Array.isArray(options[\"implements\"]) ? options[\"implements\"] : [options[\"implements\"]]).forEach(function (implementedType) {\n            if (typeof implementedType == 'function' && implementedType.prototype) {\n              meta[\"implements\"].push(implementedType);\n              Class.extend(classProto, implementedType.prototype);\n            }\n          });\n        }\n        classProto.__proto__ = base.prototype;\n        var theClass = function theClass() {\n          if (typeof this.constructor == 'function') {\n            this.constructor.apply(this, arguments);\n          }\n        };\n        meta.type = theClass;\n        theClass.prototype = classProto;\n        Object.defineProperty(theClass, '.class.meta', {\n          value: meta,\n          enumerable: false,\n          configurable: false,\n          writable: false\n        });\n        Object.defineProperty(classProto, '.class', {\n          value: theClass,\n          enumerable: false,\n          configurable: false,\n          writable: false\n        });\n        if (options.statics) {\n          Class.extend(theClass, options.statics);\n        }\n        return theClass;\n      };\n      Class.extend = inherit;\n      Class.clone = function (object) {\n        return inherit({}, object);\n      };\n      function findType(meta, type) {\n        while (meta) {\n          if (meta.type.prototype === type.prototype) {\n            return true;\n          }\n          for (var i in meta[\"implements\"]) {\n            var implType = meta[\"implements\"][i];\n            var implMeta = implType['.class.meta'];\n            if (implMeta) {\n              if (findType(implMeta, type)) {\n                return true;\n              }\n            } else {\n              for (var proto = implType.prototype; proto; proto = proto.__proto__) {\n                if (proto === type.prototype) {\n                  return true;\n                }\n              }\n            }\n          }\n          meta = meta.base ? meta.base['.class.meta'] : undefined;\n        }\n        return false;\n      }\n      var Checker = Class({\n        constructor: function constructor(object) {\n          this.object = object;\n        },\n        typeOf: function typeOf(type) {\n          if (this.object instanceof type) {\n            return true;\n          }\n          var meta = Class.typeInfo(this.object);\n          return meta && findType(meta, type);\n        }\n      });\n\n      // aliases\n      Checker.prototype.a = Checker.prototype.typeOf;\n      Checker.prototype.an = Checker.prototype.typeOf;\n      Class.is = function (object) {\n        return new Checker(object);\n      };\n      Class.typeInfo = function (object) {\n        var theClass = object.__proto__['.class'];\n        return theClass ? theClass['.class.meta'] : undefined;\n      };\n      Class.VERSION = [0, 0, 2];\n      if (module) {\n        module.exports = Class;\n      } else {\n        global.Class = Class; // for browser\n      }\n    }).call(this, typeof __webpack_require__.g !== 'undefined' ? __webpack_require__.g : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {});\n  }, {}],\n  'biojs-io-fasta': [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    module.exports.parse = require('./parser');\n    module.exports.writer = require('./writer');\n  }, {\n    './parser': 6,\n    './writer': 9\n  }],\n  'biojs-vis-sequence': [function (require, module, exports) {\n    module.exports = require('./lib/index');\n  }, {\n    './lib/index': 1\n  }]\n}, {}, ['biojs-vis-sequence']);\n\n//# sourceURL=webpack://SequenceServer/./public/js/sequence.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);\n/* provided dependency */ var jQuery = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nvar require;function _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nrequire = function e(t, n, r) {\n  function s(o, u) {\n    if (!n[o]) {\n      if (!t[o]) {\n        var a = undefined;\n        if (!u && a) return require(o, !0);\n        if (i) return i(o, !0);\n        var f = new Error('Cannot find module \\'' + o + '\\'');\n        throw f.code = 'MODULE_NOT_FOUND', f;\n      }\n      var l = n[o] = {\n        exports: {}\n      };\n      t[o][0].call(l.exports, function (e) {\n        var n = t[o][1][e];\n        return s(n ? n : e);\n      }, l, l.exports, e, t, n, r);\n    }\n    return n[o].exports;\n  }\n  var i = undefined;\n  for (var o = 0; o < r.length; o++) s(r[o]);\n  return s;\n}({\n  1: [function (require, module, exports) {\n    // legacy!!\n    (jquery__WEBPACK_IMPORTED_MODULE_0___default().browser) = require('jquery-browser-plugin');\n\n    /**\n    * THIS FILE HAS BEEN MODIFIED FROM THE ORIGINAL\n    * (https://github.com/ljgarcia/biojs-vis-sequence/blob/master/lib/index.js).\n    *\n    * Sequence component \n    * \n    * @class\n    * @extends Biojs\n    * \n    * @author <a href=\"mailto:johncar@gmail.com\">John Gomez</a>, <a href=\"mailto:secevalliv@gmail.com\">Jose Villaveces</a>\n    * @version 1.0.0\n    * @category 3\n    * \n    * @requires <a href='http://blog.jquery.com/2011/09/12/jquery-1-6-4-released/'>jQuery Core 1.6.4</a>\n    * @dependency <script language=\"JavaScript\" type=\"text/javascript\" src=\"../biojs/dependencies/jquery/jquery-1.4.2.min.js\"></script>\n    * \n    * @requires <a href='http://jqueryui.com/download'>jQuery UI 1.8.16</a>\n    * @dependency <script language=\"JavaScript\" type=\"text/javascript\" src=\"../biojs/dependencies/jquery/jquery-ui-1.8.2.custom.min.js\"></script>\n    *\n    * @requires <a href='Biojs.Tooltip.css'>Biojs.Tooltip</a>\n    * @dependency <script language=\"JavaScript\" type=\"text/javascript\" src=\"src/Biojs.Tooltip.js\"></script>\n    * \n    * @param {Object} options An object with the options for Sequence component.\n    *    \n    * @option {string} target \n    *    Identifier of the DIV tag where the component should be displayed.\n    *    \n    * @option {string} sequence \n    *    The sequence to be displayed.\n    *    \n    * @option {string} [id] \n    *    Sequence identifier if apply.\n    *    \n    * @option {string} [format=\"FASTA\"] \n    *    The display format for the sequence representation.\n    *    \n    * @option {Object[]} [highlights] \n    * \t  For highlighting multiple regions. \n    *    <pre class=\"brush: js\" title=\"Syntax:\"> \n    *    [\n    *    \t// Highlight aminoacids from 'start' to 'end' of the current strand using the specified 'color' (optional) and 'background' (optional).\n    *    \t{ start: &lt;startVal1&gt;, end: &lt;endVal1&gt; [, id:&lt;idVal1&gt;] [, color: &lt;HTMLColor&gt;] [, background: &lt;HTMLColor&gt;]}, \n    *    \t//\n    *    \t// Any others highlights\n    *    \t...,  \n    *    \t// \n    *    \t{ start: &lt;startValN&gt;, end: &lt;endValN&gt; [, id:&lt;idValN&gt;] [, color: &lt;HTMLColor&gt;] [, background: &lt;HTMLColor&gt;]}\n    *    ]</pre>\n    * \n    * <pre class=\"brush: js\" title=\"Example:\"> \n    * highlights : [\n    * \t\t{ start:30, end:42, color:\"white\", background:\"green\", id:\"spin1\" },\n    *\t\t{ start:139, end:140 }, \n    *\t\t{ start:631, end:633, color:\"white\", background:\"blue\" }\n    *\t]\n    * </pre>\n    * \n    * @option {Object} [columns={size:40,spacedEach:10}] \n    * \t  Options for displaying the columns. Syntax: { size: &lt;numCols&gt;, spacedEach: &lt;numCols&gt;}\n    * \n    * @option {Object} [selection] \n    * \t  Positions for the current selected region. Syntax: { start: &lt;startValue&gt;, end: &lt;endValue&gt;}\n    * \n    * @option {Object[]} [annotations] \n    *    Set of overlapping annotations. Must be an array of objects following the syntax:\n    *     \t\t<pre class=\"brush: js\" title=\"Syntax:\">\n    *            [ \n    *              // An annotation:\n    *              { name: &lt;name&gt;, \n    *                html: &lt;message&gt;, \n    *                color: &lt;color_code&gt;, \n    *                regions: [{ start: &lt;startVal1&gt;, end: &lt;endVal1&gt; color: &lt;HTMLColor&gt;}, ...,{ start: &lt;startValN&gt;, end: &lt;endValN&gt;, color: &lt;HTMLColor&gt;}] \n    *              }, \n    *              \n    *              // ...\n    *              // more annotations here \n    *              // ...\n    *            ]\n    *    \t\t </pre>\n    *    where:\n    *      <ul>\n    *        <li><b>name</b> is the unique name for the annotation</li>\n    *        <li><b>html</b> is the message (can be HTML) to be displayed in the tool tip.</li>\n    *        <li><b>color</b> is the default HTML color code for all the regions.</li>\n    *        <li><b>regions</b> array of objects defining the intervals which belongs to the annotation.</li>\n    *        <li><b>regions[i].start</b> is the starting character for the i-th interval.</li>\n    *        <li><b>regions[i].end</b> is the ending character for the i-th interval.</li>\n    *        <li><b>regions[i].color</b> is an optional color for the i-th interval.   \n    *      </ul> \n    *      \n    * @option {Object} [formatOptions={title:true, footer:true}] \n    * \t  Options for displaying the title. by now just affecting the CODATA format.\n    *    <pre class=\"brush: js\" title=\"Syntax:\"> \n    * \t\tformatOptions : {\n    * \t\t\ttitle:false,\n    * \t\t\tfooter:false\n    * \t\t}\n    *    </pre>\n    *    \n    * @example \n    * var theSequence = \"METLCQRLNVCQDKILTHYENDSTDLRDHIDYWKHMRLECAIYYKAREMGFKHINHQVVPTLAVSKNKALQAIELQLTLETIYNSQYSNEKWTLQDVSLEVYLTAPTGCIKKHGYTVEVQFDGDICNTMHYTNWTHIYICEEAojs SVTVVEGQVDYYGLYYVHEGIRTYFVQFKDDAEKYSKNKVWEVHAGGQVILCPTSVFSSNEVSSPEIIRQHLANHPAATHTKAVALGTEETQTTIQRPRSEPDTGNPCHTTKLLHRDSVDSAPILTAFNSSHKGRINCNSNTTPIVHLKGDANTLKCLRYRFKKHCTLYTAVSSTWHWTGHNVKHKSAIVTLTYDSEWQRDQFLSQVKIPKTITVSTGFMSI\";\n    * var mySequence = new Sequence({\n    * \t\tsequence : theSequence,\n    * \t\ttarget : \"YourOwnDivId\",\n    * \t\tformat : 'CODATA',\n    * \t\tid : 'P918283',\n    * \t\tannotations: [\n    *        { name:\"CATH\", \n    * \t  \t\tcolor:\"#F0F020\", \n    * \t  \t\thtml: \"Using color code #F0F020 \", \n    * \t  \t\tregions: [{start: 122, end: 135}]\n    * \t\t  },\n    *        { name:\"TEST\", \n    *          html:\"&lt;br&gt; Example of &lt;b&gt;HTML&lt;/b&gt;\", \n    *          color:\"green\", \n    *          regions: [\n    *            {start: 285, end: 292},\n    *            {start: 293, end: 314, color: \"#2E4988\"}]\n    *        }\n    *      ],\n    *      highlights : [\n    *      \t{ start:30, end:42, color:\"white\", background:\"green\", id:\"spin1\" },\n    *      \t{ start:139, end:140 }, \n    *      \t{ start:631, end:633, color:\"white\", background:\"blue\" }\n    *      ]\n    * });\t\n    * \n    */\n\n    var Class = require('js-class');\n    var EVT_ON_SELECTION_CHANGE = 'onSelectionChange';\n    var EVT_ON_SELECTION_CHANGED = 'onSelectionChanged';\n    var EVT_ON_ANNOTATION_CLICKED = 'onAnnotationClicked';\n    __webpack_require__.g.Sequence = Class( /** @lends Sequence# */\n    {\n      constructor: function constructor(options) {\n        var self = this;\n        this.opt = jQuery.extend(this.opt, options);\n        this._container = jQuery(this.opt.target);\n\n        // legacy support (target id without '#')\n        if (this._container.length == 0) {\n          this._container = jQuery('#' + this.opt.target);\n        }\n        if (this._container.length == 0) {\n          console.log('empty target container');\n        }\n\n        // legacy: copy target id\n        this.opt.target = this._container[0].id;\n\n        // Lazy initialization \n        this._container.ready(function () {\n          self._initialize();\n        });\n      },\n      /**\n      * Default values for the options\n      * @name Sequence-opt\n      */\n      opt: {\n        sequence: '',\n        id: '',\n        target: '',\n        format: 'FASTA',\n        selection: {\n          start: 0,\n          end: 0\n        },\n        columns: {\n          size: 35,\n          spacedEach: 10\n        },\n        highlights: [],\n        annotations: [],\n        sequenceUrl: 'http://www.ebi.ac.uk/das-srv/uniprot/das/uniprot/sequence',\n        // Styles \n        selectionColor: 'Yellow',\n        selectionFontColor: 'black',\n        highlightFontColor: 'red',\n        highlightBackgroundColor: 'white',\n        fontColor: 'inherit',\n        backgroundColor: 'inherit',\n        width: undefined,\n        height: undefined,\n        formatSelectorVisible: true\n      },\n      /**\n      * Array containing the supported event names\n      * @name Sequence-eventTypes\n      */\n      eventTypes: [\n      /**\n      * @name Sequence#onSelectionChanged\n      * @event\n      * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.\n      * @eventData {Object} source The component which did triggered the event.\n      * @eventData {string} type The name of the event.\n      * @eventData {int} start A number indicating the start of the selection.\n      * @eventData {int} end A number indicating the ending of selection.\n      * @example \n      * mySequence.onSelectionChanged(\n      *    function( objEvent ) {\n      *       alert(\"Selected: \" + objEvent.start + \", \" + objEvent.end );\n      *    }\n      * ); \n      * \n      * */\n      'onSelectionChanged',\n      /**\n      * @name Sequence#onSelectionChange\n      * @event\n      * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.\n      * @eventData {Object} source The component which did triggered the event.\n      * @eventData {string} type The name of the event.\n      * @eventData {int} start A number indicating the start of the selection.\n      * @eventData {int} end A number indicating the ending of selection.\n      * @example \n      * mySequence.onSelectionChange(\n      *    function( objEvent ) {\n      *       alert(\"Selection in progress: \" + objEvent.start + \", \" + objEvent.end );\n      *    }\n      * );  \n      * \n      * \n      * */\n      'onSelectionChange',\n      /**\n      * @name Sequence#onAnnotationClicked\n      * @event\n      * @param {function} actionPerformed An function which receives an {@link Biojs.Event} object as argument.\n      * @eventData {Object} source The component which did triggered the event.\n      * @eventData {string} type The name of the event.\n      * @eventData {string} name The name of the selected annotation.\n      * @eventData {int} pos A number indicating the position of the selected amino acid.\n      * @example \n      * mySequence.onAnnotationClicked(\n      *    function( objEvent ) {\n      *       alert(\"Clicked \" + objEvent.name + \" on position \" + objEvent.pos );\n      *    }\n      * );  \n      * \n      * */\n      'onAnnotationClicked'],\n      getId: function getId() {\n        return this.opt.id;\n      },\n      // internal members\n      _headerDiv: null,\n      _contentDiv: null,\n      // Methods\n\n      _initialize: function _initialize() {\n        if (this.opt.width !== undefined) {\n          this._container.width(this.opt.width);\n        }\n        if (this.opt.height !== undefined) {\n          this._container.height(this.opt.height);\n        }\n\n        // DIV for the format selector\n        this._buildFormatSelector();\n\n        // DIV for the sequence\n        this._contentDiv = jQuery('<div/>').appendTo(this._container);\n\n        // Initialize highlighting \n        this._highlights = this.opt.highlights;\n\n        // Initialize annotations\n        this._annotations = this.opt.annotations;\n\n        //Initialize tooltip\n        var tooltip = 'sequenceTip' + this.opt.target;\n        jQuery('<div id=\"' + tooltip + '\"></div>').css({\n          'position': 'absolute',\n          'z-index': '999999',\n          'color': '#fff',\n          'font-size': '12px',\n          'width': 'auto',\n          'display': 'none'\n        }).addClass('tooltip').appendTo('body').hide();\n        this.opt._tooltip = document.getElementById(tooltip);\n        if (this.opt.sequence) {\n          this._redraw();\n        } else if (this.opt.id) {\n          this._requestSequence(this.opt.id);\n        } else {\n          this.clearSequence('No sequence available', '../biojs/css/images/warning_icon.png');\n        }\n      },\n      /**\n      * Shows the columns indicated by the indexes array.\n      * @param {string} seq The sequence strand.\n      * @param {string} [identifier] Sequence identifier.\n      * \n      * @example \n      * mySequence.setSequence(\"P99999\");\n      * \n      */\n      setSequence: function setSequence(seq, identifier) {\n        if (seq.match(/^([A-N,R-Z][0-9][A-Z][A-Z, 0-9][A-Z, 0-9][0-9])|([O,P,Q][0-9][A-Z, 0-9][A-Z, 0-9][A-Z, 0-9][0-9])(\\.\\d+)?$/i)) {\n          this._requestSequence(arguments[0]);\n        } else {\n          this.opt.sequence = seq;\n          this.opt.id = identifier;\n          this._highlights = [];\n          this._highlightsCount = 0;\n          this.opt.selection = {\n            start: 0,\n            end: 0\n          };\n          this._annotations = [];\n          this._contentDiv.children().remove();\n          this._redraw();\n        }\n      },\n      _requestSequence: function _requestSequence(accession) {\n        var self = this;\n        console.log('Requesting sequence for: ' + accession);\n        jQuery.ajax({\n          url: self.opt.sequenceUrl,\n          dataType: 'xml',\n          data: {\n            segment: accession\n          },\n          success: function success(xml) {\n            try {\n              var sequenceNode = jQuery(xml).find('SEQUENCE:first');\n              self.setSequence(sequenceNode.text(), sequenceNode.attr('id'), sequenceNode.attr('label'));\n            } catch (e) {\n              console.log('Error decoding response data: ' + e.message);\n              self.clearSequence('No sequence available', '../biojs/css/images/warning_icon.png');\n            }\n          },\n          error: function error(jqXHR, textStatus, errorThrown) {\n            console.log('Error decoding response data: ' + textStatus);\n            self.clearSequence('Error requesting the sequence to the server ' + this.url, '../biojs/css/images/warning_icon.png');\n          }\n        });\n      },\n      /**\n      * Shows the columns indicated by the indexes array.\n      * @param {string} [showMessage] Message to be showed.\n      * @param {string} [icon] Icon to be showed a side of the message\n      * \n      * @example \n      * mySequence.clearSequence(\"No sequence available\", \"../biojs/css/images/warning_icon.png\");\n      * \n      */\n      clearSequence: function clearSequence(showMessage, icon) {\n        var message = undefined;\n        this.opt.sequence = '';\n        this.opt.id = '';\n        this._highlights = [];\n        this._highlightsCount = 0;\n        this.opt.selection = {\n          start: 0,\n          end: 0\n        };\n        this._annotations = [];\n        this._contentDiv.children().remove();\n        this._headerDiv.hide();\n        if (undefined !== showMessage) {\n          message = jQuery('<div>' + showMessage + '</div>').appendTo(this._contentDiv).addClass('message');\n          if (undefined !== icon) {\n            message.css({\n              'background': 'transparent url(\"' + icon + '\") no-repeat center left',\n              'padding-left': '20px'\n            });\n          }\n        }\n      },\n      /**\n      * Set the current selection in the sequence causing the event {@link Sequence#onSelectionChanged}\n      *\n      * @example\n      * // set selection from the position 100 to 150 \n      * mySequence.setSelection(100, 150);\n      * \n      * @param {int} start The starting character of the selection.\n      * @param {int} end The ending character of the selection\n      */\n      setSelection: function setSelection(start, end) {\n        if (start > end) {\n          var aux = end;\n          end = start;\n          start = aux;\n        }\n        if (start != this.opt.selection.start || end != this.opt.selection.end) {\n          this._setSelection(start, end);\n          this.trigger(EVT_ON_SELECTION_CHANGED, {\n            'start': start,\n            'end': end\n          });\n        }\n      },\n      _buildFormatSelector: function _buildFormatSelector() {\n        var self = this;\n        this._headerDiv = jQuery('<div></div>').appendTo(this._container);\n        this._headerDiv.append('Format: ');\n        this._formatSelector = jQuery('<select> ' + '<option value=\"FASTA\">FASTA</option>' + '<option value=\"CODATA\">CODATA</option>' + '<option value=\"PRIDE\">PRIDE</option>' + '<option value=\"RAW\">RAW</option></select>').appendTo(self._headerDiv);\n        this._formatSelector.change(function (e) {\n          self.opt.format = jQuery(this).val();\n          self._redraw();\n        });\n        this._formatSelector.val(self.opt.format);\n        this.formatSelectorVisible(this.opt.formatSelectorVisible);\n      },\n      /**\n      * Highlights a region using the font color defined in {Sequence#highlightFontColor} by default is red.\n      *\n      * @example\n      * // highlight the characters within the position 100 to 150, included.\n      * mySequence.addHighlight( { \"start\": 100, \"end\": 150, \"color\": \"white\", \"background\": \"red\", \"id\": \"aaa\" } );\n      * \n      * @param {Object} h The highlight defined as follows:\n      * \t\n      * \n      * @return {int} representing the id of the highlight on the internal array. Returns -1 on failure  \n      */\n      addHighlight: function addHighlight(h) {\n        var id = '-1';\n        var color = '';\n        var background = '';\n        var highlight = {};\n        if (h instanceof Object && h.start <= h.end) {\n          color = 'string' == typeof h.color ? h.color : this.opt.highlightFontColor;\n          background = 'string' == typeof h.background ? h.background : this.opt.highlightBackgroundColor;\n          id = 'string' == typeof h.id ? h.id : new Number(this._highlightsCount++).toString();\n          highlight = {\n            'start': h.start,\n            'end': h.end,\n            'color': color,\n            'background': background,\n            'id': id\n          };\n          this._highlights.push(highlight);\n          this._applyHighlight(highlight);\n          this._restoreSelection(h.start, h.end);\n        }\n        return id;\n      },\n      /* \n      * Function: Sequence._applyHighlight\n      * Purpose:  Apply the specified color and background to a region between 'start' and 'end'.\n      * Returns:  -\n      * Inputs: highlight -> {Object} An object containing the fields start (int), end (int), \n      * \t\t\t\t\t\tcolor (HTML color string) and background (HTML color string).\n      */\n      _applyHighlight: function _applyHighlight(highlight) {\n        var seq = this._contentDiv.find('.sequence');\n        for (var i = highlight.start - 1; i < highlight.end; i++) {\n          zindex = jQuery(seq[i]).css('z-index');\n          if (zindex == 'auto') {\n            z = 1;\n            o = 1;\n          } else {\n            z = 0;\n            o = 0.5;\n          }\n          jQuery(seq[i]).css({\n            'color': highlight.color,\n            'background-color': highlight.background,\n            'z-index': z,\n            'opacity': o\n          }).addClass('highlighted');\n        }\n      },\n      /* \n      * Function: Sequence._applyHighlights\n      * Purpose:  Apply the specified highlights.\n      * Returns:  -\n      * Inputs: highlights -> {Object[]} An array containing the highlights to be applied.\n      */\n      _applyHighlights: function _applyHighlights(highlights) {\n        for (var i in highlights) {\n          this._applyHighlight(highlights[i]);\n        }\n      },\n      /* \n      * Function: Sequence._restoreHighlights\n      * Purpose:  Repaint the highlights in the specified region.\n      * Returns:  -\n      * Inputs: start -> {int} Start of the region to be restored.\n      * \t\t   end -> {int} End of the region to be restored.\n      */\n      _restoreHighlights: function _restoreHighlights(start, end) {\n        var h = this._highlights;\n        // paint the region using default blank settings\n        this._applyHighlight({\n          'start': start,\n          'end': end,\n          'color': this.opt.fontColor,\n          'background': this.opt.backgroundColor\n        });\n        // restore highlights in that region\n        for (var i in h) {\n          // interval intersects with highlight i ?\n          if (!(h[i].start > end || h[i].end < start)) {\n            a = h[i].start < start ? start : h[i].start;\n            b = h[i].end > end ? end : h[i].end;\n            this._applyHighlight({\n              'start': a,\n              'end': b,\n              'color': h[i].color,\n              'background': h[i].background\n            });\n          }\n        }\n      },\n      /* \n      * Function: Sequence._restoreSelection\n      * Purpose:  Repaint the current selection in the specified region. \n      * \t\t\t It is used in the case of any highlight do overriding of the current selection. \n      * Returns:  -\n      * Inputs: start -> {int} Start of the region to be restored.\n      * \t\t   end -> {int} End of the region to be restored.\n      */\n      _restoreSelection: function _restoreSelection(start, end) {\n        var sel = this.opt.selection;\n        // interval intersects with current selection ?\n        // restore selection\n        if (!(start > sel.end || end < sel.start)) {\n          a = start < sel.start ? sel.start : start;\n          b = end > sel.end ? sel.end : end;\n          this._applyHighlight({\n            'start': a,\n            'end': b,\n            'color': this.opt.selectionFontColor,\n            'background': this.opt.selectionColor\n          });\n        }\n      },\n      /**\n      * Remove a highlight.\n      *\n      * @example\n      * // Clear the highlighted characters within the position 100 to 150, included.\n      * mySequence.removeHighlight(\"spin1\");\n      * \n      * @param {string} id The id of the highlight on the internal array. This value is returned by method highlight.\n      */\n      removeHighlight: function removeHighlight(id) {\n        var h = this._highlights;\n        for (i in h) {\n          if (h[i].id == id) {\n            start = h[i].start;\n            end = h[i].end;\n            h.splice(i, 1);\n            this._restoreHighlights(start, end);\n            this._restoreSelection(start, end);\n            break;\n          }\n        }\n      },\n      /**\n      * Remove all the highlights of whole sequence.\n      *\n      * @example\n      * mySequence.removeAllHighlights();\n      */\n      removeAllHighlights: function removeAllHighlights() {\n        this._highlights = [];\n        this._restoreHighlights(1, this.opt.sequence.length);\n        this._restoreSelection(1, this.opt.sequence.length);\n      },\n      /**\n      * Changes the current displaying format of the sequence.\n      *\n      * @example\n      * // Set format to 'FASTA'.\n      * mySequence.setFormat('FASTA');\n      * \n      * @param {string} format The format for the sequence to be displayed.\n      */\n      setFormat: function setFormat(format) {\n        if (this.opt.format != format.toUpperCase()) {\n          this.opt.format = format.toUpperCase();\n          this._redraw();\n        }\n        var self = this;\n        // Changes the option in the combo box\n        this._headerDiv.find('option').each(function () {\n          if (jQuery(this).val() == self.opt.format.toUpperCase()) {\n            jQuery(this).attr('selected', 'selected');\n          }\n        });\n      },\n      /**\n      * Changes the current number of columns in the displayed sequence.\n      *\n      * @example\n      * // Set the number of columns to 70.\n      * mySequence.setNumCols(70);\n      * \n      * @param {int} numCols The number of columns.\n      */\n      setNumCols: function setNumCols(numCols) {\n        this.opt.columns.size = numCols;\n        this._redraw();\n      },\n      /**\n      * Set the visibility of the drop-down list of formats.\n      * \n      * @param {boolean} visible true: show; false: hide.\n      */\n      formatSelectorVisible: function formatSelectorVisible(visible) {\n        if (visible) {\n          this._headerDiv.show();\n        } else {\n          this._headerDiv.hide();\n        }\n      },\n      /**\n      * This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'true' argument.\n      *\n      * @example\n      * // Shows the format selector.\n      * mySequence.showFormatSelector();\n      * \n      */\n      showFormatSelector: function showFormatSelector() {\n        this._headerDiv.show();\n      },\n      /**\n      * This is similar to a {Biojs.Protein3D#formatSelectorVisible} with the 'false' argument.\n      * \n      * @example\n      * // Hides the format selector.\n      * mySequence.hideFormatSelector();\n      * \n      */\n      hideFormatSelector: function hideFormatSelector() {\n        this._headerDiv.hide();\n      },\n      /**\n      * Hides the whole component.\n      * \n      */\n      hide: function hide() {\n        this._headerDiv.hide();\n        this._contentDiv.hide();\n      },\n      /**\n      * Shows the whole component.\n      * \n      */\n      show: function show() {\n        this._headerDiv.show();\n        this._contentDiv.show();\n      },\n      /* \n      * Function: Sequence._setSelection\n      * Purpose:  Update the current selection. \n      * Returns:  -\n      * Inputs: start -> {int} Start of the region to be selected.\n      * \t\t   end -> {int} End of the region to be selected.\n      */\n      _setSelection: function _setSelection(start, end) {\n        //alert(\"adsas\");\n\n        var current = this.opt.selection;\n        var change = {};\n\n        // Which is the change on selection?\n        if (current.start == start) {\n          // forward?\n          if (current.end < end) {\n            change.start = current.end;\n            change.end = end;\n          } else {\n            this._restoreHighlights(end + 1, current.end);\n          }\n        } else if (current.end == end) {\n          // forward?\n          if (current.start > start) {\n            change.start = start;\n            change.end = current.start;\n          } else {\n            this._restoreHighlights(current.start, start - 1);\n          }\n        } else {\n          this._restoreHighlights(current.start, current.end);\n          change.start = start;\n          change.end = end;\n        }\n        current.start = start;\n        current.end = end;\n      },\n      /* \n      * Function: Sequence._repaintSelection\n      * Purpose:  Repaint the whole current selection. \n      * Returns:  -\n      * Inputs: -\n      */\n      _repaintSelection: function _repaintSelection() {\n        var s = this.opt.selection;\n        this._setSelection(0, 0);\n        this._setSelection(s.start, s.end);\n      },\n      /* \n      * Function: Sequence._redraw\n      * Purpose:  Repaint the current sequence. \n      * Returns:  -\n      * Inputs: -\n      */\n      _redraw: function _redraw() {\n        var i = 0;\n        var self = this;\n\n        // Reset the content\n        //this._contentDiv.text('');\n        this._contentDiv.children().remove();\n\n        // Rebuild the spans of the sequence \n        // according to format\n        if (this.opt.format == 'RAW') {\n          this._drawRaw();\n        } else if (this.opt.format == 'CODATA') {\n          this._drawCodata();\n        } else if (this.opt.format == 'FASTA') {\n          this._drawFasta();\n        } else {\n          this.opt.format = 'PRIDE';\n          this._drawPride();\n        }\n\n        // Restore the highlighted regions\n        this._applyHighlights(this._highlights);\n        this._repaintSelection();\n        this._addSpanEvents();\n      },\n      /* \n      * Function: Sequence._drawFasta\n      * Purpose:  Repaint the current sequence using FASTA format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawFasta: function _drawFasta() {\n        var self = this;\n        var a = this.opt.sequence.toUpperCase().split('');\n        var pre = jQuery('<pre></pre>').appendTo(this._contentDiv);\n        var i = 1;\n        var arr = [];\n        var str = '>' + this.opt.id + ' ' + a.length + ' bp<br/>';\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numCols: numCols,\n          numColsForSpace: 0\n        };\n        str += this._drawSequence(a, opt);\n        pre.html(str);\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawCodata\n      * Purpose:  Repaint the current sequence using CODATA format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawCodata: function _drawCodata() {\n        var seq = this.opt.sequence.toUpperCase().split('');\n\n        // Add header.\n        if (this.opt.formatOptions !== undefined) {\n          if (this.opt.formatOptions.title !== undefined) {\n            if (this.opt.formatOptions.title != false) {\n              var header = jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').addClass('header').appendTo(this._contentDiv);\n              header.html('ENTRY           ' + this.opt.id + '<br/>SEQUENCE<br/>');\n            }\n          }\n        }\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numLeft: true,\n          numLeftSize: 7,\n          numLeftPad: ' ',\n          numTop: true,\n          numTopEach: 5,\n          numCols: numCols,\n          numColsForSpace: 0,\n          spaceBetweenChars: true\n        };\n        this._drawSequence(seq, opt);\n\n        // Add footer.\n        if (this.opt.formatOptions !== undefined) {\n          if (this.opt.formatOptions.footer !== undefined) {\n            if (this.opt.formatOptions.footer != false) {\n              var footer = jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').addClass('footer').appendTo(this._contentDiv);\n              footer.html('<br/>///');\n            }\n          }\n        }\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawAnnotations\n      * Purpose:  Paint the annotations on the sequence.  \n      * Returns:  -\n      * Inputs: settings -> {object} \n      */\n      _drawAnnotations: function _drawAnnotations(settings) {\n        var self = this;\n        var a = this.opt.sequence.toLowerCase().split('');\n        var annotations = this._annotations;\n        var leftSpaces = '';\n        var row = '';\n        var annot = '';\n\n        // Index at the left?\n        if (settings.numLeft) {\n          leftSpaces += this._formatIndex(' ', settings.numLeftSize + 2, ' ');\n        }\n        for (var i = 0; i < a.length; i += settings.numCols) {\n          row = '';\n          for (var key in annotations) {\n            annotations[key].id = this.getId() + '_' + key;\n            annot = this._getHTMLRowAnnot(i + 1, annotations[key], settings);\n            if (annot.length > 0) {\n              row += '<br/>';\n              row += leftSpaces;\n              row += annot;\n              row += '<br/>';\n            }\n          }\n          var numCols = settings.numCols;\n          var charRemaining = a.length - i;\n          if (charRemaining < numCols) {\n            numCols = charRemaining;\n          }\n          if (settings.numRight) {\n            jQuery(row).insertAfter('div#' + self.opt.target + ' div pre span#numRight_' + this.getId() + '_' + (i + numCols));\n          } else {\n            jQuery(row).insertAfter('div#' + self.opt.target + ' div pre span#' + this.getId() + '_' + (i + numCols));\n          }\n        }\n\n        // add tool tips and background' coloring effect\n        jQuery(this._contentDiv).find('.annotation').each(function () {\n          self._addToolTip(this, function () {\n            return self._getAnnotationString(jQuery(this).attr('id'));\n          });\n          jQuery(this).mouseover(function (e) {\n            jQuery('.annotation.' + jQuery(e.target).attr('id')).each(function () {\n              jQuery(this).css('background-color', jQuery(this).attr('color'));\n            });\n          }).mouseout(function () {\n            jQuery('.annotation').css('background-color', 'transparent');\n          }).click(function (e) {\n            var name = undefined;\n            var id = jQuery(e.target).attr('id');\n            for (var i = 0; i < self._annotations.length; i++) {\n              if (self._annotations[i].id == id) {\n                name = self._annotations[i].name;\n                continue;\n              }\n            }\n            self.trigger(EVT_ON_ANNOTATION_CLICKED, {\n              'name': name\n              //\"pos\": parseInt( jQuery(e.target).attr(\"pos\") )\n            });\n          });\n        });\n      },\n\n      /* \n      * Function: Sequence._getAnnotationString\n      * Purpose:  Get the annotation text message for the tooltip \n      * Returns:  {string} Annotation text for the annotation\n      * Inputs:   id -> {int} index of the internal annotation array\n      */\n      _getAnnotationString: function _getAnnotationString(id) {\n        var annotation = this._annotations[id.substr(id.indexOf('_') + 1)];\n        return annotation.name + '<br/>' + (annotation.html ? annotation.html : '');\n      },\n      /* \n      * Function: Sequence._getHTMLRowAnnot\n      * Purpose:  Build an annotation\n      * Returns:  HTML of the annotation\n      * Inputs:   currentPos -> {int}\n      * \t\t\t annotation -> {Object} \n      *  \t\t settings -> {Object}\n      */\n      _getHTMLRowAnnot: function _getHTMLRowAnnot(currentPos, annotation, settings) {\n        var styleBegin = 'border-left:1px solid; border-bottom:1px solid; border-color:';\n        var styleOn = 'border-bottom:1px solid; border-color:';\n        var styleEnd = 'border-bottom:1px solid; border-right:1px solid; border-color:';\n        var styleBeginAndEnd = 'border-left:1px solid; border-right:1px solid; border-bottom:1px solid; border-color:';\n        var row = [];\n        var end = currentPos + settings.numCols;\n        var spaceBetweenChars = settings.spaceBetweenChars ? ' ' : '';\n        var defaultColor = annotation.color;\n        var id = annotation.id;\n        for (var pos = currentPos; pos < end; pos++) {\n          // regions\n          for (var r in annotation.regions) {\n            region = annotation.regions[r];\n            spaceAfter = '';\n            spaceAfter += pos % settings.numColsForSpace == 0 ? ' ' : '';\n            spaceAfter += spaceBetweenChars;\n            color = region.color ? region.color : defaultColor;\n            data = 'class=\"annotation ' + id + '\" id=\"' + id + '\" color=\"' + color + '\" pos=\"' + pos + '\"';\n            if (pos == region.start && pos == region.end) {\n              row[pos] = '<span style=\"' + styleBeginAndEnd + color + '\" ' + data + '> ';\n              row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (pos == region.start) {\n              row[pos] = '<span style=\"' + styleBegin + color + '\" ' + data + '> ';\n              row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (pos == region.end) {\n              row[pos] = '<span style=\"' + styleEnd + color + ' \" ' + data + '> ';\n              //row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (pos > region.start && pos < region.end) {\n              row[pos] = '<span style=\"' + styleOn + color + '\" ' + data + '> ';\n              row[pos] += spaceAfter;\n              row[pos] += '</span>';\n            } else if (!row[pos]) {\n              row[pos] = ' ';\n              row[pos] += spaceAfter;\n            }\n          }\n        }\n        var str = row.join('');\n        return str.indexOf('span') == -1 ? '' : str;\n      },\n      /* \n      * Function: Sequence._drawRaw\n      * Purpose:  Repaint the current sequence using RAW format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawRaw: function _drawRaw() {\n        var self = this;\n        var a = this.opt.sequence.toLowerCase().split('');\n        var i = 0;\n        var arr = [];\n        var pre = jQuery('<pre></pre>').appendTo(this._contentDiv);\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numCols: numCols\n        };\n        pre.html(this._drawSequence(a, opt));\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawPride\n      * Purpose:  Repaint the current sequence using PRIDE format.  \n      * Returns:  -\n      * Inputs: -\n      */\n      _drawPride: function _drawPride() {\n        var seq = this.opt.sequence.toUpperCase().split('');\n\n        /* Correct column size in case the sequence is as small peptide */\n        var numCols = this.opt.columns.size;\n        if (this.opt.sequence.length < this.opt.columns.size) {\n          numCols = this.opt.sequence.length;\n        }\n        var opt = {\n          numLeft: true,\n          numLeftSize: 5,\n          numLeftPad: ' ',\n          numRight: false,\n          numRightSize: 5,\n          numRightPad: '',\n          numCols: numCols,\n          numColsForSpace: this.opt.columns.spacedEach\n        };\n        this._drawSequence(seq, opt);\n        this._drawAnnotations(opt);\n      },\n      /* \n      * Function: Sequence._drawSequence\n      * Purpose:  Repaint the current sequence using CUSTOM format.  \n      * Returns:  -\n      * Inputs:   a -> {char[]} a The sequence strand.\n      * \t\t\t opt -> {Object} opt The CUSTOM format.\n      */\n      _drawSequence: function _drawSequence(a, opt) {\n        var indL = '';\n        var indT = '';\n        var indR = '\\n';\n        var str = '';\n\n        // Index at top?\n        if (opt.numTop) {\n          indT += '<span class=\"numTop pos-marker\">';\n          var size = opt.spaceBetweenChars ? opt.numTopEach * 2 : opt.numTopEach;\n          if (opt.numLeft) {\n            indT += this._formatIndex(' ', opt.numLeftSize, ' ');\n          }\n          indT += this._formatIndex(' ', size, ' ');\n          for (var x = opt.numTopEach; x < opt.numCols; x += opt.numTopEach) {\n            indT += this._formatIndex(x, size, ' ', true);\n          }\n          indT += '</span>';\n        }\n\n        // Index at the left?\n        if (opt.numLeft) {\n          indL += '<span id=\"numLeft_' + this.getId() + '_' + 0 + '\"';\n          indL += 'class=\"pos-marker\">';\n          indL += this._formatIndex(1, opt.numLeftSize, opt.numLeftPad);\n          indL += '  ';\n          indL += '</span>';\n          indL += '\\n';\n        }\n        var j = 1;\n        for (var i = 1; i <= a.length; i++) {\n          if (i % opt.numCols == 0) {\n            str += '<span class=\"sequence\" id=\"' + this.getId() + '_' + i + '\">' + a[i - 1] + '</span>';\n            if (opt.numRight) {\n              indR += '<span id=\"numRight_' + this.getId() + '_' + i + '\"';\n              indR += 'class=\"pos-marker\">';\n              indR += '  ';\n              indR += this._formatIndex(i, opt.numRightSize, opt.numRightPad);\n              indR += '</span>';\n              indR += '\\n';\n            }\n            str += '<br/>';\n            var aaRemaining = a.length - i;\n            if (opt.numLeft && aaRemaining > 0) {\n              indL += '<span id=\"numLeft_' + this.getId() + '_' + i + '\"';\n              indL += 'class=\"pos-marker\">';\n              indL += this._formatIndex(i + 1, opt.numLeftSize, opt.numLeftPad);\n              indL += '  ';\n              indL += '</span>';\n              indL += '\\n';\n            }\n            j = 1;\n          } else {\n            str += '<span class=\"sequence\" id=\"' + this.getId() + '_' + i + '\"';\n            str += j % opt.numColsForSpace == 0 ? ' style=\"letter-spacing: 1em;\"' : '';\n            str += opt.spaceBetweenChars ? ' style=\"letter-spacing: 1em;\"' : '';\n            str += '\">' + a[i - 1];\n            str += '</span>';\n            j++;\n          }\n        }\n        str += '<br/>';\n        if (jQuery.browser.msie) {\n          str = '<pre>' + str + '</pre>';\n        }\n        var ret = [];\n        if (opt.numTop) {\n          jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(indT).addClass('indT').css({\n            color: '#aaa'\n          }).appendTo(this._contentDiv);\n        }\n        if (opt.numLeft) {\n          jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(indL).addClass('indL').css({\n            color: '#aaa',\n            display: 'inline-block'\n          }).appendTo(this._contentDiv);\n        }\n        jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(str).addClass('seqF').css({\n          display: 'inline-block'\n        }).appendTo(this._contentDiv);\n        if (opt.numRight) {\n          jquery__WEBPACK_IMPORTED_MODULE_0___default()('<pre/>').html(indR).addClass('indR').css({\n            color: '#aaa',\n            display: 'inline-block'\n          }).appendTo(this._contentDiv);\n        }\n        return str;\n      },\n      /* \n      * Function: Sequence._formatIndex\n      * Purpose:  Build the HTML corresponding to counting numbers (top, left, right) in the strand.\n      * Returns:  -\n      * Inputs:   number -> {int} The number \n      * \t\t\t size -> {int} Number of bins to suit the number.\n      * \t\t\t fillingChar -> {char} Character to be used for filling out blank bins.\n      * \t\t\t alignLeft -> {bool} Tell if aligned to the left.\n      */\n      _formatIndex: function _formatIndex(number, size, fillingChar, alignLeft) {\n        var str = number.toString();\n        var filling = '';\n        var padding = size - str.length;\n        if (padding > 0) {\n          while (padding-- > 0) {\n            filling += '<span>' + fillingChar + '</span>';\n          }\n          if (alignLeft) {\n            str = number + filling;\n          } else {\n            str = filling + number;\n          }\n        }\n        return str;\n      },\n      /* \n      * Function: Sequence._addSpanEvents\n      * Purpose:  Add the event handlers to the strand.\n      * Returns:  -\n      * Inputs:   -\n      */\n      _addSpanEvents: function _addSpanEvents() {\n        var self = this;\n        var isMouseDown = false;\n        var clickPos;\n        var currentPos;\n        self._contentDiv.find('.sequence').each(function () {\n          // Register the starting position\n          jQuery(this).mousedown(function () {\n            var id = jQuery(this).attr('id');\n            currentPos = parseInt(id.substr(id.indexOf('_') + 1));\n            clickPos = currentPos;\n            self._setSelection(clickPos, currentPos);\n            isMouseDown = true;\n\n            // Selection is happening, raise an event\n            self.trigger(EVT_ON_SELECTION_CHANGE, {\n              'start': self.opt.selection.start,\n              'end': self.opt.selection.end\n            });\n          }).mouseover(function () {\n            // Update selection\n            // Show tooltip containing the position\n            var id = jQuery(this).attr('id');\n            currentPos = parseInt(id.substr(id.indexOf('_') + 1));\n            if (isMouseDown) {\n              if (currentPos > clickPos) {\n                self._setSelection(clickPos, currentPos);\n              } else {\n                self._setSelection(currentPos, clickPos);\n              }\n\n              // Selection is happening, raise an event\n              self.trigger(EVT_ON_SELECTION_CHANGE, {\n                'start': self.opt.selection.start,\n                'end': self.opt.selection.end\n              });\n            }\n          }).mouseup(function () {\n            isMouseDown = false;\n            // Selection is done, raise an event\n            self.trigger(EVT_ON_SELECTION_CHANGED, {\n              'start': self.opt.selection.start,\n              'end': self.opt.selection.end\n            });\n          });\n\n          // Add a tooltip for this sequence base.\n          self._addToolTip.call(self, this, function () {\n            if (isMouseDown) {\n              return '[' + self.opt.selection.start + ', ' + self.opt.selection.end + ']';\n            } else {\n              return currentPos;\n            }\n          });\n        }).css('cursor', 'pointer');\n      },\n      /* \n      * Function: Sequence._addTooltip\n      * Purpose:  Add a tooltip around the target DOM element provided as argument\n      * Returns:  -\n      * Inputs:   target -> {Element} DOM element wich is the targeted focus for the tooltip.\n      * \t\t\t cbGetMessageFunction -> {function} A callback function wich returns the message to be displayed in the tip.\n      */\n      _addToolTip: function _addToolTip(target, cbGetMessageFunction) {\n        var tipId = this.opt._tooltip;\n        jQuery(target).mouseover(function (e) {\n          var offset = jQuery(e.target).offset();\n          if (!jQuery(tipId).is(':visible')) {\n            jQuery(tipId).css({\n              'background-color': '#000',\n              'padding': '3px 10px 3px 10px',\n              'top': offset.top + jQuery(e.target).height() + 'px',\n              'left': offset.left + jQuery(e.target).width() + 'px'\n            }).animate({\n              opacity: '0.85'\n            }, 10).html(cbGetMessageFunction.call(target)).show();\n          }\n        }).mouseout(function () {\n          //Remove the appended tooltip template\n          jQuery(tipId).hide();\n        });\n      },\n      /**\n      * Annotate a set of intervals provided in the argument.\n      * \n      * @example\n      * // Annotations using regions with different colors.\n      * mySequence.addAnnotation({\n      *    name:\"UNIPROT\", \n      *    html:\"&lt;br&gt; Example of &lt;b&gt;HTML&lt;/b&gt;\", \n      *    color:\"green\", \n      *    regions: [\n      *       {start: 540, end: 560},\n      *       {start: 561, end:580, color: \"#FFA010\"}, \n      *       {start: 581, end:590, color: \"red\"}, \n      *       {start: 690, end:710}]\n      * });\n      * \n      * \n      * @param {Object} annotation The intervals belonging to the same annotation. \n      * Syntax: { name: &lt;value&gt;, color: &lt;HTMLColorCode&gt;, html: &lt;HTMLString&gt;, regions: [{ start: &lt;startVal1&gt;, end: &lt;endVal1&gt;}, ...,  { start: &lt;startValN&gt;, end: &lt;endValN&gt;}] }\n      */\n      addAnnotation: function addAnnotation(annotation) {\n        this._annotations.push(annotation);\n        this._redraw();\n      },\n      /**\n      * Removes an annotation by means of its name.\n      * \n      * @example \n      * // Remove the UNIPROT annotation.\n      * mySequence.removeAnnotation('UNIPROT'); \n      * \n      * @param {string} name The name of the annotation to be removed.\n      * \n      */\n      removeAnnotation: function removeAnnotation(name) {\n        for (var i = 0; i < this._annotations.length; i++) {\n          if (name != this._annotations[i].name) {\n            this._annotations.splice(i, 1);\n            this._redraw();\n            break;\n          }\n        }\n      },\n      /**\n      * Removes all the current annotations.\n      * \n      * @example \n      * mySequence.removeAllAnnotations(); \n      * \n      */\n      removeAllAnnotations: function removeAllAnnotations() {\n        this._annotations = [];\n        this._redraw();\n      }\n    });\n    require('biojs-events').mixin(Sequence.prototype);\n  }, {\n    'biojs-events': 2,\n    'jquery-browser-plugin': 20,\n    'js-class': 22\n  }],\n  2: [function (require, module, exports) {\n    var events = require('backbone-events-standalone');\n    events.onAll = function (callback, context) {\n      this.on('all', callback, context);\n      return this;\n    };\n\n    // Mixin utility\n    events.oldMixin = events.mixin;\n    events.mixin = function (proto) {\n      events.oldMixin(proto);\n      // add custom onAll\n      var exports = ['onAll'];\n      for (var i = 0; i < exports.length; i++) {\n        var name = exports[i];\n        proto[name] = this[name];\n      }\n      return proto;\n    };\n    module.exports = events;\n  }, {\n    'backbone-events-standalone': 4\n  }],\n  3: [function (require, module, exports) {\n    /**\n     * Standalone extraction of Backbone.Events, no external dependency required.\n     * Degrades nicely when Backone/underscore are already available in the current\n     * global context.\n     *\n     * Note that docs suggest to use underscore's `_.extend()` method to add Events\n     * support to some given object. A `mixin()` method has been added to the Events\n     * prototype to avoid using underscore for that sole purpose:\n     *\n     *     var myEventEmitter = BackboneEvents.mixin({});\n     *\n     * Or for a function constructor:\n     *\n     *     function MyConstructor(){}\n     *     MyConstructor.prototype.foo = function(){}\n     *     BackboneEvents.mixin(MyConstructor.prototype);\n     *\n     * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud Inc.\n     * (c) 2013 Nicolas Perriault\n     */\n    /* global exports:true, define, module */\n    (function () {\n      var root = this,\n        breaker = {},\n        nativeForEach = Array.prototype.forEach,\n        hasOwnProperty = Object.prototype.hasOwnProperty,\n        slice = Array.prototype.slice,\n        idCounter = 0;\n\n      // Returns a partial implementation matching the minimal API subset required\n      // by Backbone.Events\n      function miniscore() {\n        return {\n          keys: Object.keys || function (obj) {\n            if (_typeof(obj) !== 'object' && typeof obj !== 'function' || obj === null) {\n              throw new TypeError('keys() called on a non-object');\n            }\n            var key,\n              keys = [];\n            for (key in obj) {\n              if (obj.hasOwnProperty(key)) {\n                keys[keys.length] = key;\n              }\n            }\n            return keys;\n          },\n          uniqueId: function uniqueId(prefix) {\n            var id = ++idCounter + '';\n            return prefix ? prefix + id : id;\n          },\n          has: function has(obj, key) {\n            return hasOwnProperty.call(obj, key);\n          },\n          each: function each(obj, iterator, context) {\n            if (obj == null) return;\n            if (nativeForEach && obj.forEach === nativeForEach) {\n              obj.forEach(iterator, context);\n            } else if (obj.length === +obj.length) {\n              for (var i = 0, l = obj.length; i < l; i++) {\n                if (iterator.call(context, obj[i], i, obj) === breaker) return;\n              }\n            } else {\n              for (var key in obj) {\n                if (this.has(obj, key)) {\n                  if (iterator.call(context, obj[key], key, obj) === breaker) return;\n                }\n              }\n            }\n          },\n          once: function once(func) {\n            var ran = false,\n              memo;\n            return function () {\n              if (ran) return memo;\n              ran = true;\n              memo = func.apply(this, arguments);\n              func = null;\n              return memo;\n            };\n          }\n        };\n      }\n      var _ = miniscore(),\n        Events;\n\n      // Backbone.Events\n      // ---------------\n\n      // A module that can be mixed in to *any object* in order to provide it with\n      // custom events. You may bind with `on` or remove with `off` callback\n      // functions to an event; `trigger`-ing an event fires all callbacks in\n      // succession.\n      //\n      //     var object = {};\n      //     _.extend(object, Backbone.Events);\n      //     object.on('expand', function(){ alert('expanded'); });\n      //     object.trigger('expand');\n      //\n      Events = {\n        // Bind an event to a `callback` function. Passing `\"all\"` will bind\n        // the callback to all events fired.\n        on: function on(name, callback, context) {\n          if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;\n          this._events || (this._events = {});\n          var events = this._events[name] || (this._events[name] = []);\n          events.push({\n            callback: callback,\n            context: context,\n            ctx: context || this\n          });\n          return this;\n        },\n        // Bind an event to only be triggered a single time. After the first time\n        // the callback is invoked, it will be removed.\n        once: function once(name, callback, context) {\n          if (!eventsApi(this, 'once', name, [callback, context]) || !callback) return this;\n          var self = this;\n          var once = _.once(function () {\n            self.off(name, once);\n            callback.apply(this, arguments);\n          });\n          once._callback = callback;\n          return this.on(name, once, context);\n        },\n        // Remove one or many callbacks. If `context` is null, removes all\n        // callbacks with that function. If `callback` is null, removes all\n        // callbacks for the event. If `name` is null, removes all bound\n        // callbacks for all events.\n        off: function off(name, callback, context) {\n          var retain, ev, events, names, i, l, j, k;\n          if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;\n          if (!name && !callback && !context) {\n            this._events = {};\n            return this;\n          }\n          names = name ? [name] : _.keys(this._events);\n          for (i = 0, l = names.length; i < l; i++) {\n            name = names[i];\n            if (events = this._events[name]) {\n              this._events[name] = retain = [];\n              if (callback || context) {\n                for (j = 0, k = events.length; j < k; j++) {\n                  ev = events[j];\n                  if (callback && callback !== ev.callback && callback !== ev.callback._callback || context && context !== ev.context) {\n                    retain.push(ev);\n                  }\n                }\n              }\n              if (!retain.length) delete this._events[name];\n            }\n          }\n          return this;\n        },\n        // Trigger one or many events, firing all bound callbacks. Callbacks are\n        // passed the same arguments as `trigger` is, apart from the event name\n        // (unless you're listening on `\"all\"`, which will cause your callback to\n        // receive the true name of the event as the first argument).\n        trigger: function trigger(name) {\n          if (!this._events) return this;\n          var args = slice.call(arguments, 1);\n          if (!eventsApi(this, 'trigger', name, args)) return this;\n          var events = this._events[name];\n          var allEvents = this._events.all;\n          if (events) triggerEvents(events, args);\n          if (allEvents) triggerEvents(allEvents, arguments);\n          return this;\n        },\n        // Tell this object to stop listening to either specific events ... or\n        // to every object it's currently listening to.\n        stopListening: function stopListening(obj, name, callback) {\n          var listeners = this._listeners;\n          if (!listeners) return this;\n          var deleteListener = !name && !callback;\n          if (_typeof(name) === 'object') callback = this;\n          if (obj) (listeners = {})[obj._listenerId] = obj;\n          for (var id in listeners) {\n            listeners[id].off(name, callback, this);\n            if (deleteListener) delete this._listeners[id];\n          }\n          return this;\n        }\n      };\n\n      // Regular expression used to split event strings.\n      var eventSplitter = /\\s+/;\n\n      // Implement fancy features of the Events API such as multiple event\n      // names `\"change blur\"` and jQuery-style event maps `{change: action}`\n      // in terms of the existing API.\n      var eventsApi = function eventsApi(obj, action, name, rest) {\n        if (!name) return true;\n\n        // Handle event maps.\n        if (_typeof(name) === 'object') {\n          for (var key in name) {\n            obj[action].apply(obj, [key, name[key]].concat(rest));\n          }\n          return false;\n        }\n\n        // Handle space separated event names.\n        if (eventSplitter.test(name)) {\n          var names = name.split(eventSplitter);\n          for (var i = 0, l = names.length; i < l; i++) {\n            obj[action].apply(obj, [names[i]].concat(rest));\n          }\n          return false;\n        }\n        return true;\n      };\n\n      // A difficult-to-believe, but optimized internal dispatch function for\n      // triggering events. Tries to keep the usual cases speedy (most internal\n      // Backbone events have 3 arguments).\n      var triggerEvents = function triggerEvents(events, args) {\n        var ev,\n          i = -1,\n          l = events.length,\n          a1 = args[0],\n          a2 = args[1],\n          a3 = args[2];\n        switch (args.length) {\n          case 0:\n            while (++i < l) (ev = events[i]).callback.call(ev.ctx);\n            return;\n          case 1:\n            while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1);\n            return;\n          case 2:\n            while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2);\n            return;\n          case 3:\n            while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3);\n            return;\n          default:\n            while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);\n        }\n      };\n      var listenMethods = {\n        listenTo: 'on',\n        listenToOnce: 'once'\n      };\n\n      // Inversion-of-control versions of `on` and `once`. Tell *this* object to\n      // listen to an event in another object ... keeping track of what it's\n      // listening to.\n      _.each(listenMethods, function (implementation, method) {\n        Events[method] = function (obj, name, callback) {\n          var listeners = this._listeners || (this._listeners = {});\n          var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));\n          listeners[id] = obj;\n          if (_typeof(name) === 'object') callback = this;\n          obj[implementation](name, callback, this);\n          return this;\n        };\n      });\n\n      // Aliases for backwards compatibility.\n      Events.bind = Events.on;\n      Events.unbind = Events.off;\n\n      // Mixin utility\n      Events.mixin = function (proto) {\n        var exports = ['on', 'once', 'off', 'trigger', 'stopListening', 'listenTo', 'listenToOnce', 'bind', 'unbind'];\n        _.each(exports, function (name) {\n          proto[name] = this[name];\n        }, this);\n        return proto;\n      };\n\n      // Export Events as BackboneEvents depending on current context\n      if (typeof define === 'function') {\n        define(function () {\n          return Events;\n        });\n      } else if (typeof exports !== 'undefined') {\n        if (typeof module !== 'undefined' && module.exports) {\n          exports = module.exports = Events;\n        }\n        exports.BackboneEvents = Events;\n      } else {\n        root.BackboneEvents = Events;\n      }\n    })(this);\n  }, {}],\n  4: [function (require, module, exports) {\n    module.exports = require('./backbone-events-standalone');\n  }, {\n    './backbone-events-standalone': 3\n  }],\n  5: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var GenericReader, xhr;\n    xhr = require('nets');\n    module.exports = GenericReader = function () {\n      function GenericReader() {}\n      GenericReader.read = function (url, callback) {\n        var onret;\n        onret = function (_this) {\n          return function (err, response, text) {\n            return _this._onRetrieval(text, callback);\n          };\n        }(this);\n        return xhr(url, onret);\n      };\n      GenericReader._onRetrieval = function (text, callback) {\n        var rText;\n        rText = this.parse(text);\n        return callback(rText);\n      };\n      return GenericReader;\n    }();\n  }, {\n    'nets': 12\n  }],\n  6: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var Fasta,\n      GenericReader,\n      Seq,\n      Str,\n      __hasProp = {}.hasOwnProperty,\n      __extends = function __extends(child, parent) {\n        for (var key in parent) {\n          if (__hasProp.call(parent, key)) child[key] = parent[key];\n        }\n        function ctor() {\n          this.constructor = child;\n        }\n        ctor.prototype = parent.prototype;\n        child.prototype = new ctor();\n        child.__super__ = parent.prototype;\n        return child;\n      };\n    Str = require('./strings');\n    GenericReader = require('./generic_reader');\n    Seq = require('biojs-model').seq;\n    module.exports = Fasta = function (_super) {\n      __extends(Fasta, _super);\n      function Fasta() {\n        return Fasta.__super__.constructor.apply(this, arguments);\n      }\n      Fasta.parse = function (text) {\n        var currentSeq, database, databaseID, identifiers, k, label, line, seqs, _i, _len;\n        seqs = [];\n        if (Object.prototype.toString.call(text) !== '[object Array]') {\n          text = text.split('\\n');\n        }\n        for (_i = 0, _len = text.length; _i < _len; _i++) {\n          line = text[_i];\n          if (line[0] === '>' || line[0] === ';') {\n            label = line.slice(1);\n            currentSeq = new Seq('', label, seqs.length);\n            seqs.push(currentSeq);\n            if (Str.contains('|', line)) {\n              identifiers = label.split('|');\n              k = 1;\n              while (k < identifiers.length) {\n                database = identifiers[k];\n                databaseID = identifiers[k + 1];\n                currentSeq.meta[database] = databaseID;\n                k += 2;\n              }\n              currentSeq.name = identifiers[identifiers.length - 1];\n            }\n          } else {\n            currentSeq.seq += line;\n          }\n        }\n        return seqs;\n      };\n      return Fasta;\n    }(GenericReader);\n  }, {\n    './generic_reader': 5,\n    './strings': 7,\n    'biojs-model': 10\n  }],\n  7: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var strings;\n    strings = {\n      contains: function contains(text, search) {\n        return ''.indexOf.call(text, search, 0) !== -1;\n      }\n    };\n    module.exports = strings;\n  }, {}],\n  8: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var Utils;\n    Utils = {};\n    Utils.splitNChars = function (txt, num) {\n      var i, result, _i, _ref;\n      result = [];\n      for (i = _i = 0, _ref = txt.length - 1; num > 0 ? _i <= _ref : _i >= _ref; i = _i += num) {\n        result.push(txt.substr(i, num));\n      }\n      return result;\n    };\n    module.exports = Utils;\n  }, {}],\n  9: [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    var FastaExporter, Utils;\n    Utils = require('./utils');\n    module.exports = FastaExporter = function () {\n      function FastaExporter() {}\n      FastaExporter['export'] = function (seqs, access) {\n        var seq, text, _i, _len;\n        text = '';\n        for (_i = 0, _len = seqs.length; _i < _len; _i++) {\n          seq = seqs[_i];\n          if (access != null) {\n            seq = access(seq);\n          }\n          text += '>' + seq.name + '\\n';\n          text += Utils.splitNChars(seq.seq, 80).join('\\n');\n          text += '\\n';\n        }\n        return text;\n      };\n      return FastaExporter;\n    }();\n  }, {\n    './utils': 8\n  }],\n  10: [function (require, module, exports) {\n    module.exports.seq = require('./seq');\n  }, {\n    './seq': 11\n  }],\n  11: [function (require, module, exports) {\n    module.exports = function (seq, name, id) {\n      this.seq = seq;\n      this.name = name;\n      this.id = id;\n      this.meta = {};\n    };\n  }, {}],\n  12: [function (require, module, exports) {\n    var req = require('request');\n    module.exports = Nets;\n    function Nets(uri, opts, cb) {\n      req(uri, opts, cb);\n    }\n  }, {\n    'request': 13\n  }],\n  13: [function (require, module, exports) {\n    var window = require('global/window');\n    var once = require('once');\n    var parseHeaders = require('parse-headers');\n    var messages = {\n      '0': 'Internal XMLHttpRequest Error',\n      '4': '4xx Client Error',\n      '5': '5xx Server Error'\n    };\n    var XHR = window.XMLHttpRequest || noop;\n    var XDR = 'withCredentials' in new XHR() ? XHR : window.XDomainRequest;\n    module.exports = createXHR;\n    function createXHR(options, callback) {\n      if (typeof options === 'string') {\n        options = {\n          uri: options\n        };\n      }\n      options = options || {};\n      callback = once(callback);\n      var xhr = options.xhr || null;\n      if (!xhr) {\n        if (options.cors || options.useXDR) {\n          xhr = new XDR();\n        } else {\n          xhr = new XHR();\n        }\n      }\n      var uri = xhr.url = options.uri || options.url;\n      var method = xhr.method = options.method || 'GET';\n      var body = options.body || options.data;\n      var headers = xhr.headers = options.headers || {};\n      var sync = !!options.sync;\n      var isJson = false;\n      var key;\n      var load = options.response ? loadResponse : loadXhr;\n      if ('json' in options) {\n        isJson = true;\n        headers['Accept'] = 'application/json';\n        if (method !== 'GET' && method !== 'HEAD') {\n          headers['Content-Type'] = 'application/json';\n          body = JSON.stringify(options.json);\n        }\n      }\n      xhr.onreadystatechange = readystatechange;\n      xhr.onload = load;\n      xhr.onerror = error;\n      // IE9 must have onprogress be set to a unique function.\n      xhr.onprogress = function () {\n        // IE must die\n      };\n      // hate IE\n      xhr.ontimeout = noop;\n      xhr.open(method, uri, !sync);\n      //backward compatibility\n      if (options.withCredentials || options.cors && options.withCredentials !== false) {\n        xhr.withCredentials = true;\n      }\n\n      // Cannot set timeout with sync request\n      if (!sync) {\n        xhr.timeout = 'timeout' in options ? options.timeout : 5000;\n      }\n      if (xhr.setRequestHeader) {\n        for (key in headers) {\n          if (headers.hasOwnProperty(key)) {\n            xhr.setRequestHeader(key, headers[key]);\n          }\n        }\n      } else if (options.headers) {\n        throw new Error('Headers cannot be set on an XDomainRequest object');\n      }\n      if ('responseType' in options) {\n        xhr.responseType = options.responseType;\n      }\n      if ('beforeSend' in options && typeof options.beforeSend === 'function') {\n        options.beforeSend(xhr);\n      }\n      xhr.send(body);\n      return xhr;\n      function readystatechange() {\n        if (xhr.readyState === 4) {\n          load();\n        }\n      }\n      function getBody() {\n        // Chrome with requestType=blob throws errors arround when even testing access to responseText\n        var body = null;\n        if (xhr.response) {\n          body = xhr.response;\n        } else if (xhr.responseType === 'text' || !xhr.responseType) {\n          body = xhr.responseText || xhr.responseXML;\n        }\n        if (isJson) {\n          try {\n            body = JSON.parse(body);\n          } catch (e) {}\n        }\n        return body;\n      }\n      function getStatusCode() {\n        return xhr.status === 1223 ? 204 : xhr.status;\n      }\n\n      // if we're getting a none-ok statusCode, build & return an error\n      function errorFromStatusCode(status, body) {\n        var error = null;\n        if (status === 0 || status >= 400 && status < 600) {\n          var message = (typeof body === 'string' ? body : false) || messages[String(status).charAt(0)];\n          error = new Error(message);\n          error.statusCode = status;\n        }\n        return error;\n      }\n\n      // will load the data & process the response in a special response object\n      function loadResponse() {\n        var status = getStatusCode();\n        var body = getBody();\n        var error = errorFromStatusCode(status, body);\n        var response = {\n          body: body,\n          statusCode: status,\n          statusText: xhr.statusText,\n          raw: xhr\n        };\n        if (xhr.getAllResponseHeaders) {\n          //remember xhr can in fact be XDR for CORS in IE\n          response.headers = parseHeaders(xhr.getAllResponseHeaders());\n        } else {\n          response.headers = {};\n        }\n        callback(error, response, response.body);\n      }\n\n      // will load the data and add some response properties to the source xhr\n      // and then respond with that\n      function loadXhr() {\n        var status = getStatusCode();\n        var error = errorFromStatusCode(status);\n        xhr.status = xhr.statusCode = status;\n        xhr.body = getBody();\n        xhr.headers = parseHeaders(xhr.getAllResponseHeaders());\n        callback(error, xhr, xhr.body);\n      }\n      function error(evt) {\n        callback(evt, xhr);\n      }\n    }\n    function noop() {}\n  }, {\n    'global/window': 14,\n    'once': 15,\n    'parse-headers': 19\n  }],\n  14: [function (require, module, exports) {\n    (function (global) {\n      if (typeof window !== 'undefined') {\n        module.exports = window;\n      } else if (typeof global !== 'undefined') {\n        module.exports = global;\n      } else if (typeof self !== 'undefined') {\n        module.exports = self;\n      } else {\n        module.exports = {};\n      }\n    }).call(this, typeof __webpack_require__.g !== 'undefined' ? __webpack_require__.g : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {});\n  }, {}],\n  15: [function (require, module, exports) {\n    module.exports = once;\n    once.proto = once(function () {\n      Object.defineProperty(Function.prototype, 'once', {\n        value: function value() {\n          return once(this);\n        },\n        configurable: true\n      });\n    });\n    function once(fn) {\n      var called = false;\n      return function () {\n        if (called) return;\n        called = true;\n        return fn.apply(this, arguments);\n      };\n    }\n  }, {}],\n  16: [function (require, module, exports) {\n    var isFunction = require('is-function');\n    module.exports = forEach;\n    var toString = Object.prototype.toString;\n    var hasOwnProperty = Object.prototype.hasOwnProperty;\n    function forEach(list, iterator, context) {\n      if (!isFunction(iterator)) {\n        throw new TypeError('iterator must be a function');\n      }\n      if (arguments.length < 3) {\n        context = this;\n      }\n      if (toString.call(list) === '[object Array]') forEachArray(list, iterator, context);else if (typeof list === 'string') forEachString(list, iterator, context);else forEachObject(list, iterator, context);\n    }\n    function forEachArray(array, iterator, context) {\n      for (var i = 0, len = array.length; i < len; i++) {\n        if (hasOwnProperty.call(array, i)) {\n          iterator.call(context, array[i], i, array);\n        }\n      }\n    }\n    function forEachString(string, iterator, context) {\n      for (var i = 0, len = string.length; i < len; i++) {\n        // no such thing as a sparse string.\n        iterator.call(context, string.charAt(i), i, string);\n      }\n    }\n    function forEachObject(object, iterator, context) {\n      for (var k in object) {\n        if (hasOwnProperty.call(object, k)) {\n          iterator.call(context, object[k], k, object);\n        }\n      }\n    }\n  }, {\n    'is-function': 17\n  }],\n  17: [function (require, module, exports) {\n    module.exports = isFunction;\n    var toString = Object.prototype.toString;\n    function isFunction(fn) {\n      var string = toString.call(fn);\n      return string === '[object Function]' || typeof fn === 'function' && string !== '[object RegExp]' || typeof window !== 'undefined' && (\n      // IE8 and below\n      fn === window.setTimeout || fn === window.alert || fn === window.confirm || fn === window.prompt);\n    }\n  }, {}],\n  18: [function (require, module, exports) {\n    exports = module.exports = trim;\n    function trim(str) {\n      return str.replace(/^\\s*|\\s*$/g, '');\n    }\n    exports.left = function (str) {\n      return str.replace(/^\\s*/, '');\n    };\n    exports.right = function (str) {\n      return str.replace(/\\s*$/, '');\n    };\n  }, {}],\n  19: [function (require, module, exports) {\n    var trim = require('trim'),\n      forEach = require('for-each'),\n      isArray = function isArray(arg) {\n        return Object.prototype.toString.call(arg) === '[object Array]';\n      };\n    module.exports = function (headers) {\n      if (!headers) return {};\n      var result = {};\n      forEach(trim(headers).split('\\n'), function (row) {\n        var index = row.indexOf(':'),\n          key = trim(row.slice(0, index)).toLowerCase(),\n          value = trim(row.slice(index + 1));\n        if (typeof result[key] === 'undefined') {\n          result[key] = value;\n        } else if (isArray(result[key])) {\n          result[key].push(value);\n        } else {\n          result[key] = [result[key], value];\n        }\n      });\n      return result;\n    };\n  }, {\n    'for-each': 16,\n    'trim': 18\n  }],\n  20: [function (require, module, exports) {\n    module.exports = require('./jquery.browser');\n  }, {\n    './jquery.browser': 21\n  }],\n  21: [function (require, module, exports) {\n    /*!\n     * jQuery Browser Plugin v0.0.6\n     * https://github.com/gabceb/jquery-browser-plugin\n     *\n     * Original jquery-browser code Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors\n     * http://jquery.org/license\n     *\n     * Modifications Copyright 2013 Gabriel Cebrian\n     * https://github.com/gabceb\n     *\n     * Released under the MIT license\n     *\n     * Date: 2013-07-29T17:23:27-07:00\n     */\n\n    var matched, browser;\n    var uaMatch = function uaMatch(ua) {\n      ua = ua.toLowerCase();\n      var match = /(opr)[\\/]([\\w.]+)/.exec(ua) || /(chrome)[ \\/]([\\w.]+)/.exec(ua) || /(version)[ \\/]([\\w.]+).*(safari)[ \\/]([\\w.]+)/.exec(ua) || /(webkit)[ \\/]([\\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ \\/]([\\w.]+)/.exec(ua) || /(msie) ([\\w.]+)/.exec(ua) || ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) || ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) || [];\n      var platform_match = /(ipad)/.exec(ua) || /(iphone)/.exec(ua) || /(android)/.exec(ua) || /(windows phone)/.exec(ua) || /(win)/.exec(ua) || /(mac)/.exec(ua) || /(linux)/.exec(ua) || /(cros)/i.exec(ua) || [];\n      return {\n        browser: match[3] || match[1] || '',\n        version: match[2] || '0',\n        platform: platform_match[0] || ''\n      };\n    };\n    matched = uaMatch(window.navigator.userAgent);\n    browser = {};\n    browser.uaMatch = uaMatch;\n    if (matched.browser) {\n      browser[matched.browser] = true;\n      browser.version = matched.version;\n      browser.versionNumber = parseInt(matched.version);\n    }\n    if (matched.platform) {\n      browser[matched.platform] = true;\n    }\n\n    // These are all considered mobile platforms, meaning they run a mobile browser\n    if (browser.android || browser.ipad || browser.iphone || browser['windows phone']) {\n      browser.mobile = true;\n    }\n\n    // These are all considered desktop platforms, meaning they run a desktop browser\n    if (browser.cros || browser.mac || browser.linux || browser.win) {\n      browser.desktop = true;\n    }\n\n    // Chrome, Opera 15+ and Safari are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari) {\n      browser.webkit = true;\n    }\n\n    // IE11 has a new token so we will assign it msie to avoid breaking changes\n    if (browser.rv) {\n      var ie = 'msie';\n      matched.browser = ie;\n      browser[ie] = true;\n    }\n\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n      var opera = 'opera';\n      matched.browser = opera;\n      browser[opera] = true;\n    }\n\n    // Stock Android browsers are marked as Safari on Android.\n    if (browser.safari && browser.android) {\n      var android = 'android';\n      matched.browser = android;\n      browser[android] = true;\n    }\n\n    // Assign the name and platform variable\n    browser.name = matched.browser;\n    browser.platform = matched.platform;\n    module.exports = browser;\n  }, {}],\n  22: [function (require, module, exports) {\n    (function (global) {\n      /** @preserve http://github.com/easeway/js-class */\n\n      // Class Definition using ECMA5 prototype chain\n\n      function inherit(dest, src, noParent) {\n        while (src && src !== Object.prototype) {\n          Object.getOwnPropertyNames(src).forEach(function (name) {\n            if (name != '.class' && !dest.hasOwnProperty(name)) {\n              var desc = Object.getOwnPropertyDescriptor(src, name);\n              Object.defineProperty(dest, name, desc);\n            }\n          });\n          if (noParent) {\n            break;\n          }\n          src = src.__proto__;\n        }\n        return dest;\n      }\n      var Class = function Class(base, proto, options) {\n        if (typeof base != 'function') {\n          options = proto;\n          proto = base;\n          base = Object;\n        }\n        if (!proto) {\n          proto = {};\n        }\n        if (!options) {\n          options = {};\n        }\n        var meta = {\n          name: options.name,\n          base: base,\n          \"implements\": []\n        };\n        var classProto = Class.clone(proto);\n        if (options[\"implements\"]) {\n          (Array.isArray(options[\"implements\"]) ? options[\"implements\"] : [options[\"implements\"]]).forEach(function (implementedType) {\n            if (typeof implementedType == 'function' && implementedType.prototype) {\n              meta[\"implements\"].push(implementedType);\n              Class.extend(classProto, implementedType.prototype);\n            }\n          });\n        }\n        classProto.__proto__ = base.prototype;\n        var theClass = function theClass() {\n          if (typeof this.constructor == 'function') {\n            this.constructor.apply(this, arguments);\n          }\n        };\n        meta.type = theClass;\n        theClass.prototype = classProto;\n        Object.defineProperty(theClass, '.class.meta', {\n          value: meta,\n          enumerable: false,\n          configurable: false,\n          writable: false\n        });\n        Object.defineProperty(classProto, '.class', {\n          value: theClass,\n          enumerable: false,\n          configurable: false,\n          writable: false\n        });\n        if (options.statics) {\n          Class.extend(theClass, options.statics);\n        }\n        return theClass;\n      };\n      Class.extend = inherit;\n      Class.clone = function (object) {\n        return inherit({}, object);\n      };\n      function findType(meta, type) {\n        while (meta) {\n          if (meta.type.prototype === type.prototype) {\n            return true;\n          }\n          for (var i in meta[\"implements\"]) {\n            var implType = meta[\"implements\"][i];\n            var implMeta = implType['.class.meta'];\n            if (implMeta) {\n              if (findType(implMeta, type)) {\n                return true;\n              }\n            } else {\n              for (var proto = implType.prototype; proto; proto = proto.__proto__) {\n                if (proto === type.prototype) {\n                  return true;\n                }\n              }\n            }\n          }\n          meta = meta.base ? meta.base['.class.meta'] : undefined;\n        }\n        return false;\n      }\n      var Checker = Class({\n        constructor: function constructor(object) {\n          this.object = object;\n        },\n        typeOf: function typeOf(type) {\n          if (this.object instanceof type) {\n            return true;\n          }\n          var meta = Class.typeInfo(this.object);\n          return meta && findType(meta, type);\n        }\n      });\n\n      // aliases\n      Checker.prototype.a = Checker.prototype.typeOf;\n      Checker.prototype.an = Checker.prototype.typeOf;\n      Class.is = function (object) {\n        return new Checker(object);\n      };\n      Class.typeInfo = function (object) {\n        var theClass = object.__proto__['.class'];\n        return theClass ? theClass['.class.meta'] : undefined;\n      };\n      Class.VERSION = [0, 0, 2];\n      if (module) {\n        module.exports = Class;\n      } else {\n        global.Class = Class; // for browser\n      }\n    }).call(this, typeof __webpack_require__.g !== 'undefined' ? __webpack_require__.g : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {});\n  }, {}],\n  'biojs-io-fasta': [function (require, module, exports) {\n    // Generated by CoffeeScript 1.8.0\n    module.exports.parse = require('./parser');\n    module.exports.writer = require('./writer');\n  }, {\n    './parser': 6,\n    './writer': 9\n  }],\n  'biojs-vis-sequence': [function (require, module, exports) {\n    module.exports = require('./lib/index');\n  }, {\n    './lib/index': 1\n  }]\n}, {}, ['biojs-vis-sequence']);\n\n//# sourceURL=webpack://SequenceServer/./public/js/sequence.js?");
 
 /***/ }),
 
@@ -258,7 +280,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jque
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SequenceModal)\n/* harmony export */ });\n/* harmony import */ var _sequence__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sequence */ \"./public/js/sequence.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n/**\n * Takes sequence accession as props, fetches the sequence from the server, and\n * displays it in a modal.\n */\n\n\nvar SequenceModal = /*#__PURE__*/function (_React$Component) {\n  _inherits(SequenceModal, _React$Component);\n  var _super = _createSuper(SequenceModal);\n  function SequenceModal(props) {\n    var _this;\n    _classCallCheck(this, SequenceModal);\n    _this = _super.call(this, props);\n    _this.state = {\n      error_msgs: [],\n      sequences: [],\n      requestCompleted: false\n    };\n    _this.modalRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n    return _this;\n  }\n\n  // Lifecycle methods. //\n  _createClass(SequenceModal, [{\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: \"modal sequence-viewer\",\n        ref: this.modalRef,\n        tabIndex: \"-1\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"modal-dialog\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n            className: \"modal-content\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"modal-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h3\", {\n                children: \"View sequence\"\n              })\n            }), this.state.requestCompleted && this.resultsJSX() || this.loadingJSX()]\n          })\n        })\n      });\n    }\n\n    /*\n     * Returns jQuery reference to the main modal container.\n     */\n  }, {\n    key: \"modal\",\n    value: function modal() {\n      return $(this.modalRef.current);\n    }\n\n    /**\n     * Shows sequence viewer.\n     */\n  }, {\n    key: \"show\",\n    value: function show(url) {\n      var _this2 = this;\n      this.setState({\n        requestCompleted: false\n      }, function () {\n        _this2.modal().modal(\"show\");\n        _this2.loadJSON(url);\n      });\n    }\n\n    /**\n     * Hide sequence viewer.\n     */\n  }, {\n    key: \"hide\",\n    value: function hide() {\n      this.modal().modal(\"hide\");\n    }\n\n    /**\n     * Loads sequence using AJAX and updates modal state.\n     */\n  }, {\n    key: \"loadJSON\",\n    value: function loadJSON(url) {\n      var _this3 = this;\n      // Fetch sequence and update state.\n      $.getJSON(url).done(underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (response) {\n        this.setState({\n          sequences: response.sequences,\n          error_msgs: response.error_msgs,\n          requestCompleted: true\n        });\n      }, this)).fail(function (jqXHR, status, error) {\n        _this3.hide();\n        _this3.props.showErrorModal(jqXHR.responseJSON);\n      });\n    }\n  }, {\n    key: \"resultsJSX\",\n    value: function resultsJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n        className: \"modal-body\",\n        children: [underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.state.error_msgs, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (error_msg) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n            className: \"fastan\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"section-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h4\", {\n                children: error_msg[0]\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"section-content\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"pre\", {\n                className: \"pre-reset\",\n                children: error_msg[1]\n              })\n            })]\n          });\n        }, this)), underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.state.sequences, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (sequence) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(SequenceViewer, {\n            sequence: sequence\n          });\n        }, this))]\n      });\n    }\n  }, {\n    key: \"loadingJSX\",\n    value: function loadingJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: \"modal-body text-center\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n          className: \"fa fa-spinner fa-3x fa-spin\"\n        })\n      });\n    }\n  }]);\n  return SequenceModal;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().Component));\n\nvar SequenceViewer = /*#__PURE__*/function (_React$Component2) {\n  _inherits(SequenceViewer, _React$Component2);\n  var _super2 = _createSuper(SequenceViewer);\n  function SequenceViewer() {\n    _classCallCheck(this, SequenceViewer);\n    return _super2.apply(this, arguments);\n  }\n  _createClass(SequenceViewer, [{\n    key: \"render\",\n    value: function render() {\n      this.widgetID = this.widgetClass + \"-\" + new Date().getUTCMilliseconds();\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n        className: \"fastan\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"section-header\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"h4\", {\n            children: [this.props.sequence.id, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"small\", {\n              children: [\"\\xA0 \", this.props.sequence.title]\n            })]\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"section-content\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n            className: this.widgetClass,\n            id: this.widgetID\n          })\n        })]\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      // attach BioJS sequence viewer\n      var widget = new Sequence({\n        sequence: this.props.sequence.value,\n        target: this.widgetID,\n        format: \"PRIDE\",\n        columns: {\n          size: 40,\n          spacedEach: 0\n        },\n        formatOptions: {\n          title: false,\n          footer: false\n        }\n      });\n      widget.hideFormatSelector();\n    }\n  }], [{\n    key: \"widgetClass\",\n    value:\n    /**\n     * The CSS class name that will be assigned to the widget container. ID\n     * assigned to the widget container is derived from the same.\n     */\n    function widgetClass() {\n      return \"biojs-vis-sequence\";\n    }\n  }]);\n  return SequenceViewer;\n}((react__WEBPACK_IMPORTED_MODULE_1___default().Component));\n\n//# sourceURL=webpack://SequenceServer/./public/js/sequence_modal.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SequenceModal)\n/* harmony export */ });\n/* harmony import */ var _sequence__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sequence */ \"./public/js/sequence.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n/**\n * Takes sequence accession as props, fetches the sequence from the server, and\n * displays it in a modal.\n */\n\nvar SequenceModal = /*#__PURE__*/function (_React$Component) {\n  function SequenceModal(props) {\n    var _this2;\n    _classCallCheck(this, SequenceModal);\n    _this2 = _callSuper(this, SequenceModal, [props]);\n    _this2.state = {\n      error_msgs: [],\n      sequences: [],\n      requestCompleted: false\n    };\n    _this2.modalRef = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.createRef)();\n    return _this2;\n  }\n\n  // Lifecycle methods. //\n  _inherits(SequenceModal, _React$Component);\n  return _createClass(SequenceModal, [{\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: \"modal sequence-viewer\",\n        ref: this.modalRef,\n        tabIndex: \"-1\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"modal-dialog\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n            className: \"modal-content\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"modal-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h3\", {\n                children: \"View sequence\"\n              })\n            }), this.state.requestCompleted && this.resultsJSX() || this.loadingJSX()]\n          })\n        })\n      });\n    }\n\n    /*\n     * Returns jQuery reference to the main modal container.\n     */\n  }, {\n    key: \"modal\",\n    value: function modal() {\n      return $(this.modalRef.current);\n    }\n\n    /**\n     * Shows sequence viewer.\n     */\n  }, {\n    key: \"show\",\n    value: function show(url) {\n      var _this3 = this;\n      this.setState({\n        requestCompleted: false\n      }, function () {\n        _this3.modal().modal(\"show\");\n        _this3.loadJSON(url);\n      });\n    }\n\n    /**\n     * Hide sequence viewer.\n     */\n  }, {\n    key: \"hide\",\n    value: function hide() {\n      this.modal().modal(\"hide\");\n    }\n\n    /**\n     * Loads sequence using AJAX and updates modal state.\n     */\n  }, {\n    key: \"loadJSON\",\n    value: function loadJSON(url) {\n      var _this4 = this;\n      // Fetch sequence and update state.\n      $.getJSON(url).done(underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (response) {\n        this.setState({\n          sequences: response.sequences,\n          error_msgs: response.error_msgs,\n          requestCompleted: true\n        });\n      }, this)).fail(function (jqXHR, status, error) {\n        _this4.hide();\n        _this4.props.showErrorModal(jqXHR.responseJSON);\n      });\n    }\n  }, {\n    key: \"resultsJSX\",\n    value: function resultsJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n        className: \"modal-body\",\n        children: [underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.state.error_msgs, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (error_msg) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n            className: \"fastan\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"section-header\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"h4\", {\n                children: error_msg[0]\n              })\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n              className: \"section-content\",\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"pre\", {\n                className: \"pre-reset\",\n                children: error_msg[1]\n              })\n            })]\n          });\n        }, this)), underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].map(this.state.sequences, underscore__WEBPACK_IMPORTED_MODULE_2__[\"default\"].bind(function (sequence) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(SequenceViewer, {\n            sequence: sequence\n          });\n        }, this))]\n      });\n    }\n  }, {\n    key: \"loadingJSX\",\n    value: function loadingJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n        className: \"modal-body text-center\",\n        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"i\", {\n          className: \"fa fa-spinner fa-3x fa-spin\"\n        })\n      });\n    }\n  }]);\n}((react__WEBPACK_IMPORTED_MODULE_1___default().Component));\n\nvar SequenceViewer = /*#__PURE__*/function (_React$Component2) {\n  function SequenceViewer() {\n    _classCallCheck(this, SequenceViewer);\n    return _callSuper(this, SequenceViewer, arguments);\n  }\n  _inherits(SequenceViewer, _React$Component2);\n  return _createClass(SequenceViewer, [{\n    key: \"render\",\n    value: function render() {\n      this.widgetID = this.widgetClass + \"-\" + new Date().getUTCMilliseconds();\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n        className: \"fastan\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"section-header\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"h4\", {\n            children: [this.props.sequence.id, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"small\", {\n              children: [\"\\xA0 \", this.props.sequence.title]\n            })]\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n          className: \"section-content\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n            className: this.widgetClass,\n            id: this.widgetID\n          })\n        })]\n      });\n    }\n  }, {\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      // attach BioJS sequence viewer\n      var widget = new Sequence({\n        sequence: this.props.sequence.value,\n        target: this.widgetID,\n        format: \"PRIDE\",\n        columns: {\n          size: 40,\n          spacedEach: 0\n        },\n        formatOptions: {\n          title: false,\n          footer: false\n        }\n      });\n      widget.hideFormatSelector();\n    }\n  }], [{\n    key: \"widgetClass\",\n    value:\n    /**\n     * The CSS class name that will be assigned to the widget container. ID\n     * assigned to the widget container is derived from the same.\n     */\n    function widgetClass() {\n      return \"biojs-vis-sequence\";\n    }\n  }]);\n}((react__WEBPACK_IMPORTED_MODULE_1___default().Component));\n\n//# sourceURL=webpack://SequenceServer/./public/js/sequence_modal.js?");
 
 /***/ }),
 
@@ -269,7 +291,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mailto__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mailto */ \"./public/js/mailto.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar ShareURLComponent = function ShareURLComponent(_ref) {\n  var querydb = _ref.querydb,\n    program = _ref.program,\n    queryLength = _ref.queryLength,\n    url = _ref.url;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState2 = _slicedToArray(_useState, 2),\n    copied = _useState2[0],\n    setCopied = _useState2[1];\n  var copyToClipboard = function copyToClipboard() {\n    navigator.clipboard.writeText(url);\n    setCopied(true);\n  };\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"div\", {\n    className: \"share-url-component\",\n    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"input\", {\n      name: \"shareableUrl\",\n      type: \"text\",\n      value: url,\n      readOnly: true\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"div\", {\n      className: \"actions\",\n      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"button\", {\n        className: \"btn btn-primary\",\n        onClick: copyToClipboard,\n        children: copied ? 'Copied!' : 'Copy to Clipboard'\n      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"a\", {\n        href: (0,_mailto__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(querydb, program, queryLength, url, true),\n        children: \"Share via email\"\n      })]\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShareURLComponent);\n\n//# sourceURL=webpack://SequenceServer/./public/js/share_url.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mailto__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mailto */ \"./public/js/mailto.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== \"undefined\" && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nvar ShareURLComponent = function ShareURLComponent(_ref) {\n  var querydb = _ref.querydb,\n    program = _ref.program,\n    queryLength = _ref.queryLength,\n    url = _ref.url;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState2 = _slicedToArray(_useState, 2),\n    copied = _useState2[0],\n    setCopied = _useState2[1];\n  var copyToClipboard = function copyToClipboard() {\n    navigator.clipboard.writeText(url);\n    setCopied(true);\n  };\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"div\", {\n    className: \"share-url-component\",\n    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"input\", {\n      name: \"shareableUrl\",\n      type: \"text\",\n      value: url,\n      readOnly: true\n    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(\"div\", {\n      className: \"actions\",\n      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"button\", {\n        className: \"btn btn-primary\",\n        onClick: copyToClipboard,\n        children: copied ? 'Copied!' : 'Copy to Clipboard'\n      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(\"a\", {\n        href: (0,_mailto__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(querydb, program, queryLength, url, true),\n        children: \"Share via email\"\n      })]\n    })]\n  });\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShareURLComponent);\n\n//# sourceURL=webpack://SequenceServer/./public/js/share_url.js?");
 
 /***/ }),
 
@@ -280,7 +302,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ _default)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _download_fasta__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./download_fasta */ \"./public/js/download_fasta.js\");\n/* harmony import */ var _mailto__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./mailto */ \"./public/js/mailto.js\");\n/* harmony import */ var _cloud_share_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./cloud_share_modal */ \"./public/js/cloud_share_modal.js\");\n/* harmony import */ var download_links__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! download_links */ \"./public/js/null_plugins/download_links.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n/**\n * checks whether code is being run by jest\n */\n// eslint-disable-next-line no-undef\n\n\nvar isTestMode = function isTestMode() {\n  return ({}).JEST_WORKER_ID !== undefined || \"development\" === 'test';\n};\n/**\n * Renders links for downloading hit information in different formats.\n * Renders links for navigating to each query.\n */\nvar _default = /*#__PURE__*/function (_Component) {\n  _inherits(_default, _Component);\n  var _super = _createSuper(_default);\n  function _default(props) {\n    var _this;\n    _classCallCheck(this, _default);\n    _this = _super.call(this, props);\n    _this.downloadFastaOfAll = _this.downloadFastaOfAll.bind(_assertThisInitialized(_this));\n    _this.downloadFastaOfSelected = _this.downloadFastaOfSelected.bind(_assertThisInitialized(_this));\n    _this.topPanelJSX = _this.topPanelJSX.bind(_assertThisInitialized(_this));\n    _this.summaryString = _this.summaryString.bind(_assertThisInitialized(_this));\n    _this.indexJSX = _this.indexJSX.bind(_assertThisInitialized(_this));\n    _this.downloadsPanelJSX = _this.downloadsPanelJSX.bind(_assertThisInitialized(_this));\n    _this.handleQueryIndexChange = _this.handleQueryIndexChange.bind(_assertThisInitialized(_this));\n    _this.isElementInViewPort = _this.isElementInViewPort.bind(_assertThisInitialized(_this));\n    _this.setVisibleQueryIndex = _this.setVisibleQueryIndex.bind(_assertThisInitialized(_this));\n    _this.debounceScrolling = _this.debounceScrolling.bind(_assertThisInitialized(_this));\n    _this.scrollListener = _this.scrollListener.bind(_assertThisInitialized(_this));\n    _this.copyURL = _this.copyURL.bind(_assertThisInitialized(_this));\n    _this.shareCloudInit = _this.shareCloudInit.bind(_assertThisInitialized(_this));\n    _this.sharingPanelJSX = _this.sharingPanelJSX.bind(_assertThisInitialized(_this));\n    _this.timeout = null;\n    _this.queryElems = [];\n    _this.state = {\n      queryIndex: 1\n    };\n    return _this;\n  }\n  _createClass(_default, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      /**\n       * Fixes tooltips in the sidebar, allows tooltip display on click\n       */\n      $(function () {\n        $('.sidebar [data-toggle=\"tooltip\"]').tooltip({\n          placement: 'right'\n        });\n        $('#copyURL').tooltip({\n          title: 'Copied!',\n          trigger: 'click',\n          placement: 'right',\n          delay: 0\n        });\n      });\n\n      //keep track of the current queryIndex so it doesn't get lost on page reload\n      var urlMatch = window.location.href.match(/#Query_(\\d+)/);\n      if (urlMatch && urlMatch.length > 1) {\n        var queryNumber = +urlMatch[1];\n        var index = this.props.data.queries.findIndex(function (query) {\n          return query.number === queryNumber;\n        });\n        this.setState({\n          queryIndex: index + 1\n        });\n      }\n      window.addEventListener('scroll', this.scrollListener);\n      $('a[href^=\"#Query_\"]').on('click', this.animateAnchorElements);\n    }\n  }, {\n    key: \"componentWillUnmount\",\n    value: function componentWillUnmount() {\n      window.removeEventListener('scroll', this.scrollListener);\n    }\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate(prevProps) {\n      if (this.props.allQueriesLoaded && !prevProps.allQueriesLoaded) {\n        /**\n         * storing all query elements in this variable once they all become available so we don't have to fetch them all over again\n         */\n        this.queryElems = Array.from(document.querySelectorAll('.resultn'));\n      }\n    }\n\n    /**\n     * to avoid unnecessary computations, we debounce the scroll listener so it only fires after user has stopped scrolling for some milliseconds\n     */\n  }, {\n    key: \"scrollListener\",\n    value: function scrollListener() {\n      this.debounceScrolling(this.setVisibleQueryIndex, 500);\n    }\n  }, {\n    key: \"debounceScrolling\",\n    value: function debounceScrolling(callback, timer) {\n      if (this.timeout) {\n        clearTimeout(this.timeout);\n      }\n      this.timeout = setTimeout(callback, timer);\n    }\n\n    /**\n     * This method makes the page aware of what query is visible so that clicking previous / next button at any point\n     * navigates to the proper query\n     */\n  }, {\n    key: \"setVisibleQueryIndex\",\n    value: function setVisibleQueryIndex() {\n      var queryElems = this.queryElems.length ? this.queryElems : Array.from(document.querySelectorAll('.resultn'));\n      var hits = Array.from(document.querySelectorAll('.hit[id^=Query_]'));\n      // get the first visible element and marks it as the current query\n      var topmostEl = queryElems.find(this.isElementInViewPort) || hits.find(this.isElementInViewPort);\n      if (topmostEl) {\n        var queryIndex = Number(topmostEl.id.match(/Query_(\\d+)/)[1]);\n        var hash = \"#Query_\".concat(queryIndex);\n        // if we can guarantee that the browser can handle change in url hash without the page jumping,\n        // then we update the url hash after scroll. else, hash is only updated on click of next or prev button\n        if (window.history.pushState) {\n          window.history.pushState(null, null, hash);\n        }\n        this.setState({\n          queryIndex: queryIndex\n        });\n      }\n    }\n  }, {\n    key: \"animateAnchorElements\",\n    value: function animateAnchorElements(e) {\n      // allow normal behavior in test mode to prevent warnings or errors from jquery\n      if (isTestMode()) return;\n      e.preventDefault();\n      $('html, body').animate({\n        scrollTop: $(this.hash).offset().top\n      }, 300);\n      if (window.history.pushState) {\n        window.history.pushState(null, null, this.hash);\n      } else {\n        window.location.hash = this.hash;\n      }\n    }\n  }, {\n    key: \"isElementInViewPort\",\n    value: function isElementInViewPort(elem) {\n      var _elem$getBoundingClie = elem.getBoundingClientRect(),\n        top = _elem$getBoundingClie.top,\n        left = _elem$getBoundingClie.left,\n        right = _elem$getBoundingClie.right,\n        bottom = _elem$getBoundingClie.bottom;\n      return top >= 0 && left >= 0 && bottom <= (window.innerHeight || document.documentElement.clientHeight) && right <= (window.innerWidth || document.documentElement.clientWidth);\n    }\n    /**\n         * Clear sessionStorage - useful to initiate a new search in the same tab.\n         * Passing sessionStorage.clear directly as onclick callback didn't work\n         * (on macOS Chrome).\n        */\n  }, {\n    key: \"clearSession\",\n    value: function clearSession() {\n      sessionStorage.clear();\n    }\n    /**\n     *\n     * handle next and previous query button clicks\n     */\n  }, {\n    key: \"handleQueryIndexChange\",\n    value: function handleQueryIndexChange(nextQuery) {\n      if (nextQuery < 1 || nextQuery > this.props.data.queries.length) return;\n      var anchorEl = document.createElement('a');\n      //indexing at [nextQuery - 1] because array is 0-indexed\n      anchorEl.setAttribute('href', '#Query_' + this.props.data.queries[nextQuery - 1].number);\n      anchorEl.setAttribute('hidden', true);\n      document.body.appendChild(anchorEl);\n      // add smooth scrolling animation with jquery\n      $(anchorEl).on('click', this.animateAnchorElements);\n      anchorEl.click();\n      document.body.removeChild(anchorEl);\n      this.setState({\n        queryIndex: nextQuery\n      });\n    }\n    /**\n     * Event-handler for downloading fasta of all hits.\n     */\n  }, {\n    key: \"downloadFastaOfAll\",\n    value: function downloadFastaOfAll() {\n      var sequence_ids = [];\n      this.props.data.queries.forEach(function (query) {\n        return query.hits.forEach(function (hit) {\n          return sequence_ids.push(hit.id);\n        });\n      });\n      var database_ids = this.props.data.querydb.map(function (querydb) {\n        return querydb.id;\n      });\n      (0,_download_fasta__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(sequence_ids, database_ids);\n      return false;\n    }\n\n    /**\n     * Handles downloading fasta of selected hits.\n     */\n  }, {\n    key: \"downloadFastaOfSelected\",\n    value: function downloadFastaOfSelected() {\n      var sequence_ids = $('.hit-links :checkbox:checked').map(function () {\n        return this.value;\n      }).get();\n      if (sequence_ids.length === 0) {\n        return false;\n      }\n      var database_ids = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.data.querydb, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].iteratee('id'));\n      (0,_download_fasta__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(sequence_ids, database_ids);\n      return false;\n    }\n\n    /**\n     * Handles copying the URL into the user's clipboard. Modified from: https://stackoverflow.com/a/49618964/18117380\n     * Hides the 'Copied!' tooltip after 3 seconds\n     */\n  }, {\n    key: \"copyURL\",\n    value: function copyURL() {\n      var element = document.createElement('input');\n      var url = window.location.href;\n      document.body.appendChild(element);\n      element.value = url;\n      element.select();\n      document.execCommand('copy');\n      document.body.removeChild(element);\n      setTimeout(function () {\n        $('#copyURL')._tooltip('destroy');\n      }, 3000);\n    }\n  }, {\n    key: \"shareCloudInit\",\n    value: function shareCloudInit() {\n      this.refs.cloudShareModal.show();\n    }\n  }, {\n    key: \"topPanelJSX\",\n    value: function topPanelJSX() {\n      var path = location.pathname.split('/');\n      // Get job id.\n      var job_id = path.pop();\n      // Deriving rootURL this way is required for subURI deployments\n      // - we cannot just send to '/'.\n      var rootURL = path.join('/');\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"sidebar-top-panel\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"section-header-sidebar\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n            children: this.summaryString()\n          })\n        }), this.props.data.queries.length > 12 && this.queryIndexButtons(), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n            href: \"\".concat(rootURL, \"/?job_id=\").concat(job_id),\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n              className: \"fa fa-pencil\"\n            }), \" Edit search\"]\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n            href: \"\".concat(rootURL, \"/\"),\n            onClick: this.clearSession,\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n              className: \"fa fa-file-o\"\n            }), \" New search\"]\n          })]\n        }), this.props.shouldShowIndex && this.indexJSX()]\n      });\n    }\n  }, {\n    key: \"summaryString\",\n    value: function summaryString() {\n      var program = this.props.data.program;\n      var numqueries = this.props.data.queries.length;\n      var numquerydb = this.props.data.querydb.length;\n      return program.toUpperCase() + ': ' + numqueries + ' ' + (numqueries > 1 ? 'queries' : 'query') + ', ' + numquerydb + ' ' + (numquerydb > 1 ? 'databases' : 'database');\n    }\n  }, {\n    key: \"queryIndexButtons\",\n    value: function queryIndexButtons() {\n      var _this2 = this;\n      var buttonStyle = {\n        outline: 'none',\n        border: 'none',\n        background: 'none'\n      };\n      var buttonClasses = 'btn-link nowrap-ellipsis hover-bold';\n      var handlePreviousBtnClick = function handlePreviousBtnClick() {\n        return _this2.handleQueryIndexChange(_this2.state.queryIndex - 1);\n      };\n      var handleNextBtnClick = function handleNextBtnClick() {\n        return _this2.handleQueryIndexChange(_this2.state.queryIndex + 1);\n      };\n\n      // eslint-disable-next-line no-unused-vars\n      var NavButton = function NavButton(_ref) {\n        var text = _ref.text,\n          onClick = _ref.onClick;\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n          className: buttonClasses,\n          onClick: onClick,\n          style: buttonStyle,\n          children: text\n        });\n      };\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        style: {\n          display: 'flex',\n          width: '100%',\n          margin: '7px 0'\n        },\n        children: [this.state.queryIndex > 1 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(NavButton, {\n          text: \"Previous Query\",\n          onClick: handlePreviousBtnClick\n        }), this.state.queryIndex > 1 && this.state.queryIndex < this.props.data.queries.length && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n          className: \"line\",\n          children: \"|\"\n        }), this.state.queryIndex < this.props.data.queries.length && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(NavButton, {\n          onClick: handleNextBtnClick,\n          text: \"Next Query\"\n        })]\n      });\n    }\n  }, {\n    key: \"indexJSX\",\n    value: function indexJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"ul\", {\n        className: \"nav hover-reset active-bold\",\n        children: [\" \", underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.data.queries, function (query) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link nowrap-ellipsis hover-bold\",\n              title: 'Query= ' + query.id + ' ' + query.title,\n              href: '#Query_' + query.number,\n              children: 'Query= ' + query.id\n            })\n          }, 'Side_bar_' + query.id);\n        })]\n      });\n    }\n  }, {\n    key: \"downloadsPanelJSX\",\n    value: function downloadsPanelJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"downloads\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"section-header-sidebar\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n            children: \"Download FASTA, XML, TSV\"\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"ul\", {\n          className: \"nav\",\n          children: [!(this.props.data.imported_xml || this.props.data.non_parse_seqids) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-fasta-of-all \".concat(!this.props.atLeastOneHit && 'disabled'),\n              onClick: this.downloadFastaOfAll,\n              children: \"FASTA of all hits\"\n            })\n          }), !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-fasta-of-selected disabled\",\n              onClick: this.downloadFastaOfSelected,\n              children: [\"FASTA of \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n                className: \"text-bold\"\n              }), \" selected hit(s)\"]\n            })\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-alignment-of-all \".concat(!this.props.atLeastOneHit && 'disabled'),\n              children: \"Alignment of all hits\"\n            })\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-alignment-of-selected disabled\",\n              children: [\"Alignment of \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n                className: \"text-bold\"\n              }), \" selected hit(s)\"]\n            })\n          }), !this.props.data.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link download\",\n              \"data-toggle\": \"tooltip\",\n              title: \"15 columns: query and subject ID; scientific name, alignment length, mismatches, gaps, identity, start and end coordinates, e value, bitscore, query coverage per subject and per HSP.\",\n              href: 'download/' + this.props.data.search_id + '.std_tsv',\n              children: \"Standard tabular report\"\n            })\n          }), !this.props.data.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link download\",\n              \"data-toggle\": \"tooltip\",\n              title: \"44 columns: query and subject ID, GI, accessions, and length; alignment details; taxonomy details of subject sequence(s) and query coverage per subject and per HSP.\",\n              href: 'download/' + this.props.data.search_id + '.full_tsv',\n              children: \"Full tabular report\"\n            })\n          }), !this.props.data.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link download\",\n              \"data-toggle\": \"tooltip\",\n              title: \"Results in XML format.\",\n              href: 'download/' + this.props.data.search_id + '.xml',\n              children: \"Full XML report\"\n            })\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(download_links__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n            imported_xml: this.props.data.imported_xml,\n            search_id: this.props.data.search_id\n          })]\n        })]\n      });\n    }\n  }, {\n    key: \"sharingPanelJSX\",\n    value: function sharingPanelJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"sharing-panel\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"section-header-sidebar\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n            children: \"Share results\"\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"ul\", {\n          className: \"nav\",\n          children: [!this.props.cloudSharingEnabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              id: \"copyURL\",\n              className: \"btn-link copy-URL cursor-pointer\",\n              \"data-toggle\": \"tooltip\",\n              onClick: this.copyURL,\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n                className: \"fa fa-copy\"\n              }), \" Copy URL to clipboard\"]\n            })\n          }), !this.props.cloudSharingEnabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              id: \"sendEmail\",\n              className: \"btn-link email-URL cursor-pointer\",\n              \"data-toggle\": \"tooltip\",\n              title: \"Send by email\",\n              href: (0,_mailto__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(this.props.data.querydb, this.props.data.program, this.props.data.queries.length, window.location.href),\n              target: \"_blank\",\n              rel: \"noopener noreferrer\",\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n                className: \"fa fa-envelope\"\n              }), \" Send by email\"]\n            })\n          }), this.props.cloudSharingEnabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"button\", {\n              className: \"btn-link cloud-Post cursor-pointer\",\n              \"data-toggle\": \"tooltip\",\n              title: \"Upload results to SequenceServer Cloud where it will become accessable to everyone who has a link.\",\n              onClick: this.shareCloudInit,\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n                className: \"fa fa-cloud\"\n              }), \" Share to cloud\"]\n            })\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_cloud_share_modal__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          ref: \"cloudShareModal\",\n          querydb: this.props.data.querydb,\n          program: this.props.data.program,\n          queryLength: this.props.data.queries.length\n        })]\n      });\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"sidebar\",\n        children: [this.topPanelJSX(), this.downloadsPanelJSX(), this.sharingPanelJSX(), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"referral-panel\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n            className: \"section-header-sidebar\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n              children: \"Recommend SequenceServer\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n                href: \"https://sequenceserver.com/referral-program\",\n                target: \"_blank\",\n                children: \"Earn up to $100 per signup\"\n              })\n            })]\n          })\n        })]\n      });\n    }\n  }]);\n  return _default;\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/sidebar.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ _default)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ \"./node_modules/underscore/modules/index-all.js\");\n/* harmony import */ var _download_fasta__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./download_fasta */ \"./public/js/download_fasta.js\");\n/* harmony import */ var _mailto__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./mailto */ \"./public/js/mailto.js\");\n/* harmony import */ var _cloud_share_modal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./cloud_share_modal */ \"./public/js/cloud_share_modal.js\");\n/* harmony import */ var download_links__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! download_links */ \"./public/js/null_plugins/download_links.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* provided dependency */ var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _callSuper(_this, derived, args) {\n  function isNativeReflectConstruct() {\n    if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n    if (Reflect.construct.sham) return false;\n    if (typeof Proxy === \"function\") return true;\n    try {\n      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n    } catch (e) {\n      return false;\n    }\n  }\n  derived = _getPrototypeOf(derived);\n  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));\n}\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n\n\n/**\n * checks whether code is being run by jest\n */\n// eslint-disable-next-line no-undef\n\nvar isTestMode = function isTestMode() {\n  return ({}).JEST_WORKER_ID !== undefined || \"development\" === 'test';\n};\n/**\n * Renders links for downloading hit information in different formats.\n * Renders links for navigating to each query.\n */\nvar _default = /*#__PURE__*/function (_Component) {\n  function _default(props) {\n    var _this2;\n    _classCallCheck(this, _default);\n    _this2 = _callSuper(this, _default, [props]);\n    _this2.downloadFastaOfAll = _this2.downloadFastaOfAll.bind(_this2);\n    _this2.downloadFastaOfSelected = _this2.downloadFastaOfSelected.bind(_this2);\n    _this2.topPanelJSX = _this2.topPanelJSX.bind(_this2);\n    _this2.summaryString = _this2.summaryString.bind(_this2);\n    _this2.indexJSX = _this2.indexJSX.bind(_this2);\n    _this2.downloadsPanelJSX = _this2.downloadsPanelJSX.bind(_this2);\n    _this2.handleQueryIndexChange = _this2.handleQueryIndexChange.bind(_this2);\n    _this2.isElementInViewPort = _this2.isElementInViewPort.bind(_this2);\n    _this2.setVisibleQueryIndex = _this2.setVisibleQueryIndex.bind(_this2);\n    _this2.debounceScrolling = _this2.debounceScrolling.bind(_this2);\n    _this2.scrollListener = _this2.scrollListener.bind(_this2);\n    _this2.copyURL = _this2.copyURL.bind(_this2);\n    _this2.shareCloudInit = _this2.shareCloudInit.bind(_this2);\n    _this2.sharingPanelJSX = _this2.sharingPanelJSX.bind(_this2);\n    _this2.timeout = null;\n    _this2.queryElems = [];\n    _this2.state = {\n      queryIndex: 1\n    };\n    return _this2;\n  }\n  _inherits(_default, _Component);\n  return _createClass(_default, [{\n    key: \"componentDidMount\",\n    value: function componentDidMount() {\n      /**\n       * Fixes tooltips in the sidebar, allows tooltip display on click\n       */\n      $(function () {\n        $('.sidebar [data-toggle=\"tooltip\"]').tooltip({\n          placement: 'right'\n        });\n        $('#copyURL').tooltip({\n          title: 'Copied!',\n          trigger: 'click',\n          placement: 'right',\n          delay: 0\n        });\n      });\n\n      //keep track of the current queryIndex so it doesn't get lost on page reload\n      var urlMatch = window.location.href.match(/#Query_(\\d+)/);\n      if (urlMatch && urlMatch.length > 1) {\n        var queryNumber = +urlMatch[1];\n        var index = this.props.data.queries.findIndex(function (query) {\n          return query.number === queryNumber;\n        });\n        this.setState({\n          queryIndex: index + 1\n        });\n      }\n      window.addEventListener('scroll', this.scrollListener);\n      $('a[href^=\"#Query_\"]').on('click', this.animateAnchorElements);\n    }\n  }, {\n    key: \"componentWillUnmount\",\n    value: function componentWillUnmount() {\n      window.removeEventListener('scroll', this.scrollListener);\n    }\n  }, {\n    key: \"componentDidUpdate\",\n    value: function componentDidUpdate(prevProps) {\n      if (this.props.allQueriesLoaded && !prevProps.allQueriesLoaded) {\n        /**\n         * storing all query elements in this variable once they all become available so we don't have to fetch them all over again\n         */\n        this.queryElems = Array.from(document.querySelectorAll('.resultn'));\n      }\n    }\n\n    /**\n     * to avoid unnecessary computations, we debounce the scroll listener so it only fires after user has stopped scrolling for some milliseconds\n     */\n  }, {\n    key: \"scrollListener\",\n    value: function scrollListener() {\n      this.debounceScrolling(this.setVisibleQueryIndex, 500);\n    }\n  }, {\n    key: \"debounceScrolling\",\n    value: function debounceScrolling(callback, timer) {\n      if (this.timeout) {\n        clearTimeout(this.timeout);\n      }\n      this.timeout = setTimeout(callback, timer);\n    }\n\n    /**\n     * This method makes the page aware of what query is visible so that clicking previous / next button at any point\n     * navigates to the proper query\n     */\n  }, {\n    key: \"setVisibleQueryIndex\",\n    value: function setVisibleQueryIndex() {\n      var queryElems = this.queryElems.length ? this.queryElems : Array.from(document.querySelectorAll('.resultn'));\n      var hits = Array.from(document.querySelectorAll('.hit[id^=Query_]'));\n      // get the first visible element and marks it as the current query\n      var topmostEl = queryElems.find(this.isElementInViewPort) || hits.find(this.isElementInViewPort);\n      if (topmostEl) {\n        var queryIndex = Number(topmostEl.id.match(/Query_(\\d+)/)[1]);\n        var hash = \"#Query_\".concat(queryIndex);\n        // if we can guarantee that the browser can handle change in url hash without the page jumping,\n        // then we update the url hash after scroll. else, hash is only updated on click of next or prev button\n        if (window.history.pushState) {\n          window.history.pushState(null, null, hash);\n        }\n        this.setState({\n          queryIndex: queryIndex\n        });\n      }\n    }\n  }, {\n    key: \"animateAnchorElements\",\n    value: function animateAnchorElements(e) {\n      // allow normal behavior in test mode to prevent warnings or errors from jquery\n      if (isTestMode()) return;\n      e.preventDefault();\n      $('html, body').animate({\n        scrollTop: $(this.hash).offset().top\n      }, 300);\n      if (window.history.pushState) {\n        window.history.pushState(null, null, this.hash);\n      } else {\n        window.location.hash = this.hash;\n      }\n    }\n  }, {\n    key: \"isElementInViewPort\",\n    value: function isElementInViewPort(elem) {\n      var _elem$getBoundingClie = elem.getBoundingClientRect(),\n        top = _elem$getBoundingClie.top,\n        left = _elem$getBoundingClie.left,\n        right = _elem$getBoundingClie.right,\n        bottom = _elem$getBoundingClie.bottom;\n      return top >= 0 && left >= 0 && bottom <= (window.innerHeight || document.documentElement.clientHeight) && right <= (window.innerWidth || document.documentElement.clientWidth);\n    }\n    /**\n         * Clear sessionStorage - useful to initiate a new search in the same tab.\n         * Passing sessionStorage.clear directly as onclick callback didn't work\n         * (on macOS Chrome).\n        */\n  }, {\n    key: \"clearSession\",\n    value: function clearSession() {\n      sessionStorage.clear();\n    }\n    /**\n     *\n     * handle next and previous query button clicks\n     */\n  }, {\n    key: \"handleQueryIndexChange\",\n    value: function handleQueryIndexChange(nextQuery) {\n      if (nextQuery < 1 || nextQuery > this.props.data.queries.length) return;\n      var anchorEl = document.createElement('a');\n      //indexing at [nextQuery - 1] because array is 0-indexed\n      anchorEl.setAttribute('href', '#Query_' + this.props.data.queries[nextQuery - 1].number);\n      anchorEl.setAttribute('hidden', true);\n      document.body.appendChild(anchorEl);\n      // add smooth scrolling animation with jquery\n      $(anchorEl).on('click', this.animateAnchorElements);\n      anchorEl.click();\n      document.body.removeChild(anchorEl);\n      this.setState({\n        queryIndex: nextQuery\n      });\n    }\n    /**\n     * Event-handler for downloading fasta of all hits.\n     */\n  }, {\n    key: \"downloadFastaOfAll\",\n    value: function downloadFastaOfAll() {\n      var sequence_ids = [];\n      this.props.data.queries.forEach(function (query) {\n        return query.hits.forEach(function (hit) {\n          return sequence_ids.push(hit.id);\n        });\n      });\n      var database_ids = this.props.data.querydb.map(function (querydb) {\n        return querydb.id;\n      });\n      (0,_download_fasta__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(sequence_ids, database_ids);\n      return false;\n    }\n\n    /**\n     * Handles downloading fasta of selected hits.\n     */\n  }, {\n    key: \"downloadFastaOfSelected\",\n    value: function downloadFastaOfSelected() {\n      var sequence_ids = $('.hit-links :checkbox:checked').map(function () {\n        return this.value;\n      }).get();\n      if (sequence_ids.length === 0) {\n        return false;\n      }\n      var database_ids = underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.data.querydb, underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].iteratee('id'));\n      (0,_download_fasta__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(sequence_ids, database_ids);\n      return false;\n    }\n\n    /**\n     * Handles copying the URL into the user's clipboard. Modified from: https://stackoverflow.com/a/49618964/18117380\n     * Hides the 'Copied!' tooltip after 3 seconds\n     */\n  }, {\n    key: \"copyURL\",\n    value: function copyURL() {\n      var element = document.createElement('input');\n      var url = window.location.href;\n      document.body.appendChild(element);\n      element.value = url;\n      element.select();\n      document.execCommand('copy');\n      document.body.removeChild(element);\n      setTimeout(function () {\n        $('#copyURL')._tooltip('hide');\n      }, 3000);\n    }\n  }, {\n    key: \"shareCloudInit\",\n    value: function shareCloudInit() {\n      this.refs.cloudShareModal.show();\n    }\n  }, {\n    key: \"topPanelJSX\",\n    value: function topPanelJSX() {\n      var path = location.pathname.split('/');\n      // Get job id.\n      var job_id = path.pop();\n      // Deriving rootURL this way is required for subURI deployments\n      // - we cannot just send to '/'.\n      var rootURL = path.join('/');\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"sidebar-top-panel\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"section-header-sidebar\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n            children: this.summaryString()\n          })\n        }), this.props.data.queries.length > 12 && this.queryIndexButtons(), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n            href: \"\".concat(rootURL, \"/?job_id=\").concat(job_id),\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n              className: \"fa fa-pencil\"\n            }), \" Edit search\"]\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n            className: \"line\",\n            children: \"|\"\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n            href: \"\".concat(rootURL, \"/\"),\n            onClick: this.clearSession,\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n              className: \"fa fa-file-o\"\n            }), \" New search\"]\n          })]\n        }), this.props.shouldShowIndex && this.indexJSX()]\n      });\n    }\n  }, {\n    key: \"summaryString\",\n    value: function summaryString() {\n      var program = this.props.data.program;\n      var numqueries = this.props.data.queries.length;\n      var numquerydb = this.props.data.querydb.length;\n      return program.toUpperCase() + ': ' + numqueries + ' ' + (numqueries > 1 ? 'queries' : 'query') + ', ' + numquerydb + ' ' + (numquerydb > 1 ? 'databases' : 'database');\n    }\n  }, {\n    key: \"queryIndexButtons\",\n    value: function queryIndexButtons() {\n      var _this3 = this;\n      var buttonStyle = {\n        outline: 'none',\n        border: 'none',\n        background: 'none'\n      };\n      var buttonClasses = 'btn-link nowrap-ellipsis hover-bold';\n      var handlePreviousBtnClick = function handlePreviousBtnClick() {\n        return _this3.handleQueryIndexChange(_this3.state.queryIndex - 1);\n      };\n      var handleNextBtnClick = function handleNextBtnClick() {\n        return _this3.handleQueryIndexChange(_this3.state.queryIndex + 1);\n      };\n\n      // eslint-disable-next-line no-unused-vars\n      var NavButton = function NavButton(_ref) {\n        var text = _ref.text,\n          onClick = _ref.onClick;\n        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"button\", {\n          className: buttonClasses,\n          onClick: onClick,\n          style: buttonStyle,\n          children: text\n        });\n      };\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        style: {\n          display: 'flex',\n          width: '100%',\n          margin: '7px 0'\n        },\n        children: [this.state.queryIndex > 1 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(NavButton, {\n          text: \"Previous Query\",\n          onClick: handlePreviousBtnClick\n        }), this.state.queryIndex > 1 && this.state.queryIndex < this.props.data.queries.length && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n          className: \"line\",\n          children: \"|\"\n        }), this.state.queryIndex < this.props.data.queries.length && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(NavButton, {\n          onClick: handleNextBtnClick,\n          text: \"Next Query\"\n        })]\n      });\n    }\n  }, {\n    key: \"indexJSX\",\n    value: function indexJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"ul\", {\n        className: \"nav hover-reset active-bold\",\n        children: [\" \", underscore__WEBPACK_IMPORTED_MODULE_1__[\"default\"].map(this.props.data.queries, function (query) {\n          return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link nowrap-ellipsis hover-bold\",\n              title: 'Query= ' + query.id + ' ' + query.title,\n              href: '#Query_' + query.number,\n              children: 'Query= ' + query.id\n            })\n          }, 'Side_bar_' + query.id);\n        })]\n      });\n    }\n  }, {\n    key: \"downloadsPanelJSX\",\n    value: function downloadsPanelJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"downloads\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"section-header-sidebar\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n            children: \"Download FASTA, XML, TSV\"\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"ul\", {\n          className: \"nav\",\n          children: [!(this.props.data.imported_xml || this.props.data.non_parse_seqids) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-fasta-of-all \".concat(!this.props.atLeastOneHit && 'disabled'),\n              onClick: this.downloadFastaOfAll,\n              children: \"FASTA of all hits\"\n            })\n          }), !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-fasta-of-selected disabled\",\n              onClick: this.downloadFastaOfSelected,\n              children: [\"FASTA of \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n                className: \"text-bold\"\n              }), \" selected hit(s)\"]\n            })\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-alignment-of-all \".concat(!this.props.atLeastOneHit && 'disabled'),\n              children: \"Alignment of all hits\"\n            })\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              href: \"#\",\n              className: \"btn-link download-alignment-of-selected disabled\",\n              children: [\"Alignment of \", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"span\", {\n                className: \"text-bold\"\n              }), \" selected hit(s)\"]\n            })\n          }), !this.props.data.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link download\",\n              \"data-toggle\": \"tooltip\",\n              title: \"15 columns: query and subject ID; scientific name, alignment length, mismatches, gaps, identity, start and end coordinates, e value, bitscore, query coverage per subject and per HSP.\",\n              href: 'download/' + this.props.data.search_id + '.std_tsv',\n              children: \"Standard tabular report\"\n            })\n          }), !this.props.data.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link download\",\n              \"data-toggle\": \"tooltip\",\n              title: \"44 columns: query and subject ID, GI, accessions, and length; alignment details; taxonomy details of subject sequence(s) and query coverage per subject and per HSP.\",\n              href: 'download/' + this.props.data.search_id + '.full_tsv',\n              children: \"Full tabular report\"\n            })\n          }), !this.props.data.imported_xml && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n              className: \"btn-link download\",\n              \"data-toggle\": \"tooltip\",\n              title: \"Results in XML format.\",\n              href: 'download/' + this.props.data.search_id + '.xml',\n              children: \"Full XML report\"\n            })\n          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(download_links__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n            imported_xml: this.props.data.imported_xml,\n            search_id: this.props.data.search_id\n          })]\n        })]\n      });\n    }\n  }, {\n    key: \"sharingPanelJSX\",\n    value: function sharingPanelJSX() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"sharing-panel\",\n        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"section-header-sidebar\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n            children: \"Share results\"\n          })\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"ul\", {\n          className: \"nav\",\n          children: [!this.props.cloudSharingEnabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              id: \"copyURL\",\n              className: \"btn-link copy-URL cursor-pointer\",\n              \"data-toggle\": \"tooltip\",\n              onClick: this.copyURL,\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n                className: \"fa fa-copy\"\n              }), \" Copy URL to clipboard\"]\n            })\n          }), !this.props.cloudSharingEnabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"a\", {\n              id: \"sendEmail\",\n              className: \"btn-link email-URL cursor-pointer\",\n              \"data-toggle\": \"tooltip\",\n              title: \"Send by email\",\n              href: (0,_mailto__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(this.props.data.querydb, this.props.data.program, this.props.data.queries.length, window.location.href),\n              target: \"_blank\",\n              rel: \"noopener noreferrer\",\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n                className: \"fa fa-envelope\"\n              }), \" Send by email\"]\n            })\n          }), this.props.cloudSharingEnabled && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"li\", {\n            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"button\", {\n              className: \"btn-link cloud-Post cursor-pointer\",\n              \"data-toggle\": \"tooltip\",\n              title: \"Upload results to SequenceServer Cloud where it will become accessable to everyone who has a link.\",\n              onClick: this.shareCloudInit,\n              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"i\", {\n                className: \"fa fa-cloud\"\n              }), \" Share to cloud\"]\n            })\n          })]\n        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_cloud_share_modal__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n          ref: \"cloudShareModal\",\n          querydb: this.props.data.querydb,\n          program: this.props.data.program,\n          queryLength: this.props.data.queries.length\n        })]\n      });\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n        className: \"sidebar\",\n        children: [this.topPanelJSX(), this.downloadsPanelJSX(), this.sharingPanelJSX(), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"div\", {\n          className: \"referral-panel\",\n          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(\"div\", {\n            className: \"section-header-sidebar\",\n            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"h4\", {\n              children: \"Recommend SequenceServer\"\n            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"p\", {\n              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"a\", {\n                href: \"https://sequenceserver.com/referral-program\",\n                target: \"_blank\",\n                children: \"Earn up to $100 per signup\"\n              })\n            })]\n          })\n        })]\n      });\n    }\n  }]);\n}(react__WEBPACK_IMPORTED_MODULE_0__.Component);\n\n\n//# sourceURL=webpack://SequenceServer/./public/js/sidebar.js?");
 
 /***/ }),
 
@@ -302,7 +324,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _exp
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\nvar Utils = {\n  /***********************************\n   * Formatters for hits & hsp table *\n   ***********************************/\n\n  // Formats an array of two elements as \"first (last)\".\n  format_2_tuple: function format_2_tuple(tuple) {\n    return tuple[0] + ' (' + tuple[tuple.length - 1] + ')';\n  },\n  /**\n   * Returns fraction as percentage\n   */\n  inPercentage: function inPercentage(num, den) {\n    var x = (num * 100.0 / den).toFixed(1);\n    if (x % 1 == 0) {\n      x = parseInt(x, 10);\n      return \"\".concat(x, \"%\");\n    } else {\n      return \"\".concat(x, \"%\");\n    }\n  },\n  /**\n   * Returns fractional representation as String.\n   */\n  inFraction: function inFraction(num, den) {\n    return num + '/' + den;\n  },\n  /**\n   * Returns given Float as String formatted to two decimal places.\n   */\n  inTwoDecimal: function inTwoDecimal(num) {\n    return num.toFixed(2);\n  },\n  /**\n   * Returns zero if num is zero. Returns two decimal representation of num\n   * if num is between [1..10). Returns num in scientific notation otherwise.\n   */\n  inExponential: function inExponential(num) {\n    // Nothing to do if num is 0.\n    if (num === 0) {\n      return 0;\n    }\n\n    // Round to two decimal places if in the rane [1..10).\n    if (num >= 1 && num < 10) {\n      return this.inTwoDecimal(num);\n    }\n\n    // Return numbers in the range [0..1) and [10..Inf] in\n    // scientific format.\n    var exp = num.toExponential(2);\n    var parts = exp.split('e');\n    var base = parts[0];\n    var power = parts[1];\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(\"span\", {\n      children: [base, \"\\xD710\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"sup\", {\n        children: power\n      })]\n    });\n  }\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Utils);\n\n//# sourceURL=webpack://SequenceServer/./public/js/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nvar Utils = {\n  /***********************************\n   * Formatters for hits & hsp table *\n   ***********************************/\n\n  // Formats an array of two elements as \"first (last)\".\n  format_2_tuple: function format_2_tuple(tuple) {\n    return tuple[0] + ' (' + tuple[tuple.length - 1] + ')';\n  },\n  /**\n   * Returns fraction as percentage\n   */\n  inPercentage: function inPercentage(num, den) {\n    var x = (num * 100.0 / den).toFixed(1);\n    if (x % 1 == 0) {\n      x = parseInt(x, 10);\n      return \"\".concat(x, \"%\");\n    } else {\n      return \"\".concat(x, \"%\");\n    }\n  },\n  /**\n   * Returns fractional representation as String.\n   */\n  inFraction: function inFraction(num, den) {\n    return num + '/' + den;\n  },\n  /**\n   * Returns given Float as String formatted to two decimal places.\n   */\n  inTwoDecimal: function inTwoDecimal(num) {\n    return num.toFixed(2);\n  },\n  /**\n   * Returns zero if num is zero. Returns two decimal representation of num\n   * if num is between [1..10). Returns num in scientific notation otherwise.\n   */\n  inExponential: function inExponential(num) {\n    // Nothing to do if num is 0.\n    if (num === 0) {\n      return 0;\n    }\n\n    // Round to two decimal places if in the rane [1..10).\n    if (num >= 1 && num < 10) {\n      return this.inTwoDecimal(num);\n    }\n\n    // Return numbers in the range [0..1) and [10..Inf] in\n    // scientific format.\n    var exp = num.toExponential(2);\n    var parts = exp.split('e');\n    var base = parts[0];\n    var power = parts[1];\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(\"span\", {\n      children: [base, \"\\xD710\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"sup\", {\n        children: power\n      })]\n    });\n  }\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Utils);\n\n//# sourceURL=webpack://SequenceServer/./public/js/utils.js?");
 
 /***/ }),
 
@@ -323,7 +345,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*******************************************/
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-eval("/* module decorator */ module = __webpack_require__.nmd(module);\nvar _circosJS$Stack$proto;\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nvar _circosJS,\n  indexOf = [].indexOf || function (item) {\n    for (var i = 0, l = this.length; i < l; i++) {\n      if (i in this && this[i] === item) return i;\n    }\n    return -1;\n  };\nif (typeof Object.assign !== 'function') {\n  Object.assign = function (target) {\n    'use strict';\n\n    var index, key, source;\n    if (target === null) {\n      throw new TypeError('Cannot convert undefined or null to object');\n    }\n    target = Object(target);\n    index = 1;\n    while (index < arguments.length) {\n      source = arguments[index];\n      if (source !== null) {\n        for (key in source) {\n          if (Object.prototype.hasOwnProperty.call(source, key)) {\n            target[key] = source[key];\n          }\n        }\n      }\n      index++;\n    }\n    return target;\n  };\n}\n_circosJS = function circosJS(conf) {\n  var instance;\n  instance = new _circosJS.Core(conf);\n  return instance;\n};\n_circosJS.Core = function (conf) {\n  this.tracks = {\n    heatmaps: {},\n    histograms: {},\n    chords: {},\n    scatters: {},\n    lines: {},\n    stacks: {},\n    highlights: {},\n    texts: {}\n  };\n  this.conf = _circosJS.mixConf(conf, this.defaultConf);\n  return this;\n};\n_circosJS.Core.prototype.removeTracks = function (trackIds) {\n  var id, l, len, ref, store, svg, trackId, type;\n  svg = d3.select(this.conf.container);\n  ref = this.tracks;\n  for (type in ref) {\n    store = ref[type];\n    if (_typeof(trackIds) === 'object') {\n      for (l = 0, len = trackIds.length; l < len; l++) {\n        id = trackIds[l];\n        if (id in store) {\n          svg.select('.' + id).remove();\n          delete store[id];\n        }\n      }\n    } else if (typeof trackIds === 'string') {\n      if (trackIds in store) {\n        svg.select('.' + trackIds).remove();\n        delete store[trackIds];\n      }\n    } else if (typeof trackIds === 'undefined') {\n      for (trackId in store) {\n        svg.select('.' + trackId).remove();\n        delete store[trackId];\n      }\n    }\n  }\n  return this;\n};\n_circosJS.Core.prototype.layout = function (conf, data) {\n  this._layout = new _circosJS.Layout(conf, data);\n  return this;\n};\n_circosJS.log = function (level, code, message, data) {\n  var levels;\n  levels = ['Permanent log', 'Error', 'Warning', 'Info'];\n  console.log('CircosJS: ', levels[level] + ' [' + code + '] ', message, data);\n};\n_circosJS.mixConf = function (conf, defaultConf) {\n  var key, newConf, value;\n  newConf = {};\n  for (key in defaultConf) {\n    value = defaultConf[key];\n    if (key in conf) {\n      if (Object.prototype.toString.call(value) === '[object Array]') {\n        newConf[key] = conf[key];\n      } else if (_typeof(value) === 'object' && value != null) {\n        if (value != null && Object.keys(value).length === 0) {\n          newConf[key] = conf[key];\n        } else {\n          newConf[key] = _circosJS.mixConf(conf[key], value);\n        }\n      } else {\n        newConf[key] = conf[key];\n      }\n    } else {\n      newConf[key] = value;\n    }\n  }\n  return newConf;\n};\n_circosJS.Core.prototype.smartBorders = function () {\n  var border, borders, currentBorder, l, layout, len, ref, store, track, trackId, trackType, width;\n  width = this.conf.defaultTrackWidth;\n  layout = {\n    'in': this._layout.conf.innerRadius,\n    out: this._layout.conf.outerRadius\n  };\n  borders = [];\n  ref = this.tracks;\n  for (trackType in ref) {\n    store = ref[trackType];\n    for (trackId in store) {\n      track = store[trackId];\n      if (track.conf.innerRadius) {\n        borders.push({\n          'in': track.conf.innerRadius,\n          out: track.conf.outerRadius\n        });\n      }\n    }\n  }\n  borders = borders.sort(function (a, b) {\n    if (a.out > b.out) {\n      1;\n    }\n    if (a.out < b.out) {\n      -1;\n    }\n    return 0;\n  });\n  currentBorder = layout;\n  for (l = 0, len = borders.length; l < len; l++) {\n    border = borders[l];\n    if (border.out < currentBorder['in'] - width) {\n      return {\n        'in': currentBorder['in'] - width,\n        out: currentBorder['in']\n      };\n    }\n    currentBorder = border;\n  }\n  if (currentBorder['in'] > width) {\n    return {\n      'in': currentBorder['in'] - width,\n      out: currentBorder['in']\n    };\n  } else {\n    return {\n      'in': borders[0].out,\n      out: borders[0].out + width\n    };\n  }\n};\nif ( true && module !== null) {\n  module.exports = _circosJS;\n}\n_circosJS.checkParent = function (key, index, layoutSummary, header) {\n  if (!(key in layoutSummary)) {\n    _circosJS.log(1, 'datum', 'unknown parent id', {\n      line: index + 1,\n      value: key,\n      header: header,\n      layoutSummary: layoutSummary\n    });\n    return false;\n  }\n  return true;\n};\n_circosJS.checkNumber = function (keys, index) {\n  var header, value;\n  for (header in keys) {\n    value = keys[header];\n    if (isNaN(value)) {\n      _circosJS.log(1, 'datum', 'not a number', {\n        line: index + 1,\n        value: value,\n        header: header\n      });\n      return false;\n    }\n  }\n  return true;\n};\n_circosJS.parseSpanValueData = function (data, layoutSummary) {\n  var groups, sample;\n  if (!(data.length > 0)) {\n    return {\n      data: [],\n      meta: {\n        min: null,\n        max: null\n      }\n    };\n  }\n  sample = data[0];\n  if ('parent_id' in sample && 'start' in sample && 'end' in sample && 'value' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.start, datum.end, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      start: datum[1],\n      end: datum[2],\n      value: datum[3]\n    }, index);\n  }).map(function (datum) {\n    if (datum[1] < 0 || datum[2] > layoutSummary[datum[0]]) {\n      _circosJS.log(2, 'position', 'position inconsistency', {\n        datum: datum,\n        layoutSummary: layoutSummary\n      });\n    }\n    return {\n      block_id: datum[0],\n      start: Math.max(0, parseFloat(datum[1])),\n      end: Math.min(layoutSummary[datum[0]], parseFloat(datum[2])),\n      value: parseFloat(datum[3]) || 1\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parseSpanStringData = function (data, layoutSummary) {\n  var groups, sample;\n  sample = data[0];\n  if ('parent_id' in sample && 'start' in sample && 'end' in sample && 'value' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.start, datum.end, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      start: datum[1],\n      end: datum[2]\n    }, index);\n  }).map(function (datum) {\n    var value;\n    if (datum[1] < 0 || datum[2] > layoutSummary[datum[0]]) {\n      _circosJS.log(2, 'position', 'position inconsistency', {\n        datum: datum,\n        layoutSummary: layoutSummary\n      });\n    }\n    value = datum[3] != null ? datum[3] : null;\n    return {\n      block_id: datum[0],\n      start: Math.max(0, parseFloat(datum[1])),\n      end: Math.min(layoutSummary[datum[0]], parseFloat(datum[2])),\n      value: value\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parsePositionValueData = function (data, layoutSummary) {\n  var groups, sample;\n  sample = data[0];\n  if ('parent_id' in sample && 'position' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.position, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      position: datum[1],\n      value: datum[2]\n    }, index);\n  }).map(function (datum) {\n    return {\n      block_id: datum[0],\n      position: Math.min(layoutSummary[datum[0]], parseFloat(datum[1])),\n      value: parseFloat(datum[2]) || 1\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parsePositionTextData = function (data, layoutSummary) {\n  var groups, sample;\n  sample = data[0];\n  if ('parent_id' in sample && 'position' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.position, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      position: datum[1]\n    }, index);\n  }).map(function (datum) {\n    return {\n      block_id: datum[0],\n      position: Math.min(layoutSummary[datum[0]], parseFloat(datum[1])),\n      value: datum[2]\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parseChordData = function (data, layoutSummary) {\n  var sample;\n  sample = data[0];\n  if ('source_id' in sample && 'source_start' in sample && 'source_end' && 'target_id' in sample && 'target_start' in sample && 'target_end' in sample) {\n    data = data.map(function (datum) {\n      var elts;\n      elts = [datum.source_id, datum.source_start, datum.source_end, datum.target_id, datum.target_start, datum.target_end];\n      if (datum.value != null) {\n        elts.push(datum.value);\n      }\n      return elts;\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'source_id');\n  }).filter(function (datum, index) {\n    return _circosJS.checkParent(datum[3], index, layoutSummary, 'target_id');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      source_start: datum[1],\n      source_end: datum[2],\n      target_start: datum[4],\n      target_end: datum[5],\n      value: datum[6] || 1\n    }, index);\n  }).map(function (datum) {\n    return {\n      source: {\n        id: datum[0],\n        start: Math.max(0, parseFloat(datum[1])),\n        end: Math.min(layoutSummary[datum[0]], parseFloat(datum[2]))\n      },\n      target: {\n        id: datum[3],\n        start: Math.max(0, parseFloat(datum[4])),\n        end: Math.min(layoutSummary[datum[3]], parseFloat(datum[5]))\n      },\n      value: parseFloat(datum[6]),\n      hsp: datum[7]\n    };\n  });\n  return {\n    data: data,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.Layout = function (conf, data) {\n  var block_nb, gap, k, offset, ref, ref1, size, v;\n  if (data == null) {\n    _circosJS.log(2, 'no layout data', '');\n  }\n  this.conf = _circosJS.mixConf(conf, JSON.parse(JSON.stringify(this.defaultConf)));\n  this.data = data;\n  this.blocks = {};\n  this.size = 0;\n  offset = 0;\n  ref = this.data;\n  for (k in ref) {\n    v = ref[k];\n    this.blocks[v.id] = {\n      label: v.label,\n      len: v.len,\n      color: v.color,\n      offset: offset\n    };\n    v.offset = offset;\n    offset += v.len;\n  }\n  this.size = offset;\n  gap = this.conf.gap;\n  size = this.size;\n  block_nb = this.data.length;\n  ref1 = this.data;\n  for (k in ref1) {\n    v = ref1[k];\n    this.blocks[v.id].start = v.offset / size * (2 * Math.PI - block_nb * gap) + k * gap;\n    this.blocks[v.id].end = (v.offset + v.len) / size * (2 * Math.PI - block_nb * gap) + k * gap;\n    v.start = v.offset / size * (2 * Math.PI - block_nb * gap) + k * gap;\n    v.end = (v.offset + v.len) / size * (2 * Math.PI - block_nb * gap) + k * gap;\n  }\n  this.getAngle = function (blockId, unit) {\n    var block;\n    block = this.blocks[blockId].start / this._size;\n    if (unit === 'deg') {\n      return block * 360;\n    } else if (unit === 'rad') {\n      return block * 2 * Math.PI;\n    } else {\n      return null;\n    }\n  };\n  this.summary = function () {\n    var d, l, layoutSummary, len, ref2;\n    layoutSummary = {};\n    ref2 = this._data;\n    for (l = 0, len = ref2.length; l < len; l++) {\n      d = ref2[l];\n      layoutSummary[d.id] = d.len;\n    }\n    return layoutSummary;\n  };\n  return this;\n};\n_circosJS.Core.prototype.heatmap = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Heatmap();\n  track.build(this, conf, data);\n  this.tracks.heatmaps[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.histogram = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Histogram();\n  track.build(this, conf, data);\n  this.tracks.histograms[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.chord = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Chord();\n  track.build(this, conf, data);\n  this.tracks.chords[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.scatter = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Scatter();\n  track.build(this, conf, data);\n  this.tracks.scatters[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.line = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Line();\n  track.build(this, conf, data);\n  this.tracks.lines[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.stack = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Stack();\n  track.build(this, conf, data);\n  this.tracks.stacks[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.highlight = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Highlight();\n  track.build(this, conf, data);\n  this.tracks.highlights[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.text = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Text();\n  track.build(this, conf, data);\n  this.tracks.texts[id] = track;\n  return this;\n};\n_circosJS.Chord = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseChordData;\n  this.applyRules = function (rules, data) {\n    var datum, l, len, results, rule;\n    rules = rules || [];\n    results = [];\n    for (l = 0, len = data.length; l < len; l++) {\n      datum = data[l];\n      results.push(function () {\n        var len1, m, results1;\n        results1 = [];\n        for (m = 0, len1 = rules.length; m < len1; m++) {\n          rule = rules[m];\n          if (rule.condition(datum)) {\n            results1.push(datum[rule.parameter] = rule.value);\n          } else {\n            results1.push(void 0);\n          }\n        }\n        return results1;\n      }());\n    }\n    return results;\n  };\n  this.getSource = function (_this) {\n    return function (d, layout) {\n      var block, endAngle, result, startAngle;\n      d = d.source;\n      block = layout.blocks[d.id];\n      startAngle = block.start + d.start / block.len * (block.end - block.start);\n      endAngle = block.start + d.end / block.len * (block.end - block.start);\n      return result = {\n        radius: layout.conf.innerRadius,\n        startAngle: startAngle,\n        endAngle: endAngle\n      };\n    };\n  }(this);\n  this.getTarget = function (_this) {\n    return function (d, layout) {\n      var block, endAngle, result, startAngle;\n      d = d.target;\n      block = layout.blocks[d.id];\n      startAngle = block.start + d.start / block.len * (block.end - block.start);\n      endAngle = block.start + d.end / block.len * (block.end - block.start);\n      return result = {\n        radius: layout.conf.innerRadius,\n        startAngle: startAngle,\n        endAngle: endAngle\n      };\n    };\n  }(this);\n  this.dimChords = function (parentElement, d, conf, index) {\n    parentElement.selectAll('path').style('opacity', function (p, i) {\n      if (index == i) {\n        return 1;\n      }\n      return 0;\n    });\n  };\n  this.resetChords = function (parentElement, conf) {\n    parentElement.selectAll('path').style('opacity', conf.opacity);\n  };\n  this.renderChords = function (parentElement, name, conf, data, layout, ratio, getSource, getTarget) {\n    var link, track;\n    track = parentElement.append('g').attr('class', conf.colorPalette);\n    link = track.selectAll('.chord').data(data).enter().append('path').attr('class', 'chord').attr('d', d3.svg.chord().source(function (d) {\n      return getSource(d, layout);\n    }).target(function (d) {\n      return getTarget(d, layout);\n    })).attr('opacity', function (d) {\n      return conf.opacity;\n    }).attr('id', function (d) {\n      return d.source.id + '_' + d.target.id;\n    }).on('mouseover', function (_this) {\n      return function (d, i, j) {\n        _this.dimChords(track, d, conf, i);\n        return _this.dispatch.mouseover(d, i, j);\n      };\n    }(this)).on('mouseout', function (_this) {\n      return function (d, i, j) {\n        _this.resetChords(track, conf);\n        return _this.dispatch.mouseout(d, i, j);\n      };\n    }(this));\n    if (conf.usePalette) {\n      link.attr('class', function (d) {\n        return 'q' + ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n      });\n    } else {\n      link.attr('fill', function (d) {\n        return d.color || conf.color;\n      });\n    }\n    return link;\n  };\n  this.render = function (_this) {\n    return function (instance, parentElement, name) {\n      var selection, track;\n      parentElement.select('.' + name).remove();\n      track = parentElement.append('g').attr('class', name).attr('z-index', _this.conf.zIndex);\n      selection = _this.renderChords(track, name, _this.conf, _this.data, instance._layout, _this.ratio, _this.getSource, _this.getTarget);\n      if (_this.conf.tooltipContent != null) {\n        return _circosJS.registerTooltip(instance, _this, selection, _this.conf);\n      }\n    };\n  }(this);\n  return this;\n};\n_circosJS.Heatmap = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', conf.colorPalette);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    return parentElement.selectAll('tile').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'tile').attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('d', d3.svg.arc().innerRadius(conf.innerRadius).outerRadius(conf.outerRadius).startAngle(function (d, i) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d, i) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    })).attr('class', function (d) {\n      return 'q' + utils.ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n    });\n  };\n  return this;\n};\n_circosJS.Highlight = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanStringData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group;\n      return group = _this.renderBlock(parentElement, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    return parentElement.selectAll('tile').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'tile').attr('d', d3.svg.arc().innerRadius(conf.innerRadius).outerRadius(conf.outerRadius).startAngle(function (d, i) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d, i) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    })).attr('fill', function (d) {\n      return d.value || conf.color;\n    }).attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('stroke-width', function (d) {\n      return d.strokeWidth || conf.strokeWidth;\n    }).attr('stroke', function (d) {\n      return d.strokeColor || conf.strokeColor;\n    });\n  };\n  return this;\n};\n_circosJS.Histogram = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', _this.conf.colorPalette);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var bin;\n    bin = parentElement.selectAll('.bin').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'bin').attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('d', d3.svg.arc().innerRadius(function (d) {\n      var height;\n      if (conf.direction === 'in') {\n        height = utils.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n        return conf.outerRadius - height;\n      } else {\n        return conf.innerRadius;\n      }\n    }).outerRadius(function (d) {\n      var height;\n      if (conf.direction === 'out') {\n        height = utils.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n        return conf.innerRadius + height;\n      } else {\n        return conf.outerRadius;\n      }\n    }).startAngle(function (d) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    }));\n    if (conf.usePalette) {\n      bin.attr('class', function (d) {\n        return 'q' + utils.ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n      });\n    } else {\n      bin.attr('fill', d.color || conf.color);\n    }\n    return bin;\n  };\n  return this;\n};\n_circosJS.Line = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parsePositionValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', name);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var line;\n    line = d3.svg.line().x(function (d) {\n      return utils.x(d, layout, conf);\n    }).y(function (d) {\n      return utils.y(d, layout, conf);\n    }).interpolate(conf.interpolation);\n    return parentElement.append('path').datum(function (d) {\n      return d.values;\n    }).attr('class', 'line').attr('d', line).attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('stroke-width', function (d) {\n      return d.thickness || conf.thickness;\n    }).attr('stroke', function (d) {\n      return d.color || conf.color;\n    }).attr('fill', function (d) {\n      var color, fill;\n      fill = d.fill || conf.fill;\n      color = d.fill_color || conf.fill_color;\n      if (fill) {\n        return color;\n      } else {\n        return 'none';\n      }\n    });\n  };\n  return this;\n};\n_circosJS.Scatter = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parsePositionValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', name);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var point;\n    point = parentElement.selectAll('.point').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'point').attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('d', d3.svg.symbol().type(conf.glyph.shape).size(conf.glyph.size)).attr('transform', function (_this) {\n      return function (d) {\n        return 'translate(' + utils.x(d, layout, conf) + ',' + utils.y(d, layout, conf) + ') rotate(' + utils.theta(d.position, layout.blocks[d.block_id]) * 360 / (2 * Math.PI) + ')';\n      };\n    }(this)).attr('stroke', function (d) {\n      return d.glyph_strokeColor || conf.glyph.strokeColor;\n    }).attr('stroke-width', function (d) {\n      return d.glyph_strokeWidth || conf.glyph.strokeWidth;\n    }).attr('fill', function (d) {\n      var color, fill;\n      fill = d.glyph_fill || conf.glyph.fill;\n      color = d.glyph_color || conf.glyph.color;\n      if (fill) {\n        return color;\n      } else {\n        return 'none';\n      }\n    });\n    return point;\n  };\n  return this;\n};\n_circosJS.Stack = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanValueData;\n  this.build = function (instance, conf, data, rules, backgrounds) {\n    this.loadData(data, instance);\n    this.conf = this.processConf(conf, this.defaultConf, this.meta, instance, this);\n    this.buildLayers(this.data, this.conf.margin);\n    return this.applyRules(conf.rules, this.data);\n  };\n  this.buildLayers = function (data, margin) {\n    var block, datum, i, idx, l, lastDatumInLayer, layer, layers, len, len1, m, placed, ref;\n    for (idx in data) {\n      block = data[idx];\n      block.values = block.values.sort(function (a, b) {\n        if (a.start < b.start) {\n          return -1;\n        }\n        if (a.start === b.start && a.end > b.end) {\n          return -1;\n        }\n        if (a.start === b.start && a.end === b.end) {\n          return 0;\n        }\n        return 1;\n      });\n      layers = [];\n      ref = block.values;\n      for (l = 0, len = ref.length; l < len; l++) {\n        datum = ref[l];\n        placed = false;\n        for (i = m = 0, len1 = layers.length; m < len1; i = ++m) {\n          layer = layers[i];\n          lastDatumInLayer = layer.slice(0).pop();\n          if (lastDatumInLayer.end + margin < datum.start) {\n            layer.push(datum);\n            datum.layer = i;\n            placed = true;\n            break;\n          }\n        }\n        if (!placed) {\n          datum.layer = layers.length;\n        }\n        if (!placed) {\n          layers.push([datum]);\n        }\n      }\n    }\n  };\n  this.applyRules = function (rules, data) {\n    var datum, i, k, layer, results, rule, v;\n    rules = rules || [];\n    results = [];\n    for (k in data) {\n      v = data[k];\n      results.push(function () {\n        var ref, results1;\n        ref = v.layers;\n        results1 = [];\n        for (i in ref) {\n          layer = ref[i];\n          results1.push(function () {\n            var l, len, results2;\n            results2 = [];\n            for (l = 0, len = layer.length; l < len; l++) {\n              datum = layer[l];\n              results2.push(function () {\n                var len1, m, results3;\n                results3 = [];\n                for (m = 0, len1 = rules.length; m < len1; m++) {\n                  rule = rules[m];\n                  if (rule.condition(v.parent, datum, i)) {\n                    results3.push(datum[rule.parameter] = rule.value);\n                  } else {\n                    results3.push(void 0);\n                  }\n                }\n                return results3;\n              }());\n            }\n            return results2;\n          }());\n        }\n        return results1;\n      }());\n    }\n    return results;\n  };\n  this.datumRadialPosition = function (_this) {\n    return function (d) {\n      var origin, radialEnd, radialStart;\n      radialStart = (_this.conf.thickness + _this.conf.radialMargin) * d.layer;\n      radialEnd = radialStart + _this.conf.thickness;\n      if (_this.conf.direction === 'out') {\n        return [_this.conf.innerRadius + radialStart, Math.min(_this.conf.innerRadius + radialEnd, _this.conf.outerRadius)];\n      }\n      if (_this.conf.direction === 'in') {\n        return [Math.max(_this.conf.outerRadius - radialEnd, _this.conf.innerRadius), _this.conf.outerRadius - radialStart];\n      }\n      if (_this.conf.direction === 'center') {\n        origin = Math.floor((_this.conf.outerRadius + _this.conf.innerRadius) / 2);\n        radialStart = (_this.conf.thickness + _this.conf.radialMargin) * Math.floor(d.layer / 2);\n        radialEnd = radialStart + _this.conf.thickness;\n        if (d.layer % 2 === 0) {\n          return [origin + radialStart, origin + radialEnd];\n        } else {\n          return [origin - radialStart - _this.conf.radialMargin, origin - radialEnd - _this.conf.radialMargin];\n        }\n      }\n    };\n  }(this);\n  this.datumInnerRadius = function (_this) {\n    return function (d, i, j) {\n      return _this.datumRadialPosition(d, i, j)[0];\n    };\n  }(this);\n  this.datumOuterRadius = function (_this) {\n    return function (d, i, j) {\n      return _this.datumRadialPosition(d, i, j)[1];\n    };\n  }(this);\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', conf.colorPalette);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var tile;\n    tile = parentElement.selectAll('.tile').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'tile').attr('d', d3.svg.arc().innerRadius(utils.datumInnerRadius).outerRadius(utils.datumOuterRadius).startAngle(function (d) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    }));\n    tile.attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    });\n    tile.attr('stroke-width', function (d) {\n      return d.strokeWidth || conf.strokeWidth;\n    });\n    tile.attr('stroke', function (d) {\n      return d.strokeColor || conf.strokeColor;\n    });\n    tile.attr('fill', function (d) {\n      return d.color || conf.color;\n    });\n    tile.attr('class', function (d) {\n      var usePalette;\n      usePalette = d.usePalette || conf.usePalette;\n      if (usePalette) {\n        return 'q' + utils.ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n      }\n    });\n    return tile;\n  };\n  return this;\n};\n_circosJS.Text = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parsePositionTextData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', name);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var key, ref, text, value;\n    text = parentElement.selectAll('g').data(function (d) {\n      return d.values;\n    }).enter().append('g').append('text').text(function (d) {\n      return d.value;\n    }).attr('transform', function (d) {\n      var angle;\n      angle = utils.theta(d.position, layout.blocks[d.block_id]) * 360 / (2 * Math.PI) - 90;\n      return 'rotate(' + angle + ')' + 'translate(' + conf.innerRadius + ',0)';\n    });\n    ref = conf.style;\n    for (key in ref) {\n      value = ref[key];\n      text.style(key, value);\n    }\n    return text;\n  };\n  return this;\n};\n_circosJS.Track = function () {\n  this.build = function (instance, conf, data) {\n    this.dispatch = d3.dispatch('mouseover', 'mouseout');\n    this.loadData(data, instance);\n    this.conf = this.processConf(conf, this.defaultConf, this.meta, instance, this);\n    return this.applyRules(conf.rules, this.data);\n  };\n  this.loadData = function (data, instance) {\n    var d, l, layoutSummary, len, ref, result;\n    layoutSummary = {};\n    ref = instance._layout.data;\n    for (l = 0, len = ref.length; l < len; l++) {\n      d = ref[l];\n      layoutSummary[d.id] = d.len;\n    }\n    result = this.parseData(data, layoutSummary);\n    this.data = result.data;\n    return this.meta = result.meta;\n  };\n  this.processConf = function (conf, defaultConf, meta, instance, utils) {\n    var smartBorders;\n    conf = _circosJS.mixConf(conf, Object.assign({}, defaultConf));\n    conf = utils.computeMinMax(conf, meta);\n    if (conf.innerRadius === 0 && conf.outerRadius === 0) {\n      smartBorders = instance.smartBorders();\n      conf.innerRadius = smartBorders['in'];\n      conf.outerRadius = smartBorders.out;\n    }\n    return conf;\n  };\n  this.applyRules = function (rules, data) {\n    var datum, i, k, results, rule, v;\n    rules = rules || [];\n    results = [];\n    for (k in data) {\n      v = data[k];\n      results.push(function () {\n        var ref, results1;\n        ref = v.values;\n        results1 = [];\n        for (i in ref) {\n          datum = ref[i];\n          results1.push(function () {\n            var l, len, results2;\n            results2 = [];\n            for (l = 0, len = rules.length; l < len; l++) {\n              rule = rules[l];\n              if (rule.condition(v.key, datum, i)) {\n                results2.push(datum[rule.parameter] = rule.value);\n              } else {\n                results2.push(void 0);\n              }\n            }\n            return results2;\n          }());\n        }\n        return results1;\n      }());\n    }\n    return results;\n  };\n  this.computeMinMax = function (conf, meta) {\n    conf.cmin = conf.min === 'smart' ? meta.min : conf.min;\n    conf.cmax = conf.max === 'smart' ? meta.max : conf.max;\n    return conf;\n  };\n  this.ratio = function (value, min, max, scope, reverse, logScale) {\n    var fraction, scaleLogBase, x;\n    scaleLogBase = logScale ? 2.3 : 1;\n    if (min === max || value === min && !reverse || value === max && reverse) {\n      return 0;\n    }\n    if (value === max || value === min && reverse) {\n      return scope - 1;\n    }\n    fraction = (value - min) / (max - min);\n    x = Math.exp(1 / scaleLogBase * Math.log(fraction));\n    if (reverse) {\n      x = 1 - x;\n    }\n    return Math.floor(scope * x);\n  };\n  this.render = function (_this) {\n    return function (instance, parentElement, name) {\n      var datumContainer, ref, selection, track;\n      parentElement.select('.' + name).remove();\n      track = parentElement.append('g').attr('class', name).attr('z-index', _this.conf.zIndex);\n      datumContainer = _this.renderDatumContainer(instance, track, name, _this.data, _this.conf);\n      if ((ref = _this.conf.axes) != null ? ref.display : void 0) {\n        _this.renderAxes(datumContainer, _this.conf, instance._layout, _this.data);\n      }\n      selection = _this.renderDatum(datumContainer, _this.conf, instance._layout, _this);\n      if (_this.conf.tooltipContent != null) {\n        _circosJS.registerTooltip(instance, _this, selection, _this.conf);\n      }\n      selection.on('mouseover', function (d, i, j) {\n        return _this.dispatch.mouseover(d, i, j);\n      });\n      return selection.on('mouseout', function (d, i, j) {\n        return _this.dispatch.mouseout(d, i, j);\n      });\n    };\n  }(this);\n  this.renderBlock = function (parentElement, data, layout, conf) {\n    var block, scope;\n    scope = conf.outerRadius - conf.innerRadius;\n    block = parentElement.selectAll('.block').data(data).enter().append('g').attr('class', 'block').attr('transform', function (d) {\n      return 'rotate(' + layout.blocks[d.key].start * 360 / (2 * Math.PI) + ')';\n    });\n    if (conf.backgrounds) {\n      block.selectAll('.background').data(conf.backgrounds).enter().append('path').attr('class', 'background').attr('fill', function (background) {\n        return background.color;\n      }).attr('opacity', function (background) {\n        return background.opacity || 1;\n      }).attr('d', d3.svg.arc().innerRadius(function (background) {\n        if (conf.direction === 'in') {\n          return conf.outerRadius - scope * background.start;\n        } else {\n          return conf.innerRadius + scope * background.start;\n        }\n      }).outerRadius(function (background) {\n        if (conf.direction === 'in') {\n          return conf.outerRadius - scope * background.end;\n        } else {\n          return conf.innerRadius + scope * background.end;\n        }\n      }).startAngle(function (d, i, j) {\n        return 0;\n      }).endAngle(function (d, i, j) {\n        return layout.blocks[data[j].key].end - layout.blocks[data[j].key].start;\n      }));\n    }\n    return block;\n  };\n  this.renderAxes = function (parentElement, conf, layout, data) {\n    var axes, axis, x;\n    if (conf.axes.minor.spacingType === 'pixel') {\n      axes = function () {\n        var l, ref, ref1, ref2, results;\n        results = [];\n        for (x = l = ref = conf.innerRadius, ref1 = conf.outerRadius, ref2 = conf.axes.minor.spacing; ref2 > 0 ? l <= ref1 : l >= ref1; x = l += ref2) {\n          results.push(x);\n        }\n        return results;\n      }();\n    }\n    axis = d3.svg.arc().innerRadius(function (d) {\n      return d;\n    }).outerRadius(function (d) {\n      return d;\n    }).startAngle(0).endAngle(function (d, i, j) {\n      var block;\n      block = layout.blocks[data[j].key];\n      return block.end - block.start;\n    });\n    return parentElement.selectAll('.axis').data(axes).enter().append('path').attr('opacity', conf.opacity).attr('class', 'axis').attr('d', axis).attr('stroke-width', function (d, i) {\n      if (i % conf.axes.major.spacing === 0) {\n        return conf.axes.major.thickness;\n      } else {\n        return conf.axes.minor.thickness;\n      }\n    }).attr('stroke', function (d, i) {\n      if (i % conf.axes.major.spacing === 0) {\n        return conf.axes.major.color;\n      } else {\n        return conf.axes.minor.color;\n      }\n    });\n  };\n  this.theta = function (position, block) {\n    return position / block.len * (block.end - block.start);\n  };\n  this.x = function (_this) {\n    return function (d, layout, conf) {\n      var angle, height, r;\n      height = _this.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n      if (conf.direction === 'in') {\n        r = conf.outerRadius - height;\n      } else {\n        r = conf.innerRadius + height;\n      }\n      angle = _this.theta(d.position, layout.blocks[d.block_id]) - Math.PI / 2;\n      return r * Math.cos(angle);\n    };\n  }(this);\n  this.y = function (_this) {\n    return function (d, layout, conf) {\n      var angle, height, r;\n      height = _this.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n      if (conf.direction === 'in') {\n        r = conf.outerRadius - height;\n      } else {\n        r = conf.innerRadius + height;\n      }\n      angle = _this.theta(d.position, layout.blocks[d.block_id]) - Math.PI / 2;\n      return r * Math.sin(angle);\n    };\n  }(this);\n  this.ratio = function (value, min, max, scope, reverse, logScale) {\n    var fraction, scaleLogBase, x;\n    scaleLogBase = logScale ? 2.3 : 1;\n    if (min === max || value === min && !reverse || value === max && reverse) {\n      return 0;\n    }\n    if (value === max || value === min && reverse) {\n      return scope - 1;\n    }\n    fraction = (value - min) / (max - min);\n    x = Math.exp(1 / scaleLogBase * Math.log(fraction));\n    if (reverse) {\n      x = 1 - x;\n    }\n    return Math.floor(scope * x);\n  };\n  return this;\n};\n_circosJS.renderLayout = function (d3, parentElement, instance) {\n  var block, conf, entry, layout;\n  conf = instance._layout.conf;\n  parentElement.select('.cs-layout').remove();\n  layout = parentElement.append('g').attr('class', 'cs-layout').attr('z-index', conf.zIndex).on('click', conf.onClick);\n  block = layout.selectAll('g').data(instance._layout.data).enter().append('g').attr('class', function (d) {\n    return d.id;\n  }).attr('opacity', conf.opacity);\n  entry = d3.svg.arc().innerRadius(conf.innerRadius).outerRadius(conf.outerRadius).cornerRadius(conf.cornerRadius).startAngle(function (d) {\n    return d.start;\n  }).endAngle(function (d) {\n    return d.end;\n  });\n  block.append('path').attr('d', entry).attr('fill', function (d) {\n    return d.color;\n  }).attr('id', function (d) {\n    return d.id;\n  });\n  if (conf.labels.display) {\n    _circosJS.renderLayoutLabels(conf, d3, block);\n  }\n  if (conf.ticks.display) {\n    return _circosJS.renderLayoutTicks(conf, layout, d3, instance);\n  }\n};\n_circosJS.renderLayoutLabels = function (conf, d3, block) {\n  var label, labelArc, r;\n  r = conf.innerRadius + conf.labels.radialOffset;\n  labelArc = d3.svg.arc().innerRadius(r).outerRadius(r).startAngle(function (d, i) {\n    return d.start;\n  }).endAngle(function (d, i) {\n    return d.end;\n  });\n  block.append('path').attr('fill', 'none').attr('stroke', 'none').attr('d', labelArc).attr('id', function (d) {\n    return 'arc-label' + d.id;\n  });\n  label = block.append('text').attr('font-size', conf.labels.size).attr('text-anchor', 'middle');\n  return label.append('textPath').attr('startOffset', '25%').attr('xlink:href', function (d) {\n    return '#arc-label' + d.id;\n  }).style('fill', conf.labels.color).text(function (d) {\n    var arc_len = d.end - d.start;\n    return d.label.slice(0, Math.floor(21 * arc_len)) + '..';\n  });\n};\n_circosJS.renderLayoutTicks = function (conf, layout, d3, instance) {\n  var blockTicks, displayLabel, ticks;\n  blockTicks = function blockTicks(d) {\n    var k, space;\n    k = (d.end - d.start) / d.len;\n    if (d.end - d.start > 1.57) {\n      space = 8;\n    } else if (d.end - d.start > 0.785) {\n      space = 4;\n    } else if (d.end - d.start > 0.3925) {\n      space = 2;\n    } else if (d.end - d.start > 0) {\n      space = 0;\n    }\n    var arr = [];\n    var item = {\n      angle: 0 * k + d.start,\n      label: 0\n    };\n    arr.push(item);\n    var temp_scale = d3.scale.linear().domain([1, d.len]).range([d.start, d.end]);\n    var len = temp_scale.ticks(space).length;\n    temp_scale.ticks(space).map(function (v, i) {\n      var init = v * k + d.start;\n      var _final = d.len * k + d.start;\n      if (_final - init > 0.5) {}\n      var item = {\n        angle: v * k + d.start,\n        label: v / conf.ticks.labelDenominator + conf.ticks.labelSuffix\n      };\n      arr.push(item);\n    });\n    arr.splice(len, 1);\n    var item = {\n      angle: d.len * k + d.start - 0.006,\n      label: d.len / conf.ticks.labelDenominator + conf.ticks.labelSuffix\n    };\n    arr.push(item);\n    return arr;\n  };\n  displayLabel = function displayLabel(v, i) {\n    if (conf.ticks.labels === false) {\n      return null;\n    } else if (conf.ticks.labelDisplay0 === false && i === 0) {\n      return null;\n    } else if (i % conf.ticks.labelSpacing) {\n      return null;\n    } else if (i === 0) {\n      return v / conf.ticks.labelDenominator; // added support for 0 without suffix.\n    } else {\n      return v / conf.ticks.labelDenominator + conf.ticks.labelSuffix;\n    }\n  };\n  ticks = layout.append('g').selectAll('g').data(instance._layout.data).enter().append('g').selectAll('g').data(blockTicks).enter().append('g').attr('transform', function (d) {\n    return 'rotate(' + (d.angle * 180 / Math.PI - 90) + ')' + 'translate(' + conf.outerRadius + ',0)';\n  });\n  ticks.append('line').attr('x1', 0).attr('y1', 1).attr('x2', function (d, i) {\n    return conf.ticks.size.major;\n  }).attr('y2', 1).style('stroke', conf.ticks.color);\n  return ticks.append('text').attr('x', 8).attr('dy', '.35em').attr('transform', function (d) {\n    if (d.angle > Math.PI) {\n      return 'rotate(180)translate(-16)';\n    } else {\n      return null;\n    }\n  }).attr('text-anchor', function (d) {\n    if (d.angle > Math.PI) {\n      return 'end';\n    } else {\n      return null;\n    }\n  }).attr('font-size', conf.ticks.labelSize).style('fill', conf.ticks.labelColor).text(function (d) {\n    return d.label;\n  });\n};\n_circosJS.Core.prototype.render = function (ids, removeTracks) {\n  var name, ref, ref1, renderAll, svg, track, trackStore, trackType, tracks, translated;\n  if (typeof ids === 'undefined') {\n    renderAll = true;\n    ids = [];\n  }\n  if (removeTracks) {\n    ref = this.tracks;\n    for (trackType in ref) {\n      trackStore = ref[trackType];\n      for (name in trackStore) {\n        track = trackStore[name];\n        svg.select('.' + name).remove();\n      }\n    }\n  }\n  svg = d3.select(this.conf.container).attr('width', this.conf.width).attr('height', this.conf.height);\n  translated = svg.select('.all');\n  if (translated.empty()) {\n    translated = svg.append('g').attr('class', 'all').attr('transform', 'translate(' + parseInt(this.conf.width / 2) + ',' + parseInt(this.conf.height / 2) + ')');\n  }\n  ref1 = this.tracks;\n  for (trackType in ref1) {\n    trackStore = ref1[trackType];\n    for (name in trackStore) {\n      track = trackStore[name];\n      if (renderAll || indexOf.call(ids, name) >= 0) {\n        track.render(this, translated, name);\n      }\n    }\n  }\n  if (renderAll || indexOf.call(ids, 'layout') >= 0) {\n    _circosJS.renderLayout(d3, translated, this);\n  }\n  tracks = svg.selectAll('.all > g').remove();\n  tracks[0].sort(function (a, b) {\n    if (parseInt(a.getAttribute('z-index')) < parseInt(b.getAttribute('z-index'))) {\n      return -1;\n    } else if (parseInt(a.getAttribute('z-index')) > parseInt(b.getAttribute('z-index'))) {\n      return 1;\n    } else {\n      return 0;\n    }\n  });\n  svg.select('.all').selectAll('g').data(tracks[0]).enter().append(function (d) {\n    return d;\n  });\n  return this;\n};\n_circosJS.Core.prototype.defaultConf = {\n  width: 700,\n  height: 700,\n  container: 'circos',\n  defaultTrackWidth: 10\n};\n_circosJS.Layout.prototype.defaultConf = {\n  innerRadius: 250,\n  outerRadius: 300,\n  cornerRadius: 5,\n  gap: 0.04,\n  opacity: 1,\n  labels: {\n    position: 'center',\n    display: true,\n    size: 14,\n    color: '#000',\n    radialOffset: 20\n  },\n  ticks: {\n    display: true,\n    color: 'grey',\n    spacing: 10000000,\n    labels: true,\n    labelSpacing: 10,\n    labelSuffix: 'Mb',\n    labelDenominator: 1000000,\n    labelDisplay0: true,\n    labelSize: 10,\n    labelColor: '#000',\n    labelFont: 'default',\n    majorSpacing: 5,\n    size: {\n      minor: 2,\n      major: 5\n    }\n  },\n  onClick: null,\n  onMouseOver: null,\n  zIndex: 100\n};\n_circosJS.axes = {\n  display: false,\n  minor: {\n    spacing: 5,\n    spacingType: 'pixel',\n    color: '#d3d3d3',\n    thickness: 2\n  },\n  major: {\n    spacing: 5,\n    color: '#000000',\n    thickness: 2\n  }\n};\n_circosJS.Heatmap.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  colorPalette: 'YlGnBu',\n  colorPaletteSize: 9,\n  colorPaletteReverse: false,\n  logScale: false,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Histogram.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  colorPaletteSize: 9,\n  colorPalette: 'YlGnBu',\n  usePalette: true,\n  colorPaletteReverse: false,\n  color: '#fd6a62',\n  logScale: false,\n  axes: _circosJS.axes,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Chord.prototype.defaultConf = {\n  colorPaletteSize: 9,\n  colorPalette: 'PuBuGn',\n  usePalette: true,\n  colorPaletteReverse: false,\n  color: '#fd6a62',\n  opacity: 0.7,\n  min: 'smart',\n  max: 'smart',\n  logScale: false,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  tooltipContent: null\n};\n_circosJS.Scatter.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  logScale: false,\n  glyph: {\n    color: '#fd6a62',\n    fill: true,\n    size: 15,\n    shape: 'circle',\n    strokeColor: '#d3d3d3',\n    strokeWidth: 2\n  },\n  axes: _circosJS.axes,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Line.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  logScale: false,\n  color: '#fd6a62',\n  fill: true,\n  fill_color: '#d3d3d3',\n  thickness: 2,\n  max_gap: 10000000,\n  interpolation: 'linear',\n  axes: _circosJS.axes,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Stack.prototype.defaultConf = (_circosJS$Stack$proto = {\n  innerRadius: 0,\n  outerRadius: 0,\n  colorPaletteSize: 9,\n  colorPalette: 'PuBuGn',\n  usePalette: true,\n  colorPaletteReverse: false,\n  color: '#fd6a62',\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  logScale: false\n}, _defineProperty(_circosJS$Stack$proto, \"color\", '#fd6a62'), _defineProperty(_circosJS$Stack$proto, \"thickness\", 10), _defineProperty(_circosJS$Stack$proto, \"radialMargin\", 2), _defineProperty(_circosJS$Stack$proto, \"margin\", 2), _defineProperty(_circosJS$Stack$proto, \"strokeWidth\", 1), _defineProperty(_circosJS$Stack$proto, \"strokeColor\", '#000000'), _defineProperty(_circosJS$Stack$proto, \"axes\", _circosJS.axes), _defineProperty(_circosJS$Stack$proto, \"rules\", []), _defineProperty(_circosJS$Stack$proto, \"backgrounds\", []), _defineProperty(_circosJS$Stack$proto, \"zIndex\", 1), _defineProperty(_circosJS$Stack$proto, \"opacity\", 1), _defineProperty(_circosJS$Stack$proto, \"tooltipContent\", null), _circosJS$Stack$proto);\n_circosJS.Highlight.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  defaultColor: '#fd6a62',\n  opacity: 0.5,\n  rules: [],\n  zIndex: 101,\n  strokeColor: '#d3d3d3',\n  strokeWidth: 0,\n  tooltipContent: null\n};\n_circosJS.Text.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  style: {},\n  tooltipContent: null\n};\n_circosJS.registerTooltip = function (instance, track, element, trackParams) {\n  track.tip = d3.tip().direction('s').offset([20, 0]).html(trackParams.tooltipContent);\n  element.call(track.tip);\n  track.dispatch.on('mouseover', function (d, i, j) {\n    return track.tip.attr('class', 'd3-tip appear').show(d);\n  });\n  return track.dispatch.on('mouseout', function (d, i, j) {\n    track.tip.attr('class', 'd3-tip').show(d);\n    return track.tip.hide();\n  });\n};\n\n//# sourceURL=webpack://SequenceServer/./public/packages/circosJS@1.7.0.js?");
+eval("/* module decorator */ module = __webpack_require__.nmd(module);\nvar _circosJS$Stack$proto;\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nvar _circosJS,\n  indexOf = [].indexOf || function (item) {\n    for (var i = 0, l = this.length; i < l; i++) {\n      if (i in this && this[i] === item) return i;\n    }\n    return -1;\n  };\nif (typeof Object.assign !== 'function') {\n  Object.assign = function (target) {\n    'use strict';\n\n    var index, key, source;\n    if (target === null) {\n      throw new TypeError('Cannot convert undefined or null to object');\n    }\n    target = Object(target);\n    index = 1;\n    while (index < arguments.length) {\n      source = arguments[index];\n      if (source !== null) {\n        for (key in source) {\n          if (Object.prototype.hasOwnProperty.call(source, key)) {\n            target[key] = source[key];\n          }\n        }\n      }\n      index++;\n    }\n    return target;\n  };\n}\n_circosJS = function circosJS(conf) {\n  var instance;\n  instance = new _circosJS.Core(conf);\n  return instance;\n};\n_circosJS.Core = function (conf) {\n  this.tracks = {\n    heatmaps: {},\n    histograms: {},\n    chords: {},\n    scatters: {},\n    lines: {},\n    stacks: {},\n    highlights: {},\n    texts: {}\n  };\n  this.conf = _circosJS.mixConf(conf, this.defaultConf);\n  return this;\n};\n_circosJS.Core.prototype.removeTracks = function (trackIds) {\n  var id, l, len, ref, store, svg, trackId, type;\n  svg = d3.select(this.conf.container);\n  ref = this.tracks;\n  for (type in ref) {\n    store = ref[type];\n    if (_typeof(trackIds) === 'object') {\n      for (l = 0, len = trackIds.length; l < len; l++) {\n        id = trackIds[l];\n        if (id in store) {\n          svg.select('.' + id).remove();\n          delete store[id];\n        }\n      }\n    } else if (typeof trackIds === 'string') {\n      if (trackIds in store) {\n        svg.select('.' + trackIds).remove();\n        delete store[trackIds];\n      }\n    } else if (typeof trackIds === 'undefined') {\n      for (trackId in store) {\n        svg.select('.' + trackId).remove();\n        delete store[trackId];\n      }\n    }\n  }\n  return this;\n};\n_circosJS.Core.prototype.layout = function (conf, data) {\n  this._layout = new _circosJS.Layout(conf, data);\n  return this;\n};\n_circosJS.log = function (level, code, message, data) {\n  var levels;\n  levels = ['Permanent log', 'Error', 'Warning', 'Info'];\n  console.log('CircosJS: ', levels[level] + ' [' + code + '] ', message, data);\n};\n_circosJS.mixConf = function (conf, defaultConf) {\n  var key, newConf, value;\n  newConf = {};\n  for (key in defaultConf) {\n    value = defaultConf[key];\n    if (key in conf) {\n      if (Object.prototype.toString.call(value) === '[object Array]') {\n        newConf[key] = conf[key];\n      } else if (_typeof(value) === 'object' && value != null) {\n        if (value != null && Object.keys(value).length === 0) {\n          newConf[key] = conf[key];\n        } else {\n          newConf[key] = _circosJS.mixConf(conf[key], value);\n        }\n      } else {\n        newConf[key] = conf[key];\n      }\n    } else {\n      newConf[key] = value;\n    }\n  }\n  return newConf;\n};\n_circosJS.Core.prototype.smartBorders = function () {\n  var border, borders, currentBorder, l, layout, len, ref, store, track, trackId, trackType, width;\n  width = this.conf.defaultTrackWidth;\n  layout = {\n    'in': this._layout.conf.innerRadius,\n    out: this._layout.conf.outerRadius\n  };\n  borders = [];\n  ref = this.tracks;\n  for (trackType in ref) {\n    store = ref[trackType];\n    for (trackId in store) {\n      track = store[trackId];\n      if (track.conf.innerRadius) {\n        borders.push({\n          'in': track.conf.innerRadius,\n          out: track.conf.outerRadius\n        });\n      }\n    }\n  }\n  borders = borders.sort(function (a, b) {\n    if (a.out > b.out) {\n      1;\n    }\n    if (a.out < b.out) {\n      -1;\n    }\n    return 0;\n  });\n  currentBorder = layout;\n  for (l = 0, len = borders.length; l < len; l++) {\n    border = borders[l];\n    if (border.out < currentBorder['in'] - width) {\n      return {\n        'in': currentBorder['in'] - width,\n        out: currentBorder['in']\n      };\n    }\n    currentBorder = border;\n  }\n  if (currentBorder['in'] > width) {\n    return {\n      'in': currentBorder['in'] - width,\n      out: currentBorder['in']\n    };\n  } else {\n    return {\n      'in': borders[0].out,\n      out: borders[0].out + width\n    };\n  }\n};\nif ( true && module !== null) {\n  module.exports = _circosJS;\n}\n_circosJS.checkParent = function (key, index, layoutSummary, header) {\n  if (!(key in layoutSummary)) {\n    _circosJS.log(1, 'datum', 'unknown parent id', {\n      line: index + 1,\n      value: key,\n      header: header,\n      layoutSummary: layoutSummary\n    });\n    return false;\n  }\n  return true;\n};\n_circosJS.checkNumber = function (keys, index) {\n  var header, value;\n  for (header in keys) {\n    value = keys[header];\n    if (isNaN(value)) {\n      _circosJS.log(1, 'datum', 'not a number', {\n        line: index + 1,\n        value: value,\n        header: header\n      });\n      return false;\n    }\n  }\n  return true;\n};\n_circosJS.parseSpanValueData = function (data, layoutSummary) {\n  var groups, sample;\n  if (!(data.length > 0)) {\n    return {\n      data: [],\n      meta: {\n        min: null,\n        max: null\n      }\n    };\n  }\n  sample = data[0];\n  if ('parent_id' in sample && 'start' in sample && 'end' in sample && 'value' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.start, datum.end, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      start: datum[1],\n      end: datum[2],\n      value: datum[3]\n    }, index);\n  }).map(function (datum) {\n    if (datum[1] < 0 || datum[2] > layoutSummary[datum[0]]) {\n      _circosJS.log(2, 'position', 'position inconsistency', {\n        datum: datum,\n        layoutSummary: layoutSummary\n      });\n    }\n    return {\n      block_id: datum[0],\n      start: Math.max(0, parseFloat(datum[1])),\n      end: Math.min(layoutSummary[datum[0]], parseFloat(datum[2])),\n      value: parseFloat(datum[3]) || 1\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parseSpanStringData = function (data, layoutSummary) {\n  var groups, sample;\n  sample = data[0];\n  if ('parent_id' in sample && 'start' in sample && 'end' in sample && 'value' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.start, datum.end, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      start: datum[1],\n      end: datum[2]\n    }, index);\n  }).map(function (datum) {\n    var value;\n    if (datum[1] < 0 || datum[2] > layoutSummary[datum[0]]) {\n      _circosJS.log(2, 'position', 'position inconsistency', {\n        datum: datum,\n        layoutSummary: layoutSummary\n      });\n    }\n    value = datum[3] != null ? datum[3] : null;\n    return {\n      block_id: datum[0],\n      start: Math.max(0, parseFloat(datum[1])),\n      end: Math.min(layoutSummary[datum[0]], parseFloat(datum[2])),\n      value: value\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parsePositionValueData = function (data, layoutSummary) {\n  var groups, sample;\n  sample = data[0];\n  if ('parent_id' in sample && 'position' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.position, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      position: datum[1],\n      value: datum[2]\n    }, index);\n  }).map(function (datum) {\n    return {\n      block_id: datum[0],\n      position: Math.min(layoutSummary[datum[0]], parseFloat(datum[1])),\n      value: parseFloat(datum[2]) || 1\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parsePositionTextData = function (data, layoutSummary) {\n  var groups, sample;\n  sample = data[0];\n  if ('parent_id' in sample && 'position' in sample) {\n    data = data.map(function (datum) {\n      return [datum.parent_id, datum.position, datum.value];\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'parent');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      position: datum[1]\n    }, index);\n  }).map(function (datum) {\n    return {\n      block_id: datum[0],\n      position: Math.min(layoutSummary[datum[0]], parseFloat(datum[1])),\n      value: datum[2]\n    };\n  });\n  groups = d3.nest().key(function (datum) {\n    return datum.block_id;\n  }).entries(data);\n  return {\n    data: groups,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.parseChordData = function (data, layoutSummary) {\n  var sample;\n  sample = data[0];\n  if ('source_id' in sample && 'source_start' in sample && 'source_end' && 'target_id' in sample && 'target_start' in sample && 'target_end' in sample) {\n    data = data.map(function (datum) {\n      var elts;\n      elts = [datum.source_id, datum.source_start, datum.source_end, datum.target_id, datum.target_start, datum.target_end];\n      if (datum.value != null) {\n        elts.push(datum.value);\n      }\n      return elts;\n    });\n  }\n  data = data.filter(function (datum, index) {\n    return _circosJS.checkParent(datum[0], index, layoutSummary, 'source_id');\n  }).filter(function (datum, index) {\n    return _circosJS.checkParent(datum[3], index, layoutSummary, 'target_id');\n  }).filter(function (datum, index) {\n    return _circosJS.checkNumber({\n      source_start: datum[1],\n      source_end: datum[2],\n      target_start: datum[4],\n      target_end: datum[5],\n      value: datum[6] || 1\n    }, index);\n  }).map(function (datum) {\n    return {\n      source: {\n        id: datum[0],\n        start: Math.max(0, parseFloat(datum[1])),\n        end: Math.min(layoutSummary[datum[0]], parseFloat(datum[2]))\n      },\n      target: {\n        id: datum[3],\n        start: Math.max(0, parseFloat(datum[4])),\n        end: Math.min(layoutSummary[datum[3]], parseFloat(datum[5]))\n      },\n      value: parseFloat(datum[6]),\n      hsp: datum[7]\n    };\n  });\n  return {\n    data: data,\n    meta: {\n      min: d3.min(data, function (d) {\n        return d.value;\n      }),\n      max: d3.max(data, function (d) {\n        return d.value;\n      })\n    }\n  };\n};\n_circosJS.Layout = function (conf, data) {\n  var block_nb, gap, k, offset, ref, ref1, size, v;\n  if (data == null) {\n    _circosJS.log(2, 'no layout data', '');\n  }\n  this.conf = _circosJS.mixConf(conf, JSON.parse(JSON.stringify(this.defaultConf)));\n  this.data = data;\n  this.blocks = {};\n  this.size = 0;\n  offset = 0;\n  ref = this.data;\n  for (k in ref) {\n    v = ref[k];\n    this.blocks[v.id] = {\n      label: v.label,\n      len: v.len,\n      color: v.color,\n      offset: offset\n    };\n    v.offset = offset;\n    offset += v.len;\n  }\n  this.size = offset;\n  gap = this.conf.gap;\n  size = this.size;\n  block_nb = this.data.length;\n  ref1 = this.data;\n  for (k in ref1) {\n    v = ref1[k];\n    this.blocks[v.id].start = v.offset / size * (2 * Math.PI - block_nb * gap) + k * gap;\n    this.blocks[v.id].end = (v.offset + v.len) / size * (2 * Math.PI - block_nb * gap) + k * gap;\n    v.start = v.offset / size * (2 * Math.PI - block_nb * gap) + k * gap;\n    v.end = (v.offset + v.len) / size * (2 * Math.PI - block_nb * gap) + k * gap;\n  }\n  this.getAngle = function (blockId, unit) {\n    var block;\n    block = this.blocks[blockId].start / this._size;\n    if (unit === 'deg') {\n      return block * 360;\n    } else if (unit === 'rad') {\n      return block * 2 * Math.PI;\n    } else {\n      return null;\n    }\n  };\n  this.summary = function () {\n    var d, l, layoutSummary, len, ref2;\n    layoutSummary = {};\n    ref2 = this._data;\n    for (l = 0, len = ref2.length; l < len; l++) {\n      d = ref2[l];\n      layoutSummary[d.id] = d.len;\n    }\n    return layoutSummary;\n  };\n  return this;\n};\n_circosJS.Core.prototype.heatmap = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Heatmap();\n  track.build(this, conf, data);\n  this.tracks.heatmaps[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.histogram = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Histogram();\n  track.build(this, conf, data);\n  this.tracks.histograms[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.chord = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Chord();\n  track.build(this, conf, data);\n  this.tracks.chords[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.scatter = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Scatter();\n  track.build(this, conf, data);\n  this.tracks.scatters[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.line = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Line();\n  track.build(this, conf, data);\n  this.tracks.lines[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.stack = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Stack();\n  track.build(this, conf, data);\n  this.tracks.stacks[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.highlight = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Highlight();\n  track.build(this, conf, data);\n  this.tracks.highlights[id] = track;\n  return this;\n};\n_circosJS.Core.prototype.text = function (id, conf, data) {\n  var track;\n  track = new _circosJS.Text();\n  track.build(this, conf, data);\n  this.tracks.texts[id] = track;\n  return this;\n};\n_circosJS.Chord = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseChordData;\n  this.applyRules = function (rules, data) {\n    var datum, l, len, results, rule;\n    rules = rules || [];\n    results = [];\n    for (l = 0, len = data.length; l < len; l++) {\n      datum = data[l];\n      results.push(function () {\n        var len1, m, results1;\n        results1 = [];\n        for (m = 0, len1 = rules.length; m < len1; m++) {\n          rule = rules[m];\n          if (rule.condition(datum)) {\n            results1.push(datum[rule.parameter] = rule.value);\n          } else {\n            results1.push(void 0);\n          }\n        }\n        return results1;\n      }());\n    }\n    return results;\n  };\n  this.getSource = function (_this) {\n    return function (d, layout) {\n      var block, endAngle, result, startAngle;\n      d = d.source;\n      block = layout.blocks[d.id];\n      startAngle = block.start + d.start / block.len * (block.end - block.start);\n      endAngle = block.start + d.end / block.len * (block.end - block.start);\n      return result = {\n        radius: layout.conf.innerRadius,\n        startAngle: startAngle,\n        endAngle: endAngle\n      };\n    };\n  }(this);\n  this.getTarget = function (_this) {\n    return function (d, layout) {\n      var block, endAngle, result, startAngle;\n      d = d.target;\n      block = layout.blocks[d.id];\n      startAngle = block.start + d.start / block.len * (block.end - block.start);\n      endAngle = block.start + d.end / block.len * (block.end - block.start);\n      return result = {\n        radius: layout.conf.innerRadius,\n        startAngle: startAngle,\n        endAngle: endAngle\n      };\n    };\n  }(this);\n  this.dimChords = function (parentElement, d, conf, index) {\n    parentElement.selectAll('path').style('opacity', function (p, i) {\n      if (index == i) {\n        return 1;\n      }\n      return 0;\n    });\n  };\n  this.resetChords = function (parentElement, conf) {\n    parentElement.selectAll('path').style('opacity', conf.opacity);\n  };\n  this.renderChords = function (parentElement, name, conf, data, layout, ratio, getSource, getTarget) {\n    var link, track;\n    track = parentElement.append('g').attr('class', conf.colorPalette);\n    link = track.selectAll('.chord').data(data).enter().append('path').attr('class', 'chord').attr('d', d3.svg.chord().source(function (d) {\n      return getSource(d, layout);\n    }).target(function (d) {\n      return getTarget(d, layout);\n    })).attr('opacity', function (d) {\n      return conf.opacity;\n    }).attr('id', function (d) {\n      return d.source.id + '_' + d.target.id;\n    }).on('mouseover', function (_this) {\n      return function (d, i, j) {\n        _this.dimChords(track, d, conf, i);\n        return _this.dispatch.mouseover(d, i, j);\n      };\n    }(this)).on('mouseout', function (_this) {\n      return function (d, i, j) {\n        _this.resetChords(track, conf);\n        return _this.dispatch.mouseout(d, i, j);\n      };\n    }(this));\n    if (conf.usePalette) {\n      link.attr('class', function (d) {\n        return 'q' + ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n      });\n    } else {\n      link.attr('fill', function (d) {\n        return d.color || conf.color;\n      });\n    }\n    return link;\n  };\n  this.render = function (_this) {\n    return function (instance, parentElement, name) {\n      var selection, track;\n      parentElement.select('.' + name).remove();\n      track = parentElement.append('g').attr('class', name).attr('z-index', _this.conf.zIndex);\n      selection = _this.renderChords(track, name, _this.conf, _this.data, instance._layout, _this.ratio, _this.getSource, _this.getTarget);\n      if (_this.conf.tooltipContent != null) {\n        return _circosJS.registerTooltip(instance, _this, selection, _this.conf);\n      }\n    };\n  }(this);\n  return this;\n};\n_circosJS.Heatmap = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', conf.colorPalette);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    return parentElement.selectAll('tile').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'tile').attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('d', d3.svg.arc().innerRadius(conf.innerRadius).outerRadius(conf.outerRadius).startAngle(function (d, i) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d, i) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    })).attr('class', function (d) {\n      return 'q' + utils.ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n    });\n  };\n  return this;\n};\n_circosJS.Highlight = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanStringData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group;\n      return group = _this.renderBlock(parentElement, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    return parentElement.selectAll('tile').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'tile').attr('d', d3.svg.arc().innerRadius(conf.innerRadius).outerRadius(conf.outerRadius).startAngle(function (d, i) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d, i) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    })).attr('fill', function (d) {\n      return d.value || conf.color;\n    }).attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('stroke-width', function (d) {\n      return d.strokeWidth || conf.strokeWidth;\n    }).attr('stroke', function (d) {\n      return d.strokeColor || conf.strokeColor;\n    });\n  };\n  return this;\n};\n_circosJS.Histogram = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', _this.conf.colorPalette);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var bin;\n    bin = parentElement.selectAll('.bin').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'bin').attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('d', d3.svg.arc().innerRadius(function (d) {\n      var height;\n      if (conf.direction === 'in') {\n        height = utils.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n        return conf.outerRadius - height;\n      } else {\n        return conf.innerRadius;\n      }\n    }).outerRadius(function (d) {\n      var height;\n      if (conf.direction === 'out') {\n        height = utils.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n        return conf.innerRadius + height;\n      } else {\n        return conf.outerRadius;\n      }\n    }).startAngle(function (d) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    }));\n    if (conf.usePalette) {\n      bin.attr('class', function (d) {\n        return 'q' + utils.ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n      });\n    } else {\n      bin.attr('fill', d.color || conf.color);\n    }\n    return bin;\n  };\n  return this;\n};\n_circosJS.Line = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parsePositionValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', name);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var line;\n    line = d3.svg.line().x(function (d) {\n      return utils.x(d, layout, conf);\n    }).y(function (d) {\n      return utils.y(d, layout, conf);\n    }).interpolate(conf.interpolation);\n    return parentElement.append('path').datum(function (d) {\n      return d.values;\n    }).attr('class', 'line').attr('d', line).attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('stroke-width', function (d) {\n      return d.thickness || conf.thickness;\n    }).attr('stroke', function (d) {\n      return d.color || conf.color;\n    }).attr('fill', function (d) {\n      var color, fill;\n      fill = d.fill || conf.fill;\n      color = d.fill_color || conf.fill_color;\n      if (fill) {\n        return color;\n      } else {\n        return 'none';\n      }\n    });\n  };\n  return this;\n};\n_circosJS.Scatter = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parsePositionValueData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', name);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var point;\n    point = parentElement.selectAll('.point').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'point').attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    }).attr('d', d3.svg.symbol().type(conf.glyph.shape).size(conf.glyph.size)).attr('transform', function (_this) {\n      return function (d) {\n        return 'translate(' + utils.x(d, layout, conf) + ',' + utils.y(d, layout, conf) + ') rotate(' + utils.theta(d.position, layout.blocks[d.block_id]) * 360 / (2 * Math.PI) + ')';\n      };\n    }(this)).attr('stroke', function (d) {\n      return d.glyph_strokeColor || conf.glyph.strokeColor;\n    }).attr('stroke-width', function (d) {\n      return d.glyph_strokeWidth || conf.glyph.strokeWidth;\n    }).attr('fill', function (d) {\n      var color, fill;\n      fill = d.glyph_fill || conf.glyph.fill;\n      color = d.glyph_color || conf.glyph.color;\n      if (fill) {\n        return color;\n      } else {\n        return 'none';\n      }\n    });\n    return point;\n  };\n  return this;\n};\n_circosJS.Stack = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parseSpanValueData;\n  this.build = function (instance, conf, data, rules, backgrounds) {\n    this.loadData(data, instance);\n    this.conf = this.processConf(conf, this.defaultConf, this.meta, instance, this);\n    this.buildLayers(this.data, this.conf.margin);\n    return this.applyRules(conf.rules, this.data);\n  };\n  this.buildLayers = function (data, margin) {\n    var block, datum, i, idx, l, lastDatumInLayer, layer, layers, len, len1, m, placed, ref;\n    for (idx in data) {\n      block = data[idx];\n      block.values = block.values.sort(function (a, b) {\n        if (a.start < b.start) {\n          return -1;\n        }\n        if (a.start === b.start && a.end > b.end) {\n          return -1;\n        }\n        if (a.start === b.start && a.end === b.end) {\n          return 0;\n        }\n        return 1;\n      });\n      layers = [];\n      ref = block.values;\n      for (l = 0, len = ref.length; l < len; l++) {\n        datum = ref[l];\n        placed = false;\n        for (i = m = 0, len1 = layers.length; m < len1; i = ++m) {\n          layer = layers[i];\n          lastDatumInLayer = layer.slice(0).pop();\n          if (lastDatumInLayer.end + margin < datum.start) {\n            layer.push(datum);\n            datum.layer = i;\n            placed = true;\n            break;\n          }\n        }\n        if (!placed) {\n          datum.layer = layers.length;\n        }\n        if (!placed) {\n          layers.push([datum]);\n        }\n      }\n    }\n  };\n  this.applyRules = function (rules, data) {\n    var datum, i, k, layer, results, rule, v;\n    rules = rules || [];\n    results = [];\n    for (k in data) {\n      v = data[k];\n      results.push(function () {\n        var ref, results1;\n        ref = v.layers;\n        results1 = [];\n        for (i in ref) {\n          layer = ref[i];\n          results1.push(function () {\n            var l, len, results2;\n            results2 = [];\n            for (l = 0, len = layer.length; l < len; l++) {\n              datum = layer[l];\n              results2.push(function () {\n                var len1, m, results3;\n                results3 = [];\n                for (m = 0, len1 = rules.length; m < len1; m++) {\n                  rule = rules[m];\n                  if (rule.condition(v.parent, datum, i)) {\n                    results3.push(datum[rule.parameter] = rule.value);\n                  } else {\n                    results3.push(void 0);\n                  }\n                }\n                return results3;\n              }());\n            }\n            return results2;\n          }());\n        }\n        return results1;\n      }());\n    }\n    return results;\n  };\n  this.datumRadialPosition = function (_this) {\n    return function (d) {\n      var origin, radialEnd, radialStart;\n      radialStart = (_this.conf.thickness + _this.conf.radialMargin) * d.layer;\n      radialEnd = radialStart + _this.conf.thickness;\n      if (_this.conf.direction === 'out') {\n        return [_this.conf.innerRadius + radialStart, Math.min(_this.conf.innerRadius + radialEnd, _this.conf.outerRadius)];\n      }\n      if (_this.conf.direction === 'in') {\n        return [Math.max(_this.conf.outerRadius - radialEnd, _this.conf.innerRadius), _this.conf.outerRadius - radialStart];\n      }\n      if (_this.conf.direction === 'center') {\n        origin = Math.floor((_this.conf.outerRadius + _this.conf.innerRadius) / 2);\n        radialStart = (_this.conf.thickness + _this.conf.radialMargin) * Math.floor(d.layer / 2);\n        radialEnd = radialStart + _this.conf.thickness;\n        if (d.layer % 2 === 0) {\n          return [origin + radialStart, origin + radialEnd];\n        } else {\n          return [origin - radialStart - _this.conf.radialMargin, origin - radialEnd - _this.conf.radialMargin];\n        }\n      }\n    };\n  }(this);\n  this.datumInnerRadius = function (_this) {\n    return function (d, i, j) {\n      return _this.datumRadialPosition(d, i, j)[0];\n    };\n  }(this);\n  this.datumOuterRadius = function (_this) {\n    return function (d, i, j) {\n      return _this.datumRadialPosition(d, i, j)[1];\n    };\n  }(this);\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', conf.colorPalette);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var tile;\n    tile = parentElement.selectAll('.tile').data(function (d) {\n      return d.values;\n    }).enter().append('path').attr('class', 'tile').attr('d', d3.svg.arc().innerRadius(utils.datumInnerRadius).outerRadius(utils.datumOuterRadius).startAngle(function (d) {\n      return utils.theta(d.start, layout.blocks[d.block_id]);\n    }).endAngle(function (d) {\n      return utils.theta(d.end, layout.blocks[d.block_id]);\n    }));\n    tile.attr('opacity', function (d) {\n      return d.opacity || conf.opacity;\n    });\n    tile.attr('stroke-width', function (d) {\n      return d.strokeWidth || conf.strokeWidth;\n    });\n    tile.attr('stroke', function (d) {\n      return d.strokeColor || conf.strokeColor;\n    });\n    tile.attr('fill', function (d) {\n      return d.color || conf.color;\n    });\n    tile.attr('class', function (d) {\n      var usePalette;\n      usePalette = d.usePalette || conf.usePalette;\n      if (usePalette) {\n        return 'q' + utils.ratio(d.value, conf.cmin, conf.cmax, conf.colorPaletteSize, conf.colorPaletteReverse, conf.logScale) + '-' + conf.colorPaletteSize;\n      }\n    });\n    return tile;\n  };\n  return this;\n};\n_circosJS.Text = function () {\n  _circosJS.Track.call(this);\n  this.parseData = _circosJS.parsePositionTextData;\n  this.renderDatumContainer = function (_this) {\n    return function (instance, parentElement, name, data, conf) {\n      var group, track;\n      track = parentElement.append('g').attr('class', name);\n      return group = _this.renderBlock(track, data, instance._layout, conf);\n    };\n  }(this);\n  this.renderDatum = function (parentElement, conf, layout, utils) {\n    var key, ref, text, value;\n    text = parentElement.selectAll('g').data(function (d) {\n      return d.values;\n    }).enter().append('g').append('text').text(function (d) {\n      return d.value;\n    }).attr('transform', function (d) {\n      var angle;\n      angle = utils.theta(d.position, layout.blocks[d.block_id]) * 360 / (2 * Math.PI) - 90;\n      return 'rotate(' + angle + ')' + 'translate(' + conf.innerRadius + ',0)';\n    });\n    ref = conf.style;\n    for (key in ref) {\n      value = ref[key];\n      text.style(key, value);\n    }\n    return text;\n  };\n  return this;\n};\n_circosJS.Track = function () {\n  this.build = function (instance, conf, data) {\n    this.dispatch = d3.dispatch('mouseover', 'mouseout');\n    this.loadData(data, instance);\n    this.conf = this.processConf(conf, this.defaultConf, this.meta, instance, this);\n    return this.applyRules(conf.rules, this.data);\n  };\n  this.loadData = function (data, instance) {\n    var d, l, layoutSummary, len, ref, result;\n    layoutSummary = {};\n    ref = instance._layout.data;\n    for (l = 0, len = ref.length; l < len; l++) {\n      d = ref[l];\n      layoutSummary[d.id] = d.len;\n    }\n    result = this.parseData(data, layoutSummary);\n    this.data = result.data;\n    return this.meta = result.meta;\n  };\n  this.processConf = function (conf, defaultConf, meta, instance, utils) {\n    var smartBorders;\n    conf = _circosJS.mixConf(conf, Object.assign({}, defaultConf));\n    conf = utils.computeMinMax(conf, meta);\n    if (conf.innerRadius === 0 && conf.outerRadius === 0) {\n      smartBorders = instance.smartBorders();\n      conf.innerRadius = smartBorders['in'];\n      conf.outerRadius = smartBorders.out;\n    }\n    return conf;\n  };\n  this.applyRules = function (rules, data) {\n    var datum, i, k, results, rule, v;\n    rules = rules || [];\n    results = [];\n    for (k in data) {\n      v = data[k];\n      results.push(function () {\n        var ref, results1;\n        ref = v.values;\n        results1 = [];\n        for (i in ref) {\n          datum = ref[i];\n          results1.push(function () {\n            var l, len, results2;\n            results2 = [];\n            for (l = 0, len = rules.length; l < len; l++) {\n              rule = rules[l];\n              if (rule.condition(v.key, datum, i)) {\n                results2.push(datum[rule.parameter] = rule.value);\n              } else {\n                results2.push(void 0);\n              }\n            }\n            return results2;\n          }());\n        }\n        return results1;\n      }());\n    }\n    return results;\n  };\n  this.computeMinMax = function (conf, meta) {\n    conf.cmin = conf.min === 'smart' ? meta.min : conf.min;\n    conf.cmax = conf.max === 'smart' ? meta.max : conf.max;\n    return conf;\n  };\n  this.ratio = function (value, min, max, scope, reverse, logScale) {\n    var fraction, scaleLogBase, x;\n    scaleLogBase = logScale ? 2.3 : 1;\n    if (min === max || value === min && !reverse || value === max && reverse) {\n      return 0;\n    }\n    if (value === max || value === min && reverse) {\n      return scope - 1;\n    }\n    fraction = (value - min) / (max - min);\n    x = Math.exp(1 / scaleLogBase * Math.log(fraction));\n    if (reverse) {\n      x = 1 - x;\n    }\n    return Math.floor(scope * x);\n  };\n  this.render = function (_this) {\n    return function (instance, parentElement, name) {\n      var datumContainer, ref, selection, track;\n      parentElement.select('.' + name).remove();\n      track = parentElement.append('g').attr('class', name).attr('z-index', _this.conf.zIndex);\n      datumContainer = _this.renderDatumContainer(instance, track, name, _this.data, _this.conf);\n      if ((ref = _this.conf.axes) != null ? ref.display : void 0) {\n        _this.renderAxes(datumContainer, _this.conf, instance._layout, _this.data);\n      }\n      selection = _this.renderDatum(datumContainer, _this.conf, instance._layout, _this);\n      if (_this.conf.tooltipContent != null) {\n        _circosJS.registerTooltip(instance, _this, selection, _this.conf);\n      }\n      selection.on('mouseover', function (d, i, j) {\n        return _this.dispatch.mouseover(d, i, j);\n      });\n      return selection.on('mouseout', function (d, i, j) {\n        return _this.dispatch.mouseout(d, i, j);\n      });\n    };\n  }(this);\n  this.renderBlock = function (parentElement, data, layout, conf) {\n    var block, scope;\n    scope = conf.outerRadius - conf.innerRadius;\n    block = parentElement.selectAll('.block').data(data).enter().append('g').attr('class', 'block').attr('transform', function (d) {\n      return 'rotate(' + layout.blocks[d.key].start * 360 / (2 * Math.PI) + ')';\n    });\n    if (conf.backgrounds) {\n      block.selectAll('.background').data(conf.backgrounds).enter().append('path').attr('class', 'background').attr('fill', function (background) {\n        return background.color;\n      }).attr('opacity', function (background) {\n        return background.opacity || 1;\n      }).attr('d', d3.svg.arc().innerRadius(function (background) {\n        if (conf.direction === 'in') {\n          return conf.outerRadius - scope * background.start;\n        } else {\n          return conf.innerRadius + scope * background.start;\n        }\n      }).outerRadius(function (background) {\n        if (conf.direction === 'in') {\n          return conf.outerRadius - scope * background.end;\n        } else {\n          return conf.innerRadius + scope * background.end;\n        }\n      }).startAngle(function (d, i, j) {\n        return 0;\n      }).endAngle(function (d, i, j) {\n        return layout.blocks[data[j].key].end - layout.blocks[data[j].key].start;\n      }));\n    }\n    return block;\n  };\n  this.renderAxes = function (parentElement, conf, layout, data) {\n    var axes, axis, x;\n    if (conf.axes.minor.spacingType === 'pixel') {\n      axes = function () {\n        var l, ref, ref1, ref2, results;\n        results = [];\n        for (x = l = ref = conf.innerRadius, ref1 = conf.outerRadius, ref2 = conf.axes.minor.spacing; ref2 > 0 ? l <= ref1 : l >= ref1; x = l += ref2) {\n          results.push(x);\n        }\n        return results;\n      }();\n    }\n    axis = d3.svg.arc().innerRadius(function (d) {\n      return d;\n    }).outerRadius(function (d) {\n      return d;\n    }).startAngle(0).endAngle(function (d, i, j) {\n      var block;\n      block = layout.blocks[data[j].key];\n      return block.end - block.start;\n    });\n    return parentElement.selectAll('.axis').data(axes).enter().append('path').attr('opacity', conf.opacity).attr('class', 'axis').attr('d', axis).attr('stroke-width', function (d, i) {\n      if (i % conf.axes.major.spacing === 0) {\n        return conf.axes.major.thickness;\n      } else {\n        return conf.axes.minor.thickness;\n      }\n    }).attr('stroke', function (d, i) {\n      if (i % conf.axes.major.spacing === 0) {\n        return conf.axes.major.color;\n      } else {\n        return conf.axes.minor.color;\n      }\n    });\n  };\n  this.theta = function (position, block) {\n    return position / block.len * (block.end - block.start);\n  };\n  this.x = function (_this) {\n    return function (d, layout, conf) {\n      var angle, height, r;\n      height = _this.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n      if (conf.direction === 'in') {\n        r = conf.outerRadius - height;\n      } else {\n        r = conf.innerRadius + height;\n      }\n      angle = _this.theta(d.position, layout.blocks[d.block_id]) - Math.PI / 2;\n      return r * Math.cos(angle);\n    };\n  }(this);\n  this.y = function (_this) {\n    return function (d, layout, conf) {\n      var angle, height, r;\n      height = _this.ratio(d.value, conf.cmin, conf.cmax, conf.outerRadius - conf.innerRadius, false, conf.logscale);\n      if (conf.direction === 'in') {\n        r = conf.outerRadius - height;\n      } else {\n        r = conf.innerRadius + height;\n      }\n      angle = _this.theta(d.position, layout.blocks[d.block_id]) - Math.PI / 2;\n      return r * Math.sin(angle);\n    };\n  }(this);\n  this.ratio = function (value, min, max, scope, reverse, logScale) {\n    var fraction, scaleLogBase, x;\n    scaleLogBase = logScale ? 2.3 : 1;\n    if (min === max || value === min && !reverse || value === max && reverse) {\n      return 0;\n    }\n    if (value === max || value === min && reverse) {\n      return scope - 1;\n    }\n    fraction = (value - min) / (max - min);\n    x = Math.exp(1 / scaleLogBase * Math.log(fraction));\n    if (reverse) {\n      x = 1 - x;\n    }\n    return Math.floor(scope * x);\n  };\n  return this;\n};\n_circosJS.renderLayout = function (d3, parentElement, instance) {\n  var block, conf, entry, layout;\n  conf = instance._layout.conf;\n  parentElement.select('.cs-layout').remove();\n  layout = parentElement.append('g').attr('class', 'cs-layout').attr('z-index', conf.zIndex).on('click', conf.onClick);\n  block = layout.selectAll('g').data(instance._layout.data).enter().append('g').attr('class', function (d) {\n    return d.id;\n  }).attr('opacity', conf.opacity);\n  entry = d3.svg.arc().innerRadius(conf.innerRadius).outerRadius(conf.outerRadius).cornerRadius(conf.cornerRadius).startAngle(function (d) {\n    return d.start;\n  }).endAngle(function (d) {\n    return d.end;\n  });\n  block.append('path').attr('d', entry).attr('fill', function (d) {\n    return d.color;\n  }).attr('id', function (d) {\n    return d.id;\n  });\n  if (conf.labels.display) {\n    _circosJS.renderLayoutLabels(conf, d3, block);\n  }\n  if (conf.ticks.display) {\n    return _circosJS.renderLayoutTicks(conf, layout, d3, instance);\n  }\n};\n_circosJS.renderLayoutLabels = function (conf, d3, block) {\n  var label, labelArc, r;\n  r = conf.innerRadius + conf.labels.radialOffset;\n  labelArc = d3.svg.arc().innerRadius(r).outerRadius(r).startAngle(function (d, i) {\n    return d.start;\n  }).endAngle(function (d, i) {\n    return d.end;\n  });\n  block.append('path').attr('fill', 'none').attr('stroke', 'none').attr('d', labelArc).attr('id', function (d) {\n    return 'arc-label' + d.id;\n  });\n  label = block.append('text').attr('font-size', conf.labels.size).attr('text-anchor', 'middle');\n  return label.append('textPath').attr('startOffset', '25%').attr('xlink:href', function (d) {\n    return '#arc-label' + d.id;\n  }).style('fill', conf.labels.color).text(function (d) {\n    var arc_len = d.end - d.start;\n    return d.label.slice(0, Math.floor(21 * arc_len)) + '..';\n  });\n};\n_circosJS.renderLayoutTicks = function (conf, layout, d3, instance) {\n  var blockTicks, displayLabel, ticks;\n  blockTicks = function blockTicks(d) {\n    var k, space;\n    k = (d.end - d.start) / d.len;\n    if (d.end - d.start > 1.57) {\n      space = 8;\n    } else if (d.end - d.start > 0.785) {\n      space = 4;\n    } else if (d.end - d.start > 0.3925) {\n      space = 2;\n    } else if (d.end - d.start > 0) {\n      space = 0;\n    }\n    var arr = [];\n    var item = {\n      angle: 0 * k + d.start,\n      label: 0\n    };\n    arr.push(item);\n    var temp_scale = d3.scale.linear().domain([1, d.len]).range([d.start, d.end]);\n    var len = temp_scale.ticks(space).length;\n    temp_scale.ticks(space).map(function (v, i) {\n      var init = v * k + d.start;\n      var _final = d.len * k + d.start;\n      if (_final - init > 0.5) {}\n      var item = {\n        angle: v * k + d.start,\n        label: v / conf.ticks.labelDenominator + conf.ticks.labelSuffix\n      };\n      arr.push(item);\n    });\n    arr.splice(len, 1);\n    var item = {\n      angle: d.len * k + d.start - 0.006,\n      label: d.len / conf.ticks.labelDenominator + conf.ticks.labelSuffix\n    };\n    arr.push(item);\n    return arr;\n  };\n  displayLabel = function displayLabel(v, i) {\n    if (conf.ticks.labels === false) {\n      return null;\n    } else if (conf.ticks.labelDisplay0 === false && i === 0) {\n      return null;\n    } else if (i % conf.ticks.labelSpacing) {\n      return null;\n    } else if (i === 0) {\n      return v / conf.ticks.labelDenominator; // added support for 0 without suffix.\n    } else {\n      return v / conf.ticks.labelDenominator + conf.ticks.labelSuffix;\n    }\n  };\n  ticks = layout.append('g').selectAll('g').data(instance._layout.data).enter().append('g').selectAll('g').data(blockTicks).enter().append('g').attr('transform', function (d) {\n    return 'rotate(' + (d.angle * 180 / Math.PI - 90) + ')' + 'translate(' + conf.outerRadius + ',0)';\n  });\n  ticks.append('line').attr('x1', 0).attr('y1', 1).attr('x2', function (d, i) {\n    return conf.ticks.size.major;\n  }).attr('y2', 1).style('stroke', conf.ticks.color);\n  return ticks.append('text').attr('x', 8).attr('dy', '.35em').attr('transform', function (d) {\n    if (d.angle > Math.PI) {\n      return 'rotate(180)translate(-16)';\n    } else {\n      return null;\n    }\n  }).attr('text-anchor', function (d) {\n    if (d.angle > Math.PI) {\n      return 'end';\n    } else {\n      return null;\n    }\n  }).attr('font-size', conf.ticks.labelSize).style('fill', conf.ticks.labelColor).text(function (d) {\n    return d.label;\n  });\n};\n_circosJS.Core.prototype.render = function (ids, removeTracks) {\n  var name, ref, ref1, renderAll, svg, track, trackStore, trackType, tracks, translated;\n  if (typeof ids === 'undefined') {\n    renderAll = true;\n    ids = [];\n  }\n  if (removeTracks) {\n    ref = this.tracks;\n    for (trackType in ref) {\n      trackStore = ref[trackType];\n      for (name in trackStore) {\n        track = trackStore[name];\n        svg.select('.' + name).remove();\n      }\n    }\n  }\n  svg = d3.select(this.conf.container).attr('width', this.conf.width).attr('height', this.conf.height);\n  translated = svg.select('.all');\n  if (translated.empty()) {\n    translated = svg.append('g').attr('class', 'all').attr('transform', 'translate(' + parseInt(this.conf.width / 2) + ',' + parseInt(this.conf.height / 2) + ')');\n  }\n  ref1 = this.tracks;\n  for (trackType in ref1) {\n    trackStore = ref1[trackType];\n    for (name in trackStore) {\n      track = trackStore[name];\n      if (renderAll || indexOf.call(ids, name) >= 0) {\n        track.render(this, translated, name);\n      }\n    }\n  }\n  if (renderAll || indexOf.call(ids, 'layout') >= 0) {\n    _circosJS.renderLayout(d3, translated, this);\n  }\n  tracks = svg.selectAll('.all > g').remove();\n  tracks[0].sort(function (a, b) {\n    if (parseInt(a.getAttribute('z-index')) < parseInt(b.getAttribute('z-index'))) {\n      return -1;\n    } else if (parseInt(a.getAttribute('z-index')) > parseInt(b.getAttribute('z-index'))) {\n      return 1;\n    } else {\n      return 0;\n    }\n  });\n  svg.select('.all').selectAll('g').data(tracks[0]).enter().append(function (d) {\n    return d;\n  });\n  return this;\n};\n_circosJS.Core.prototype.defaultConf = {\n  width: 700,\n  height: 700,\n  container: 'circos',\n  defaultTrackWidth: 10\n};\n_circosJS.Layout.prototype.defaultConf = {\n  innerRadius: 250,\n  outerRadius: 300,\n  cornerRadius: 5,\n  gap: 0.04,\n  opacity: 1,\n  labels: {\n    position: 'center',\n    display: true,\n    size: 14,\n    color: '#000',\n    radialOffset: 20\n  },\n  ticks: {\n    display: true,\n    color: 'grey',\n    spacing: 10000000,\n    labels: true,\n    labelSpacing: 10,\n    labelSuffix: 'Mb',\n    labelDenominator: 1000000,\n    labelDisplay0: true,\n    labelSize: 10,\n    labelColor: '#000',\n    labelFont: 'default',\n    majorSpacing: 5,\n    size: {\n      minor: 2,\n      major: 5\n    }\n  },\n  onClick: null,\n  onMouseOver: null,\n  zIndex: 100\n};\n_circosJS.axes = {\n  display: false,\n  minor: {\n    spacing: 5,\n    spacingType: 'pixel',\n    color: '#d3d3d3',\n    thickness: 2\n  },\n  major: {\n    spacing: 5,\n    color: '#000000',\n    thickness: 2\n  }\n};\n_circosJS.Heatmap.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  colorPalette: 'YlGnBu',\n  colorPaletteSize: 9,\n  colorPaletteReverse: false,\n  logScale: false,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Histogram.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  colorPaletteSize: 9,\n  colorPalette: 'YlGnBu',\n  usePalette: true,\n  colorPaletteReverse: false,\n  color: '#fd6a62',\n  logScale: false,\n  axes: _circosJS.axes,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Chord.prototype.defaultConf = {\n  colorPaletteSize: 9,\n  colorPalette: 'PuBuGn',\n  usePalette: true,\n  colorPaletteReverse: false,\n  color: '#fd6a62',\n  opacity: 0.7,\n  min: 'smart',\n  max: 'smart',\n  logScale: false,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  tooltipContent: null\n};\n_circosJS.Scatter.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  logScale: false,\n  glyph: {\n    color: '#fd6a62',\n    fill: true,\n    size: 15,\n    shape: 'circle',\n    strokeColor: '#d3d3d3',\n    strokeWidth: 2\n  },\n  axes: _circosJS.axes,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Line.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  logScale: false,\n  color: '#fd6a62',\n  fill: true,\n  fill_color: '#d3d3d3',\n  thickness: 2,\n  max_gap: 10000000,\n  interpolation: 'linear',\n  axes: _circosJS.axes,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  opacity: 1,\n  tooltipContent: null\n};\n_circosJS.Stack.prototype.defaultConf = (_circosJS$Stack$proto = {\n  innerRadius: 0,\n  outerRadius: 0,\n  colorPaletteSize: 9,\n  colorPalette: 'PuBuGn',\n  usePalette: true,\n  colorPaletteReverse: false,\n  color: '#fd6a62',\n  min: 'smart',\n  max: 'smart',\n  direction: 'out',\n  logScale: false\n}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_circosJS$Stack$proto, \"color\", '#fd6a62'), \"thickness\", 10), \"radialMargin\", 2), \"margin\", 2), \"strokeWidth\", 1), \"strokeColor\", '#000000'), \"axes\", _circosJS.axes), \"rules\", []), \"backgrounds\", []), \"zIndex\", 1), _defineProperty(_defineProperty(_circosJS$Stack$proto, \"opacity\", 1), \"tooltipContent\", null));\n_circosJS.Highlight.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  defaultColor: '#fd6a62',\n  opacity: 0.5,\n  rules: [],\n  zIndex: 101,\n  strokeColor: '#d3d3d3',\n  strokeWidth: 0,\n  tooltipContent: null\n};\n_circosJS.Text.prototype.defaultConf = {\n  innerRadius: 0,\n  outerRadius: 0,\n  rules: [],\n  backgrounds: [],\n  zIndex: 1,\n  style: {},\n  tooltipContent: null\n};\n_circosJS.registerTooltip = function (instance, track, element, trackParams) {\n  track.tip = d3.tip().direction('s').offset([20, 0]).html(trackParams.tooltipContent);\n  element.call(track.tip);\n  track.dispatch.on('mouseover', function (d, i, j) {\n    return track.tip.attr('class', 'd3-tip appear').show(d);\n  });\n  return track.dispatch.on('mouseout', function (d, i, j) {\n    track.tip.attr('class', 'd3-tip').show(d);\n    return track.tip.hide();\n  });\n};\n\n//# sourceURL=webpack://SequenceServer/./public/packages/circosJS@1.7.0.js?");
 
 /***/ }),