react-sigma/es/ForceLink.js

Lightweight but powerful library for drawing network graphs built on top of SigmaJS

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 '../sigma/layout.forceLink';
import { embedProps } from './tools';

/**

ForceLink component, starts Force Atlas2 algorythm once component is mounted,
it is advanced version of ForceAtlas2 plugin, but it is not included in the main
distribution script react-sigma.min.js , rather should be imported explicitly:

```
import ForceLink from 'react-sigma/lib/ForceLink'
```

It accepts all the parameters of ForceLink described on its github page:
@param {boolean} barnesHutOptimize  Use the algorithm's Barnes-Hut to improve repulsion's scalability
                  This is useful for large graph but harmful to small ones.
@param {number} barnesHutTheta
@param {boolean} adjustSizes
@param {number} iterationsPerRender
@param {boolean} [linLogMode=true]
@param {boolean} outboundAttractionDistribution
@param {number} edgeWeightInfluence
@param {number} scalingRatio
@param {boolean} strongGravityMode
@param {number} gravity
@param {boolean} alignNodeSiblings
@param {number} nodeSiblingsScale
@param {number} nodeSiblingsAngleMin
@param {boolean} [worker=true]  Use a web worker to run calculations in separate thread
@param {boolean} background
@param {Sigma$Easing} easing  Easing mode
@param {"globally"|"locally"} randomize  Randomize node positions before start
@param {number} slowDown
@param {number} timeout   how long algorythm should run. default=graph.nodes().length * 10

[see sigma plugin page for more details](https://github.com/Linkurious/linkurious.js/tree/develop/plugins/sigma.layouts.forceLink)

@example
import ForceLink from 'react-sigma/lib/ForceLink'
...
<Sigma>
  <LoadJSON path="/public/graph.json">
    <RelativeSize initialSize={8}/>
    <ForceLink background easing="cubicInOut"/>
  </LoadJSON>
</Sigma>

**/
var ForceLink = /*#__PURE__*/function (_React$Component) {
  _inherits(ForceLink, _React$Component);

  var _super = _createSuper(ForceLink);

  function ForceLink() {
    var _this;

    _classCallCheck(this, ForceLink);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      running: true
    });

    _defineProperty(_assertThisInitialized(_this), "render", function () {
      if (_this.state.running) return null;
      return /*#__PURE__*/React.createElement("div", null, embedProps(_this.props.children, {
        sigma: _this.props.sigma
      }));
    });

    return _this;
  }

  _createClass(ForceLink, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this._refreshGraph();
    } // Change sigma status only after react rendering complete

  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var s = this.props.sigma;

      if (prevState.running && !this.state.running && s) {
        this._stopForceLink();

        s.refresh();
      } else if (ForceLink._propsChanged(prevProps, this.props)) {
        this._stopForceLink();

        this._refreshGraph();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this._stopForceLink();
    }
  }, {
    key: "_stopForceLink",
    value: function _stopForceLink() {
      sigma.layouts.stopForceLink();
      if (this.state.timer) clearTimeout(this.state.timer);
      if (this.props.sigma && this.props.sigma.settings) this.props.sigma.settings({
        drawEdges: this.state.drawEdges
      });
    }
  }, {
    key: "_refreshGraph",
    value: function _refreshGraph() {
      var _this2 = this;

      var s = this.props.sigma;
      if (!sigma || !s) return;
      var drawEdges = s.settings("drawEdges");
      if (s.graph.edges().length > 1000) s.settings({
        drawEdges: false
      });
      sigma.layouts.configForceLink(s, ForceLink._stripOptions(this.props));
      sigma.layouts.startForceLink(s); // TODO: convert running status to state

      var timer = setTimeout(function () {
        _this2.setState({
          running: false,
          timer: undefined
        });
      }, this.props.timeout || s.graph.nodes().length * 8);
      this.setState({
        running: true,
        timer: timer,
        drawEdges: drawEdges
      });
    } //strip force atlas options from component props

  }], [{
    key: "_stripOptions",
    value: function _stripOptions(props) {
      return Object.assign({}, props, {
        children: undefined,
        sigma: undefined
      });
    }
  }, {
    key: "_propsChanged",
    value: function _propsChanged(prev, next) {
      for (var key in prev) {
        if (prev[key] !== next[key]) return true;
      }

      return false;
    }
  }]);

  return ForceLink;
}(React.Component);

_defineProperty(ForceLink, "defaultProps", {
  worker: true,
  linLogMode: true
});

_defineProperty(ForceLink, "propTypes", {
  barnesHutOptimize: PropTypes.bool,
  barnesHutTheta: PropTypes.number,
  adjustSizes: PropTypes.bool,
  iterationsPerRender: PropTypes.number,
  linLogMode: PropTypes.bool,
  outboundAttractionDistribution: PropTypes.bool,
  edgeWeightInfluence: PropTypes.number,
  scalingRatio: PropTypes.number,
  strongGravityMode: PropTypes.bool,
  slowDown: PropTypes.number,
  gravity: PropTypes.number,
  alignNodeSiblings: PropTypes.bool,
  nodeSiblingsScale: PropTypes.number,
  nodeSiblingsAngleMin: PropTypes.number,
  worker: PropTypes.bool,
  background: PropTypes.bool,
  easing: function easing() {
    return (typeof Sigma$Easing === "function" ? PropTypes.instanceOf(Sigma$Easing) : PropTypes.any).apply(this, arguments);
  },
  randomize: PropTypes.oneOf(["globally", "locally", "no"]),
  timeout: PropTypes.number,
  children: PropTypes.any,
  sigma: function sigma() {
    return (typeof Sigma === "function" ? PropTypes.instanceOf(Sigma) : PropTypes.any).apply(this, arguments);
  }
});

export default ForceLink;
import PropTypes from "prop-types";