npm - @backstage/core-components - Versions diffs - 0.18.12 → 0.18.13-next.1 - Mend

@backstage/core-components 0.18.12 → 0.18.13-next.1

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.

Files changed (4) hide show

package/CHANGELOG.md +16 -0
package/dist/components/DependencyGraph/DependencyGraphContent.esm.js +152 -79
package/dist/components/DependencyGraph/DependencyGraphContent.esm.js.map +1 -1
package/package.json +12 -12

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,21 @@
 # @backstage/core-components
+## 0.18.13-next.1
+### Patch Changes
+- 96cd953: Fixed the `DependencyGraph` component to avoid a jarring initial render where nodes briefly pile up at overlapping positions before animating into place. The graph content is now hidden until node measurements are complete and the layout has fully settled, then revealed at the correct positions with transitions suppressed for the first frame.
+  Also fixed a `containerRef` recreation chain where every graph dimension change caused the container measurement callback to be recreated and re-triggered, producing unnecessary re-renders during initial layout.
+## 0.18.13-next.0
+### Patch Changes
+- 226817d: chore(deps): bump `js-yaml` from 4.2.0 to 4.3.0
+- Updated dependencies
+  - @backstage/ui@0.17.1-next.0
 ## 0.18.12
 ### Patch Changes

package/dist/components/DependencyGraph/DependencyGraphContent.esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import useMeasure from 'react-use/esm/useMeasure';
 import classNames from 'classnames';
 import { once } from 'lodash';
@@ -85,8 +85,46 @@ function DependencyGraph(props) {
   );
   const [graphNodes, setGraphNodes] = useState([]);
   const [graphEdges, setGraphEdges] = useState([]);
