higlass-multivec
v0.3.3
Published
Multivec Tracks for HiGlass
Downloads
255
Readme
Multivec Tracks for HiGlass
Display genome-wide multivec tracks in HiGlass!
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
.
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:
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.:
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:
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 (
<div className="container">
<HiGlassComponent {...{ viewConfig, options, width, height }} />
</div>
);
}
MyComponent.defaultProps = { ... };
ReactDOM.render(
<MyComponent {...someData} />,
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
$ 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:
npm link higlass
Commands
- Developmental server:
npm start
- Production build:
npm run build