Force layout auto-stop

Force layout provides an autostop option.
When active, the layout converges faster, and converges super fast when re-running the layout.
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    html,
    body {
      font-family: Helvetica, Arial, Helvetica, sans-serif;
      padding: 0;
      margin: 0;
    }

    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }

    .control {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      background: #fff;
    }

    .control label {
      display: block;
      padding: 5px 0;
    }

    .control p {
      text-align: center;
    }

    .control .value {
      width: 50px;
      display: inline-block;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-weight: bold;
    }

    #time {
      text-align: center;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <form class="control" id="params">
    <label>
      <span id="charge-value" class="value">5</span>
      <input type="range" min="0.5" max="50" value="5" name="charge"
        step="0.5" /> Charge
    </label>
    <label>
      <span id="gravity-value" class="value">0.01</span>
      <input type="range" min="0.005" max="0.15" value="0.01" name="gravity"
        step="0.005" /> Gravity
    </label>
    <label>
      <span id="edgeStrength-value" class="value">0.75</span>
      <input type="range" min="0.0" max="30" value="0.75" name="edgeStrength"
        step="0.25" /> Edge strength
    </label>
    <label>
      <input type="checkbox" checked name="auto-stop" /> Auto stop
    </label>
    <p><button type="button" id="randomize">Randomize</button><button
        type="button" id="run">Run</button></p>
    <div id="time"></div>
  </form>

  <script>
    'use strict';

    const ogma = new Ogma({
      container: 'graph-container',
      options: { interactions: { drag: { enabled: false } } }
    });
    const padding = 100;
    const animationDuration = 300;
    // disable node dragging
    //ogma.setOptions({ interactions: { drag: { enabled: false }}});

    // generate random graph
    ogma.parse
      .jsonFromUrl('files/relativity.json')
      .then(function (graph) {
        // add some disconnected components and 'orphan' nodes
        graph.nodes.forEach(function (node) {
          delete node.attributes;
        });
        ogma.setGraph(graph);
        return ogma.view.locateGraph({ padding: 100 });
      })
      .then(function () {
        return run({ padding: padding });
      });

    const form = document.querySelector('#params');
    let callTimer = 0;

    let charge, gravity, edgeStrength, autoStop;
    function update() {
      charge = parseFloat(form['charge'].value);
      gravity = parseFloat(form['gravity'].value);
      edgeStrength = parseFloat(form['edgeStrength'].value);
      autoStop = form['auto-stop'].checked;

      document.getElementById('charge-value').innerHTML = charge;
      document.getElementById('gravity-value').innerHTML = gravity;
      document.getElementById('edgeStrength-value').innerHTML = edgeStrength;
    }

    form.addEventListener(
      'input',
      function () {
        clearTimeout(callTimer);
        update();
        callTimer = setTimeout(run, 100);
      },
      true
    );

    document.querySelector('#randomize').addEventListener('click', randomize);
    document.querySelector('#run').addEventListener('click', function () {
      run();
    });

    function run(locate) {
      const start = Date.now();
      return ogma.layouts
        .force({
          charge: charge,
          gravity: gravity,
          locate: locate,
          duartion: animationDuration,
          edgeStrength: edgeStrength,
          autoStop: autoStop
        })
        .then(function () {
          const duration = Date.now() - start;
          document.getElementById('time').innerHTML =
            'done in ' +
            ((duration - animationDuration) / 1000).toFixed(2) +
            's';
        });
    }

    update();

    function addSmallComponents(graph, n, m) {
      for (let i = 0; i < n; i++) {
        const baseId = graph.nodes.length;
        for (let j = 0; j < m + 1; j++) {
          graph.nodes.push({ id: baseId + j });
        }
        for (let k = 1; k < m + 1; k++) {
          graph.edges.push({ source: baseId, target: baseId + k });
        }
      }
    }

    function randomize() {
      ogma.getNodes().forEach(function (node) {
        node.setAttributes({
          x: Math.random() * 150,
          y: Math.random() * 150
        });
      });
    }
  </script>
</body>

</html>