A collection of tracks for viewing image data in 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
.npmignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
teaser.jpg
webpack.config.js

README.md

HiGlass Image

A collection of tracks for viewing image data in HiGlass

HiGlass Demo Build Status

HiGlass showing

HiGlass in dark mode showing a beautiful gigapixel image of Rio de Janeiro by The Rio de Janeiro - Hong Kong Connection

Live Demo: http://higlass-image.lekschas.de

Note: This is the source code for image tracks only! You might want to check out the following repositories as well:

Installation

npm install higlass-image

Usage

Note: We assume that you have create and ingested a SQLite-based image tileset database. If you're asking yourself "what the fu*! are they talking about" please check out our image tiles to SQLite converter.

  1. Make sure you load this track prior to hglib.js. For example:
<script src="higlass-image.js"></script>
<script src="hglib.js"></script>
<script>
  ...
</script>
  1. Configure the track in the view config.
{
  ...
  center: [
    {
      uid: 'c1',
      type: 'combined',
      options: {},
      contents: [
        {
          uid: 'my-fancy-tiled-image',
          type: 'image-tiles',
          server: 'http://localhost:8001/api/v1/',
          tilesetUid: 'my-fancy-tiled-image',
          options: {
            name: 'My fancy tiled image'
          }
        },
      ],
    },
  ],
  ...
}

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

  1. You did it! We're so proud of you 🎉. You are truly the best!

Development

Installation

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

Commands

Developmental server: npm start Production build: npm run build