Labeled Annotation Track for HiGlass
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.huskyrc
.lintstagedrc
.npmignore
.prettierrc
.stylelintrc
.travis.yml
LICENSE
README.md
globals.js
package-lock.json
package.json
teaser.jpg
webpack.config.js

README.md

Labeled Annotation Track for HiGlass

An annotation track with a beautiful white outline and a carefully crafted text label that will make your gorgeous annotations shine!

higlass npm version build status demo code style prettier

HiGlass with a labeled annotation

Live Demo: http://higlass-labeled-annotation.lekschas.de

Note: This is the source code for labeled annotation track. You might want to check out HiGlass core repositories too:

Installation

npm install higlass-scalable-insets

Usage

  1. Make sure you load this track prior to hglib.js. For example:
<script src="higlass-labeled-annotation.js"></script>
<script src="hglib.js"></script>
<script>
  ...
</script>
  1. Configure the track in the view config.
{
  ...,
  tracks: {
    center: [
      {
        type: 'labeled-annotations',
        options: {
          regions: [
            [
              100, 200,
              100, 200,
              'rgba(0, 0, 0, 0)',
              'fuchsia',
              10, 10,
              'Super'
            ],
            [
              300, 400
              100, 200,
              'rgba(0, 0, 0, 0)',
              'orange',
              10, 10,
              'cool'
            ],
          ]
        },
      },
      ...
    ]
  }
}

Take a look at src/index.html for an example.

Development

Installation

$ git clone https://github.com/flekschas/higlass-labeled-annotation && higlass-labeled-annotation
$ npm install

Commands

Developmental server: npm start

Production build: npm run build

Prerelease build: npm run prerelease