@teambit/graph 0.0.555 → 0.0.559

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "0.0.555",
+  "version": "0.0.559",
   "homepage": "https://bit.dev/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "0.0.555"
+    "version": "0.0.559"
   },
   "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.555",
-    "@teambit/graphql": "0.0.555",
-    "@teambit/cli": "0.0.386",
-    "@teambit/ui": "0.0.555",
-    "@teambit/legacy-bit-id": "0.0.375",
-    "@teambit/component.ui.deprecation-icon": "0.0.469",
+    "@teambit/component": "0.0.559",
+    "@teambit/graphql": "0.0.559",
+    "@teambit/cli": "0.0.389",
+    "@teambit/ui": "0.0.559",
+    "@teambit/legacy-bit-id": "0.0.378",
+    "@teambit/component.ui.deprecation-icon": "0.0.472",
     "@teambit/design.ui.styles.ellipsis": "0.0.346",
-    "@teambit/envs.ui.env-icon": "0.0.463",
+    "@teambit/envs.ui.env-icon": "0.0.466",
     "@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.464"
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.467"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.172",
+    "@teambit/legacy": "1.0.175",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -77,12 +77,27 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.172",
+        "@teambit/legacy": "1.0.175",
         "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/tsconfig.json

@@ -15,9 +15,9 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "outDir": "dist",
     "composite": true,
     "emitDeclarationOnly": true,
+    "outDir": "dist",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,

package/component-graph/component-graph.ts

@@ -1,105 +0,0 @@
-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

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

package/duplicate-dependency.ts

@@ -1,18 +0,0 @@
-// eslint-disable-next-line import/no-cycle
-import type { ComponentGraph } from './component-graph';
-
-export class DuplicateDependency {
-  latestVersionId: string;
-  priorVersions: VersionSubgraph[];
-
-  constructor(latestVersionId: string, priorVersions: VersionSubgraph[]) {
-    this.latestVersionId = latestVersionId;
-    this.priorVersions = priorVersions;
-  }
-}
-
-export type VersionSubgraph = {
-  versionId: string;
-  subGraph: ComponentGraph;
-  immediateDependents: string[];
-};

package/edge-type.ts

@@ -1,5 +0,0 @@
-export enum EdgeType {
-  dev = 'DEV',
-  runtime = 'RUNTIME',
-  peer = 'PEER',
-}

package/graph-builder.ts

@@ -1,56 +0,0 @@
-import { ComponentFactory, ComponentID, ComponentMain } from '@teambit/component';
-import type LegacyGraph from '@teambit/legacy/dist/scope/graph/graph';
-import { ComponentGraph } from './component-graph';
-import { Dependency } from './model/dependency';
-
-type GetGraphOpts = {
-  host?: ComponentFactory;
-};
-
-type BuildFromLegacyGraphOpts = {
-  host?: ComponentFactory;
-};
-export class GraphBuilder {
-  _graph?: ComponentGraph;
-  _initialized = false;
-  constructor(private componentAspect: ComponentMain) {}
-
-  async getGraph(ids?: ComponentID[], opts: GetGraphOpts = {}): Promise<ComponentGraph> {
-    const componentHost = opts.host || this.componentAspect.getHost();
-
-    const legacyGraph = await componentHost.getLegacyGraph(ids);
-    const graph = await this.buildFromLegacy(legacyGraph, { host: opts.host });
-    this._graph = graph;
-    this._initialized = true;
-    return this._graph;
-  }
-
-  private async buildFromLegacy(
-    legacyGraph: LegacyGraph,
-    opts: BuildFromLegacyGraphOpts = {}
-  ): Promise<ComponentGraph> {
-    const newGraph = new ComponentGraph();
-    const componentHost = opts.host || this.componentAspect.getHost();
-
-    const setNodeP = legacyGraph.nodes().map(async (nodeId) => {
-      const componentId = await componentHost.resolveComponentId(nodeId);
-      const component = await componentHost.get(componentId);
-      if (component) {
-        newGraph.setNode(componentId.toString(), component);
-      }
-    });
-    await Promise.all(setNodeP);
-
-    const setEdgePromise = legacyGraph.edges().map(async (edgeId) => {
-      const source = await componentHost.resolveComponentId(edgeId.v);
-      const target = await componentHost.resolveComponentId(edgeId.w);
-      const edgeObj =
-        legacyGraph.edge(edgeId.v, edgeId.w) === 'dependencies' ? new Dependency('runtime') : new Dependency('dev');
-      newGraph.setEdge(source.toString(), target.toString(), edgeObj);
-    });
-    await Promise.all(setEdgePromise);
-
-    newGraph.versionMap = newGraph._calculateVersionMap();
-    return newGraph;
-  }
-}

