react-sigma
Version:
Lightweight but powerful library for drawing network graphs built on top of SigmaJS
205 lines (182 loc) • 6.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _tools = require("./tools");
require("../sigma/main");
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/**
*
* Sigma - React.JS flow-typed interface for Sigma js library - fastest opensource rendering engine for network graphs.
* Sigma makes it easy to publish networks on Web pages, and allows developers to integrate network exploration in
* rich Web applications.
*
* Parameter types
* ```
* type Sigma$Graph$Data = {
* nodes: [Sigma$Node],
* edges: [Sigma$Edge]
* };
*
* type Sigma$Node = {
* id: string,
* label?: string,
* x?: number,
* y?: number,
* size?: number,
* color?: color
* };
*
* type Sigma$Edge = {
* id: string,
* source: string,
* target: string,
* label?: string,
* color?: color
* };
* ```
*
*
* @signature `<Sigma graph={graph} settings={settings} onClickNode={func}.../>`
*
* @param {CSS} style CSS style description for main div holding graph, should be specified in React format
* @param {Sigma$Settings} settings js object with sigma initialization options, for full list see [sigma settings page](https://github.com/jacomyal/sigma.js/wiki/Settings)
* @param {string} renderer can be "webgl" or "canvas"
* @param {Sigma$Graph$Data} graph js object with array of nodes and edges used to initialize sigma
* @param {Sigma$ErrorHandler} onSigmaException set sigma callback for sigma exceptions / errors
* @param {Sigma$EventHandler} onClickNode set sigma callback for "clickNode" event (see below)
* @param {Sigma$EventHandler} onOverNode set sigma callback for "overNode" event
* @param {Sigma$EventHandler} onOutNode set sigma callback for "outNode" event
* @param {Sigma$EventHandler} onClickEdge set sigma callback for "clickEdge" event
* @param {Sigma$EventHandler} onOverEdge set sigma callback for "overEdge" event
* @param {Sigma$EventHandler} onOutEdge set sigma callback for "outEdge" event
*
* @example
* Can be composed with sigma sub-components using JSX syntax
* <Sigma renderer="webgl" style={{maxWidth:"inherit", height:"400px"}}
* settings={{drawEdges:false}}
* onOverNode={e => console.log("Mouse over node: " + e.data.node.label)}>
* graph={{nodes:["id0", "id1"], edges:[{id:"e0",source:"id0",target:"id1"}]}}>
* <RelativeSize initialSize={8}/>
* </Sigma>
*
*/
class Sigma extends _react.default.Component {
constructor(props) {
super(props);
_defineProperty(this, "initRenderer", container => {
if (container) {
let options = {
container
};
if (this.props.renderer) options.type = this.props.renderer;
this.sigmaRenderer = this.sigma.addRenderer(options);
this.sigma.refresh();
this.setState({
renderer: true
});
} else if (this.sigmaRenderer) {
this.sigma.killRenderer(this.sigmaRenderer);
this.sigmaRenderer = null;
this.setState({
renderer: false
});
}
});
this.state = {
renderer: false
};
let settings = this.props.settings ? this.props.settings : {};
this.sigma = new sigma({
settings
});
if (CustomShapes) CustomShapes.init(this.sigma);
Sigma.bindHandlers(this.props, this.sigma);
if (this.props.graph) {
try {
this.sigma.graph.read(this.props.graph);
} catch (e) {
if (this.props.onSigmaException) this.props.onSigmaException(e);
}
}
}
componentWillUnmount() {
this.sigma.kill();
this.sigmaRenderer = null;
}
render() {
let children = this.state.renderer ? (0, _tools.embedProps)(this.props.children, {
sigma: this.sigma
}) : null;
return /*#__PURE__*/_react.default.createElement("div", {
ref: this.initRenderer,
style: this.props.style
}, children);
}
/**
Initialize event handlers with sigma.
Event handler function receives [Sigma Event](https://github.com/jacomyal/sigma.js/wiki/Events-API)
with the structure of following type:
```
type Sigma$Event = {
data: {
node?: Neo4j$Node, //for node events is sigma node data
edge?: Neo4j$Edge, //for edge events is sigma edge data
captor: { // information about event handler, for instance position on the page {clientX, clientY}
clientX: number,
clientY: number
}}}
type Sigma$EventHandler = (node:Sigma$Event) => void
```
**/
static bindHandlers(handlers, sigma) {
["clickNode", "overNode", "outNode", "clickEdge", "overEdge", "outEdge", "clickStage"].forEach(event => {
let handler = "on" + event[0].toUpperCase() + event.substr(1);
if (handlers[handler]) {
sigma.bind(event, handlers[handler]);
}
});
}
}
_defineProperty(Sigma, "defaultProps", {
settings: {
defaultNodeColor: "#3388AA",
defaultLabelSize: 8,
defaultLabelColor: "#777",
labelThreshold: 12,
hoverFontStyle: "text-size: 11",
batchEdgesDrawing: true,
drawEdges: true,
drawEdgeLabels: false
},
style: {
maxWidth: "inherit",
height: "400px"
}
});
_defineProperty(Sigma, "propTypes", {
settings: function () {
return (typeof Sigma$Settings === "function" ? _propTypes.default.instanceOf(Sigma$Settings) : _propTypes.default.any).apply(this, arguments);
},
renderer: _propTypes.default.oneOf(["webgl", "canvas", "svg"]),
style: _propTypes.default.object,
children: _propTypes.default.any,
graph: function () {
return (typeof Sigma$Graph$Data === "function" ? _propTypes.default.instanceOf(Sigma$Graph$Data) : _propTypes.default.any).apply(this, arguments);
},
onSigmaException: _propTypes.default.func,
onClickNode: _propTypes.default.func,
onClickEdge: _propTypes.default.func,
onOverNode: _propTypes.default.func,
onOutNode: _propTypes.default.func,
onOverEdge: _propTypes.default.func,
// TODO: onOverEdge does not work?
onOutEdge: _propTypes.default.func,
onClickStage: _propTypes.default.func
});
var _default = Sigma;
exports.default = _default;