@teambit/graph 1.0.667 → 1.0.668

package/dist/ui/query/node-model.d.ts

@@ -1,5 +1,5 @@
 import { ComponentID, ComponentModel } from '@teambit/component';
-import { RawNode } from './get-graph.query';
+import type { RawNode } from './get-graph.query';
 export declare class NodeModel {
     id: string;
     component?: ComponentModel;

package/dist/ui/query/node-model.js.map

@@ -1 +1 @@
-{"version":3,"names":["_component","data","require","_defineProperty","e","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","NodeModel","constructor","from","rawNode","node","id","component","ComponentModel","undefined","componentId","ComponentID","fromString","exports"],"sources":["node-model.ts"],"sourcesContent":["import { ComponentID, ComponentModel } from '@teambit/component';\nimport { RawNode } from './get-graph.query';\n\nexport class NodeModel {\n  id: string;\n  component?: ComponentModel;\n  componentId: ComponentID;\n\n  static from(rawNode: RawNode) {\n    const node = new NodeModel();\n    node.id = rawNode.id;\n    // @TODO - component model should not expect all fields to have values\n    // @ts-ignore\n    node.component = rawNode.component ? ComponentModel.from(rawNode.component) : undefined;\n    node.componentId = node.component ? node.component.id : ComponentID.fromString(rawNode.id);\n    return node;\n  }\n}\n"],"mappings":";;;;;;AAAA,SAAAA,WAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,UAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAiE,SAAAE,gBAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAD,CAAA,GAAAI,MAAA,CAAAC,cAAA,CAAAL,CAAA,EAAAC,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAT,CAAA,CAAAC,CAAA,IAAAC,CAAA,EAAAF,CAAA;AAAA,SAAAG,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAF,CAAA,GAAAE,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAb,CAAA,QAAAU,CAAA,GAAAV,CAAA,CAAAc,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAG1D,MAAMgB,SAAS,CAAC;EAAAC,YAAA;IAAApB,eAAA;IAAAA,eAAA;IAAAA,eAAA;EAAA;EAKrB,OAAOqB,IAAIA,CAACC,OAAgB,EAAE;IAC5B,MAAMC,IAAI,GAAG,IAAIJ,SAAS,CAAC,CAAC;IAC5BI,IAAI,CAACC,EAAE,GAAGF,OAAO,CAACE,EAAE;IACpB;IACA;IACAD,IAAI,CAACE,SAAS,GAAGH,OAAO,CAACG,SAAS,GAAGC,2BAAc,CAACL,IAAI,CAACC,OAAO,CAACG,SAAS,CAAC,GAAGE,SAAS;IACvFJ,IAAI,CAACK,WAAW,GAAGL,IAAI,CAACE,SAAS,GAAGF,IAAI,CAACE,SAAS,CAACD,EAAE,GAAGK,wBAAW,CAACC,UAAU,CAACR,OAAO,CAACE,EAAE,CAAC;IAC1F,OAAOD,IAAI;EACb;AACF;AAACQ,OAAA,CAAAZ,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"names":["_component","data","require","_defineProperty","e","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","NodeModel","constructor","from","rawNode","node","id","component","ComponentModel","undefined","componentId","ComponentID","fromString","exports"],"sources":["node-model.ts"],"sourcesContent":["import { ComponentID, ComponentModel } from '@teambit/component';\nimport type { RawNode } from './get-graph.query';\n\nexport class NodeModel {\n  id: string;\n  component?: ComponentModel;\n  componentId: ComponentID;\n\n  static from(rawNode: RawNode) {\n    const node = new NodeModel();\n    node.id = rawNode.id;\n    // @TODO - component model should not expect all fields to have values\n    // @ts-ignore\n    node.component = rawNode.component ? ComponentModel.from(rawNode.component) : undefined;\n    node.componentId = node.component ? node.component.id : ComponentID.fromString(rawNode.id);\n    return node;\n  }\n}\n"],"mappings":";;;;;;AAAA,SAAAA,WAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,UAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAiE,SAAAE,gBAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAD,CAAA,GAAAI,MAAA,CAAAC,cAAA,CAAAL,CAAA,EAAAC,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAT,CAAA,CAAAC,CAAA,IAAAC,CAAA,EAAAF,CAAA;AAAA,SAAAG,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAF,CAAA,GAAAE,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAb,CAAA,QAAAU,CAAA,GAAAV,CAAA,CAAAc,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAG1D,MAAMgB,SAAS,CAAC;EAAAC,YAAA;IAAApB,eAAA;IAAAA,eAAA;IAAAA,eAAA;EAAA;EAKrB,OAAOqB,IAAIA,CAACC,OAAgB,EAAE;IAC5B,MAAMC,IAAI,GAAG,IAAIJ,SAAS,CAAC,CAAC;IAC5BI,IAAI,CAACC,EAAE,GAAGF,OAAO,CAACE,EAAE;IACpB;IACA;IACAD,IAAI,CAACE,SAAS,GAAGH,OAAO,CAACG,SAAS,GAAGC,2BAAc,CAACL,IAAI,CAACC,OAAO,CAACG,SAAS,CAAC,GAAGE,SAAS;IACvFJ,IAAI,CAACK,WAAW,GAAGL,IAAI,CAACE,SAAS,GAAGF,IAAI,CAACE,SAAS,CAACD,EAAE,GAAGK,wBAAW,CAACC,UAAU,CAACR,OAAO,CAACE,EAAE,CAAC;IAC1F,OAAOD,IAAI;EACb;AACF;AAACQ,OAAA,CAAAZ,SAAA,GAAAA,SAAA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","require","_client","_graphql","_getGraph","_graphModel","useGraphQuery","componentId","filter","idsData","error","idsError","loading","idsLoading","useQuery","GET_GRAPH_IDS","variables","ids","skip","getGraph","graphData","graphError","graphLoading","useLazyQuery","GET_GRAPH","fetchError","setFetchError","useState","undefined","shouldRefetchGraph","setShouldRefetchGraph","useEffect","graph","nodes","length","catch","GraphQlError","message","rawGraph","clientError","serverError","useMemo","GraphModel","from"],"sources":["use-graph-query.ts"],"sourcesContent":["import { useMemo, useEffect, useState } from 'react';\nimport { useQuery, useLazyQuery } from '@apollo/client';\nimport { GraphQlError } from '@teambit/graphql';\nimport { GET_GRAPH, RawGraphQuery, GET_GRAPH_IDS } from './get-graph.query';\nimport { GraphModel } from './graph-model';\n\ntype QueryVariables = {\n  ids?: string[];\n  filter?: string;\n};\n\nexport function useGraphQuery(componentId?: string[], filter?: string) {\n  // Eagerly fetch GET_GRAPH_IDS\n  const {\n    data: idsData,\n    error: idsError,\n    loading: idsLoading,\n  } = useQuery<RawGraphQuery, QueryVariables>(GET_GRAPH_IDS, {\n    variables: { ids: componentId, filter },\n    skip: !componentId || !filter,\n  });\n\n  // Lazily fetch GET_GRAPH\n  const [getGraph, { data: graphData, error: graphError, loading: graphLoading }] = useLazyQuery<\n    RawGraphQuery,\n    QueryVariables\n  >(GET_GRAPH);\n\n  const [fetchError, setFetchError] = useState<GraphQlError | undefined>(undefined);\n\n  const [shouldRefetchGraph, setShouldRefetchGraph] = useState(false);\n\n  useEffect(() => {\n    if (idsData?.graph.nodes.length || !filter) {\n      setShouldRefetchGraph(true);\n    }\n  }, [idsData?.graph.nodes.length, filter]);\n\n  useEffect(() => {\n    if (shouldRefetchGraph) {\n      setShouldRefetchGraph(false);\n      void getGraph({ variables: { ids: componentId, filter } }).catch((error) => {\n        setFetchError(new GraphQlError(500, error.message));\n      });\n    }\n  }, [componentId, filter, getGraph, shouldRefetchGraph]);\n\n  const rawGraph = idsLoading\n    ? undefined\n    : (idsData?.graph &&\n        graphData?.graph &&\n        idsData?.graph.nodes.length === graphData?.graph.nodes.length &&\n        graphData?.graph) ||\n      idsData?.graph ||\n      graphData?.graph;\n\n  const clientError = !rawGraph && !idsLoading && !graphLoading ? new GraphQlError(404) : undefined;\n  const serverError =\n    graphError?.message || idsError?.message\n      ? new GraphQlError(500, graphError?.message || idsError?.message)\n      : fetchError;\n\n  return useMemo(() => {\n    return {\n      graph: rawGraph ? GraphModel.from(rawGraph) : undefined,\n      error: serverError || clientError,\n      loading: idsLoading || graphLoading,\n      idsLoading,\n      graphLoading,\n    };\n  }, [rawGraph, serverError, clientError, idsLoading, graphLoading]);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","require","_client","_graphql","_getGraph","_graphModel","useGraphQuery","componentId","filter","idsData","error","idsError","loading","idsLoading","useQuery","GET_GRAPH_IDS","variables","ids","skip","getGraph","graphData","graphError","graphLoading","useLazyQuery","GET_GRAPH","fetchError","setFetchError","useState","undefined","shouldRefetchGraph","setShouldRefetchGraph","useEffect","graph","nodes","length","catch","GraphQlError","message","rawGraph","clientError","serverError","useMemo","GraphModel","from"],"sources":["use-graph-query.ts"],"sourcesContent":["import { useMemo, useEffect, useState } from 'react';\nimport { useQuery, useLazyQuery } from '@apollo/client';\nimport { GraphQlError } from '@teambit/graphql';\nimport type { RawGraphQuery } from './get-graph.query';\nimport { GET_GRAPH, GET_GRAPH_IDS } from './get-graph.query';\nimport { GraphModel } from './graph-model';\n\ntype QueryVariables = {\n  ids?: string[];\n  filter?: string;\n};\n\nexport function useGraphQuery(componentId?: string[], filter?: string) {\n  // Eagerly fetch GET_GRAPH_IDS\n  const {\n    data: idsData,\n    error: idsError,\n    loading: idsLoading,\n  } = useQuery<RawGraphQuery, QueryVariables>(GET_GRAPH_IDS, {\n    variables: { ids: componentId, filter },\n    skip: !componentId || !filter,\n  });\n\n  // Lazily fetch GET_GRAPH\n  const [getGraph, { data: graphData, error: graphError, loading: graphLoading }] = useLazyQuery<\n    RawGraphQuery,\n    QueryVariables\n  >(GET_GRAPH);\n\n  const [fetchError, setFetchError] = useState<GraphQlError | undefined>(undefined);\n\n  const [shouldRefetchGraph, setShouldRefetchGraph] = useState(false);\n\n  useEffect(() => {\n    if (idsData?.graph.nodes.length || !filter) {\n      setShouldRefetchGraph(true);\n    }\n  }, [idsData?.graph.nodes.length, filter]);\n\n  useEffect(() => {\n    if (shouldRefetchGraph) {\n      setShouldRefetchGraph(false);\n      void getGraph({ variables: { ids: componentId, filter } }).catch((error) => {\n        setFetchError(new GraphQlError(500, error.message));\n      });\n    }\n  }, [componentId, filter, getGraph, shouldRefetchGraph]);\n\n  const rawGraph = idsLoading\n    ? undefined\n    : (idsData?.graph &&\n        graphData?.graph &&\n        idsData?.graph.nodes.length === graphData?.graph.nodes.length &&\n        graphData?.graph) ||\n      idsData?.graph ||\n      graphData?.graph;\n\n  const clientError = !rawGraph && !idsLoading && !graphLoading ? new GraphQlError(404) : undefined;\n  const serverError =\n    graphError?.message || idsError?.message\n      ? new GraphQlError(500, graphError?.message || idsError?.message)\n      : fetchError;\n\n  return useMemo(() => {\n    return {\n      graph: rawGraph ? GraphModel.from(rawGraph) : undefined,\n      error: serverError || clientError,\n      loading: idsLoading || graphLoading,\n      idsLoading,\n      graphLoading,\n    };\n  }, [rawGraph, serverError, clientError, idsLoading, graphLoading]);\n}\n"],"mappings":"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","ignoreList":[]}

package/graph.compare.section.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Section } from '@teambit/component';
+import type { Section } from '@teambit/component';
 import { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
 import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
 import { DependenciesCompare } from './ui/dependencies-compare';

package/graph.ui.runtime.tsx

@@ -1,8 +1,11 @@
-import { ComponentType } from 'react';
+import type { 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 type { SlotRegistry } from '@teambit/harmony';
+import { Slot } from '@teambit/harmony';
+import type { ComponentCompareUI } from '@teambit/component-compare';
+import { ComponentCompareAspect } from '@teambit/component-compare';
+import type { ComponentUI, ComponentModel } from '@teambit/component';
+import { ComponentAspect } from '@teambit/component';
 import { GraphAspect } from './graph.aspect';
 import { GraphSection } from './ui/graph.section';
 import { GraphCompareSection } from './graph.compare.section';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "1.0.667",
+  "version": "1.0.668",
   "homepage": "https://bit.cloud/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "1.0.667"
+    "version": "1.0.668"
   },
   "dependencies": {
     "graphlib": "2.1.8",
@@ -15,37 +15,37 @@
     "graphql-tag": "2.12.1",
     "classnames": "2.2.6",
     "reactflow": "^11.11.3",
-    "@dagrejs/dagre": "^1.1.2",
     "semver": "7.7.1",
+    "@dagrejs/dagre": "^1.1.2",
     "@teambit/component-id": "1.2.4",
     "@teambit/graph.cleargraph": "0.0.11",
-    "@teambit/legacy.dependency-graph": "0.0.60",
-    "@teambit/scope.remotes": "0.0.57",
     "@teambit/harmony": "0.4.7",
     "@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.7",
     "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.121",
     "@teambit/base-ui.routing.nav-link": "1.0.4",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.text.muted-text": "1.0.1",
-    "@teambit/component.modules.component-url": "0.0.177",
     "@teambit/component.ui.deprecation-icon": "0.0.509",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
-    "@teambit/envs.ui.env-icon": "0.0.506",
     "@teambit/component.ui.component-compare.context": "0.0.123",
     "@teambit/design.ui.round-loader": "0.0.355",
     "@teambit/component.ui.component-compare.status-resolver": "0.0.9",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.505",
     "@teambit/evangelist.input.checkbox.label": "1.1.0",
     "@teambit/design.skeletons.base-skeleton": "0.0.2",
     "@teambit/design.ui.pages.not-found": "0.0.371",
     "@teambit/design.ui.pages.server-error": "0.0.368",
-    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.505",
-    "@teambit/component": "1.0.667",
-    "@teambit/cli": "0.0.1244",
-    "@teambit/workspace": "1.0.667",
-    "@teambit/graphql": "1.0.667",
-    "@teambit/logger": "0.0.1337",
-    "@teambit/component-compare": "1.0.667",
-    "@teambit/ui": "1.0.667"
+    "@teambit/legacy.dependency-graph": "0.0.61",
+    "@teambit/component": "1.0.668",
+    "@teambit/cli": "0.0.1245",
+    "@teambit/scope.remotes": "0.0.58",
+    "@teambit/workspace": "1.0.668",
+    "@teambit/graphql": "1.0.668",
+    "@teambit/logger": "0.0.1338",
+    "@teambit/component-compare": "1.0.668",
+    "@teambit/ui": "1.0.668",
+    "@teambit/component.modules.component-url": "0.0.178",
+    "@teambit/envs.ui.env-icon": "0.0.507"
   },
   "devDependencies": {
     "@types/graphlib": "2.1.7",

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

@@ -1,14 +1,15 @@
 import React, { useContext } from 'react';
 import classnames from 'classnames';
 import { mutedText } from '@teambit/base-ui.text.muted-text';
-import { ComponentID } from '@teambit/component';
+import type { 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 type { CardProps } from '@teambit/base-ui.surfaces.card';
+import { Card } 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 type { NodeModel } from '../query/node-model';
 import { ComponentGraphContext } from '../dependencies-graph/';
 
 // keep order: styles, then variants

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

@@ -1,5 +1,6 @@
-import { EdgeModel, GraphModel } from '../query';
-import { CompareNodeModel } from './compare-node-model';
+import type { EdgeModel } from '../query';
+import { GraphModel } from '../query';
+import type { CompareNodeModel } from './compare-node-model';
 
 export class CompareGraphModel extends GraphModel<CompareNodeModel, EdgeModel> {
   constructor(

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

@@ -1,4 +1,4 @@
-import { ComponentModel } from '@teambit/component';
+import type { ComponentModel } from '@teambit/component';
 import { NodeModel } from '../query';
 
 export type CompareStatus = 'modified' | 'new' | 'deleted' | undefined;

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

@@ -2,19 +2,10 @@ import classNames from 'classnames';
 import { RoundLoader } from '@teambit/design.ui.round-loader';
 import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
-import ReactFlow, {
-  Background,
-  Controls,
-  Handle,
-  MiniMap,
-  NodeProps,
-  NodeTypes,
-  Position,
-  ReactFlowProvider,
-  ReactFlowInstance,
-} from 'reactflow';
+import type { NodeProps, NodeTypes, ReactFlowInstance } from 'reactflow';
+import ReactFlow, { Background, Controls, Handle, MiniMap, Position, ReactFlowProvider } from 'reactflow';
 import { useGraphQuery } from '../query';
-import { GraphFilter } from '../../model/graph-filters';
+import type { GraphFilter } from '../../model/graph-filters';
 import { GraphFilters, styles as graphPageStyles } from '../graph-page';
 import { calcMinimapColors, calcElements, styles as dependenciesGraphStyles } from '../dependencies-graph';
 import styles from './dependencies-compare.module.scss';

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

@@ -12,7 +12,7 @@ import React, { useMemo } from 'react';
 import { compare, valid } from 'semver';
 import { defaultNode, external } from '../../ui/component-node/variants';
 import { styles as componentNodeStyles } from '../../ui/component-node';
-import { CompareNodeModel } from './compare-node-model';
+import type { CompareNodeModel } from './compare-node-model';
 import styles from './dependency-compare-node.module.scss';
 import variants from './dependency-compare-variants.module.scss';
 

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

@@ -1,7 +1,7 @@
-import { ComponentID } from '@teambit/component';
-import { EdgeModel, GraphModel, NodeModel } from '../query';
+import type { ComponentID } from '@teambit/component';
+import type { EdgeModel, GraphModel, NodeModel } from '../query';
 import { CompareGraphModel } from './compare-graph-model';
-import { CompareNodeModel } from './compare-node-model';
+import type { CompareNodeModel } from './compare-node-model';
 
 const toShortId = (node: NodeModel) => node.componentId.toStringWithoutVersion();
 

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

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
-import { MarkerType, Edge, Node } from 'reactflow';
-import { ComponentID } from '@teambit/component';
+import type { Edge, Node } from 'reactflow';
+import { MarkerType } from 'reactflow';
+import type { ComponentID } from '@teambit/component';
 import { calcLayout } from './calc-layout';
-import { EdgeModel, GraphModel, NodeModel } from '../query';
+import type { EdgeModel, GraphModel, NodeModel } from '../query';
 
 import { depTypeToClass, depTypeToLabel } from './dep-edge';
 

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

@@ -1,5 +1,5 @@
 import dagre, { graphlib } from '@dagrejs/dagre';
-import { EdgeModel, GraphModel, NodeModel } from '../query';
+import type { EdgeModel, GraphModel, NodeModel } from '../query';
 
 const NODE_WIDTH = 260;
 const NODE_HEIGHT = 90;

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

@@ -1,22 +1,19 @@
 import React, { useCallback, useMemo, useRef, useEffect } from 'react';
 import classnames from 'classnames';
+import type { NodeProps, NodeTypes, ReactFlowInstance, ReactFlowProps } from 'reactflow';
 import ReactFlow, {
   Background,
   Controls,
   Handle,
   MiniMap,
-  NodeProps,
-  NodeTypes,
-  ReactFlowInstance,
   Position,
-  ReactFlowProps,
   ReactFlowProvider,
   useNodesState,
 } from 'reactflow';
-import { ComponentID } from '@teambit/component';
-import { ComponentWidgetSlot } from '../../graph.ui.runtime';
+import type { ComponentID } from '@teambit/component';
+import type { ComponentWidgetSlot } from '../../graph.ui.runtime';
 import { ComponentNode } from '../component-node';
-import { EdgeModel, GraphModel, NodeModel } from '../query';
+import type { EdgeModel, GraphModel, NodeModel } from '../query';
 import { calcElements } from './calc-elements';
 import { calcMinimapColors } from './minimap';
 import { ComponentGraphContext } from './graph-context';

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

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { ComponentWidgetSlot } from '../../graph.ui.runtime';
+import type { ComponentWidgetSlot } from '../../graph.ui.runtime';
 
 /** internal context, to pass shared information to all nodes */
 export type ComponentGraph = {

package/ui/dependencies-graph/minimap.ts

@@ -1,4 +1,4 @@
-import { Node } from 'reactflow';
+import type { Node } from 'reactflow';
 import { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';
 
 export function calcMinimapColors(node: Node) {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
+import type { CardProps } from '@teambit/base-ui.surfaces.card';
+import { Card } from '@teambit/base-ui.surfaces.card';
 import { CheckboxLabel } from '@teambit/evangelist.input.checkbox.label';
 
 type GraphFiltersType = {

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

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 
 import { useGraphQuery } from '../query';
 import { DependenciesGraph } from '../dependencies-graph';
-import { ComponentWidgetSlot } from '../../graph.ui.runtime';
+import type { ComponentWidgetSlot } from '../../graph.ui.runtime';
 import type { GraphFilter } from '../../model/graph-filters';
 
 import { GraphFilters } from './graph-filters';

package/ui/graph.section.tsx

@@ -1,8 +1,8 @@
-import { Section } from '@teambit/component';
+import type { Section } from '@teambit/component';
 import React from 'react';
 
 import { GraphPage } from './graph-page';
-import { ComponentWidgetSlot } from '../graph.ui.runtime';
+import type { ComponentWidgetSlot } from '../graph.ui.runtime';
 
 export class GraphSection implements Section {
   constructor(private componentWidgetSlot: ComponentWidgetSlot) {}

package/ui/query/edge-model.ts

@@ -1,5 +1,5 @@
-import { EdgeType } from '../../edge-type';
-import { RawEdge } from './get-graph.query';
+import type { EdgeType } from '../../edge-type';
+import type { RawEdge } from './get-graph.query';
 
 export class EdgeModel {
   sourceId: string;

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

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client';
-import { EdgeType } from '../../edge-type';
+import type { EdgeType } from '../../edge-type';
 
 export const GET_GRAPH_IDS = gql`
   query graph($ids: [String], $filter: String) {

package/ui/query/graph-model.ts

@@ -1,4 +1,4 @@
-import { RawGraph } from './get-graph.query';
+import type { RawGraph } from './get-graph.query';
 import { NodeModel } from './node-model';
 import { EdgeModel } from './edge-model';
 

package/ui/query/node-model.ts

@@ -1,5 +1,5 @@
 import { ComponentID, ComponentModel } from '@teambit/component';
-import { RawNode } from './get-graph.query';
+import type { RawNode } from './get-graph.query';
 
 export class NodeModel {
   id: string;

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

@@ -1,7 +1,8 @@
 import { useMemo, useEffect, useState } from 'react';
 import { useQuery, useLazyQuery } from '@apollo/client';
 import { GraphQlError } from '@teambit/graphql';
-import { GET_GRAPH, RawGraphQuery, GET_GRAPH_IDS } from './get-graph.query';
+import type { RawGraphQuery } from './get-graph.query';
+import { GET_GRAPH, GET_GRAPH_IDS } from './get-graph.query';
 import { GraphModel } from './graph-model';
 
 type QueryVariables = {