@teambit/graph 0.0.752 → 0.0.753

package/graph.ui.runtime.tsx

@@ -1,10 +1,11 @@
 import { ComponentType } from 'react';
 import { UIRuntime } from '@teambit/ui';
 import { Slot, SlotRegistry } from '@teambit/harmony';
-
+import { ComponentCompareUI, ComponentCompareAspect } from '@teambit/component-compare';
 import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';
 import { GraphAspect } from './graph.aspect';
 import { GraphSection } from './ui/graph.section';
+import { GraphCompareSection } from './graph.compare.section';
 
 export interface ComponentWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
   component: ComponentModel;
@@ -25,15 +26,24 @@ export class GraphUI {
   }
 
   constructor(private componentWidgetSlot: ComponentWidgetSlot) {}
-  static dependencies = [ComponentAspect];
+  static dependencies = [ComponentAspect, ComponentCompareAspect];
   static runtime = UIRuntime;
   static slots = [Slot.withType<ComponentWidget>()];
-  static async provider([componentUI]: [ComponentUI], config, [componentWidgetSlot]: [ComponentWidgetSlot]) {
+  static async provider(
+    [componentUI, componentCompare]: [ComponentUI, ComponentCompareUI],
+    config,
+    [componentWidgetSlot]: [ComponentWidgetSlot]
+  ) {
     const graphUI = new GraphUI(componentWidgetSlot);
     const section = new GraphSection(componentWidgetSlot);
+    const graphSection = new GraphCompareSection();
     componentUI.registerNavigation(section.navigationLink, section.order);
     componentUI.registerRoute(section.route);
-
+    componentCompare.registerNavigation({
+      props: graphSection.navigationLink,
+      order: graphSection.navigationLink.order,
+    });
+    componentCompare.registerRoutes([graphSection.route]);
     return graphUI;
   }
 }

package/package.json

@@ -1,35 +1,41 @@
 {
   "name": "@teambit/graph",
-  "version": "0.0.752",
+  "version": "0.0.753",
   "homepage": "https://bit.dev/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "0.0.752"
+    "version": "0.0.753"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
     "lodash": "4.17.21",
     "classnames": "2.2.6",
     "react-flow-renderer": "8.3.7",
+    "semver": "7.3.4",
     "dagre": "0.8.5",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/graph.cleargraph": "0.0.1",
     "@teambit/harmony": "0.3.3",
+    "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.text.muted-text": "1.0.1",
     "@teambit/evangelist.input.checkbox.label": "1.0.3",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/component": "0.0.752",
-    "@teambit/graphql": "0.0.752",
-    "@teambit/cli": "0.0.496",
-    "@teambit/ui": "0.0.752",
+    "@teambit/component": "0.0.753",
+    "@teambit/graphql": "0.0.753",
+    "@teambit/cli": "0.0.497",
+    "@teambit/component-compare": "0.0.1",
+    "@teambit/ui": "0.0.753",
     "@teambit/legacy-bit-id": "0.0.399",
+    "@teambit/component.modules.component-url": "0.0.124",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/envs.ui.env-icon": "0.0.486",
+    "@teambit/component.ui.compare": "0.0.1",
+    "@teambit/design.ui.round-loader": "0.0.346",
     "@teambit/design.ui.pages.not-found": "0.0.355",
     "@teambit/design.ui.pages.server-error": "0.0.355",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
@@ -40,6 +46,7 @@
     "@types/react": "^17.0.8",
     "@types/lodash": "4.14.165",
     "@types/classnames": "2.2.11",
+    "@types/semver": "7.3.4",
     "@types/dagre": "0.7.44",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
@@ -49,7 +56,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.276",
+    "@teambit/legacy": "1.0.277",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -77,7 +84,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.276",
+        "@teambit/legacy": "1.0.277",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1654399579544.js → preview-1654572446572.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.752/dist/graph.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.752/dist/graph.docs.md')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.753/dist/graph.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.753/dist/graph.docs.md')]

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

@@ -61,3 +61,11 @@
     display: none;
   }
 }
+
+.link {
+  text-decoration: none;
+  color: var(--bit-text-color-heavyed);
+  &:hover {
+    text-decoration: underline;
+  }
+}

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

@@ -6,6 +6,8 @@ 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 { NavLink } from '@teambit/base-ui.routing.nav-link';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
 import { NodeModel } from '../query/node-model';
 import { ComponentGraphContext } from '../dependencies-graph/';
 
