react-sigma
Version:
Lightweight but powerful library for drawing network graphs built on top of SigmaJS
234 lines (199 loc) • 9.6 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
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; }
import React from 'react';
import { embedProps } from './tools';
import '../sigma/main';
/**
*
* 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>
*
*/
var Sigma = /*#__PURE__*/function (_React$Component) {
_inherits(Sigma, _React$Component);
var _super = _createSuper(Sigma);
function Sigma(props) {
var _this;
_classCallCheck(this, Sigma);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "initRenderer", function (container) {
if (container) {
var options = {
container: 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
};
var settings = _this.props.settings ? _this.props.settings : {};
_this.sigma = new sigma({
settings: 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);
}
}
return _this;
}
_createClass(Sigma, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.sigma.kill();
this.sigmaRenderer = null;
}
}, {
key: "render",
value: function render() {
var children = this.state.renderer ? embedProps(this.props.children, {
sigma: this.sigma
}) : null;
return /*#__PURE__*/React.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
```
**/
}], [{
key: "bindHandlers",
value: function bindHandlers(handlers, sigma) {
["clickNode", "overNode", "outNode", "clickEdge", "overEdge", "outEdge", "clickStage"].forEach(function (event) {
var handler = "on" + event[0].toUpperCase() + event.substr(1);
if (handlers[handler]) {
sigma.bind(event, handlers[handler]);
}
});
}
}]);
return Sigma;
}(React.Component);
_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 settings() {
return (typeof Sigma$Settings === "function" ? PropTypes.instanceOf(Sigma$Settings) : PropTypes.any).apply(this, arguments);
},
renderer: PropTypes.oneOf(["webgl", "canvas", "svg"]),
style: PropTypes.object,
children: PropTypes.any,
graph: function graph() {
return (typeof Sigma$Graph$Data === "function" ? PropTypes.instanceOf(Sigma$Graph$Data) : PropTypes.any).apply(this, arguments);
},
onSigmaException: PropTypes.func,
onClickNode: PropTypes.func,
onClickEdge: PropTypes.func,
onOverNode: PropTypes.func,
onOutNode: PropTypes.func,
onOverEdge: PropTypes.func,
// TODO: onOverEdge does not work?
onOutEdge: PropTypes.func,
onClickStage: PropTypes.func
});
export default Sigma;
import PropTypes from "prop-types";