@teambit/graph 0.0.568 → 0.0.572

package/component-graph/component-graph.ts

@@ -0,0 +1,105 @@
+import { Component } from '@teambit/component';
+import { Graph } from 'cleargraph';
+
+import { Dependency } from '../model/dependency';
+import { DuplicateDependency, VersionSubgraph } from '../duplicate-dependency';
+
+export const DEPENDENCIES_TYPES = ['dependencies', 'devDependencies'];
+
+type Node = { id: string; node: Component };
+type Edge = { sourceId: string; targetId: string; edge: Dependency };
+
+export class ComponentGraph extends Graph<Component, Dependency> {
+  versionMap: Map<string, { allVersionNodes: string[]; latestVersionNode: string }>;
+  constructor(nodes: Node[] = [], edges: Edge[] = []) {
+    super(nodes, edges);
+    this.versionMap = new Map();
+  }
+
+  protected create(nodes: Node[] = [], edges: Edge[] = []): this {
+    return new ComponentGraph(nodes, edges) as this;
+  }
+
+  findDuplicateDependencies(): Map<string, DuplicateDependency> {
+    const duplicateDependencies: Map<string, DuplicateDependency> = new Map();
+    for (const [compFullName, versions] of this.versionMap) {
+      if (versions.allVersionNodes.length > 1) {
+        const versionSubgraphs: VersionSubgraph[] = [];
+        const notLatestVersions = versions.allVersionNodes.filter((version) => version !== versions.latestVersionNode);
+        notLatestVersions.forEach((version) => {
+          const predecessors = this.predecessorsSubgraph(version);
+          const immediatePredecessors = this.predecessors(version).map((predecessor) => predecessor.id);
+          const subGraph = this.buildFromCleargraph(predecessors);
+          const versionSubgraph: VersionSubgraph = {
+            versionId: version,
+            subGraph,
+            // TODO: validate that this is working correctly
+            immediateDependents: immediatePredecessors,
+          };
+          versionSubgraphs.push(versionSubgraph);
+        });
+        if (versionSubgraphs.length > 0) {
+          const duplicateDep = new DuplicateDependency(versions.latestVersionNode, versionSubgraphs);
+          duplicateDependencies.set(compFullName, duplicateDep);
+        }
+      }
+    }
+    return duplicateDependencies;
+  }
+
+  buildFromCleargraph(graph: Graph<Component, Dependency>): ComponentGraph {
+    // TODO: once cleargraph constructor and graph.nodes are consistent we should just use this line
+    // this.create(graph.nodes, graph.edges)
+
+    const newGraph = new ComponentGraph();
+    const newGraphNodes: Node[] = graph.nodes.map((node) => {
+      return {
+        id: node.id,
+        node: node.attr,
+      };
+    });
+    const newGraphEdges: Edge[] = graph.edges.map((edge) => {
+      return {
+        sourceId: edge.sourceId,
+        targetId: edge.targetId,
+        edge: edge.attr,
+      };
+    });
+    newGraph.setNodes(newGraphNodes);
+    newGraph.setEdges(newGraphEdges);
+
+    return newGraph;
+  }
+
+  runtimeOnly(componentIds: string[]) {
+    return this.successorsSubgraph(componentIds, (edge) => edge.attr.type === 'runtime');
+  }
+
+  _calculateVersionMap() {
+    const versionMap: Map<string, { allVersionNodes: string[]; latestVersionNode: string }> = new Map();
+    for (const node of this.nodes) {
+      const comp = node.attr;
+      const compKey = node.id;
+      const compFullName = comp.id._legacy.toStringWithoutVersion();
+      if (!versionMap.has(compFullName)) {
+        versionMap.set(compFullName, {
+          allVersionNodes: [compKey],
+          latestVersionNode: compKey,
+        });
+      } else {
+        const value = versionMap.get(compFullName);
+        if (value) {
+          if (Object.prototype.hasOwnProperty.call(value, 'allVersionNodes')) {
+            value.allVersionNodes.push(compKey);
+          }
+          const currentCompVersion = this.node(compKey)?.attr.id._legacy.getVersion();
+          const latestCompVersion = this.node(value.latestVersionNode)?.attr.id._legacy.getVersion();
+          if (!!currentCompVersion && !!latestCompVersion && currentCompVersion.isLaterThan(latestCompVersion)) {
+            value.latestVersionNode = compKey;
+          }
+        }
+      }
+    }
+    return versionMap;
+  }
+}

