sanity-plugin-graph-view 1.0.4 → 2.0.0

package/lib/tool/GraphView.js

@@ -1,724 +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 _configGraphView = _interopRequireDefault(require("config:graph-view"));
-
-var _hooks = require("./hooks");
-
-var _GraphView = _interopRequireDefault(require("./GraphView.css"));
-
-var _utils = require("./utils");
-
-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 DEFAULT_QUERY = "\n  *[\n    !(_id in path(\"_.*\")) &&\n    !(_type match \"system.*\") &&\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 idleTimeout = 10000;
-var imageSize = 40;
-
-function getTopDocTypes(counts) {
-  return (0, _utils.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 labelFor(doc) {
-  return "".concat(doc.title || doc.name || doc._id).trim();
-}
-
-function valueFor(doc, maxSize) {
-  return 5 + 100 * ((0, _utils.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 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 = 9;
-                  break;
-                }
-
-                _context.next = 4;
-                return _client["default"].users.getById(id);
-
-              case 4:
-                user = _context.sent;
-
-                this._users.push(user);
-
-                _context.next = 8;
-                return (0, _utils.loadImage)(user.imageUrl || 'https://raw.githubusercontent.com/sanity-io/sanity-plugin-graph-view/main/assets/head-silhouette.jpg', imageSize, imageSize);
-
-              case 8:
-                user.image = _context.sent;
-
-              case 9:
-                return _context.abrupt("return", user);
-
-              case 10:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function getById(_x) {
-        return _getById.apply(this, arguments);
-      }
-
-      return getById;
-    }()
-  }]);
-  return Users;
-}();
-
-var Session = function Session() {
-  (0, _classCallCheck2["default"])(this, Session);
-  (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: "setSession",
-    value: function setSession(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 Session();
-        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;
-}();
-
-var users = new Users();
-
-function GraphView() {
-  var query = _configGraphView["default"].query || DEFAULT_QUERY;
-  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(_utils.sizeOf))));
-    setDocuments(docs);
-    setDocTypes(getDocTypeCounts(docs));
-    setGraph(new GraphData(docs));
-  }, []);
-  var listenCallback = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(update) {
-      var doc, _docsById, _iterator6, _step6, _doc2, oldDoc, docs, idx, newGraph, oldRefs, newRefs, graphChanged, docNode, nodeIdx, user, docId, _docs, _newGraph;
-
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              doc = update.result;
-
-              if (!doc) {
-                _context2.next = 26;
-                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(_utils.sizeOf))));
-              newGraph = graph.clone();
-              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;
-              });
-              graphChanged = !(0, _deepEqual["default"])(oldRefs, newRefs);
-
-              if (graphChanged) {
-                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 = 22;
-              return users.getById(update.identity);
-
-            case 22:
-              user = _context2.sent;
-              graph.setSession(user, docNode);
-              _context2.next = 27;
-              break;
-
-            case 26:
-              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(_utils.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 27:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function (_x2) {
-      return _ref.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 () {
-      return graph.reapSessions();
-    }, 1000);
-    return function () {
-      return clearInterval(interval);
-    };
-  }, [graph]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _GraphView["default"].root,
-    style: {
-      background: _color.color.black.hex
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _GraphView["default"].legend
-  }, getTopDocTypes(docTypes).map(function (docType) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _GraphView["default"].legend__row,
-      key: docType,
-      style: {
-        color: getDocTypeColor(docType).fill
-      }
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: _GraphView["default"].legend__badge
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: _GraphView["default"].legend__title
-    }, formatDocType(docType)));
-  })), hoverNode && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _GraphView["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;
-            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.save();
-
-            try {
-              ctx.globalAlpha = fadeEasing(1 - Math.min(idleFactorRange, Date.now() - session.lastActive) / idleFactorRange);
-              ctx.font = "bold ".concat(Math.round(12 / globalScale), "px sans-serif");
-              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();
-
-                try {
-                  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();
-                } finally {
-                  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);
-            } finally {
-              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 = (0, _utils.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];
-}