Nervously Practice Multithreading
Miss any of our Open RFC calls?Watch the recordings here! »


0.0.5 • Public • Published


npm (scoped) npm bundle size (minified)

nb-dispatch is a cross-domain event dispatcher for Nucleome Platform.

if user install our chrome extension Nucleome Bridge, nb-dispatch will use Nucleome Bridge to send event emittion between tabs from multiple domains, otherwise, it will use web browser's BroadCast Channel to send event emittion between tabs within the same domain.

Our Web Application Nucleome Browser is connected with nb-dispatch.


For using npm,

import {dispatch} from "@nucleome/nb-dispatch";

For using nb-dispatch library in a webpage,

<script src=""></script>
var c = nb.dispatch("update","brush");
    //add your code callback.

Quick Examples

Connect to cross-tab channel and check connection status.

var c = nb.dispatch("update","brush")
var callback = function(status){

Listen to events in all dispatch connected tabs.

//receive message from nucleome bridge or BroadCast dispatchnel.
  //Add your code (user navigate to these genome coordinates in other tab, respond accordingly )
  //register multiple listeners as d3-dispatch
  //Add your other code (user navigate to these genome coordinates in other tab, respond accordingly )
  //Add your code  (user brush these genome coordinates in other tab, respond accordingly )

Emit events to all dispatch connected tabs.

var regions = [{genome:"hg38",chr:"chr1",start:1,end:10000, color: "#336289" },{genome:"hg38",chr:"chr2",start:1,end:1000}]"update",this,regions)"brush",this,regions)

Test your code with CodePen or JSFiddle

Nucleome Bridge now support connection with Codepen and JSFiddle. Here is a collection of examples in Codepen and a collection of example in JSfiddle.

Connect your web page with Nucleome Bridge

Nucleome Bridge now support communication with UCSC Genome Browser and WashU EpiGenome Browser.

Due to the web safety reason, any web sites which want to connect with Nucleome Bridge needs to satisfty the pattern specify in Nucleome Bridge manifest.json file.

Currently, any local website, whose IP address is such as *://*/*, is connectable with Nucleome Bridge.

For user sharing their web pages,* is also connectable with Nucleome Bridge. User can share their web page in this website by submit their code to gist. For futhur information. Please read this webpage. We also have some demos in, here is the link.

If you want to your website can be connectable with Nucleome Bridge, Please contact us.

Communication code

Currently, standard communication code

event name: update and brush.
pass data: regions = [region... ]
           region format {genome:string,chr:string,start:int,end:int, color:color}
           color is optional

Start and end is defined as same as bed format. Start is 0-index. and end is not included in this region.

API Reference

nb-dispatch has the same initialize method and the same function interface "on" and "call" as d3-dispatch.

# nb.dispatch(types…) <>

Creates a new dispatch for the specified event types. Each type is a string, such as "update" or "brush".

# dispatch.on(typenames[, callback])

Adds, removes or gets the callback for the specified typenames. If a callback function is specified, it is registered for the specified (fully-qualified) typenames. If a callback was already registered for the given typenames, the existing callback is removed before the new callback is added.

The specified typenames is a string, such as start or The type may be optionally followed by a period (.) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as and To specify multiple typenames, separate typenames with spaces, such as update brush or

To remove a callback with, say dispatch.on("", null).

#[, that[, arguments…]])

Like, invokes each registered callback for the specified type, passing the callback the specified arguments, with that as the this context.

The following is nb-dispatch functions for communication channels which is different from d3-dispatch.

# dispatch.connect(callback)

connect Nucleome Bridge or BroadCast Channel

# dispatch.disconnect()

disconnect Nucleome Bridge or BroadCast Channel

# dispatch.status()

check connect channel status ( dispatch.status().connection is one of "Extension","None","Channel" )

# dispatch.chanId(channelName)

set connect channel id , use before connect. if no arguments, get current channel id. default channel id : "cnbChan01"


npm i @nucleome/nb-dispatch

DownloadsWeekly Downloads






Unpacked Size

32.5 kB

Total Files


Last publish


  • avatar