@teambit/graph 0.0.0-e02f462c447315e0dfd426993d3e296febe6bcf2 → 0.0.0-e0ded30355c7be8035bc0eb4beefd87397e23d63

package/dist/graph-cmd.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GraphCmd = void 0;
-function _chalk() {
-  const data = _interopRequireDefault(require("chalk"));
-  _chalk = function () {
+function _graphlib() {
+  const data = _interopRequireDefault(require("graphlib"));
+  _graphlib = function () {
     return data;
   };
   return data;
 }
-function _graphlib() {
-  const data = _interopRequireDefault(require("graphlib"));
-  _graphlib = function () {
+function _cli() {
+  const data = require("@teambit/cli");
+  _cli = function () {
     return data;
   };
   return data;
@@ -87,7 +87,7 @@ by default shows only workspace components; use --include-dependencies for full
     };
     const visualDependencyGraph = await getVisualGraph();
     const result = await visualDependencyGraph.render(png ? 'png' : 'svg');
-    return _chalk().default.green(`image created at ${result}`);
+    return (0, _cli().formatSuccessSummary)(`image created at ${result}`);
   }
   async json([id], graphOpts) {
     const {

package/dist/graph-cmd.js.map

@@ -1 +1 @@
-{"version":3,"names":["_chalk","data","_interopRequireDefault","require","_graphlib","_componentId","_legacy","_scope","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","GraphCmd","constructor","componentAspect","graph","report","id","graphOpts","remote","layout","png","includeLocalOnly","includeDependencies","host","getHost","getVisualGraph","config","generateGraphFromRemote","VisualDependencyGraph","loadFromGraphlib","compId","resolveComponentId","undefined","compIds","modifiedOpts","getVisualGraphIds","visualDependencyGraph","result","render","chalk","green","json","shouldIncludeLocalOnly","getGraphIds","filteredGraph","list","listIds","listStr","map","toString","successorsSubgraph","nodeFilter","node","includes","edgeFilter","edge","targetId","sourceId","jsonGraph","toJson","nodes","GraphLib","write","getWorkspaceIfExist","workspace","ComponentID","fromString","scopeName","scope","remoteScope","getRemoteByName","consumer","componentDepGraph","Error","exports"],"sources":["graph-cmd.ts"],"sourcesContent":["import chalk from 'chalk';\nimport GraphLib from 'graphlib';\nimport type { Command, CommandOptions } from '@teambit/cli';\nimport { ComponentID } from '@teambit/component-id';\nimport type { GraphConfig } from '@teambit/legacy.dependency-graph';\nimport { VisualDependencyGraph } from '@teambit/legacy.dependency-graph';\nimport { getRemoteByName } from '@teambit/scope.remotes';\nimport type { ComponentMain } from '@teambit/component';\nimport type { GraphMain } from './graph.main.runtime';\n\nexport type GraphOpt = {\n  remote?: string;\n  layout?: string;\n  cycles?: boolean;\n  png?: boolean;\n  json?: boolean;\n  includeLocalOnly?: boolean;\n  includeDependencies?: boolean;\n};\n\nexport class GraphCmd implements Command {\n  name = 'graph [id]';\n  description = 'visualize component dependencies as a graph image';\n  extendedDescription = `generates an SVG (or PNG) image showing component dependency relationships.\nblack arrows represent runtime dependencies, red arrows show dev or peer dependencies.\nby default shows only workspace components; use --include-dependencies for full dependency tree.`;\n  group = 'info-analysis';\n  alias = '';\n  options = [\n    ['r', 'remote [remoteName]', 'remote name (name is optional, leave empty when id is specified)'],\n    [\n      '',\n      'layout <name>',\n      'GraphVis layout. default to \"dot\". options are [circo, dot, fdp, neato, osage, patchwork, sfdp, twopi]',\n    ],\n    ['', 'png', 'save the graph as a png file instead of svg. requires \"graphviz\" to be installed'],\n    ['', 'cycles', 'generate a graph of cycles only'],\n    [\n      '',\n      'include-local-only',\n      'DEPRECATED: include only the components in the workspace (or local scope). This is now the default behavior.',\n    ],\n    [\n      '',\n      'include-dependencies',\n      'include all dependencies recursively, not just workspace (or local scope) components',\n    ],\n    ['j', 'json', 'json format'],\n  ] as CommandOptions;\n  remoteOp = true;\n\n  constructor(\n    private componentAspect: ComponentMain,\n    private graph: GraphMain\n  ) {}\n\n  async report([id]: [string], graphOpts: GraphOpt): Promise<string> {\n    const { remote, layout, png, includeLocalOnly, includeDependencies } = graphOpts;\n    const host = this.componentAspect.getHost();\n\n    const getVisualGraph = async (): Promise<VisualDependencyGraph> => {\n      if (remote) {\n        const config: GraphConfig = {};\n        if (layout) config.layout = layout;\n        const graph = await this.generateGraphFromRemote(remote, id);\n        return VisualDependencyGraph.loadFromGraphlib(graph, config);\n      }\n      const compId = id ? await host.resolveComponentId(id) : undefined;\n      const compIds = compId ? [compId] : undefined;\n\n      // New logic: local-only is now the default behavior\n      // includeDependencies flag overrides this to show all dependencies\n      const modifiedOpts = {\n        ...graphOpts,\n        includeLocalOnly: includeDependencies ? false : includeLocalOnly !== false, // true by default unless includeDependencies is used\n      };\n\n      return this.graph.getVisualGraphIds(compIds, modifiedOpts);\n    };\n\n    const visualDependencyGraph = await getVisualGraph();\n    const result = await visualDependencyGraph.render(png ? 'png' : 'svg');\n\n    return chalk.green(`image created at ${result}`);\n  }\n\n  async json([id]: [string], graphOpts: GraphOpt) {\n    const { remote, includeLocalOnly, includeDependencies } = graphOpts;\n    const host = this.componentAspect.getHost();\n    if (!remote) {\n      // For JSON output, we need to manually filter if needed\n      // Since getGraphIds doesn't accept the same options as getVisualGraphIds\n      const shouldIncludeLocalOnly = includeDependencies ? false : includeLocalOnly !== false;\n\n      const graph = await this.graph.getGraphIds(id ? [await host.resolveComponentId(id)] : undefined);\n\n      let filteredGraph = graph;\n      if (shouldIncludeLocalOnly) {\n        // Filter to only include local components\n        const list = await host.listIds();\n        const listStr = list.map((compId) => compId.toString());\n        filteredGraph = graph.successorsSubgraph(listStr, {\n          nodeFilter: (node) => listStr.includes(node.id),\n          edgeFilter: (edge) => listStr.includes(edge.targetId) && listStr.includes(edge.sourceId),\n        });\n      }\n\n      const jsonGraph = filteredGraph.toJson();\n      if (jsonGraph.nodes) {\n        jsonGraph.nodes = jsonGraph.nodes.map((node) => node.id);\n      }\n      return jsonGraph;\n    }\n    const graph = await this.generateGraphFromRemote(remote!, id);\n    return GraphLib.json.write(graph);\n  }\n\n  /**\n   *\n   * @returns Workspace if it exists, otherwise undefined.\n   * the reason to not add it here as a type is to avoid circular dependency issues.\n   */\n  private getWorkspaceIfExist(): any {\n    try {\n      return this.componentAspect.getHost('teambit.workspace/workspace');\n    } catch {\n      return undefined;\n    }\n  }\n\n  private async generateGraphFromRemote(remote: string | boolean, id?: string): Promise<GraphLib.Graph> {\n    const workspace = this.getWorkspaceIfExist();\n    const compId = id ? ComponentID.fromString(id) : undefined;\n    if (compId) {\n      const scopeName: string = typeof remote === 'string' ? remote : compId.scope;\n      const remoteScope = await getRemoteByName(scopeName, workspace?.consumer);\n      const componentDepGraph = await remoteScope.graph(compId);\n      return componentDepGraph.graph;\n    }\n    if (typeof remote !== 'string') {\n      throw new Error('please specify remote scope name or enter an id');\n    }\n    const remoteScope = await getRemoteByName(remote, workspace?.consumer);\n    const componentDepGraph = await remoteScope.graph();\n    return componentDepGraph.graph;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_graphlib","data","_interopRequireDefault","require","_cli","_componentId","_legacy","_scope","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","GraphCmd","constructor","componentAspect","graph","report","id","graphOpts","remote","layout","png","includeLocalOnly","includeDependencies","host","getHost","getVisualGraph","config","generateGraphFromRemote","VisualDependencyGraph","loadFromGraphlib","compId","resolveComponentId","undefined","compIds","modifiedOpts","getVisualGraphIds","visualDependencyGraph","result","render","formatSuccessSummary","json","shouldIncludeLocalOnly","getGraphIds","filteredGraph","list","listIds","listStr","map","toString","successorsSubgraph","nodeFilter","node","includes","edgeFilter","edge","targetId","sourceId","jsonGraph","toJson","nodes","GraphLib","write","getWorkspaceIfExist","workspace","ComponentID","fromString","scopeName","scope","remoteScope","getRemoteByName","consumer","componentDepGraph","Error","exports"],"sources":["graph-cmd.ts"],"sourcesContent":["import GraphLib from 'graphlib';\nimport type { Command, CommandOptions } from '@teambit/cli';\nimport { formatSuccessSummary } from '@teambit/cli';\nimport { ComponentID } from '@teambit/component-id';\nimport type { GraphConfig } from '@teambit/legacy.dependency-graph';\nimport { VisualDependencyGraph } from '@teambit/legacy.dependency-graph';\nimport { getRemoteByName } from '@teambit/scope.remotes';\nimport type { ComponentMain } from '@teambit/component';\nimport type { GraphMain } from './graph.main.runtime';\n\nexport type GraphOpt = {\n  remote?: string;\n  layout?: string;\n  cycles?: boolean;\n  png?: boolean;\n  json?: boolean;\n  includeLocalOnly?: boolean;\n  includeDependencies?: boolean;\n};\n\nexport class GraphCmd implements Command {\n  name = 'graph [id]';\n  description = 'visualize component dependencies as a graph image';\n  extendedDescription = `generates an SVG (or PNG) image showing component dependency relationships.\nblack arrows represent runtime dependencies, red arrows show dev or peer dependencies.\nby default shows only workspace components; use --include-dependencies for full dependency tree.`;\n  group = 'info-analysis';\n  alias = '';\n  options = [\n    ['r', 'remote [remoteName]', 'remote name (name is optional, leave empty when id is specified)'],\n    [\n      '',\n      'layout <name>',\n      'GraphVis layout. default to \"dot\". options are [circo, dot, fdp, neato, osage, patchwork, sfdp, twopi]',\n    ],\n    ['', 'png', 'save the graph as a png file instead of svg. requires \"graphviz\" to be installed'],\n    ['', 'cycles', 'generate a graph of cycles only'],\n    [\n      '',\n      'include-local-only',\n      'DEPRECATED: include only the components in the workspace (or local scope). This is now the default behavior.',\n    ],\n    [\n      '',\n      'include-dependencies',\n      'include all dependencies recursively, not just workspace (or local scope) components',\n    ],\n    ['j', 'json', 'json format'],\n  ] as CommandOptions;\n  remoteOp = true;\n\n  constructor(\n    private componentAspect: ComponentMain,\n    private graph: GraphMain\n  ) {}\n\n  async report([id]: [string], graphOpts: GraphOpt): Promise<string> {\n    const { remote, layout, png, includeLocalOnly, includeDependencies } = graphOpts;\n    const host = this.componentAspect.getHost();\n\n    const getVisualGraph = async (): Promise<VisualDependencyGraph> => {\n      if (remote) {\n        const config: GraphConfig = {};\n        if (layout) config.layout = layout;\n        const graph = await this.generateGraphFromRemote(remote, id);\n        return VisualDependencyGraph.loadFromGraphlib(graph, config);\n      }\n      const compId = id ? await host.resolveComponentId(id) : undefined;\n      const compIds = compId ? [compId] : undefined;\n\n      // New logic: local-only is now the default behavior\n      // includeDependencies flag overrides this to show all dependencies\n      const modifiedOpts = {\n        ...graphOpts,\n        includeLocalOnly: includeDependencies ? false : includeLocalOnly !== false, // true by default unless includeDependencies is used\n      };\n\n      return this.graph.getVisualGraphIds(compIds, modifiedOpts);\n    };\n\n    const visualDependencyGraph = await getVisualGraph();\n    const result = await visualDependencyGraph.render(png ? 'png' : 'svg');\n\n    return formatSuccessSummary(`image created at ${result}`);\n  }\n\n  async json([id]: [string], graphOpts: GraphOpt) {\n    const { remote, includeLocalOnly, includeDependencies } = graphOpts;\n    const host = this.componentAspect.getHost();\n    if (!remote) {\n      // For JSON output, we need to manually filter if needed\n      // Since getGraphIds doesn't accept the same options as getVisualGraphIds\n      const shouldIncludeLocalOnly = includeDependencies ? false : includeLocalOnly !== false;\n\n      const graph = await this.graph.getGraphIds(id ? [await host.resolveComponentId(id)] : undefined);\n\n      let filteredGraph = graph;\n      if (shouldIncludeLocalOnly) {\n        // Filter to only include local components\n        const list = await host.listIds();\n        const listStr = list.map((compId) => compId.toString());\n        filteredGraph = graph.successorsSubgraph(listStr, {\n          nodeFilter: (node) => listStr.includes(node.id),\n          edgeFilter: (edge) => listStr.includes(edge.targetId) && listStr.includes(edge.sourceId),\n        });\n      }\n\n      const jsonGraph = filteredGraph.toJson();\n      if (jsonGraph.nodes) {\n        jsonGraph.nodes = jsonGraph.nodes.map((node) => node.id);\n      }\n      return jsonGraph;\n    }\n    const graph = await this.generateGraphFromRemote(remote!, id);\n    return GraphLib.json.write(graph);\n  }\n\n  /**\n   *\n   * @returns Workspace if it exists, otherwise undefined.\n   * the reason to not add it here as a type is to avoid circular dependency issues.\n   */\n  private getWorkspaceIfExist(): any {\n    try {\n      return this.componentAspect.getHost('teambit.workspace/workspace');\n    } catch {\n      return undefined;\n    }\n  }\n\n  private async generateGraphFromRemote(remote: string | boolean, id?: string): Promise<GraphLib.Graph> {\n    const workspace = this.getWorkspaceIfExist();\n    const compId = id ? ComponentID.fromString(id) : undefined;\n    if (compId) {\n      const scopeName: string = typeof remote === 'string' ? remote : compId.scope;\n      const remoteScope = await getRemoteByName(scopeName, workspace?.consumer);\n      const componentDepGraph = await remoteScope.graph(compId);\n      return componentDepGraph.graph;\n    }\n    if (typeof remote !== 'string') {\n      throw new Error('please specify remote scope name or enter an id');\n    }\n    const remoteScope = await getRemoteByName(remote, workspace?.consumer);\n    const componentDepGraph = await remoteScope.graph();\n    return componentDepGraph.graph;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/graph.compare.section.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Section } from '@teambit/component';
 import { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
 import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
@@ -12,7 +13,7 @@ export declare class GraphCompareSection implements Section, TabItem {
     };
     route: {
         path: string;
-        element: import("react/jsx-runtime").JSX.Element;
+        element: React.JSX.Element;
     };
     order: number;
     changeType: ChangeType;

package/dist/graph.composition.d.ts

@@ -1 +1,2 @@
-export declare const Logo: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const Logo: () => React.JSX.Element;

package/dist/{preview-1763558305338.js → preview-1782381896688.js}

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

package/dist/ui/component-node/component-node.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { CardProps } from '@teambit/base-ui.surfaces.card';
 import type { NodeModel } from '../query/node-model';
 export interface IComponentNode extends CardProps {
     node: NodeModel;
     type: string;
 }
-export declare function ComponentNode({ node, type, ...rest }: IComponentNode): import("react/jsx-runtime").JSX.Element;
+export declare function ComponentNode({ node, type, ...rest }: IComponentNode): React.JSX.Element;

package/dist/ui/component-node/variants.module.scss

@@ -35,7 +35,7 @@ $borderLabelHeight: 20px;
 .external {
   border-color: $d40;
 
-  box-shadow: 0px 0px 0px 2px var(border--color);
+  box-shadow: 0px 0px 0px 2px var(--border--color, #6c707c);
 }
 
 :export {

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

@@ -1 +1,2 @@
-export declare function DependenciesCompare(): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare function DependenciesCompare(): React.JSX.Element;

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-compare/dependency-compare-node.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { CompareNodeModel } from './compare-node-model';
 export type DependencyCompareNodeProps = {
     node: CompareNodeModel;
     type?: string;
 };
-export declare function DependencyCompareNode(props: DependencyCompareNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function DependencyCompareNode(props: DependencyCompareNodeProps): React.JSX.Element;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactFlowInstance, ReactFlowProps } from 'reactflow';
 import type { ComponentID } from '@teambit/component';
 import type { ComponentWidgetSlot } from '../../graph.ui.runtime';
@@ -10,4 +11,4 @@ export type DependenciesGraphProps = {
     onLoad?: (instance: ReactFlowInstance) => void;
     loadingGraphMetadata?: boolean;
 } & Omit<ReactFlowProps, 'elements'>;
-export declare function DependenciesGraph({ graph, rootNode, componentWidgets, className, onLoad, children, loadingGraphMetadata, ...rest }: DependenciesGraphProps): import("react/jsx-runtime").JSX.Element;
+export declare function DependenciesGraph({ graph, rootNode, componentWidgets, className, onLoad, children, loadingGraphMetadata, ...rest }: DependenciesGraphProps): React.JSX.Element;

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/dist/ui/graph-page/graph-filters.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { CardProps } from '@teambit/base-ui.surfaces.card';
 type GraphFiltersType = {
     isFiltered: boolean;
@@ -5,5 +6,5 @@ type GraphFiltersType = {
     onChangeFilter: (isFiltered: boolean) => void;
     disable?: boolean;
 } & CardProps;
-export declare function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }: GraphFiltersType): import("react/jsx-runtime").JSX.Element;
+export declare function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }: GraphFiltersType): React.JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { ComponentWidgetSlot } from '../../graph.ui.runtime';
 type GraphPageProps = {
     componentWidgets: ComponentWidgetSlot;
 };
-export declare function GraphPage({ componentWidgets }: GraphPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function GraphPage({ componentWidgets }: GraphPageProps): React.JSX.Element;
 export {};

package/dist/ui/graph.section.d.ts

@@ -1,11 +1,12 @@
 import type { Section } from '@teambit/component';
+import React from 'react';
 import type { ComponentWidgetSlot } from '../graph.ui.runtime';
 export declare class GraphSection implements Section {
     private componentWidgetSlot;
     constructor(componentWidgetSlot: ComponentWidgetSlot);
     route: {
         path: string;
-        element: import("react/jsx-runtime").JSX.Element;
+        element: React.JSX.Element;
     };
     navigationLink: {
         href: string;

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@teambit/graph",
-  "version": "0.0.0-e02f462c447315e0dfd426993d3e296febe6bcf2",
+  "version": "0.0.0-e0ded30355c7be8035bc0eb4beefd87397e23d63",
   "homepage": "https://bit.cloud/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "e02f462c447315e0dfd426993d3e296febe6bcf2"
+    "version": "e0ded30355c7be8035bc0eb4beefd87397e23d63"
   },
   "dependencies": {
     "graphlib": "2.1.8",
     "lodash": "4.17.21",
-    "chalk": "4.1.2",
     "graphql-tag": "2.12.1",
     "classnames": "^2.5.1",
     "reactflow": "^11.11.3",
@@ -19,32 +18,32 @@
     "@dagrejs/dagre": "^1.1.2",
     "@teambit/component-id": "1.2.4",
     "@teambit/graph.cleargraph": "0.0.11",
-    "@teambit/legacy.dependency-graph": "0.0.89",
-    "@teambit/cli": "0.0.1286",
-    "@teambit/scope.remotes": "0.0.86",
-    "@teambit/harmony": "0.4.7",
+    "@teambit/legacy.dependency-graph": "0.0.133",
+    "@teambit/cli": "0.0.1343",
+    "@teambit/scope.remotes": "0.0.130",
+    "@teambit/harmony": "0.4.11",
     "@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.7",
-    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.123",
-    "@teambit/logger": "0.0.1379",
+    "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.128",
+    "@teambit/logger": "0.0.1436",
     "@teambit/base-ui.routing.nav-link": "1.0.4",
-    "@teambit/base-ui.surfaces.card": "1.0.1",
-    "@teambit/base-ui.text.muted-text": "1.0.1",
-    "@teambit/component.modules.component-url": "0.0.182",
+    "@teambit/base-ui.surfaces.card": "1.0.3",
+    "@teambit/base-ui.text.muted-text": "1.0.3",
+    "@teambit/component.modules.component-url": "0.0.191",
     "@teambit/component.ui.deprecation-icon": "0.0.509",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
-    "@teambit/envs.ui.env-icon": "0.0.507",
-    "@teambit/component.ui.component-compare.context": "0.0.124",
+    "@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.9",
+    "@teambit/component.ui.component-compare.status-resolver": "0.0.12",
     "@teambit/evangelist.input.checkbox.label": "1.1.0",
     "@teambit/design.skeletons.base-skeleton": "0.0.2",
     "@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": "0.0.0-6445e9abf7c263f9048e763287b894a2db541020",
-    "@teambit/graphql": "0.0.0-75c4bcd0533629a824c9365182b26636686c8328",
-    "@teambit/component-compare": "0.0.0-986d729b317aaf2fc31f5b030b840a4b217e0b96",
-    "@teambit/ui": "0.0.0-23d38dfb58c2cc5302b710b77d19ced152f30945"
+    "@teambit/component": "0.0.0-1088798b951d12cd51782bf4782d9159a07eae1b",
+    "@teambit/graphql": "0.0.0-4b665d561aa5b34c684335ba720dc7a28939bbe8",
+    "@teambit/component-compare": "0.0.0-8d3003ad51752f7c905174ec4175533b4ec776de",
+    "@teambit/ui": "0.0.0-35026a2dfc48601067292b6cbf6ec5bf7a7ea12a"
   },
   "devDependencies": {
     "@types/graphlib": "2.1.7",
@@ -52,18 +51,19 @@
     "@types/classnames": "^2.3.4",
     "@types/semver": "7.5.8",
     "@types/mocha": "9.1.0",
-    "@teambit/harmony.envs.core-aspect-env": "0.0.79"
+    "@teambit/harmony.envs.core-aspect-env": "0.1.7"
   },
   "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": {},
   "peerDependenciesMeta": {},
   "exports": {
     ".": {
+      "types": "./index.ts",
       "node": {
         "require": "./dist/index.js",
         "import": "./dist/esm.mjs"

package/ui/component-node/variants.module.scss

@@ -35,7 +35,7 @@ $borderLabelHeight: 20px;
 .external {
   border-color: $d40;
 
-  box-shadow: 0px 0px 0px 2px var(border--color);
+  box-shadow: 0px 0px 0px 2px var(--border--color, #6c707c);
 }
 
 :export {

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);