package/component-graph/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-cycle
+export { ComponentGraph } from './component-graph';

package/graph.ui.runtime.tsx

@@ -0,0 +1,41 @@
+import { ComponentType } from 'react';
+import { UIRuntime } from '@teambit/ui';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+
+import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';
+import { GraphAspect } from './graph.aspect';
+import { GraphSection } from './ui/graph.section';
+
+export interface ComponentWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
+  component: ComponentModel;
+}
+export type ComponentWidget = ComponentType<ComponentWidgetProps>;
+export type ComponentWidgetSlot = SlotRegistry<ComponentWidget>;
+
+/**
+ * Presents dependencies graph in the component page
+ */
+export class GraphUI {
+  /**
+   * adds plugins to component nodes
+   * @param value
+   */
+  registerComponentWidget(value: ComponentWidget) {
+    this.componentWidgetSlot.register(value);
+  }
+
+  constructor(private componentWidgetSlot: ComponentWidgetSlot) {}
+  static dependencies = [ComponentAspect];
+  static runtime = UIRuntime;
+  static slots = [Slot.withType<ComponentWidget>()];
+  static async provider([componentUI]: [ComponentUI], config, [componentWidgetSlot]: [ComponentWidgetSlot]) {
+    const graphUI = new GraphUI(componentWidgetSlot);
+    const section = new GraphSection(componentWidgetSlot);
+    componentUI.registerNavigation(section.navigationLink, section.order);
+    componentUI.registerRoute(section.route);
+
+    return graphUI;
+  }
+}
+
+GraphAspect.addRuntime(GraphUI);

package/model/dependency/dependency.ts

@@ -0,0 +1,11 @@
+export type DependencyType = 'dev' | 'peer' | 'runtime';
+
+export class Dependency {
+  readonly type: DependencyType;
+  constructor(type: DependencyType) {
+    this.type = type;
+  }
+  stringify(): string {
+    return this.type;
+  }
+}

package/model/dependency/index.ts

@@ -0,0 +1 @@
+export { Dependency, DependencyType } from './dependency';

package/model/graph-filters/graph-filters.ts

@@ -0,0 +1 @@
+export type GraphFilter = 'runtimeOnly' | undefined;

package/model/graph-filters/index.ts

@@ -0,0 +1 @@
+export type { GraphFilter } from './graph-filters';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "0.0.568",
+  "version": "0.0.572",
   "homepage": "https://bit.dev/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "0.0.568"
+    "version": "0.0.572"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -23,17 +23,17 @@
     "@teambit/base-ui.text.muted-text": "1.0.1",
     "@teambit/evangelist.input.checkbox.label": "1.0.3",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/component": "0.0.568",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/cli": "0.0.394",
-    "@teambit/ui": "0.0.568",
-    "@teambit/legacy-bit-id": "0.0.383",
-    "@teambit/component.ui.deprecation-icon": "0.0.477",
+    "@teambit/component": "0.0.572",
+    "@teambit/graphql": "0.0.572",
+    "@teambit/cli": "0.0.395",
+    "@teambit/ui": "0.0.572",
+    "@teambit/legacy-bit-id": "0.0.384",
+    "@teambit/component.ui.deprecation-icon": "0.0.478",
     "@teambit/design.ui.styles.ellipsis": "0.0.346",
-    "@teambit/envs.ui.env-icon": "0.0.471",
+    "@teambit/envs.ui.env-icon": "0.0.472",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.473",
     "@teambit/design.ui.pages.not-found": "0.0.352",
