@backstage/core-components 0.17.6-next.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @backstage/core-components
 
+## 0.18.0
+
+### Minor Changes
+
+- b9a87f4: Add optional `distance` property to `DependencyEdge` to reflect the distance to a root.
+
+### Patch Changes
+
+- 1ad3d94: Dependency graph can now be opened in full screen mode
+- e409bec: Fixes for rendering initials in the avatar component.
+- ae7d426: update about card links style for pretty display with other language
+- Updated dependencies
+  - @backstage/core-plugin-api@1.11.0
+
+## 0.17.6-next.1
+
+### Patch Changes
+
+- 1ad3d94: Dependency graph can now be opened in full screen mode
+- ae7d426: update about card links style for pretty display with other language
+
 ## 0.17.6-next.0
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -54,6 +54,7 @@ declare const coreComponentsTranslationRef: _backstage_core_plugin_api_alpha.Tra
     readonly "alertDisplay.message_other": "({{ count }} newer messages)";
     readonly "autoLogout.stillTherePrompt.title": "Logging out due to inactivity";
     readonly "autoLogout.stillTherePrompt.buttonText": "Yes! Don't log me out";
+    readonly "dependencyGraph.fullscreenTooltip": "Toggle fullscreen";
     readonly "proxiedSignInPage.title": "You do not appear to be signed in. Please try reloading the browser page.";
 }>;
 

package/dist/components/DependencyGraph/DependencyGraph.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import * as d3Zoom from 'd3-zoom';
 import * as d3Selection from 'd3-selection';
@@ -9,8 +9,27 @@ import { DependencyGraphTypes } from './types.esm.js';
 import { Node } from './Node.esm.js';
 import { Edge } from './Edge.esm.js';
 import { ARROW_MARKER_ID } from './constants.esm.js';
+import IconButton from '@material-ui/core/IconButton';
+import FullscreenIcon from '@material-ui/icons/Fullscreen';
+import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
+import { useFullScreenHandle, FullScreen } from 'react-full-screen';
+import { makeStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { coreComponentsTranslationRef } from '../../translation.esm.js';
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    overflow: "hidden",
+    minHeight: "100%",
+    minWidth: "100%"
+  },
+  fullscreen: {
+    backgroundColor: theme.palette.background.paper
+  }
+}));
 const WORKSPACE_ID = "workspace";
+const DEPENDENCY_GRAPH_SVG = "dependency-graph";
 function DependencyGraph(props) {
   const {
     edges,
@@ -35,11 +54,15 @@ function DependencyGraph(props) {
     curve = "curveMonotoneX",
     showArrowHeads = false,
     fit = "grow",
+    allowFullscreen = true,
     ...svgProps
   } = props;
   const theme = useTheme();
   const [containerWidth, setContainerWidth] = useState(100);
   const [containerHeight, setContainerHeight] = useState(100);
+  const fullScreenHandle = useFullScreenHandle();
+  const styles = useStyles();
+  const { t } = useTranslationRef(coreComponentsTranslationRef);
   const graph = useRef(
     new dagre.graphlib.Graph()
   );
@@ -56,7 +79,13 @@ function DependencyGraph(props) {
   const minHeight = Math.min(graphHeight, containerHeight);
   const scalableHeight = fit === "grow" ? maxHeight : minHeight;
   const containerRef = useMemo(
-    () => debounce((node) => {
+    () => debounce((root) => {
+      if (!root) {
+        return;
+      }
+      const node = root.querySelector(
+        `svg#${DEPENDENCY_GRAPH_SVG}`
+      );
       if (!node) {
         return;
       }
@@ -88,7 +117,7 @@ function DependencyGraph(props) {
       } else if (zoom === "enable-on-click") {
         container.on("click", () => enableZoom());
       }
-      const { width: newContainerWidth, height: newContainerHeight } = node.getBoundingClientRect();
+      const { width: newContainerWidth, height: newContainerHeight } = root.getBoundingClientRect();
       if (containerWidth !== newContainerWidth) {
         setContainerWidth(newContainerWidth);
       }
@@ -192,82 +221,99 @@ function DependencyGraph(props) {
     updateGraph();
     return graph.current;
   }
-  return /* @__PURE__ */ jsxs(
-    "svg",
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.root, children: /* @__PURE__ */ jsxs(
+    FullScreen,
     {
-      ref: containerRef,
-      ...svgProps,
-      width: "100%",
-      height: scalableHeight,
-      viewBox: `0 0 ${maxWidth} ${maxHeight}`,
+      handle: fullScreenHandle,
+      className: fullScreenHandle.active ? styles.fullscreen : styles.root,
       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",
-                {
-                  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(
+        allowFullscreen && /* @__PURE__ */ jsx(Tooltip, { title: t("dependencyGraph.fullscreenTooltip"), children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            style: { float: "right" },
+            onClick: fullScreenHandle.active ? fullScreenHandle.exit : fullScreenHandle.enter,
+            children: fullScreenHandle.active ? /* @__PURE__ */ jsx(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
           "svg",
           {
-            width: graphWidth,
-            height: graphHeight,
-            y: maxHeight / 2 - graphHeight / 2,
-            x: maxWidth / 2 - graphWidth / 2,
-            viewBox: `0 0 ${graphWidth} ${graphHeight}`,
+            ...svgProps,
+            width: "100%",
+            height: scalableHeight,
+            viewBox: `0 0 ${maxWidth} ${maxHeight}`,
+            id: DEPENDENCY_GRAPH_SVG,
             children: [
-              graphEdges.map((e) => {
-                const edge = graph.current.edge(e);
-                if (!edge) return null;
-                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,
+              /* @__PURE__ */ jsxs("defs", { children: [
+                /* @__PURE__ */ jsx(
+                  "marker",
                   {
-                    setNode,
-                    render: renderNode,
-                    node
-                  },
-                  id
-                );
-              })
+                    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;
+                      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
+                      );
+                    })
+                  ]
+                }
+              ) })
             ]
           }
-        ) })
+        )
       ]
     }
-  );
+  ) });
 }
 
 export { DependencyGraph };

