@teambit/graph 1.0.316 → 1.0.318

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import ReactFlow, {
   Background,
@@ -11,6 +11,7 @@ import ReactFlow, {
   Position,
   ReactFlowProps,
   ReactFlowProvider,
+  useNodesState,
 } from 'reactflow';
 import { ComponentID } from '@teambit/component';
 import { ComponentWidgetSlot } from '../../graph.ui.runtime';
@@ -36,9 +37,10 @@ function ComponentNodeContainer(props: NodeProps) {
 
 export type DependenciesGraphProps = {
   rootNode: ComponentID;
-  graph: GraphModel<NodeModel, EdgeModel>;
+  graph?: GraphModel<NodeModel, EdgeModel>;
   componentWidgets: ComponentWidgetSlot;
   onLoad?: (instance: ReactFlowInstance) => void;
+  loadingGraphMetadata?: boolean;
 } & Omit<ReactFlowProps, 'elements'>;
 
 export function DependenciesGraph({
@@ -48,17 +50,24 @@ export function DependenciesGraph({
   className,
   onLoad,
   children,
+  loadingGraphMetadata,
   ...rest
 }: DependenciesGraphProps) {
   const nodeTypes: NodeTypes = React.useMemo(() => ({ ComponentNode: ComponentNodeContainer }), []);
   const graphRef = useRef<ReactFlowInstance>();
   const elements = calcElements(graph, { rootNode });
+  const [nodes, setNodes] = useNodesState(elements.nodes);
 
-  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);
+  useEffect(() => {
+    setNodes(elements.nodes);
+  }, [elements.nodes]);
+
+  const context = useMemo(() => ({ componentWidgets, loadingGraphMetadata }), [componentWidgets, loadingGraphMetadata]);
 
   const handleLoad = useCallback(
     (instance: ReactFlowInstance) => {
-      if ((graph?.nodes.length ?? 0) <= 3) {
+      graphRef.current = instance;
+      if ((elements?.nodes.length ?? 0) <= 3) {
         instance.fitView({
           padding: 2,
           maxZoom: 1,
@@ -78,13 +87,18 @@ export function DependenciesGraph({
 
   useEffect(() => {
     setTimeout(() => {
-      if (graph.nodes.length <= 3)
+      if (!elements?.nodes.length) return;
+      if ((elements?.nodes?.length ?? 0) <= 3) {
         return graphRef.current?.fitView({
           padding: 2,
+          maxZoom: 1,
         });
-      return graphRef.current?.fitView();
-    }, 0);
-  }, [graph]);
+      }
+      return graphRef.current?.fitView({
+        maxZoom: 1,
+      });
+    }, 100);
+  }, [elements?.nodes.length]);
 
   return (
     <ComponentGraphContext.Provider value={context}>
@@ -101,10 +115,15 @@ export function DependenciesGraph({
           minZoom={0}
           {...rest}
           className={classnames(styles.graph, className)}
-          defaultNodes={elements.nodes}
-          defaultEdges={elements.edges}
+          nodes={nodes}
+          edges={elements.edges}
           nodeTypes={nodeTypes}
           onInit={handleLoad}
+          fitView={true}
+          fitViewOptions={{
+            padding: (elements?.nodes.length ?? 0) <= 3 ? 2 : undefined,
+            maxZoom: 1,
+          }}
           proOptions={{
             hideAttribution: true,
           }}

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

@@ -4,6 +4,7 @@ import { CheckboxLabel } from '@teambit/evangelist.input.checkbox.label';
 
 type GraphFiltersType = {
   isFiltered: boolean;
+  showMetadata?: boolean;
   onChangeFilter: (isFiltered: boolean) => void;
   disable?: boolean;
 } & CardProps;

package/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/ui/graph-page/graph-page.tsx

@@ -1,10 +1,9 @@
 import React, { useContext, useState } from 'react';
-
-import { H2 } from '@teambit/documenter.ui.heading';
 import { NotFoundPage } from '@teambit/design.ui.pages.not-found';
 import { ServerErrorPage } from '@teambit/design.ui.pages.server-error';
 import { ComponentContext } from '@teambit/component';
-import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
+import { skeleton } from '@teambit/design.skeletons.base-skeleton';
+import classNames from 'classnames';
 
 import { useGraphQuery } from '../query';
 import { DependenciesGraph } from '../dependencies-graph';
@@ -23,31 +22,34 @@ export function GraphPage({ componentWidgets }: GraphPageProps) {
   const component = useContext(ComponentContext);
 
   const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');
+
   const onCheckFilter = (isFiltered: boolean) => {
     setFilter(isFiltered ? 'runtimeOnly' : undefined);
   };
 
-  const { graph, error, loading } = useGraphQuery([component.id.toString()], filter);
-  if (error) return error.code === 404 ? <NotFoundPage /> : <ServerErrorPage />;
-  if (!graph) return <FullLoader />;
+  const { graph, error, graphLoading, loading } = useGraphQuery([component.id.toString()], filter);
 
   const isFiltered = filter === 'runtimeOnly';
 
+  if (error) return error.code === 404 ? <NotFoundPage /> : <ServerErrorPage />;
+
   return (
-    <div className={styles.page}>
-      <H2 size="xs">Component Dependencies</H2>
+    <div className={classNames(styles.page)}>
       <DependenciesGraph
         componentWidgets={componentWidgets}
         graph={graph}
         rootNode={component.id}
-        className={styles.graph}
+        className={classNames(styles.graph, !graph && skeleton)}
+        loadingGraphMetadata={graphLoading}
       >
-        <GraphFilters
-          className={styles.filters}
-          disable={loading}
-          isFiltered={isFiltered}
-          onChangeFilter={onCheckFilter}
-        />
+        {graph && (
+          <GraphFilters
+            className={classNames(styles.filters)}
+            disable={loading}
+            isFiltered={isFiltered}
+            onChangeFilter={onCheckFilter}
+          />
+        )}
       </DependenciesGraph>
     </div>
   );

package/ui/graph.section.tsx

@@ -8,12 +8,12 @@ export class GraphSection implements Section {
   constructor(private componentWidgetSlot: ComponentWidgetSlot) {}
 
   route = {
-    path: '~dependencies',
+    path: '~graph',
     element: <GraphPage componentWidgets={this.componentWidgetSlot} />,
   };
   navigationLink = {
-    href: '~dependencies',
-    children: 'Dependencies',
+    href: '~graph',
+    children: 'Graph',
   };
   order = 40;
 }

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

@@ -1,7 +1,20 @@
 import { gql } from '@apollo/client';
 import { EdgeType } from '../../edge-type';
 
-// please update types when updating query, for added safety
+export const GET_GRAPH_IDS = gql`
+  query graph($ids: [String], $filter: String) {
+    graph(ids: $ids, filter: $filter) {
+      nodes {
+        id
+      }
+      edges {
+        sourceId
+        targetId
+        dependencyLifecycleType
+      }
+    }
+  }
+`;
 
 export const GET_GRAPH = gql`
   query graph($ids: [String], $filter: String) {
@@ -46,19 +59,16 @@ export type RawGraph = {
 
 export type RawNode = {
   id: string;
-  component: {
+  component?: {
     id: {
       name: string;
       scope: string;
       version: string;
     };
-
     displayName: string;
-
     deprecation: {
       isDeprecate: boolean;
     };
-
     env: {
       id: string;
       icon: string;

package/ui/query/node-model.ts

@@ -1,16 +1,18 @@
-import { ComponentModel } from '@teambit/component';
+import { ComponentID, ComponentModel } from '@teambit/component';
 import { RawNode } from './get-graph.query';
 
 export class NodeModel {
   id: string;
-  component: ComponentModel;
+  component?: ComponentModel;
+  componentId: ComponentID;
 
   static from(rawNode: RawNode) {
     const node = new NodeModel();
     node.id = rawNode.id;
     // @TODO - component model should not expect all fields to have values
     // @ts-ignore
-    node.component = ComponentModel.from(rawNode.component);
+    node.component = rawNode.component ? ComponentModel.from(rawNode.component) : undefined;
+    node.componentId = node.component ? node.component.id : ComponentID.fromString(rawNode.id);
     return node;
   }
 }

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

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { useMemo, useEffect, useState } from 'react';
+import { useQuery, useLazyQuery } from '@apollo/client';
 import { GraphQlError } from '@teambit/graphql';
-import { GET_GRAPH, RawGraphQuery } from './get-graph.query';
+import { GET_GRAPH, RawGraphQuery, GET_GRAPH_IDS } from './get-graph.query';
 import { GraphModel } from './graph-model';
 
 type QueryVariables = {
@@ -9,22 +9,64 @@ type QueryVariables = {
   filter?: string;
 };
 
-/** provides dependencies graph data from graphQL */
 export function useGraphQuery(componentId?: string[], filter?: string) {
-  const { data, error, loading } = useDataQuery<RawGraphQuery, QueryVariables>(GET_GRAPH, {
+  // Eagerly fetch GET_GRAPH_IDS
+  const {
+    data: idsData,
+    error: idsError,
+    loading: idsLoading,
+  } = useQuery<RawGraphQuery, QueryVariables>(GET_GRAPH_IDS, {
     variables: { ids: componentId, filter },
-    skip: !componentId,
+    skip: !componentId || !filter,
   });
 
-  const rawGraph = data?.graph;
-  const clientError = !rawGraph && !loading ? new GraphQlError(404) : undefined;
-  const serverError = error ? new GraphQlError(500, error.message) : undefined;
+  // Lazily fetch GET_GRAPH
+  const [getGraph, { data: graphData, error: graphError, loading: graphLoading }] = useLazyQuery<
+    RawGraphQuery,
+    QueryVariables
+  >(GET_GRAPH);
+
+  const [fetchError, setFetchError] = useState<GraphQlError | undefined>(undefined);
+
+  const [shouldRefetchGraph, setShouldRefetchGraph] = useState(false);
+
+  useEffect(() => {
+    if (idsData?.graph.nodes.length || !filter) {
+      setShouldRefetchGraph(true);
+    }
+  }, [idsData?.graph.nodes.length, filter]);
+
+  useEffect(() => {
+    if (shouldRefetchGraph) {
+      setShouldRefetchGraph(false);
+      void getGraph({ variables: { ids: componentId, filter } }).catch((error) => {
+        setFetchError(new 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 GraphQlError(404) : undefined;
+  const serverError =
+    graphError?.message || idsError?.message
+      ? new GraphQlError(500, graphError?.message || idsError?.message)
+      : fetchError;
 
   return useMemo(() => {
     return {
       graph: rawGraph ? GraphModel.from(rawGraph) : undefined,
       error: serverError || clientError,
-      loading,
+      loading: idsLoading || graphLoading,
+      idsLoading,
+      graphLoading,
     };
-  }, [rawGraph, error]);
+  }, [rawGraph, serverError, clientError, idsLoading, graphLoading]);
 }