-    "@teambit/design.ui.pages.server-error": "0.0.352",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.472"
+    "@teambit/design.ui.pages.server-error": "0.0.352"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -77,27 +77,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/ui/component-node/component-node.tsx

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { mutedText } from '@teambit/base-ui.text.muted-text';
+import { ComponentID } from '@teambit/component';
+import { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';
+import { EnvIcon } from '@teambit/envs.ui.env-icon';
+import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
+import { NodeModel } from '../query/node-model';
+import { ComponentGraphContext } from '../dependencies-graph/';
+
+// keep order: styles, then variants
+import styles from './component-node.module.scss';
+import variants from './variants.module.scss';
+
+export interface ComponentNode extends CardProps {
+  node: NodeModel;
+  type: string;
+}
+
+export function ComponentNode({ node, type = 'defaultNode', ...rest }: ComponentNode) {
+  const graphContext = useContext(ComponentGraphContext);
+  const { component } = node;
+  const { id } = component;
+
+  return (
+    <Card className={classnames(styles.compNode, variants[type])} elevation="none" {...rest}>
+      <div className={styles.firstRow}>
+        <EnvIcon component={component} className={styles.envIcon} />
+        <Breadcrumbs componentId={id} className={mutedText} />
+      </div>
+      <div className={styles.nameLine}>
+        <span className={classnames(styles.name, ellipsis)}>{id.name}</span>
+        {id.version && <span className={classnames(styles.version, ellipsis)}>{id.version}</span>}
+
+        <div className={styles.buffs}>
+          <DeprecationIcon component={component} />
+          {graphContext &&
+            graphContext.componentWidgets
+              .toArray()
+              .map(([widgetId, Widget]) => <Widget key={widgetId} component={component} />)}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+type BreadcrumbsProps = { componentId: ComponentID } & React.HTMLAttributes<HTMLDivElement>;
+
+function Breadcrumbs({ componentId, className, ...rest }: BreadcrumbsProps) {
+  const { scope, namespace } = componentId;
+  const showSep = !!scope && !!namespace;
+
+  return (
+    <div {...rest} className={classnames(styles.breadcrumbs, ellipsis, className)}>
+      {scope}
+      {showSep && '/'}
+      {namespace}
+    </div>
+  );
+}

package/ui/component-node/index.ts

@@ -0,0 +1,3 @@
+export { ComponentNode } from './component-node';
+
+export { defaultNodeColor, rootNodeColor, externalNodeColor } from './variants';

package/ui/component-node/variants.ts

@@ -0,0 +1,5 @@
+import variants from './variants.module.scss';
+
+const { root, defaultNode, rootNodeColor, defaultNodeColor, externalNodeColor } = variants;
+
+export { root, defaultNode, rootNodeColor, defaultNodeColor, externalNodeColor };

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

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { Node, Edge, ArrowHeadType } from 'react-flow-renderer';
+import { ComponentID } from '@teambit/component';
+import { calcLayout } from './calc-layout';
+import { GraphModel } from '../query';
+
+import { depTypeToClass, depTypeToLabel } from './dep-edge';
+
+type ElementsOptions = {
+  rootNode?: ComponentID;
+};
+
+/**
+ * generate Nodes and Edges for the ReactFlowRenderer graph renderer
+ */
+export function calcElements(graph: GraphModel | undefined, { rootNode }: ElementsOptions) {
+  return useMemo(() => {
+    if (!graph) return [];
+
+    const positions = calcLayout(graph);
+
+    const nodes: Node[] = Array.from(graph.nodes.values()).map((x) => {
+      return {
+        id: x.id,
+        type: 'ComponentNode',
+        data: {
+          node: x,
+          type: rootNode && x.component.id.isEqual(rootNode, { ignoreVersion: true }) ? 'root' : undefined,
+        },
+        position: positions.get(x.id) || { x: 0, y: 0 },
+      };
+    });
+
+    const edges: Edge[] = graph.edges.map((e) => ({
+      id: `_${e.sourceId}__${e.targetId}`,
+      source: e.sourceId,
+      target: e.targetId,
+      label: depTypeToLabel(e.dependencyLifecycleType),
+      labelBgPadding: [4, 4],
+      type: 'smoothstep',
+      className: depTypeToClass(e.dependencyLifecycleType),
+      arrowHeadType: ArrowHeadType.Arrow,
+    }));
+
+    return [...nodes, ...edges];
+  }, [graph]);
+}

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

@@ -0,0 +1,36 @@
+import dagre, { graphlib } from 'dagre';
+import { GraphModel } from '../query';
+
+const NODE_WIDTH = 260;
+const NODE_HEIGHT = 90;
+
+const BOTTOM_TO_TOP = 'BT';
+
+/**
+ * calculate the specific location of each node in the graph
+ */
+export function calcLayout(graph: GraphModel) {
+  const g = new graphlib.Graph();
+  g.setGraph({ rankdir: BOTTOM_TO_TOP });
+  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 }));
+
+  // position items in graph
+  dagre.layout(g);
+
+  const positionsArr: [string, { x: number; y: number }][] = g.nodes().map((nodeId) => {
+    const node = g.node(nodeId);
+
+    const pos = {
+      x: node.x - node.width / 2,
+      y: node.y - node.height / 2,
+    };
+
+    return [nodeId, pos];
+  });
+
+  return new Map(positionsArr);
+}

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

