@teambit/graph 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/preview-1695271419280.js +7 -0
- package/dist/ui/component-node/component-node.d.ts +2 -2
- package/dist/ui/component-node/component-node.js.map +1 -1
- package/dist/ui/dependencies-compare/dependencies-compare.js +22 -5
- package/dist/ui/dependencies-compare/dependencies-compare.js.map +1 -1
- package/dist/ui/dependencies-compare/dependencies-compare.module.scss +3 -1
- package/dist/ui/dependencies-graph/dependencies-graph.js +17 -5
- package/dist/ui/dependencies-graph/dependencies-graph.js.map +1 -1
- package/dist/ui/graph-page/graph-filters.d.ts +2 -2
- package/dist/ui/graph-page/graph-filters.js.map +1 -1
- package/package.json +18 -18
- package/ui/component-node/component-node.tsx +2 -2
- package/ui/dependencies-compare/dependencies-compare.module.scss +3 -1
- package/ui/dependencies-compare/dependencies-compare.tsx +28 -6
- package/ui/dependencies-graph/dependencies-graph.tsx +16 -4
- package/ui/graph-page/graph-filters.tsx +2 -2
- package/dist/preview-1695234806813.js +0 -7
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@1.0.3/dist/graph.composition.js';
|
2
|
+
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@1.0.3/dist/graph.docs.md';
|
3
|
+
|
4
|
+
export const compositions = [compositions_0];
|
5
|
+
export const overview = [overview_0];
|
6
|
+
|
7
|
+
export const compositions_metadata = {"compositions":[{"displayName":"Logo","identifier":"Logo"}]};
|
@@ -1,8 +1,8 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { CardProps } from '@teambit/base-ui.surfaces.card';
|
3
3
|
import { NodeModel } from '../query/node-model';
|
4
|
-
export interface
|
4
|
+
export interface IComponentNode extends CardProps {
|
5
5
|
node: NodeModel;
|
6
6
|
type: string;
|
7
7
|
}
|
8
|
-
export declare function ComponentNode({ node, type, ...rest }:
|
8
|
+
export declare function ComponentNode({ node, type, ...rest }: IComponentNode): JSX.Element;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_baseUiText","_componentUi","_envsUi","_designUiStyles","_baseUiSurfaces","_baseUiRouting","_componentModules","_dependenciesGraph","_componentNodeModule","_variantsModule","_excluded","_excluded2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ComponentNode","_ref","node","type","rest","graphContext","useContext","ComponentGraphContext","component","id","createElement","Card","className","classnames","styles","compNode","variants","elevation","firstRow","EnvIcon","envIcon","Breadcrumbs","componentId","mutedText","nameLine","NavLink","link","external","href","ComponentUrl","toUrl","includeVersion","name","ellipsis","version","buffs","DeprecationIcon","componentWidgets","toArray","map","widgetId","Widget","_ref2","scope","namespace","showSep","breadcrumbs"],"sources":["component-node.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport { mutedText } from '@teambit/base-ui.text.muted-text';\nimport { ComponentID } from '@teambit/component';\nimport { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';\nimport { EnvIcon } from '@teambit/envs.ui.env-icon';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { Card, CardProps } from '@teambit/base-ui.surfaces.card';\nimport { NavLink } from '@teambit/base-ui.routing.nav-link';\nimport { ComponentUrl } from '@teambit/component.modules.component-url';\nimport { NodeModel } from '../query/node-model';\nimport { ComponentGraphContext } from '../dependencies-graph/';\n\n// keep order: styles, then variants\nimport styles from './component-node.module.scss';\nimport variants from './variants.module.scss';\n\nexport interface
|
1
|
+
{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_baseUiText","_componentUi","_envsUi","_designUiStyles","_baseUiSurfaces","_baseUiRouting","_componentModules","_dependenciesGraph","_componentNodeModule","_variantsModule","_excluded","_excluded2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ComponentNode","_ref","node","type","rest","graphContext","useContext","ComponentGraphContext","component","id","createElement","Card","className","classnames","styles","compNode","variants","elevation","firstRow","EnvIcon","envIcon","Breadcrumbs","componentId","mutedText","nameLine","NavLink","link","external","href","ComponentUrl","toUrl","includeVersion","name","ellipsis","version","buffs","DeprecationIcon","componentWidgets","toArray","map","widgetId","Widget","_ref2","scope","namespace","showSep","breadcrumbs"],"sources":["component-node.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport { mutedText } from '@teambit/base-ui.text.muted-text';\nimport { ComponentID } from '@teambit/component';\nimport { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';\nimport { EnvIcon } from '@teambit/envs.ui.env-icon';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { Card, CardProps } from '@teambit/base-ui.surfaces.card';\nimport { NavLink } from '@teambit/base-ui.routing.nav-link';\nimport { ComponentUrl } from '@teambit/component.modules.component-url';\nimport { NodeModel } from '../query/node-model';\nimport { ComponentGraphContext } from '../dependencies-graph/';\n\n// keep order: styles, then variants\nimport styles from './component-node.module.scss';\nimport variants from './variants.module.scss';\n\nexport interface IComponentNode extends CardProps {\n node: NodeModel;\n type: string;\n}\n\nexport function ComponentNode({ node, type = 'defaultNode', ...rest }: IComponentNode) {\n const graphContext = useContext(ComponentGraphContext);\n const { component } = node;\n const { id } = component;\n\n return (\n <Card className={classnames(styles.compNode, variants[type])} elevation=\"none\" {...rest}>\n <div className={styles.firstRow}>\n <EnvIcon component={component} className={styles.envIcon} />\n <Breadcrumbs componentId={id} className={mutedText} />\n </div>\n <div className={styles.nameLine}>\n <NavLink className={styles.link} external={true} href={ComponentUrl.toUrl(id, { includeVersion: false })}>\n <span className={classnames(styles.name, ellipsis)}>{id.name}</span>\n </NavLink>\n {id.version && <span className={classnames(styles.version, ellipsis)}>{id.version}</span>}\n\n <div className={styles.buffs}>\n <DeprecationIcon component={component} />\n {graphContext &&\n graphContext.componentWidgets\n .toArray()\n .map(([widgetId, Widget]) => <Widget key={widgetId} component={component} />)}\n </div>\n </div>\n </Card>\n );\n}\n\ntype BreadcrumbsProps = { componentId: ComponentID } & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Breadcrumbs({ componentId, className, ...rest }: BreadcrumbsProps) {\n const { scope, namespace } = componentId;\n const showSep = !!scope && !!namespace;\n\n return (\n <div {...rest} className={classnames(styles.breadcrumbs, ellipsis, className)}>\n {scope}\n {showSep && '/'}\n {namespace}\n </div>\n );\n}\n"],"mappings":"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"}
|
@@ -116,15 +116,31 @@ function DependenciesCompare() {
|
|
116
116
|
const elements = (0, _graph().calcElements)(graph, {
|
117
117
|
rootNode: baseId
|
118
118
|
});
|
119
|
+
(0, _react().useEffect)(() => () => graphRef.current = undefined, []);
|
119
120
|
(0, _react().useEffect)(() => {
|
120
121
|
var _graphRef$current;
|
121
122
|
(_graphRef$current = graphRef.current) === null || _graphRef$current === void 0 || _graphRef$current.fitView();
|
122
123
|
}, [elements]);
|
123
|
-
|
124
|
-
var _graphRef$current2;
|
124
|
+
const handleLoad = (0, _react().useCallback)(instance => {
|
125
125
|
graphRef.current = instance;
|
126
|
-
(
|
127
|
-
|
126
|
+
if (((graph === null || graph === void 0 ? void 0 : graph.nodes.length) ?? 0) <= 3) {
|
127
|
+
var _graphRef$current2;
|
128
|
+
(_graphRef$current2 = graphRef.current) === null || _graphRef$current2 === void 0 || _graphRef$current2.fitView({
|
129
|
+
padding: 2
|
130
|
+
});
|
131
|
+
} else {
|
132
|
+
instance.fitView();
|
133
|
+
}
|
134
|
+
}, [graph === null || graph === void 0 ? void 0 : graph.nodes.length]);
|
135
|
+
(0, _react().useEffect)(() => {
|
136
|
+
setTimeout(() => {
|
137
|
+
var _graphRef$current3, _graphRef$current4;
|
138
|
+
if (((graph === null || graph === void 0 ? void 0 : graph.nodes.length) ?? 0) <= 3) return (_graphRef$current3 = graphRef.current) === null || _graphRef$current3 === void 0 ? void 0 : _graphRef$current3.fitView({
|
139
|
+
padding: 2
|
140
|
+
});
|
141
|
+
return (_graphRef$current4 = graphRef.current) === null || _graphRef$current4 === void 0 ? void 0 : _graphRef$current4.fitView();
|
142
|
+
}, 0);
|
143
|
+
}, [compareId === null || compareId === void 0 ? void 0 : compareId.toString(), baseId === null || baseId === void 0 ? void 0 : baseId.toString()]);
|
128
144
|
const onCheckFilter = _isFiltered => {
|
129
145
|
setFilter(_isFiltered ? 'runtimeOnly' : undefined);
|
130
146
|
};
|
@@ -142,7 +158,8 @@ function DependenciesCompare() {
|
|
142
158
|
nodesConnectable: false,
|
143
159
|
zoomOnDoubleClick: false,
|
144
160
|
elementsSelectable: false,
|
145
|
-
maxZoom:
|
161
|
+
maxZoom: 100,
|
162
|
+
minZoom: 0,
|
146
163
|
className: _graph().dependenciesGraphStyles.graph,
|
147
164
|
elements: elements,
|
148
165
|
nodeTypes: NodeTypes,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_classnames","data","_interopRequireDefault","require","_designUi","_graph","_componentUiComponentCompare","_react","_interopRequireWildcard","_reactFlowRenderer","_dependenciesCompareModule","_dependencyCompareNode","_diffGraph","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","createElement","Handle","type","position","isConnectable","DependencyCompareNode","node","NodeTypes","ComponentNode","DependenciesCompare","_componentCompare$bas","_componentCompare$com","graphRef","useRef","componentCompare","useComponentCompare","baseId","base","model","compareId","compare","filter","setFilter","useState","isFiltered","loading","baseLoading","graph","baseGraph","useGraphQuery","toString","compareLoading","compareGraph","diffGraph","undefined","elements","calcElements","rootNode","useEffect","_graphRef$current","current","fitView","handleLoad","instance","_graphRef$current2","onCheckFilter","_isFiltered","Fragment","className","classNames","styles","page","graphPageStyles","loader","RoundLoader","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","maxZoom","dependenciesGraphStyles","nodeTypes","onLoad","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap","GraphFilters","filters","disable","onChangeFilter"],"sources":["dependencies-compare.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { RoundLoader } from '@teambit/design.ui.round-loader';\nimport {\n calcElements,\n calcMinimapColors,\n dependenciesGraphStyles,\n GraphFilter,\n GraphFilters,\n graphPageStyles,\n useGraphQuery,\n} from '@teambit/graph';\nimport { useComponentCompare } from '@teambit/component.ui.component-compare.context';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactFlow, {\n Background,\n Controls,\n Handle,\n MiniMap,\n NodeProps,\n NodeTypesType,\n OnLoadParams,\n Position,\n ReactFlowProvider,\n} from 'react-flow-renderer';\nimport styles from './dependencies-compare.module.scss';\nimport { DependencyCompareNode } from './dependency-compare-node';\nimport { diffGraph } from './diff-graph';\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 <DependencyCompareNode node={data.node} type={data.type} />\n </div>\n );\n}\n\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport function DependenciesCompare() {\n const graphRef = useRef<OnLoadParams>();\n const componentCompare = useComponentCompare();\n\n const baseId = componentCompare?.base?.model.id;\n const compareId = componentCompare?.compare?.model.id;\n\n const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');\n const isFiltered = filter === 'runtimeOnly';\n const { loading: baseLoading, graph: baseGraph } = useGraphQuery(baseId && [baseId.toString()], filter);\n const { loading: compareLoading, graph: compareGraph } = useGraphQuery(compareId && [compareId.toString()], filter);\n const loading = baseLoading || compareLoading;\n const graph = diffGraph(baseGraph, compareGraph, baseId) ?? undefined;\n const elements = calcElements(graph, { rootNode: baseId });\n\n useEffect(() => {\n graphRef.current?.fitView();\n }, [elements]);\n\n function handleLoad(instance: OnLoadParams) {\n graphRef.current = instance;\n graphRef.current?.fitView();\n }\n\n const onCheckFilter = (_isFiltered: boolean) => {\n setFilter(_isFiltered ? 'runtimeOnly' : undefined);\n };\n\n if (!loading && (!baseGraph || !compareGraph)) {\n return <></>;\n }\n\n return (\n <div className={classNames([styles.page, graphPageStyles.graph])}>\n {loading && (\n <div className={styles.loader}>\n <RoundLoader />\n </div>\n )}\n <ReactFlowProvider>\n <ReactFlow\n draggable={false}\n nodesDraggable={true}\n selectNodesOnDrag={false}\n nodesConnectable={false}\n zoomOnDoubleClick={false}\n elementsSelectable={false}\n maxZoom={1}\n className={dependenciesGraphStyles.graph}\n elements={elements}\n nodeTypes={NodeTypes}\n onLoad={handleLoad}\n >\n <Background />\n <Controls className={dependenciesGraphStyles.controls} />\n <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />\n <GraphFilters\n className={graphPageStyles.filters}\n disable={loading}\n isFiltered={isFiltered}\n onChangeFilter={onCheckFilter}\n />\n </ReactFlow>\n </ReactFlowProvider>\n </div>\n );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,YAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,WAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,UAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,SAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,OAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,MAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AASA,SAAAK,6BAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,4BAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAM,OAAA;EAAA,MAAAN,IAAA,GAAAO,uBAAA,CAAAL,OAAA;EAAAI,MAAA,YAAAA,CAAA;IAAA,OAAAN,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAQ,mBAAA;EAAA,MAAAR,IAAA,GAAAO,uBAAA,CAAAL,OAAA;EAAAM,kBAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAWA,SAAAS,2BAAA;EAAA,MAAAT,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAO,0BAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAU,uBAAA;EAAA,MAAAV,IAAA,GAAAE,OAAA;EAAAQ,sBAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAW,WAAA;EAAA,MAAAX,IAAA,GAAAE,OAAA;EAAAS,UAAA,YAAAA,CAAA;IAAA,OAAAX,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyC,SAAAY,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAN,wBAAAU,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAtB,uBAAAgB,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEzC,SAASiB,sBAAsBA,CAACC,KAAgB,EAAE;EAChD,MAAM;IAAEC,cAAc,GAAGC,6BAAQ,CAACC,GAAG;IAAEC,cAAc,GAAGF,6BAAQ,CAACG,MAAM;IAAExC,IAAI;IAAEyC;EAAG,CAAC,GAAGN,KAAK;EAE3F,oBACE7B,MAAA,GAAAa,OAAA,CAAAuB,aAAA;IAAKd,GAAG,EAAEa;EAAG,gBACXnC,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAClC,kBAAA,GAAAmC,MAAM;IAACC,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAEN,cAAe;IAACO,aAAa,EAAE;EAAM,CAAE,CAAC,eACxExC,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAClC,kBAAA,GAAAmC,MAAM;IAACC,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAET,cAAe;IAACU,aAAa,EAAE;EAAM,CAAE,CAAC,eACxExC,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAChC,sBAAA,GAAAqC,qBAAqB;IAACC,IAAI,EAAEhD,IAAI,CAACgD,IAAK;IAACJ,IAAI,EAAE5C,IAAI,CAAC4C;EAAK,CAAE,CACvD,CAAC;AAEV;AAEA,MAAMK,SAAwB,GAAG;EAAEC,aAAa,EAAEhB;AAAuB,CAAC;AAEnE,SAASiB,mBAAmBA,CAAA,EAAG;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACpC,MAAMC,QAAQ,GAAG,IAAAC,eAAM,EAAe,CAAC;EACvC,MAAMC,gBAAgB,GAAG,IAAAC,kDAAmB,EAAC,CAAC;EAE9C,MAAMC,MAAM,GAAGF,gBAAgB,aAAhBA,gBAAgB,gBAAAJ,qBAAA,GAAhBI,gBAAgB,CAAEG,IAAI,cAAAP,qBAAA,uBAAtBA,qBAAA,CAAwBQ,KAAK,CAACnB,EAAE;EAC/C,MAAMoB,SAAS,GAAGL,gBAAgB,aAAhBA,gBAAgB,gBAAAH,qBAAA,GAAhBG,gBAAgB,CAAEM,OAAO,cAAAT,qBAAA,uBAAzBA,qBAAA,CAA2BO,KAAK,CAACnB,EAAE;EAErD,MAAM,CAACsB,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,iBAAQ,EAAc,aAAa,CAAC;EAChE,MAAMC,UAAU,GAAGH,MAAM,KAAK,aAAa;EAC3C,MAAM;IAAEI,OAAO,EAAEC,WAAW;IAAEC,KAAK,EAAEC;EAAU,CAAC,GAAG,IAAAC,sBAAa,EAACb,MAAM,IAAI,CAACA,MAAM,CAACc,QAAQ,CAAC,CAAC,CAAC,EAAET,MAAM,CAAC;EACvG,MAAM;IAAEI,OAAO,EAAEM,cAAc;IAAEJ,KAAK,EAAEK;EAAa,CAAC,GAAG,IAAAH,sBAAa,EAACV,SAAS,IAAI,CAACA,SAAS,CAACW,QAAQ,CAAC,CAAC,CAAC,EAAET,MAAM,CAAC;EACnH,MAAMI,OAAO,GAAGC,WAAW,IAAIK,cAAc;EAC7C,MAAMJ,KAAK,GAAG,IAAAM,sBAAS,EAACL,SAAS,EAAEI,YAAY,EAAEhB,MAAM,CAAC,IAAIkB,SAAS;EACrE,MAAMC,QAAQ,GAAG,IAAAC,qBAAY,EAACT,KAAK,EAAE;IAAEU,QAAQ,EAAErB;EAAO,CAAC,CAAC;EAE1D,IAAAsB,kBAAS,EAAC,MAAM;IAAA,IAAAC,iBAAA;IACd,CAAAA,iBAAA,GAAA3B,QAAQ,CAAC4B,OAAO,cAAAD,iBAAA,eAAhBA,iBAAA,CAAkBE,OAAO,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACN,QAAQ,CAAC,CAAC;EAEd,SAASO,UAAUA,CAACC,QAAsB,EAAE;IAAA,IAAAC,kBAAA;IAC1ChC,QAAQ,CAAC4B,OAAO,GAAGG,QAAQ;IAC3B,CAAAC,kBAAA,GAAAhC,QAAQ,CAAC4B,OAAO,cAAAI,kBAAA,eAAhBA,kBAAA,CAAkBH,OAAO,CAAC,CAAC;EAC7B;EAEA,MAAMI,aAAa,GAAIC,WAAoB,IAAK;IAC9CxB,SAAS,CAACwB,WAAW,GAAG,aAAa,GAAGZ,SAAS,CAAC;EACpD,CAAC;EAED,IAAI,CAACT,OAAO,KAAK,CAACG,SAAS,IAAI,CAACI,YAAY,CAAC,EAAE;IAC7C,oBAAOpE,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAApC,MAAA,GAAAa,OAAA,CAAAsE,QAAA,MAAI,CAAC;EACd;EAEA,oBACEnF,MAAA,GAAAa,OAAA,CAAAuB,aAAA;IAAKgD,SAAS,EAAE,IAAAC,qBAAU,EAAC,CAACC,oCAAM,CAACC,IAAI,EAAEC,wBAAe,CAACzB,KAAK,CAAC;EAAE,GAC9DF,OAAO,iBACN7D,MAAA,GAAAa,OAAA,CAAAuB,aAAA;IAAKgD,SAAS,EAAEE,oCAAM,CAACG;EAAO,gBAC5BzF,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAACvC,SAAA,GAAA6F,WAAW,MAAE,CACX,CACN,eACD1F,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAClC,kBAAA,GAAAyF,iBAAiB,qBAChB3F,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAClC,kBAAA,GAAAW,OAAS;IACR+E,SAAS,EAAE,KAAM;IACjBC,cAAc,EAAE,IAAK;IACrBC,iBAAiB,EAAE,KAAM;IACzBC,gBAAgB,EAAE,KAAM;IACxBC,iBAAiB,EAAE,KAAM;IACzBC,kBAAkB,EAAE,KAAM;IAC1BC,OAAO,EAAE,CAAE;IACXd,SAAS,EAAEe,gCAAuB,CAACpC,KAAM;IACzCQ,QAAQ,EAAEA,QAAS;IACnB6B,SAAS,EAAEzD,SAAU;IACrB0D,MAAM,EAAEvB;EAAW,gBAEnB9E,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAClC,kBAAA,GAAAoG,UAAU,MAAE,CAAC,eACdtG,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAClC,kBAAA,GAAAqG,QAAQ;IAACnB,SAAS,EAAEe,gCAAuB,CAACK;EAAS,CAAE,CAAC,eACzDxG,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAAClC,kBAAA,GAAAuG,OAAO;IAACC,SAAS,EAAEC,0BAAkB;IAACvB,SAAS,EAAEe,gCAAuB,CAACS;EAAQ,CAAE,CAAC,eACrF5G,MAAA,GAAAa,OAAA,CAAAuB,aAAA,CAACtC,MAAA,GAAA+G,YAAY;IACXzB,SAAS,EAAEI,wBAAe,CAACsB,OAAQ;IACnCC,OAAO,EAAElD,OAAQ;IACjBD,UAAU,EAAEA,UAAW;IACvBoD,cAAc,EAAE/B;EAAc,CAC/B,CACQ,CACM,CAChB,CAAC;AAEV"}
|
1
|
+
{"version":3,"names":["_classnames","data","_interopRequireDefault","require","_designUi","_graph","_componentUiComponentCompare","_react","_interopRequireWildcard","_reactFlowRenderer","_dependenciesCompareModule","_dependencyCompareNode","_diffGraph","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","id","createElement","Handle","type","position","isConnectable","DependencyCompareNode","node","NodeTypes","ComponentNode","DependenciesCompare","_componentCompare$bas","_componentCompare$com","graphRef","useRef","componentCompare","useComponentCompare","baseId","base","model","compareId","compare","filter","setFilter","useState","isFiltered","loading","baseLoading","graph","baseGraph","useGraphQuery","toString","compareLoading","compareGraph","diffGraph","undefined","elements","calcElements","rootNode","useEffect","current","_graphRef$current","fitView","handleLoad","useCallback","instance","nodes","length","_graphRef$current2","padding","setTimeout","_graphRef$current3","_graphRef$current4","onCheckFilter","_isFiltered","Fragment","className","classNames","styles","page","graphPageStyles","loader","RoundLoader","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","maxZoom","minZoom","dependenciesGraphStyles","nodeTypes","onLoad","Background","Controls","controls","MiniMap","nodeColor","calcMinimapColors","minimap","GraphFilters","filters","disable","onChangeFilter"],"sources":["dependencies-compare.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { RoundLoader } from '@teambit/design.ui.round-loader';\nimport {\n calcElements,\n calcMinimapColors,\n dependenciesGraphStyles,\n GraphFilter,\n GraphFilters,\n graphPageStyles,\n useGraphQuery,\n} from '@teambit/graph';\nimport { useComponentCompare } from '@teambit/component.ui.component-compare.context';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport ReactFlow, {\n Background,\n Controls,\n Handle,\n MiniMap,\n NodeProps,\n NodeTypesType,\n OnLoadParams,\n Position,\n ReactFlowProvider,\n} from 'react-flow-renderer';\nimport styles from './dependencies-compare.module.scss';\nimport { DependencyCompareNode } from './dependency-compare-node';\nimport { diffGraph } from './diff-graph';\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 <DependencyCompareNode node={data.node} type={data.type} />\n </div>\n );\n}\n\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport function DependenciesCompare() {\n const graphRef = useRef<OnLoadParams>();\n const componentCompare = useComponentCompare();\n\n const baseId = componentCompare?.base?.model.id;\n const compareId = componentCompare?.compare?.model.id;\n\n const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');\n const isFiltered = filter === 'runtimeOnly';\n const { loading: baseLoading, graph: baseGraph } = useGraphQuery(baseId && [baseId.toString()], filter);\n const { loading: compareLoading, graph: compareGraph } = useGraphQuery(compareId && [compareId.toString()], filter);\n const loading = baseLoading || compareLoading;\n const graph = diffGraph(baseGraph, compareGraph, baseId) ?? undefined;\n const elements = calcElements(graph, { rootNode: baseId });\n\n useEffect(() => () => (graphRef.current = undefined), []);\n\n useEffect(() => {\n graphRef.current?.fitView();\n }, [elements]);\n\n const handleLoad = useCallback(\n (instance: OnLoadParams) => {\n graphRef.current = instance;\n if ((graph?.nodes.length ?? 0) <= 3) {\n graphRef.current?.fitView({\n padding: 2,\n });\n } else {\n instance.fitView();\n }\n },\n [graph?.nodes.length]\n );\n\n useEffect(() => {\n setTimeout(() => {\n if ((graph?.nodes.length ?? 0) <= 3)\n return graphRef.current?.fitView({\n padding: 2,\n });\n return graphRef.current?.fitView();\n }, 0);\n }, [compareId?.toString(), baseId?.toString()]);\n\n const onCheckFilter = (_isFiltered: boolean) => {\n setFilter(_isFiltered ? 'runtimeOnly' : undefined);\n };\n\n if (!loading && (!baseGraph || !compareGraph)) {\n return <></>;\n }\n\n return (\n <div className={classNames([styles.page, graphPageStyles.graph])}>\n {loading && (\n <div className={styles.loader}>\n <RoundLoader />\n </div>\n )}\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 className={dependenciesGraphStyles.graph}\n elements={elements}\n nodeTypes={NodeTypes}\n onLoad={handleLoad}\n >\n <Background />\n <Controls className={dependenciesGraphStyles.controls} />\n <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />\n <GraphFilters\n className={graphPageStyles.filters}\n disable={loading}\n isFiltered={isFiltered}\n onChangeFilter={onCheckFilter}\n />\n </ReactFlow>\n </ReactFlowProvider>\n </div>\n );\n}\n"],"mappings":"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"}
|
@@ -112,16 +112,27 @@ function DependenciesGraph(_ref) {
|
|
112
112
|
componentWidgets
|
113
113
|
}), [componentWidgets]);
|
114
114
|
const handleLoad = (0, _react().useCallback)(instance => {
|
115
|
-
|
116
|
-
|
115
|
+
if (((graph === null || graph === void 0 ? void 0 : graph.nodes.length) ?? 0) <= 3) {
|
116
|
+
var _graphRef$current;
|
117
|
+
(_graphRef$current = graphRef.current) === null || _graphRef$current === void 0 || _graphRef$current.fitView({
|
118
|
+
padding: 2
|
119
|
+
});
|
120
|
+
} else {
|
121
|
+
instance.fitView();
|
122
|
+
}
|
117
123
|
onLoad === null || onLoad === void 0 || onLoad(instance);
|
118
124
|
}, [onLoad]);
|
119
125
|
|
120
126
|
// clear ref on unmount
|
121
127
|
(0, _react().useEffect)(() => () => graphRef.current = undefined, []);
|
122
128
|
(0, _react().useEffect)(() => {
|
123
|
-
|
124
|
-
|
129
|
+
setTimeout(() => {
|
130
|
+
var _graphRef$current2, _graphRef$current3;
|
131
|
+
if (graph.nodes.length <= 3) return (_graphRef$current2 = graphRef.current) === null || _graphRef$current2 === void 0 ? void 0 : _graphRef$current2.fitView({
|
132
|
+
padding: 2
|
133
|
+
});
|
134
|
+
return (_graphRef$current3 = graphRef.current) === null || _graphRef$current3 === void 0 ? void 0 : _graphRef$current3.fitView();
|
135
|
+
}, 0);
|
125
136
|
}, [graph]);
|
126
137
|
return /*#__PURE__*/_react().default.createElement(_graphContext().ComponentGraphContext.Provider, {
|
127
138
|
value: context
|
@@ -132,7 +143,8 @@ function DependenciesGraph(_ref) {
|
|
132
143
|
nodesConnectable: false,
|
133
144
|
zoomOnDoubleClick: false,
|
134
145
|
elementsSelectable: false,
|
135
|
-
maxZoom:
|
146
|
+
maxZoom: 100,
|
147
|
+
minZoom: 0
|
136
148
|
}, rest, {
|
137
149
|
className: (0, _classnames().default)(_dependenciesGraphModule().default.graph, className),
|
138
150
|
elements: elements,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactFlowRenderer","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","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","current","fitView","useEffect","undefined","_graphRef$current","ComponentGraphContext","Provider","value","ReactFlowProvider","draggable","nodesDraggable","selectNodesOnDrag","nodesConnectable","zoomOnDoubleClick","elementsSelectable","maxZoom","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 graphRef.current = instance;\n instance.fitView();\n onLoad?.(instance);\n },\n [onLoad]\n );\n\n // clear ref on unmount\n useEffect(() => () => (graphRef.current = undefined), []);\n\n useEffect(() => {\n graphRef.current?.fitView();\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={1}\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":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,uBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAI,sBAAA,CAAAF,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,mBAAA;EAAA,MAAAL,IAAA,GAAAC,uBAAA,CAAAC,OAAA;EAAAG,kBAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAeA,SAAAM,eAAA;EAAA,MAAAN,IAAA,GAAAE,OAAA;EAAAI,cAAA,YAAAA,CAAA;IAAA,OAAAN,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAO,cAAA;EAAA,MAAAP,IAAA,GAAAE,OAAA;EAAAK,aAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAQ,SAAA;EAAA,MAAAR,IAAA,GAAAE,OAAA;EAAAM,QAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAS,cAAA;EAAA,MAAAT,IAAA,GAAAE,OAAA;EAAAO,aAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAU,yBAAA;EAAA,MAAAV,IAAA,GAAAI,sBAAA,CAAAF,OAAA;EAAAQ,wBAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAsD,MAAAW,SAAA;AAAA,SAAAP,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAf,wBAAAW,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,yBAAAF,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,GAAAQ,6BAAA,CAAAJ,MAAA,EAAAG,QAAA,OAAAhB,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAAqB,qBAAA,QAAAC,gBAAA,GAAAtB,MAAA,CAAAqB,qBAAA,CAAAL,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAS,gBAAA,CAAAP,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAmB,gBAAA,CAAAT,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAoB,oBAAA,CAAAlB,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAAQ,8BAAAJ,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,WAAAa,UAAA,GAAAzB,MAAA,CAAA0B,IAAA,CAAAV,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAY,UAAA,CAAAV,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAsB,UAAA,CAAAZ,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AAEtD,SAASe,sBAAsBA,CAACC,KAAgB,EAAE;EAChD,MAAM;IAAEC,cAAc,GAAGC,6BAAQ,CAACC,GAAG;IAAEC,cAAc,GAAGF,6BAAQ,CAACG,MAAM;IAAE1D,IAAI;IAAE2D;EAAG,CAAC,GAAGN,KAAK;EAE3F,oBACEtD,MAAA,GAAAe,OAAA,CAAA8C,aAAA;IAAKhC,GAAG,EAAE+B;EAAG,gBACX5D,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAwD,MAAM;IAACC,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAEN,cAAe;IAACO,aAAa,EAAE;EAAM,CAAE,CAAC,eACxEjE,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAwD,MAAM;IAACC,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAET,cAAe;IAACU,aAAa,EAAE;EAAM,CAAE,CAAC,eACxEjE,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACtD,cAAA,GAAA2D,aAAa;IAACC,IAAI,EAAElE,IAAI,CAACkE,IAAK;IAACJ,IAAI,EAAE9D,IAAI,CAAC8D;EAAK,CAAE,CAC/C,CAAC;AAEV;;AAEA;AACA,MAAMK,SAAwB,GAAG;EAAEF,aAAa,EAAEb;AAAuB,CAAC;AASnE,SAASgB,iBAAiBA,CAAAC,IAAA,EAQN;EAAA,IARO;MAChCC,KAAK;MACLC,QAAQ;MACRC,gBAAgB;MAChBC,SAAS;MACTC,MAAM;MACNC;IAEsB,CAAC,GAAAN,IAAA;IADpBO,IAAI,GAAAjC,wBAAA,CAAA0B,IAAA,EAAA1D,SAAA;EAEP,MAAMkE,QAAQ,GAAG,IAAAC,eAAM,EAAe,CAAC;EACvC,MAAMC,QAAQ,GAAG,IAAAC,4BAAY,EAACV,KAAK,EAAE;IAAEC;EAAS,CAAC,CAAC;EAClD,MAAMU,OAAO,GAAG,IAAAC,gBAAO,EAAC,OAAO;IAAEV;EAAiB,CAAC,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEzE,MAAMW,UAAU,GAAG,IAAAC,oBAAW,EAC3BC,QAAsB,IAAK;IAC1BR,QAAQ,CAACS,OAAO,GAAGD,QAAQ;IAC3BA,QAAQ,CAACE,OAAO,CAAC,CAAC;IAClBb,MAAM,aAANA,MAAM,eAANA,MAAM,CAAGW,QAAQ,CAAC;EACpB,CAAC,EACD,CAACX,MAAM,CACT,CAAC;;EAED;EACA,IAAAc,kBAAS,EAAC,MAAM,MAAOX,QAAQ,CAACS,OAAO,GAAGG,SAAU,EAAE,EAAE,CAAC;EAEzD,IAAAD,kBAAS,EAAC,MAAM;IAAA,IAAAE,iBAAA;IACd,CAAAA,iBAAA,GAAAb,QAAQ,CAACS,OAAO,cAAAI,iBAAA,eAAhBA,iBAAA,CAAkBH,OAAO,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACjB,KAAK,CAAC,CAAC;EAEX,oBACEvE,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACnD,aAAA,GAAAkF,qBAAqB,CAACC,QAAQ;IAACC,KAAK,EAAEZ;EAAQ,gBAE7ClF,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAyF,iBAAiB,qBAChB/F,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAS,OAAS,EAAAoB,QAAA;IACR6D,SAAS,EAAE,KAAM;IACjBC,cAAc,EAAE,IAAK;IACrBC,iBAAiB,EAAE,KAAM;IACzBC,gBAAgB,EAAE,KAAM;IACxBC,iBAAiB,EAAE,KAAM;IACzBC,kBAAkB,EAAE,KAAM;IAC1BC,OAAO,EAAE;EAAE,GACPzB,IAAI;IACRH,SAAS,EAAE,IAAA6B,qBAAU,EAACC,kCAAM,CAACjC,KAAK,EAAEG,SAAS,CAAE;IAC/CM,QAAQ,EAAEA,QAAS;IACnByB,SAAS,EAAErC,SAAU;IACrBO,MAAM,EAAES;EAAW,iBAEnBpF,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAoG,UAAU,MAAE,CAAC,eACd1G,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAqG,QAAQ;IAACjC,SAAS,EAAE8B,kCAAM,CAACI;EAAS,CAAE,CAAC,eACxC5G,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAuG,OAAO;IAACC,SAAS,EAAEC,4BAAkB;IAACrC,SAAS,EAAE8B,kCAAM,CAACQ;EAAQ,CAAE,CAAC,EACnEpC,QACQ,CACM,CACW,CAAC;AAErC"}
|
1
|
+
{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactFlowRenderer","_componentNode","_calcElements","_minimap","_graphContext","_dependenciesGraphModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","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","_graphRef$current","current","fitView","padding","useEffect","undefined","setTimeout","_graphRef$current2","_graphRef$current3","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 graphRef.current?.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":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,uBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAI,sBAAA,CAAAF,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,mBAAA;EAAA,MAAAL,IAAA,GAAAC,uBAAA,CAAAC,OAAA;EAAAG,kBAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAeA,SAAAM,eAAA;EAAA,MAAAN,IAAA,GAAAE,OAAA;EAAAI,cAAA,YAAAA,CAAA;IAAA,OAAAN,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAO,cAAA;EAAA,MAAAP,IAAA,GAAAE,OAAA;EAAAK,aAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAQ,SAAA;EAAA,MAAAR,IAAA,GAAAE,OAAA;EAAAM,QAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAS,cAAA;EAAA,MAAAT,IAAA,GAAAE,OAAA;EAAAO,aAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAU,yBAAA;EAAA,MAAAV,IAAA,GAAAI,sBAAA,CAAAF,OAAA;EAAAQ,wBAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAsD,MAAAW,SAAA;AAAA,SAAAP,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAf,wBAAAW,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,yBAAAF,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,GAAAQ,6BAAA,CAAAJ,MAAA,EAAAG,QAAA,OAAAhB,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAAqB,qBAAA,QAAAC,gBAAA,GAAAtB,MAAA,CAAAqB,qBAAA,CAAAL,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAS,gBAAA,CAAAP,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAmB,gBAAA,CAAAT,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAoB,oBAAA,CAAAlB,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAAQ,8BAAAJ,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,WAAAa,UAAA,GAAAzB,MAAA,CAAA0B,IAAA,CAAAV,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAY,UAAA,CAAAV,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAsB,UAAA,CAAAZ,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AAEtD,SAASe,sBAAsBA,CAACC,KAAgB,EAAE;EAChD,MAAM;IAAEC,cAAc,GAAGC,6BAAQ,CAACC,GAAG;IAAEC,cAAc,GAAGF,6BAAQ,CAACG,MAAM;IAAE1D,IAAI;IAAE2D;EAAG,CAAC,GAAGN,KAAK;EAE3F,oBACEtD,MAAA,GAAAe,OAAA,CAAA8C,aAAA;IAAKhC,GAAG,EAAE+B;EAAG,gBACX5D,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAwD,MAAM;IAACC,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAEN,cAAe;IAACO,aAAa,EAAE;EAAM,CAAE,CAAC,eACxEjE,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAwD,MAAM;IAACC,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAET,cAAe;IAACU,aAAa,EAAE;EAAM,CAAE,CAAC,eACxEjE,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACtD,cAAA,GAAA2D,aAAa;IAACC,IAAI,EAAElE,IAAI,CAACkE,IAAK;IAACJ,IAAI,EAAE9D,IAAI,CAAC8D;EAAK,CAAE,CAC/C,CAAC;AAEV;;AAEA;AACA,MAAMK,SAAwB,GAAG;EAAEF,aAAa,EAAEb;AAAuB,CAAC;AASnE,SAASgB,iBAAiBA,CAAAC,IAAA,EAQN;EAAA,IARO;MAChCC,KAAK;MACLC,QAAQ;MACRC,gBAAgB;MAChBC,SAAS;MACTC,MAAM;MACNC;IAEsB,CAAC,GAAAN,IAAA;IADpBO,IAAI,GAAAjC,wBAAA,CAAA0B,IAAA,EAAA1D,SAAA;EAEP,MAAMkE,QAAQ,GAAG,IAAAC,eAAM,EAAe,CAAC;EACvC,MAAMC,QAAQ,GAAG,IAAAC,4BAAY,EAACV,KAAK,EAAE;IAAEC;EAAS,CAAC,CAAC;EAClD,MAAMU,OAAO,GAAG,IAAAC,gBAAO,EAAC,OAAO;IAAEV;EAAiB,CAAC,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEzE,MAAMW,UAAU,GAAG,IAAAC,oBAAW,EAC3BC,QAAsB,IAAK;IAC1B,IAAI,CAAC,CAAAf,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEgB,KAAK,CAAC9C,MAAM,KAAI,CAAC,KAAK,CAAC,EAAE;MAAA,IAAA+C,iBAAA;MACnC,CAAAA,iBAAA,GAAAV,QAAQ,CAACW,OAAO,cAAAD,iBAAA,eAAhBA,iBAAA,CAAkBE,OAAO,CAAC;QACxBC,OAAO,EAAE;MACX,CAAC,CAAC;IACJ,CAAC,MAAM;MACLL,QAAQ,CAACI,OAAO,CAAC,CAAC;IACpB;IACAf,MAAM,aAANA,MAAM,eAANA,MAAM,CAAGW,QAAQ,CAAC;EACpB,CAAC,EACD,CAACX,MAAM,CACT,CAAC;;EAED;EACA,IAAAiB,kBAAS,EAAC,MAAM,MAAOd,QAAQ,CAACW,OAAO,GAAGI,SAAU,EAAE,EAAE,CAAC;EAEzD,IAAAD,kBAAS,EAAC,MAAM;IACdE,UAAU,CAAC,MAAM;MAAA,IAAAC,kBAAA,EAAAC,kBAAA;MACf,IAAIzB,KAAK,CAACgB,KAAK,CAAC9C,MAAM,IAAI,CAAC,EACzB,QAAAsD,kBAAA,GAAOjB,QAAQ,CAACW,OAAO,cAAAM,kBAAA,uBAAhBA,kBAAA,CAAkBL,OAAO,CAAC;QAC/BC,OAAO,EAAE;MACX,CAAC,CAAC;MACJ,QAAAK,kBAAA,GAAOlB,QAAQ,CAACW,OAAO,cAAAO,kBAAA,uBAAhBA,kBAAA,CAAkBN,OAAO,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,CAAC;EACP,CAAC,EAAE,CAACnB,KAAK,CAAC,CAAC;EAEX,oBACEvE,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACnD,aAAA,GAAAuF,qBAAqB,CAACC,QAAQ;IAACC,KAAK,EAAEjB;EAAQ,gBAE7ClF,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAA8F,iBAAiB,qBAChBpG,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAAS,OAAS,EAAAoB,QAAA;IACRkE,SAAS,EAAE,KAAM;IACjBC,cAAc,EAAE,IAAK;IACrBC,iBAAiB,EAAE,KAAM;IACzBC,gBAAgB,EAAE,KAAM;IACxBC,iBAAiB,EAAE,KAAM;IACzBC,kBAAkB,EAAE,KAAM;IAC1BC,OAAO,EAAE,GAAI;IACbC,OAAO,EAAE;EAAE,GACP/B,IAAI;IACRH,SAAS,EAAE,IAAAmC,qBAAU,EAACC,kCAAM,CAACvC,KAAK,EAAEG,SAAS,CAAE;IAC/CM,QAAQ,EAAEA,QAAS;IACnB+B,SAAS,EAAE3C,SAAU;IACrBO,MAAM,EAAES;EAAW,iBAEnBpF,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAA0G,UAAU,MAAE,CAAC,eACdhH,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAA2G,QAAQ;IAACvC,SAAS,EAAEoC,kCAAM,CAACI;EAAS,CAAE,CAAC,eACxClH,MAAA,GAAAe,OAAA,CAAA8C,aAAA,CAACvD,kBAAA,GAAA6G,OAAO;IAACC,SAAS,EAAEC,4BAAkB;IAAC3C,SAAS,EAAEoC,kCAAM,CAACQ;EAAQ,CAAE,CAAC,EACnE1C,QACQ,CACM,CACW,CAAC;AAErC"}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { CardProps } from '@teambit/base-ui.surfaces.card';
|
3
|
-
declare type
|
3
|
+
declare type GraphFiltersType = {
|
4
4
|
isFiltered: boolean;
|
5
5
|
onChangeFilter: (isFiltered: boolean) => void;
|
6
6
|
disable?: boolean;
|
7
7
|
} & CardProps;
|
8
|
-
export declare function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }:
|
8
|
+
export declare function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }: GraphFiltersType): JSX.Element;
|
9
9
|
export {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_react","data","_interopRequireDefault","require","_baseUiSurfaces","_evangelistInputCheckbox","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","GraphFilters","_ref","onChangeFilter","isFiltered","disable","rest","createElement","Card","CheckboxLabel","checked","disabled","onInputChanged","e"],"sources":["graph-filters.tsx"],"sourcesContent":["import React from 'react';\nimport { Card, CardProps } from '@teambit/base-ui.surfaces.card';\nimport { CheckboxLabel } from '@teambit/evangelist.input.checkbox.label';\n\ntype
|
1
|
+
{"version":3,"names":["_react","data","_interopRequireDefault","require","_baseUiSurfaces","_evangelistInputCheckbox","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","GraphFilters","_ref","onChangeFilter","isFiltered","disable","rest","createElement","Card","CheckboxLabel","checked","disabled","onInputChanged","e"],"sources":["graph-filters.tsx"],"sourcesContent":["import React from 'react';\nimport { Card, CardProps } from '@teambit/base-ui.surfaces.card';\nimport { CheckboxLabel } from '@teambit/evangelist.input.checkbox.label';\n\ntype GraphFiltersType = {\n isFiltered: boolean;\n onChangeFilter: (isFiltered: boolean) => void;\n disable?: boolean;\n} & CardProps;\n\nexport function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }: GraphFiltersType) {\n return (\n <Card {...rest}>\n <div>\n {/* show non-runtime === !isFiltered */}\n <CheckboxLabel\n checked={!isFiltered}\n disabled={disable}\n onInputChanged={(e) => onChangeFilter(!e.target.checked)}\n >\n {' '}\n show non-runtime\n </CheckboxLabel>\n </div>\n </Card>\n );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,gBAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,eAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,yBAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,wBAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyE,MAAAK,SAAA;AAAA,SAAAJ,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,GAAAC,6BAAA,CAAAH,MAAA,EAAAC,QAAA,OAAAG,GAAA,EAAAC,CAAA,MAAAC,MAAA,CAAAC,qBAAA,QAAAC,gBAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAP,MAAA,QAAAK,CAAA,MAAAA,CAAA,GAAAG,gBAAA,CAAAC,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAI,gBAAA,CAAAH,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,uBAAAE,MAAA,CAAAK,SAAA,CAAAC,oBAAA,CAAAC,IAAA,CAAAb,MAAA,EAAAI,GAAA,aAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,cAAAF,MAAA;AAAA,SAAAC,8BAAAH,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,WAAAY,UAAA,GAAAR,MAAA,CAAAS,IAAA,CAAAf,MAAA,OAAAI,GAAA,EAAAC,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAS,UAAA,CAAAL,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAU,UAAA,CAAAT,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,kBAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,YAAAF,MAAA;AAQlE,SAASc,YAAYA,CAAAC,IAAA,EAAqE;EAAA,IAApE;MAAEC,cAAc;MAAEC,UAAU;MAAEC;IAAmC,CAAC,GAAAH,IAAA;IAAxBI,IAAI,GAAAtB,wBAAA,CAAAkB,IAAA,EAAAtB,SAAA;EACzE,oBACEN,MAAA,GAAAS,OAAA,CAAAwB,aAAA,CAAC7B,eAAA,GAAA8B,IAAI,EAAKF,IAAI,eACZhC,MAAA,GAAAS,OAAA,CAAAwB,aAAA,2BAEEjC,MAAA,GAAAS,OAAA,CAAAwB,aAAA,CAAC5B,wBAAA,GAAA8B,aAAa;IACZC,OAAO,EAAE,CAACN,UAAW;IACrBO,QAAQ,EAAEN,OAAQ;IAClBO,cAAc,EAAGC,CAAC,IAAKV,cAAc,CAAC,CAACU,CAAC,CAAC1B,MAAM,CAACuB,OAAO;EAAE,GAExD,GAAG,EAAC,kBAEQ,CACZ,CACD,CAAC;AAEX"}
|
package/package.json
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"name": "@teambit/graph",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.3",
|
4
4
|
"homepage": "https://bit.cloud/teambit/component/graph",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"componentId": {
|
7
7
|
"scope": "teambit.component",
|
8
8
|
"name": "graph",
|
9
|
-
"version": "1.0.
|
9
|
+
"version": "1.0.3"
|
10
10
|
},
|
11
11
|
"dependencies": {
|
12
12
|
"lodash": "4.17.21",
|
@@ -31,22 +31,22 @@
|
|
31
31
|
"@teambit/design.ui.pages.not-found": "0.0.366",
|
32
32
|
"@teambit/design.ui.pages.server-error": "0.0.366",
|
33
33
|
"@teambit/documenter.ui.heading": "4.1.1",
|
34
|
-
"@teambit/component": "1.0.
|
35
|
-
"@teambit/cli": "0.0.
|
36
|
-
"@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.
|
37
|
-
"@teambit/component.ui.component-compare.models.component-compare-props": "0.0.
|
38
|
-
"@teambit/graphql": "1.0.
|
39
|
-
"@teambit/logger": "0.0.
|
40
|
-
"@teambit/component-compare": "1.0.
|
41
|
-
"@teambit/ui": "1.0.
|
34
|
+
"@teambit/component": "1.0.3",
|
35
|
+
"@teambit/cli": "0.0.785",
|
36
|
+
"@teambit/component.ui.component-compare.models.component-compare-change-type": "0.0.7",
|
37
|
+
"@teambit/component.ui.component-compare.models.component-compare-props": "0.0.94",
|
38
|
+
"@teambit/graphql": "1.0.3",
|
39
|
+
"@teambit/logger": "0.0.878",
|
40
|
+
"@teambit/component-compare": "1.0.3",
|
41
|
+
"@teambit/ui": "1.0.3",
|
42
42
|
"@teambit/component.modules.component-url": "0.0.153",
|
43
|
-
"@teambit/component.ui.deprecation-icon": "0.0.
|
44
|
-
"@teambit/envs.ui.env-icon": "0.0.
|
45
|
-
"@teambit/component.ui.component-compare.context": "0.0.
|
46
|
-
"@teambit/component.ui.component-compare.status-resolver": "0.0.
|
47
|
-
"@teambit/ui-foundation.ui.
|
48
|
-
"@teambit/ui-foundation.ui.
|
49
|
-
"@teambit/ui-foundation.ui.
|
43
|
+
"@teambit/component.ui.deprecation-icon": "0.0.509",
|
44
|
+
"@teambit/envs.ui.env-icon": "0.0.500",
|
45
|
+
"@teambit/component.ui.component-compare.context": "0.0.109",
|
46
|
+
"@teambit/component.ui.component-compare.status-resolver": "0.0.9",
|
47
|
+
"@teambit/ui-foundation.ui.full-loader": "0.0.500",
|
48
|
+
"@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.505",
|
49
|
+
"@teambit/ui-foundation.ui.react-router.use-query": "0.0.501"
|
50
50
|
},
|
51
51
|
"devDependencies": {
|
52
52
|
"@types/lodash": "4.14.165",
|
@@ -63,7 +63,7 @@
|
|
63
63
|
},
|
64
64
|
"peerDependencies": {
|
65
65
|
"@apollo/client": "^3.6.0",
|
66
|
-
"@teambit/legacy": "1.0.
|
66
|
+
"@teambit/legacy": "1.0.567",
|
67
67
|
"react": "^16.8.0 || ^17.0.0",
|
68
68
|
"react-dom": "^16.8.0 || ^17.0.0"
|
69
69
|
},
|
@@ -15,12 +15,12 @@ import { ComponentGraphContext } from '../dependencies-graph/';
|
|
15
15
|
import styles from './component-node.module.scss';
|
16
16
|
import variants from './variants.module.scss';
|
17
17
|
|
18
|
-
export interface
|
18
|
+
export interface IComponentNode extends CardProps {
|
19
19
|
node: NodeModel;
|
20
20
|
type: string;
|
21
21
|
}
|
22
22
|
|
23
|
-
export function ComponentNode({ node, type = 'defaultNode', ...rest }:
|
23
|
+
export function ComponentNode({ node, type = 'defaultNode', ...rest }: IComponentNode) {
|
24
24
|
const graphContext = useContext(ComponentGraphContext);
|
25
25
|
const { component } = node;
|
26
26
|
const { id } = component;
|
@@ -10,7 +10,7 @@ import {
|
|
10
10
|
useGraphQuery,
|
11
11
|
} from '@teambit/graph';
|
12
12
|
import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
|
13
|
-
import React, { useEffect, useRef, useState } from 'react';
|
13
|
+
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
14
14
|
import ReactFlow, {
|
15
15
|
Background,
|
16
16
|
Controls,
|
@@ -55,14 +55,35 @@ export function DependenciesCompare() {
|
|
55
55
|
const graph = diffGraph(baseGraph, compareGraph, baseId) ?? undefined;
|
56
56
|
const elements = calcElements(graph, { rootNode: baseId });
|
57
57
|
|
58
|
+
useEffect(() => () => (graphRef.current = undefined), []);
|
59
|
+
|
58
60
|
useEffect(() => {
|
59
61
|
graphRef.current?.fitView();
|
60
62
|
}, [elements]);
|
61
63
|
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
64
|
+
const handleLoad = useCallback(
|
65
|
+
(instance: OnLoadParams) => {
|
66
|
+
graphRef.current = instance;
|
67
|
+
if ((graph?.nodes.length ?? 0) <= 3) {
|
68
|
+
graphRef.current?.fitView({
|
69
|
+
padding: 2,
|
70
|
+
});
|
71
|
+
} else {
|
72
|
+
instance.fitView();
|
73
|
+
}
|
74
|
+
},
|
75
|
+
[graph?.nodes.length]
|
76
|
+
);
|
77
|
+
|
78
|
+
useEffect(() => {
|
79
|
+
setTimeout(() => {
|
80
|
+
if ((graph?.nodes.length ?? 0) <= 3)
|
81
|
+
return graphRef.current?.fitView({
|
82
|
+
padding: 2,
|
83
|
+
});
|
84
|
+
return graphRef.current?.fitView();
|
85
|
+
}, 0);
|
86
|
+
}, [compareId?.toString(), baseId?.toString()]);
|
66
87
|
|
67
88
|
const onCheckFilter = (_isFiltered: boolean) => {
|
68
89
|
setFilter(_isFiltered ? 'runtimeOnly' : undefined);
|
@@ -87,7 +108,8 @@ export function DependenciesCompare() {
|
|
87
108
|
nodesConnectable={false}
|
88
109
|
zoomOnDoubleClick={false}
|
89
110
|
elementsSelectable={false}
|
90
|
-
maxZoom={
|
111
|
+
maxZoom={100}
|
112
|
+
minZoom={0}
|
91
113
|
className={dependenciesGraphStyles.graph}
|
92
114
|
elements={elements}
|
93
115
|
nodeTypes={NodeTypes}
|
@@ -60,8 +60,13 @@ export function DependenciesGraph({
|
|
60
60
|
|
61
61
|
const handleLoad = useCallback(
|
62
62
|
(instance: OnLoadParams) => {
|
63
|
-
|
64
|
-
|
63
|
+
if ((graph?.nodes.length ?? 0) <= 3) {
|
64
|
+
graphRef.current?.fitView({
|
65
|
+
padding: 2,
|
66
|
+
});
|
67
|
+
} else {
|
68
|
+
instance.fitView();
|
69
|
+
}
|
65
70
|
onLoad?.(instance);
|
66
71
|
},
|
67
72
|
[onLoad]
|
@@ -71,7 +76,13 @@ export function DependenciesGraph({
|
|
71
76
|
useEffect(() => () => (graphRef.current = undefined), []);
|
72
77
|
|
73
78
|
useEffect(() => {
|
74
|
-
|
79
|
+
setTimeout(() => {
|
80
|
+
if (graph.nodes.length <= 3)
|
81
|
+
return graphRef.current?.fitView({
|
82
|
+
padding: 2,
|
83
|
+
});
|
84
|
+
return graphRef.current?.fitView();
|
85
|
+
}, 0);
|
75
86
|
}, [graph]);
|
76
87
|
|
77
88
|
return (
|
@@ -85,7 +96,8 @@ export function DependenciesGraph({
|
|
85
96
|
nodesConnectable={false}
|
86
97
|
zoomOnDoubleClick={false}
|
87
98
|
elementsSelectable={false}
|
88
|
-
maxZoom={
|
99
|
+
maxZoom={100}
|
100
|
+
minZoom={0}
|
89
101
|
{...rest}
|
90
102
|
className={classnames(styles.graph, className)}
|
91
103
|
elements={elements}
|
@@ -2,13 +2,13 @@ import React from 'react';
|
|
2
2
|
import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
|
3
3
|
import { CheckboxLabel } from '@teambit/evangelist.input.checkbox.label';
|
4
4
|
|
5
|
-
type
|
5
|
+
type GraphFiltersType = {
|
6
6
|
isFiltered: boolean;
|
7
7
|
onChangeFilter: (isFiltered: boolean) => void;
|
8
8
|
disable?: boolean;
|
9
9
|
} & CardProps;
|
10
10
|
|
11
|
-
export function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }:
|
11
|
+
export function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }: GraphFiltersType) {
|
12
12
|
return (
|
13
13
|
<Card {...rest}>
|
14
14
|
<div>
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import * as compositions_0 from '/Users/davidfirst/Library/Caches/Bit/capsules/633786a8db5eb76897544549d9cae6b12f050100/teambit.component_graph@1.0.1/dist/graph.composition.js';
|
2
|
-
import * as overview_0 from '/Users/davidfirst/Library/Caches/Bit/capsules/633786a8db5eb76897544549d9cae6b12f050100/teambit.component_graph@1.0.1/dist/graph.docs.md';
|
3
|
-
|
4
|
-
export const compositions = [compositions_0];
|
5
|
-
export const overview = [overview_0];
|
6
|
-
|
7
|
-
export const compositions_metadata = {"compositions":[{"displayName":"Logo","identifier":"Logo"}]};
|