@oncojs/lolliplot
v0.10.2
Published
A protein viewer built with d3
Downloads
11
Readme
Protein Lolliplot :lollipop: :bar_chart:
Visualization to view relationship between common mutations and their location on a gene.
IMPORTANT: This library does NOT provide its own d3
object
You must pass in d3
to the constructor function. Currently tested with v3 and v4.
Usage
This library exports a top level constructor function which generates the chart, and a redux store creation function in case you want to set some default store values before the chart function runs. That is optional though, as the default store will be returned from the constructor.
import ProteinLolliplot, { setupStore } from '@oncojs/lolliplot'
let store = setupStore({ domainWidth: 200 })
store.subscribe(() => {
let state = store.getState()
// listen for changes
})
let = {
reset,
updateStats,
draw,
remove,
store: defaultStore,
} = ProteinLolliplot(args)
API
type TProteinLolliplotArgs = {
d3: Object,
selector: string,
element: Object,
data: Object,
domainWidth: number,
width: number,
height: number,
store?: Object,
hideStats?: bool,
animate?: bool,
selectedMutationClass?: string,
mutationId?: string,
yAxisOffset?: number,
xAxisOffset?: number,
proteinHeight?: number,
numXTicks?: number,
numYTicks?: number,
proteinDb?: string,
onMutationClick?: Function,
onMutationMouseover?: Function,
onMutationMouseout?: Function,
onProteinMouseover?: Function,
onProteinMouseout?: Function,
onInit?: Function,
}
type TProteinLolliplotReturn = {
reset: Function,
updateStats: Function,
draw: Function,
remove: Function,
store: Object,
}
Constructor Arguments
d3
: Your supplied d3
object (v3 || v4). Required!
selector
: the selector of the element to attach the chart to
element
: the element which the viz will attach to. takes precedence over selector
One of selector
or element
is required!
data
: an object containing an array of proteins and an array of mutations Required!
domainWidth
: The amino acid length of the transcript
width (optional)
: width of the chart
height (optional)
: height of the chart
store (optional)
: the redux store created by setupStore
hideStats (optional)
: if true
, do not display the summary box next of the chart
animate (optional)
: animate the view to the new zoom area. defaults to true
selectedMutationClass (optional)
: sets the default filter on the mutation class (Consequence, Impact, etc)
mutationId (optional)
: will highlight the mutation matching this id
yAxisOffset (optional)
: The padding between the left side of the chart and the y axis
xAxisOffset (optional)
: The padding between the bottom of the chart and the x axis
proteinHeight (optional)
: The height of the protein row under the main chart
onInit (optional)
: will run once everything has been setup
Mouse events
Receive (data, event)
as arguments.
onMutationClick (optional)
onMutationMouseover (optional)
onMutationMouseout (optional)
onProteinMouseover (optional)
onProteinMouseout (optional)
Returned Object
reset
: Sets the most zoomed out position, and resets any filter options
updateStats
: Force the stats to update itself based on the current chart zoom level
draw
: Re-renders the chart (will call recursively while store.getState().animating === true
)
remove
: Removes the chart from the DOM and any event handlers created during setup
store
: The redux store passed in during creation, or the default one if not
Development
Install / Run Dev Server
yarn && yarn start
Then go to http://localhost:8080/