@@ -0,0 +1,28 @@
+import { EdgeType } from '@teambit/graph';
+import edgeStyles from './edge.module.scss';
+
+export function depTypeToClass(depType: string) {
+  switch (depType) {
+    case 'DEV':
+      return edgeStyles.dev;
+    case 'PEER':
+      return edgeStyles.peer;
+    case 'RUNTIME':
+      return edgeStyles.runtime;
+    default:
+      return undefined;
+  }
+}
+
+export function depTypeToLabel(type: EdgeType) {
+  switch (type) {
+    case EdgeType.peer:
+      return 'Peer Dependency';
+    case EdgeType.dev:
+      return 'Development Dependency';
+    case EdgeType.runtime:
+      return 'Dependency';
+    default:
+      return (type as string).toLowerCase();
+  }
+}

package/ui/dependencies-graph/dep-edge/index.ts

@@ -0,0 +1 @@
+export { depTypeToClass, depTypeToLabel } from './dep-edge';

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

@@ -0,0 +1,98 @@
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import ReactFlow, {
+  Controls,
+  Background,
+  MiniMap,
+  OnLoadParams,
+  NodeTypesType,
+  Handle,
+  Position,
+  NodeProps,
+  ReactFlowProps,
+} from 'react-flow-renderer';
+import { ComponentID } from '@teambit/component';
+
+import { ComponentWidgetSlot } from '../../graph.ui.runtime';
+import { ComponentNode } from '../component-node';
+import { GraphModel } from '../query';
+import { calcElements } from './calc-elements';
+import { calcMinimapColors } from './minimap';
+import { ComponentGraphContext } from './graph-context';
+
+import styles from './dependencies-graph.module.scss';
+
+function ComponentNodeContainer(props: NodeProps) {
+  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;
+
+  return (
+    <div key={id}>
+      <Handle type="target" position={targetPosition} isConnectable={false} />
+      <Handle type="source" position={sourcePosition} isConnectable={false} />
+      <ComponentNode node={data.node} type={data.type} />
+    </div>
+  );
+}
+
+const NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };
+
+export type DependenciesGraphProps = {
+  rootNode: ComponentID;
+  graph: GraphModel;
+  componentWidgets: ComponentWidgetSlot;
+  onLoad?: (instance: OnLoadParams) => void;
+} & Omit<ReactFlowProps, 'elements'>;
+
+export function DependenciesGraph({
+  graph,
+  rootNode,
+  componentWidgets,
+  className,
+  onLoad,
+  children,
+  ...rest
+}: DependenciesGraphProps) {
+  const graphRef = useRef<OnLoadParams>();
+  const elements = calcElements(graph, { rootNode });
+  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);
+
+  const handleLoad = useCallback(
+    (instance: OnLoadParams) => {
+      graphRef.current = instance;
+      instance.fitView();
+      onLoad?.(instance);
+    },
+    [onLoad]
+  );
+
+  // clear ref on unmount
+  useEffect(() => () => (graphRef.current = undefined), []);
+
+  useEffect(() => {
+    graphRef.current?.fitView();
+  }, [graph]);
+
+  return (
+    <ComponentGraphContext.Provider value={context}>
+      <ReactFlow
+        draggable={false}
+        nodesDraggable={true}
+        selectNodesOnDrag={false}
+        nodesConnectable={false}
+        zoomOnDoubleClick={false}
+        elementsSelectable={false}
+        maxZoom={1}
+        {...rest}
+        className={classnames(styles.graph, className)}
+        elements={elements}
+        nodeTypes={NodeTypes}
+        onLoad={handleLoad}
+      >
+        <Background />
+        <Controls className={styles.controls} />
+        <MiniMap nodeColor={calcMinimapColors} className={styles.minimap} />
+        {children}
+      </ReactFlow>
+    </ComponentGraphContext.Provider>
+  );
+}

package/ui/dependencies-graph/graph-context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { ComponentWidgetSlot } from '../../graph.ui.runtime';
+
+/** internal context, to pass shared information to all nodes */
+export type ComponentGraph = {
+  componentWidgets: ComponentWidgetSlot;
+};
+
+export const ComponentGraphContext = createContext<ComponentGraph | undefined>(undefined);

package/ui/dependencies-graph/index.ts

