https://github.com/flekschas/higlass-labeled-annotation

Labeled Annotation Track for HiGlass
https://github.com/flekschas/higlass-labeled-annotation

annotations higlass image labeling

Last synced: about 1 month ago
JSON representation

Labeled Annotation Track for HiGlass

• Host: GitHub
• URL: https://github.com/flekschas/higlass-labeled-annotation
• Owner: flekschas
• License: mit
• Created: 2018-04-21T00:16:50.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-04T22:40:32.000Z (almost 7 years ago)
• Last Synced: 2025-06-27T08:54:25.667Z (4 months ago)
• Topics: annotations, higlass, image, labeling
• Language: JavaScript
• Homepage: http://higlass-labeled-annotation.lekschas.de/
• Size: 1.23 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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](https://img.shields.io/badge/higlass-i_am_in_love-red.svg?colorB=ee82ee)](http://higlass.io)

[![npm version](https://img.shields.io/npm/v/higlass-labeled-annotation.svg)](https://www.npmjs.com/package/higlass-labeled-annotation)

[![build status](https://img.shields.io/travis/flekschas/higlass-scalable-insets/master.svg?colorB=ffa500)](https://travis-ci.org/flekschas/higlass-labeled-annotation)

[![demo](https://img.shields.io/badge/demo-awesome-red.svg?colorB=3cb371)](http://higlass-labeled-annotation.lekschas.de/)

[![code style prettier](https://img.shields.io/badge/code_style-prettier-80a1ff.svg)](https://github.com/prettier/prettier)

![HiGlass with a labeled annotation](/teaser.jpg?raw=true "Look at that wonderful labeled annotation. Isn't it a beauty?")

**Live Demo:** [http://higlass-labeled-annotation.lekschas.de](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:

- HiGlass viewer: https://github.com/hms-dbmi/higlass

- HiGlass server: https://github.com/hms-dbmi/higlass-server

## Installation

```

npm install higlass-scalable-insets

```

## Usage

1. Make sure you load this track prior to `hglib.js`. For example:

```

  ...

```

2. 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`](src/index.html) for an example.

## Development

### Installation

```bash

$ 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`