@teambit/graph 0.0.752 → 0.0.755

package/dist/ui/dependencies-compare/dependency-compare-variants.module.scss

@@ -0,0 +1,21 @@
+$success: #37b26c;
+$borderLabelHeight: 20px;
+
+.root {
+  border-color: $success;
+  border-top-width: 20px;
+
+  border-radius: 10px;
+  box-shadow: 0px 0px 0px 2px #d0f1de, var(--bit-shadow-hover-medium);
+
+  &:before {
+    content: 'Current component';
+    position: absolute;
+    top: 1px;
+    left: 10px;
+
+    font-size: $borderLabelHeight * 0.5;
+    color: white;
+    line-height: $borderLabelHeight;
+  }
+}

package/dist/ui/dependencies-compare/diff-graph.d.ts

@@ -0,0 +1,4 @@
+import { ComponentID } from '@teambit/component';
+import { EdgeModel, GraphModel, NodeModel } from '@teambit/graph';
+import { CompareGraphModel } from './compare-graph-model';
+export declare function diffGraph(baseGraph?: GraphModel<NodeModel, EdgeModel>, compareGraph?: GraphModel<NodeModel, EdgeModel>, baseId?: ComponentID): CompareGraphModel | null;

package/dist/ui/dependencies-compare/diff-graph.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.diffGraph = diffGraph;
+
+function _defineProperty2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+  _defineProperty2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _compareGraphModel() {
+  const data = require("./compare-graph-model");
+
+  _compareGraphModel = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const toShortId = node => node.component.id.toStringWithoutVersion(); // this is to get a key with versions ignored so that we'll have a unique set of component nodes
+
+
+const toShortIdFromNodeId = nodeId => nodeId.split('@')[0];
+
+const delim = '::';
+
+const getEdgeId = _e => {
+  return `${toShortIdFromNodeId(_e.sourceId)}${delim}${toShortIdFromNodeId(_e.targetId)}`;
+};
+
+function diffGraph(baseGraph, compareGraph, baseId) {
+  if (!baseGraph || !compareGraph || !baseId) return null;
+  const baseNodes = baseGraph.nodes;
+  const compareNodes = compareGraph.nodes;
+  const baseNodesMap = new Map(baseNodes.map(n => [toShortId(n), n]));
+  const compareNodesMap = new Map(compareNodes.map(n => [toShortId(n), n]));
+  const allNodes = [];
+
+  for (const baseNode of baseNodes) {
+    const compareNode = compareNodesMap.get(toShortId(baseNode));
+
+    if (compareNode) {
+      allNodes.push(_objectSpread(_objectSpread({}, baseNode), {}, {
+        compareVersion: compareNode.component.version,
+        status: compareNode.component.id.isEqual(baseNode.component.id) ? undefined : 'modified'
+      }));
+    } else {
+      allNodes.push(_objectSpread(_objectSpread({}, baseNode), {}, {
+        compareVersion: baseNode.component.version,
+        status: 'deleted'
+      }));
+    }
+  }
+
+  const newNodes = compareNodes.filter(n => !baseNodesMap.has(toShortId(n)));
+
+  for (const node of newNodes) {
+    allNodes.push(_objectSpread(_objectSpread({}, node), {}, {
+      compareVersion: '',
+      status: 'new'
+    }));
+  }
+
+  const allNodesMap = new Map(allNodes.map(n => [toShortId(n), n]));
+  const baseEdgesMap = new Map(baseGraph.edges.map(baseEdge => [getEdgeId(baseEdge), baseEdge]));
+  const edgesOnlyInCompare = compareGraph.edges.filter(compareEdge => !baseEdgesMap.has(getEdgeId(compareEdge))).map(compareEdge => {
+    var _allNodesMap$get, _allNodesMap$get2;
+
+    return _objectSpread(_objectSpread({}, compareEdge), {}, {
+      sourceId: ((_allNodesMap$get = allNodesMap.get(toShortIdFromNodeId(compareEdge.sourceId))) === null || _allNodesMap$get === void 0 ? void 0 : _allNodesMap$get.id.toString()) || baseId.toString(),
+      targetId: ((_allNodesMap$get2 = allNodesMap.get(toShortIdFromNodeId(compareEdge.targetId))) === null || _allNodesMap$get2 === void 0 ? void 0 : _allNodesMap$get2.id.toString()) || baseId.toString()
+    });
+  });
+  const allEdges = [...baseGraph.edges, ...edgesOnlyInCompare];
+  return new (_compareGraphModel().CompareGraphModel)(allNodes, allEdges);
+}
+
+//# sourceMappingURL=diff-graph.js.map

package/dist/ui/dependencies-compare/diff-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toShortId","node","component","id","toStringWithoutVersion","toShortIdFromNodeId","nodeId","split","delim","getEdgeId","_e","sourceId","targetId","diffGraph","baseGraph","compareGraph","baseId","baseNodes","nodes","compareNodes","baseNodesMap","Map","map","n","compareNodesMap","allNodes","baseNode","compareNode","get","push","compareVersion","version","status","isEqual","undefined","newNodes","filter","has","allNodesMap","baseEdgesMap","edges","baseEdge","edgesOnlyInCompare","compareEdge","toString","allEdges","CompareGraphModel"],"sources":["diff-graph.ts"],"sourcesContent":["import { ComponentID } from '@teambit/component';\nimport { EdgeModel, GraphModel, NodeModel } from '@teambit/graph';\nimport { CompareGraphModel } from './compare-graph-model';\nimport { CompareNodeModel } from './compare-node-model';\n\nconst toShortId = (node: NodeModel) => node.component.id.toStringWithoutVersion();\n\n// this is to get a key with versions ignored so that we'll have a unique set of component nodes\nconst toShortIdFromNodeId = (nodeId: string) => nodeId.split('@')[0];\n\nconst delim = '::';\n\nconst getEdgeId = (_e: EdgeModel) => {\n  return `${toShortIdFromNodeId(_e.sourceId)}${delim}${toShortIdFromNodeId(_e.targetId)}`;\n};\n\nexport function diffGraph(\n  baseGraph?: GraphModel<NodeModel, EdgeModel>,\n  compareGraph?: GraphModel<NodeModel, EdgeModel>,\n  baseId?: ComponentID\n) {\n  if (!baseGraph || !compareGraph || !baseId) return null;\n\n  const baseNodes = baseGraph.nodes;\n  const compareNodes = compareGraph.nodes;\n\n  const baseNodesMap = new Map<string, NodeModel>(baseNodes.map((n) => [toShortId(n), n]));\n  const compareNodesMap = new Map<string, NodeModel>(compareNodes.map((n) => [toShortId(n), n]));\n\n  const allNodes: Array<CompareNodeModel> = [];\n  for (const baseNode of baseNodes) {\n    const compareNode = compareNodesMap.get(toShortId(baseNode));\n    if (compareNode) {\n      allNodes.push({\n        ...baseNode,\n        compareVersion: compareNode.component.version,\n        status: compareNode.component.id.isEqual(baseNode.component.id) ? undefined : 'modified',\n      });\n    } else {\n      allNodes.push({\n        ...baseNode,\n        compareVersion: baseNode.component.version,\n        status: 'deleted',\n      });\n    }\n  }\n\n  const newNodes = compareNodes.filter((n) => !baseNodesMap.has(toShortId(n)));\n\n  for (const node of newNodes) {\n    allNodes.push({\n      ...node,\n      compareVersion: '',\n      status: 'new',\n    });\n  }\n  const allNodesMap = new Map<string, CompareNodeModel>(allNodes.map((n) => [toShortId(n), n]));\n\n  const baseEdgesMap = new Map<string, EdgeModel>(baseGraph.edges.map((baseEdge) => [getEdgeId(baseEdge), baseEdge]));\n  const edgesOnlyInCompare = compareGraph.edges\n    .filter((compareEdge) => !baseEdgesMap.has(getEdgeId(compareEdge)))\n    .map((compareEdge) => ({\n      ...compareEdge,\n      sourceId: allNodesMap.get(toShortIdFromNodeId(compareEdge.sourceId))?.id.toString() || baseId.toString(),\n      targetId: allNodesMap.get(toShortIdFromNodeId(compareEdge.targetId))?.id.toString() || baseId.toString(),\n    }));\n  const allEdges = [...baseGraph.edges, ...edgesOnlyInCompare];\n  return new CompareGraphModel(allNodes, allEdges);\n}\n"],"mappings":"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"}

package/dist/ui/dependencies-compare/index.d.ts

@@ -0,0 +1 @@
+export { DependenciesCompare } from './dependencies-compare';

package/dist/ui/dependencies-compare/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DependenciesCompare", {
+  enumerable: true,
+  get: function () {
+    return _dependenciesCompare().DependenciesCompare;
+  }
+});
+
+function _dependenciesCompare() {
+  const data = require("./dependencies-compare");
+
+  _dependenciesCompare = function () {
+    return data;
+  };
+
+  return data;
+}
+
+//# sourceMappingURL=index.js.map

