react-sigma/lib/ForceLink.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

require("../sigma/layout.forceLink");

var _tools = require("./tools");

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; }

/**

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>

**/
class ForceLink extends _react.default.Component {
  constructor(...args) {
    super(...args);

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

    _defineProperty(this, "render", () => {
      if (this.state.running) return null;
      return /*#__PURE__*/_react.default.createElement("div", null, (0, _tools.embedProps)(this.props.children, {
        sigma: this.props.sigma
      }));
    });
  }

  componentDidMount() {
    this._refreshGraph();
  } // Change sigma status only after react rendering complete


  componentDidUpdate(prevProps, prevState) {
    let 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();
    }
  }

  componentWillUnmount() {
    this._stopForceLink();
  }

  _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
    });
  }

  _refreshGraph() {
    let s = this.props.sigma;
    if (!sigma || !s) return;
    let 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

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


  static _stripOptions(props) {
    return Object.assign({}, props, {
      children: undefined,
      sigma: undefined
    });
  }

  static _propsChanged(prev, next) {
    for (let key in prev) if (prev[key] !== next[key]) return true;

    return false;
  }

}

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

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

var _default = ForceLink;
exports.default = _default;