@teambit/graph 0.0.765 → 0.0.768

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

@@ -135,8 +135,8 @@ function DependenciesCompare() {
 
   const graphRef = (0, _react().useRef)();
   const componentCompare = (0, _componentUi().useComponentCompare)();
-  const baseId = componentCompare === null || componentCompare === void 0 ? void 0 : (_componentCompare$bas = componentCompare.base) === null || _componentCompare$bas === void 0 ? void 0 : _componentCompare$bas.id;
-  const compareId = componentCompare === null || componentCompare === void 0 ? void 0 : (_componentCompare$com = componentCompare.compare) === null || _componentCompare$com === void 0 ? void 0 : _componentCompare$com.id;
+  const baseId = componentCompare === null || componentCompare === void 0 ? void 0 : (_componentCompare$bas = componentCompare.base) === null || _componentCompare$bas === void 0 ? void 0 : _componentCompare$bas.model.id;
+  const compareId = componentCompare === null || componentCompare === void 0 ? void 0 : (_componentCompare$com = componentCompare.compare) === null || _componentCompare$com === void 0 ? void 0 : _componentCompare$com.model.id;
   const [filter, setFilter] = (0, _react().useState)('runtimeOnly');
   const isFiltered = filter === 'runtimeOnly';
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","data","id","node","type","NodeTypes","ComponentNode","DependenciesCompare","graphRef","useRef","componentCompare","useComponentCompare","baseId","base","compareId","compare","filter","setFilter","useState","isFiltered","loading","baseLoading","graph","baseGraph","useGraphQuery","toString","compareLoading","compareGraph","diffGraph","undefined","elements","calcElements","rootNode","useEffect","current","fitView","handleLoad","instance","onCheckFilter","_isFiltered","classNames","styles","page","graphPageStyles","loader","dependenciesGraphStyles","controls","calcMinimapColors","minimap","filters"],"sources":["dependencies-compare.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useComponentCompare } from '@teambit/component.ui.compare';\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 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?.id;\n  const compareId = componentCompare?.compare?.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":"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"}
+{"version":3,"names":["ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","data","id","node","type","NodeTypes","ComponentNode","DependenciesCompare","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","fitView","handleLoad","instance","onCheckFilter","_isFiltered","classNames","styles","page","graphPageStyles","loader","dependenciesGraphStyles","controls","calcMinimapColors","minimap","filters"],"sources":["dependencies-compare.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useComponentCompare } from '@teambit/component.ui.compare';\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 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":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "0.0.765",
+  "version": "0.0.768",
   "homepage": "https://bit.dev/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "0.0.765"
+    "version": "0.0.768"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -24,17 +24,17 @@
     "@teambit/base-ui.text.muted-text": "1.0.1",
     "@teambit/evangelist.input.checkbox.label": "1.0.3",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/component": "0.0.765",
-    "@teambit/graphql": "0.0.765",
-    "@teambit/cli": "0.0.506",
-    "@teambit/component-compare": "0.0.13",
-    "@teambit/ui": "0.0.765",
+    "@teambit/component": "0.0.768",
+    "@teambit/graphql": "0.0.768",
+    "@teambit/cli": "0.0.507",
+    "@teambit/component-compare": "0.0.16",
+    "@teambit/ui": "0.0.768",
     "@teambit/legacy-bit-id": "0.0.399",
     "@teambit/component.modules.component-url": "0.0.124",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/envs.ui.env-icon": "0.0.486",
-    "@teambit/component.ui.compare": "0.0.11",
+    "@teambit/component.ui.compare": "0.0.13",
     "@teambit/design.ui.round-loader": "0.0.346",
     "@teambit/design.ui.pages.not-found": "0.0.355",
     "@teambit/design.ui.pages.server-error": "0.0.355",
@@ -56,7 +56,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.286",
+    "@teambit/legacy": "1.0.287",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -84,7 +84,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.286",
+        "@teambit/legacy": "1.0.287",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1655522887639.js → preview-1655868544247.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.765/dist/graph.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.765/dist/graph.docs.md')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.768/dist/graph.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_graph@0.0.768/dist/graph.docs.md')]

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

@@ -44,8 +44,8 @@ export function DependenciesCompare() {
   const graphRef = useRef<OnLoadParams>();
   const componentCompare = useComponentCompare();
 
-  const baseId = componentCompare?.base?.id;
-  const compareId = componentCompare?.compare?.id;
+  const baseId = componentCompare?.base?.model.id;
+  const compareId = componentCompare?.compare?.model.id;
 
   const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');
   const isFiltered = filter === 'runtimeOnly';