@teambit/graph 1.0.267 → 1.0.269

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "1.0.267",
+  "version": "1.0.269",
   "homepage": "https://bit.cloud/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "1.0.267"
+    "version": "1.0.269"
   },
   "dependencies": {
     "graphlib": "2.1.8",
@@ -14,35 +14,35 @@
     "chalk": "2.4.2",
     "graphql-tag": "2.12.1",
     "classnames": "2.2.6",
-    "react-flow-renderer": "8.3.7",
+    "reactflow": "^11.11.3",
+    "@dagrejs/dagre": "^1.1.2",
     "semver": "7.5.2",
-    "dagre": "0.8.5",
     "@teambit/component-id": "1.2.0",
     "@teambit/graph.cleargraph": "0.0.8",
     "@teambit/harmony": "0.4.6",
     "@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.7",
-    "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.text.muted-text": "1.0.1",
     "@teambit/component.ui.deprecation-icon": "0.0.509",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
+    "@teambit/base-ui.routing.nav-link": "1.0.0",
+    "@teambit/evangelist.input.checkbox.label": "1.0.3",
+    "@teambit/design.ui.pages.not-found": "0.0.371",
+    "@teambit/design.ui.pages.server-error": "0.0.368",
+    "@teambit/documenter.ui.heading": "4.1.1",
+    "@teambit/ui-foundation.ui.full-loader": "0.0.500",
     "@teambit/design.ui.round-loader": "0.0.355",
     "@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/evangelist.input.checkbox.label": "1.0.3",
-    "@teambit/design.ui.pages.not-found": "0.0.366",
-    "@teambit/design.ui.pages.server-error": "0.0.366",
-    "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/ui-foundation.ui.full-loader": "0.0.500",
-    "@teambit/component": "1.0.267",
-    "@teambit/cli": "0.0.864",
+    "@teambit/component": "1.0.269",
+    "@teambit/cli": "0.0.865",
     "@teambit/toolbox.string.random": "0.0.1",
-    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.105",
-    "@teambit/graphql": "1.0.267",
-    "@teambit/logger": "0.0.957",
-    "@teambit/component-compare": "1.0.267",
-    "@teambit/ui": "1.0.267",
+    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.109",
+    "@teambit/graphql": "1.0.269",
+    "@teambit/logger": "0.0.958",
+    "@teambit/component-compare": "1.0.269",
+    "@teambit/ui": "1.0.269",
     "@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"
@@ -52,7 +52,6 @@
     "@types/lodash": "4.14.165",
     "@types/classnames": "2.2.11",
     "@types/semver": "7.3.4",
-    "@types/dagre": "0.7.44",
     "@types/mocha": "9.1.0",
     "chai": "4.3.0",
     "@teambit/harmony.envs.core-aspect-env": "0.0.33"

package/ui/dependencies-compare/dependencies-compare.tsx

@@ -8,11 +8,11 @@ import ReactFlow, {
   Handle,
   MiniMap,
   NodeProps,
-  NodeTypesType,
-  OnLoadParams,
+  NodeTypes,
   Position,
   ReactFlowProvider,
-} from 'react-flow-renderer';
+  ReactFlowInstance,
+} from 'reactflow';
 import { useGraphQuery } from '../query';
 import { GraphFilter } from '../../model/graph-filters';
 import { GraphFilters, styles as graphPageStyles } from '../graph-page';
@@ -23,8 +23,7 @@ import { diffGraph } from './diff-graph';
 
 function ComponentNodeContainer(props: NodeProps) {
   const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;
-  // @todo - this will be fixed as part of the react-flow-renderer v10 upgrade
-  const ReactFlowHandle = Handle as any;
+  const ReactFlowHandle = Handle;
   return (
     <div key={id}>
       <ReactFlowHandle type="target" position={targetPosition} isConnectable={false} />
@@ -34,10 +33,9 @@ function ComponentNodeContainer(props: NodeProps) {
   );
 }
 
-const NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };
-
 export function DependenciesCompare() {
-  const graphRef = useRef<OnLoadParams>();
+  const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);
+  const graphRef = useRef<ReactFlowInstance>();
   const componentCompare = useComponentCompare();
 
   const baseId = componentCompare?.base?.model.id;