@@ -0,0 +1,3 @@
+export { DependenciesGraph } from './dependencies-graph';
+export { ComponentGraphContext, ComponentGraph } from './graph-context';
+export type { DependenciesGraphProps } from './dependencies-graph';

package/ui/dependencies-graph/minimap.ts

@@ -0,0 +1,15 @@
+import { Node } from 'react-flow-renderer';
+import { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';
+
+export function calcMinimapColors(node: Node) {
+  const type = node.data?.type;
+
+  switch (type) {
+    case 'root':
+      return rootNodeColor;
+    case 'external':
+      return externalNodeColor;
+    default:
+      return defaultNodeColor;
+  }
+}

package/ui/graph-page/graph-filters.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
+import { CheckboxLabel } from '@teambit/evangelist.input.checkbox.label';
+
+type GraphFilters = {
+  isFiltered: boolean;
+  onChangeFilter: (isFiltered: boolean) => void;
+  disable?: boolean;
+} & CardProps;
+
+export function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }: GraphFilters) {
+  return (
+    <Card {...rest}>
+      <div>
+        {/* show non-runtime === !isFiltered */}
+        <CheckboxLabel
+          checked={!isFiltered}
+          disabled={disable}
+          onInputChanged={(e) => onChangeFilter(!e.target.checked)}
+        >
+          {' '}
+          show non-runtime
+        </CheckboxLabel>
+      </div>
+    </Card>
+  );
+}

package/ui/graph-page/graph-page.tsx

