@teambit/graph 1.0.106 → 1.0.108

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

@@ -112,25 +112,24 @@ function DependenciesGraph(_ref) {
     componentWidgets
   }), [componentWidgets]);
   const handleLoad = (0, _react().useCallback)(instance => {
-    if (((graph === null || graph === void 0 ? void 0 : graph.nodes.length) ?? 0) <= 3) {
+    if ((graph?.nodes.length ?? 0) <= 3) {
       instance.fitView({
         padding: 2
       });
     } else {
       instance.fitView();
     }
-    onLoad === null || onLoad === void 0 || onLoad(instance);
+    onLoad?.(instance);
   }, [onLoad]);
 
   // clear ref on unmount
   (0, _react().useEffect)(() => () => graphRef.current = undefined, []);
   (0, _react().useEffect)(() => {
     setTimeout(() => {
-      var _graphRef$current, _graphRef$current2;
-      if (graph.nodes.length <= 3) return (_graphRef$current = graphRef.current) === null || _graphRef$current === void 0 ? void 0 : _graphRef$current.fitView({
+      if (graph.nodes.length <= 3) return graphRef.current?.fitView({
         padding: 2
       });
-      return (_graphRef$current2 = graphRef.current) === null || _graphRef$current2 === void 0 ? void 0 : _graphRef$current2.fitView();
+      return graphRef.current?.fitView();
     }, 0);
   }, [graph]);
   return /*#__PURE__*/_react().default.createElement(_graphContext().ComponentGraphContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactFlowRenderer","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","createElement","Handle","type","position","isConnectable","ComponentNode","node","NodeTypes","DependenciesGraph","_ref","graph","rootNode","componentWidgets","className","onLoad","children","rest","graphRef","useRef","elements","calcElements","context","useMemo","handleLoad","useCallback","instance","nodes","fitView","padding","useEffect","current","undefined","setTimeout","_graphRef$current","_graphRef$current2","ComponentGraphContext","Provider","value","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","maxZoom","minZoom","classnames","styles","nodeTypes","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap"],"sources":["dependencies-graph.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport classnames from 'classnames';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  NodeProps,\n  NodeTypesType,\n  OnLoadParams,\n  Position,\n  ReactFlowProps,\n  ReactFlowProvider,\n} from 'react-flow-renderer';\nimport { ComponentID } from '@teambit/component';\n\nimport { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport { ComponentNode } from '../component-node';\nimport { EdgeModel, GraphModel, NodeModel } from '../query';\nimport { calcElements } from './calc-elements';\nimport { calcMinimapColors } from './minimap';\nimport { ComponentGraphContext } from './graph-context';\n\nimport styles from './dependencies-graph.module.scss';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n\n  return (\n    <div key={id}>\n      <Handle type=\"target\" position={targetPosition} isConnectable={false} />\n      <Handle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <ComponentNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\n// @ts-ignore - incorrect NodeTypes https://github.com/wbkd/react-flow/issues/2101 (#5746)\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport type DependenciesGraphProps = {\n  rootNode: ComponentID;\n  graph: GraphModel<NodeModel, EdgeModel>;\n  componentWidgets: ComponentWidgetSlot;\n  onLoad?: (instance: OnLoadParams) => void;\n} & Omit<ReactFlowProps, 'elements'>;\n\nexport function DependenciesGraph({\n  graph,\n  rootNode,\n  componentWidgets,\n  className,\n  onLoad,\n  children,\n  ...rest\n}: DependenciesGraphProps) {\n  const graphRef = useRef<OnLoadParams>();\n  const elements = calcElements(graph, { rootNode });\n  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);\n\n  const handleLoad = useCallback(\n    (instance: OnLoadParams) => {\n      if ((graph?.nodes.length ?? 0) <= 3) {\n        instance.fitView({\n          padding: 2,\n        });\n      } else {\n        instance.fitView();\n      }\n      onLoad?.(instance);\n    },\n    [onLoad]\n  );\n\n  // clear ref on unmount\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (graph.nodes.length <= 3)\n        return graphRef.current?.fitView({\n          padding: 2,\n        });\n      return graphRef.current?.fitView();\n    }, 0);\n  }, [graph]);\n\n  return (\n    <ComponentGraphContext.Provider value={context}>\n      {/* @ts-ignore - TODO - remove when ReactFlowProvider will be of type `FC<PropsWithChildren<{}>>` instead of `FC` (#5746) */}\n      <ReactFlowProvider>\n        <ReactFlow\n          draggable={false}\n          nodesDraggable={true}\n          selectNodesOnDrag={false}\n          nodesConnectable={false}\n          zoomOnDoubleClick={false}\n          elementsSelectable={false}\n          maxZoom={100}\n          minZoom={0}\n          {...rest}\n          className={classnames(styles.graph, className)}\n          elements={elements}\n          nodeTypes={NodeTypes}\n          onLoad={handleLoad}\n        >\n          <Background />\n          <Controls className={styles.controls} />\n          <MiniMap nodeColor={calcMinimapColors} className={styles.minimap} />\n          {children}\n        </ReactFlow>\n      </ReactFlowProvider>\n    </ComponentGraphContext.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactFlowRenderer","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","createElement","Handle","type","position","isConnectable","ComponentNode","node","NodeTypes","DependenciesGraph","_ref","graph","rootNode","componentWidgets","className","onLoad","children","rest","graphRef","useRef","elements","calcElements","context","useMemo","handleLoad","useCallback","instance","nodes","fitView","padding","useEffect","current","undefined","setTimeout","ComponentGraphContext","Provider","value","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","maxZoom","minZoom","classnames","styles","nodeTypes","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap"],"sources":["dependencies-graph.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport classnames from 'classnames';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  NodeProps,\n  NodeTypesType,\n  OnLoadParams,\n  Position,\n  ReactFlowProps,\n  ReactFlowProvider,\n} from 'react-flow-renderer';\nimport { ComponentID } from '@teambit/component';\n\nimport { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport { ComponentNode } from '../component-node';\nimport { EdgeModel, GraphModel, NodeModel } from '../query';\nimport { calcElements } from './calc-elements';\nimport { calcMinimapColors } from './minimap';\nimport { ComponentGraphContext } from './graph-context';\n\nimport styles from './dependencies-graph.module.scss';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n\n  return (\n    <div key={id}>\n      <Handle type=\"target\" position={targetPosition} isConnectable={false} />\n      <Handle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <ComponentNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\n// @ts-ignore - incorrect NodeTypes https://github.com/wbkd/react-flow/issues/2101 (#5746)\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport type DependenciesGraphProps = {\n  rootNode: ComponentID;\n  graph: GraphModel<NodeModel, EdgeModel>;\n  componentWidgets: ComponentWidgetSlot;\n  onLoad?: (instance: OnLoadParams) => void;\n} & Omit<ReactFlowProps, 'elements'>;\n\nexport function DependenciesGraph({\n  graph,\n  rootNode,\n  componentWidgets,\n  className,\n  onLoad,\n  children,\n  ...rest\n}: DependenciesGraphProps) {\n  const graphRef = useRef<OnLoadParams>();\n  const elements = calcElements(graph, { rootNode });\n  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);\n\n  const handleLoad = useCallback(\n    (instance: OnLoadParams) => {\n      if ((graph?.nodes.length ?? 0) <= 3) {\n        instance.fitView({\n          padding: 2,\n        });\n      } else {\n        instance.fitView();\n      }\n      onLoad?.(instance);\n    },\n    [onLoad]\n  );\n\n  // clear ref on unmount\n  useEffect(() => () => (graphRef.current = undefined), []);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (graph.nodes.length <= 3)\n        return graphRef.current?.fitView({\n          padding: 2,\n        });\n      return graphRef.current?.fitView();\n    }, 0);\n  }, [graph]);\n\n  return (\n    <ComponentGraphContext.Provider value={context}>\n      {/* @ts-ignore - TODO - remove when ReactFlowProvider will be of type `FC<PropsWithChildren<{}>>` instead of `FC` (#5746) */}\n      <ReactFlowProvider>\n        <ReactFlow\n          draggable={false}\n          nodesDraggable={true}\n          selectNodesOnDrag={false}\n          nodesConnectable={false}\n          zoomOnDoubleClick={false}\n          elementsSelectable={false}\n          maxZoom={100}\n          minZoom={0}\n          {...rest}\n          className={classnames(styles.graph, className)}\n          elements={elements}\n          nodeTypes={NodeTypes}\n          onLoad={handleLoad}\n        >\n          <Background />\n          <Controls className={styles.controls} />\n          <MiniMap nodeColor={calcMinimapColors} className={styles.minimap} />\n          {children}\n        </ReactFlow>\n      </ReactFlowProvider>\n    </ComponentGraphContext.Provider>\n  );\n}\n"],"mappings":"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"}

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

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

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

@@ -12,8 +12,7 @@ function _componentNode() {
   return data;
 }
 function calcMinimapColors(node) {
-  var _node$data;
-  const type = (_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.type;
+  const type = node.data?.type;
   switch (type) {
     case 'root':
       return _componentNode().rootNodeColor;

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

@@ -1 +1 @@
-{"version":3,"names":["_componentNode","data","require","calcMinimapColors","node","_node$data","type","rootNodeColor","externalNodeColor","defaultNodeColor"],"sources":["minimap.ts"],"sourcesContent":["import { Node } from 'react-flow-renderer';\nimport { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';\n\nexport function calcMinimapColors(node: Node) {\n  const type = node.data?.type;\n\n  switch (type) {\n    case 'root':\n      return rootNodeColor;\n    case 'external':\n      return externalNodeColor;\n    default:\n      return defaultNodeColor;\n  }\n}\n"],"mappings":";;;;;;AACA,SAAAA,eAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,cAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEO,SAASE,iBAAiBA,CAACC,IAAU,EAAE;EAAA,IAAAC,UAAA;EAC5C,MAAMC,IAAI,IAAAD,UAAA,GAAGD,IAAI,CAACH,IAAI,cAAAI,UAAA,uBAATA,UAAA,CAAWC,IAAI;EAE5B,QAAQA,IAAI;IACV,KAAK,MAAM;MACT,OAAOC,8BAAa;IACtB,KAAK,UAAU;MACb,OAAOC,kCAAiB;IAC1B;MACE,OAAOC,iCAAgB;EAC3B;AACF"}
+{"version":3,"names":["_componentNode","data","require","calcMinimapColors","node","type","rootNodeColor","externalNodeColor","defaultNodeColor"],"sources":["minimap.ts"],"sourcesContent":["import { Node } from 'react-flow-renderer';\nimport { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';\n\nexport function calcMinimapColors(node: Node) {\n  const type = node.data?.type;\n\n  switch (type) {\n    case 'root':\n      return rootNodeColor;\n    case 'external':\n      return externalNodeColor;\n    default:\n      return defaultNodeColor;\n  }\n}\n"],"mappings":";;;;;;AACA,SAAAA,eAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,cAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEO,SAASE,iBAAiBA,CAACC,IAAU,EAAE;EAC5C,MAAMC,IAAI,GAAGD,IAAI,CAACH,IAAI,EAAEI,IAAI;EAE5B,QAAQA,IAAI;IACV,KAAK,MAAM;MACT,OAAOC,8BAAa;IACtB,KAAK,UAAU;MACb,OAAOC,kCAAiB;IAC1B;MACE,OAAOC,iCAAgB;EAC3B;AACF"}

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

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

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

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

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

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

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

@@ -1,13 +1,13 @@
 import { EdgeType } from '@teambit/graph';
 export declare const GET_GRAPH: import("@apollo/client").DocumentNode;
-export declare type RawGraphQuery = {
+export type RawGraphQuery = {
     graph: RawGraph;
 };
-export declare type RawGraph = {
+export type RawGraph = {
     nodes: RawNode[];
     edges: [];
 };
-export declare type RawNode = {
+export type RawNode = {
     id: string;
     component: {
         id: {
@@ -25,7 +25,7 @@ export declare type RawNode = {
         };
     };
 };
-export declare type RawEdge = {
+export type RawEdge = {
     sourceId: string;
     targetId: string;
     dependencyLifecycleType: EdgeType;

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

@@ -2,7 +2,7 @@ import { GraphQlError } from '@teambit/graphql';
 import { GraphModel } from './graph-model';
 /** provides dependencies graph data from graphQL */
 export declare function useGraphQuery(componentId?: string[], filter?: string): {
-    graph: GraphModel<import("./node-model").NodeModel, import("./edge-model").EdgeModel> | undefined;
-    error: GraphQlError | undefined;
+    graph: GraphModel<import("./node-model").NodeModel, import("./edge-model").EdgeModel>;
+    error: GraphQlError;
     loading: boolean;
 };

package/dist/ui/query/use-graph-query.js

@@ -52,7 +52,7 @@ function useGraphQuery(componentId, filter) {
     },
     skip: !componentId
   });
-  const rawGraph = data === null || data === void 0 ? void 0 : data.graph;
+  const rawGraph = data?.graph;
   const clientError = !rawGraph && !loading ? new (_graphql().GraphQlError)(404) : undefined;
   const serverError = error ? new (_graphql().GraphQlError)(500, error.message) : undefined;
   return (0, _react().useMemo)(() => {

package/dist/ui/query/use-graph-query.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","require","_uiFoundationUiHooks","_graphql","_getGraph","_graphModel","useGraphQuery","componentId","filter","error","loading","useDataQuery","GET_GRAPH","variables","ids","skip","rawGraph","graph","clientError","GraphQlError","undefined","serverError","message","useMemo","GraphModel","from"],"sources":["use-graph-query.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { GraphQlError } from '@teambit/graphql';\nimport { GET_GRAPH, RawGraphQuery } from './get-graph.query';\nimport { GraphModel } from './graph-model';\n\ntype QueryVariables = {\n  ids?: string[];\n  filter?: string;\n};\n\n/** provides dependencies graph data from graphQL */\nexport function useGraphQuery(componentId?: string[], filter?: string) {\n  const { data, error, loading } = useDataQuery<RawGraphQuery, QueryVariables>(GET_GRAPH, {\n    variables: { ids: componentId, filter },\n    skip: !componentId,\n  });\n\n  const rawGraph = data?.graph;\n  const clientError = !rawGraph && !loading ? new GraphQlError(404) : undefined;\n  const serverError = error ? new GraphQlError(500, error.message) : undefined;\n\n  return useMemo(() => {\n    return {\n      graph: rawGraph ? GraphModel.from(rawGraph) : undefined,\n      error: serverError || clientError,\n      loading,\n    };\n  }, [rawGraph, error]);\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,qBAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,oBAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,SAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,QAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,UAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,SAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,YAAA;EAAA,MAAAL,IAAA,GAAAC,OAAA;EAAAI,WAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAOA;AACO,SAASM,aAAaA,CAACC,WAAsB,EAAEC,MAAe,EAAE;EACrE,MAAM;IAAER,IAAI;IAAES,KAAK;IAAEC;EAAQ,CAAC,GAAG,IAAAC,mCAAY,EAAgCC,qBAAS,EAAE;IACtFC,SAAS,EAAE;MAAEC,GAAG,EAAEP,WAAW;MAAEC;IAAO,CAAC;IACvCO,IAAI,EAAE,CAACR;EACT,CAAC,CAAC;EAEF,MAAMS,QAAQ,GAAGhB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEiB,KAAK;EAC5B,MAAMC,WAAW,GAAG,CAACF,QAAQ,IAAI,CAACN,OAAO,GAAG,KAAIS,uBAAY,EAAC,GAAG,CAAC,GAAGC,SAAS;EAC7E,MAAMC,WAAW,GAAGZ,KAAK,GAAG,KAAIU,uBAAY,EAAC,GAAG,EAAEV,KAAK,CAACa,OAAO,CAAC,GAAGF,SAAS;EAE5E,OAAO,IAAAG,gBAAO,EAAC,MAAM;IACnB,OAAO;MACLN,KAAK,EAAED,QAAQ,GAAGQ,wBAAU,CAACC,IAAI,CAACT,QAAQ,CAAC,GAAGI,SAAS;MACvDX,KAAK,EAAEY,WAAW,IAAIH,WAAW;MACjCR;IACF,CAAC;EACH,CAAC,EAAE,CAACM,QAAQ,EAAEP,KAAK,CAAC,CAAC;AACvB"}
+{"version":3,"names":["_react","data","require","_uiFoundationUiHooks","_graphql","_getGraph","_graphModel","useGraphQuery","componentId","filter","error","loading","useDataQuery","GET_GRAPH","variables","ids","skip","rawGraph","graph","clientError","GraphQlError","undefined","serverError","message","useMemo","GraphModel","from"],"sources":["use-graph-query.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { GraphQlError } from '@teambit/graphql';\nimport { GET_GRAPH, RawGraphQuery } from './get-graph.query';\nimport { GraphModel } from './graph-model';\n\ntype QueryVariables = {\n  ids?: string[];\n  filter?: string;\n};\n\n/** provides dependencies graph data from graphQL */\nexport function useGraphQuery(componentId?: string[], filter?: string) {\n  const { data, error, loading } = useDataQuery<RawGraphQuery, QueryVariables>(GET_GRAPH, {\n    variables: { ids: componentId, filter },\n    skip: !componentId,\n  });\n\n  const rawGraph = data?.graph;\n  const clientError = !rawGraph && !loading ? new GraphQlError(404) : undefined;\n  const serverError = error ? new GraphQlError(500, error.message) : undefined;\n\n  return useMemo(() => {\n    return {\n      graph: rawGraph ? GraphModel.from(rawGraph) : undefined,\n      error: serverError || clientError,\n      loading,\n    };\n  }, [rawGraph, error]);\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,qBAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,oBAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,SAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,QAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,UAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,SAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,YAAA;EAAA,MAAAL,IAAA,GAAAC,OAAA;EAAAI,WAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAOA;AACO,SAASM,aAAaA,CAACC,WAAsB,EAAEC,MAAe,EAAE;EACrE,MAAM;IAAER,IAAI;IAAES,KAAK;IAAEC;EAAQ,CAAC,GAAG,IAAAC,mCAAY,EAAgCC,qBAAS,EAAE;IACtFC,SAAS,EAAE;MAAEC,GAAG,EAAEP,WAAW;MAAEC;IAAO,CAAC;IACvCO,IAAI,EAAE,CAACR;EACT,CAAC,CAAC;EAEF,MAAMS,QAAQ,GAAGhB,IAAI,EAAEiB,KAAK;EAC5B,MAAMC,WAAW,GAAG,CAACF,QAAQ,IAAI,CAACN,OAAO,GAAG,KAAIS,uBAAY,EAAC,GAAG,CAAC,GAAGC,SAAS;EAC7E,MAAMC,WAAW,GAAGZ,KAAK,GAAG,KAAIU,uBAAY,EAAC,GAAG,EAAEV,KAAK,CAACa,OAAO,CAAC,GAAGF,SAAS;EAE5E,OAAO,IAAAG,gBAAO,EAAC,MAAM;IACnB,OAAO;MACLN,KAAK,EAAED,QAAQ,GAAGQ,wBAAU,CAACC,IAAI,CAACT,QAAQ,CAAC,GAAGI,SAAS;MACvDX,KAAK,EAAEY,WAAW,IAAIH,WAAW;MACjCR;IACF,CAAC;EACH,CAAC,EAAE,CAACM,QAAQ,EAAEP,KAAK,CAAC,CAAC;AACvB"}

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

@@ -1,5 +1,5 @@
 export declare function useGraph(): {
-    graph: import("./graph-model").GraphModel<import("./node-model").NodeModel, import("./edge-model").EdgeModel> | undefined;
-    error: import("@teambit/graphql").GraphQlError | undefined;
+    graph: import("./graph-model").GraphModel<import("./node-model").NodeModel, import("./edge-model").EdgeModel>;
+    error: import("@teambit/graphql").GraphQlError;
     loading: boolean;
 };

package/duplicate-dependency.ts

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

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

package/graph-builder.ts

@@ -0,0 +1,47 @@
+import { Component, ComponentFactory, ComponentID, ComponentMain } from '@teambit/component';
+import { Edge, Graph } from '@teambit/graph.cleargraph';
+import { ComponentGraph } from './component-graph';
+import { ComponentIdGraph } from './component-id-graph';
+import { Dependency } from './model/dependency';
+
+export type GetGraphOpts = {
+  host?: ComponentFactory;
+};
+
+export class GraphBuilder {
+  constructor(private componentAspect: ComponentMain) {}
+
+  /**
+   * important - prefer using `getGraphIds()` it's way better in terms of performance.
+   */
+  async getGraph(ids?: ComponentID[], opts: GetGraphOpts = {}): Promise<ComponentGraph> {
+    const componentHost = opts.host || this.componentAspect.getHost();
+
+    const graph = await componentHost.getGraph(ids, false);
+    const componentGraph = await this.toComponentGraph(graph);
+    componentGraph.seederIds = ids || (await componentHost.listIds());
+    return componentGraph;
+  }
+
+  async getGraphIds(ids?: ComponentID[], opts: GetGraphOpts = {}): Promise<ComponentIdGraph> {
+    const componentHost = opts.host || this.componentAspect.getHost();
+
+    const graph = await componentHost.getGraphIds(ids, false);
+    const componentIdGraph = new ComponentIdGraph(graph.nodes, graph.edges);
+    componentIdGraph.seederIds = ids || (await componentHost.listIds());
+    return componentIdGraph;
+  }
+
+  private async toComponentGraph(graph: Graph<Component, string>): Promise<ComponentGraph> {
+    const newGraph = new ComponentGraph();
+    graph.nodes.forEach((node) => {
+      newGraph.setNode(node);
+    });
+    graph.edges.forEach((edge) => {
+      const edgeObj =
+        edge.attr === 'dependencies' || edge.attr === 'runtime' ? new Dependency('runtime') : new Dependency('dev');
+      newGraph.setEdge(new Edge(edge.sourceId, edge.targetId, edgeObj));
+    });
+    return newGraph;
+  }
+}

package/graph-cmd.ts

@@ -0,0 +1,111 @@
+import chalk from 'chalk';
+import os from 'os';
+import * as path from 'path';
+import GraphLib from 'graphlib';
+import { Command, CommandOptions } from '@teambit/cli';
+import { ComponentID } from '@teambit/component-id';
+import { generateRandomStr } from '@teambit/legacy/dist/utils';
+import VisualDependencyGraph from '@teambit/legacy/dist/scope/graph/vizgraph';
+import { Consumer, loadConsumerIfExist } from '@teambit/legacy/dist/consumer';
+import DependencyGraph from '@teambit/legacy/dist/scope/graph/scope-graph';
+import { ConsumerNotFound } from '@teambit/legacy/dist/consumer/exceptions';
+import getRemoteByName from '@teambit/legacy/dist/remotes/get-remote-by-name';
+import { ComponentMain } from '@teambit/component';
+
+type GraphOpt = {
+  image?: string;
+  remote?: string;
+  allVersions?: boolean;
+  layout?: string;
+  json?: boolean;
+};
+
+export class GraphCmd implements Command {
+  name = 'graph [id]';
+  description = "generate an image file with the workspace components' dependencies graph";
+  extendedDescription: 'black arrow is a runtime dependency. red arrow is either dev or peer';
+  group = 'discover';
+  alias = '';
+  options = [
+    ['i', 'image <image>', 'image path and format. use one of the following extensions: [gif, png, svg, pdf]'],
+    ['r', 'remote [remoteName]', 'remote name (name is optional, leave empty when id is specified)'],
+    ['', 'all-versions', 'enter all components versions into the graph, not only latest'],
+    [
+      '',
+      'layout <name>',
+      'GraphVis layout. default to "dot". options are [circo, dot, fdp, neato, osage, patchwork, sfdp, twopi]',
+    ],
+    ['j', 'json', 'json format'],
+  ] as CommandOptions;
+  remoteOp = true;
+
+  constructor(private componentAspect: ComponentMain) {}
+
+  async report([id]: [string], { remote, allVersions, layout, image }: GraphOpt): Promise<string> {
+    const consumer = await loadConsumerIfExist();
+    if (!consumer && !remote) throw new ConsumerNotFound();
+
+    const graph = await this.generateGraph(consumer, id, remote, allVersions);
+
+    const config = {};
+    // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
+    if (layout) config.layout = layout;
+    const visualDependencyGraph = await VisualDependencyGraph.loadFromGraphlib(graph, config);
+
+    image = image || path.join(os.tmpdir(), `${generateRandomStr()}.png`);
+    const result = await visualDependencyGraph.image(image);
+
+    return chalk.green(`image created at ${result}`);
+  }
+
+  private async generateGraph(
+    consumer?: Consumer,
+    id?: string,
+    remote?: string,
+    allVersions?: boolean
+  ): Promise<GraphLib.Graph> {
+    if (!consumer && !remote) throw new ConsumerNotFound();
+    const getBitId = (): ComponentID | undefined => {
+      if (!id) return undefined;
+      if (remote) return ComponentID.fromString(id); // user used --remote so we know it has a scope
+      // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
+      return consumer.getParsedId(id);
+    };
+    const bitId = getBitId();
+    if (remote) {
+      if (id) {
+        // @ts-ignore scope must be set as it came from a remote
+        const scopeName: string = typeof remote === 'string' ? remote : bitId.scope;
+        const remoteScope = await getRemoteByName(scopeName, consumer);
+        const componentDepGraph = await remoteScope.graph(bitId);
+        return componentDepGraph.graph;
+      }
+      if (typeof remote !== 'string') {
+        throw new Error('please specify remote scope name or enter an id');
+      }
+      const remoteScope = await getRemoteByName(remote, consumer);
+      const componentDepGraph = await remoteScope.graph();
+      return componentDepGraph.graph;
+    }
+
+    const onlyLatest = !allVersions;
+    // @ts-ignore consumer must be set here
+    const workspaceGraph = await DependencyGraph.buildGraphFromWorkspace(consumer, onlyLatest);
+    const dependencyGraph = new DependencyGraph(workspaceGraph);
+    if (id) {
+      // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
+      const componentGraph = dependencyGraph.getSubGraphOfConnectedComponents(bitId);
+      const componentDepGraph = new DependencyGraph(componentGraph);
+      return componentDepGraph.graph;
+    }
+    return dependencyGraph.graph;
+  }
+
+  async json([id]: [string], { remote, allVersions }: GraphOpt) {
+    const consumer = await loadConsumerIfExist();
+    if (!consumer && !remote) throw new ConsumerNotFound();
+
+    const graph = await this.generateGraph(consumer, id, remote, allVersions);
+    return GraphLib.json.write(graph);
+  }
+}

package/graph.aspect.ts

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

package/graph.graphql.ts

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

@@ -0,0 +1,49 @@
+import { CLIAspect, CLIMain, MainRuntime } from '@teambit/cli';
+import { ComponentMain, ComponentAspect, ComponentID } from '@teambit/component';
+import { GraphqlAspect, GraphqlMain } from '@teambit/graphql';
+import { Logger, LoggerAspect, LoggerMain } from '@teambit/logger';
+import { GetGraphOpts, GraphBuilder } from './graph-builder';
+import { graphSchema } from './graph.graphql';
+import { GraphAspect } from './graph.aspect';
+import { GraphCmd } from './graph-cmd';
+import { ComponentGraph } from './component-graph';
+import { ComponentIdGraph } from './component-id-graph';
+
+export class GraphMain {
+  constructor(private componentAspect: ComponentMain, private logger: Logger) {}
+
+  /**
+   * important - prefer using `getGraphIds()` it's way better in terms of performance.
+   */
+  async getGraph(ids?: ComponentID[], opts: GetGraphOpts = {}): Promise<ComponentGraph> {
+    const graphBuilder = new GraphBuilder(this.componentAspect);
+    return graphBuilder.getGraph(ids, opts);
+  }
+
+  async getGraphIds(ids?: ComponentID[], opts: GetGraphOpts = {}): Promise<ComponentIdGraph> {
+    const graphBuilder = new GraphBuilder(this.componentAspect);
+    return graphBuilder.getGraphIds(ids, opts);
+  }
+
+  static slots = [];
+  static dependencies = [GraphqlAspect, ComponentAspect, CLIAspect, LoggerAspect];
+  static runtime = MainRuntime;
+  static async provider([graphql, componentAspect, cli, loggerMain]: [
+    GraphqlMain,
+    ComponentMain,
+    CLIMain,
+    LoggerMain
+  ]) {
+    const logger = loggerMain.createLogger(GraphAspect.id);
+
+    const graphBuilder = new GraphBuilder(componentAspect);
+    graphql.register(graphSchema(graphBuilder, componentAspect));
+
+    const graphMain = new GraphMain(componentAspect, logger);
+    cli.register(new GraphCmd(componentAspect));
+
+    return graphMain;
+  }
+}
+
+GraphAspect.addRuntime(GraphMain);

package/index.ts

@@ -0,0 +1,25 @@
+export { DependenciesCompare } from './ui/dependencies-compare';
+export { Dependency } from './model/dependency';
+export { DuplicateDependency } from './duplicate-dependency';
+export { GraphAspect as default, GraphAspect } from './graph.aspect';
+export { IdGraph, objectListToGraph, bitObjectListToGraph } from './object-list-to-graph';
+export {
+  calcElements,
+  calcLayout,
+  calcMinimapColors,
+  depTypeToClass,
+  depTypeToLabel,
+  styles as dependenciesGraphStyles,
+} from './ui/dependencies-graph';
+export { GraphFilters, styles as graphPageStyles } from './ui/graph-page';
+export { EdgeModel, GraphModel, NodeModel, useGraph, useGraphQuery } from './ui/query';
+export { styles as componentNodeStyles, root, defaultNode, external } from './ui/component-node';
+export type { RawGraph } from './ui/query';
+export type { CompIdGraph, DepEdgeType } from './component-id-graph';
+export type { ComponentGraph } from './component-graph';
+export type { ComponentWidget, ComponentWidgetProps, ComponentWidgetSlot, GraphUI } from './graph.ui.runtime';
+export { EdgeType } from './edge-type';
+export type { GraphBuilder } from './graph-builder';
+export type { GraphFilter } from './model/graph-filters';
+export type { GraphMain } from './graph.main.runtime';
+export type { VersionSubgraph } from './duplicate-dependency';