package/dist/components/DependencyGraph/DependencyGraph.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DependencyGraph.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraph.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  useState,\n  useRef,\n  useMemo,\n  useCallback,\n  useEffect,\n} from 'react';\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';\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 | direction}\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n   */\n  direction?: Types.Direction;\n  /**\n   * Node {@link DependencyGraphTypes.Alignment | 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 | 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 | 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 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\nconst WORKSPACE_ID = 'workspace';\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    renderLabel,\n    defs,\n    zoom = 'enabled',\n    curve = 'curveMonotoneX',\n    showArrowHeads = false,\n    fit = 'grow',\n    ...svgProps\n  } = props;\n  const theme = useTheme();\n  const [containerWidth, setContainerWidth] = useState<number>(100);\n  const [containerHeight, setContainerHeight] = useState<number>(100);\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  const minHeight = Math.min(graphHeight, containerHeight);\n\n  const scalableHeight = fit === 'grow' ? maxHeight : minHeight;\n\n  const containerRef = useMemo(\n    () =>\n      debounce((node: SVGSVGElement) => {\n        if (!node) {\n          return;\n        }\n        // Set up zooming + panning\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          node.getBoundingClientRect();\n        if (containerWidth !== newContainerWidth) {\n          setContainerWidth(newContainerWidth);\n        }\n        if (containerHeight !== newContainerHeight) {\n          setContainerHeight(newContainerHeight);\n        }\n      }, 100),\n    [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  function setNode(id: string, node: Types.DependencyNode<NodeData>) {\n    graph.current.setNode(id, node);\n    updateGraph();\n    return graph.current;\n  }\n\n  function setEdge(id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) {\n    graph.current.setEdge(id, edge);\n    updateGraph();\n    return graph.current;\n  }\n\n  return (\n    <svg\n      ref={containerRef}\n      {...svgProps}\n      width=\"100%\"\n      height={scalableHeight}\n      viewBox={`0 0 ${maxWidth} ${maxHeight}`}\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            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  );\n}\n"],"names":["Types"],"mappings":"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"}
+{"version":3,"file":"DependencyGraph.esm.js","sources":["../../../src/components/DependencyGraph/DependencyGraph.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 * 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  root: {\n    overflow: 'hidden',\n    minHeight: '100%',\n    minWidth: '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 | direction}\n   *\n   * @remarks\n   *\n   * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`\n   */\n  direction?: Types.Direction;\n  /**\n   * Node {@link DependencyGraphTypes.Alignment | 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 | 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 | 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 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    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  const minHeight = Math.min(graphHeight, containerHeight);\n\n  const scalableHeight = fit === 'grow' ? maxHeight : minHeight;\n\n  const containerRef = useMemo(\n    () =>\n      debounce((root: HTMLDivElement) => {\n        if (!root) {\n          return;\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 (containerWidth !== newContainerWidth) {\n          setContainerWidth(newContainerWidth);\n        }\n        if (containerHeight !== newContainerHeight) {\n          setContainerHeight(newContainerHeight);\n        }\n      }, 100),\n    [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  function setNode(id: string, node: Types.DependencyNode<NodeData>) {\n    graph.current.setNode(id, node);\n    updateGraph();\n    return graph.current;\n  }\n\n  function setEdge(id: dagre.Edge, edge: Types.DependencyEdge<EdgeData>) {\n    graph.current.setEdge(id, edge);\n    updateGraph();\n    return graph.current;\n  }\n\n  return (\n    <div ref={containerRef} className={styles.root}>\n      <FullScreen\n        handle={fullScreenHandle}\n        className={fullScreenHandle.active ? styles.fullscreen : styles.root}\n      >\n        {allowFullscreen && (\n          <Tooltip title={t('dependencyGraph.fullscreenTooltip')}>\n            <IconButton\n              style={{ float: 'right' }}\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        <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                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      </FullScreen>\n    </div>\n  );\n}\n"],"names":["Types"],"mappings":"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"}

