@teambit/graph 1.0.992 → 1.0.994

package/dist/{preview-1779199603540.js → preview-1779298653501.js}

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

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

@@ -110,7 +110,7 @@ function DependenciesCompare() {
   const nodeTypes = _react().default.useMemo(() => ({
     ComponentNode: ComponentNodeContainer
   }), []);
-  const graphRef = (0, _react().useRef)();
+  const graphRef = (0, _react().useRef)(undefined);
   const componentCompare = (0, _componentUiComponentCompare().useComponentCompare)();
   const baseId = componentCompare?.base?.model.id;
   const compareId = componentCompare?.compare?.model.id;

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","data","_interopRequireDefault","require","_designUi","_componentUiComponentCompare","_react","_interopRequireWildcard","_reactflow","_query","_graphPage","_dependenciesGraph","_dependenciesCompareModule","_dependencyCompareNode","_diffGraph","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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 type { NodeProps, NodeTypes, ReactFlowInstance } from 'reactflow';\nimport ReactFlow, { Background, Controls, Handle, MiniMap, Position, ReactFlowProvider } from 'reactflow';\nimport { useGraphQuery } from '../query';\nimport type { 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":[]}
+{"version":3,"names":["_classnames","data","_interopRequireDefault","require","_designUi","_componentUiComponentCompare","_react","_interopRequireWildcard","_reactflow","_query","_graphPage","_dependenciesGraph","_dependenciesCompareModule","_dependencyCompareNode","_diffGraph","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","ReactFlowHandle","Handle","createElement","key","type","position","isConnectable","DependencyCompareNode","node","DependenciesCompare","nodeTypes","React","useMemo","ComponentNode","graphRef","useRef","undefined","componentCompare","useComponentCompare","baseId","base","model","compareId","compare","filter","setFilter","useState","isFiltered","loading","baseLoading","graph","baseGraph","useGraphQuery","toString","compareLoading","compareGraph","diffGraph","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 type { NodeProps, NodeTypes, ReactFlowInstance } from 'reactflow';\nimport ReactFlow, { Background, Controls, Handle, MiniMap, Position, ReactFlowProvider } from 'reactflow';\nimport { useGraphQuery } from '../query';\nimport type { 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 | undefined>(undefined);\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/dependencies-graph.js

@@ -104,7 +104,7 @@ function DependenciesGraph(_ref) {
   const nodeTypes = _react().default.useMemo(() => ({
     ComponentNode: ComponentNodeContainer
   }), []);
-  const graphRef = (0, _react().useRef)();
+  const graphRef = (0, _react().useRef)(undefined);
   const elements = (0, _calcElements().calcElements)(graph, {
     rootNode
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactflow","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","ReactFlowHandle","Handle","createElement","key","type","position","isConnectable","ComponentNode","node","DependenciesGraph","_ref","graph","rootNode","componentWidgets","className","onLoad","children","loadingGraphMetadata","rest","nodeTypes","React","useMemo","graphRef","useRef","elements","calcElements","nodes","setNodes","useNodesState","useEffect","context","handleLoad","useCallback","instance","current","fitView","padding","maxZoom","undefined","setTimeout","ComponentGraphContext","Provider","value","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","minZoom","classnames","styles","edges","onInit","fitViewOptions","proOptions","hideAttribution","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap"],"sources":["dependencies-graph.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useEffect } from 'react';\nimport classnames from 'classnames';\nimport type { NodeProps, NodeTypes, ReactFlowInstance, ReactFlowProps } from 'reactflow';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  Position,\n  ReactFlowProvider,\n  useNodesState,\n} from 'reactflow';\nimport type { ComponentID } from '@teambit/component';\nimport type { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport { ComponentNode } from '../component-node';\nimport type { 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  loadingGraphMetadata?: boolean;\n} & Omit<ReactFlowProps, 'elements'>;\n\nexport function DependenciesGraph({\n  graph,\n  rootNode,\n  componentWidgets,\n  className,\n  onLoad,\n  children,\n  loadingGraphMetadata,\n  ...rest\n}: DependenciesGraphProps) {\n  const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);\n  const graphRef = useRef<ReactFlowInstance>();\n  const elements = calcElements(graph, { rootNode });\n  const [nodes, setNodes] = useNodesState(elements.nodes);\n\n  useEffect(() => {\n    setNodes(elements.nodes);\n  }, [elements.nodes]);\n\n  const context = useMemo(() => ({ componentWidgets, loadingGraphMetadata }), [componentWidgets, loadingGraphMetadata]);\n\n  const handleLoad = useCallback(\n    (instance: ReactFlowInstance) => {\n      graphRef.current = instance;\n      if ((elements?.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 (!elements?.nodes.length) return;\n      if ((elements?.nodes?.length ?? 0) <= 3) {\n        return graphRef.current?.fitView({\n          padding: 2,\n          maxZoom: 1,\n        });\n      }\n      return graphRef.current?.fitView({\n        maxZoom: 1,\n      });\n    }, 100);\n  }, [elements?.nodes.length]);\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          nodes={nodes}\n          edges={elements.edges}\n          nodeTypes={nodeTypes}\n          onInit={handleLoad}\n          fitView={true}\n          fitViewOptions={{\n            padding: (elements?.nodes.length ?? 0) <= 3 ? 2 : undefined,\n            maxZoom: 1,\n          }}\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":[]}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactflow","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","ReactFlowHandle","Handle","createElement","key","type","position","isConnectable","ComponentNode","node","DependenciesGraph","_ref","graph","rootNode","componentWidgets","className","onLoad","children","loadingGraphMetadata","rest","nodeTypes","React","useMemo","graphRef","useRef","undefined","elements","calcElements","nodes","setNodes","useNodesState","useEffect","context","handleLoad","useCallback","instance","current","fitView","padding","maxZoom","setTimeout","ComponentGraphContext","Provider","value","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","minZoom","classnames","styles","edges","onInit","fitViewOptions","proOptions","hideAttribution","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap"],"sources":["dependencies-graph.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useEffect } from 'react';\nimport classnames from 'classnames';\nimport type { NodeProps, NodeTypes, ReactFlowInstance, ReactFlowProps } from 'reactflow';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  Position,\n  ReactFlowProvider,\n  useNodesState,\n} from 'reactflow';\nimport type { ComponentID } from '@teambit/component';\nimport type { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport { ComponentNode } from '../component-node';\nimport type { 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  loadingGraphMetadata?: boolean;\n} & Omit<ReactFlowProps, 'elements'>;\n\nexport function DependenciesGraph({\n  graph,\n  rootNode,\n  componentWidgets,\n  className,\n  onLoad,\n  children,\n  loadingGraphMetadata,\n  ...rest\n}: DependenciesGraphProps) {\n  const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);\n  const graphRef = useRef<ReactFlowInstance | undefined>(undefined);\n  const elements = calcElements(graph, { rootNode });\n  const [nodes, setNodes] = useNodesState(elements.nodes);\n\n  useEffect(() => {\n    setNodes(elements.nodes);\n  }, [elements.nodes]);\n\n  const context = useMemo(() => ({ componentWidgets, loadingGraphMetadata }), [componentWidgets, loadingGraphMetadata]);\n\n  const handleLoad = useCallback(\n    (instance: ReactFlowInstance) => {\n      graphRef.current = instance;\n      if ((elements?.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 (!elements?.nodes.length) return;\n      if ((elements?.nodes?.length ?? 0) <= 3) {\n        return graphRef.current?.fitView({\n          padding: 2,\n          maxZoom: 1,\n        });\n      }\n      return graphRef.current?.fitView({\n        maxZoom: 1,\n      });\n    }, 100);\n  }, [elements?.nodes.length]);\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          nodes={nodes}\n          edges={elements.edges}\n          nodeTypes={nodeTypes}\n          onInit={handleLoad}\n          fitView={true}\n          fitViewOptions={{\n            padding: (elements?.nodes.length ?? 0) <= 3 ? 2 : undefined,\n            maxZoom: 1,\n          }}\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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "1.0.992",
+  "version": "1.0.994",
   "homepage": "https://bit.cloud/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "1.0.992"
+    "version": "1.0.994"
   },
   "dependencies": {
     "graphlib": "2.1.8",
@@ -14,25 +14,19 @@
     "graphql-tag": "2.12.1",
     "classnames": "^2.5.1",
     "reactflow": "^11.11.3",
-    "@dagrejs/dagre": "^1.1.2",
     "semver": "7.7.1",
+    "@dagrejs/dagre": "^1.1.2",
     "@teambit/component-id": "1.2.4",
     "@teambit/graph.cleargraph": "0.0.11",
-    "@teambit/legacy.dependency-graph": "0.0.119",
-    "@teambit/cli": "0.0.1325",
-    "@teambit/scope.remotes": "0.0.116",
     "@teambit/harmony": "0.4.7",
     "@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.7",
-    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.126",
-    "@teambit/logger": "0.0.1418",
     "@teambit/base-ui.routing.nav-link": "1.0.4",
     "@teambit/base-ui.surfaces.card": "1.0.3",
     "@teambit/base-ui.text.muted-text": "1.0.3",
-    "@teambit/component.modules.component-url": "0.0.189",
-    "@teambit/design.ui.styles.ellipsis": "0.0.357",
-    "@teambit/envs.ui.env-icon": "0.0.507",
     "@teambit/component.ui.deprecation-icon": "0.0.509",
-    "@teambit/component.ui.component-compare.context": "0.0.124",
+    "@teambit/design.ui.styles.ellipsis": "0.0.357",
+    "@teambit/envs.ui.env-icon": "0.0.508",
+    "@teambit/component.ui.component-compare.context": "0.0.125",
     "@teambit/design.ui.round-loader": "0.0.355",
     "@teambit/component.ui.component-compare.status-resolver": "0.0.12",
     "@teambit/evangelist.input.checkbox.label": "1.1.0",
@@ -40,10 +34,16 @@
     "@teambit/design.ui.pages.not-found": "0.0.371",
     "@teambit/design.ui.pages.server-error": "0.0.368",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.505",
-    "@teambit/component": "1.0.992",
-    "@teambit/graphql": "1.0.992",
-    "@teambit/component-compare": "1.0.992",
-    "@teambit/ui": "1.0.992"
+    "@teambit/legacy.dependency-graph": "0.0.120",
+    "@teambit/component": "1.0.994",
+    "@teambit/cli": "0.0.1327",
+    "@teambit/scope.remotes": "0.0.117",
+    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.128",
+    "@teambit/graphql": "1.0.994",
+    "@teambit/logger": "0.0.1420",
+    "@teambit/component-compare": "1.0.994",
+    "@teambit/ui": "1.0.994",
+    "@teambit/component.modules.component-url": "0.0.190"
   },
   "devDependencies": {
     "@types/graphlib": "2.1.7",
@@ -51,12 +51,12 @@
     "@types/classnames": "^2.3.4",
     "@types/semver": "7.5.8",
     "@types/mocha": "9.1.0",
-    "@teambit/harmony.envs.core-aspect-env": "0.1.4"
+    "@teambit/harmony.envs.core-aspect-env": "0.1.5"
   },
   "peerDependencies": {
-    "@apollo/client": "^3.6.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "@types/react": "^17.0.73"
+    "@apollo/client": "^3.12.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@types/react": "^19.0.0"
   },
   "license": "Apache-2.0",
   "optionalDependencies": {},

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

@@ -26,7 +26,7 @@ function ComponentNodeContainer(props: NodeProps) {
 
 export function DependenciesCompare() {
   const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);
-  const graphRef = useRef<ReactFlowInstance>();
+  const graphRef = useRef<ReactFlowInstance | undefined>(undefined);
   const componentCompare = useComponentCompare();
 
   const baseId = componentCompare?.base?.model.id;

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

@@ -51,7 +51,7 @@ export function DependenciesGraph({
   ...rest
 }: DependenciesGraphProps) {
   const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);
-  const graphRef = useRef<ReactFlowInstance>();
+  const graphRef = useRef<ReactFlowInstance | undefined>(undefined);
   const elements = calcElements(graph, { rootNode });
   const [nodes, setNodes] = useNodesState(elements.nodes);