sanity-plugin-graph-view 1.0.4 → 2.0.0

package/lib/tool/GraphTool.js

@@ -1,980 +0,0 @@
-'use strict'
-
-var _interopRequireWildcard = require('@babel/runtime/helpers/interopRequireWildcard')
-
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault')
-
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-})
-exports.GraphView = GraphView
-
-var _toConsumableArray2 = _interopRequireDefault(
-  require('@babel/runtime/helpers/toConsumableArray')
-)
-
-var _regenerator = _interopRequireDefault(require('@babel/runtime/regenerator'))
-
-var _asyncToGenerator2 = _interopRequireDefault(require('@babel/runtime/helpers/asyncToGenerator'))
-
-var _classCallCheck2 = _interopRequireDefault(require('@babel/runtime/helpers/classCallCheck'))
-
-var _createClass2 = _interopRequireDefault(require('@babel/runtime/helpers/createClass'))
-
-var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'))
-
-var _slicedToArray2 = _interopRequireDefault(require('@babel/runtime/helpers/slicedToArray'))
-
-var _typeof2 = _interopRequireDefault(require('@babel/runtime/helpers/typeof'))
-
-var _userColor = require('@sanity/base/user-color')
-
-var _color = require('@sanity/color')
-
-var _polished = require('polished')
-
-var _deepEqual = _interopRequireDefault(require('deep-equal'))
-
-var _react = _interopRequireWildcard(require('react'))
-
-var _client = _interopRequireDefault(require('part:@sanity/base/client'))
-
-var _reactForceGraph = require('react-force-graph')
-
-var _uuid = require('uuid')
-
-var _bezierEasing = _interopRequireDefault(require('bezier-easing'))
-
-var _router = require('part:@sanity/base/router')
-
-var _hooks = require('./hooks')
-
-var _GraphTool = _interopRequireDefault(require('./GraphView.css'))
-
-function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it
-  if (typeof Symbol === 'undefined' || o[Symbol.iterator] == null) {
-    if (
-      Array.isArray(o) ||
-      (it = _unsupportedIterableToArray(o)) ||
-      (allowArrayLike && o && typeof o.length === 'number')
-    ) {
-      if (it) o = it
-      var i = 0
-      var F = function F() {}
-      return {
-        s: F,
-        n: function n() {
-          if (i >= o.length) return {done: true}
-          return {done: false, value: o[i++]}
-        },
-        e: function e(_e) {
-          throw _e
-        },
-        f: F,
-      }
-    }
-    throw new TypeError(
-      'Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
-    )
-  }
-  var normalCompletion = true,
-    didErr = false,
-    err
-  return {
-    s: function s() {
-      it = o[Symbol.iterator]()
-    },
-    n: function n() {
-      var step = it.next()
-      normalCompletion = step.done
-      return step
-    },
-    e: function e(_e2) {
-      didErr = true
-      err = _e2
-    },
-    f: function f() {
-      try {
-        if (!normalCompletion && it['return'] != null) it['return']()
-      } finally {
-        if (didErr) throw err
-      }
-    },
-  }
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return
-  if (typeof o === 'string') return _arrayLikeToArray(o, minLen)
-  var n = Object.prototype.toString.call(o).slice(8, -1)
-  if (n === 'Object' && o.constructor) n = o.constructor.name
-  if (n === 'Map' || n === 'Set') return Array.from(o)
-  if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _arrayLikeToArray(o, minLen)
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i]
-  }
-  return arr2
-}
-
-var QUERY =
-  '\n  *[\n    !(_id in path("_.*")) &&\n    !(_type match "system.*") &&\n    !(_type match "mux.*") &&\n    !(_type match "workflow.*") &&\n    _type != "feedback" &&\n    _type != "sanity.imageAsset"\n  ]\n'
-var fadeEasing = (0, _bezierEasing['default'])(0, 0.9, 1, 1)
-var softEasing = (0, _bezierEasing['default'])(0.25, 0.1, 0.0, 1.0)
-var imageSize = 40
-
-function sortBy(array, f) {
-  return array.sort(function (a, b) {
-    var va = f(a)
-    var vb = f(b)
-    return va < vb ? -1 : va > vb ? 1 : 0
-  })
-}
-
-function getTopDocTypes(counts) {
-  return sortBy(Object.keys(counts), function (docType) {
-    return counts[docType] || 0
-  })
-    .reverse()
-    .slice(0, 10)
-}
-
-function formatDocType(docType) {
-  return (docType.substring(0, 1).toUpperCase() + docType.substring(1))
-    .replace(/\./g, ' ')
-    .replace(/[A-Z]/g, ' $&')
-    .trim()
-}
-
-function getDocTypeCounts(docs) {
-  var types = {}
-
-  var _iterator = _createForOfIteratorHelper(docs),
-    _step
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done; ) {
-      var doc = _step.value
-      types[doc._type] = (types[doc._type] || 0) + 1
-    }
-  } catch (err) {
-    _iterator.e(err)
-  } finally {
-    _iterator.f()
-  }
-
-  return types
-}
-
-function truncate(s, limit) {
-  if (s.length > limit) {
-    s = s.substring(0, limit) + '…'
-  }
-
-  return s
-}
-
-function labelFor(doc) {
-  return ''.concat(doc.title || doc.name || doc._id).trim()
-}
-
-function valueFor(doc, maxSize) {
-  return 5 + 100 * (sizeOf(doc) / maxSize)
-}
-
-function findRefs(obj) {
-  var dest = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []
-
-  if (obj != null) {
-    if ((0, _typeof2['default'])(obj) === 'object') {
-      for (var _i = 0, _Object$entries = Object.entries(obj); _i < _Object$entries.length; _i++) {
-        var _Object$entries$_i = (0, _slicedToArray2['default'])(_Object$entries[_i], 2),
-          k = _Object$entries$_i[0],
-          v = _Object$entries$_i[1]
-
-        if (k === '_ref' && typeof v === 'string' && v.length > 0) {
-          dest.push(stripDraftId(v))
-        }
-
-        findRefs(v, dest)
-      }
-    } else if (Array.isArray(obj)) {
-      var _iterator2 = _createForOfIteratorHelper(obj),
-        _step2
-
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done; ) {
-          var _v = _step2.value
-          findRefs(_v, dest)
-        }
-      } catch (err) {
-        _iterator2.e(err)
-      } finally {
-        _iterator2.f()
-      }
-    }
-  }
-
-  return dest
-}
-
-function sizeOf(value) {
-  if (value == null) {
-    return 0
-  }
-
-  if ((0, _typeof2['default'])(value) === 'object') {
-    return Object.entries(value).reduce(function (total, _ref) {
-      var _ref2 = (0, _slicedToArray2['default'])(_ref, 2),
-        k = _ref2[0],
-        v = _ref2[1]
-
-      return total + sizeOf(k) + sizeOf(v)
-    }, 0)
-  }
-
-  if (Array.isArray(value)) {
-    return Object.entries(value).reduce(function (total, v) {
-      return total + sizeOf(v)
-    }, 0)
-  }
-
-  if (typeof value === 'string') {
-    return value.length
-  }
-
-  return 1
-}
-
-function loadImage(url) {
-  return new Promise(function (resolve) {
-    var img = new Image(imageSize, imageSize)
-
-    img.onload = function () {
-      resolve(img)
-    }
-
-    img.onerror = function (event) {
-      console.log('Image error', event)
-      resolve(null)
-    }
-
-    img.src = url
-  })
-}
-
-function stripDraftId(id) {
-  return id.replace(/^drafts\./, '')
-}
-
-function deduplicateDrafts(docs) {
-  var deduped = {}
-
-  var _iterator3 = _createForOfIteratorHelper(docs),
-    _step3
-
-  try {
-    for (_iterator3.s(); !(_step3 = _iterator3.n()).done; ) {
-      var doc = _step3.value
-
-      if (!/^drafts\./.test(doc._id)) {
-        deduped[doc._id] = doc
-      }
-    }
-  } catch (err) {
-    _iterator3.e(err)
-  } finally {
-    _iterator3.f()
-  }
-
-  var _iterator4 = _createForOfIteratorHelper(docs),
-    _step4
-
-  try {
-    for (_iterator4.s(); !(_step4 = _iterator4.n()).done; ) {
-      var _doc = _step4.value
-
-      if (/^drafts\./.test(_doc._id)) {
-        var id = stripDraftId(_doc._id)
-        deduped[id] = Object.assign(_doc, {
-          _id: id,
-        })
-      }
-    }
-  } catch (err) {
-    _iterator4.e(err)
-  } finally {
-    _iterator4.f()
-  }
-
-  return Object.values(deduped)
-}
-
-var Users = /*#__PURE__*/ (function () {
-  function Users() {
-    ;(0, _classCallCheck2['default'])(this, Users)
-    ;(0, _defineProperty2['default'])(this, '_users', [])
-  }
-
-  ;(0, _createClass2['default'])(Users, [
-    {
-      key: 'getById',
-      value: (function () {
-        var _getById = (0, _asyncToGenerator2['default'])(
-          /*#__PURE__*/ _regenerator['default'].mark(function _callee(id) {
-            var user
-            return _regenerator['default'].wrap(
-              function _callee$(_context) {
-                while (1) {
-                  switch ((_context.prev = _context.next)) {
-                    case 0:
-                      user = this._users.find(function (u) {
-                        return u._id === id
-                      })
-
-                      if (user) {
-                        _context.next = 10
-                        break
-                      }
-
-                      _context.next = 4
-                      return _client['default'].users.getById(id)
-
-                    case 4:
-                      user = _context.sent
-
-                      if (/\(Robot\)$/.test(user.displayName)) {
-                        user = robotUsers[Date.now() % robotUsers.length]
-                      }
-
-                      this._users.push(user)
-
-                      _context.next = 9
-                      return loadImage(
-                        user.imageUrl ||
-                          'https://concernedchristianmen.org/wp-content/uploads/2016/11/head-silhouette.jpg'
-                      )
-
-                    case 9:
-                      user.image = _context.sent
-
-                    case 10:
-                      return _context.abrupt('return', user)
-
-                    case 11:
-                    case 'end':
-                      return _context.stop()
-                  }
-                }
-              },
-              _callee,
-              this
-            )
-          })
-        )
-
-        function getById(_x) {
-          return _getById.apply(this, arguments)
-        }
-
-        return getById
-      })(),
-    },
-  ])
-  return Users
-})()
-
-var users = new Users()
-var idleTimeout = 10000
-var robotUsers = [
-  {
-    displayName: 'Ole',
-    imageUrl:
-      'https://cdn.sanity.io/images/ze41ydzg/production/a7e0a0a03a59cccfd06d3bcdb5df71b75401bd28-1024x1024.png?w=80&h=80&fit=crop',
-  },
-  {
-    displayName: 'Jan-Tore',
-    imageUrl:
-      'https://cdn.sanity.io/images/ze41ydzg/production/a79906968185c6e8a3658bcca42a79433222cc3e-1024x1024.png?w=80&h=80&fit=crop',
-  },
-  {
-    displayName: 'Stein',
-    imageUrl:
-      'https://cdn.sanity.io/images/ze41ydzg/production/e579ed13f214ccc1e158ed42f46a30935afeb9e0-1024x1024.png?w=80&h=80&fit=crop',
-  },
-  {
-    displayName: 'Elvis',
-    imageUrl:
-      'https://cdn.sanity.io/images/ze41ydzg/production/be36eb26194cb3ae3e218b1cf01d7c6c3425cf65-1024x1024.png?w=80&h=80&fit=crop',
-  },
-  {
-    displayName: 'Amanda',
-    imageUrl:
-      'https://cdn.sanity.io/images/ze41ydzg/production/88e1da4f85f95856c9736aa4637e2bbf48ed6773-1024x1024.png?w=80&h=80&fit=crop',
-  },
-  {
-    displayName: 'Reidun',
-    imageUrl:
-      'https://cdn.sanity.io/images/ze41ydzg/production/a79906968185c6e8a3658bcca42a79433222cc3e-1024x1024.png?w=80&h=80&fit=crop',
-  },
-  {
-    displayName: 'Tina',
-    imageUrl:
-      'https://cdn.sanity.io/images/ze41ydzg/production/6f6df5d7cc72f13988ad05ee026b567985bf1cf2-1024x1024.png?w=80&h=80&fit=crop',
-  },
-]
-
-var EditSession = function EditSession() {
-  ;(0, _classCallCheck2['default'])(this, EditSession)
-  ;(0, _defineProperty2['default'])(this, 'user', null)
-  ;(0, _defineProperty2['default'])(this, 'doc', null)
-  ;(0, _defineProperty2['default'])(this, 'lastActive', null)
-}
-
-var GraphData = /*#__PURE__*/ (function () {
-  function GraphData() {
-    var docs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []
-    ;(0, _classCallCheck2['default'])(this, GraphData)
-    ;(0, _defineProperty2['default'])(this, 'sessions', [])
-    var docsById = {}
-
-    var _iterator5 = _createForOfIteratorHelper(docs),
-      _step5
-
-    try {
-      for (_iterator5.s(); !(_step5 = _iterator5.n()).done; ) {
-        var doc = _step5.value
-        docsById[doc._id] = doc
-      }
-    } catch (err) {
-      _iterator5.e(err)
-    } finally {
-      _iterator5.f()
-    }
-
-    this.data = {
-      nodes: docs.map(function (d) {
-        return Object.assign({
-          id: d._id,
-          type: 'document',
-          doc: d,
-        })
-      }),
-      links: docs
-        .flatMap(function (doc) {
-          return findRefs(doc).map(function (ref) {
-            return {
-              source: doc._id,
-              target: ref,
-            }
-          })
-        })
-        .filter(function (link) {
-          return docsById[link.source] && docsById[link.target]
-        }),
-    }
-  }
-
-  ;(0, _createClass2['default'])(GraphData, [
-    {
-      key: 'setEditSession',
-      value: function setEditSession(user, docNode) {
-        var session = this.sessions.find(function (s) {
-          return s.user.id === user.id && s.doc._id === docNode.doc._id
-        })
-
-        if (!session) {
-          session = new EditSession()
-          session.id = (0, _uuid.v4)()
-          session.user = user
-          session.startTime = Date.now()
-          session.doc = docNode.doc
-          session.angle = Math.random() * 2 * Math.PI
-          this.sessions.push(session)
-        }
-
-        session.lastActive = Date.now()
-      },
-    },
-    {
-      key: 'reapSessions',
-      value: function reapSessions() {
-        for (var i = 0; i < this.sessions.length; i++) {
-          var session = this.sessions[i]
-
-          if (Date.now() - session.lastActive > idleTimeout) {
-            this.sessions = [].concat(
-              (0, _toConsumableArray2['default'])(this.sessions.slice(0, i)),
-              (0, _toConsumableArray2['default'])(this.sessions.slice(i + 1))
-            )
-            i--
-          }
-        }
-      },
-    },
-    {
-      key: 'clone',
-      value: function clone() {
-        var copy = new GraphData()
-        Object.assign(copy, this)
-        copy.data = {
-          nodes: (0, _toConsumableArray2['default'])(this.data.nodes),
-          links: (0, _toConsumableArray2['default'])(this.data.links),
-        }
-        return copy
-      },
-    },
-  ])
-  return GraphData
-})()
-
-function GraphView() {
-  var userColorManager = (0, _userColor.useUserColorManager)()
-
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2['default'])(_useState, 2),
-    maxSize = _useState2[0],
-    setMaxSize = _useState2[1]
-
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2['default'])(_useState3, 2),
-    hoverNode = _useState4[0],
-    setHoverNode = _useState4[1]
-
-  var _useState5 = (0, _react.useState)([]),
-    _useState6 = (0, _slicedToArray2['default'])(_useState5, 2),
-    documents = _useState6[0],
-    setDocuments = _useState6[1]
-
-  var _useState7 = (0, _react.useState)([]),
-    _useState8 = (0, _slicedToArray2['default'])(_useState7, 2),
-    docTypes = _useState8[0],
-    setDocTypes = _useState8[1]
-
-  var _useState9 = (0, _react.useState)(function () {
-      return new GraphData()
-    }),
-    _useState10 = (0, _slicedToArray2['default'])(_useState9, 2),
-    graph = _useState10[0],
-    setGraph = _useState10[1]
-
-  var router = (0, _router.useRouter)()
-  var fetchCallback = (0, _react.useCallback)(function (docs) {
-    docs = deduplicateDrafts(docs)
-    setMaxSize(Math.max.apply(Math, (0, _toConsumableArray2['default'])(docs.map(sizeOf))))
-    setDocuments(docs)
-    setDocTypes(getDocTypeCounts(docs))
-    setGraph(new GraphData(docs))
-  }, [])
-  var listenCallback = (0, _react.useCallback)(
-    /*#__PURE__*/ (function () {
-      var _ref3 = (0, _asyncToGenerator2['default'])(
-        /*#__PURE__*/ _regenerator['default'].mark(function _callee2(update) {
-          var doc,
-            _docsById,
-            _iterator6,
-            _step6,
-            _doc2,
-            oldDoc,
-            docs,
-            idx,
-            newGraph,
-            graphChanged,
-            oldRefs,
-            newRefs,
-            docNode,
-            nodeIdx,
-            user,
-            docId,
-            _docs,
-            _newGraph
-
-          return _regenerator['default'].wrap(function _callee2$(_context2) {
-            while (1) {
-              switch ((_context2.prev = _context2.next)) {
-                case 0:
-                  console.log('Update:', update)
-                  doc = update.result
-
-                  if (!doc) {
-                    _context2.next = 27
-                    break
-                  }
-
-                  doc._id = stripDraftId(doc._id)
-                  _docsById = {}
-                  _iterator6 = _createForOfIteratorHelper(documents)
-
-                  try {
-                    for (_iterator6.s(); !(_step6 = _iterator6.n()).done; ) {
-                      _doc2 = _step6.value
-                      _docsById[_doc2._id] = _doc2
-                    }
-                  } catch (err) {
-                    _iterator6.e(err)
-                  } finally {
-                    _iterator6.f()
-                  }
-
-                  docs = (0, _toConsumableArray2['default'])(documents)
-                  idx = documents.findIndex(function (d) {
-                    return d._id === doc._id
-                  })
-
-                  if (idx >= 0) {
-                    oldDoc = docs[idx]
-                    docs[idx] = doc
-                  } else {
-                    docs.push(doc)
-                  }
-
-                  setDocuments(docs)
-                  setDocTypes(getDocTypeCounts(docs))
-                  setMaxSize(
-                    Math.max.apply(Math, (0, _toConsumableArray2['default'])(docs.map(sizeOf)))
-                  )
-                  newGraph = graph.clone()
-                  graphChanged = false
-                  oldRefs = findRefs(oldDoc || {}).filter(function (id) {
-                    return id === doc._id || _docsById[id] != null
-                  })
-                  newRefs = findRefs(doc).filter(function (id) {
-                    return id === doc._id || _docsById[id] != null
-                  })
-
-                  if (!(0, _deepEqual['default'])(oldRefs, newRefs)) {
-                    graphChanged = true
-                    newGraph.data.links = newGraph.data.links
-                      .filter(function (l) {
-                        return l.source.id !== doc._id
-                      })
-                      .concat(
-                        newRefs.map(function (ref) {
-                          return {
-                            source: doc._id,
-                            target: ref,
-                          }
-                        })
-                      )
-                  }
-
-                  nodeIdx = graph.data.nodes.findIndex(function (n) {
-                    return n.doc && n.doc._id === doc._id
-                  })
-
-                  if (nodeIdx >= 0) {
-                    docNode = graph.data.nodes[nodeIdx]
-                    docNode.doc = doc
-                  } else {
-                    docNode = {
-                      id: doc._id,
-                      type: 'document',
-                      doc: doc,
-                    }
-                    newGraph.data.nodes.push(docNode)
-                    graphChanged = true
-                  }
-
-                  if (graphChanged) {
-                    setGraph(newGraph)
-                  }
-
-                  _context2.next = 23
-                  return users.getById(update.identity)
-
-                case 23:
-                  user = _context2.sent
-                  graph.setEditSession(user, docNode)
-                  _context2.next = 28
-                  break
-
-                case 27:
-                  if (update.transition === 'disappear') {
-                    docId = stripDraftId(update.documentId)
-                    _docs = documents.filter(function (d) {
-                      return d._id !== docId
-                    })
-                    setDocuments(_docs)
-                    setDocTypes(getDocTypeCounts(_docs))
-                    setMaxSize(
-                      Math.max.apply(Math, (0, _toConsumableArray2['default'])(_docs.map(sizeOf)))
-                    )
-                    _newGraph = graph.clone()
-                    _newGraph.data.links = _newGraph.data.links.filter(function (l) {
-                      return l.source.id !== docId && l.target.id !== docId
-                    })
-                    _newGraph.data.nodes = _newGraph.data.nodes.filter(function (n) {
-                      return n.id !== docId
-                    })
-                    setGraph(_newGraph)
-                  }
-
-                case 28:
-                case 'end':
-                  return _context2.stop()
-              }
-            }
-          }, _callee2)
-        })
-      )
-
-      return function (_x2) {
-        return _ref3.apply(this, arguments)
-      }
-    })(),
-    [documents, graph]
-  )
-  ;(0, _hooks.useFetchDocuments)(QUERY, fetchCallback, [])
-  ;(0, _hooks.useListen)(QUERY, {}, {}, listenCallback, [documents, graph])
-  ;(0, _react.useEffect)(
-    function () {
-      var interval = setInterval(function () {
-        graph.reapSessions()
-      }, 1000)
-      return function () {
-        return clearInterval(interval)
-      }
-    },
-    [graph]
-  )
-  return /*#__PURE__*/ _react['default'].createElement(
-    'div',
-    {
-      className: _GraphTool['default'].root,
-      style: {
-        background: _color.color.black.hex,
-      },
-    },
-    /*#__PURE__*/ _react['default'].createElement(
-      'div',
-      {
-        className: _GraphTool['default'].legend,
-      },
-      getTopDocTypes(docTypes).map(function (docType) {
-        return /*#__PURE__*/ _react['default'].createElement(
-          'div',
-          {
-            className: _GraphTool['default'].legend__row,
-            key: docType,
-            style: {
-              color: getDocTypeColor(docType).fill,
-            },
-          },
-          /*#__PURE__*/ _react['default'].createElement('div', {
-            className: _GraphTool['default'].legend__badge,
-          }),
-          /*#__PURE__*/ _react['default'].createElement(
-            'div',
-            {
-              className: _GraphTool['default'].legend__title,
-            },
-            formatDocType(docType)
-          )
-        )
-      })
-    ),
-    hoverNode &&
-      /*#__PURE__*/ _react['default'].createElement(
-        'div',
-        {
-          className: _GraphTool['default'].hoverNode,
-        },
-        labelFor(hoverNode.doc)
-      ),
-    /*#__PURE__*/ _react['default'].createElement(_reactForceGraph.ForceGraph2D, {
-      graphData: graph.data,
-      nodeAutoColorBy: 'group',
-      numDimensions: 2,
-      enableNodeDrag: false,
-      onNodeHover: function onNodeHover(node) {
-        return setHoverNode(node)
-      },
-      onNodeClick: function onNodeClick(node) {
-        router.navigateIntent('edit', {
-          id: node.doc._id,
-          documentType: node.doc._type,
-        })
-      },
-      linkColor: function linkColor() {
-        return (0, _polished.rgba)(_color.color.gray[500].hex, 0.25)
-      },
-      nodeLabel: function nodeLabel() {
-        return null
-      },
-      nodeRelSize: 1,
-      nodeVal: function nodeVal(node) {
-        return valueFor(node.doc, maxSize)
-      },
-      onRenderFramePost: function onRenderFramePost(ctx, globalScale) {
-        var _iterator7 = _createForOfIteratorHelper(graph.sessions),
-          _step7
-
-        try {
-          var _loop = function _loop() {
-            var session = _step7.value
-            var node = graph.data.nodes.find(function (n) {
-              return n.doc && n.doc._id === session.doc._id
-            })
-
-            if (node) {
-              var idleFactorRange = idleTimeout
-              ctx.save()
-              ctx.globalAlpha = fadeEasing(
-                1 - Math.min(idleFactorRange, Date.now() - session.lastActive) / idleFactorRange
-              )
-              ctx.font = 'bold '.concat(Math.round(12 / globalScale), 'px sans-serif')
-              var angle = session.angle
-              var radius = Math.sqrt(valueFor(node.doc, maxSize))
-              var image = session.user.image
-              var userColor = userColorManager.get(session.user.displayName).tints[400].hex
-              var distance = radius * globalScale + 40
-              var imgW = image ? image.width : 0
-              var imgH = image ? image.height : 0
-              var x = node.x + (Math.sin(angle) * distance) / globalScale
-              var y = node.y + (Math.cos(angle) * distance) / globalScale
-              ctx.beginPath()
-              ctx.strokeStyle = (0, _polished.rgba)(_color.color.white.hex, 1.0)
-              ctx.lineWidth = 2 / globalScale
-              ctx.moveTo(
-                node.x + (Math.sin(angle) * (distance - imgW / 2)) / globalScale,
-                node.y + (Math.cos(angle) * (distance - imgH / 2)) / globalScale
-              )
-              ctx.lineTo(node.x + Math.sin(angle) * radius, node.y + Math.cos(angle) * radius)
-              ctx.stroke()
-              ctx.beginPath()
-              ctx.strokeStyle = (0, _polished.rgba)(_color.color.white.hex, 1.0)
-              ctx.lineWidth = 2 / globalScale
-              ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false)
-              ctx.stroke()
-
-              if (image) {
-                ctx.save()
-                var dur = 700
-                var f = softEasing(Math.max(0, (dur - (Date.now() - session.startTime)) / dur))
-
-                if (f > 0) {
-                  ctx.beginPath()
-                  ctx.fillStyle = (0, _polished.rgba)(userColor, f)
-                  ctx.arc(x, y, (imgW / 2 + 10) / globalScale, 0, 2 * Math.PI, false)
-                  ctx.fill()
-                }
-
-                ctx.beginPath()
-                ctx.fillStyle = (0, _polished.rgba)(_color.color.white.hex, 1.0)
-                ctx.arc(x, y, imgW / globalScale / 2, 0, 2 * Math.PI, false)
-                ctx.clip()
-                ctx.drawImage(
-                  image,
-                  x - imgW / globalScale / 2,
-                  y - imgH / globalScale / 2,
-                  imgW / globalScale,
-                  imgH / globalScale
-                )
-                ctx.strokeStyle = _color.color.black.hex
-                ctx.lineWidth = 6 / globalScale
-                ctx.stroke()
-                ctx.strokeStyle = userColor
-                ctx.lineWidth = 4 / globalScale
-                ctx.stroke()
-                ctx.restore()
-              }
-
-              ctx.beginPath()
-              ctx.strokeStyle = (0, _polished.rgba)(_color.color.black.hex, 1)
-              ctx.lineWidth = 0.5 / globalScale
-              ctx.arc(x, y, imgW / globalScale / 2, 0, 2 * Math.PI, false)
-              ctx.stroke()
-              var above = angle >= Math.PI / 2 && angle < Math.PI * 1.5
-              var textY = above
-                ? y - (imgH / 2 + 5) / globalScale
-                : y + (imgH / 2 + 5) / globalScale
-              ctx.fillStyle = (0, _polished.rgba)(_color.color.white.hex, 1.0)
-              ctx.textAlign = 'center'
-              ctx.textBaseline = above ? 'bottom' : 'top'
-              ctx.fillText(session.user.displayName, x, textY)
-              ctx.restore()
-            }
-          }
-
-          for (_iterator7.s(); !(_step7 = _iterator7.n()).done; ) {
-            _loop()
-          }
-        } catch (err) {
-          _iterator7.e(err)
-        } finally {
-          _iterator7.f()
-        }
-      },
-      nodeCanvasObject: function nodeCanvasObject(node, ctx, globalScale) {
-        switch (node.type) {
-          case 'document': {
-            var nodeColor = getDocTypeColor(node.doc._type)
-            var radius = Math.sqrt(valueFor(node.doc, maxSize))
-            var fontSize = Math.min(100, 10.0 / globalScale)
-            ctx.beginPath()
-            ctx.fillStyle =
-              hoverNode != null && node.doc._id === hoverNode.doc._id
-                ? (0, _polished.rgba)(_color.color.gray[500].hex, 0.8)
-                : nodeColor.fill
-            ctx.strokeStyle = nodeColor.border
-            ctx.lineWidth = 0.5
-            ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false)
-            ctx.stroke()
-            ctx.fill()
-
-            if (radius * globalScale > 10) {
-              ctx.font = ''.concat(fontSize, 'px sans-serif')
-              var w = radius * 2 + 30 / globalScale
-
-              for (var len = 50; len >= 5; len /= 1.2) {
-                var label = truncate(labelFor(node.doc), Math.round(len))
-                var textMetrics = ctx.measureText(label)
-
-                if (textMetrics.width < w) {
-                  // ctx.fillStyle = rgba(color.white.hex, 1.0)
-                  ctx.textAlign = 'center'
-                  ctx.textBaseline = 'top'
-                  ctx.strokeStyle = (0, _polished.rgba)(_color.color.black.hex, 0.5)
-                  ctx.lineWidth = 2 / globalScale
-                  ctx.strokeText(label, node.x, node.y + radius + 5 / globalScale)
-                  ctx.fillText(label, node.x, node.y + radius + 5 / globalScale)
-                  break
-                }
-              }
-            }
-          }
-        }
-      },
-      linkCanvasObject: function linkCanvasObject(link, ctx, globalScale) {
-        ctx.beginPath()
-        ctx.strokeStyle = (0, _polished.rgba)(_color.color.gray[500].hex, 0.125)
-        ctx.lineWidth = 2 / globalScale
-        ctx.moveTo(link.source.x, link.source.y)
-        ctx.lineTo(link.target.x, link.target.y)
-        ctx.stroke()
-      },
-    })
-  )
-}
-
-var colorCache = {}
-var typeColorNum = 0
-
-function getDocTypeColor(docType) {
-  if (colorCache[docType]) {
-    return colorCache[docType]
-  }
-
-  var hue = _color.COLOR_HUES[typeColorNum % _color.COLOR_HUES.length]
-  typeColorNum += 1
-  colorCache[docType] = {
-    fill: _color.color[hue][400].hex,
-    border: (0, _polished.rgba)(_color.color.black.hex, 0.5),
-  }
-  return colorCache[docType]
-}