package/dist/components/DependencyGraph/types.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.esm.js","sources":["../../../src/components/DependencyGraph/types.ts"],"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\n/**\n * Types used to customize and provide data to {@link DependencyGraph}\n *\n * @packageDocumentation\n */\n\nimport { ReactNode } from 'react';\n\n/**\n * Types for the {@link DependencyGraph} component.\n *\n * @public\n */\nexport namespace DependencyGraphTypes {\n  /**\n   * Edge of {@link DependencyGraph}\n   *\n   * @public\n   */\n  export type DependencyEdge<T = {}> = T & {\n    /**\n     * ID of {@link DependencyNode} from where the Edge start\n     */\n    from: string;\n    /**\n     * ID of {@link DependencyNode} to where the Edge goes to\n     */\n    to: string;\n    /**\n     * Label assigned and rendered with the Edge\n     */\n    label?: string;\n  };\n\n  /**\n   * Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge}\n   *\n   * @public\n   */\n  export type RenderLabelProps<T = unknown> = { edge: DependencyEdge<T> };\n\n  /**\n   * Custom React component for edge labels\n   *\n   * @public\n   */\n  export type RenderLabelFunction<T = {}> = (\n    props: RenderLabelProps<T>,\n  ) => ReactNode;\n\n  /**\n   * Node of {@link DependencyGraph}\n   *\n   * @public\n   */\n  export type DependencyNode<T = {}> = T & {\n    id: string;\n  };\n\n  /**\n   * Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode}\n   *\n   * @public\n   */\n  export type RenderNodeProps<T = unknown> = { node: DependencyNode<T> };\n\n  /**\n   * Custom React component for graph {@link DependencyGraphTypes.DependencyNode}\n   *\n   * @public\n   */\n  export type RenderNodeFunction<T = {}> = (\n    props: RenderNodeProps<T>,\n  ) => ReactNode;\n\n  /**\n   * Graph direction\n   *\n   * @public\n   */\n  export enum Direction {\n    /**\n     * Top to Bottom\n     */\n    TOP_BOTTOM = 'TB',\n    /**\n     * Bottom to Top\n     */\n    BOTTOM_TOP = 'BT',\n    /**\n     * Left to Right\n     */\n    LEFT_RIGHT = 'LR',\n    /**\n     * Right to Left\n     */\n    RIGHT_LEFT = 'RL',\n  }\n\n  /**\n   * Node alignment\n   *\n   * @public\n   */\n  export enum Alignment {\n    /**\n     * Up Left\n     */\n    UP_LEFT = 'UL',\n    /**\n     * Up Right\n     */\n    UP_RIGHT = 'UR',\n    /**\n     * Down Left\n     */\n    DOWN_LEFT = 'DL',\n    /**\n     * Down Right\n     */\n    DOWN_RIGHT = 'DR',\n  }\n\n  /**\n   * Algorithm used to rand nodes in graph\n   *\n   * @public\n   */\n  export enum Ranker {\n    /**\n     * {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm\n     */\n    NETWORK_SIMPLEX = 'network-simplex',\n    /**\n     * Tight Tree algorithm\n     */\n    TIGHT_TREE = 'tight-tree',\n    /**\n     * Longest path algorithm\n     *\n     * @remarks\n     *\n     * Simplest and fastest\n     */\n    LONGEST_PATH = 'longest-path',\n  }\n\n  /**\n   * Position of label in relation to the edge\n   *\n   * @public\n   */\n  export enum LabelPosition {\n    LEFT = 'l',\n    RIGHT = 'r',\n    CENTER = 'c',\n  }\n}\n"],"names":["DependencyGraphTypes","Direction","Alignment","Ranker","LabelPosition"],"mappings":"AA6BO,IAAU;AAAA,CAAV,CAAUA,qBAAAA,KAAV;AAmEE,EAAA,CAAA,CAAKC,UAAAA,KAAL;AAIL,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAIb,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAIb,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAIb,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAAA,EAAA,CAAA,EAhBHD,qBAAAA,CAAA,SAAA,KAAAA,qBAAAA,CAAA,SAAA,GAAA,EAAA,CAAA,CAAA;AAwBL,EAAA,CAAA,CAAKE,UAAAA,KAAL;AAIL,IAAAA,WAAA,SAAA,CAAA,GAAU,IAAA;AAIV,IAAAA,WAAA,UAAA,CAAA,GAAW,IAAA;AAIX,IAAAA,WAAA,WAAA,CAAA,GAAY,IAAA;AAIZ,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAAA,EAAA,CAAA,EAhBHF,qBAAAA,CAAA,SAAA,KAAAA,qBAAAA,CAAA,SAAA,GAAA,EAAA,CAAA,CAAA;AAwBL,EAAA,CAAA,CAAKG,OAAAA,KAAL;AAIL,IAAAA,QAAA,iBAAA,CAAA,GAAkB,iBAAA;AAIlB,IAAAA,QAAA,YAAA,CAAA,GAAa,YAAA;AAQb,IAAAA,QAAA,cAAA,CAAA,GAAe,cAAA;AAAA,EAAA,CAAA,EAhBLH,qBAAAA,CAAA,MAAA,KAAAA,qBAAAA,CAAA,MAAA,GAAA,EAAA,CAAA,CAAA;AAwBL,EAAA,CAAA,CAAKI,cAAAA,KAAL;AACL,IAAAA,eAAA,MAAA,CAAA,GAAO,GAAA;AACP,IAAAA,eAAA,OAAA,CAAA,GAAQ,GAAA;AACR,IAAAA,eAAA,QAAA,CAAA,GAAS,GAAA;AAAA,EAAA,CAAA,EAHCJ,qBAAAA,CAAA,aAAA,KAAAA,qBAAAA,CAAA,aAAA,GAAA,EAAA,CAAA,CAAA;AAAA,CAAA,EA3IG,oBAAA,KAAA,oBAAA,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.esm.js","sources":["../../../src/components/DependencyGraph/types.ts"],"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\n/**\n * Types used to customize and provide data to {@link DependencyGraph}\n *\n * @packageDocumentation\n */\n\nimport { ReactNode } from 'react';\n\n/**\n * Types for the {@link DependencyGraph} component.\n *\n * @public\n */\nexport namespace DependencyGraphTypes {\n  /**\n   * Edge of {@link DependencyGraph}\n   *\n   * @public\n   */\n  export type DependencyEdge<T = {}> = T & {\n    /**\n     * ID of {@link DependencyNode} from where the Edge start\n     */\n    from: string;\n    /**\n     * ID of {@link DependencyNode} to where the Edge goes to\n     */\n    to: string;\n    /**\n     * Label assigned and rendered with the Edge\n     */\n    label?: string;\n    /**\n     * Distance to a root entity\n     */\n    distance?: number;\n  };\n\n  /**\n   * Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge}\n   *\n   * @public\n   */\n  export type RenderLabelProps<T = unknown> = { edge: DependencyEdge<T> };\n\n  /**\n   * Custom React component for edge labels\n   *\n   * @public\n   */\n  export type RenderLabelFunction<T = {}> = (\n    props: RenderLabelProps<T>,\n  ) => ReactNode;\n\n  /**\n   * Node of {@link DependencyGraph}\n   *\n   * @public\n   */\n  export type DependencyNode<T = {}> = T & {\n    id: string;\n  };\n\n  /**\n   * Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode}\n   *\n   * @public\n   */\n  export type RenderNodeProps<T = unknown> = { node: DependencyNode<T> };\n\n  /**\n   * Custom React component for graph {@link DependencyGraphTypes.DependencyNode}\n   *\n   * @public\n   */\n  export type RenderNodeFunction<T = {}> = (\n    props: RenderNodeProps<T>,\n  ) => ReactNode;\n\n  /**\n   * Graph direction\n   *\n   * @public\n   */\n  export enum Direction {\n    /**\n     * Top to Bottom\n     */\n    TOP_BOTTOM = 'TB',\n    /**\n     * Bottom to Top\n     */\n    BOTTOM_TOP = 'BT',\n    /**\n     * Left to Right\n     */\n    LEFT_RIGHT = 'LR',\n    /**\n     * Right to Left\n     */\n    RIGHT_LEFT = 'RL',\n  }\n\n  /**\n   * Node alignment\n   *\n   * @public\n   */\n  export enum Alignment {\n    /**\n     * Up Left\n     */\n    UP_LEFT = 'UL',\n    /**\n     * Up Right\n     */\n    UP_RIGHT = 'UR',\n    /**\n     * Down Left\n     */\n    DOWN_LEFT = 'DL',\n    /**\n     * Down Right\n     */\n    DOWN_RIGHT = 'DR',\n  }\n\n  /**\n   * Algorithm used to rand nodes in graph\n   *\n   * @public\n   */\n  export enum Ranker {\n    /**\n     * {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm\n     */\n    NETWORK_SIMPLEX = 'network-simplex',\n    /**\n     * Tight Tree algorithm\n     */\n    TIGHT_TREE = 'tight-tree',\n    /**\n     * Longest path algorithm\n     *\n     * @remarks\n     *\n     * Simplest and fastest\n     */\n    LONGEST_PATH = 'longest-path',\n  }\n\n  /**\n   * Position of label in relation to the edge\n   *\n   * @public\n   */\n  export enum LabelPosition {\n    LEFT = 'l',\n    RIGHT = 'r',\n    CENTER = 'c',\n  }\n}\n"],"names":["DependencyGraphTypes","Direction","Alignment","Ranker","LabelPosition"],"mappings":"AA6BO,IAAU;AAAA,CAAV,CAAUA,qBAAAA,KAAV;AAuEE,EAAA,CAAA,CAAKC,UAAAA,KAAL;AAIL,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAIb,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAIb,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAIb,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAAA,EAAA,CAAA,EAhBHD,qBAAAA,CAAA,SAAA,KAAAA,qBAAAA,CAAA,SAAA,GAAA,EAAA,CAAA,CAAA;AAwBL,EAAA,CAAA,CAAKE,UAAAA,KAAL;AAIL,IAAAA,WAAA,SAAA,CAAA,GAAU,IAAA;AAIV,IAAAA,WAAA,UAAA,CAAA,GAAW,IAAA;AAIX,IAAAA,WAAA,WAAA,CAAA,GAAY,IAAA;AAIZ,IAAAA,WAAA,YAAA,CAAA,GAAa,IAAA;AAAA,EAAA,CAAA,EAhBHF,qBAAAA,CAAA,SAAA,KAAAA,qBAAAA,CAAA,SAAA,GAAA,EAAA,CAAA,CAAA;AAwBL,EAAA,CAAA,CAAKG,OAAAA,KAAL;AAIL,IAAAA,QAAA,iBAAA,CAAA,GAAkB,iBAAA;AAIlB,IAAAA,QAAA,YAAA,CAAA,GAAa,YAAA;AAQb,IAAAA,QAAA,cAAA,CAAA,GAAe,cAAA;AAAA,EAAA,CAAA,EAhBLH,qBAAAA,CAAA,MAAA,KAAAA,qBAAAA,CAAA,MAAA,GAAA,EAAA,CAAA,CAAA;AAwBL,EAAA,CAAA,CAAKI,cAAAA,KAAL;AACL,IAAAA,eAAA,MAAA,CAAA,GAAO,GAAA;AACP,IAAAA,eAAA,OAAA,CAAA,GAAQ,GAAA;AACR,IAAAA,eAAA,QAAA,CAAA,GAAS,GAAA;AAAA,EAAA,CAAA,EAHCJ,qBAAAA,CAAA,aAAA,KAAAA,qBAAAA,CAAA,aAAA,GAAA,EAAA,CAAA,CAAA;AAAA,CAAA,EA/IG,oBAAA,KAAA,oBAAA,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/HeaderIconLinkRow/HeaderIconLinkRow.esm.js