package/graph.aspect.ts

@@ -1,7 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const GraphAspect = Aspect.create({
-  id: 'teambit.component/graph',
-  dependencies: [],
-  defaultConfig: {},
-});

package/graph.graphql.ts

@@ -1,94 +0,0 @@
-import { ComponentMain } from '@teambit/component';
-import { Schema } from '@teambit/graphql';
-import gql from 'graphql-tag';
-
-import { GraphBuilder } from './graph-builder';
-import { ComponentGraph } from './component-graph';
-import { GraphFilter } from './model/graph-filters';
-import { DependencyType } from './model/dependency';
-import { EdgeType } from './edge-type';
-
-const textCmp = new Intl.Collator().compare;
-
-export function graphSchema(graphBuilder: GraphBuilder, componentAspect: ComponentMain): Schema {
-  return {
-    typeDefs: gql`
-      type ComponentGraph {
-        nodes: [ComponentGraphNode]
-        edges: [ComponentGraphEdge]
-      }
-
-      type ComponentGraphNode {
-        id: String
-        component: Component
-      }
-
-      enum DependencyLifecycleType {
-        PEER
-        RUNTIME
-        DEV
-      }
-
-      type ComponentGraphEdge {
-        sourceId: String
-        targetId: String
-        dependencyLifecycleType: DependencyLifecycleType
-      }
-
-      extend type Query {
-        graph(ids: [String], filter: String): ComponentGraph
-      }
-    `,
-    resolvers: {
-      ComponentGraph: {
-        nodes: (graph: ComponentGraph) => {
-          return graph.nodes
-            .map((node) => {
-              return {
-                id: node.id,
-                component: node.attr,
-              };
-            })
-            .sort((a, b) => textCmp(a.id, b.id));
-        },
-        edges: (graph: ComponentGraph) => {
-          return graph.edges
-            .map(
-              (edge) =>
-                ({
-                  sourceId: edge.sourceId,
-                  targetId: edge.targetId,
-                  dependencyLifecycleType: getDependencyLifecycleType(edge.attr.type),
-                } as { sourceId: string; targetId: string; dependencyLifecycleType: EdgeType })
-            )
-            .sort((a, b) => textCmp(a.sourceId, b.sourceId))
-            .sort((a, b) => textCmp(a.targetId, b.targetId));
-        },
-      },
-      Query: {
-        graph: async (_parent, { ids, filter }: { ids?: string[]; filter?: GraphFilter }) => {
-          const componentsHost = componentAspect.getHost();
-          const resolvedIds = ids
-            ? await componentsHost.resolveMultipleComponentIds(ids)
-            : (await componentsHost.list()).map((x) => x.id);
-
-          const graph = await graphBuilder.getGraph(resolvedIds);
-          if (!graph) return undefined;
-
-          if (filter === 'runtimeOnly') {
-            const runtimeGraph = graph.runtimeOnly(resolvedIds.map((x) => x.toString()));
-            return runtimeGraph;
-          }
-
-          return graph;
-        },
-      },
-    },
-  };
-}
-
-function getDependencyLifecycleType(edgeRawData: DependencyType): EdgeType {
-  if (edgeRawData === 'dev') return EdgeType.dev;
-  if (edgeRawData === 'runtime') return EdgeType.runtime;
-  return EdgeType.peer;
-}

package/graph.main.runtime.ts

@@ -1,15 +0,0 @@
-import { MainRuntime } from '@teambit/cli';
-import GraphqlAspect from '@teambit/graphql';
-import { ComponentAspect } from '@teambit/component';
-
-import { GraphAspect } from './graph.aspect';
-import { provide } from './graph.provider';
-
-export const GraphMain = {
-  name: 'graph',
-  runtime: MainRuntime,
-  dependencies: [GraphqlAspect, ComponentAspect],
-  provider: provide,
-};
-
-GraphAspect.addRuntime(GraphMain);

