{"id":13590120,"url":"https://github.com/DECIPHER-genomics/Genoverse","last_synced_at":"2025-04-08T12:32:44.867Z","repository":{"id":2029276,"uuid":"2965710","full_name":"DECIPHER-genomics/Genoverse","owner":"DECIPHER-genomics","description":"HTML5 scrollable genome browser","archived":false,"fork":false,"pushed_at":"2023-10-17T19:50:29.000Z","size":16038,"stargazers_count":105,"open_issues_count":6,"forks_count":44,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-05-21T22:13:06.395Z","etag":null,"topics":["genome","visualisation"],"latest_commit_sha":null,"homepage":"https://genoverse.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DECIPHER-genomics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.TXT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2011-12-12T16:47:56.000Z","updated_at":"2024-05-21T22:13:06.396Z","dependencies_parsed_at":"2023-09-05T20:55:10.746Z","dependency_job_id":"18f239e7-a66a-47d5-bfb4-9929f1bf4549","html_url":"https://github.com/DECIPHER-genomics/Genoverse","commit_stats":{"total_commits":1099,"total_committers":12,"mean_commits":91.58333333333333,"dds":0.5714285714285714,"last_synced_commit":"5623d721e62e38d6ee022c1f2799797312526930"},"previous_names":["wtsi-web/genoverse","wtsi-decipher-grp/genoverse"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DECIPHER-genomics%2FGenoverse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DECIPHER-genomics%2FGenoverse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DECIPHER-genomics%2FGenoverse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DECIPHER-genomics%2FGenoverse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DECIPHER-genomics","download_url":"https://codeload.github.com/DECIPHER-genomics/Genoverse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247842971,"owners_count":21005377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["genome","visualisation"],"created_at":"2024-08-01T16:00:39.679Z","updated_at":"2025-04-08T12:32:39.857Z","avatar_url":"https://github.com/DECIPHER-genomics.png","language":"JavaScript","funding_links":[],"categories":["General"],"sub_categories":[],"readme":"# Genoverse [![Build Status](https://github.com/DECIPHER-genomics/Genoverse/actions/workflows/test.yml/badge.svg)](https://github.com/DECIPHER-genomics/Genoverse/actions)\n\nGenoverse is a portable, customizable, back-end independent JavaScript and HTML5 based genome browser which allows the user to explore data in a dynamic and interactive manner.\n\nData is visualized in the browser, meaning Genoverse can be installed on any website and show data from a wide range of online or local sources.\n\nGenoverse works with a variety of formats, such as JSON, BED, BAM, VCF, GFF, delimited text files, or XML, and can be customized to parse and display any data source as required.\n\nGenoverse works using a system of [tracks](https://github.com/DECIPHER-genomics/Genoverse/wiki/Tracks) - essentially horizontal sections of the genome browser which display [features](https://github.com/DECIPHER-genomics/Genoverse/wiki/Features) - genes, variants, etc. with defined genomic start and end points. Each track has its own data set stored in a [model](https://github.com/DECIPHER-genomics/Genoverse/wiki/Genoverse.Track.Model-functions), a method for displaying that data, stored in a [view](https://github.com/DECIPHER-genomics/Genoverse/wiki/Genoverse.Track.View-functions), and a [controller](https://github.com/DECIPHER-genomics/Genoverse/wiki/Genoverse.Track.Controller-functions) to manage the creation of DOM elements, and user interactions with them.\n\nTracks can have multiple models and views, which allows for switching between displays at different zoom levels. An example of this would be a track where you show genes when looking at a large region of a chromosome, and then switch to showing transcripts as the user zooms in.\n\nIn addition to this, Genoverse has a set of [plugins](https://github.com/DECIPHER-genomics/Genoverse/wiki/Plugins), which allow additional functionality beyond the core genome browser. These include a control panel for adding and removing tracks, and interacting with the browser more easily, a way to add controls to each individual track, and a way to enable drag and drop of local data files onto the genome browser.\n\n## Installation\n\nInstall from npm\n```sh\nyarn add genoverse\n```\n\n### Basic embedding\n\nEmbed Genoverse using\n```html\n\u003cscript src=\"/path/to/genoverse/dist/genoverse.js\"\u003e\u003c/script\u003e\n```\n\nAdd a script tag or JavaScript file which initializes Genoverse, e.g.\n```html\n\u003cscript\u003e\n  const genoverse = new Genoverse({ ... configuration ... });\n\u003c/script\u003e\n```\n\nOnce initalized, the instance of Genoverse is avaliable as a jQuery data attribute on the container DOM element, and can be accessed by\n```javascript\nconst genoverse = Genoverse.jQuery(container).data('genoverse');\n```\n\n### Build options\n\nBy default, the Genoverse distribution in created with [Babel](https://babeljs.io/) and certain [polyfills](https://github.com/zloirock/core-js/blob/master/README.md), in order to support old web browsers like Internet Explorer 11.\n\nIf you want to create your own distribution bundle, see `devDependencies` in [package.json](https://github.com/DECIPHER-genomics/Genoverse/blob/master/package.json) for Webpack/Babel packages you need to install in order to be able to do so.\n\nOnce these dependencies are installed, distributions can be built with [webpack-cli](https://webpack.js.org/api/cli/).\n\nPolyfills can be disabled, either with\n```sh\nyarn webpack --env no-polyfills\n```\nwhich still uses Babel to create ES5-compatible code, but doesn't include the polyfills (useful if the page already includes polyfills), or with\n```\nyarn webpack --env modern\n```\nwhich does not transpile to ES5-compatible code or include polyfills, and thus will not work in old browsers at all.\n\nAdditionally, you can set the [webpack `output.publicPath`](https://webpack.js.org/configuration/output/#outputpublicpath) with\n```\nyarn webpack --env public-path=/public/path/to/genoverse\n```\nThis is necessary if `/path/to/genoverse/dist` is not your webserver's root directory for static files.\n\nThis option can be combined with `--env no-polyfills` or `--env modern`, e.g.\n```\nyarn webpack --env modern --env public-path=/public/path/to/genoverse\n```\n\n### Importing into other webpack-bundled code\n\nYou can use webpack's [`import`](https://webpack.js.org/guides/ecma-script-modules/#importing) keyword to import Genoverse's source code into another application, without needing to build a distribution (or installing any additional packages):\n\n```js\n// static import\nimport Genoverse from 'genoverse';\n\n// dynamic import, useful if you need to avoid server-side importing Genoverse,\n// which doesn't work because it depends on `window`\nconst Genoverse = await import('genoverse').then(module =\u003e module.default);\n```\n\n### Using `Genoverse.configure()`\n\nThe Genoverse class provides a `configure` function which allows you to change what code will be imported. This function is run automatically when an instance of Genoverse is constructed, but can also be called manually - only the first execution will have any affect.\n\nThe default arguments are as follows:\n```js\nGenoverse.configure({\n  tracks      : {},    // see below\n  plugins     : {},    // see below\n  genomes     : {},    // see below\n  css         : true,  // if true, Genoverse's css file will by dynamically imported\n  fontawesome : true,  // if true, fontawesome 6 will be dynamically imported. Set to false if fontawesome is already in use on the page\n  force       : false, // if true, configuration is updated according to the other arguments\n});\n```\n\n```js\ntracks: {\n  // A list of tracks, controllers, models, or views which you don't want to appear in the Genoverse.Track namespace.\n  // Note: this does not stop files containing excluded code from being present in the webpack bundle.\n  exclude: [\n    // The code in src/js/Track/Model/Transcript/Ensembl.js will not be present as Genoverse.Track.Model.Transcript.Ensembl\n    'Model.Transcript.Ensembl',\n\n    // The code in src/js/Track/View/Sequence/Variation.js will not be present as Genoverse.Track.View.Sequence.Variation\n    'View/Sequence/Variation',\n\n    // The code in src/js/Track/library/Gene.js will not be present as Genoverse.Track.Gene\n    'Gene',\n\n    // The code in src/js/Track/library/dbSNP.js will not be present as Genoverse.Track.dbSNP\n    'library/dbSNP',\n\n    ...\n  ],\n\n  // A webpack `require.context` for a folder containing custom track definitions.\n  // This folder must be structured in the same way as src/js/Track, i.e. with some/or of the sub-folders Controller, Model, View, library\n  include: require.context('/path/to/custom/tracks/folder', true, /\\.js$/),\n}\n```\n\n```js\nplugins: {\n  // A webpack `require.context` for a folder containing custom plugins.\n  include: require.context('/path/to/custom/plugins/folder', true, /\\.js$/),\n}\n```\n\n```js\ngenomes: {\n  // A webpack `require.context` for a folder containing custom genome definitions.\n  // The human genomes GRCh37 and GRCh38 are included in the Genoverse repo, and imported dynamically if needed (see src/js/genomes).\n  // Additional genomes can be loaded with the following option, or by using new Genoverse({ ... genome: aGenomeDefinitionObject ... })\n  include: require.context('/path/to/custom/genomes/folder', true, /\\.js$/),\n}\n```\n\nBefore `Genoverse.configure` is executed, `Genoverse.Track`, `Genoverse.Track.Controller`, `Genoverse.Track.Model`, and `Genoverse.Track.View` all exist, but none of their children (i.e. `Genoverse.Track.Foo`) will.\n\nBecause of this, if you want to use track classes as options in `new Genoverse()`, you need to call `Genoverse.configure()` first, i.e.\n\n```js\nGenoverse.configure({ ... });\n\nnew Genoverse({\n  ...\n  tracks: [\n    Genoverse.Track.Foo,\n    Genoverse.Track.Bar.extend({ foo: false, bar: true, ... }),\n    Genoverse.Track.extend({\n      controller : Genoverse.Track.Controller.Foo,\n      model      : Genoverse.Track.Model.Foo.extend({ foo: true }),\n      view       : Genoverse.Track.View.Foo.Bar,\n    }),\n  ]\n});\n```\n\nAlternatively, you can do the following without having to call `Genoverse.configure()` first:\n\n```js\nnew Genoverse({\n  ...\n  tracks: [\n    'Foo',                                     // -\u003e Genoverse.Track.Foo\n    [ 'Foo' ],                                 // -\u003e Genoverse.Track.Foo\n    [ 'Bar', { foo: false, bar: true, ... } ], // -\u003e Genoverse.Track.Bar.extend({ foo: false, bar: true, ... })\n    {                                          // -\u003e Genoverse.Track.extend({\n      foo        : false,                      // -\u003e   foo        : false,\n      bar        : false,                      // -\u003e   bar        : false,\n      controller : [ 'Foo' ],                  // -\u003e   controller : Genoverse.Track.Controller.Foo,\n      model      : [ 'Foo', { foo: true }],    // -\u003e   model      : Genoverse.Track.Model.Foo.extend({ foo: true }),\n      view       : 'Foo.Bar',                  // -\u003e   view       : Genoverse.Track.View.Foo.Bar,\n    }                                          // -\u003e })\n  ]\n});\n```\n\nSee [index.html](https://github.com/DECIPHER-genomics/Genoverse/blob/master/index.html) for example configuration, or the [documentation](https://github.com/DECIPHER-genomics/Genoverse/wiki/Genoverse-configuration) for more details about configuration properties.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDECIPHER-genomics%2FGenoverse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDECIPHER-genomics%2FGenoverse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDECIPHER-genomics%2FGenoverse/lists"}