https://github.com/higlass/higlass-multivec
Multivec Tracks for Higlass
https://github.com/higlass/higlass-multivec
gehlenborglab higlass visualization
Last synced: 7 months ago
JSON representation
Multivec Tracks for Higlass
- Host: GitHub
- URL: https://github.com/higlass/higlass-multivec
- Owner: higlass
- License: mit
- Created: 2018-04-17T19:55:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T03:13:46.000Z (about 1 year ago)
- Last Synced: 2025-02-26T18:19:33.172Z (7 months ago)
- Topics: gehlenborglab, higlass, visualization
- Language: HTML
- Size: 3.3 MB
- Stars: 7
- Watchers: 8
- Forks: 6
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Multivec Tracks for HiGlass
Display genome-wide multivec tracks in HiGlass!
[](http://higlass.io)
[](https://travis-ci.org/higlass/higlass-multivec)
This is the source code for multivec tracks in HiGlass only; for the rest of HiGlass,
see these repositories:
- HiGlass viewer: https://github.com/hms-dbmi/higlass
- HiGlass server: https://github.com/hms-dbmi/higlass-server
- HiGlass docker: https://github.com/hms-dbmi/higlass-docker
## Installation
```
npm install higlass-multivec
```
## Usage
The live scripts can be found at:
- https://unpkg.com/higlass-multivec/dist/higlass-multivec.min.js
There are three types of tracks to choose from:
```
"basic-multiple-line-chart"
"horizontal-stacked-bar"
"basic-multiple-bar-chart"
```
Configure the track in your view config; you should be all set from here!
```
[...
{
"type": "horizontal-stacked-bar",
"tilesetUid": "my-multivec-db",
"server": "http://test1.resgen.io/api/v1",
"height": 200,
"width": 470,
"options": {
"labelPosition": "topLeft",
"labelColor": "black",
"labelTextOpacity": 0.4,
"valueScaling": "exponential",
"trackBorderWidth": 0,
"trackBorderColor": "black",
"heatmapValueScaling": "log",
"name": "all.KL.bed.multires.mv5",
"scaledHeight": true,
"backgroundColor": "white",
"sortLargestOnTop": true,
},
},
]
```
For an example, see [`src/index.html`](src/index.html).
### ECMAScript Modules (ESM)
We also build out ES modules for usage by applications who may need to import or use `higlass-multivec` as a component.
Whenever have a statement such as the following, assuming `higlass-multivec` is in your node_modules folder:
```javascript
import { StackedBarTrack } from 'higlass-multivec';
```
Then StackedBarTrack would automatically be imported from the `./es` directory (set via package.json's `"module"` value). Can also import component(s) directly, especially if only need to use one or two, e.g.:
```javascript
import { StackedBarTrack } from 'higlass-multivec/es/StackedBarTrack';
```
To use this then along with HiGlassComponent, assuming you are developing with React either in an environment where `window` is available (client-side), use via the following:
```javascript
import React from 'react';
import { StackedBarTrack } from 'higlass-multivec/es/StackedBarTrack';
import { HiGlassComponent } from 'higlass/dist/hglib';
import { default as higlassRegister } from 'higlass-register';
// Call this sometime before we render out MyComponent below (synchronous)
higlassRegister({
name: 'StackedBarTrack',
track: StackedBarTrack,
config: StackedBarTrack.config,
})
...
function MyComponent(props){
const { viewConfig, options, width, height, ...otherProps } = props;
return (
);
}
MyComponent.defaultProps = { ... };
ReactDOM.render(
,
document.getElementById("root")
);
```
#### Minor Background Info
- https://dev.to/bennypowers/you-should-be-using-esm-kn3
- https://nodejs.org/api/esm.html#esm_introduction
## Development
### Testing
To run the test suite:
```
npm run test-watch
```
### Installation
```bash
$ git clone https://github.com/hms-dbmi/higlass-multivec.git
$ cd higlass-multivec
$ npm install
```
If you have a local copy of higlass, you can then run this command in the higlass-multivec directory:
```bash
npm link higlass
```
### Commands
- **Developmental server**: `npm start`
- **Production build**: `npm run build`