@@ -0,0 +1,54 @@
+import React, { useContext, useState } from 'react';
+
+import { H2 } from '@teambit/documenter.ui.heading';
+import { NotFoundPage } from '@teambit/design.ui.pages.not-found';
+import { ServerErrorPage } from '@teambit/design.ui.pages.server-error';
+import { ComponentContext } from '@teambit/component';
+import { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';
+
+import { useGraphQuery } from '../query';
+import { DependenciesGraph } from '../dependencies-graph';
+import { ComponentWidgetSlot } from '../../graph.ui.runtime';
+import type { GraphFilter } from '../../model/graph-filters';
+
+import { GraphFilters } from './graph-filters';
+
+import styles from './graph-page.module.scss';
+
+type GraphPageProps = {
+  componentWidgets: ComponentWidgetSlot;
+};
+
+export function GraphPage({ componentWidgets }: GraphPageProps) {
+  const component = useContext(ComponentContext);
+
+  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');
+  const onCheckFilter = (isFiltered: boolean) => {
+    setFilter(isFiltered ? 'runtimeOnly' : undefined);
+  };
+
+  const { graph, error, loading } = useGraphQuery([component.id.toString()], filter);
+  if (error) return error.code === 404 ? <NotFoundPage /> : <ServerErrorPage />;
+  if (!graph) return <FullLoader />;
+
+  const isFiltered = filter === 'runtimeOnly';
+
+  return (
+    <div className={styles.page}>
+      <H2 size="xs">Component Dependencies</H2>
+      <DependenciesGraph
+        componentWidgets={componentWidgets}
+        graph={graph}
+        rootNode={component.id}
+        className={styles.graph}
+      >
+        <GraphFilters
+          className={styles.filters}
+          disable={loading}
+          isFiltered={isFiltered}
+          onChangeFilter={onCheckFilter}
+        />
+      </DependenciesGraph>
+    </div>
+  );
+}

package/ui/graph-page/index.ts

@@ -0,0 +1 @@
+export { GraphPage } from './graph-page';

package/ui/graph.section.tsx

@@ -0,0 +1,19 @@
+import { Section } from '@teambit/component';
+import React from 'react';
+
+import { GraphPage } from './graph-page';
+import { ComponentWidgetSlot } from '../graph.ui.runtime';
+
+export class GraphSection implements Section {
+  constructor(private componentWidgetSlot: ComponentWidgetSlot) {}
+
+  route = {
+    path: '~dependencies',
+    children: <GraphPage componentWidgets={this.componentWidgetSlot} />,
+  };
+  navigationLink = {
+    href: '~dependencies',
+    children: 'Dependencies',
+  };
+  order = 40;
+}

package/ui/query/edge-model.ts

@@ -0,0 +1,16 @@
+import { EdgeType } from '@teambit/graph';
+import { RawEdge } from './get-graph.query';
+
+export class EdgeModel {
+  sourceId: string;
+  targetId: string;
+  dependencyLifecycleType: EdgeType;
+
+  static from(rawEdge: RawEdge) {
+    const edge = new EdgeModel();
+    edge.sourceId = rawEdge.sourceId;
+    edge.targetId = rawEdge.targetId;
+    edge.dependencyLifecycleType = rawEdge.dependencyLifecycleType;
+    return edge;
+  }
+}

package/ui/query/get-graph.query.ts

@@ -0,0 +1,73 @@
+import { gql } from '@apollo/client';
+import { EdgeType } from '@teambit/graph';
+
+// please update types when updating query, for added safety
+
+export const GET_GRAPH = gql`
+  query graph($ids: [String], $filter: String) {
+    graph(ids: $ids, filter: $filter) {
+      nodes {
+        id
+        component {
+          id {
+            name
+            version
+            scope
+          }
+          displayName
+
+          deprecation {
+            isDeprecate
+          }
+
+          env {
+            id
+            icon
+          }
+        }
+      }
+      edges {
+        sourceId
+        targetId
+        dependencyLifecycleType
+      }
+    }
+  }
+`;
+
+export type RawGraphQuery = {
+  graph: RawGraph;
+};
+
+export type RawGraph = {
+  nodes: RawNode[];
+  edges: [];
+};
+
+export type RawNode = {
+  id: string;
+  component: {
+    id: {
+      name: string;
+      scope: string;
+      version: string;
+    };
+
+    displayName: string;
+
+    deprecation: {
+      isDeprecate: boolean;
+    };
+
+    env: {
+      id: string;
+      icon: string;
+    };
+  };
+};
+
+export type RawEdge = {
+  sourceId: string;
+  targetId: string;
+  dependencyLifecycleType: EdgeType;
+};

package/ui/query/graph-model.ts

@@ -0,0 +1,12 @@
+import { RawGraph } from './get-graph.query';
+import { NodeModel } from './node-model';
+import { EdgeModel } from './edge-model';
+
+export class GraphModel {
+  constructor(public nodes: NodeModel[], public edges: EdgeModel[]) {}
+  static from(rawGraph: RawGraph) {
+    const nodes = rawGraph.nodes.map(NodeModel.from);
+    const edges = rawGraph.edges.map(EdgeModel.from);
+    return new GraphModel(nodes, edges);
+  }
+}

package/ui/query/index.ts

@@ -0,0 +1,6 @@
+export { useGraphQuery } from './use-graph-query';
+export { useGraph } from './use-graph';
+
+export { GraphModel } from './graph-model';
+export { EdgeModel } from './edge-model';
+export { NodeModel } from './node-model';

package/ui/query/node-model.ts

@@ -0,0 +1,16 @@
+import { ComponentModel } from '@teambit/component';
+import { RawNode } from './get-graph.query';
+
+export class NodeModel {
+  id: string;
+  component: ComponentModel;
+
+  static from(rawNode: RawNode) {
+    const node = new NodeModel();
+    node.id = rawNode.id;
+    // @TODO - component model should not expect all fields to have values
+    // @ts-ignore
+    node.component = ComponentModel.from(rawNode.component);
+    return node;
+  }
+}

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

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { GraphQlError } from '@teambit/graphql';
+import { GET_GRAPH, RawGraphQuery } from './get-graph.query';
+import { GraphModel } from './graph-model';
+
+type QueryVariables = {
+  ids: string[];
+  filter?: string;
+};
+
+/** provides dependencies graph data from graphQL */
+export function useGraphQuery(componentId: string[], filter?: string) {
+  const { data, error, loading } = useDataQuery<RawGraphQuery, QueryVariables>(GET_GRAPH, {
+    variables: { ids: componentId, filter },
+  });
+
+  const rawGraph = data?.graph;
+  const clientError = !rawGraph && !loading ? new GraphQlError(404) : undefined;
+  const serverError = error ? new GraphQlError(500, error.message) : undefined;
+
+  return useMemo(() => {
+    return {
+      graph: rawGraph ? GraphModel.from(rawGraph) : undefined,
+      error: serverError || clientError,
+      loading,
+    };
+  }, [rawGraph, error]);
+}

package/ui/query/use-graph.tsx

@@ -0,0 +1,12 @@
+import { useRouteMatch } from 'react-router-dom';
+
+import { useGraphQuery } from './use-graph-query';
+
+export function useGraph() {
+  const {
+    // @ts-ignore
+    params: { componentId },
+  } = useRouteMatch();
+
+  return useGraphQuery([componentId]);
+}