package/graph.provider.ts

@@ -1,14 +0,0 @@
-import { GraphqlMain } from '@teambit/graphql';
-import { ComponentMain } from '@teambit/component';
-
-import { GraphBuilder } from './graph-builder';
-import { graphSchema } from './graph.graphql';
-
-export type GraphDeps = [GraphqlMain, ComponentMain];
-
-export async function provide([graphql, componentAspect]: GraphDeps): Promise<GraphBuilder> {
-  const graphBuilder = new GraphBuilder(componentAspect);
-  // TODO: make sure it's working (the host here might be undefined?)
-  graphql.register(graphSchema(graphBuilder, componentAspect));
-  return graphBuilder;
-}

package/graph.ui.runtime.tsx

@@ -1,41 +0,0 @@
-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/index.ts

@@ -1,11 +0,0 @@
-export { GraphAspect as default, GraphAspect } from './graph.aspect';
-
-export { Dependency } from './model/dependency';
-export { DuplicateDependency, VersionSubgraph } from './duplicate-dependency';
-export type { ComponentGraph } from './component-graph';
-export type { GraphBuilder } from './graph-builder';
-export type { GraphMain } from './graph.main.runtime';
-export { EdgeType } from './edge-type';
-export type { GraphUI, ComponentWidget, ComponentWidgetSlot, ComponentWidgetProps } from './graph.ui.runtime';
-export { useGraph, useGraphQuery, GraphModel, EdgeModel, NodeModel } from './ui/query';
-export { objectListToGraph, IdGraph } from './object-list-to-graph';

package/model/dependency/dependency.ts

@@ -1,11 +0,0 @@
-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

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

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

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

package/model/graph-filters/index.ts

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

package/object-list-to-graph.ts

@@ -1,54 +0,0 @@
-import { Graph } from 'cleargraph';
-import { uniqBy } from 'lodash';
-import { BitId } from '@teambit/legacy-bit-id';
-import { ObjectList } from '@teambit/legacy/dist/scope/objects/object-list';
-import { getAllVersionsInfo } from '@teambit/legacy/dist/scope/component-ops/traverse-versions';
-import { Dependency } from './model/dependency';
-
-type Node = { id: string; node: BitId };
-type Edge = { sourceId: string; targetId: string; edge: Dependency };
-
-export class IdGraph extends Graph<BitId, Dependency> {
-  constructor(nodes: Node[] = [], edges: Edge[] = []) {
-    super(nodes, edges);
-  }
-}
-
-export async function objectListToGraph(objectList: ObjectList): Promise<IdGraph> {
-  const bitObjectsList = await objectList.toBitObjects();
-  const components = bitObjectsList.getComponents();
-  const versions = bitObjectsList.getVersions();
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-  await Promise.all(
-    components.map(async (component) => {
-      const versionsInfo = await getAllVersionsInfo({
-        modelComponent: component,
-        versionObjects: versions,
-        throws: false,
-      });
-      versionsInfo.forEach((versionInfo) => {
-        const id = component.toBitId().changeVersion(versionInfo.tag || versionInfo.ref.toString());
-        const idStr = id.toString();
-        nodes.push({ id: idStr, node: id });
-        if (!versionInfo.version) {
-          return;
-        }
-        const { dependencies, devDependencies, extensionDependencies } = versionInfo.version.depsIdsGroupedByType;
-        const addDep = (depId: BitId, edge: Dependency) => {
-          const depIdStr = depId.toString();
-          nodes.push({ id: depIdStr, node: depId });
-          edges.push({ sourceId: idStr, targetId: depIdStr, edge });
-        };
-        const runTime = new Dependency('runtime');
-        const dev = new Dependency('dev');
-        dependencies.forEach((depId) => addDep(depId, runTime));
-        [...devDependencies, ...extensionDependencies].forEach((depId) => addDep(depId, dev));
-      });
-    })
-  );
-  const uniqNodes = uniqBy(nodes, 'id');
-  const idGraph = new IdGraph(uniqNodes, edges);
-
-  return idGraph;
-}

package/types/asset.d.ts

@@ -1,29 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

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

package/ui/component-node/variants.ts

@@ -1,5 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,98 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

package/ui/dependencies-graph/minimap.ts

@@ -1,15 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

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

package/ui/graph.section.tsx

@@ -1,19 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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