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

@nucleome/nb-dispatch

0.0.5 • Public • Published

@nucleome/nb-dispatch

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.

Installing

For using npm,

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

For using nb-dispatch library in a webpage,

<script src="https://unpkg.com/@nucleome/nb-dispatch"></script>
<script>
var c = nb.dispatch("update","brush");
c.connect(function(status){
    //add your code callback.
});
 
</script> 
 

Quick Examples

Connect to cross-tab channel and check connection status.

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

Listen to events in all dispatch connected tabs.

//receive message from nucleome bridge or BroadCast dispatchnel.
 
c.on("update",function(d){
  //Add your code (user navigate to these genome coordinates in other tab, respond accordingly )
})
c.on("update.anything",function(d){
  //register multiple listeners as d3-dispatch
  //Add your other code (user navigate to these genome coordinates in other tab, respond accordingly )
})
c.on("brush",function(d){
  //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}]
 
c.call("update",this,regions)
 
c.call("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 *://127.0.0.1:*/*, is connectable with Nucleome Bridge.

For user sharing their web pages, https://bl.ocks.org/* 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 bl.ocks.org, 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 end.foo. 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 update.foo and update.bar. To specify multiple typenames, separate typenames with spaces, such as update brush or update.foo brush.bar.

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

# dispatch.call(type[, that[, arguments…]])

Like function.call, 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"

Install

npm i @nucleome/nb-dispatch

DownloadsWeekly Downloads

3

Version

0.0.5

License

BSD-3-Clause

Unpacked Size

32.5 kB

Total Files

11

Last publish

Collaborators

  • avatar