package/dist/ui/dependencies-compare/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { DependenciesCompare } from './dependencies-compare';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}

package/dist/ui/dependencies-graph/calc-elements.d.ts

@@ -1,11 +1,11 @@
-import { Node, Edge } from 'react-flow-renderer';
+import { Edge, Node } from 'react-flow-renderer';
 import { ComponentID } from '@teambit/component';
-import { GraphModel } from '../query';
+import { EdgeModel, GraphModel, NodeModel } from '../query';
 declare type ElementsOptions = {
     rootNode?: ComponentID;
 };
 /**
  * generate Nodes and Edges for the ReactFlowRenderer graph renderer
  */
-export declare function calcElements(graph: GraphModel | undefined, { rootNode }: ElementsOptions): (Node<any> | Edge<any>)[];
+export declare function calcElements(graph: GraphModel<NodeModel, EdgeModel> | undefined, { rootNode }: ElementsOptions): (Node<any> | Edge<any>)[];
 export {};

package/dist/ui/dependencies-graph/calc-elements.js.map

@@ -1 +1 @@
-{"version":3,"names":["calcElements","graph","rootNode","useMemo","positions","calcLayout","nodes","Array","from","values","map","x","id","type","data","node","component","isEqual","ignoreVersion","undefined","position","get","y","edges","e","sourceId","targetId","source","target","label","depTypeToLabel","dependencyLifecycleType","labelBgPadding","className","depTypeToClass","arrowHeadType","ArrowHeadType","Arrow"],"sources":["calc-elements.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Node, Edge, ArrowHeadType } from 'react-flow-renderer';\nimport { ComponentID } from '@teambit/component';\nimport { calcLayout } from './calc-layout';\nimport { GraphModel } from '../query';\n\nimport { depTypeToClass, depTypeToLabel } from './dep-edge';\n\ntype ElementsOptions = {\n  rootNode?: ComponentID;\n};\n\n/**\n * generate Nodes and Edges for the ReactFlowRenderer graph renderer\n */\nexport function calcElements(graph: GraphModel | undefined, { rootNode }: ElementsOptions) {\n  return useMemo(() => {\n    if (!graph) return [];\n\n    const positions = calcLayout(graph);\n\n    const nodes: Node[] = Array.from(graph.nodes.values()).map((x) => {\n      return {\n        id: x.id,\n        type: 'ComponentNode',\n        data: {\n          node: x,\n          type: rootNode && x.component.id.isEqual(rootNode, { ignoreVersion: true }) ? 'root' : undefined,\n        },\n        position: positions.get(x.id) || { x: 0, y: 0 },\n      };\n    });\n\n    const edges: Edge[] = graph.edges.map((e) => ({\n      id: `_${e.sourceId}__${e.targetId}`,\n      source: e.sourceId,\n      target: e.targetId,\n      label: depTypeToLabel(e.dependencyLifecycleType),\n      labelBgPadding: [4, 4],\n      type: 'smoothstep',\n      className: depTypeToClass(e.dependencyLifecycleType),\n      arrowHeadType: ArrowHeadType.Arrow,\n    }));\n\n    return [...nodes, ...edges];\n  }, [graph]);\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAMA;AACA;AACA;AACO,SAASA,YAAT,CAAsBC,KAAtB,EAAqD;EAAEC;AAAF,CAArD,EAAoF;EACzF,OAAO,IAAAC,gBAAA,EAAQ,MAAM;IACnB,IAAI,CAACF,KAAL,EAAY,OAAO,EAAP;IAEZ,MAAMG,SAAS,GAAG,IAAAC,wBAAA,EAAWJ,KAAX,CAAlB;IAEA,MAAMK,KAAa,GAAGC,KAAK,CAACC,IAAN,CAAWP,KAAK,CAACK,KAAN,CAAYG,MAAZ,EAAX,EAAiCC,GAAjC,CAAsCC,CAAD,IAAO;MAChE,OAAO;QACLC,EAAE,EAAED,CAAC,CAACC,EADD;QAELC,IAAI,EAAE,eAFD;QAGLC,IAAI,EAAE;UACJC,IAAI,EAAEJ,CADF;UAEJE,IAAI,EAAEX,QAAQ,IAAIS,CAAC,CAACK,SAAF,CAAYJ,EAAZ,CAAeK,OAAf,CAAuBf,QAAvB,EAAiC;YAAEgB,aAAa,EAAE;UAAjB,CAAjC,CAAZ,GAAwE,MAAxE,GAAiFC;QAFnF,CAHD;QAOLC,QAAQ,EAAEhB,SAAS,CAACiB,GAAV,CAAcV,CAAC,CAACC,EAAhB,KAAuB;UAAED,CAAC,EAAE,CAAL;UAAQW,CAAC,EAAE;QAAX;MAP5B,CAAP;IASD,CAVqB,CAAtB;IAYA,MAAMC,KAAa,GAAGtB,KAAK,CAACsB,KAAN,CAAYb,GAAZ,CAAiBc,CAAD,KAAQ;MAC5CZ,EAAE,EAAG,IAAGY,CAAC,CAACC,QAAS,KAAID,CAAC,CAACE,QAAS,EADU;MAE5CC,MAAM,EAAEH,CAAC,CAACC,QAFkC;MAG5CG,MAAM,EAAEJ,CAAC,CAACE,QAHkC;MAI5CG,KAAK,EAAE,IAAAC,yBAAA,EAAeN,CAAC,CAACO,uBAAjB,CAJqC;MAK5CC,cAAc,EAAE,CAAC,CAAD,EAAI,CAAJ,CAL4B;MAM5CnB,IAAI,EAAE,YANsC;MAO5CoB,SAAS,EAAE,IAAAC,yBAAA,EAAeV,CAAC,CAACO,uBAAjB,CAPiC;MAQ5CI,aAAa,EAAEC,kCAAA,CAAcC;IARe,CAAR,CAAhB,CAAtB;IAWA,OAAO,CAAC,GAAG/B,KAAJ,EAAW,GAAGiB,KAAd,CAAP;EACD,CA7BM,EA6BJ,CAACtB,KAAD,CA7BI,CAAP;AA8BD"}
+{"version":3,"names":["calcElements","graph","rootNode","useMemo","positions","calcLayout","nodes","Array","from","values","map","x","id","type","data","node","component","isEqual","ignoreVersion","undefined","position","get","y","edges","e","sourceId","targetId","source","target","label","depTypeToLabel","dependencyLifecycleType","labelBgPadding","className","depTypeToClass","arrowHeadType","ArrowHeadType","Arrow"],"sources":["calc-elements.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { ArrowHeadType, Edge, Node } from 'react-flow-renderer';\nimport { ComponentID } from '@teambit/component';\nimport { calcLayout } from './calc-layout';\nimport { EdgeModel, GraphModel, NodeModel } from '../query';\n\nimport { depTypeToClass, depTypeToLabel } from './dep-edge';\n\ntype ElementsOptions = {\n  rootNode?: ComponentID;\n};\n\n/**\n * generate Nodes and Edges for the ReactFlowRenderer graph renderer\n */\nexport function calcElements(graph: GraphModel<NodeModel, EdgeModel> | undefined, { rootNode }: ElementsOptions) {\n  return useMemo(() => {\n    if (!graph) return [];\n\n    const positions = calcLayout(graph);\n\n    const nodes: Node[] = Array.from(graph.nodes.values()).map((x) => {\n      return {\n        id: x.id,\n        type: 'ComponentNode',\n        data: {\n          node: x,\n          type: rootNode && x.component.id.isEqual(rootNode, { ignoreVersion: true }) ? 'root' : undefined,\n        },\n        position: positions.get(x.id) || { x: 0, y: 0 },\n      };\n    });\n\n    const edges: Edge[] = graph.edges.map((e) => ({\n      id: `_${e.sourceId}__${e.targetId}`,\n      source: e.sourceId,\n      target: e.targetId,\n      label: depTypeToLabel(e.dependencyLifecycleType),\n      labelBgPadding: [4, 4],\n      type: 'smoothstep',\n      className: depTypeToClass(e.dependencyLifecycleType),\n      arrowHeadType: ArrowHeadType.Arrow,\n    }));\n\n    return [...nodes, ...edges];\n  }, [graph]);\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAMA;AACA;AACA;AACO,SAASA,YAAT,CAAsBC,KAAtB,EAA2E;EAAEC;AAAF,CAA3E,EAA0G;EAC/G,OAAO,IAAAC,gBAAA,EAAQ,MAAM;IACnB,IAAI,CAACF,KAAL,EAAY,OAAO,EAAP;IAEZ,MAAMG,SAAS,GAAG,IAAAC,wBAAA,EAAWJ,KAAX,CAAlB;IAEA,MAAMK,KAAa,GAAGC,KAAK,CAACC,IAAN,CAAWP,KAAK,CAACK,KAAN,CAAYG,MAAZ,EAAX,EAAiCC,GAAjC,CAAsCC,CAAD,IAAO;MAChE,OAAO;QACLC,EAAE,EAAED,CAAC,CAACC,EADD;QAELC,IAAI,EAAE,eAFD;QAGLC,IAAI,EAAE;UACJC,IAAI,EAAEJ,CADF;UAEJE,IAAI,EAAEX,QAAQ,IAAIS,CAAC,CAACK,SAAF,CAAYJ,EAAZ,CAAeK,OAAf,CAAuBf,QAAvB,EAAiC;YAAEgB,aAAa,EAAE;UAAjB,CAAjC,CAAZ,GAAwE,MAAxE,GAAiFC;QAFnF,CAHD;QAOLC,QAAQ,EAAEhB,SAAS,CAACiB,GAAV,CAAcV,CAAC,CAACC,EAAhB,KAAuB;UAAED,CAAC,EAAE,CAAL;UAAQW,CAAC,EAAE;QAAX;MAP5B,CAAP;IASD,CAVqB,CAAtB;IAYA,MAAMC,KAAa,GAAGtB,KAAK,CAACsB,KAAN,CAAYb,GAAZ,CAAiBc,CAAD,KAAQ;MAC5CZ,EAAE,EAAG,IAAGY,CAAC,CAACC,QAAS,KAAID,CAAC,CAACE,QAAS,EADU;MAE5CC,MAAM,EAAEH,CAAC,CAACC,QAFkC;MAG5CG,MAAM,EAAEJ,CAAC,CAACE,QAHkC;MAI5CG,KAAK,EAAE,IAAAC,yBAAA,EAAeN,CAAC,CAACO,uBAAjB,CAJqC;MAK5CC,cAAc,EAAE,CAAC,CAAD,EAAI,CAAJ,CAL4B;MAM5CnB,IAAI,EAAE,YANsC;MAO5CoB,SAAS,EAAE,IAAAC,yBAAA,EAAeV,CAAC,CAACO,uBAAjB,CAPiC;MAQ5CI,aAAa,EAAEC,kCAAA,CAAcC;IARe,CAAR,CAAhB,CAAtB;IAWA,OAAO,CAAC,GAAG/B,KAAJ,EAAW,GAAGiB,KAAd,CAAP;EACD,CA7BM,EA6BJ,CAACtB,KAAD,CA7BI,CAAP;AA8BD"}

package/dist/ui/dependencies-graph/calc-layout.d.ts

@@ -1,8 +1,8 @@
-import { GraphModel } from '../query';
+import { EdgeModel, GraphModel, NodeModel } from '../query';
 /**
  * calculate the specific location of each node in the graph
  */
-export declare function calcLayout(graph: GraphModel): Map<string, {
+export declare function calcLayout(graph: GraphModel<NodeModel, EdgeModel>): Map<string, {
     x: number;
     y: number;
 }>;

package/dist/ui/dependencies-graph/calc-layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["NODE_WIDTH","NODE_HEIGHT","BOTTOM_TO_TOP","calcLayout","graph","g","graphlib","Graph","setGraph","rankdir","setDefaultEdgeLabel","nodes","forEach","n","setNode","id","width","height","edges","e","setEdge","v","sourceId","w","targetId","dagre","layout","positionsArr","map","nodeId","node","pos","x","y","Map"],"sources":["calc-layout.tsx"],"sourcesContent":["import dagre, { graphlib } from 'dagre';\nimport { GraphModel } from '../query';\n\nconst NODE_WIDTH = 260;\nconst NODE_HEIGHT = 90;\n\nconst BOTTOM_TO_TOP = 'BT';\n\n/**\n * calculate the specific location of each node in the graph\n */\nexport function calcLayout(graph: GraphModel) {\n  const g = new graphlib.Graph();\n  g.setGraph({ rankdir: BOTTOM_TO_TOP });\n  g.setDefaultEdgeLabel(() => ({}));\n\n  // make a new instance of { width, height } per node, or dagre will get confused and place all nodes in the same spot\n  graph.nodes.forEach((n) => g.setNode(n.id, { width: NODE_WIDTH, height: NODE_HEIGHT }));\n  graph.edges.forEach((e) => g.setEdge({ v: e.sourceId, w: e.targetId }));\n\n  // position items in graph\n  dagre.layout(g);\n\n  const positionsArr: [string, { x: number; y: number }][] = g.nodes().map((nodeId) => {\n    const node = g.node(nodeId);\n\n    const pos = {\n      x: node.x - node.width / 2,\n      y: node.y - node.height / 2,\n    };\n\n    return [nodeId, pos];\n  });\n\n  return new Map(positionsArr);\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAGA,MAAMA,UAAU,GAAG,GAAnB;AACA,MAAMC,WAAW,GAAG,EAApB;AAEA,MAAMC,aAAa,GAAG,IAAtB;AAEA;AACA;AACA;;AACO,SAASC,UAAT,CAAoBC,KAApB,EAAuC;EAC5C,MAAMC,CAAC,GAAG,KAAIC,iBAAA,CAASC,KAAb,GAAV;EACAF,CAAC,CAACG,QAAF,CAAW;IAAEC,OAAO,EAAEP;EAAX,CAAX;EACAG,CAAC,CAACK,mBAAF,CAAsB,OAAO,EAAP,CAAtB,EAH4C,CAK5C;;EACAN,KAAK,CAACO,KAAN,CAAYC,OAAZ,CAAqBC,CAAD,IAAOR,CAAC,CAACS,OAAF,CAAUD,CAAC,CAACE,EAAZ,EAAgB;IAAEC,KAAK,EAAEhB,UAAT;IAAqBiB,MAAM,EAAEhB;EAA7B,CAAhB,CAA3B;EACAG,KAAK,CAACc,KAAN,CAAYN,OAAZ,CAAqBO,CAAD,IAAOd,CAAC,CAACe,OAAF,CAAU;IAAEC,CAAC,EAAEF,CAAC,CAACG,QAAP;IAAiBC,CAAC,EAAEJ,CAAC,CAACK;EAAtB,CAAV,CAA3B,EAP4C,CAS5C;;EACAC,gBAAA,CAAMC,MAAN,CAAarB,CAAb;;EAEA,MAAMsB,YAAkD,GAAGtB,CAAC,CAACM,KAAF,GAAUiB,GAAV,CAAeC,MAAD,IAAY;IACnF,MAAMC,IAAI,GAAGzB,CAAC,CAACyB,IAAF,CAAOD,MAAP,CAAb;IAEA,MAAME,GAAG,GAAG;MACVC,CAAC,EAAEF,IAAI,CAACE,CAAL,GAASF,IAAI,CAACd,KAAL,GAAa,CADf;MAEViB,CAAC,EAAEH,IAAI,CAACG,CAAL,GAASH,IAAI,CAACb,MAAL,GAAc;IAFhB,CAAZ;IAKA,OAAO,CAACY,MAAD,EAASE,GAAT,CAAP;EACD,CAT0D,CAA3D;EAWA,OAAO,IAAIG,GAAJ,CAAQP,YAAR,CAAP;AACD"}
+{"version":3,"names":["NODE_WIDTH","NODE_HEIGHT","BOTTOM_TO_TOP","calcLayout","graph","g","graphlib","Graph","setGraph","rankdir","setDefaultEdgeLabel","nodes","forEach","n","setNode","id","width","height","edges","e","setEdge","v","sourceId","w","targetId","dagre","layout","positionsArr","map","nodeId","node","pos","x","y","Map"],"sources":["calc-layout.tsx"],"sourcesContent":["import dagre, { graphlib } from 'dagre';\nimport { EdgeModel, GraphModel, NodeModel } from '../query';\n\nconst NODE_WIDTH = 260;\nconst NODE_HEIGHT = 90;\n\nconst BOTTOM_TO_TOP = 'BT';\n\n/**\n * calculate the specific location of each node in the graph\n */\nexport function calcLayout(graph: GraphModel<NodeModel, EdgeModel>) {\n  const g = new graphlib.Graph();\n  g.setGraph({ rankdir: BOTTOM_TO_TOP });\n  g.setDefaultEdgeLabel(() => ({}));\n\n  // make a new instance of { width, height } per node, or dagre will get confused and place all nodes in the same spot\n  graph.nodes.forEach((n) => g.setNode(n.id, { width: NODE_WIDTH, height: NODE_HEIGHT }));\n  graph.edges.forEach((e) => g.setEdge({ v: e.sourceId, w: e.targetId }));\n\n  // position items in graph\n  dagre.layout(g);\n\n  const positionsArr: [string, { x: number; y: number }][] = g.nodes().map((nodeId) => {\n    const node = g.node(nodeId);\n\n    const pos = {\n      x: node.x - node.width / 2,\n      y: node.y - node.height / 2,\n    };\n\n    return [nodeId, pos];\n  });\n\n  return new Map(positionsArr);\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAGA,MAAMA,UAAU,GAAG,GAAnB;AACA,MAAMC,WAAW,GAAG,EAApB;AAEA,MAAMC,aAAa,GAAG,IAAtB;AAEA;AACA;AACA;;AACO,SAASC,UAAT,CAAoBC,KAApB,EAA6D;EAClE,MAAMC,CAAC,GAAG,KAAIC,iBAAA,CAASC,KAAb,GAAV;EACAF,CAAC,CAACG,QAAF,CAAW;IAAEC,OAAO,EAAEP;EAAX,CAAX;EACAG,CAAC,CAACK,mBAAF,CAAsB,OAAO,EAAP,CAAtB,EAHkE,CAKlE;;EACAN,KAAK,CAACO,KAAN,CAAYC,OAAZ,CAAqBC,CAAD,IAAOR,CAAC,CAACS,OAAF,CAAUD,CAAC,CAACE,EAAZ,EAAgB;IAAEC,KAAK,EAAEhB,UAAT;IAAqBiB,MAAM,EAAEhB;EAA7B,CAAhB,CAA3B;EACAG,KAAK,CAACc,KAAN,CAAYN,OAAZ,CAAqBO,CAAD,IAAOd,CAAC,CAACe,OAAF,CAAU;IAAEC,CAAC,EAAEF,CAAC,CAACG,QAAP;IAAiBC,CAAC,EAAEJ,CAAC,CAACK;EAAtB,CAAV,CAA3B,EAPkE,CASlE;;EACAC,gBAAA,CAAMC,MAAN,CAAarB,CAAb;;EAEA,MAAMsB,YAAkD,GAAGtB,CAAC,CAACM,KAAF,GAAUiB,GAAV,CAAeC,MAAD,IAAY;IACnF,MAAMC,IAAI,GAAGzB,CAAC,CAACyB,IAAF,CAAOD,MAAP,CAAb;IAEA,MAAME,GAAG,GAAG;MACVC,CAAC,EAAEF,IAAI,CAACE,CAAL,GAASF,IAAI,CAACd,KAAL,GAAa,CADf;MAEViB,CAAC,EAAEH,IAAI,CAACG,CAAL,GAASH,IAAI,CAACb,MAAL,GAAc;IAFhB,CAAZ;IAKA,OAAO,CAACY,MAAD,EAASE,GAAT,CAAP;EACD,CAT0D,CAA3D;EAWA,OAAO,IAAIG,GAAJ,CAAQP,YAAR,CAAP;AACD"}

package/dist/ui/dependencies-graph/dependencies-graph.d.ts

@@ -2,10 +2,10 @@
 import { OnLoadParams, ReactFlowProps } from 'react-flow-renderer';
 import { ComponentID } from '@teambit/component';
 import { ComponentWidgetSlot } from '../../graph.ui.runtime';
-import { GraphModel } from '../query';
+import { EdgeModel, GraphModel, NodeModel } from '../query';
 export declare type DependenciesGraphProps = {
     rootNode: ComponentID;
-    graph: GraphModel;
+    graph: GraphModel<NodeModel, EdgeModel>;
     componentWidgets: ComponentWidgetSlot;
     onLoad?: (instance: OnLoadParams) => void;
 } & Omit<ReactFlowProps, 'elements'>;

package/dist/ui/dependencies-graph/dependencies-graph.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","data","id","node","type","NodeTypes","ComponentNode","DependenciesGraph","graph","rootNode","componentWidgets","className","onLoad","children","rest","graphRef","useRef","elements","calcElements","context","useMemo","handleLoad","useCallback","instance","current","fitView","useEffect","undefined","classnames","styles","controls","calcMinimapColors","minimap"],"sources":["dependencies-graph.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useRef, useEffect } from 'react';\nimport classnames from 'classnames';\nimport ReactFlow, {\n  ReactFlowProvider,\n  Controls,\n  Background,\n  MiniMap,\n  OnLoadParams,\n  NodeTypesType,\n  Handle,\n  Position,\n  NodeProps,\n  ReactFlowProps,\n} from 'react-flow-renderer';\nimport { ComponentID } from '@teambit/component';\n\nimport { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport { ComponentNode } from '../component-node';\nimport { GraphModel } from '../query';\nimport { calcElements } from './calc-elements';\nimport { calcMinimapColors } from './minimap';\nimport { ComponentGraphContext } from './graph-context';\n\nimport styles from './dependencies-graph.module.scss';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n\n  return (\n    <div key={id}>\n      <Handle type=\"target\" position={targetPosition} isConnectable={false} />\n      <Handle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <ComponentNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\n// @ts-ignore - incorrect NodeTypes https://github.com/wbkd/react-flow/issues/2101 (#5746)\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport type DependenciesGraphProps = {\n  rootNode: ComponentID;\n  graph: GraphModel;\n  componentWidgets: ComponentWidgetSlot;\n  onLoad?: (instance: OnLoadParams) => void;\n} & Omit<ReactFlowProps, 'elements'>;\n\nexport function DependenciesGraph({\n  graph,\n  rootNode,\n  componentWidgets,\n  className,\n  onLoad,\n  children,\n  ...rest\n}: DependenciesGraphProps) {\n  const graphRef = useRef<OnLoadParams>();\n  const elements = calcElements(graph, { rootNode });\n  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);\n\n  const handleLoad = useCallback(\n    (instance: OnLoadParams) => {\n      graphRef.current = instance;\n      instance.fitView();\n      onLoad?.(instance);\n    },\n    [onLoad]\n  );\n\n  // clear ref on unmount\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    graphRef.current?.fitView();\n  }, [graph]);\n\n  return (\n    <ComponentGraphContext.Provider value={context}>\n      {/* @ts-ignore - TODO - remove when ReactFlowProvider will be of type `FC<PropsWithChildren<{}>>` instead of `FC` (#5746) */}\n      <ReactFlowProvider>\n        <ReactFlow\n          draggable={false}\n          nodesDraggable={true}\n          selectNodesOnDrag={false}\n          nodesConnectable={false}\n          zoomOnDoubleClick={false}\n          elementsSelectable={false}\n          maxZoom={1}\n          {...rest}\n          className={classnames(styles.graph, className)}\n          elements={elements}\n          nodeTypes={NodeTypes}\n          onLoad={handleLoad}\n        >\n          <Background />\n          <Controls className={styles.controls} />\n          <MiniMap nodeColor={calcMinimapColors} className={styles.minimap} />\n          {children}\n        </ReactFlow>\n      </ReactFlowProvider>\n    </ComponentGraphContext.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","data","id","node","type","NodeTypes","ComponentNode","DependenciesGraph","graph","rootNode","componentWidgets","className","onLoad","children","rest","graphRef","useRef","elements","calcElements","context","useMemo","handleLoad","useCallback","instance","current","fitView","useEffect","undefined","classnames","styles","controls","calcMinimapColors","minimap"],"sources":["dependencies-graph.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport classnames from 'classnames';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  NodeProps,\n  NodeTypesType,\n  OnLoadParams,\n  Position,\n  ReactFlowProps,\n  ReactFlowProvider,\n} from 'react-flow-renderer';\nimport { ComponentID } from '@teambit/component';\n\nimport { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport { ComponentNode } from '../component-node';\nimport { EdgeModel, GraphModel, NodeModel } from '../query';\nimport { calcElements } from './calc-elements';\nimport { calcMinimapColors } from './minimap';\nimport { ComponentGraphContext } from './graph-context';\n\nimport styles from './dependencies-graph.module.scss';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n\n  return (\n    <div key={id}>\n      <Handle type=\"target\" position={targetPosition} isConnectable={false} />\n      <Handle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <ComponentNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\n// @ts-ignore - incorrect NodeTypes https://github.com/wbkd/react-flow/issues/2101 (#5746)\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport type DependenciesGraphProps = {\n  rootNode: ComponentID;\n  graph: GraphModel<NodeModel, EdgeModel>;\n  componentWidgets: ComponentWidgetSlot;\n  onLoad?: (instance: OnLoadParams) => void;\n} & Omit<ReactFlowProps, 'elements'>;\n\nexport function DependenciesGraph({\n  graph,\n  rootNode,\n  componentWidgets,\n  className,\n  onLoad,\n  children,\n  ...rest\n}: DependenciesGraphProps) {\n  const graphRef = useRef<OnLoadParams>();\n  const elements = calcElements(graph, { rootNode });\n  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);\n\n  const handleLoad = useCallback(\n    (instance: OnLoadParams) => {\n      graphRef.current = instance;\n      instance.fitView();\n      onLoad?.(instance);\n    },\n    [onLoad]\n  );\n\n  // clear ref on unmount\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    graphRef.current?.fitView();\n  }, [graph]);\n\n  return (\n    <ComponentGraphContext.Provider value={context}>\n      {/* @ts-ignore - TODO - remove when ReactFlowProvider will be of type `FC<PropsWithChildren<{}>>` instead of `FC` (#5746) */}\n      <ReactFlowProvider>\n        <ReactFlow\n          draggable={false}\n          nodesDraggable={true}\n          selectNodesOnDrag={false}\n          nodesConnectable={false}\n          zoomOnDoubleClick={false}\n          elementsSelectable={false}\n          maxZoom={1}\n          {...rest}\n          className={classnames(styles.graph, className)}\n          elements={elements}\n          nodeTypes={NodeTypes}\n          onLoad={handleLoad}\n        >\n          <Background />\n          <Controls className={styles.controls} />\n          <MiniMap nodeColor={calcMinimapColors} className={styles.minimap} />\n          {children}\n        </ReactFlow>\n      </ReactFlowProvider>\n    </ComponentGraphContext.Provider>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/dependencies-graph/index.d.ts

@@ -1,3 +1,12 @@
 export { DependenciesGraph } from './dependencies-graph';
 export { ComponentGraphContext, ComponentGraph } from './graph-context';
 export type { DependenciesGraphProps } from './dependencies-graph';
+export { depTypeToClass, depTypeToLabel } from './dep-edge';
+export { calcMinimapColors } from './minimap';
+export { calcLayout } from './calc-layout';
+export { calcElements } from './calc-elements';
+export declare const styles: {
+    graph: string;
+    minimap: string;
+    controls: string;
+};

package/dist/ui/dependencies-graph/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,6 +23,47 @@ Object.defineProperty(exports, "DependenciesGraph", {
     return _dependenciesGraph().DependenciesGraph;
   }
 });
+Object.defineProperty(exports, "calcElements", {
+  enumerable: true,
+  get: function () {
+    return _calcElements().calcElements;
+  }
+});
+Object.defineProperty(exports, "calcLayout", {
+  enumerable: true,
+  get: function () {
+    return _calcLayout().calcLayout;
+  }
+});
+Object.defineProperty(exports, "calcMinimapColors", {
+  enumerable: true,
+  get: function () {
+    return _minimap().calcMinimapColors;
+  }
+});
+Object.defineProperty(exports, "depTypeToClass", {
+  enumerable: true,
+  get: function () {
+    return _depEdge().depTypeToClass;
+  }
+});
+Object.defineProperty(exports, "depTypeToLabel", {
+  enumerable: true,
+  get: function () {
+    return _depEdge().depTypeToLabel;
+  }
+});
+exports.styles = void 0;
+
+function _dependenciesGraphModule() {
+  const data = _interopRequireDefault(require("./dependencies-graph.module.scss"));
+
+  _dependenciesGraphModule = function () {
+    return data;
+  };
+
+  return data;
+}
 
 function _dependenciesGraph() {
   const data = require("./dependencies-graph");
@@ -42,4 +85,57 @@ function _graphContext() {
   return data;
 }
 
+function _depEdge() {
+  const data = require("./dep-edge");
+
+  _depEdge = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _minimap() {
+  const data = require("./minimap");
+
+  _minimap = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _calcLayout() {
+  const data = require("./calc-layout");
+
+  _calcLayout = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _calcElements() {
+  const data = require("./calc-elements");
+
+  _calcElements = function () {
+    return data;
+  };
+
+  return data;
+}
+
+const {
+  graph,
+  minimap,
+  controls
+} = _dependenciesGraphModule().default;
+
+const styles = {
+  graph,
+  minimap,
+  controls
+};
+exports.styles = styles;
+
 //# sourceMappingURL=index.js.map

package/dist/ui/dependencies-graph/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { DependenciesGraph } from './dependencies-graph';\nexport { ComponentGraphContext, ComponentGraph } from './graph-context';\nexport type { DependenciesGraphProps } from './dependencies-graph';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":["graph","minimap","controls","componentStyles","styles"],"sources":["index.ts"],"sourcesContent":["import componentStyles from './dependencies-graph.module.scss';\n\nexport { DependenciesGraph } from './dependencies-graph';\nexport { ComponentGraphContext, ComponentGraph } from './graph-context';\nexport type { DependenciesGraphProps } from './dependencies-graph';\nexport { depTypeToClass, depTypeToLabel } from './dep-edge';\nexport { calcMinimapColors } from './minimap';\nexport { calcLayout } from './calc-layout';\nexport { calcElements } from './calc-elements';\n\nconst { graph, minimap, controls } = componentStyles;\nexport const styles = { graph, minimap, controls };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA,MAAM;EAAEA,KAAF;EAASC,OAAT;EAAkBC;AAAlB,IAA+BC,kCAArC;;AACO,MAAMC,MAAM,GAAG;EAAEJ,KAAF;EAASC,OAAT;EAAkBC;AAAlB,CAAf"}

package/dist/ui/graph-page/index.d.ts

@@ -1 +1,6 @@
 export { GraphPage } from './graph-page';
+export { GraphFilters } from './graph-filters';
+export declare const styles: {
+    graph: string;
+    filters: string;
+};

package/dist/ui/graph-page/index.js

@@ -1,14 +1,33 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "GraphFilters", {
+  enumerable: true,
+  get: function () {
+    return _graphFilters().GraphFilters;
+  }
+});
 Object.defineProperty(exports, "GraphPage", {
   enumerable: true,
   get: function () {
     return _graphPage().GraphPage;
   }
 });
+exports.styles = void 0;
+
+function _graphPageModule() {
+  const data = _interopRequireDefault(require("./graph-page.module.scss"));
+
+  _graphPageModule = function () {
+    return data;
+  };
+
+  return data;
+}
 
 function _graphPage() {
   const data = require("./graph-page");
@@ -20,4 +39,25 @@ function _graphPage() {
   return data;
 }
 
+function _graphFilters() {
+  const data = require("./graph-filters");
+
+  _graphFilters = function () {
+    return data;
+  };
+
+  return data;
+}
+
+const {
+  graph,
+  filters
+} = _graphPageModule().default;
+
+const styles = {
+  graph,
+  filters
+};
+exports.styles = styles;
+
 //# sourceMappingURL=index.js.map

package/dist/ui/graph-page/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { GraphPage } from './graph-page';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":["graph","filters","pageStyles","styles"],"sources":["index.ts"],"sourcesContent":["import pageStyles from './graph-page.module.scss';\n\nexport { GraphPage } from './graph-page';\nexport { GraphFilters } from './graph-filters';\n\nconst { graph, filters } = pageStyles;\nexport const styles = { graph, filters };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA,MAAM;EAAEA,KAAF;EAASC;AAAT,IAAqBC,0BAA3B;;AACO,MAAMC,MAAM,GAAG;EAAEH,KAAF;EAASC;AAAT,CAAf"}

package/dist/ui/query/graph-model.d.ts

@@ -1,9 +1,9 @@
 import { RawGraph } from './get-graph.query';
 import { NodeModel } from './node-model';
 import { EdgeModel } from './edge-model';
-export declare class GraphModel {
-    nodes: NodeModel[];
-    edges: EdgeModel[];
-    constructor(nodes: NodeModel[], edges: EdgeModel[]);
-    static from(rawGraph: RawGraph): GraphModel;
+export declare class GraphModel<N extends NodeModel, E extends EdgeModel> {
+    nodes: N[];
+    edges: E[];
+    constructor(nodes: N[], edges: E[]);
+    static from(rawGraph: RawGraph): GraphModel<NodeModel, EdgeModel>;
 }

package/dist/ui/query/graph-model.js.map

@@ -1 +1 @@
-{"version":3,"names":["GraphModel","constructor","nodes","edges","from","rawGraph","map","NodeModel","EdgeModel"],"sources":["graph-model.ts"],"sourcesContent":["import { RawGraph } from './get-graph.query';\nimport { NodeModel } from './node-model';\nimport { EdgeModel } from './edge-model';\n\nexport class GraphModel {\n  constructor(public nodes: NodeModel[], public edges: EdgeModel[]) {}\n  static from(rawGraph: RawGraph) {\n    const nodes = rawGraph.nodes.map(NodeModel.from);\n    const edges = rawGraph.edges.map(EdgeModel.from);\n    return new GraphModel(nodes, edges);\n  }\n}\n"],"mappings":";;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,UAAN,CAAiB;EACtBC,WAAW,CAAQC,KAAR,EAAmCC,KAAnC,EAAuD;IAAA,KAA/CD,KAA+C,GAA/CA,KAA+C;IAAA,KAApBC,KAAoB,GAApBA,KAAoB;EAAE;;EACzD,OAAJC,IAAI,CAACC,QAAD,EAAqB;IAC9B,MAAMH,KAAK,GAAGG,QAAQ,CAACH,KAAT,CAAeI,GAAf,CAAmBC,sBAAA,CAAUH,IAA7B,CAAd;IACA,MAAMD,KAAK,GAAGE,QAAQ,CAACF,KAAT,CAAeG,GAAf,CAAmBE,sBAAA,CAAUJ,IAA7B,CAAd;IACA,OAAO,IAAIJ,UAAJ,CAAeE,KAAf,EAAsBC,KAAtB,CAAP;EACD;;AANqB"}
+{"version":3,"names":["GraphModel","constructor","nodes","edges","from","rawGraph","map","NodeModel","EdgeModel"],"sources":["graph-model.ts"],"sourcesContent":["import { RawGraph } from './get-graph.query';\nimport { NodeModel } from './node-model';\nimport { EdgeModel } from './edge-model';\n\nexport class GraphModel<N extends NodeModel, E extends EdgeModel> {\n  constructor(public nodes: N[], public edges: E[]) {}\n\n  static from(rawGraph: RawGraph) {\n    const nodes = rawGraph.nodes.map(NodeModel.from);\n    const edges = rawGraph.edges.map(EdgeModel.from);\n    return new GraphModel(nodes, edges);\n  }\n}\n"],"mappings":";;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,UAAN,CAA2D;EAChEC,WAAW,CAAQC,KAAR,EAA2BC,KAA3B,EAAuC;IAAA,KAA/BD,KAA+B,GAA/BA,KAA+B;IAAA,KAAZC,KAAY,GAAZA,KAAY;EAAE;;EAEzC,OAAJC,IAAI,CAACC,QAAD,EAAqB;IAC9B,MAAMH,KAAK,GAAGG,QAAQ,CAACH,KAAT,CAAeI,GAAf,CAAmBC,sBAAA,CAAUH,IAA7B,CAAd;IACA,MAAMD,KAAK,GAAGE,QAAQ,CAACF,KAAT,CAAeG,GAAf,CAAmBE,sBAAA,CAAUJ,IAA7B,CAAd;IACA,OAAO,IAAIJ,UAAJ,CAAeE,KAAf,EAAsBC,KAAtB,CAAP;EACD;;AAP+D"}

package/dist/ui/query/index.d.ts

@@ -3,3 +3,4 @@ export { useGraph } from './use-graph';
 export { GraphModel } from './graph-model';
 export { EdgeModel } from './edge-model';
 export { NodeModel } from './node-model';
+export { RawGraph } from './get-graph.query';

package/dist/ui/query/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "NodeModel", {
     return _nodeModel().NodeModel;
   }
 });
+Object.defineProperty(exports, "RawGraph", {
+  enumerable: true,
+  get: function () {
+    return _getGraph().RawGraph;
+  }
+});
 Object.defineProperty(exports, "useGraph", {
   enumerable: true,
   get: function () {
@@ -84,4 +90,14 @@ function _nodeModel() {
   return data;
 }
 
+function _getGraph() {
+  const data = require("./get-graph.query");
+
+  _getGraph = function () {
+    return data;
+  };
+
+  return data;
+}
+
 //# sourceMappingURL=index.js.map

package/dist/ui/query/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { useGraphQuery } from './use-graph-query';\nexport { useGraph } from './use-graph';\n\nexport { GraphModel } from './graph-model';\nexport { EdgeModel } from './edge-model';\nexport { NodeModel } from './node-model';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { useGraphQuery } from './use-graph-query';\nexport { useGraph } from './use-graph';\n\nexport { GraphModel } from './graph-model';\nexport { EdgeModel } from './edge-model';\nexport { NodeModel } from './node-model';\nexport { RawGraph } from './get-graph.query';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}

package/dist/ui/query/use-graph-query.d.ts

@@ -1,8 +1,8 @@
 import { GraphQlError } from '@teambit/graphql';
 import { GraphModel } from './graph-model';
 /** provides dependencies graph data from graphQL */
-export declare function useGraphQuery(componentId: string[], filter?: string): {
-    graph: GraphModel | undefined;
+export declare function useGraphQuery(componentId?: string[], filter?: string): {
+    graph: GraphModel<import("./node-model").NodeModel, import("./edge-model").EdgeModel> | undefined;
     error: GraphQlError | undefined;
     loading: boolean;
 };

package/dist/ui/query/use-graph-query.js

@@ -65,7 +65,8 @@ function useGraphQuery(componentId, filter) {
     variables: {
       ids: componentId,
       filter
-    }
+    },
+    skip: !componentId
   });
   const rawGraph = data === null || data === void 0 ? void 0 : data.graph;
   const clientError = !rawGraph && !loading ? new (_graphql().GraphQlError)(404) : undefined;

package/dist/ui/query/use-graph-query.js.map

@@ -1 +1 @@
-{"version":3,"names":["useGraphQuery","componentId","filter","data","error","loading","useDataQuery","GET_GRAPH","variables","ids","rawGraph","graph","clientError","GraphQlError","undefined","serverError","message","useMemo","GraphModel","from"],"sources":["use-graph-query.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { GraphQlError } from '@teambit/graphql';\nimport { GET_GRAPH, RawGraphQuery } from './get-graph.query';\nimport { GraphModel } from './graph-model';\n\ntype QueryVariables = {\n  ids: string[];\n  filter?: string;\n};\n\n/** provides dependencies graph data from graphQL */\nexport function useGraphQuery(componentId: string[], filter?: string) {\n  const { data, error, loading } = useDataQuery<RawGraphQuery, QueryVariables>(GET_GRAPH, {\n    variables: { ids: componentId, filter },\n  });\n\n  const rawGraph = data?.graph;\n  const clientError = !rawGraph && !loading ? new GraphQlError(404) : undefined;\n  const serverError = error ? new GraphQlError(500, error.message) : undefined;\n\n  return useMemo(() => {\n    return {\n      graph: rawGraph ? GraphModel.from(rawGraph) : undefined,\n      error: serverError || clientError,\n      loading,\n    };\n  }, [rawGraph, error]);\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAOA;AACO,SAASA,aAAT,CAAuBC,WAAvB,EAA8CC,MAA9C,EAA+D;EACpE,MAAM;IAAEC,IAAF;IAAQC,KAAR;IAAeC;EAAf,IAA2B,IAAAC,mCAAA,EAA4CC,qBAA5C,EAAuD;IACtFC,SAAS,EAAE;MAAEC,GAAG,EAAER,WAAP;MAAoBC;IAApB;EAD2E,CAAvD,CAAjC;EAIA,MAAMQ,QAAQ,GAAGP,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEQ,KAAvB;EACA,MAAMC,WAAW,GAAG,CAACF,QAAD,IAAa,CAACL,OAAd,GAAwB,KAAIQ,uBAAJ,EAAiB,GAAjB,CAAxB,GAAgDC,SAApE;EACA,MAAMC,WAAW,GAAGX,KAAK,GAAG,KAAIS,uBAAJ,EAAiB,GAAjB,EAAsBT,KAAK,CAACY,OAA5B,CAAH,GAA0CF,SAAnE;EAEA,OAAO,IAAAG,gBAAA,EAAQ,MAAM;IACnB,OAAO;MACLN,KAAK,EAAED,QAAQ,GAAGQ,wBAAA,CAAWC,IAAX,CAAgBT,QAAhB,CAAH,GAA+BI,SADzC;MAELV,KAAK,EAAEW,WAAW,IAAIH,WAFjB;MAGLP;IAHK,CAAP;EAKD,CANM,EAMJ,CAACK,QAAD,EAAWN,KAAX,CANI,CAAP;AAOD"}
+{"version":3,"names":["useGraphQuery","componentId","filter","data","error","loading","useDataQuery","GET_GRAPH","variables","ids","skip","rawGraph","graph","clientError","GraphQlError","undefined","serverError","message","useMemo","GraphModel","from"],"sources":["use-graph-query.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { GraphQlError } from '@teambit/graphql';\nimport { GET_GRAPH, RawGraphQuery } from './get-graph.query';\nimport { GraphModel } from './graph-model';\n\ntype QueryVariables = {\n  ids?: string[];\n  filter?: string;\n};\n\n/** provides dependencies graph data from graphQL */\nexport function useGraphQuery(componentId?: string[], filter?: string) {\n  const { data, error, loading } = useDataQuery<RawGraphQuery, QueryVariables>(GET_GRAPH, {\n    variables: { ids: componentId, filter },\n    skip: !componentId,\n  });\n\n  const rawGraph = data?.graph;\n  const clientError = !rawGraph && !loading ? new GraphQlError(404) : undefined;\n  const serverError = error ? new GraphQlError(500, error.message) : undefined;\n\n  return useMemo(() => {\n    return {\n      graph: rawGraph ? GraphModel.from(rawGraph) : undefined,\n      error: serverError || clientError,\n      loading,\n    };\n  }, [rawGraph, error]);\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAOA;AACO,SAASA,aAAT,CAAuBC,WAAvB,EAA+CC,MAA/C,EAAgE;EACrE,MAAM;IAAEC,IAAF;IAAQC,KAAR;IAAeC;EAAf,IAA2B,IAAAC,mCAAA,EAA4CC,qBAA5C,EAAuD;IACtFC,SAAS,EAAE;MAAEC,GAAG,EAAER,WAAP;MAAoBC;IAApB,CAD2E;IAEtFQ,IAAI,EAAE,CAACT;EAF+E,CAAvD,CAAjC;EAKA,MAAMU,QAAQ,GAAGR,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAES,KAAvB;EACA,MAAMC,WAAW,GAAG,CAACF,QAAD,IAAa,CAACN,OAAd,GAAwB,KAAIS,uBAAJ,EAAiB,GAAjB,CAAxB,GAAgDC,SAApE;EACA,MAAMC,WAAW,GAAGZ,KAAK,GAAG,KAAIU,uBAAJ,EAAiB,GAAjB,EAAsBV,KAAK,CAACa,OAA5B,CAAH,GAA0CF,SAAnE;EAEA,OAAO,IAAAG,gBAAA,EAAQ,MAAM;IACnB,OAAO;MACLN,KAAK,EAAED,QAAQ,GAAGQ,wBAAA,CAAWC,IAAX,CAAgBT,QAAhB,CAAH,GAA+BI,SADzC;MAELX,KAAK,EAAEY,WAAW,IAAIH,WAFjB;MAGLR;IAHK,CAAP;EAKD,CANM,EAMJ,CAACM,QAAD,EAAWP,KAAX,CANI,CAAP;AAOD"}

package/dist/ui/query/use-graph.d.ts

@@ -1,5 +1,5 @@
 export declare function useGraph(): {
-    graph: import("./graph-model").GraphModel | undefined;
+    graph: import("./graph-model").GraphModel<import("./node-model").NodeModel, import("./edge-model").EdgeModel> | undefined;
     error: import("@teambit/graphql").GraphQlError | undefined;
     loading: boolean;
 };

package/graph.compare.section.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Section } from '@teambit/component';
+import { DependenciesCompare } from '@teambit/graph';
+
+export class GraphCompareSection implements Section {
+  navigationLink = {
+    href: 'dependencies',
+    children: 'Dependencies',
+    order: 3,
+  };
+
+  route = {
+    path: 'dependencies/*',
+    element: <DependenciesCompare />,
+  };
+}