@@ -30,7 +32,9 @@ export function ComponentNode({ node, type = 'defaultNode', ...rest }: Component
         <Breadcrumbs componentId={id} className={mutedText} />
       </div>
       <div className={styles.nameLine}>
-        <span className={classnames(styles.name, ellipsis)}>{id.name}</span>
+        <NavLink className={styles.link} external={true} href={ComponentUrl.toUrl(id, { includeVersion: false })}>
+          <span className={classnames(styles.name, ellipsis)}>{id.name}</span>
+        </NavLink>
         {id.version && <span className={classnames(styles.version, ellipsis)}>{id.version}</span>}
 
         <div className={styles.buffs}>

package/ui/component-node/index.ts

@@ -1,3 +1,8 @@
+import componentStyles from './component-node.module.scss';
+
 export { ComponentNode } from './component-node';
 
-export { defaultNodeColor, rootNodeColor, externalNodeColor } from './variants';
+export { defaultNodeColor, rootNodeColor, externalNodeColor, root, defaultNode, external } from './variants';
+
+const { compNode, firstRow, envIcon, breadcrumbs, nameLine, name, version, buffs, link } = componentStyles;
+export const styles = { compNode, firstRow, envIcon, breadcrumbs, nameLine, name, version, buffs, link };

package/ui/component-node/variants.ts

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

package/ui/dependencies-compare/compare-graph-model.ts

@@ -0,0 +1,8 @@
+import { EdgeModel, GraphModel } from '@teambit/graph';
+import { CompareNodeModel } from './compare-node-model';
+
+export class CompareGraphModel extends GraphModel<CompareNodeModel, EdgeModel> {
+  constructor(public nodes: CompareNodeModel[], public edges: EdgeModel[]) {
+    super(nodes, edges);
+  }
+}

package/ui/dependencies-compare/compare-node-model.ts

@@ -0,0 +1,11 @@
+import { ComponentModel } from '@teambit/component';
+import { NodeModel } from '@teambit/graph';
+
+export type CompareStatus = 'modified' | 'new' | 'deleted' | undefined;
+
+export class CompareNodeModel extends NodeModel {
+  id: string;
+  component: ComponentModel;
+  compareVersion: string;
+  status: CompareStatus;
+}

package/ui/dependencies-compare/dependencies-compare.module.scss

@@ -0,0 +1,12 @@
+$d30: #878c9a;
+$b70: #0d2de3;
+
+.page {
+  margin-top: 16px; // not exported
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

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

@@ -0,0 +1,109 @@
+import classNames from 'classnames';
+import { useComponentCompare } from '@teambit/component.ui.compare';
+import { RoundLoader } from '@teambit/design.ui.round-loader';
+import {
+  calcElements,
+  calcMinimapColors,
+  dependenciesGraphStyles,
+  GraphFilter,
+  GraphFilters,
+  graphPageStyles,
+  useGraphQuery,
+} from '@teambit/graph';
+import React, { useEffect, useRef, useState } from 'react';
+import ReactFlow, {
+  Background,
+  Controls,
+  Handle,
+  MiniMap,
+  NodeProps,
+  NodeTypesType,
+  OnLoadParams,
+  Position,
+  ReactFlowProvider,
+} from 'react-flow-renderer';
+import styles from './dependencies-compare.module.scss';
+import { DependencyCompareNode } from './dependency-compare-node';
+import { diffGraph } from './diff-graph';
+
+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} />
+      <DependencyCompareNode node={data.node} type={data.type} />
+    </div>
+  );
+}
+
+const NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };
+
+export function DependenciesCompare() {
+  const graphRef = useRef<OnLoadParams>();
+  const componentCompare = useComponentCompare();
+
+  const baseId = componentCompare?.base?.id;
+  const compareId = componentCompare?.compare?.id;
+
+  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');
+  const isFiltered = filter === 'runtimeOnly';
+  const { loading: baseLoading, graph: baseGraph } = useGraphQuery(baseId && [baseId.toString()], filter);
+  const { loading: compareLoading, graph: compareGraph } = useGraphQuery(compareId && [compareId.toString()], filter);
+  const loading = baseLoading || compareLoading;
+  const graph = diffGraph(baseGraph, compareGraph, baseId) ?? undefined;
+  const elements = calcElements(graph, { rootNode: baseId });
+
+  useEffect(() => {
+    graphRef.current?.fitView();
+  }, [elements]);
+
+  function handleLoad(instance: OnLoadParams) {
+    graphRef.current = instance;
+    graphRef.current?.fitView();
+  }
+
+  const onCheckFilter = (_isFiltered: boolean) => {
+    setFilter(_isFiltered ? 'runtimeOnly' : undefined);
+  };
+
+  if (!loading && (!baseGraph || !compareGraph)) {
+    return <></>;
+  }
+
+  return (
+    <div className={classNames([styles.page, graphPageStyles.graph])}>
+      {loading && (
+        <div className={styles.loader}>
+          <RoundLoader />
+        </div>
+      )}
+      <ReactFlowProvider>
+        <ReactFlow
+          draggable={false}
+          nodesDraggable={true}
+          selectNodesOnDrag={false}
+          nodesConnectable={false}
+          zoomOnDoubleClick={false}
+          elementsSelectable={false}
+          maxZoom={1}
+          className={dependenciesGraphStyles.graph}
+          elements={elements}
+          nodeTypes={NodeTypes}
+          onLoad={handleLoad}
+        >
+          <Background />
+          <Controls className={dependenciesGraphStyles.controls} />
+          <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />
+          <GraphFilters
+            className={graphPageStyles.filters}
+            disable={loading}
+            isFiltered={isFiltered}
+            onChangeFilter={onCheckFilter}
+          />
+        </ReactFlow>
+      </ReactFlowProvider>
+    </div>
+  );
+}