@@ -54,18 +52,27 @@ export function DependenciesCompare() {
   useEffect(() => () => (graphRef.current = undefined), []);
 
   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 = useCallback(
-    (instance: OnLoadParams) => {
+    (instance: ReactFlowInstance) => {
       graphRef.current = instance;
       if ((graph?.nodes.length ?? 0) <= 3) {
         graphRef.current?.fitView({
           padding: 2,
+          maxZoom: 1,
         });
       } else {
-        instance.fitView();
+        instance.fitView({
+          maxZoom: 1,
+        });
       }
     },
     [graph?.nodes.length]
@@ -85,7 +92,7 @@ export function DependenciesCompare() {
     setFilter(_isFiltered ? 'runtimeOnly' : undefined);
   };
 
-  if (!loading && (!baseGraph || !compareGraph)) {
+  if (!loading && !graph) {
     return <></>;
   }
 
@@ -96,32 +103,38 @@ export function DependenciesCompare() {
           <RoundLoader />
         </div>
       )}
-      <ReactFlowProvider>
-        <ReactFlow
-          draggable={false}
-          nodesDraggable={true}
-          selectNodesOnDrag={false}
-          nodesConnectable={false}
-          zoomOnDoubleClick={false}
-          elementsSelectable={false}
-          maxZoom={100}
-          minZoom={0}
-          className={dependenciesGraphStyles.graph}
-          elements={elements}
-          nodeTypes={NodeTypes}
-          onLoad={handleLoad}
-        >
-          <Background />
-          <Controls className={dependenciesGraphStyles.controls} />
-          <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />
-          <GraphFilters
-            className={graphPageStyles.filters}
-            disable={loading}
-            isFiltered={isFiltered}
-            onChangeFilter={onCheckFilter}
-          />
-        </ReactFlow>
-      </ReactFlowProvider>
+      {!loading && (
+        <ReactFlowProvider>
+          <ReactFlow
+            draggable={false}
+            nodesDraggable={true}
+            selectNodesOnDrag={false}
+            nodesConnectable={false}
+            zoomOnDoubleClick={false}
+            elementsSelectable={false}
+            maxZoom={100}
+            minZoom={0}
+            className={dependenciesGraphStyles.graph}
+            defaultNodes={elements.nodes}
+            defaultEdges={elements.edges}
+            nodeTypes={nodeTypes}
+            onInit={handleLoad}
+            proOptions={{
+              hideAttribution: true,
+            }}
+          >
+            <Background />
+            <Controls className={dependenciesGraphStyles.controls} />
+            <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />
+            <GraphFilters
+              className={graphPageStyles.filters}
+              disable={loading}
+              isFiltered={isFiltered}
+              onChangeFilter={onCheckFilter}
+            />
+          </ReactFlow>
+        </ReactFlowProvider>
+      )}
     </div>
   );
 }

package/ui/dependencies-graph/calc-elements.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { ArrowHeadType, Edge, Node } from 'react-flow-renderer';
+import { MarkerType, Edge, Node } from 'reactflow';
 import { ComponentID } from '@teambit/component';
 import { calcLayout } from './calc-layout';
 import { EdgeModel, GraphModel, NodeModel } from '../query';
@@ -13,9 +13,12 @@ type ElementsOptions = {
 /**
  * generate Nodes and Edges for the ReactFlowRenderer graph renderer
  */
-export function calcElements(graph: GraphModel<NodeModel, EdgeModel> | undefined, { rootNode }: ElementsOptions) {
+export function calcElements(
+  graph: GraphModel<NodeModel, EdgeModel> | undefined,
+  { rootNode }: ElementsOptions
+): { nodes: Node[]; edges: Edge[] } {
   return useMemo(() => {
-    if (!graph) return [];
+    if (!graph) return { nodes: [], edges: [] };
 
     const positions = calcLayout(graph);
 
@@ -39,9 +42,12 @@ export function calcElements(graph: GraphModel<NodeModel, EdgeModel> | undefined
       labelBgPadding: [4, 4],
       type: 'smoothstep',
       className: depTypeToClass(e.dependencyLifecycleType),
-      arrowHeadType: ArrowHeadType.Arrow,
+      arrowHeadType: MarkerType.Arrow,
+      markerEnd: {
+        type: MarkerType.Arrow,
+      },
     }));
 
-    return [...nodes, ...edges];
+    return { nodes, edges };
   }, [graph]);
 }

package/ui/dependencies-graph/calc-layout.tsx

@@ -1,22 +1,29 @@
-import dagre, { graphlib } from 'dagre';
+import dagre, { graphlib } from '@dagrejs/dagre';
 import { EdgeModel, GraphModel, NodeModel } from '../query';
 
 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
  */
 export function calcLayout(graph: GraphModel<NodeModel, EdgeModel>) {
   const g = new graphlib.Graph();
-  g.setGraph({ rankdir: BOTTOM_TO_TOP });
+  g.setGraph({
+    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, { width: NODE_WIDTH, height: NODE_HEIGHT }));
-  graph.edges.forEach((e) => g.setEdge({ v: e.sourceId, w: e.targetId }));
+  graph.nodes.forEach((n) => g.setNode(n.id, { ...n, width: NODE_WIDTH, height: NODE_HEIGHT }));
+  graph.edges.forEach((e) => g.setEdge(e.sourceId, e.targetId));
 
   // position items in graph
   dagre.layout(g);

package/ui/dependencies-graph/dependencies-graph.tsx

@@ -6,27 +6,25 @@ import ReactFlow, {
   Handle,
   MiniMap,
   NodeProps,
-  NodeTypesType,
-  OnLoadParams,
+  NodeTypes,
+  ReactFlowInstance,
   Position,
   ReactFlowProps,
   ReactFlowProvider,
-} from 'react-flow-renderer';
+} from 'reactflow';
 import { ComponentID } from '@teambit/component';
-
 import { ComponentWidgetSlot } from '../../graph.ui.runtime';
 import { ComponentNode } from '../component-node';
 import { EdgeModel, GraphModel, NodeModel } from '../query';
 import { calcElements } from './calc-elements';
 import { calcMinimapColors } from './minimap';
 import { ComponentGraphContext } from './graph-context';
-
+import 'reactflow/dist/style.css';
 import styles from './dependencies-graph.module.scss';
 
 function ComponentNodeContainer(props: NodeProps) {
   const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;
-  // @todo - this will be fixed as part of the react-flow-renderer v10 upgrade
-  const ReactFlowHandle = Handle as any;
+  const ReactFlowHandle = Handle;
   return (
     <div key={id}>
       <ReactFlowHandle type="target" position={targetPosition} isConnectable={false} />
@@ -36,14 +34,11 @@ function ComponentNodeContainer(props: NodeProps) {
   );
 }
 
-// @ts-ignore - incorrect NodeTypes https://github.com/wbkd/react-flow/issues/2101 (#5746)
-const NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };
-
 export type DependenciesGraphProps = {
   rootNode: ComponentID;
   graph: GraphModel<NodeModel, EdgeModel>;
   componentWidgets: ComponentWidgetSlot;
-  onLoad?: (instance: OnLoadParams) => void;
+  onLoad?: (instance: ReactFlowInstance) => void;
 } & Omit<ReactFlowProps, 'elements'>;
 
 export function DependenciesGraph({
@@ -55,18 +50,23 @@ export function DependenciesGraph({
   children,
   ...rest
 }: DependenciesGraphProps) {
-  const graphRef = useRef<OnLoadParams>();
+  const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);
+  const graphRef = useRef<ReactFlowInstance>();
   const elements = calcElements(graph, { rootNode });
+
   const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);
 
   const handleLoad = useCallback(
-    (instance: OnLoadParams) => {
+    (instance: ReactFlowInstance) => {
       if ((graph?.nodes.length ?? 0) <= 3) {
         instance.fitView({
           padding: 2,
+          maxZoom: 1,
         });
       } else {
-        instance.fitView();
+        instance.fitView({
+          maxZoom: 1,
+        });
       }
       onLoad?.(instance);
     },
@@ -101,9 +101,13 @@ export function DependenciesGraph({
           minZoom={0}
           {...rest}
           className={classnames(styles.graph, className)}
-          elements={elements}
-          nodeTypes={NodeTypes}
-          onLoad={handleLoad}
+          defaultNodes={elements.nodes}
+          defaultEdges={elements.edges}
+          nodeTypes={nodeTypes}
+          onInit={handleLoad}
+          proOptions={{
+            hideAttribution: true,
+          }}
         >
           <Background />
           <Controls className={styles.controls} />

package/ui/dependencies-graph/minimap.ts

@@ -1,4 +1,4 @@
-import { Node } from 'react-flow-renderer';
+import { Node } from 'reactflow';
 import { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';
 
 export function calcMinimapColors(node: Node) {