mapexplorer-core

MapExplorer Core

Core library for building Map Explorer components

Installation

Browser

<!-- Polyfill for browser compatibility -->
<script src="https://libs.stratumn.com/babel-polyfill.min.js"></script>
<!-- Actual Library -->
<script src="https://libs.stratumn.com/mapexplorer-core.min.js"></script>

If you want a specific version, include https://libs.stratumn.com/mapexplorer-core-{version}.min.js instead (for instance https://libs.stratumn.com/mapexplorer-core-0.4.1.min.js).

Node.js

$ npm install mapexplorer-core

var MapexplorerCore = require('mapexplorer-core');

Bower

$ bower install mapexplorer-core

Usage

Display a map explorer

const builder = new MapexplorerCore.ChainTreeBuilder(element, options);

// with an application and a mapId
builder.build({
  id: myMapId,
  application: myApplication
});

// with a chainscript (JSON string of array of segment as POJO)
builder.build({
  chainscript: myChainscript
});

Available options

withArgs

Default: false

Display action arguments on the paths between segments.

duration

Default: 750

Transition duration

verticalSpacing

Default: 1.2

Vertical space factor between segment polygon

getSegmentText(node)

Default:  node => compactHash(node.data.meta.linkHash)

Function that returns the text displayed on a segment.

getLinkText(node)

Default: 
  function(node) {
    return node.target.data.link.meta.action +
        (this.withArgs ? `(${node.target.data.link.meta.arguments.join(', ')})` : '');
  }

Function that return the text displayed on a path between segments.

onclick(data)

Default: noop

onTag(tag)

Default: noop

Hook that is called when a segment is tagged

Event handler called when the user clicks on a segment.

Display a merkle path tree

const merklePathTree = new MapexplorerCore.MerklePathTree(element);
merklePathTree.display(merklePath);

where merklePath looks like:

[
    {
      "left": "14b9468d3b8ca51b45e27ecddc5875a48902a74d1182fed9693c1531dfcfd56c",
      "right": "d15e1460234292852400271530be35cabe822eae5a4ed3376728d5acbbf04f27",
      "parent": "3bfbc00bfe7aa149e17029e8bb08671636c1c1c16aa5addfc307d6c937134620"
    },
    {
      "left": "3bfbc00bfe7aa149e17029e8bb08671636c1c1c16aa5addfc307d6c937134620",
      "right": "9fd68d3335eabcad5777b4c717af6de3c51f4aa0af72c26aaf866cde176c96f1",
      "parent": "8f16bfbe247be6ca881f3d9e462bc154f099298e26cd53662ef7119e1e60a887"
    },
    ...
]

Validate a chainscript

new MapexplorerCore.ChainValidator(JSON.parse(chainscript)).validate()

Returns a Promise that resolves to an error object such as:

{
      linkHash: [Promise, ...],
      stateHash: [Promise, ...],
      merklePath: [Promise, ...],
      fossil: [Promise, ...]
}

Each promise, in each array of each category resolves to an error string if an inconsistency has been detected. It resolves to null otherwise.

Errors can be retrieved with (for instance):

Promise.all(errors.linkHash).
  then(err => err.filter(Boolean));

Development

Install dependencies:

$ npm install

Build:

$ npm run build:all

Test:

$ npm test

Lint:

$ npm run lint

Lint and test:

$ npm run check

Bump version:

$ npm version major|minor|patch

Publish:

$ npm publish