@teambit/graph 1.0.268 → 1.0.270

package/dist/{preview-1715278007132.js → preview-1715509699621.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_graph@1.0.268/dist/graph.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_graph@1.0.268/dist/graph.docs.md';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_graph@1.0.270/dist/graph.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_graph@1.0.270/dist/graph.docs.md';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

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

@@ -32,9 +32,9 @@ function _react() {
   };
   return data;
 }
-function _reactFlowRenderer() {
-  const data = _interopRequireWildcard(require("react-flow-renderer"));
-  _reactFlowRenderer = function () {
+function _reactflow() {
+  const data = _interopRequireWildcard(require("reactflow"));
+  _reactflow = function () {
     return data;
   };
   return data;
@@ -86,13 +86,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ComponentNodeContainer(props) {
   const {
-    sourcePosition = _reactFlowRenderer().Position.Top,
-    targetPosition = _reactFlowRenderer().Position.Bottom,
+    sourcePosition = _reactflow().Position.Top,
+    targetPosition = _reactflow().Position.Bottom,
     data,
     id
   } = props;
-  // @todo - this will be fixed as part of the react-flow-renderer v10 upgrade
-  const ReactFlowHandle = _reactFlowRenderer().Handle;
+  const ReactFlowHandle = _reactflow().Handle;
   return /*#__PURE__*/_react().default.createElement("div", {
     key: id
   }, /*#__PURE__*/_react().default.createElement(ReactFlowHandle, {
@@ -108,10 +107,10 @@ function ComponentNodeContainer(props) {
     type: data.type
   }));
 }
-const NodeTypes = {
-  ComponentNode: ComponentNodeContainer
-};
 function DependenciesCompare() {
+  const nodeTypes = _react().default.useMemo(() => ({
+    ComponentNode: ComponentNodeContainer
+  }), []);
   const graphRef = (0, _react().useRef)();
   const componentCompare = (0, _componentUiComponentCompare().useComponentCompare)();
   const baseId = componentCompare?.base?.model.id;
@@ -133,16 +132,24 @@ function DependenciesCompare() {
   });
   (0, _react().useEffect)(() => () => graphRef.current = undefined, []);
   (0, _react().useEffect)(() => {
-    graphRef.current?.fitView();
-  }, [elements]);
+    setTimeout(() => {
+      if (graph && graph.nodes.length <= 3) return graphRef.current?.fitView({
+        padding: 2
+      });
+      return graphRef.current?.fitView();
+    }, 0);
+  }, [graph]);
   const handleLoad = (0, _react().useCallback)(instance => {
     graphRef.current = instance;
     if ((graph?.nodes.length ?? 0) <= 3) {
       graphRef.current?.fitView({
-        padding: 2
+        padding: 2,
+        maxZoom: 1
       });
     } else {
-      instance.fitView();
+      instance.fitView({
+        maxZoom: 1
+      });
     }
   }, [graph?.nodes.length]);
   (0, _react().useEffect)(() => {
@@ -156,14 +163,14 @@ function DependenciesCompare() {
   const onCheckFilter = _isFiltered => {
     setFilter(_isFiltered ? 'runtimeOnly' : undefined);
   };
-  if (!loading && (!baseGraph || !compareGraph)) {
+  if (!loading && !graph) {
     return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null);
   }
   return /*#__PURE__*/_react().default.createElement("div", {
     className: (0, _classnames().default)([_dependenciesCompareModule().default.page, _graphPage().styles.graph])
   }, loading && /*#__PURE__*/_react().default.createElement("div", {
     className: _dependenciesCompareModule().default.loader
-  }, /*#__PURE__*/_react().default.createElement(_designUi().RoundLoader, null)), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().ReactFlowProvider, null, /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().default, {
+  }, /*#__PURE__*/_react().default.createElement(_designUi().RoundLoader, null)), !loading && /*#__PURE__*/_react().default.createElement(_reactflow().ReactFlowProvider, null, /*#__PURE__*/_react().default.createElement(_reactflow().default, {
     draggable: false,
     nodesDraggable: true,
     selectNodesOnDrag: false,
@@ -173,12 +180,16 @@ function DependenciesCompare() {
     maxZoom: 100,
     minZoom: 0,
     className: _dependenciesGraph().styles.graph,
-    elements: elements,
-    nodeTypes: NodeTypes,
-    onLoad: handleLoad
-  }, /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Background, null), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Controls, {
+    defaultNodes: elements.nodes,
+    defaultEdges: elements.edges,
+    nodeTypes: nodeTypes,
+    onInit: handleLoad,
+    proOptions: {
+      hideAttribution: true
+    }
+  }, /*#__PURE__*/_react().default.createElement(_reactflow().Background, null), /*#__PURE__*/_react().default.createElement(_reactflow().Controls, {
     className: _dependenciesGraph().styles.controls
-  }), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().MiniMap, {
+  }), /*#__PURE__*/_react().default.createElement(_reactflow().MiniMap, {
     nodeColor: _dependenciesGraph().calcMinimapColors,
     className: _dependenciesGraph().styles.minimap
   }), /*#__PURE__*/_react().default.createElement(_graphPage().GraphFilters, {

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","data","_interopRequireDefault","require","_designUi","_componentUiComponentCompare","_react","_interopRequireWildcard","_reactFlowRenderer","_query","_graphPage","_dependenciesGraph","_dependenciesCompareModule","_dependencyCompareNode","_diffGraph","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","ReactFlowHandle","Handle","createElement","key","type","position","isConnectable","DependencyCompareNode","node","NodeTypes","ComponentNode","DependenciesCompare","graphRef","useRef","componentCompare","useComponentCompare","baseId","base","model","compareId","compare","filter","setFilter","useState","isFiltered","loading","baseLoading","graph","baseGraph","useGraphQuery","toString","compareLoading","compareGraph","diffGraph","undefined","elements","calcElements","rootNode","useEffect","current","fitView","handleLoad","useCallback","instance","nodes","length","padding","setTimeout","onCheckFilter","_isFiltered","Fragment","className","classNames","styles","page","graphPageStyles","loader","RoundLoader","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","maxZoom","minZoom","dependenciesGraphStyles","nodeTypes","onLoad","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap","GraphFilters","filters","disable","onChangeFilter"],"sources":["dependencies-compare.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { RoundLoader } from '@teambit/design.ui.round-loader';\nimport { useComponentCompare } from '@teambit/component.ui.component-compare.context';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  NodeProps,\n  NodeTypesType,\n  OnLoadParams,\n  Position,\n  ReactFlowProvider,\n} from 'react-flow-renderer';\nimport { useGraphQuery } from '../query';\nimport { GraphFilter } from '../../model/graph-filters';\nimport { GraphFilters, styles as graphPageStyles } from '../graph-page';\nimport { calcMinimapColors, calcElements, styles as dependenciesGraphStyles } from '../dependencies-graph';\nimport styles from './dependencies-compare.module.scss';\nimport { DependencyCompareNode } from './dependency-compare-node';\nimport { diffGraph } from './diff-graph';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n  // @todo - this will be fixed as part of the react-flow-renderer v10 upgrade\n  const ReactFlowHandle = Handle as any;\n  return (\n    <div key={id}>\n      <ReactFlowHandle type=\"target\" position={targetPosition} isConnectable={false} />\n      <ReactFlowHandle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <DependencyCompareNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport function DependenciesCompare() {\n  const graphRef = useRef<OnLoadParams>();\n  const componentCompare = useComponentCompare();\n\n  const baseId = componentCompare?.base?.model.id;\n  const compareId = componentCompare?.compare?.model.id;\n\n  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');\n  const isFiltered = filter === 'runtimeOnly';\n  const { loading: baseLoading, graph: baseGraph } = useGraphQuery(baseId && [baseId.toString()], filter);\n  const { loading: compareLoading, graph: compareGraph } = useGraphQuery(compareId && [compareId.toString()], filter);\n  const loading = baseLoading || compareLoading;\n  const graph = diffGraph(baseGraph, compareGraph, baseId) ?? undefined;\n  const elements = calcElements(graph, { rootNode: baseId });\n\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    graphRef.current?.fitView();\n  }, [elements]);\n\n  const handleLoad = useCallback(\n    (instance: OnLoadParams) => {\n      graphRef.current = instance;\n      if ((graph?.nodes.length ?? 0) <= 3) {\n        graphRef.current?.fitView({\n          padding: 2,\n        });\n      } else {\n        instance.fitView();\n      }\n    },\n    [graph?.nodes.length]\n  );\n\n  useEffect(() => {\n    setTimeout(() => {\n      if ((graph?.nodes.length ?? 0) <= 3)\n        return graphRef.current?.fitView({\n          padding: 2,\n        });\n      return graphRef.current?.fitView();\n    }, 0);\n  }, [compareId?.toString(), baseId?.toString()]);\n\n  const onCheckFilter = (_isFiltered: boolean) => {\n    setFilter(_isFiltered ? 'runtimeOnly' : undefined);\n  };\n\n  if (!loading && (!baseGraph || !compareGraph)) {\n    return <></>;\n  }\n\n  return (\n    <div className={classNames([styles.page, graphPageStyles.graph])}>\n      {loading && (\n        <div className={styles.loader}>\n          <RoundLoader />\n        </div>\n      )}\n      <ReactFlowProvider>\n        <ReactFlow\n          draggable={false}\n          nodesDraggable={true}\n          selectNodesOnDrag={false}\n          nodesConnectable={false}\n          zoomOnDoubleClick={false}\n          elementsSelectable={false}\n          maxZoom={100}\n          minZoom={0}\n          className={dependenciesGraphStyles.graph}\n          elements={elements}\n          nodeTypes={NodeTypes}\n          onLoad={handleLoad}\n        >\n          <Background />\n          <Controls className={dependenciesGraphStyles.controls} />\n          <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />\n          <GraphFilters\n            className={graphPageStyles.filters}\n            disable={loading}\n            isFiltered={isFiltered}\n            onChangeFilter={onCheckFilter}\n          />\n        </ReactFlow>\n      </ReactFlowProvider>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_classnames","data","_interopRequireDefault","require","_designUi","_componentUiComponentCompare","_react","_interopRequireWildcard","_reactflow","_query","_graphPage","_dependenciesGraph","_dependenciesCompareModule","_dependencyCompareNode","_diffGraph","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","ReactFlowHandle","Handle","createElement","key","type","position","isConnectable","DependencyCompareNode","node","DependenciesCompare","nodeTypes","React","useMemo","ComponentNode","graphRef","useRef","componentCompare","useComponentCompare","baseId","base","model","compareId","compare","filter","setFilter","useState","isFiltered","loading","baseLoading","graph","baseGraph","useGraphQuery","toString","compareLoading","compareGraph","diffGraph","undefined","elements","calcElements","rootNode","useEffect","current","setTimeout","nodes","length","fitView","padding","handleLoad","useCallback","instance","maxZoom","onCheckFilter","_isFiltered","Fragment","className","classNames","styles","page","graphPageStyles","loader","RoundLoader","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","minZoom","dependenciesGraphStyles","defaultNodes","defaultEdges","edges","onInit","proOptions","hideAttribution","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap","GraphFilters","filters","disable","onChangeFilter"],"sources":["dependencies-compare.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { RoundLoader } from '@teambit/design.ui.round-loader';\nimport { useComponentCompare } from '@teambit/component.ui.component-compare.context';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  NodeProps,\n  NodeTypes,\n  Position,\n  ReactFlowProvider,\n  ReactFlowInstance,\n} from 'reactflow';\nimport { useGraphQuery } from '../query';\nimport { GraphFilter } from '../../model/graph-filters';\nimport { GraphFilters, styles as graphPageStyles } from '../graph-page';\nimport { calcMinimapColors, calcElements, styles as dependenciesGraphStyles } from '../dependencies-graph';\nimport styles from './dependencies-compare.module.scss';\nimport { DependencyCompareNode } from './dependency-compare-node';\nimport { diffGraph } from './diff-graph';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n  const ReactFlowHandle = Handle;\n  return (\n    <div key={id}>\n      <ReactFlowHandle type=\"target\" position={targetPosition} isConnectable={false} />\n      <ReactFlowHandle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <DependencyCompareNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\nexport function DependenciesCompare() {\n  const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);\n  const graphRef = useRef<ReactFlowInstance>();\n  const componentCompare = useComponentCompare();\n\n  const baseId = componentCompare?.base?.model.id;\n  const compareId = componentCompare?.compare?.model.id;\n\n  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');\n  const isFiltered = filter === 'runtimeOnly';\n  const { loading: baseLoading, graph: baseGraph } = useGraphQuery(baseId && [baseId.toString()], filter);\n  const { loading: compareLoading, graph: compareGraph } = useGraphQuery(compareId && [compareId.toString()], filter);\n  const loading = baseLoading || compareLoading;\n  const graph = diffGraph(baseGraph, compareGraph, baseId) ?? undefined;\n  const elements = calcElements(graph, { rootNode: baseId });\n\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (graph && graph.nodes.length <= 3)\n        return graphRef.current?.fitView({\n          padding: 2,\n        });\n      return graphRef.current?.fitView();\n    }, 0);\n  }, [graph]);\n\n  const handleLoad = useCallback(\n    (instance: ReactFlowInstance) => {\n      graphRef.current = instance;\n      if ((graph?.nodes.length ?? 0) <= 3) {\n        graphRef.current?.fitView({\n          padding: 2,\n          maxZoom: 1,\n        });\n      } else {\n        instance.fitView({\n          maxZoom: 1,\n        });\n      }\n    },\n    [graph?.nodes.length]\n  );\n\n  useEffect(() => {\n    setTimeout(() => {\n      if ((graph?.nodes.length ?? 0) <= 3)\n        return graphRef.current?.fitView({\n          padding: 2,\n        });\n      return graphRef.current?.fitView();\n    }, 0);\n  }, [compareId?.toString(), baseId?.toString()]);\n\n  const onCheckFilter = (_isFiltered: boolean) => {\n    setFilter(_isFiltered ? 'runtimeOnly' : undefined);\n  };\n\n  if (!loading && !graph) {\n    return <></>;\n  }\n\n  return (\n    <div className={classNames([styles.page, graphPageStyles.graph])}>\n      {loading && (\n        <div className={styles.loader}>\n          <RoundLoader />\n        </div>\n      )}\n      {!loading && (\n        <ReactFlowProvider>\n          <ReactFlow\n            draggable={false}\n            nodesDraggable={true}\n            selectNodesOnDrag={false}\n            nodesConnectable={false}\n            zoomOnDoubleClick={false}\n            elementsSelectable={false}\n            maxZoom={100}\n            minZoom={0}\n            className={dependenciesGraphStyles.graph}\n            defaultNodes={elements.nodes}\n            defaultEdges={elements.edges}\n            nodeTypes={nodeTypes}\n            onInit={handleLoad}\n            proOptions={{\n              hideAttribution: true,\n            }}\n          >\n            <Background />\n            <Controls className={dependenciesGraphStyles.controls} />\n            <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />\n            <GraphFilters\n              className={graphPageStyles.filters}\n              disable={loading}\n              isFiltered={isFiltered}\n              onChangeFilter={onCheckFilter}\n            />\n          </ReactFlow>\n        </ReactFlowProvider>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -11,9 +11,9 @@ function _react() {
   };
   return data;
 }
-function _reactFlowRenderer() {
-  const data = require("react-flow-renderer");
-  _reactFlowRenderer = function () {
+function _reactflow() {
+  const data = require("reactflow");
+  _reactflow = function () {
     return data;
   };
   return data;
@@ -39,7 +39,10 @@ function calcElements(graph, {
   rootNode
 }) {
   return (0, _react().useMemo)(() => {
-    if (!graph) return [];
+    if (!graph) return {
+      nodes: [],
+      edges: []
+    };
     const positions = (0, _calcLayout().calcLayout)(graph);
     const nodes = Array.from(graph.nodes.values()).map(x => {
       return {
@@ -65,9 +68,15 @@ function calcElements(graph, {
       labelBgPadding: [4, 4],
       type: 'smoothstep',
       className: (0, _depEdge().depTypeToClass)(e.dependencyLifecycleType),
-      arrowHeadType: _reactFlowRenderer().ArrowHeadType.Arrow
+      arrowHeadType: _reactflow().MarkerType.Arrow,
+      markerEnd: {
+        type: _reactflow().MarkerType.Arrow
+      }
     }));
-    return [...nodes, ...edges];
+    return {
+      nodes,
+      edges
+    };
   }, [graph]);
 }
 

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","require","_reactFlowRenderer","_calcLayout","_depEdge","calcElements","graph","rootNode","useMemo","positions","calcLayout","nodes","Array","from","values","map","x","id","type","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,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,mBAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,kBAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAI,SAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,QAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAMA;AACA;AACA;AACO,SAASK,YAAYA,CAACC,KAAmD,EAAE;EAAEC;AAA0B,CAAC,EAAE;EAC/G,OAAO,IAAAC,gBAAO,EAAC,MAAM;IACnB,IAAI,CAACF,KAAK,EAAE,OAAO,EAAE;IAErB,MAAMG,SAAS,GAAG,IAAAC,wBAAU,EAACJ,KAAK,CAAC;IAEnC,MAAMK,KAAa,GAAGC,KAAK,CAACC,IAAI,CAACP,KAAK,CAACK,KAAK,CAACG,MAAM,CAAC,CAAC,CAAC,CAACC,GAAG,CAAEC,CAAC,IAAK;MAChE,OAAO;QACLC,EAAE,EAAED,CAAC,CAACC,EAAE;QACRC,IAAI,EAAE,eAAe;QACrBlB,IAAI,EAAE;UACJmB,IAAI,EAAEH,CAAC;UACPE,IAAI,EAAEX,QAAQ,IAAIS,CAAC,CAACI,SAAS,CAACH,EAAE,CAACI,OAAO,CAACd,QAAQ,EAAE;YAAEe,aAAa,EAAE;UAAK,CAAC,CAAC,GAAG,MAAM,GAAGC;QACzF,CAAC;QACDC,QAAQ,EAAEf,SAAS,CAACgB,GAAG,CAACT,CAAC,CAACC,EAAE,CAAC,IAAI;UAAED,CAAC,EAAE,CAAC;UAAEU,CAAC,EAAE;QAAE;MAChD,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,KAAa,GAAGrB,KAAK,CAACqB,KAAK,CAACZ,GAAG,CAAEa,CAAC,KAAM;MAC5CX,EAAE,EAAG,IAAGW,CAAC,CAACC,QAAS,KAAID,CAAC,CAACE,QAAS,EAAC;MACnCC,MAAM,EAAEH,CAAC,CAACC,QAAQ;MAClBG,MAAM,EAAEJ,CAAC,CAACE,QAAQ;MAClBG,KAAK,EAAE,IAAAC,yBAAc,EAACN,CAAC,CAACO,uBAAuB,CAAC;MAChDC,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACtBlB,IAAI,EAAE,YAAY;MAClBmB,SAAS,EAAE,IAAAC,yBAAc,EAACV,CAAC,CAACO,uBAAuB,CAAC;MACpDI,aAAa,EAAEC,kCAAa,CAACC;IAC/B,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,GAAG9B,KAAK,EAAE,GAAGgB,KAAK,CAAC;EAC7B,CAAC,EAAE,CAACrB,KAAK,CAAC,CAAC;AACb","ignoreList":[]}
+{"version":3,"names":["_react","data","require","_reactflow","_calcLayout","_depEdge","calcElements","graph","rootNode","useMemo","nodes","edges","positions","calcLayout","Array","from","values","map","x","id","type","node","component","isEqual","ignoreVersion","undefined","position","get","y","e","sourceId","targetId","source","target","label","depTypeToLabel","dependencyLifecycleType","labelBgPadding","className","depTypeToClass","arrowHeadType","MarkerType","Arrow","markerEnd"],"sources":["calc-elements.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { MarkerType, Edge, Node } from 'reactflow';\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(\n  graph: GraphModel<NodeModel, EdgeModel> | undefined,\n  { rootNode }: ElementsOptions\n): { nodes: Node[]; edges: Edge[] } {\n  return useMemo(() => {\n    if (!graph) return { nodes: [], edges: [] };\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: MarkerType.Arrow,\n      markerEnd: {\n        type: MarkerType.Arrow,\n      },\n    }));\n\n    return { nodes, edges };\n  }, [graph]);\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,WAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,UAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAI,SAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,QAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAMA;AACA;AACA;AACO,SAASK,YAAYA,CAC1BC,KAAmD,EACnD;EAAEC;AAA0B,CAAC,EACK;EAClC,OAAO,IAAAC,gBAAO,EAAC,MAAM;IACnB,IAAI,CAACF,KAAK,EAAE,OAAO;MAAEG,KAAK,EAAE,EAAE;MAAEC,KAAK,EAAE;IAAG,CAAC;IAE3C,MAAMC,SAAS,GAAG,IAAAC,wBAAU,EAACN,KAAK,CAAC;IAEnC,MAAMG,KAAa,GAAGI,KAAK,CAACC,IAAI,CAACR,KAAK,CAACG,KAAK,CAACM,MAAM,CAAC,CAAC,CAAC,CAACC,GAAG,CAAEC,CAAC,IAAK;MAChE,OAAO;QACLC,EAAE,EAAED,CAAC,CAACC,EAAE;QACRC,IAAI,EAAE,eAAe;QACrBnB,IAAI,EAAE;UACJoB,IAAI,EAAEH,CAAC;UACPE,IAAI,EAAEZ,QAAQ,IAAIU,CAAC,CAACI,SAAS,CAACH,EAAE,CAACI,OAAO,CAACf,QAAQ,EAAE;YAAEgB,aAAa,EAAE;UAAK,CAAC,CAAC,GAAG,MAAM,GAAGC;QACzF,CAAC;QACDC,QAAQ,EAAEd,SAAS,CAACe,GAAG,CAACT,CAAC,CAACC,EAAE,CAAC,IAAI;UAAED,CAAC,EAAE,CAAC;UAAEU,CAAC,EAAE;QAAE;MAChD,CAAC;IACH,CAAC,CAAC;IAEF,MAAMjB,KAAa,GAAGJ,KAAK,CAACI,KAAK,CAACM,GAAG,CAAEY,CAAC,KAAM;MAC5CV,EAAE,EAAG,IAAGU,CAAC,CAACC,QAAS,KAAID,CAAC,CAACE,QAAS,EAAC;MACnCC,MAAM,EAAEH,CAAC,CAACC,QAAQ;MAClBG,MAAM,EAAEJ,CAAC,CAACE,QAAQ;MAClBG,KAAK,EAAE,IAAAC,yBAAc,EAACN,CAAC,CAACO,uBAAuB,CAAC;MAChDC,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACtBjB,IAAI,EAAE,YAAY;MAClBkB,SAAS,EAAE,IAAAC,yBAAc,EAACV,CAAC,CAACO,uBAAuB,CAAC;MACpDI,aAAa,EAAEC,uBAAU,CAACC,KAAK;MAC/BC,SAAS,EAAE;QACTvB,IAAI,EAAEqB,uBAAU,CAACC;MACnB;IACF,CAAC,CAAC,CAAC;IAEH,OAAO;MAAEhC,KAAK;MAAEC;IAAM,CAAC;EACzB,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;AACb","ignoreList":[]}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calcLayout = calcLayout;
 function _dagre() {
-  const data = _interopRequireWildcard(require("dagre"));
+  const data = _interopRequireWildcard(require("@dagrejs/dagre"));
   _dagre = function () {
     return data;
   };
@@ -13,9 +13,14 @@ function _dagre() {
 }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const NODE_WIDTH = 260;
 const NODE_HEIGHT = 90;
-const BOTTOM_TO_TOP = 'BT';
+const TOP_TO_BOTTOM = 'TB';
 
 /**
  * calculate the specific location of each node in the graph
@@ -23,19 +28,21 @@ const BOTTOM_TO_TOP = 'BT';
 function calcLayout(graph) {
   const g = new (_dagre().graphlib.Graph)();
   g.setGraph({
-    rankdir: BOTTOM_TO_TOP
+    rankdir: TOP_TO_BOTTOM,
+    nodesep: 25,
+    ranksep: 100,
+    edgesep: 100,
+    ranker: 'longest-path',
+    acyclicer: 'greedy'
   });
   g.setDefaultEdgeLabel(() => ({}));
 
   // make a new instance of { width, height } per node, or dagre will get confused and place all nodes in the same spot
-  graph.nodes.forEach(n => g.setNode(n.id, {
+  graph.nodes.forEach(n => g.setNode(n.id, _objectSpread(_objectSpread({}, n), {}, {
     width: NODE_WIDTH,
     height: NODE_HEIGHT
-  }));
-  graph.edges.forEach(e => g.setEdge({
-    v: e.sourceId,
-    w: e.targetId
-  }));
+  })));
+  graph.edges.forEach(e => g.setEdge(e.sourceId, e.targetId));
 
   // position items in graph
   _dagre().default.layout(g);

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

@@ -1 +1 @@
-{"version":3,"names":["_dagre","data","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NODE_WIDTH","NODE_HEIGHT","BOTTOM_TO_TOP","calcLayout","graph","g","graphlib","Graph","setGraph","rankdir","setDefaultEdgeLabel","nodes","forEach","setNode","id","width","height","edges","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":"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","ignoreList":[]}
+{"version":3,"names":["_dagre","data","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","obj","key","value","_toPropertyKey","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","NODE_WIDTH","NODE_HEIGHT","TOP_TO_BOTTOM","calcLayout","graph","g","graphlib","Graph","setGraph","rankdir","nodesep","ranksep","edgesep","ranker","acyclicer","setDefaultEdgeLabel","nodes","setNode","id","width","height","edges","setEdge","sourceId","targetId","dagre","layout","positionsArr","map","nodeId","node","pos","x","y","Map"],"sources":["calc-layout.tsx"],"sourcesContent":["import dagre, { graphlib } from '@dagrejs/dagre';\nimport { EdgeModel, GraphModel, NodeModel } from '../query';\n\nconst NODE_WIDTH = 260;\nconst NODE_HEIGHT = 90;\n\nconst TOP_TO_BOTTOM = 'TB';\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({\n    rankdir: TOP_TO_BOTTOM,\n    nodesep: 25,\n    ranksep: 100,\n    edgesep: 100,\n    ranker: 'longest-path',\n    acyclicer: 'greedy',\n  });\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, { ...n, width: NODE_WIDTH, height: NODE_HEIGHT }));\n  graph.edges.forEach((e) => g.setEdge(e.sourceId, 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":"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","ignoreList":[]}

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

@@ -1,11 +1,12 @@
-import { OnLoadParams, ReactFlowProps } from 'react-flow-renderer';
+import { ReactFlowInstance, ReactFlowProps } from 'reactflow';
 import { ComponentID } from '@teambit/component';
 import { ComponentWidgetSlot } from '../../graph.ui.runtime';
 import { EdgeModel, GraphModel, NodeModel } from '../query';
+import 'reactflow/dist/style.css';
 export type DependenciesGraphProps = {
     rootNode: ComponentID;
     graph: GraphModel<NodeModel, EdgeModel>;
     componentWidgets: ComponentWidgetSlot;
-    onLoad?: (instance: OnLoadParams) => void;
+    onLoad?: (instance: ReactFlowInstance) => void;
 } & Omit<ReactFlowProps, 'elements'>;
 export declare function DependenciesGraph({ graph, rootNode, componentWidgets, className, onLoad, children, ...rest }: DependenciesGraphProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,9 +18,9 @@ function _classnames() {
   };
   return data;
 }
-function _reactFlowRenderer() {
-  const data = _interopRequireWildcard(require("react-flow-renderer"));
-  _reactFlowRenderer = function () {
+function _reactflow() {
+  const data = _interopRequireWildcard(require("reactflow"));
+  _reactflow = function () {
     return data;
   };
   return data;
@@ -53,6 +53,7 @@ function _graphContext() {
   };
   return data;
 }
+require("reactflow/dist/style.css");
 function _dependenciesGraphModule() {
   const data = _interopRequireDefault(require("./dependencies-graph.module.scss"));
   _dependenciesGraphModule = function () {
@@ -69,13 +70,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 function ComponentNodeContainer(props) {
   const {
-    sourcePosition = _reactFlowRenderer().Position.Top,
-    targetPosition = _reactFlowRenderer().Position.Bottom,
+    sourcePosition = _reactflow().Position.Top,
+    targetPosition = _reactflow().Position.Bottom,
     data,
     id
   } = props;
-  // @todo - this will be fixed as part of the react-flow-renderer v10 upgrade
-  const ReactFlowHandle = _reactFlowRenderer().Handle;
+  const ReactFlowHandle = _reactflow().Handle;
   return /*#__PURE__*/_react().default.createElement("div", {
     key: id
   }, /*#__PURE__*/_react().default.createElement(ReactFlowHandle, {
@@ -91,11 +91,6 @@ function ComponentNodeContainer(props) {
     type: data.type
   }));
 }
-
-// @ts-ignore - incorrect NodeTypes https://github.com/wbkd/react-flow/issues/2101 (#5746)
-const NodeTypes = {
-  ComponentNode: ComponentNodeContainer
-};
 function DependenciesGraph(_ref) {
   let {
       graph,
@@ -106,6 +101,9 @@ function DependenciesGraph(_ref) {
       children
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
+  const nodeTypes = _react().default.useMemo(() => ({
+    ComponentNode: ComponentNodeContainer
+  }), []);
   const graphRef = (0, _react().useRef)();
   const elements = (0, _calcElements().calcElements)(graph, {
     rootNode
@@ -116,10 +114,13 @@ function DependenciesGraph(_ref) {
   const handleLoad = (0, _react().useCallback)(instance => {
     if ((graph?.nodes.length ?? 0) <= 3) {
       instance.fitView({
-        padding: 2
+        padding: 2,
+        maxZoom: 1
       });
     } else {
-      instance.fitView();
+      instance.fitView({
+        maxZoom: 1
+      });
     }
     onLoad?.(instance);
   }, [onLoad]);
@@ -136,7 +137,7 @@ function DependenciesGraph(_ref) {
   }, [graph]);
   return /*#__PURE__*/_react().default.createElement(_graphContext().ComponentGraphContext.Provider, {
     value: context
-  }, /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().ReactFlowProvider, null, /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().default, _extends({
+  }, /*#__PURE__*/_react().default.createElement(_reactflow().ReactFlowProvider, null, /*#__PURE__*/_react().default.createElement(_reactflow().default, _extends({
     draggable: false,
     nodesDraggable: true,
     selectNodesOnDrag: false,
@@ -147,12 +148,16 @@ function DependenciesGraph(_ref) {
     minZoom: 0
   }, rest, {
     className: (0, _classnames().default)(_dependenciesGraphModule().default.graph, className),
-    elements: elements,
-    nodeTypes: NodeTypes,
-    onLoad: handleLoad
-  }), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Background, null), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Controls, {
+    defaultNodes: elements.nodes,
+    defaultEdges: elements.edges,
+    nodeTypes: nodeTypes,
+    onInit: handleLoad,
+    proOptions: {
+      hideAttribution: true
+    }
+  }), /*#__PURE__*/_react().default.createElement(_reactflow().Background, null), /*#__PURE__*/_react().default.createElement(_reactflow().Controls, {
     className: _dependenciesGraphModule().default.controls
-  }), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().MiniMap, {
+  }), /*#__PURE__*/_react().default.createElement(_reactflow().MiniMap, {
     nodeColor: _minimap().calcMinimapColors,
     className: _dependenciesGraphModule().default.minimap
   }), children)));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactFlowRenderer","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","ReactFlowHandle","Handle","createElement","type","position","isConnectable","ComponentNode","node","NodeTypes","DependenciesGraph","_ref","graph","rootNode","componentWidgets","className","onLoad","children","rest","graphRef","useRef","elements","calcElements","context","useMemo","handleLoad","useCallback","instance","nodes","fitView","padding","useEffect","current","undefined","setTimeout","ComponentGraphContext","Provider","value","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","maxZoom","minZoom","classnames","styles","nodeTypes","Background","Controls","controls","MiniMap","nodeColor","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  // @todo - this will be fixed as part of the react-flow-renderer v10 upgrade\n  const ReactFlowHandle = Handle as any;\n  return (\n    <div key={id}>\n      <ReactFlowHandle type=\"target\" position={targetPosition} isConnectable={false} />\n      <ReactFlowHandle 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      if ((graph?.nodes.length ?? 0) <= 3) {\n        instance.fitView({\n          padding: 2,\n        });\n      } else {\n        instance.fitView();\n      }\n      onLoad?.(instance);\n    },\n    [onLoad]\n  );\n\n  // clear ref on unmount\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (graph.nodes.length <= 3)\n        return graphRef.current?.fitView({\n          padding: 2,\n        });\n      return graphRef.current?.fitView();\n    }, 0);\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={100}\n          minZoom={0}\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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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactflow","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","ReactFlowHandle","Handle","createElement","type","position","isConnectable","ComponentNode","node","DependenciesGraph","_ref","graph","rootNode","componentWidgets","className","onLoad","children","rest","nodeTypes","React","useMemo","graphRef","useRef","elements","calcElements","context","handleLoad","useCallback","instance","nodes","fitView","padding","maxZoom","useEffect","current","undefined","setTimeout","ComponentGraphContext","Provider","value","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","minZoom","classnames","styles","defaultNodes","defaultEdges","edges","onInit","proOptions","hideAttribution","Background","Controls","controls","MiniMap","nodeColor","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  NodeTypes,\n  ReactFlowInstance,\n  Position,\n  ReactFlowProps,\n  ReactFlowProvider,\n} from 'reactflow';\nimport { ComponentID } from '@teambit/component';\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';\nimport 'reactflow/dist/style.css';\nimport styles from './dependencies-graph.module.scss';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n  const ReactFlowHandle = Handle;\n  return (\n    <div key={id}>\n      <ReactFlowHandle type=\"target\" position={targetPosition} isConnectable={false} />\n      <ReactFlowHandle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <ComponentNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\nexport type DependenciesGraphProps = {\n  rootNode: ComponentID;\n  graph: GraphModel<NodeModel, EdgeModel>;\n  componentWidgets: ComponentWidgetSlot;\n  onLoad?: (instance: ReactFlowInstance) => 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 nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);\n  const graphRef = useRef<ReactFlowInstance>();\n  const elements = calcElements(graph, { rootNode });\n\n  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);\n\n  const handleLoad = useCallback(\n    (instance: ReactFlowInstance) => {\n      if ((graph?.nodes.length ?? 0) <= 3) {\n        instance.fitView({\n          padding: 2,\n          maxZoom: 1,\n        });\n      } else {\n        instance.fitView({\n          maxZoom: 1,\n        });\n      }\n      onLoad?.(instance);\n    },\n    [onLoad]\n  );\n\n  // clear ref on unmount\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (graph.nodes.length <= 3)\n        return graphRef.current?.fitView({\n          padding: 2,\n        });\n      return graphRef.current?.fitView();\n    }, 0);\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={100}\n          minZoom={0}\n          {...rest}\n          className={classnames(styles.graph, className)}\n          defaultNodes={elements.nodes}\n          defaultEdges={elements.edges}\n          nodeTypes={nodeTypes}\n          onInit={handleLoad}\n          proOptions={{\n            hideAttribution: true,\n          }}\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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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import { Node } from 'react-flow-renderer';
+import { Node } from 'reactflow';
 export declare function calcMinimapColors(node: Node): string;

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

@@ -1 +1 @@
-{"version":3,"names":["_componentNode","data","require","calcMinimapColors","node","type","rootNodeColor","externalNodeColor","defaultNodeColor"],"sources":["minimap.ts"],"sourcesContent":["import { Node } from 'react-flow-renderer';\nimport { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';\n\nexport function calcMinimapColors(node: Node) {\n  const type = node.data?.type;\n\n  switch (type) {\n    case 'root':\n      return rootNodeColor;\n    case 'external':\n      return externalNodeColor;\n    default:\n      return defaultNodeColor;\n  }\n}\n"],"mappings":";;;;;;AACA,SAAAA,eAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,cAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEO,SAASE,iBAAiBA,CAACC,IAAU,EAAE;EAC5C,MAAMC,IAAI,GAAGD,IAAI,CAACH,IAAI,EAAEI,IAAI;EAE5B,QAAQA,IAAI;IACV,KAAK,MAAM;MACT,OAAOC,8BAAa;IACtB,KAAK,UAAU;MACb,OAAOC,kCAAiB;IAC1B;MACE,OAAOC,iCAAgB;EAC3B;AACF","ignoreList":[]}
+{"version":3,"names":["_componentNode","data","require","calcMinimapColors","node","type","rootNodeColor","externalNodeColor","defaultNodeColor"],"sources":["minimap.ts"],"sourcesContent":["import { Node } from 'reactflow';\nimport { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';\n\nexport function calcMinimapColors(node: Node) {\n  const type = node.data?.type;\n\n  switch (type) {\n    case 'root':\n      return rootNodeColor;\n    case 'external':\n      return externalNodeColor;\n    default:\n      return defaultNodeColor;\n  }\n}\n"],"mappings":";;;;;;AACA,SAAAA,eAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,cAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEO,SAASE,iBAAiBA,CAACC,IAAU,EAAE;EAC5C,MAAMC,IAAI,GAAGD,IAAI,CAACH,IAAI,EAAEI,IAAI;EAE5B,QAAQA,IAAI;IACV,KAAK,MAAM;MACT,OAAOC,8BAAa;IACtB,KAAK,UAAU;MACb,OAAOC,kCAAiB;IAC1B;MACE,OAAOC,iCAAgB;EAC3B;AACF","ignoreList":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "1.0.268",
+  "version": "1.0.270",
   "homepage": "https://bit.cloud/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "1.0.268"
+    "version": "1.0.270"
   },
   "dependencies": {
     "graphlib": "2.1.8",
@@ -14,8 +14,8 @@
     "chalk": "2.4.2",
     "graphql-tag": "2.12.1",
     "classnames": "2.2.6",
-    "react-flow-renderer": "8.3.7",
-    "dagre": "0.8.5",
+    "reactflow": "^11.11.3",
+    "@dagrejs/dagre": "^1.1.2",
     "semver": "7.5.2",
     "@teambit/component-id": "1.2.0",
     "@teambit/graph.cleargraph": "0.0.8",
@@ -35,14 +35,14 @@
     "@teambit/component.ui.component-compare.status-resolver": "0.0.9",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.505",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.501",
-    "@teambit/component": "1.0.268",
+    "@teambit/component": "1.0.270",
     "@teambit/cli": "0.0.865",
     "@teambit/toolbox.string.random": "0.0.1",
     "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.109",
-    "@teambit/graphql": "1.0.268",
+    "@teambit/graphql": "1.0.270",
     "@teambit/logger": "0.0.958",
-    "@teambit/component-compare": "1.0.268",
-    "@teambit/ui": "1.0.268",
+    "@teambit/component-compare": "1.0.270",
+    "@teambit/ui": "1.0.270",
     "@teambit/component.modules.component-url": "0.0.167",
     "@teambit/envs.ui.env-icon": "0.0.505",
     "@teambit/component.ui.component-compare.context": "0.0.118"
@@ -51,7 +51,6 @@
     "@types/graphlib": "2.1.7",
     "@types/lodash": "4.14.165",
     "@types/classnames": "2.2.11",
-    "@types/dagre": "0.7.44",
     "@types/semver": "7.3.4",
     "@types/mocha": "9.1.0",
     "chai": "4.3.0",