package/ui/dependencies-compare/dependency-compare-node.module.scss

@@ -0,0 +1,21 @@
+.arrowIcon {
+  height: 16px;
+  padding-right: 8px;
+}
+
+.versionUp {
+  color: var(--positive-color, #37b26c);
+}
+
+.versionDown {
+  color: var(--negative-color, #e62e5c);
+}
+
+.link {
+  text-decoration: none;
+  color: var(--bit-text-color-heavyed);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,99 @@
+import { NavLink } from '@teambit/base-ui.routing.nav-link';
+import { Card } from '@teambit/base-ui.surfaces.card';
+import { mutedText } from '@teambit/base-ui.text.muted-text';
+import { ComponentID } from '@teambit/component';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+import { CompareStatusResolver } from '@teambit/component.ui.compare';
+import { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';
+import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { EnvIcon } from '@teambit/envs.ui.env-icon';
+import { componentNodeStyles, defaultNode, external } from '@teambit/graph';
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import { compare, valid } from 'semver';
+import { CompareNodeModel } from './compare-node-model';
+import styles from './dependency-compare-node.module.scss';
+import variants from './dependency-compare-variants.module.scss';
+
+function getVariant(nodeType?: string) {
+  switch (nodeType) {
+    case 'defaultNode':
+      return defaultNode;
+    case 'root':
+      return variants[nodeType];
+    case 'external':
+      return external;
+    default:
+      return null;
+  }
+}
+
+export type DependencyCompareNodeProps = {
+  node: CompareNodeModel;
+  type?: string;
+};
+
+export function DependencyCompareNode(props: DependencyCompareNodeProps) {
+  const { node, type = 'defaultNode' } = props;
+  const { id: baseIdStr, component: baseComponent, compareVersion, status } = node;
+  const { version: baseVersion } = baseComponent;
+  const baseId = ComponentID.fromString(baseIdStr);
+  const versionDiff = useMemo(
+    () => valid(baseVersion) && valid(compareVersion) && compare(baseVersion, compareVersion),
+    [baseVersion, compareVersion]
+  );
+
+  return (
+    <Card className={classnames(componentNodeStyles.compNode, getVariant(type))} elevation="none">
+      <div className={componentNodeStyles.firstRow}>
+        <EnvIcon component={baseComponent} className={componentNodeStyles.envIcon} />
+        <Breadcrumbs componentId={baseId} className={mutedText} />
+      </div>
+      <div className={componentNodeStyles.nameLine}>
+        <NavLink className={styles.link} external={true} href={ComponentUrl.toUrl(baseId, { includeVersion: false })}>
+          <span className={classnames(componentNodeStyles.name, ellipsis)}>{baseId.name}</span>
+        </NavLink>
+        {baseId.version && <span className={classnames(componentNodeStyles.version, ellipsis)}>{baseId.version}</span>}
+        {versionDiff !== 0 && (
+          <img
+            className={classnames([styles.arrowIcon, styles.versionUp])}
+            src="https://static.bit.dev/bit-icons/version-bump.svg"
+          />
+        )}
+        {compareVersion && versionDiff !== 0 && (
+          <span
+            className={classnames(
+              styles.version,
+              componentNodeStyles.version,
+              ellipsis,
+              versionDiff === -1 && styles.versionUp,
+              versionDiff === 1 && styles.versionDown
+            )}
+          >
+            {compareVersion}
+          </span>
+        )}
+
+        <div className={styles.buffs}>
+          <DeprecationIcon component={baseComponent} />
+          {status !== undefined && <CompareStatusResolver status={status} />}
+        </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/dependencies-compare/dependency-compare-variants.module.scss

@@ -0,0 +1,21 @@
+$success: #37b26c;
+$borderLabelHeight: 20px;
+
+.root {
+  border-color: $success;
+  border-top-width: 20px;
+
+  border-radius: 10px;
+  box-shadow: 0px 0px 0px 2px #d0f1de, var(--bit-shadow-hover-medium);
+
+  &:before {
+    content: 'Current component';
+    position: absolute;
+    top: 1px;
+    left: 10px;
+
+    font-size: $borderLabelHeight * 0.5;
+    color: white;
+    line-height: $borderLabelHeight;
+  }
+}

package/ui/dependencies-compare/diff-graph.ts

@@ -0,0 +1,69 @@
+import { ComponentID } from '@teambit/component';
+import { EdgeModel, GraphModel, NodeModel } from '@teambit/graph';
+import { CompareGraphModel } from './compare-graph-model';
+import { CompareNodeModel } from './compare-node-model';
+
+const toShortId = (node: NodeModel) => node.component.id.toStringWithoutVersion();
+
+// this is to get a key with versions ignored so that we'll have a unique set of component nodes
+const toShortIdFromNodeId = (nodeId: string) => nodeId.split('@')[0];
+
+const delim = '::';
+
+const getEdgeId = (_e: EdgeModel) => {
+  return `${toShortIdFromNodeId(_e.sourceId)}${delim}${toShortIdFromNodeId(_e.targetId)}`;
+};
+
+export function diffGraph(
+  baseGraph?: GraphModel<NodeModel, EdgeModel>,
+  compareGraph?: GraphModel<NodeModel, EdgeModel>,
+  baseId?: ComponentID
+) {
+  if (!baseGraph || !compareGraph || !baseId) return null;
+
+  const baseNodes = baseGraph.nodes;
+  const compareNodes = compareGraph.nodes;
+
+  const baseNodesMap = new Map<string, NodeModel>(baseNodes.map((n) => [toShortId(n), n]));
+  const compareNodesMap = new Map<string, NodeModel>(compareNodes.map((n) => [toShortId(n), n]));
+
+  const allNodes: Array<CompareNodeModel> = [];
+  for (const baseNode of baseNodes) {
+    const compareNode = compareNodesMap.get(toShortId(baseNode));
+    if (compareNode) {
+      allNodes.push({
+        ...baseNode,
+        compareVersion: compareNode.component.version,
+        status: compareNode.component.id.isEqual(baseNode.component.id) ? undefined : 'modified',
+      });
+    } else {
+      allNodes.push({
+        ...baseNode,
+        compareVersion: baseNode.component.version,
+        status: 'deleted',
+      });
+    }
+  }
+
+  const newNodes = compareNodes.filter((n) => !baseNodesMap.has(toShortId(n)));
+
+  for (const node of newNodes) {
+    allNodes.push({
+      ...node,
+      compareVersion: '',
+      status: 'new',
+    });
+  }
+  const allNodesMap = new Map<string, CompareNodeModel>(allNodes.map((n) => [toShortId(n), n]));
+
+  const baseEdgesMap = new Map<string, EdgeModel>(baseGraph.edges.map((baseEdge) => [getEdgeId(baseEdge), baseEdge]));
+  const edgesOnlyInCompare = compareGraph.edges
+    .filter((compareEdge) => !baseEdgesMap.has(getEdgeId(compareEdge)))
+    .map((compareEdge) => ({
+      ...compareEdge,
+      sourceId: allNodesMap.get(toShortIdFromNodeId(compareEdge.sourceId))?.id.toString() || baseId.toString(),
+      targetId: allNodesMap.get(toShortIdFromNodeId(compareEdge.targetId))?.id.toString() || baseId.toString(),
+    }));
+  const allEdges = [...baseGraph.edges, ...edgesOnlyInCompare];
+  return new CompareGraphModel(allNodes, allEdges);
+}

package/ui/dependencies-compare/index.ts

@@ -0,0 +1 @@
+export { DependenciesCompare } from './dependencies-compare';

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

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { Node, Edge, ArrowHeadType } from 'react-flow-renderer';
+import { ArrowHeadType, Edge, Node } from 'react-flow-renderer';
 import { ComponentID } from '@teambit/component';
 import { calcLayout } from './calc-layout';
-import { GraphModel } from '../query';
+import { EdgeModel, GraphModel, NodeModel } from '../query';
 
 import { depTypeToClass, depTypeToLabel } from './dep-edge';
 
@@ -13,7 +13,7 @@ type ElementsOptions = {
 /**
  * generate Nodes and Edges for the ReactFlowRenderer graph renderer
  */
-export function calcElements(graph: GraphModel | undefined, { rootNode }: ElementsOptions) {
+export function calcElements(graph: GraphModel<NodeModel, EdgeModel> | undefined, { rootNode }: ElementsOptions) {
   return useMemo(() => {
     if (!graph) return [];
 

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

@@ -1,5 +1,5 @@
 import dagre, { graphlib } from 'dagre';
-import { GraphModel } from '../query';
+import { EdgeModel, GraphModel, NodeModel } from '../query';
 
 const NODE_WIDTH = 260;
 const NODE_HEIGHT = 90;
@@ -9,7 +9,7 @@ const BOTTOM_TO_TOP = 'BT';
 /**
  * calculate the specific location of each node in the graph
  */
-export function calcLayout(graph: GraphModel) {
+export function calcLayout(graph: GraphModel<NodeModel, EdgeModel>) {
   const g = new graphlib.Graph();
   g.setGraph({ rankdir: BOTTOM_TO_TOP });
   g.setDefaultEdgeLabel(() => ({}));

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

@@ -1,22 +1,22 @@
-import React, { useMemo, useCallback, useRef, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import ReactFlow, {
-  ReactFlowProvider,
-  Controls,
   Background,
+  Controls,
+  Handle,
   MiniMap,
-  OnLoadParams,
+  NodeProps,
   NodeTypesType,
-  Handle,
+  OnLoadParams,
   Position,
-  NodeProps,
   ReactFlowProps,
+  ReactFlowProvider,
 } 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 { EdgeModel, GraphModel, NodeModel } from '../query';
 import { calcElements } from './calc-elements';
 import { calcMinimapColors } from './minimap';
 import { ComponentGraphContext } from './graph-context';
@@ -40,7 +40,7 @@ const NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };
 
 export type DependenciesGraphProps = {
   rootNode: ComponentID;
-  graph: GraphModel;
+  graph: GraphModel<NodeModel, EdgeModel>;
   componentWidgets: ComponentWidgetSlot;
   onLoad?: (instance: OnLoadParams) => void;
 } & Omit<ReactFlowProps, 'elements'>;

package/ui/dependencies-graph/index.ts

@@ -1,3 +1,12 @@
+import componentStyles from './dependencies-graph.module.scss';
+
 export { DependenciesGraph } from './dependencies-graph';
 export { ComponentGraphContext, ComponentGraph } from './graph-context';
 export type { DependenciesGraphProps } from './dependencies-graph';
+export { depTypeToClass, depTypeToLabel } from './dep-edge';
+export { calcMinimapColors } from './minimap';
+export { calcLayout } from './calc-layout';
+export { calcElements } from './calc-elements';
+
+const { graph, minimap, controls } = componentStyles;
+export const styles = { graph, minimap, controls };

package/ui/graph-page/index.ts

@@ -1 +1,7 @@
+import pageStyles from './graph-page.module.scss';
+
 export { GraphPage } from './graph-page';
+export { GraphFilters } from './graph-filters';
+
+const { graph, filters } = pageStyles;
+export const styles = { graph, filters };

package/ui/query/graph-model.ts

@@ -2,8 +2,9 @@ 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[]) {}
+export class GraphModel<N extends NodeModel, E extends EdgeModel> {
+  constructor(public nodes: N[], public edges: E[]) {}
+
   static from(rawGraph: RawGraph) {
     const nodes = rawGraph.nodes.map(NodeModel.from);
     const edges = rawGraph.edges.map(EdgeModel.from);

package/ui/query/index.ts

@@ -4,3 +4,4 @@ export { useGraph } from './use-graph';
 export { GraphModel } from './graph-model';
 export { EdgeModel } from './edge-model';
 export { NodeModel } from './node-model';
+export { RawGraph } from './get-graph.query';