@@ -9,7 +9,8 @@ const useStyles = makeStyles(
       display: "grid",
       gridAutoFlow: "column",
       gridAutoColumns: "min-content",
-      gridGap: theme.spacing(3)
+      gridGap: theme.spacing(3),
+      wordBreak: "keep-all"
     }
   }),
   { name: "BackstageHeaderIconLinkRow" }

package/dist/components/HeaderIconLinkRow/HeaderIconLinkRow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconLinkRow.esm.js","sources":["../../../src/components/HeaderIconLinkRow/HeaderIconLinkRow.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 */\nimport { makeStyles } from '@material-ui/core/styles';\nimport { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';\n\n/** @public */\nexport type HeaderIconLinkRowClassKey = 'links';\n\nconst useStyles = makeStyles(\n  theme => ({\n    links: {\n      margin: theme.spacing(2, 0),\n      display: 'grid',\n      gridAutoFlow: 'column',\n      gridAutoColumns: 'min-content',\n      gridGap: theme.spacing(3),\n    },\n  }),\n  { name: 'BackstageHeaderIconLinkRow' },\n);\n\ntype Props = {\n  links: IconLinkVerticalProps[];\n};\n\n/**\n * HTML nav tag with links mapped inside\n *\n * @public\n *\n */\nexport function HeaderIconLinkRow(props: Props) {\n  const { links } = props;\n  const classes = useStyles();\n  return (\n    <nav className={classes.links}>\n      {links.map((link, index) => (\n        <IconLinkVertical key={index + 1} {...link} />\n      ))}\n    </nav>\n  );\n}\n"],"names":[],"mappings":";;;;AAqBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAC,CAAA;AAAA,MAC1B,OAAA,EAAS,MAAA;AAAA,MACT,YAAA,EAAc,QAAA;AAAA,MACd,eAAA,EAAiB,aAAA;AAAA,MACjB,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAC1B,GACF,CAAA;AAAA,EACA,EAAE,MAAM,4BAAA;AACV,CAAA;AAYO,SAAS,kBAAkB,KAAA,EAAc;AAC9C,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAClB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,KAAA,EACrB,gBAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,yBACf,gBAAA,EAAA,EAAkC,GAAG,QAAf,KAAA,GAAQ,CAAa,CAC7C,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderIconLinkRow.esm.js","sources":["../../../src/components/HeaderIconLinkRow/HeaderIconLinkRow.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 */\nimport { makeStyles } from '@material-ui/core/styles';\nimport { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';\n\n/** @public */\nexport type HeaderIconLinkRowClassKey = 'links';\n\nconst useStyles = makeStyles(\n  theme => ({\n    links: {\n      margin: theme.spacing(2, 0),\n      display: 'grid',\n      gridAutoFlow: 'column',\n      gridAutoColumns: 'min-content',\n      gridGap: theme.spacing(3),\n      wordBreak: 'keep-all',\n    },\n  }),\n  { name: 'BackstageHeaderIconLinkRow' },\n);\n\ntype Props = {\n  links: IconLinkVerticalProps[];\n};\n\n/**\n * HTML nav tag with links mapped inside\n *\n * @public\n *\n */\nexport function HeaderIconLinkRow(props: Props) {\n  const { links } = props;\n  const classes = useStyles();\n  return (\n    <nav className={classes.links}>\n      {links.map((link, index) => (\n        <IconLinkVertical key={index + 1} {...link} />\n      ))}\n    </nav>\n  );\n}\n"],"names":[],"mappings":";;;;AAqBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAC,CAAA;AAAA,MAC1B,OAAA,EAAS,MAAA;AAAA,MACT,YAAA,EAAc,QAAA;AAAA,MACd,eAAA,EAAiB,aAAA;AAAA,MACjB,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,SAAA,EAAW;AAAA;AACb,GACF,CAAA;AAAA,EACA,EAAE,MAAM,4BAAA;AACV,CAAA;AAYO,SAAS,kBAAkB,KAAA,EAAc;AAC9C,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAClB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,KAAA,EACrB,gBAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,yBACf,gBAAA,EAAA,EAAkC,GAAG,QAAf,KAAA,GAAQ,CAAa,CAC7C,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/index.d.ts

@@ -338,6 +338,10 @@ declare namespace DependencyGraphTypes {
          * Label assigned and rendered with the Edge
          */
         label?: string;
+        /**
+         * Distance to a root entity
+         */
+        distance?: number;
     };
     /**
      * Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge}
@@ -604,6 +608,14 @@ interface DependencyGraphProps<NodeData, EdgeData> extends SVGProps<SVGSVGElemen
      * Default: 'grow'
      */
     fit?: 'grow' | 'contain';
+    /**
+     * Controls if user can toggle fullscreen mode
+     *
+     * @remarks
+     *
+     * Default: true
+     */
+    allowFullscreen?: boolean;
 }
 /**
  * Graph component used to visualize relations between entities

package/dist/layout/ErrorPage/StackDetails.esm.js

@@ -25,14 +25,8 @@ import 'react-use/esm/useCopyToClipboard';
 import '@material-ui/core/useMediaQuery';
 import 'react-router-dom';
 import '@material-ui/icons/AddCircleOutline';
-import 'd3-zoom';
-import 'd3-selection';
-import '@material-ui/core/styles/useTheme';
-import '@dagrejs/dagre';
-import 'lodash/debounce';
+import '../../components/DependencyGraph/DependencyGraph.esm.js';
 import '../../components/DependencyGraph/types.esm.js';
-import '../../components/DependencyGraph/Node.esm.js';
-import '../../components/DependencyGraph/Edge.esm.js';
 import '../../components/DismissableBanner/DismissableBanner.esm.js';
 import '../../components/EmptyState/EmptyState.esm.js';
 import '../../components/EmptyState/MissingAnnotationEmptyState.esm.js';

package/dist/layout/ErrorPage/StackDetails.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackDetails.esm.js","sources":["../../../src/layout/ErrorPage/StackDetails.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport Typography from '@material-ui/core/Typography';\nimport { useState } from 'react';\nimport { Link } from '../../components/Link';\nimport { CodeSnippet } from '../../components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { coreComponentsTranslationRef } from '../../translation';\n\ninterface IStackDetailsProps {\n  stack: string;\n}\n\n/** @public */\nexport type StackDetailsClassKey = 'title';\n\nconst useStyles = makeStyles(\n  theme => ({\n    title: {\n      paddingBottom: theme.spacing(5),\n      [theme.breakpoints.down('xs')]: {\n        paddingBottom: theme.spacing(4),\n        fontSize: theme.typography.h3.fontSize,\n      },\n    },\n  }),\n  { name: 'BackstageErrorPageStackDetails' },\n);\n\n/**\n * Error page details with stack trace\n *\n * @public\n *\n */\nexport function StackDetails(props: IStackDetailsProps) {\n  const { stack } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);\n\n  if (!detailsOpen) {\n    return (\n      <Typography variant=\"h6\" className={classes.title}>\n        <Link to=\"#\" onClick={() => setDetailsOpen(true)}>\n          {t('errorPage.showMoreDetails')}\n        </Link>\n      </Typography>\n    );\n  }\n\n  return (\n    <>\n      <Typography variant=\"h6\" className={classes.title}>\n        <Link to=\"#\" onClick={() => setDetailsOpen(false)}>\n          {t('errorPage.showLessDetails')}\n        </Link>\n      </Typography>\n      <CodeSnippet\n        text={stack}\n        language=\"text\"\n        showCopyCodeButton\n        showLineNumbers\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC9B,CAAC,KAAA,CAAM,WAAA,CAAY,IAAA,CAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC9B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,EAAA,CAAG;AAAA;AAChC;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,gCAAA;AACV,CAAA;AAQO,SAAS,aAAa,KAAA,EAA2B;AACtD,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAClB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,4BAA4B,CAAA;AAE5D,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,2BACG,UAAA,EAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAW,OAAA,CAAQ,OAC1C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAG,GAAA,EAAI,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,GAC5C,QAAA,EAAA,CAAA,CAAE,2BAA2B,GAChC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,OAAA,EAAQ,IAAA,EAAK,WAAW,OAAA,CAAQ,KAAA,EAC1C,8BAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAS,MAAM,cAAA,CAAe,KAAK,GAC7C,QAAA,EAAA,CAAA,CAAE,2BAA2B,GAChC,CAAA,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,KAAA;AAAA,QACN,QAAA,EAAS,MAAA;AAAA,QACT,kBAAA,EAAkB,IAAA;AAAA,QAClB,eAAA,EAAe;AAAA;AAAA;AACjB,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StackDetails.esm.js","sources":["../../../src/layout/ErrorPage/StackDetails.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport Typography from '@material-ui/core/Typography';\nimport { useState } from 'react';\nimport { Link } from '../../components/Link';\nimport { CodeSnippet } from '../../components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { coreComponentsTranslationRef } from '../../translation';\n\ninterface IStackDetailsProps {\n  stack: string;\n}\n\n/** @public */\nexport type StackDetailsClassKey = 'title';\n\nconst useStyles = makeStyles(\n  theme => ({\n    title: {\n      paddingBottom: theme.spacing(5),\n      [theme.breakpoints.down('xs')]: {\n        paddingBottom: theme.spacing(4),\n        fontSize: theme.typography.h3.fontSize,\n      },\n    },\n  }),\n  { name: 'BackstageErrorPageStackDetails' },\n);\n\n/**\n * Error page details with stack trace\n *\n * @public\n *\n */\nexport function StackDetails(props: IStackDetailsProps) {\n  const { stack } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);\n\n  if (!detailsOpen) {\n    return (\n      <Typography variant=\"h6\" className={classes.title}>\n        <Link to=\"#\" onClick={() => setDetailsOpen(true)}>\n          {t('errorPage.showMoreDetails')}\n        </Link>\n      </Typography>\n    );\n  }\n\n  return (\n    <>\n      <Typography variant=\"h6\" className={classes.title}>\n        <Link to=\"#\" onClick={() => setDetailsOpen(false)}>\n          {t('errorPage.showLessDetails')}\n        </Link>\n      </Typography>\n      <CodeSnippet\n        text={stack}\n        language=\"text\"\n        showCopyCodeButton\n        showLineNumbers\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC9B,CAAC,KAAA,CAAM,WAAA,CAAY,IAAA,CAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC9B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,EAAA,CAAG;AAAA;AAChC;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,gCAAA;AACV,CAAA;AAQO,SAAS,aAAa,KAAA,EAA2B;AACtD,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAClB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,4BAA4B,CAAA;AAE5D,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,2BACG,UAAA,EAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAW,OAAA,CAAQ,OAC1C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAG,GAAA,EAAI,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,GAC5C,QAAA,EAAA,CAAA,CAAE,2BAA2B,GAChC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,OAAA,EAAQ,IAAA,EAAK,WAAW,OAAA,CAAQ,KAAA,EAC1C,8BAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAS,MAAM,cAAA,CAAe,KAAK,GAC7C,QAAA,EAAA,CAAA,CAAE,2BAA2B,GAChC,CAAA,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,KAAA;AAAA,QACN,QAAA,EAAS,MAAA;AAAA,QACT,kBAAA,EAAkB,IAAA;AAAA,QAClB,eAAA,EAAe;AAAA;AAAA;AACjB,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/translation.esm.js

@@ -99,6 +99,9 @@ const coreComponentsTranslationRef = createTranslationRef({
         buttonText: "Yes! Don't log me out"
       }
     },
+    dependencyGraph: {
+      fullscreenTooltip: "Toggle fullscreen"
+    },
     proxiedSignInPage: {
       title: "You do not appear to be signed in. Please try reloading the browser page."
     }

package/dist/translation.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2023 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 { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @alpha */\nexport const coreComponentsTranslationRef = createTranslationRef({\n  id: 'core-components',\n  messages: {\n    signIn: {\n      title: 'Sign In',\n      loginFailed: 'Login failed',\n      customProvider: {\n        title: 'Custom User',\n        subtitle:\n          'Enter your own User ID and credentials.\\n This selection will not be stored.',\n        userId: 'User ID',\n        tokenInvalid: 'Token is not a valid OpenID Connect JWT Token',\n        continue: 'Continue',\n        idToken: 'ID Token (optional)',\n      },\n      guestProvider: {\n        title: 'Guest',\n        subtitle:\n          'Enter as a Guest User.\\n You will not have a verified identity, meaning some features might be unavailable.',\n        enter: 'Enter',\n      },\n    },\n    skipToContent: 'Skip to content',\n    copyTextButton: {\n      tooltipText: 'Text copied to clipboard',\n    },\n    simpleStepper: {\n      reset: 'Reset',\n      finish: 'Finish',\n      next: 'Next',\n      skip: 'Skip',\n      back: 'Back',\n    },\n    errorPage: {\n      subtitle: 'ERROR {{status}}: {{statusMessage}}',\n      title: 'Looks like someone dropped the mic!',\n      goBack: 'Go back',\n      showMoreDetails: 'Show more details',\n      showLessDetails: 'Show less details',\n    },\n    emptyState: {\n      missingAnnotation: {\n        title: 'Missing Annotation',\n        actionTitle:\n          'Add the annotation to your component YAML as shown in the highlighted example below:',\n        readMore: 'Read more',\n      },\n    },\n    supportConfig: {\n      default: {\n        title: 'Support Not Configured',\n        linkTitle: 'Add `app.support` config key',\n      },\n    },\n    errorBoundary: {\n      title: 'Please contact {{slackChannel}} for help.',\n    },\n    oauthRequestDialog: {\n      title: 'Login Required',\n      authRedirectTitle: 'This will trigger a http redirect to OAuth Login.',\n      login: 'Log in',\n      rejectAll: 'Reject All',\n      message:\n        'Sign-in to allow {{appTitle}} access to {{provider}} APIs and identities.',\n    },\n    supportButton: {\n      title: 'Support',\n      close: 'Close',\n    },\n    table: {\n      filter: {\n        title: 'Filters',\n        clearAll: 'Clear all',\n        placeholder: 'All results',\n      },\n      body: {\n        emptyDataSourceMessage: 'No records to display',\n      },\n      pagination: {\n        firstTooltip: 'First Page',\n        labelDisplayedRows: '{from}-{to} of {count}',\n        labelRowsSelect: 'rows',\n        lastTooltip: 'Last Page',\n        nextTooltip: 'Next Page',\n        previousTooltip: 'Previous Page',\n      },\n      toolbar: {\n        search: 'Filter',\n      },\n      header: {\n        actions: 'Actions',\n      },\n    },\n    alertDisplay: {\n      message_one: '({{ count }} newer message)',\n      message_other: '({{ count }} newer messages)',\n    },\n    autoLogout: {\n      stillTherePrompt: {\n        title: 'Logging out due to inactivity',\n        buttonText: \"Yes! Don't log me out\",\n      },\n    },\n    proxiedSignInPage: {\n      title:\n        'You do not appear to be signed in. Please try reloading the browser page.',\n    },\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2023 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 { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @alpha */\nexport const coreComponentsTranslationRef = createTranslationRef({\n  id: 'core-components',\n  messages: {\n    signIn: {\n      title: 'Sign In',\n      loginFailed: 'Login failed',\n      customProvider: {\n        title: 'Custom User',\n        subtitle:\n          'Enter your own User ID and credentials.\\n This selection will not be stored.',\n        userId: 'User ID',\n        tokenInvalid: 'Token is not a valid OpenID Connect JWT Token',\n        continue: 'Continue',\n        idToken: 'ID Token (optional)',\n      },\n      guestProvider: {\n        title: 'Guest',\n        subtitle:\n          'Enter as a Guest User.\\n You will not have a verified identity, meaning some features might be unavailable.',\n        enter: 'Enter',\n      },\n    },\n    skipToContent: 'Skip to content',\n    copyTextButton: {\n      tooltipText: 'Text copied to clipboard',\n    },\n    simpleStepper: {\n      reset: 'Reset',\n      finish: 'Finish',\n      next: 'Next',\n      skip: 'Skip',\n      back: 'Back',\n    },\n    errorPage: {\n      subtitle: 'ERROR {{status}}: {{statusMessage}}',\n      title: 'Looks like someone dropped the mic!',\n      goBack: 'Go back',\n      showMoreDetails: 'Show more details',\n      showLessDetails: 'Show less details',\n    },\n    emptyState: {\n      missingAnnotation: {\n        title: 'Missing Annotation',\n        actionTitle:\n          'Add the annotation to your component YAML as shown in the highlighted example below:',\n        readMore: 'Read more',\n      },\n    },\n    supportConfig: {\n      default: {\n        title: 'Support Not Configured',\n        linkTitle: 'Add `app.support` config key',\n      },\n    },\n    errorBoundary: {\n      title: 'Please contact {{slackChannel}} for help.',\n    },\n    oauthRequestDialog: {\n      title: 'Login Required',\n      authRedirectTitle: 'This will trigger a http redirect to OAuth Login.',\n      login: 'Log in',\n      rejectAll: 'Reject All',\n      message:\n        'Sign-in to allow {{appTitle}} access to {{provider}} APIs and identities.',\n    },\n    supportButton: {\n      title: 'Support',\n      close: 'Close',\n    },\n    table: {\n      filter: {\n        title: 'Filters',\n        clearAll: 'Clear all',\n        placeholder: 'All results',\n      },\n      body: {\n        emptyDataSourceMessage: 'No records to display',\n      },\n      pagination: {\n        firstTooltip: 'First Page',\n        labelDisplayedRows: '{from}-{to} of {count}',\n        labelRowsSelect: 'rows',\n        lastTooltip: 'Last Page',\n        nextTooltip: 'Next Page',\n        previousTooltip: 'Previous Page',\n      },\n      toolbar: {\n        search: 'Filter',\n      },\n      header: {\n        actions: 'Actions',\n      },\n    },\n    alertDisplay: {\n      message_one: '({{ count }} newer message)',\n      message_other: '({{ count }} newer messages)',\n    },\n    autoLogout: {\n      stillTherePrompt: {\n        title: 'Logging out due to inactivity',\n        buttonText: \"Yes! Don't log me out\",\n      },\n    },\n    dependencyGraph: {\n      fullscreenTooltip: 'Toggle fullscreen',\n    },\n    proxiedSignInPage: {\n      title:\n        'You do not appear to be signed in. Please try reloading the browser page.',\n    },\n  },\n});\n"],"names":[],"mappings":";;AAmBO,MAAM,+BAA+B,oBAAA,CAAqB;AAAA,EAC/D,EAAA,EAAI,iBAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ;AAAA,MACN,KAAA,EAAO,SAAA;AAAA,MACP,WAAA,EAAa,cAAA;AAAA,MACb,cAAA,EAAgB;AAAA,QACd,KAAA,EAAO,aAAA;AAAA,QACP,QAAA,EACE,8EAAA;AAAA,QACF,MAAA,EAAQ,SAAA;AAAA,QACR,YAAA,EAAc,+CAAA;AAAA,QACd,QAAA,EAAU,UAAA;AAAA,QACV,OAAA,EAAS;AAAA,OACX;AAAA,MACA,aAAA,EAAe;AAAA,QACb,KAAA,EAAO,OAAA;AAAA,QACP,QAAA,EACE,6GAAA;AAAA,QACF,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,aAAA,EAAe,iBAAA;AAAA,IACf,cAAA,EAAgB;AAAA,MACd,WAAA,EAAa;AAAA,KACf;AAAA,IACA,aAAA,EAAe;AAAA,MACb,KAAA,EAAO,OAAA;AAAA,MACP,MAAA,EAAQ,QAAA;AAAA,MACR,IAAA,EAAM,MAAA;AAAA,MACN,IAAA,EAAM,MAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,SAAA,EAAW;AAAA,MACT,QAAA,EAAU,qCAAA;AAAA,MACV,KAAA,EAAO,qCAAA;AAAA,MACP,MAAA,EAAQ,SAAA;AAAA,MACR,eAAA,EAAiB,mBAAA;AAAA,MACjB,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,iBAAA,EAAmB;AAAA,QACjB,KAAA,EAAO,oBAAA;AAAA,QACP,WAAA,EACE,sFAAA;AAAA,QACF,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,wBAAA;AAAA,QACP,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,aAAA,EAAe;AAAA,MACb,KAAA,EAAO;AAAA,KACT;AAAA,IACA,kBAAA,EAAoB;AAAA,MAClB,KAAA,EAAO,gBAAA;AAAA,MACP,iBAAA,EAAmB,mDAAA;AAAA,MACnB,KAAA,EAAO,QAAA;AAAA,MACP,SAAA,EAAW,YAAA;AAAA,MACX,OAAA,EACE;AAAA,KACJ;AAAA,IACA,aAAA,EAAe;AAAA,MACb,KAAA,EAAO,SAAA;AAAA,MACP,KAAA,EAAO;AAAA,KACT;AAAA,IACA,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,SAAA;AAAA,QACP,QAAA,EAAU,WAAA;AAAA,QACV,WAAA,EAAa;AAAA,OACf;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,sBAAA,EAAwB;AAAA,OAC1B;AAAA,MACA,UAAA,EAAY;AAAA,QACV,YAAA,EAAc,YAAA;AAAA,QACd,kBAAA,EAAoB,wBAAA;AAAA,QACpB,eAAA,EAAiB,MAAA;AAAA,QACjB,WAAA,EAAa,WAAA;AAAA,QACb,WAAA,EAAa,WAAA;AAAA,QACb,eAAA,EAAiB;AAAA,OACnB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,WAAA,EAAa,6BAAA;AAAA,MACb,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,gBAAA,EAAkB;AAAA,QAChB,KAAA,EAAO,+BAAA;AAAA,QACP,UAAA,EAAY;AAAA;AACd,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,iBAAA,EAAmB;AAAA,KACrB;AAAA,IACA,iBAAA,EAAmB;AAAA,MACjB,KAAA,EACE;AAAA;AACJ;AAEJ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.17.6-next.0",
+  "version": "0.18.0",
   "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
@@ -66,11 +66,11 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/config": "1.3.3",
-    "@backstage/core-plugin-api": "1.10.9",
-    "@backstage/errors": "1.2.7",
-    "@backstage/theme": "0.6.8",
-    "@backstage/version-bridge": "1.0.11",
+    "@backstage/config": "^1.3.3",
+    "@backstage/core-plugin-api": "^1.11.0",
+    "@backstage/errors": "^1.2.7",
+    "@backstage/theme": "^0.6.8",
+    "@backstage/version-bridge": "^1.0.11",
     "@dagrejs/dagre": "^1.1.4",
     "@date-io/core": "^1.3.13",
     "@material-table/core": "^3.1.0",
@@ -92,6 +92,7 @@
     "pluralize": "^8.0.0",
     "qs": "^6.9.4",
     "rc-progress": "3.5.1",
+    "react-full-screen": "^1.1.1",
     "react-helmet": "6.1.0",
     "react-hook-form": "^7.12.2",
     "react-idle-timer": "5.7.2",
@@ -106,10 +107,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@backstage/app-defaults": "1.6.6-next.0",
-    "@backstage/cli": "0.34.2-next.1",
-    "@backstage/core-app-api": "1.18.0",
-    "@backstage/test-utils": "1.7.11",
+    "@backstage/app-defaults": "^1.7.0",
+    "@backstage/cli": "^0.34.2",
+    "@backstage/core-app-api": "^1.19.0",
+    "@backstage/test-utils": "^1.7.11",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/user-event": "^14.0.0",
@@ -118,6 +119,7 @@
     "@types/d3-selection": "^3.0.1",
     "@types/d3-shape": "^3.0.1",
     "@types/d3-zoom": "^3.0.1",
+    "@types/fscreen": "^1",
     "@types/google-protobuf": "^3.7.2",
     "@types/react": "^18.0.0",
     "@types/react-helmet": "^6.1.0",