Guide Picker
Guide Picker is an open source online tool available at DeskGen platform allowing visualisation and rapid comparison of gRNAs in coding regions of the human genome (GRCh38.81). This repository concerns the graphic component (scatterplots) used in the online tool. Learn more about Guide Picker.
Install
npm install guide-picker --save
Get Started
Guide Picker is written using ES6 modules and can be imported directly into your ES6 application
import GuidePicker from 'guide-picker'
or using Node
var guidePicker = require('guide-picker')
Once successfully loaded, Guide Picker needs to be instantiated passing in options
parameter
var options = {
layout: {
target: document.querySelector('.guide-picker'),
width: document.querySelector('.guide-picker').offsetWidth,
height: window.innerHeight,
margin: { top: 40, right: 80, bottom: 60, left: 60 }
},
axes: {
x: {
name: 'Percent Peptide',
path: 'scores.site.percent_peptide.value',
round: true,
},
y: {
name: 'Representation',
path: 'scores.site.representation.value',
round: true,
}
},
tools: {
force: true
}
}
var guidePicker = new guidePicker.GuidePicker(options)
And the draw
method called with data
guidePicker.draw(data)
The DeskGen RPC API can be used to query any gene in the human genome (GRCh38.81). Alternatively, you can use your own data, as Guide Picker is fairly data model agnostic. As along as data
is an array of objects, you only need to supply a path to x and y coordinates in options.axes.x.path
and options.axes.y.path
(see options
object above).
Guide Picker emits two kinds of events: filter
and select
. You can use these events to integrated it into your own application or make multiple Guide Picker components work together
document.querySelector('#guide-picker-1').addEventListener('select', e => {
guidePicker2.config.selected = new Set(e.detail);
guidePicker2.config.styleSelected();
})
document.querySelector('#guide-picker-2').addEventListener('select', e => {
guidePicker1.config.selected = new Set(e.detail);
guidePicker1.config.styleSelected();
})
Example
For a working example, clone the repository and run
npm install
npm run build
npm run build-test
In your browser, navigate to one of the two files
file:///Users/.../open-guide-picker/test/guide-picker/guide-picker.html
file:///Users/.../open-guide-picker/test/guide-picker/multi-picker.html