+  const [settled, setSettled] = useState(false);
+  const [transitionsReady, setTransitionsReady] = useState(false);
+  const settledRef = useRef(false);
+  const pendingInitialFlush = useRef(false);
+  const measuredLayoutCount = useRef(0);
+  useEffect(() => {
+    if (settled && !transitionsReady) {
+      const frame = requestAnimationFrame(() => {
+        setTransitionsReady(true);
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+    return void 0;
+  }, [settled, transitionsReady]);
+  useEffect(() => {
+    if (graphNodes.length > 0 && !settledRef.current) {
+      const timeout = setTimeout(() => {
+        if (!settledRef.current) {
+          settledRef.current = true;
+          setSettled(true);
+        }
+      }, 500);
+      return () => clearTimeout(timeout);
+    }
+    return void 0;
+  }, [graphNodes]);
   const maxWidth = Math.max(graphWidth, containerWidth);
   const maxHeight = Math.max(graphHeight, containerHeight);
+  const dimensionsRef = useRef({
+    containerWidth,
+    containerHeight,
+    maxWidth,
+    maxHeight
+  });
+  dimensionsRef.current = {
+    containerWidth,
+    containerHeight,
+    maxWidth,
+    maxHeight
+  };
   const [_measureRef] = useMeasure();
   const measureRef = once(_measureRef);
   const scalableHeight = fit === "grow" && !fullScreenHandle.active ? maxHeight : "100%";
@@ -107,18 +145,19 @@ function DependencyGraph(props) {
       function enableZoom() {
         container.call(
           d3Zoom.zoom().scaleExtent([1, Infinity]).on("zoom", (event) => {
+            const dims2 = dimensionsRef.current;
             event.transform.x = Math.min(
               0,
               Math.max(
                 event.transform.x,
-                maxWidth - maxWidth * event.transform.k
+                dims2.maxWidth - dims2.maxWidth * event.transform.k
               )
             );
             event.transform.y = Math.min(
               0,
               Math.max(
                 event.transform.y,
-                maxHeight - maxHeight * event.transform.k
+                dims2.maxHeight - dims2.maxHeight * event.transform.k
               )
             );
             workspace.attr("transform", event.transform);
@@ -131,14 +170,15 @@ function DependencyGraph(props) {
         container.on("click", () => enableZoom());
       }
       const { width: newContainerWidth, height: newContainerHeight } = root.getBoundingClientRect();
-      if (containerWidth !== newContainerWidth && newContainerWidth <= maxWidth) {
+      const dims = dimensionsRef.current;
+      if (dims.containerWidth !== newContainerWidth && newContainerWidth <= dims.maxWidth) {
         setContainerWidth(newContainerWidth);
       }
-      if (containerHeight !== newContainerHeight && newContainerHeight <= maxHeight) {
+      if (dims.containerHeight !== newContainerHeight && newContainerHeight <= dims.maxHeight) {
         setContainerHeight(newContainerHeight);
       }
     }, 100),
-    [measureRef, containerHeight, containerWidth, maxWidth, maxHeight, zoom]
+    [measureRef, zoom]
   );
   const setNodesAndEdges = useCallback(() => {
     const currentGraphNodes = graph.current.nodes();
@@ -190,6 +230,20 @@ function DependencyGraph(props) {
         setGraphHeight(newHeight);
         setGraphNodes(graph.current.nodes());
         setGraphEdges(graph.current.edges());
+        if (!settledRef.current) {
+          const nodeIds = graph.current.nodes();
+          const hasMeasuredNodes = nodeIds.length > 0 && nodeIds.some((id) => {
+            const n = graph.current.node(id);
+            return n && n.width > 0 && n.height > 0;
+          });
+          if (hasMeasuredNodes) {
+            measuredLayoutCount.current += 1;
+          }
+          if (measuredLayoutCount.current >= 2 || nodeIds.length === 0) {
+            settledRef.current = true;
+            setSettled(true);
+          }
+        }
       },
       250,
       { leading: true }
@@ -228,6 +282,13 @@ function DependencyGraph(props) {
     (id, node) => {
       graph.current.setNode(id, node);
       updateGraph();
+      if (!settledRef.current && !pendingInitialFlush.current) {
+        pendingInitialFlush.current = true;
+        queueMicrotask(() => {
+          pendingInitialFlush.current = false;
+          updateGraph.flush();
+        });
+      }
       return graph.current;
     },
     [updateGraph]
@@ -256,83 +317,95 @@ function DependencyGraph(props) {
             children: fullScreenHandle.active ? /* @__PURE__ */ jsx(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxs(
-          "svg",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            ...svgProps,
-            width: "100%",
-            height: scalableHeight,
-            viewBox: `0 0 ${maxWidth} ${maxHeight}`,
-            id: DEPENDENCY_GRAPH_SVG,
-            children: [
-              /* @__PURE__ */ jsxs("defs", { children: [
-                /* @__PURE__ */ jsx(
-                  "marker",
-                  {
-                    id: ARROW_MARKER_ID,
-                    viewBox: "0 0 24 24",
-                    markerWidth: "14",
-                    markerHeight: "14",
-                    refX: "16",
-                    refY: "12",
-                    orient: "auto",
-                    markerUnits: "strokeWidth",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
+            ref: containerRef,
+            style: {
+              width: "100%",
+              height: "100%",
+              visibility: settled ? "visible" : "hidden"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                ...svgProps,
+                width: "100%",
+                height: scalableHeight,
+                viewBox: `0 0 ${maxWidth} ${maxHeight}`,
+                id: DEPENDENCY_GRAPH_SVG,
+                children: [
+                  /* @__PURE__ */ jsxs("defs", { children: [
+                    /* @__PURE__ */ jsx(
+                      "marker",
                       {
-                        fill: theme.palette.textSubtle,
-                        d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                        id: ARROW_MARKER_ID,
+                        viewBox: "0 0 24 24",
+                        markerWidth: "14",
+                        markerHeight: "14",
+                        refX: "16",
+                        refY: "12",
+                        orient: "auto",
+                        markerUnits: "strokeWidth",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            fill: theme.palette.textSubtle,
+                            d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+                          }
+                        )
                       }
-                    )
-                  }
-                ),
-                defs
-              ] }),
-              /* @__PURE__ */ jsx("g", { id: WORKSPACE_ID, children: /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  width: graphWidth,
-                  height: graphHeight,
-                  y: maxHeight / 2 - graphHeight / 2,
-                  x: maxWidth / 2 - graphWidth / 2,
-                  viewBox: `0 0 ${graphWidth} ${graphHeight}`,
-                  children: [
-                    graphEdges.map((e) => {
-                      const edge = graph.current.edge(e);
-                      if (!edge) return null;
-                      if (renderEdge) return renderEdge({ edge, id: e });
-                      return /* @__PURE__ */ jsx(
-                        Edge,
-                        {
-                          id: e,
-                          setEdge,
-                          render: renderLabel,
-                          edge,
-                          curve,
-                          showArrowHeads
-                        },
-                        `${e.v}-${e.w}`
-                      );
-                    }),
-                    graphNodes.map((id) => {
-                      const node = graph.current.node(id);
-                      if (!node) return null;
-                      return /* @__PURE__ */ jsx(
-                        Node,
-                        {
-                          setNode,
-                          render: renderNode,
-                          node
-                        },
-                        id
-                      );
-                    })
-                  ]
-                }
-              ) })
-            ]
+                    ),
+                    defs
+                  ] }),
+                  !transitionsReady && /* @__PURE__ */ jsx("style", { children: `#${DEPENDENCY_GRAPH_SVG} * { transition: none !important; }` }),
+                  /* @__PURE__ */ jsx("g", { id: WORKSPACE_ID, children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: graphWidth,
+                      height: graphHeight,
+                      y: maxHeight / 2 - graphHeight / 2,
+                      x: maxWidth / 2 - graphWidth / 2,
+                      viewBox: `0 0 ${graphWidth} ${graphHeight}`,
+                      children: [
+                        graphEdges.map((e) => {
+                          const edge = graph.current.edge(e);
+                          if (!edge) return null;
+                          if (renderEdge) return renderEdge({ edge, id: e });
+                          return /* @__PURE__ */ jsx(
+                            Edge,
+                            {
+                              id: e,
+                              setEdge,
+                              render: renderLabel,
+                              edge,
+                              curve,
+                              showArrowHeads
+                            },
+                            `${e.v}-${e.w}`
+                          );
+                        }),
+                        graphNodes.map((id) => {
+                          const node = graph.current.node(id);
+                          if (!node) return null;
+                          return /* @__PURE__ */ jsx(
+                            Node,
+                            {
+                              setNode,
+                              render: renderNode,
+                              node
+                            },
+                            id
+                          );
+                        })
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            )
           }
-        ) })
+        )
       ]
     }
   );

package/dist/components/DependencyGraph/DependencyGraphContent.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DependencyGraphContent.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraphContent.tsx"],"sourcesContent":["/\n Copyright 2020 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport {\n SVGProps,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useMeasure from 'react-use/esm/useMeasure';\nimport classNames from 'classnames';\nimport { once } from 'lodash';\nimport as d3Zoom from 'd3-zoom';\nimport * as d3Selection from 'd3-selection';\nimport useTheme from '@material-ui/core/styles/useTheme';\nimport dagre from '@dagrejs/dagre';\nimport debounce from 'lodash/debounce';\nimport { DependencyGraphTypes as Types } from './types';\nimport { Node } from './Node';\nimport { Edge, GraphEdge } from './Edge';\nimport { ARROW_MARKER_ID } from './constants';\nimport IconButton from '@material-ui/core/IconButton';\nimport FullscreenIcon from '@material-ui/icons/Fullscreen';\nimport FullscreenExitIcon from '@material-ui/icons/FullscreenExit';\nimport { FullScreen, useFullScreenHandle } from 'react-full-screen';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { coreComponentsTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n fullscreenButton: {\n position: 'absolute',\n right: 0,\n },\n root: {\n overflow: 'hidden',\n minHeight: '100%',\n minWidth: '100%',\n },\n fixedHeight: {\n maxHeight: '100%',\n },\n fullscreen: {\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\n/*\n Properties of {@link DependencyGraph}\n \n @public\n * @remarks\n * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels\n /\nexport interface DependencyGraphProps<NodeData, EdgeData>\n extends SVGProps<SVGSVGElement> {\n /\n Edges of graph\n /\n edges: Types.DependencyEdge<EdgeData>[];\n /\n Nodes of Graph\n /\n nodes: Types.DependencyNode<NodeData>[];\n /\n Graph {@link DependencyGraphTypes.(Direction:namespace) \| direction}\n \n @remarks\n \n Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n /\n direction?: Types.Direction;\n /\n Node {@link DependencyGraphTypes.(Alignment:namespace) \| alignment}\n /\n align?: Types.Alignment;\n /\n Margin between nodes on each rank\n \n @remarks\n \n Default: 50\n /\n nodeMargin?: number;\n /\n Margin between edges\n \n @remarks\n \n Default: 10\n /\n edgeMargin?: number;\n /\n Margin between each rank\n \n @remarks\n \n Default: 50\n /\n rankMargin?: number;\n /\n Margin on left and right of whole graph\n \n @remarks\n \n Default: 0\n /\n paddingX?: number;\n /\n Margin on top and bottom of whole graph\n \n @remarks\n \n Default: 0\n /\n paddingY?: number;\n /\n Heuristic used to find set of edges that will make graph acyclic\n /\n acyclicer?: 'greedy';\n /\n {@link DependencyGraphTypes.(Ranker:namespace) \| Algorithm} used to rank nodes\n \n @remarks\n \n Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`\n /\n ranker?: Types.Ranker;\n /\n {@link DependencyGraphTypes.(LabelPosition:namespace) \| Position} of label in relation to edge\n \n @remarks\n \n Default: `DependencyGraphTypes.LabelPosition.RIGHT`\n /\n labelPosition?: Types.LabelPosition;\n /\n How much to move label away from edge\n \n @remarks\n \n Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or\n * `DependencyGraphTypes.LabelPosition.RIGHT`\n /\n labelOffset?: number;\n /\n Minimum number of ranks to keep between connected nodes\n /\n edgeRanks?: number;\n /\n Weight applied to edges in graph\n /\n edgeWeight?: number;\n /\n Custom edge rendering component\n /\n renderEdge?: Types.RenderEdgeFunction<EdgeData>;\n /\n Custom node rendering component\n /\n renderNode?: Types.RenderNodeFunction<NodeData>;\n /\n Custom label rendering component\n /\n renderLabel?: Types.RenderLabelFunction<EdgeData>;\n /\n {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs \| Defs} shared by rendered SVG to be used by\n * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}\n /\n defs?: JSX.Element \| JSX.Element[];\n /\n Controls zoom behavior of graph\n \n @remarks\n \n Default: `enabled`\n /\n zoom?: 'enabled' \| 'disabled' \| 'enable-on-click';\n /\n A factory for curve generators addressing both lines and areas.\n \n @remarks\n \n Default: 'curveMonotoneX'\n /\n curve?: 'curveStepBefore' \| 'curveMonotoneX';\n /\n Controls if the arrow heads should be rendered or not.\n \n Default: false\n /\n showArrowHeads?: boolean;\n /\n Controls if the graph should be contained or grow\n \n @remarks\n \n Default: 'grow'\n /\n fit?: 'grow' \| 'contain';\n /\n Controls if user can toggle fullscreen mode\n \n @remarks\n \n Default: true\n /\n allowFullscreen?: boolean;\n}\n\nconst WORKSPACE_ID = 'workspace';\nconst DEPENDENCY_GRAPH_SVG = 'dependency-graph';\n\n/\n Graph component used to visualize relations between entities\n \n @public\n /\nexport function DependencyGraph<NodeData, EdgeData>(\n props: DependencyGraphProps<NodeData, EdgeData>,\n) {\n const {\n edges,\n nodes,\n renderNode,\n direction = Types.Direction.TOP_BOTTOM,\n align,\n nodeMargin = 50,\n edgeMargin = 10,\n rankMargin = 50,\n paddingX = 0,\n paddingY = 0,\n acyclicer,\n ranker = Types.Ranker.NETWORK_SIMPLEX,\n labelPosition = Types.LabelPosition.RIGHT,\n labelOffset = 10,\n edgeRanks = 1,\n edgeWeight = 1,\n renderEdge,\n renderLabel,\n defs,\n zoom = 'enabled',\n curve = 'curveMonotoneX',\n showArrowHeads = false,\n fit = 'grow',\n allowFullscreen = true,\n ...svgProps\n } = props;\n const theme = useTheme();\n const [containerWidth, setContainerWidth] = useState<number>(100);\n const [containerHeight, setContainerHeight] = useState<number>(100);\n const fullScreenHandle = useFullScreenHandle();\n const styles = useStyles();\n const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n const graph = useRef<dagre.graphlib.Graph<Types.DependencyNode<NodeData>>>(\n new dagre.graphlib.Graph(),\n );\n const [graphWidth, setGraphWidth] = useState<number>(\n graph.current.graph()?.width \|\| 0,\n );\n const [graphHeight, setGraphHeight] = useState<number>(\n graph.current.graph()?.height \|\| 0,\n );\n const [graphNodes, setGraphNodes] = useState<string[]>([]);\n const [graphEdges, setGraphEdges] = useState<dagre.Edge[]>([]);\n\n const maxWidth = Math.max(graphWidth, containerWidth);\n const maxHeight = Math.max(graphHeight, containerHeight);\n\n const [_measureRef] = useMeasure();\n const measureRef = once(_measureRef);\n\n const scalableHeight =\n fit === 'grow' && !fullScreenHandle.active ? maxHeight : '100%';\n\n const containerRef = useMemo(\n () =>\n debounce((root: HTMLDivElement) => {\n if (!root) {\n return;\n }\n measureRef(root);\n\n // Set up zooming + panning\n const node: SVGSVGElement = root.querySelector(\n `svg#${DEPENDENCY_GRAPH_SVG}`,\n ) as SVGSVGElement;\n if (!node) {\n return;\n }\n const container = d3Selection.select<SVGSVGElement, null>(node);\n const workspace = d3Selection.select(node.getElementById(WORKSPACE_ID));\n\n function enableZoom() {\n container.call(\n d3Zoom\n .zoom<SVGSVGElement, null>()\n .scaleExtent([1, Infinity])\n .on('zoom', event => {\n event.transform.x = Math.min(\n 0,\n Math.max(\n event.transform.x,\n maxWidth - maxWidth event.transform.k,\n ),\n );\n event.transform.y = Math.min(\n 0,\n Math.max(\n event.transform.y,\n maxHeight - maxHeight * event.transform.k,\n ),\n );\n workspace.attr('transform', event.transform);\n }),\n );\n }\n\n if (zoom === 'enabled') {\n enableZoom();\n } else if (zoom === 'enable-on-click') {\n container.on('click', () => enableZoom());\n }\n\n const { width: newContainerWidth, height: newContainerHeight } =\n root.getBoundingClientRect();\n if (\n containerWidth !== newContainerWidth &&\n newContainerWidth <= maxWidth\n ) {\n setContainerWidth(newContainerWidth);\n }\n if (\n containerHeight !== newContainerHeight &&\n newContainerHeight <= maxHeight\n ) {\n setContainerHeight(newContainerHeight);\n }\n }, 100),\n [measureRef, containerHeight, containerWidth, maxWidth, maxHeight, zoom],\n );\n\n const setNodesAndEdges = useCallback(() => {\n // Cleaning up lingering nodes and edges\n const currentGraphNodes = graph.current.nodes();\n const currentGraphEdges = graph.current.edges();\n\n currentGraphNodes.forEach(nodeId => {\n const remainingNode = nodes.some(node => node.id === nodeId);\n if (!remainingNode) {\n graph.current.removeNode(nodeId);\n }\n });\n\n currentGraphEdges.forEach(e => {\n const remainingEdge = edges.some(\n edge => edge.from === e.v && edge.to === e.w,\n );\n if (!remainingEdge) {\n graph.current.removeEdge(e.v, e.w);\n }\n });\n\n // Adding/updating nodes and edges\n nodes.forEach(node => {\n const existingNode = graph.current\n .nodes()\n .find(nodeId => node.id === nodeId);\n\n if (existingNode && graph.current.node(existingNode)) {\n const { width, height, x, y } = graph.current.node(existingNode);\n graph.current.setNode(existingNode, { ...node, width, height, x, y });\n } else {\n graph.current.setNode(node.id, { ...node, width: 0, height: 0 });\n }\n });\n\n edges.forEach(e => {\n graph.current.setEdge(e.from, e.to, {\n ...e,\n label: e.label,\n width: 0,\n height: 0,\n labelpos: labelPosition,\n labeloffset: labelOffset,\n weight: edgeWeight,\n minlen: edgeRanks,\n });\n });\n }, [edges, nodes, labelPosition, labelOffset, edgeWeight, edgeRanks]);\n\n const updateGraph = useMemo(\n () =>\n debounce(\n () => {\n dagre.layout(graph.current);\n const { height, width } = graph.current.graph();\n const newHeight = Math.max(0, height \|\| 0);\n const newWidth = Math.max(0, width \|\| 0);\n setGraphWidth(newWidth);\n setGraphHeight(newHeight);\n\n setGraphNodes(graph.current.nodes());\n setGraphEdges(graph.current.edges());\n },\n 250,\n { leading: true },\n ),\n [],\n );\n\n useEffect(() => {\n graph.current.setGraph({\n rankdir: direction,\n align,\n nodesep: nodeMargin,\n edgesep: edgeMargin,\n ranksep: rankMargin,\n marginx: paddingX,\n marginy: paddingY,\n acyclicer,\n ranker,\n });\n\n setNodesAndEdges();\n updateGraph();\n\n return updateGraph.cancel;\n }, [\n acyclicer,\n align,\n direction,\n edgeMargin,\n paddingX,\n paddingY,\n nodeMargin,\n rankMargin,\n ranker,\n setNodesAndEdges,\n updateGraph,\n ]);\n\n const setNode = useCallback(\n (id: string, node: Types.DependencyNode<NodeData>) => {\n graph.current.setNode(id, node);\n updateGraph();\n return graph.current;\n },\n [updateGraph],\n );\n\n const setEdge = useCallback(\n (id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) => {\n graph.current.setEdge(id, edge);\n updateGraph();\n return graph.current;\n },\n [updateGraph],\n );\n\n return (\n <FullScreen\n handle={fullScreenHandle}\n className={classNames(\n fullScreenHandle.active ? styles.fullscreen : styles.root,\n )}\n >\n {allowFullscreen && (\n <Tooltip title={t('dependencyGraph.fullscreenTooltip')}>\n <IconButton\n className={styles.fullscreenButton}\n onClick={\n fullScreenHandle.active\n ? fullScreenHandle.exit\n : fullScreenHandle.enter\n }\n >\n {fullScreenHandle.active ? (\n <FullscreenExitIcon />\n ) : (\n <FullscreenIcon />\n )}\n </IconButton>\n </Tooltip>\n )}\n\n <div ref={containerRef} style={{ width: '100%', height: '100%' }}>\n <svg\n {...svgProps}\n width=\"100%\"\n height={scalableHeight}\n viewBox={`0 0 ${maxWidth} ${maxHeight}`}\n id={DEPENDENCY_GRAPH_SVG}\n >\n <defs>\n <marker\n id={ARROW_MARKER_ID}\n viewBox=\"0 0 24 24\"\n markerWidth=\"14\"\n markerHeight=\"14\"\n refX=\"16\"\n refY=\"12\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path\n fill={theme.palette.textSubtle}\n d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\n />\n </marker>\n {defs}\n </defs>\n <g id={WORKSPACE_ID}>\n <svg\n width={graphWidth}\n height={graphHeight}\n y={maxHeight / 2 - graphHeight / 2}\n x={maxWidth / 2 - graphWidth / 2}\n viewBox={`0 0 ${graphWidth} ${graphHeight}`}\n >\n {graphEdges.map(e => {\n const edge = graph.current.edge(e) as GraphEdge<EdgeData>;\n if (!edge) return null;\n if (renderEdge) return renderEdge({ edge, id: e });\n\n return (\n <Edge\n key={`${e.v}-${e.w}`}\n id={e}\n setEdge={setEdge}\n render={renderLabel}\n edge={edge}\n curve={curve}\n showArrowHeads={showArrowHeads}\n />\n );\n })}\n {graphNodes.map((id: string) => {\n const node = graph.current.node(id);\n if (!node) return null;\n return (\n <Node\n key={id}\n setNode={setNode}\n render={renderNode}\n node={node}\n />\n );\n })}\n </svg>\n </g>\n </svg>\n </div>\n </FullScreen>\n );\n}\n"],"names":["Types"],"mappings":"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"}
1	+ {"version":3,"file":"DependencyGraphContent.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraphContent.tsx"],"sourcesContent":["/\n Copyright 2020 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport {\n SVGProps,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useMeasure from 'react-use/esm/useMeasure';\nimport classNames from 'classnames';\nimport { once } from 'lodash';\nimport as d3Zoom from 'd3-zoom';\nimport * as d3Selection from 'd3-selection';\nimport useTheme from '@material-ui/core/styles/useTheme';\nimport dagre from '@dagrejs/dagre';\nimport debounce from 'lodash/debounce';\nimport { DependencyGraphTypes as Types } from './types';\nimport { Node } from './Node';\nimport { Edge, GraphEdge } from './Edge';\nimport { ARROW_MARKER_ID } from './constants';\nimport IconButton from '@material-ui/core/IconButton';\nimport FullscreenIcon from '@material-ui/icons/Fullscreen';\nimport FullscreenExitIcon from '@material-ui/icons/FullscreenExit';\nimport { FullScreen, useFullScreenHandle } from 'react-full-screen';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { coreComponentsTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n fullscreenButton: {\n position: 'absolute',\n right: 0,\n },\n root: {\n overflow: 'hidden',\n minHeight: '100%',\n minWidth: '100%',\n },\n fixedHeight: {\n maxHeight: '100%',\n },\n fullscreen: {\n backgroundColor: theme.palette.background.paper,\n },\n}));\n\n/*\n Properties of {@link DependencyGraph}\n \n @public\n * @remarks\n * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels\n /\nexport interface DependencyGraphProps<NodeData, EdgeData>\n extends SVGProps<SVGSVGElement> {\n /\n Edges of graph\n /\n edges: Types.DependencyEdge<EdgeData>[];\n /\n Nodes of Graph\n /\n nodes: Types.DependencyNode<NodeData>[];\n /\n Graph {@link DependencyGraphTypes.(Direction:namespace) \| direction}\n \n @remarks\n \n Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n /\n direction?: Types.Direction;\n /\n Node {@link DependencyGraphTypes.(Alignment:namespace) \| alignment}\n /\n align?: Types.Alignment;\n /\n Margin between nodes on each rank\n \n @remarks\n \n Default: 50\n /\n nodeMargin?: number;\n /\n Margin between edges\n \n @remarks\n \n Default: 10\n /\n edgeMargin?: number;\n /\n Margin between each rank\n \n @remarks\n \n Default: 50\n /\n rankMargin?: number;\n /\n Margin on left and right of whole graph\n \n @remarks\n \n Default: 0\n /\n paddingX?: number;\n /\n Margin on top and bottom of whole graph\n \n @remarks\n \n Default: 0\n /\n paddingY?: number;\n /\n Heuristic used to find set of edges that will make graph acyclic\n /\n acyclicer?: 'greedy';\n /\n {@link DependencyGraphTypes.(Ranker:namespace) \| Algorithm} used to rank nodes\n \n @remarks\n \n Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`\n /\n ranker?: Types.Ranker;\n /\n {@link DependencyGraphTypes.(LabelPosition:namespace) \| Position} of label in relation to edge\n \n @remarks\n \n Default: `DependencyGraphTypes.LabelPosition.RIGHT`\n /\n labelPosition?: Types.LabelPosition;\n /\n How much to move label away from edge\n \n @remarks\n \n Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or\n * `DependencyGraphTypes.LabelPosition.RIGHT`\n /\n labelOffset?: number;\n /\n Minimum number of ranks to keep between connected nodes\n /\n edgeRanks?: number;\n /\n Weight applied to edges in graph\n /\n edgeWeight?: number;\n /\n Custom edge rendering component\n /\n renderEdge?: Types.RenderEdgeFunction<EdgeData>;\n /\n Custom node rendering component\n /\n renderNode?: Types.RenderNodeFunction<NodeData>;\n /\n Custom label rendering component\n /\n renderLabel?: Types.RenderLabelFunction<EdgeData>;\n /\n {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs \| Defs} shared by rendered SVG to be used by\n * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}\n /\n defs?: JSX.Element \| JSX.Element[];\n /\n Controls zoom behavior of graph\n \n @remarks\n \n Default: `enabled`\n /\n zoom?: 'enabled' \| 'disabled' \| 'enable-on-click';\n /\n A factory for curve generators addressing both lines and areas.\n \n @remarks\n \n Default: 'curveMonotoneX'\n /\n curve?: 'curveStepBefore' \| 'curveMonotoneX';\n /\n Controls if the arrow heads should be rendered or not.\n \n Default: false\n /\n showArrowHeads?: boolean;\n /\n Controls if the graph should be contained or grow\n \n @remarks\n \n Default: 'grow'\n /\n fit?: 'grow' \| 'contain';\n /\n Controls if user can toggle fullscreen mode\n \n @remarks\n \n Default: true\n /\n allowFullscreen?: boolean;\n}\n\nconst WORKSPACE_ID = 'workspace';\nconst DEPENDENCY_GRAPH_SVG = 'dependency-graph';\n\n/\n Graph component used to visualize relations between entities\n \n @public\n /\nexport function DependencyGraph<NodeData, EdgeData>(\n props: DependencyGraphProps<NodeData, EdgeData>,\n) {\n const {\n edges,\n nodes,\n renderNode,\n direction = Types.Direction.TOP_BOTTOM,\n align,\n nodeMargin = 50,\n edgeMargin = 10,\n rankMargin = 50,\n paddingX = 0,\n paddingY = 0,\n acyclicer,\n ranker = Types.Ranker.NETWORK_SIMPLEX,\n labelPosition = Types.LabelPosition.RIGHT,\n labelOffset = 10,\n edgeRanks = 1,\n edgeWeight = 1,\n renderEdge,\n renderLabel,\n defs,\n zoom = 'enabled',\n curve = 'curveMonotoneX',\n showArrowHeads = false,\n fit = 'grow',\n allowFullscreen = true,\n ...svgProps\n } = props;\n const theme = useTheme();\n const [containerWidth, setContainerWidth] = useState<number>(100);\n const [containerHeight, setContainerHeight] = useState<number>(100);\n const fullScreenHandle = useFullScreenHandle();\n const styles = useStyles();\n const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n const graph = useRef<dagre.graphlib.Graph<Types.DependencyNode<NodeData>>>(\n new dagre.graphlib.Graph(),\n );\n const [graphWidth, setGraphWidth] = useState<number>(\n graph.current.graph()?.width \|\| 0,\n );\n const [graphHeight, setGraphHeight] = useState<number>(\n graph.current.graph()?.height \|\| 0,\n );\n const [graphNodes, setGraphNodes] = useState<string[]>([]);\n const [graphEdges, setGraphEdges] = useState<dagre.Edge[]>([]);\n const [settled, setSettled] = useState(false);\n const [transitionsReady, setTransitionsReady] = useState(false);\n const settledRef = useRef(false);\n const pendingInitialFlush = useRef(false);\n const measuredLayoutCount = useRef(0);\n\n useEffect(() => {\n if (settled && !transitionsReady) {\n const frame = requestAnimationFrame(() => {\n setTransitionsReady(true);\n });\n return () => cancelAnimationFrame(frame);\n }\n return undefined;\n }, [settled, transitionsReady]);\n\n // Fallback: if getBBox() returns zero dimensions (e.g. in jsdom or hidden\n // containers), setNode is never called and the normal settlement path never\n // triggers. This timeout ensures the graph still becomes visible.\n useEffect(() => {\n if (graphNodes.length > 0 && !settledRef.current) {\n const timeout = setTimeout(() => {\n if (!settledRef.current) {\n settledRef.current = true;\n setSettled(true);\n }\n }, 500);\n return () => clearTimeout(timeout);\n }\n return undefined;\n }, [graphNodes]);\n\n const maxWidth = Math.max(graphWidth, containerWidth);\n const maxHeight = Math.max(graphHeight, containerHeight);\n\n const dimensionsRef = useRef({\n containerWidth,\n containerHeight,\n maxWidth,\n maxHeight,\n });\n dimensionsRef.current = {\n containerWidth,\n containerHeight,\n maxWidth,\n maxHeight,\n };\n\n const [_measureRef] = useMeasure();\n const measureRef = once(_measureRef);\n\n const scalableHeight =\n fit === 'grow' && !fullScreenHandle.active ? maxHeight : '100%';\n\n const containerRef = useMemo(\n () =>\n debounce((root: HTMLDivElement) => {\n if (!root) {\n return;\n }\n measureRef(root);\n\n // Set up zooming + panning\n const node: SVGSVGElement = root.querySelector(\n `svg#${DEPENDENCY_GRAPH_SVG}`,\n ) as SVGSVGElement;\n if (!node) {\n return;\n }\n const container = d3Selection.select<SVGSVGElement, null>(node);\n const workspace = d3Selection.select(node.getElementById(WORKSPACE_ID));\n\n function enableZoom() {\n container.call(\n d3Zoom\n .zoom<SVGSVGElement, null>()\n .scaleExtent([1, Infinity])\n .on('zoom', event => {\n const dims = dimensionsRef.current;\n event.transform.x = Math.min(\n 0,\n Math.max(\n event.transform.x,\n dims.maxWidth - dims.maxWidth event.transform.k,\n ),\n );\n event.transform.y = Math.min(\n 0,\n Math.max(\n event.transform.y,\n dims.maxHeight - dims.maxHeight * event.transform.k,\n ),\n );\n workspace.attr('transform', event.transform);\n }),\n );\n }\n\n if (zoom === 'enabled') {\n enableZoom();\n } else if (zoom === 'enable-on-click') {\n container.on('click', () => enableZoom());\n }\n\n const { width: newContainerWidth, height: newContainerHeight } =\n root.getBoundingClientRect();\n const dims = dimensionsRef.current;\n if (\n dims.containerWidth !== newContainerWidth &&\n newContainerWidth <= dims.maxWidth\n ) {\n setContainerWidth(newContainerWidth);\n }\n if (\n dims.containerHeight !== newContainerHeight &&\n newContainerHeight <= dims.maxHeight\n ) {\n setContainerHeight(newContainerHeight);\n }\n }, 100),\n [measureRef, zoom],\n );\n\n const setNodesAndEdges = useCallback(() => {\n // Cleaning up lingering nodes and edges\n const currentGraphNodes = graph.current.nodes();\n const currentGraphEdges = graph.current.edges();\n\n currentGraphNodes.forEach(nodeId => {\n const remainingNode = nodes.some(node => node.id === nodeId);\n if (!remainingNode) {\n graph.current.removeNode(nodeId);\n }\n });\n\n currentGraphEdges.forEach(e => {\n const remainingEdge = edges.some(\n edge => edge.from === e.v && edge.to === e.w,\n );\n if (!remainingEdge) {\n graph.current.removeEdge(e.v, e.w);\n }\n });\n\n // Adding/updating nodes and edges\n nodes.forEach(node => {\n const existingNode = graph.current\n .nodes()\n .find(nodeId => node.id === nodeId);\n\n if (existingNode && graph.current.node(existingNode)) {\n const { width, height, x, y } = graph.current.node(existingNode);\n graph.current.setNode(existingNode, { ...node, width, height, x, y });\n } else {\n graph.current.setNode(node.id, { ...node, width: 0, height: 0 });\n }\n });\n\n edges.forEach(e => {\n graph.current.setEdge(e.from, e.to, {\n ...e,\n label: e.label,\n width: 0,\n height: 0,\n labelpos: labelPosition,\n labeloffset: labelOffset,\n weight: edgeWeight,\n minlen: edgeRanks,\n });\n });\n }, [edges, nodes, labelPosition, labelOffset, edgeWeight, edgeRanks]);\n\n const updateGraph = useMemo(\n () =>\n debounce(\n () => {\n dagre.layout(graph.current);\n const { height, width } = graph.current.graph();\n const newHeight = Math.max(0, height \|\| 0);\n const newWidth = Math.max(0, width \|\| 0);\n setGraphWidth(newWidth);\n setGraphHeight(newHeight);\n\n setGraphNodes(graph.current.nodes());\n setGraphEdges(graph.current.edges());\n\n if (!settledRef.current) {\n const nodeIds = graph.current.nodes();\n const hasMeasuredNodes =\n nodeIds.length > 0 &&\n nodeIds.some(id => {\n const n = graph.current.node(id);\n return n && n.width > 0 && n.height > 0;\n });\n if (hasMeasuredNodes) {\n measuredLayoutCount.current += 1;\n }\n if (measuredLayoutCount.current >= 2 \|\| nodeIds.length === 0) {\n settledRef.current = true;\n setSettled(true);\n }\n }\n },\n 250,\n { leading: true },\n ),\n [],\n );\n\n useEffect(() => {\n graph.current.setGraph({\n rankdir: direction,\n align,\n nodesep: nodeMargin,\n edgesep: edgeMargin,\n ranksep: rankMargin,\n marginx: paddingX,\n marginy: paddingY,\n acyclicer,\n ranker,\n });\n\n setNodesAndEdges();\n updateGraph();\n\n return updateGraph.cancel;\n }, [\n acyclicer,\n align,\n direction,\n edgeMargin,\n paddingX,\n paddingY,\n nodeMargin,\n rankMargin,\n ranker,\n setNodesAndEdges,\n updateGraph,\n ]);\n\n const setNode = useCallback(\n (id: string, node: Types.DependencyNode<NodeData>) => {\n graph.current.setNode(id, node);\n updateGraph();\n if (!settledRef.current && !pendingInitialFlush.current) {\n pendingInitialFlush.current = true;\n queueMicrotask(() => {\n pendingInitialFlush.current = false;\n updateGraph.flush();\n });\n }\n return graph.current;\n },\n [updateGraph],\n );\n\n const setEdge = useCallback(\n (id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) => {\n graph.current.setEdge(id, edge);\n updateGraph();\n return graph.current;\n },\n [updateGraph],\n );\n\n return (\n <FullScreen\n handle={fullScreenHandle}\n className={classNames(\n fullScreenHandle.active ? styles.fullscreen : styles.root,\n )}\n >\n {allowFullscreen && (\n <Tooltip title={t('dependencyGraph.fullscreenTooltip')}>\n <IconButton\n className={styles.fullscreenButton}\n onClick={\n fullScreenHandle.active\n ? fullScreenHandle.exit\n : fullScreenHandle.enter\n }\n >\n {fullScreenHandle.active ? (\n <FullscreenExitIcon />\n ) : (\n <FullscreenIcon />\n )}\n </IconButton>\n </Tooltip>\n )}\n\n <div\n ref={containerRef}\n style={{\n width: '100%',\n height: '100%',\n visibility: settled ? 'visible' : 'hidden',\n }}\n >\n <svg\n {...svgProps}\n width=\"100%\"\n height={scalableHeight}\n viewBox={`0 0 ${maxWidth} ${maxHeight}`}\n id={DEPENDENCY_GRAPH_SVG}\n >\n <defs>\n <marker\n id={ARROW_MARKER_ID}\n viewBox=\"0 0 24 24\"\n markerWidth=\"14\"\n markerHeight=\"14\"\n refX=\"16\"\n refY=\"12\"\n orient=\"auto\"\n markerUnits=\"strokeWidth\"\n >\n <path\n fill={theme.palette.textSubtle}\n d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\n />\n </marker>\n {defs}\n </defs>\n {!transitionsReady && (\n <style>{`#${DEPENDENCY_GRAPH_SVG} * { transition: none !important; }`}</style>\n )}\n <g id={WORKSPACE_ID}>\n <svg\n width={graphWidth}\n height={graphHeight}\n y={maxHeight / 2 - graphHeight / 2}\n x={maxWidth / 2 - graphWidth / 2}\n viewBox={`0 0 ${graphWidth} ${graphHeight}`}\n >\n {graphEdges.map(e => {\n const edge = graph.current.edge(e) as GraphEdge<EdgeData>;\n if (!edge) return null;\n if (renderEdge) return renderEdge({ edge, id: e });\n\n return (\n <Edge\n key={`${e.v}-${e.w}`}\n id={e}\n setEdge={setEdge}\n render={renderLabel}\n edge={edge}\n curve={curve}\n showArrowHeads={showArrowHeads}\n />\n );\n })}\n {graphNodes.map((id: string) => {\n const node = graph.current.node(id);\n if (!node) return null;\n return (\n <Node\n key={id}\n setNode={setNode}\n render={renderNode}\n node={node}\n />\n );\n })}\n </svg>\n </g>\n </svg>\n </div>\n </FullScreen>\n );\n}\n"],"names":["Types","dims"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.18.12",
+  "version": "0.18.13-next.1",
   "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
@@ -66,12 +66,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/config": "^1.3.8",
-    "@backstage/core-plugin-api": "^1.12.8",
-    "@backstage/errors": "^1.3.1",
-    "@backstage/theme": "^0.7.3",
-    "@backstage/ui": "^0.17.0",
-    "@backstage/version-bridge": "^1.0.12",
+    "@backstage/config": "1.3.8",
+    "@backstage/core-plugin-api": "1.12.8",
+    "@backstage/errors": "1.3.1",
+    "@backstage/theme": "0.7.3",
+    "@backstage/ui": "0.17.1-next.0",
+    "@backstage/version-bridge": "1.0.12",
     "@dagrejs/dagre": "^1.1.4",
     "@date-io/core": "^1.3.13",
     "@material-table/core": "^3.1.0",
@@ -87,7 +87,7 @@
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "js-yaml": "^4.2.0",
+    "js-yaml": "^4.3.0",
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
     "lodash": "^4.17.21",
@@ -111,10 +111,10 @@
     "zod": "^3.25.76 || ^4.0.0"
   },
   "devDependencies": {
-    "@backstage/app-defaults": "^1.7.10",
-    "@backstage/cli": "^0.36.4",
-    "@backstage/core-app-api": "^1.20.3",
-    "@backstage/test-utils": "^1.7.20",
+    "@backstage/app-defaults": "1.7.11-next.0",
+    "@backstage/cli": "0.36.5-next.0",
+    "@backstage/core-app-api": "1.20.4-next.0",
+    "@backstage/test-utils": "1.7.21-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/user-event": "^14.0.0",