@teambit/graph 1.0.316 → 1.0.318

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

@@ -11,13 +11,6 @@ function _react() {
   };
   return data;
 }
-function _documenterUi() {
-  const data = require("@teambit/documenter.ui.heading");
-  _documenterUi = function () {
-    return data;
-  };
-  return data;
-}
 function _designUiPages() {
   const data = require("@teambit/design.ui.pages.not-found");
   _designUiPages = function () {
@@ -39,9 +32,16 @@ function _component() {
   };
   return data;
 }
-function _uiFoundationUi() {
-  const data = require("@teambit/ui-foundation.ui.full-loader");
-  _uiFoundationUi = function () {
+function _designSkeletons() {
+  const data = require("@teambit/design.skeletons.base-skeleton");
+  _designSkeletons = function () {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function () {
     return data;
   };
   return data;
@@ -88,22 +88,21 @@ function GraphPage({
   const {
     graph,
     error,
+    graphLoading,
     loading
   } = (0, _query().useGraphQuery)([component.id.toString()], filter);
-  if (error) return error.code === 404 ? /*#__PURE__*/_react().default.createElement(_designUiPages().NotFoundPage, null) : /*#__PURE__*/_react().default.createElement(_designUiPages2().ServerErrorPage, null);
-  if (!graph) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().FullLoader, null);
   const isFiltered = filter === 'runtimeOnly';
+  if (error) return error.code === 404 ? /*#__PURE__*/_react().default.createElement(_designUiPages().NotFoundPage, null) : /*#__PURE__*/_react().default.createElement(_designUiPages2().ServerErrorPage, null);
   return /*#__PURE__*/_react().default.createElement("div", {
-    className: _graphPageModule().default.page
-  }, /*#__PURE__*/_react().default.createElement(_documenterUi().H2, {
-    size: "xs"
-  }, "Component Dependencies"), /*#__PURE__*/_react().default.createElement(_dependenciesGraph().DependenciesGraph, {
+    className: (0, _classnames().default)(_graphPageModule().default.page)
+  }, /*#__PURE__*/_react().default.createElement(_dependenciesGraph().DependenciesGraph, {
     componentWidgets: componentWidgets,
     graph: graph,
     rootNode: component.id,
-    className: _graphPageModule().default.graph
-  }, /*#__PURE__*/_react().default.createElement(_graphFilters().GraphFilters, {
-    className: _graphPageModule().default.filters,
+    className: (0, _classnames().default)(_graphPageModule().default.graph, !graph && _designSkeletons().skeleton),
+    loadingGraphMetadata: graphLoading
+  }, graph && /*#__PURE__*/_react().default.createElement(_graphFilters().GraphFilters, {
+    className: (0, _classnames().default)(_graphPageModule().default.filters),
     disable: loading,
     isFiltered: isFiltered,
     onChangeFilter: onCheckFilter

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_documenterUi","_designUiPages","_designUiPages2","_component","_uiFoundationUi","_query","_dependenciesGraph","_graphFilters","_graphPageModule","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GraphPage","componentWidgets","component","useContext","ComponentContext","filter","setFilter","useState","onCheckFilter","isFiltered","undefined","graph","error","loading","useGraphQuery","id","toString","code","createElement","NotFoundPage","ServerErrorPage","FullLoader","className","styles","page","H2","size","DependenciesGraph","rootNode","GraphFilters","filters","disable","onChangeFilter"],"sources":["graph-page.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\n\nimport { H2 } from '@teambit/documenter.ui.heading';\nimport { NotFoundPage } from '@teambit/design.ui.pages.not-found';\nimport { ServerErrorPage } from '@teambit/design.ui.pages.server-error';\nimport { ComponentContext } from '@teambit/component';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\n\nimport { useGraphQuery } from '../query';\nimport { DependenciesGraph } from '../dependencies-graph';\nimport { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport type { GraphFilter } from '../../model/graph-filters';\n\nimport { GraphFilters } from './graph-filters';\n\nimport styles from './graph-page.module.scss';\n\ntype GraphPageProps = {\n  componentWidgets: ComponentWidgetSlot;\n};\n\nexport function GraphPage({ componentWidgets }: GraphPageProps) {\n  const component = useContext(ComponentContext);\n\n  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');\n  const onCheckFilter = (isFiltered: boolean) => {\n    setFilter(isFiltered ? 'runtimeOnly' : undefined);\n  };\n\n  const { graph, error, loading } = useGraphQuery([component.id.toString()], filter);\n  if (error) return error.code === 404 ? <NotFoundPage /> : <ServerErrorPage />;\n  if (!graph) return <FullLoader />;\n\n  const isFiltered = filter === 'runtimeOnly';\n\n  return (\n    <div className={styles.page}>\n      <H2 size=\"xs\">Component Dependencies</H2>\n      <DependenciesGraph\n        componentWidgets={componentWidgets}\n        graph={graph}\n        rootNode={component.id}\n        className={styles.graph}\n      >\n        <GraphFilters\n          className={styles.filters}\n          disable={loading}\n          isFiltered={isFiltered}\n          onChangeFilter={onCheckFilter}\n        />\n      </DependenciesGraph>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_designUiPages","_designUiPages2","_component","_designSkeletons","_classnames","_interopRequireDefault","_query","_dependenciesGraph","_graphFilters","_graphPageModule","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GraphPage","componentWidgets","component","useContext","ComponentContext","filter","setFilter","useState","onCheckFilter","isFiltered","undefined","graph","error","graphLoading","loading","useGraphQuery","id","toString","code","createElement","NotFoundPage","ServerErrorPage","className","classNames","styles","page","DependenciesGraph","rootNode","skeleton","loadingGraphMetadata","GraphFilters","filters","disable","onChangeFilter"],"sources":["graph-page.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport { NotFoundPage } from '@teambit/design.ui.pages.not-found';\nimport { ServerErrorPage } from '@teambit/design.ui.pages.server-error';\nimport { ComponentContext } from '@teambit/component';\nimport { skeleton } from '@teambit/design.skeletons.base-skeleton';\nimport classNames from 'classnames';\n\nimport { useGraphQuery } from '../query';\nimport { DependenciesGraph } from '../dependencies-graph';\nimport { ComponentWidgetSlot } from '../../graph.ui.runtime';\nimport type { GraphFilter } from '../../model/graph-filters';\n\nimport { GraphFilters } from './graph-filters';\n\nimport styles from './graph-page.module.scss';\n\ntype GraphPageProps = {\n  componentWidgets: ComponentWidgetSlot;\n};\n\nexport function GraphPage({ componentWidgets }: GraphPageProps) {\n  const component = useContext(ComponentContext);\n\n  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');\n\n  const onCheckFilter = (isFiltered: boolean) => {\n    setFilter(isFiltered ? 'runtimeOnly' : undefined);\n  };\n\n  const { graph, error, graphLoading, loading } = useGraphQuery([component.id.toString()], filter);\n\n  const isFiltered = filter === 'runtimeOnly';\n\n  if (error) return error.code === 404 ? <NotFoundPage /> : <ServerErrorPage />;\n\n  return (\n    <div className={classNames(styles.page)}>\n      <DependenciesGraph\n        componentWidgets={componentWidgets}\n        graph={graph}\n        rootNode={component.id}\n        className={classNames(styles.graph, !graph && skeleton)}\n        loadingGraphMetadata={graphLoading}\n      >\n        {graph && (\n          <GraphFilters\n            className={classNames(styles.filters)}\n            disable={loading}\n            isFiltered={isFiltered}\n            onChangeFilter={onCheckFilter}\n          />\n        )}\n      </DependenciesGraph>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/graph-page/graph-page.module.scss

@@ -28,7 +28,9 @@
   top: 8px;
   right: 8px;
   padding: 8px;
-
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   font-size: 0.75em;
   box-shadow: var(--bit-shadow-faint);
   z-index: 8; // position above the abs positioned graph items

package/dist/ui/graph.section.js

@@ -26,14 +26,14 @@ class GraphSection {
   constructor(componentWidgetSlot) {
     this.componentWidgetSlot = componentWidgetSlot;
     _defineProperty(this, "route", {
-      path: '~dependencies',
+      path: '~graph',
       element: /*#__PURE__*/_react().default.createElement(_graphPage().GraphPage, {
         componentWidgets: this.componentWidgetSlot
       })
     });
     _defineProperty(this, "navigationLink", {
-      href: '~dependencies',
-      children: 'Dependencies'
+      href: '~graph',
+      children: 'Graph'
     });
     _defineProperty(this, "order", 40);
   }

package/dist/ui/graph.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_graphPage","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","GraphSection","constructor","componentWidgetSlot","path","element","createElement","GraphPage","componentWidgets","href","children","exports"],"sources":["graph.section.tsx"],"sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\n\nimport { GraphPage } from './graph-page';\nimport { ComponentWidgetSlot } from '../graph.ui.runtime';\n\nexport class GraphSection implements Section {\n  constructor(private componentWidgetSlot: ComponentWidgetSlot) {}\n\n  route = {\n    path: '~dependencies',\n    element: <GraphPage componentWidgets={this.componentWidgetSlot} />,\n  };\n  navigationLink = {\n    href: '~dependencies',\n    children: 'Dependencies',\n  };\n  order = 40;\n}\n"],"mappings":";;;;;;AACA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAG,WAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,UAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyC,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,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,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAGlC,MAAMgB,YAAY,CAAoB;EAC3CC,WAAWA,CAASC,mBAAwC,EAAE;IAAA,KAA1CA,mBAAwC,GAAxCA,mBAAwC;IAAApB,eAAA,gBAEpD;MACNqB,IAAI,EAAE,eAAe;MACrBC,OAAO,eAAE9B,MAAA,GAAAO,OAAA,CAAAwB,aAAA,CAAC3B,UAAA,GAAA4B,SAAS;QAACC,gBAAgB,EAAE,IAAI,CAACL;MAAoB,CAAE;IACnE,CAAC;IAAApB,eAAA,yBACgB;MACf0B,IAAI,EAAE,eAAe;MACrBC,QAAQ,EAAE;IACZ,CAAC;IAAA3B,eAAA,gBACO,EAAE;EAVqD;AAWjE;AAAC4B,OAAA,CAAAV,YAAA,GAAAA,YAAA","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_graphPage","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","GraphSection","constructor","componentWidgetSlot","path","element","createElement","GraphPage","componentWidgets","href","children","exports"],"sources":["graph.section.tsx"],"sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\n\nimport { GraphPage } from './graph-page';\nimport { ComponentWidgetSlot } from '../graph.ui.runtime';\n\nexport class GraphSection implements Section {\n  constructor(private componentWidgetSlot: ComponentWidgetSlot) {}\n\n  route = {\n    path: '~graph',\n    element: <GraphPage componentWidgets={this.componentWidgetSlot} />,\n  };\n  navigationLink = {\n    href: '~graph',\n    children: 'Graph',\n  };\n  order = 40;\n}\n"],"mappings":";;;;;;AACA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAG,WAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,UAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyC,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,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,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAGlC,MAAMgB,YAAY,CAAoB;EAC3CC,WAAWA,CAASC,mBAAwC,EAAE;IAAA,KAA1CA,mBAAwC,GAAxCA,mBAAwC;IAAApB,eAAA,gBAEpD;MACNqB,IAAI,EAAE,QAAQ;MACdC,OAAO,eAAE9B,MAAA,GAAAO,OAAA,CAAAwB,aAAA,CAAC3B,UAAA,GAAA4B,SAAS;QAACC,gBAAgB,EAAE,IAAI,CAACL;MAAoB,CAAE;IACnE,CAAC;IAAApB,eAAA,yBACgB;MACf0B,IAAI,EAAE,QAAQ;MACdC,QAAQ,EAAE;IACZ,CAAC;IAAA3B,eAAA,gBACO,EAAE;EAVqD;AAWjE;AAAC4B,OAAA,CAAAV,YAAA,GAAAA,YAAA","ignoreList":[]}

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

@@ -1,4 +1,5 @@
 import { EdgeType } from '../../edge-type';
+export declare const GET_GRAPH_IDS: import("@apollo/client").DocumentNode;
 export declare const GET_GRAPH: import("@apollo/client").DocumentNode;
 export type RawGraphQuery = {
     graph: RawGraph;
@@ -9,7 +10,7 @@ export type RawGraph = {
 };
 export type RawNode = {
     id: string;
-    component: {
+    component?: {
         id: {
             name: string;
             scope: string;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GET_GRAPH = void 0;
+exports.GET_GRAPH_IDS = exports.GET_GRAPH = void 0;
 function _client() {
   const data = require("@apollo/client");
   _client = function () {
@@ -11,8 +11,20 @@ function _client() {
   };
   return data;
 }
-// please update types when updating query, for added safety
-
+const GET_GRAPH_IDS = exports.GET_GRAPH_IDS = (0, _client().gql)`
+  query graph($ids: [String], $filter: String) {
+    graph(ids: $ids, filter: $filter) {
+      nodes {
+        id
+      }
+      edges {
+        sourceId
+        targetId
+        dependencyLifecycleType
+      }
+    }
+  }
+`;
 const GET_GRAPH = exports.GET_GRAPH = (0, _client().gql)`
   query graph($ids: [String], $filter: String) {
     graph(ids: $ids, filter: $filter) {

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

@@ -1 +1 @@
-{"version":3,"names":["_client","data","require","GET_GRAPH","exports","gql"],"sources":["get-graph.query.ts"],"sourcesContent":["import { gql } from '@apollo/client';\nimport { EdgeType } from '../../edge-type';\n\n// please update types when updating query, for added safety\n\nexport const GET_GRAPH = gql`\n  query graph($ids: [String], $filter: String) {\n    graph(ids: $ids, filter: $filter) {\n      nodes {\n        id\n        component {\n          id {\n            name\n            version\n            scope\n          }\n          displayName\n\n          deprecation {\n            isDeprecate\n          }\n\n          env {\n            id\n            icon\n          }\n        }\n      }\n      edges {\n        sourceId\n        targetId\n        dependencyLifecycleType\n      }\n    }\n  }\n`;\n\nexport type RawGraphQuery = {\n  graph: RawGraph;\n};\n\nexport type RawGraph = {\n  nodes: RawNode[];\n  edges: [];\n};\n\nexport type RawNode = {\n  id: string;\n  component: {\n    id: {\n      name: string;\n      scope: string;\n      version: string;\n    };\n\n    displayName: string;\n\n    deprecation: {\n      isDeprecate: boolean;\n    };\n\n    env: {\n      id: string;\n      icon: string;\n    };\n  };\n};\n\nexport type RawEdge = {\n  sourceId: string;\n  targetId: string;\n  dependencyLifecycleType: EdgeType;\n};\n"],"mappings":";;;;;;AAAA,SAAAA,QAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,OAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA;;AAEO,MAAME,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,aAAG;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"names":["_client","data","require","GET_GRAPH_IDS","exports","gql","GET_GRAPH"],"sources":["get-graph.query.ts"],"sourcesContent":["import { gql } from '@apollo/client';\nimport { EdgeType } from '../../edge-type';\n\nexport const GET_GRAPH_IDS = gql`\n  query graph($ids: [String], $filter: String) {\n    graph(ids: $ids, filter: $filter) {\n      nodes {\n        id\n      }\n      edges {\n        sourceId\n        targetId\n        dependencyLifecycleType\n      }\n    }\n  }\n`;\n\nexport const GET_GRAPH = gql`\n  query graph($ids: [String], $filter: String) {\n    graph(ids: $ids, filter: $filter) {\n      nodes {\n        id\n        component {\n          id {\n            name\n            version\n            scope\n          }\n          displayName\n\n          deprecation {\n            isDeprecate\n          }\n\n          env {\n            id\n            icon\n          }\n        }\n      }\n      edges {\n        sourceId\n        targetId\n        dependencyLifecycleType\n      }\n    }\n  }\n`;\n\nexport type RawGraphQuery = {\n  graph: RawGraph;\n};\n\nexport type RawGraph = {\n  nodes: RawNode[];\n  edges: [];\n};\n\nexport type RawNode = {\n  id: string;\n  component?: {\n    id: {\n      name: string;\n      scope: string;\n      version: string;\n    };\n    displayName: string;\n    deprecation: {\n      isDeprecate: boolean;\n    };\n    env: {\n      id: string;\n      icon: string;\n    };\n  };\n};\n\nexport type RawEdge = {\n  sourceId: string;\n  targetId: string;\n  dependencyLifecycleType: EdgeType;\n};\n"],"mappings":";;;;;;AAAA,SAAAA,QAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,OAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGO,MAAME,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,aAAG;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,SAAS,GAAAF,OAAA,CAAAE,SAAA,GAAG,IAAAD,aAAG;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -1,7 +1,8 @@
-import { ComponentModel } from '@teambit/component';
+import { ComponentID, ComponentModel } from '@teambit/component';
 import { RawNode } from './get-graph.query';
 export declare class NodeModel {
     id: string;
-    component: ComponentModel;
+    component?: ComponentModel;
+    componentId: ComponentID;
     static from(rawNode: RawNode): NodeModel;
 }

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

@@ -18,13 +18,15 @@ class NodeModel {
   constructor() {
     _defineProperty(this, "id", void 0);
     _defineProperty(this, "component", void 0);
+    _defineProperty(this, "componentId", void 0);
   }
   static from(rawNode) {
     const node = new NodeModel();
     node.id = rawNode.id;
     // @TODO - component model should not expect all fields to have values
     // @ts-ignore
-    node.component = _component().ComponentModel.from(rawNode.component);
+    node.component = rawNode.component ? _component().ComponentModel.from(rawNode.component) : undefined;
+    node.componentId = node.component ? node.component.id : _component().ComponentID.fromString(rawNode.id);
     return node;
   }
 }

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","exports"],"sources":["node-model.ts"],"sourcesContent":["import { ComponentModel } from '@teambit/component';\nimport { RawNode } from './get-graph.query';\n\nexport class NodeModel {\n  id: string;\n  component: ComponentModel;\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 = ComponentModel.from(rawNode.component);\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;AAAoD,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;AAG7C,MAAMgB,SAAS,CAAC;EAAAC,YAAA;IAAApB,eAAA;IAAAA,eAAA;EAAA;EAIrB,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,GAAGC,2BAAc,CAACL,IAAI,CAACC,OAAO,CAACG,SAAS,CAAC;IACvD,OAAOF,IAAI;EACb;AACF;AAACI,OAAA,CAAAR,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 { 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.d.ts

@@ -1,8 +1,9 @@
 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;
     loading: boolean;
+    idsLoading: boolean;
+    graphLoading: boolean;
 };

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

@@ -11,9 +11,9 @@ function _react() {
   };
   return data;
 }
-function _uiFoundationUiHooks() {
-  const data = require("@teambit/ui-foundation.ui.hooks.use-data-query");
-  _uiFoundationUiHooks = function () {
+function _client() {
+  const data = require("@apollo/client");
+  _client = function () {
     return data;
   };
   return data;
@@ -39,29 +39,58 @@ function _graphModel() {
   };
   return data;
 }
-/** provides dependencies graph data from graphQL */
 function useGraphQuery(componentId, filter) {
+  // Eagerly fetch GET_GRAPH_IDS
   const {
-    data,
-    error,
-    loading
-  } = (0, _uiFoundationUiHooks().useDataQuery)(_getGraph().GET_GRAPH, {
+    data: idsData,
+    error: idsError,
+    loading: idsLoading
+  } = (0, _client().useQuery)(_getGraph().GET_GRAPH_IDS, {
     variables: {
       ids: componentId,
       filter
     },
-    skip: !componentId
+    skip: !componentId || !filter
   });
-  const rawGraph = data?.graph;
-  const clientError = !rawGraph && !loading ? new (_graphql().GraphQlError)(404) : undefined;
-  const serverError = error ? new (_graphql().GraphQlError)(500, error.message) : undefined;
+
+  // Lazily fetch GET_GRAPH
+  const [getGraph, {
+    data: graphData,
+    error: graphError,
+    loading: graphLoading
+  }] = (0, _client().useLazyQuery)(_getGraph().GET_GRAPH);
+  const [fetchError, setFetchError] = (0, _react().useState)(undefined);
+  const [shouldRefetchGraph, setShouldRefetchGraph] = (0, _react().useState)(false);
+  (0, _react().useEffect)(() => {
+    if (idsData?.graph.nodes.length || !filter) {
+      setShouldRefetchGraph(true);
+    }
+  }, [idsData?.graph.nodes.length, filter]);
+  (0, _react().useEffect)(() => {
+    if (shouldRefetchGraph) {
+      setShouldRefetchGraph(false);
+      void getGraph({
+        variables: {
+          ids: componentId,
+          filter
+        }
+      }).catch(error => {
+        setFetchError(new (_graphql().GraphQlError)(500, error.message));
+      });
+    }
+  }, [componentId, filter, getGraph, shouldRefetchGraph]);
+  const rawGraph = idsLoading ? undefined : idsData?.graph && graphData?.graph && idsData?.graph.nodes.length === graphData?.graph.nodes.length && graphData?.graph || idsData?.graph || graphData?.graph;
+  const clientError = !rawGraph && !idsLoading && !graphLoading ? new (_graphql().GraphQlError)(404) : undefined;
+  const serverError = graphError?.message || idsError?.message ? new (_graphql().GraphQlError)(500, graphError?.message || idsError?.message) : fetchError;
   return (0, _react().useMemo)(() => {
     return {
       graph: rawGraph ? _graphModel().GraphModel.from(rawGraph) : undefined,
       error: serverError || clientError,
-      loading
+      loading: idsLoading || graphLoading,
+      idsLoading,
+      graphLoading
     };
-  }, [rawGraph, error]);
+  }, [rawGraph, serverError, clientError, idsLoading, graphLoading]);
 }
 
 //# sourceMappingURL=use-graph-query.js.map

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,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","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 { 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":[]}

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

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "1.0.316",
+  "version": "1.0.318",
   "homepage": "https://bit.cloud/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "1.0.316"
+    "version": "1.0.318"
   },
   "dependencies": {
     "graphlib": "2.1.8",
@@ -15,8 +15,8 @@
     "graphql-tag": "2.12.1",
     "classnames": "2.2.6",
     "reactflow": "^11.11.3",
-    "semver": "7.5.2",
     "@dagrejs/dagre": "^1.1.2",
+    "semver": "7.5.2",
     "@teambit/component-id": "1.2.0",
     "@teambit/graph.cleargraph": "0.0.11",
     "@teambit/harmony": "0.4.6",
@@ -26,23 +26,21 @@
     "@teambit/component.ui.deprecation-icon": "0.0.509",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
     "@teambit/base-ui.routing.nav-link": "1.0.0",
-    "@teambit/design.ui.round-loader": "0.0.355",
-    "@teambit/component.ui.component-compare.status-resolver": "0.0.9",
-    "@teambit/evangelist.input.checkbox.label": "1.0.3",
+    "@teambit/evangelist.input.checkbox.label": "1.0.14",
+    "@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/documenter.ui.heading": "4.1.1",
-    "@teambit/ui-foundation.ui.full-loader": "0.0.500",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.505",
+    "@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.501",
-    "@teambit/component": "1.0.316",
-    "@teambit/cli": "0.0.893",
+    "@teambit/component": "1.0.318",
+    "@teambit/cli": "0.0.895",
     "@teambit/toolbox.string.random": "0.0.1",
     "@teambit/component.ui.component-compare.models.component-compare-props": "0.0.109",
-    "@teambit/graphql": "1.0.316",
-    "@teambit/logger": "0.0.986",
-    "@teambit/component-compare": "1.0.316",
-    "@teambit/ui": "1.0.316",
+    "@teambit/graphql": "1.0.318",
+    "@teambit/logger": "0.0.988",
+    "@teambit/component-compare": "1.0.318",
+    "@teambit/ui": "1.0.318",
     "@teambit/component.modules.component-url": "0.0.167",
     "@teambit/envs.ui.env-icon": "0.0.505",
     "@teambit/component.ui.component-compare.context": "0.0.118"

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

@@ -22,13 +22,13 @@ export interface IComponentNode extends CardProps {
 
 export function ComponentNode({ node, type = 'defaultNode', ...rest }: IComponentNode) {
   const graphContext = useContext(ComponentGraphContext);
-  const { component } = node;
-  const { id } = component;
+  const { component, componentId } = node;
+  const id = component?.id || componentId;
 
   return (
     <Card className={classnames(styles.compNode, variants[type])} elevation="none" {...rest}>
       <div className={styles.firstRow}>
-        <EnvIcon component={component} className={styles.envIcon} />
+        {component && <EnvIcon component={component} className={styles.envIcon} />}
         <Breadcrumbs componentId={id} className={mutedText} />
       </div>
       <div className={styles.nameLine}>
@@ -38,8 +38,9 @@ export function ComponentNode({ node, type = 'defaultNode', ...rest }: IComponen
         {id.version && <span className={classnames(styles.version, ellipsis)}>{id.version}</span>}
 
         <div className={styles.buffs}>
-          <DeprecationIcon component={component} />
-          {graphContext &&
+          {component && <DeprecationIcon component={component} />}
+          {component &&
+            graphContext &&
             graphContext.componentWidgets
               .toArray()
               .map(([widgetId, Widget]) => <Widget key={widgetId} component={component} />)}

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

@@ -5,7 +5,7 @@ export type CompareStatus = 'modified' | 'new' | 'deleted' | undefined;
 
 export class CompareNodeModel extends NodeModel {
   id: string;
-  component: ComponentModel;
+  component?: ComponentModel;
   compareVersion: string;
   status: CompareStatus;
 }

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

@@ -36,8 +36,8 @@ export type DependencyCompareNodeProps = {
 
 export function DependencyCompareNode(props: DependencyCompareNodeProps) {
   const { node, type = 'defaultNode' } = props;
-  const { id: baseIdStr, component: baseComponent, compareVersion, status } = node;
-  const { version: baseVersion } = baseComponent;
+  const { id: baseIdStr, component: baseComponent, compareVersion, status, componentId } = node;
+  const { version: baseVersion } = baseComponent || { version: componentId.version };
   const baseId = ComponentID.fromString(baseIdStr);
   const versionDiff = useMemo(
     () => valid(baseVersion) && valid(compareVersion) && compare(baseVersion, compareVersion),
@@ -47,7 +47,7 @@ export function DependencyCompareNode(props: DependencyCompareNodeProps) {
   return (
     <Card className={classnames(componentNodeStyles.compNode, getVariant(type))} elevation="none">
       <div className={componentNodeStyles.firstRow}>
-        <EnvIcon component={baseComponent} className={componentNodeStyles.envIcon} />
+        {baseComponent && <EnvIcon component={baseComponent} className={componentNodeStyles.envIcon} />}
         <Breadcrumbs componentId={baseId} className={mutedText} />
       </div>
       <div className={componentNodeStyles.nameLine}>
@@ -76,7 +76,7 @@ export function DependencyCompareNode(props: DependencyCompareNodeProps) {
         )}
 
         <div className={styles.buffs}>
-          <DeprecationIcon component={baseComponent} />
+          {baseComponent && <DeprecationIcon component={baseComponent} />}
           {status !== undefined && <CompareStatusResolver status={status} />}
         </div>
       </div>

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

@@ -3,7 +3,7 @@ import { EdgeModel, GraphModel, NodeModel } from '../query';
 import { CompareGraphModel } from './compare-graph-model';
 import { CompareNodeModel } from './compare-node-model';
 
-const toShortId = (node: NodeModel) => node.component.id.toStringWithoutVersion();
+const toShortId = (node: NodeModel) => node.componentId.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];
@@ -30,16 +30,17 @@ export function diffGraph(
   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',
+        compareVersion: compareNode.componentId.version,
+        status: compareNode.componentId.isEqual(baseNode.componentId) ? undefined : 'modified',
       });
     } else {
       allNodes.push({
         ...baseNode,
-        compareVersion: baseNode.component.version,
+        compareVersion: baseNode.componentId.version,
         status: 'deleted',
       });
     }

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

@@ -28,7 +28,7 @@ export function calcElements(
         type: 'ComponentNode',
         data: {
           node: x,
-          type: rootNode && x.component.id.isEqual(rootNode, { ignoreVersion: true }) ? 'root' : undefined,
+          type: rootNode && x.componentId.isEqual(rootNode, { ignoreVersion: true }) ? 'root' : undefined,
         },
         position: positions.get(x.id) || { x: 0, y: 0 },
       };
@@ -49,5 +49,5 @@ export function calcElements(
     }));
 
     return { nodes, edges };
-  }, [graph]);
+  }, [graph?.nodes.length, graph?.edges.length, rootNode?.toString(), graph?.nodes.some((n) => n.component)]);
 }