@backstage/core-components 0.16.3 → 0.16.4-next.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @backstage/core-components
 
+## 0.16.4-next.1
+
+### Patch Changes
+
+- 47c27c2: Upgrade `dagre` to `@dagrejs/dagre`
+- Updated dependencies
+  - @backstage/config@1.3.2
+  - @backstage/core-plugin-api@1.10.4-next.0
+  - @backstage/errors@1.2.7
+  - @backstage/theme@0.6.4-next.0
+  - @backstage/version-bridge@1.0.11-next.0
+
+## 0.16.4-next.0
+
+### Patch Changes
+
+- 9c9f4ff: Added `nestedValuesAsYaml` option to `StructuredMetadataTable` to render data as yaml.
+- 17088d2: Updating the `TaskLogStream` to take up all space in a running task, and also show the last line of the log by default
+- 58ec9e7: Removed older versions of React packages as a preparatory step for upgrading to React 19. This commit does not introduce any functional changes, but removes dependencies on previous React versions, allowing for a cleaner upgrade path in subsequent commits.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.10.4-next.0
+  - @backstage/version-bridge@1.0.11-next.0
+  - @backstage/theme@0.6.4-next.0
+  - @backstage/config@1.3.2
+  - @backstage/errors@1.2.7
+
 ## 0.16.3
 
 ### Patch Changes

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

@@ -2,7 +2,7 @@ import React__default from 'react';
 import * as d3Zoom from 'd3-zoom';
 import * as d3Selection from 'd3-selection';
 import useTheme from '@material-ui/core/styles/useTheme';
-import dagre from 'dagre';
+import dagre from '@dagrejs/dagre';
 import debounce from 'lodash/debounce';
 import { DependencyGraphTypes } from './types.esm.js';
 import { Node } from './Node.esm.js';

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 React 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 '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 React.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] = React.useState<number>(100);\n  const [containerHeight, setContainerHeight] = React.useState<number>(100);\n\n  const graph = React.useRef<\n    dagre.graphlib.Graph<Types.DependencyNode<NodeData>>\n  >(new dagre.graphlib.Graph());\n  const [graphWidth, setGraphWidth] = React.useState<number>(\n    graph.current.graph()?.width || 0,\n  );\n  const [graphHeight, setGraphHeight] = React.useState<number>(\n    graph.current.graph()?.height || 0,\n  );\n  const [graphNodes, setGraphNodes] = React.useState<string[]>([]);\n  const [graphEdges, setGraphEdges] = React.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 = React.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 = React.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 = React.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  React.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","React"],"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 React 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 React.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] = React.useState<number>(100);\n  const [containerHeight, setContainerHeight] = React.useState<number>(100);\n\n  const graph = React.useRef<\n    dagre.graphlib.Graph<Types.DependencyNode<NodeData>>\n  >(new dagre.graphlib.Graph());\n  const [graphWidth, setGraphWidth] = React.useState<number>(\n    graph.current.graph()?.width || 0,\n  );\n  const [graphHeight, setGraphHeight] = React.useState<number>(\n    graph.current.graph()?.height || 0,\n  );\n  const [graphNodes, setGraphNodes] = React.useState<string[]>([]);\n  const [graphEdges, setGraphEdges] = React.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 = React.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 = React.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 = React.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  React.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","React"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Edge.esm.js","sources":["../../../src/components/DependencyGraph/Edge.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 React from 'react';\nimport * as d3Shape from 'd3-shape';\nimport isFinite from 'lodash/isFinite';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\nimport { DependencyGraphTypes as Types } from './types';\nimport { ARROW_MARKER_ID, EDGE_TEST_ID, LABEL_TEST_ID } from './constants';\nimport { DefaultLabel } from './DefaultLabel';\nimport dagre from 'dagre';\n\n/* Based on: https://github.com/dagrejs/dagre/wiki#configuring-the-layout  */\nexport type EdgeProperties = {\n  label?: string;\n  width?: number;\n  height?: number;\n  labeloffset?: number;\n  labelpos?: Types.LabelPosition;\n  minlen?: number;\n  weight?: number;\n};\nexport type GraphEdge<T> = Types.DependencyEdge<T> &\n  dagre.GraphEdge &\n  EdgeProperties;\n\n/** @public */\nexport type DependencyGraphEdgeClassKey = 'path' | 'label';\n\nconst useStyles = makeStyles(\n  theme => ({\n    path: {\n      strokeWidth: 1.3,\n      stroke: theme.palette.textSubtle,\n      fill: 'none',\n      transition: `${theme.transitions.duration.shortest}ms`,\n    },\n    label: {\n      transition: `${theme.transitions.duration.shortest}ms`,\n    },\n  }),\n  { name: 'BackstageDependencyGraphEdge' },\n);\n\ntype EdgePoint = dagre.GraphEdge['points'][0];\n\n/** @public */\nexport type EdgeComponentProps<T = unknown> = {\n  id: dagre.Edge;\n  edge: GraphEdge<T>;\n  render?: Types.RenderLabelFunction<T>;\n  setEdge: (\n    id: dagre.Edge,\n    edge: Types.DependencyEdge<T>,\n  ) => dagre.graphlib.Graph<{}>;\n  curve: 'curveStepBefore' | 'curveMonotoneX';\n  showArrowHeads?: boolean;\n};\n\nconst renderDefault = (props: Types.RenderLabelProps<unknown>) => (\n  <DefaultLabel {...props} />\n);\n\nexport function Edge<EdgeData>({\n  render = renderDefault,\n  setEdge,\n  id,\n  edge,\n  curve,\n  showArrowHeads,\n}: EdgeComponentProps<EdgeData>) {\n  const { x = 0, y = 0, width, height, points } = edge;\n  const labelProps: Types.DependencyEdge<EdgeData> = edge;\n  const classes = useStyles();\n\n  const labelRef = React.useRef<SVGGElement>(null);\n\n  React.useLayoutEffect(() => {\n    // set the label width to the actual rendered width to properly layout graph\n    if (labelRef.current) {\n      let { height: renderedHeight, width: renderedWidth } =\n        labelRef.current.getBBox();\n      renderedHeight = Math.round(renderedHeight);\n      renderedWidth = Math.round(renderedWidth);\n\n      if (renderedHeight !== height || renderedWidth !== width) {\n        setEdge(id, {\n          ...edge,\n          height: renderedHeight,\n          width: renderedWidth,\n        });\n      }\n    }\n  }, [edge, height, width, setEdge, id]);\n\n  let path: string = '';\n\n  const createPath = React.useMemo(\n    () =>\n      d3Shape\n        .line<EdgePoint>()\n        .x(d => d.x)\n        .y(d => d.y)\n        .curve(d3Shape[curve]),\n    [curve],\n  );\n\n  if (points) {\n    const finitePoints = points.filter(\n      (point: EdgePoint) => isFinite(point.x) && isFinite(point.y),\n    );\n    path = createPath(finitePoints) || '';\n  }\n\n  return (\n    <>\n      {path && (\n        <path\n          data-testid={EDGE_TEST_ID}\n          className={classes.path}\n          markerEnd={showArrowHeads ? `url(#${ARROW_MARKER_ID})` : undefined}\n          d={path}\n        />\n      )}\n      {labelProps.label ? (\n        <g\n          ref={labelRef}\n          data-testid={LABEL_TEST_ID}\n          className={classes.label}\n          transform={`translate(${x},${y})`}\n        >\n          {render({ edge: labelProps })}\n        </g>\n      ) : null}\n    </>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;AA0CA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,WAAa,EAAA,GAAA;AAAA,MACb,MAAA,EAAQ,MAAM,OAAQ,CAAA,UAAA;AAAA,MACtB,IAAM,EAAA,MAAA;AAAA,MACN,UAAY,EAAA,CAAA,EAAG,KAAM,CAAA,WAAA,CAAY,SAAS,QAAQ,CAAA,EAAA;AAAA,KACpD;AAAA,IACA,KAAO,EAAA;AAAA,MACL,UAAY,EAAA,CAAA,EAAG,KAAM,CAAA,WAAA,CAAY,SAAS,QAAQ,CAAA,EAAA;AAAA;AACpD,GACF,CAAA;AAAA,EACA,EAAE,MAAM,8BAA+B;AACzC,CAAA;AAiBA,MAAM,gBAAgB,CAAC,KAAA,qBACpBA,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAc,GAAG,KAAO,EAAA,CAAA;AAGpB,SAAS,IAAe,CAAA;AAAA,EAC7B,MAAS,GAAA,aAAA;AAAA,EACT,OAAA;AAAA,EACA,EAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAiC,EAAA;AAC/B,EAAM,MAAA,EAAE,IAAI,CAAG,EAAA,CAAA,GAAI,GAAG,KAAO,EAAA,MAAA,EAAQ,QAAW,GAAA,IAAA;AAChD,EAAA,MAAM,UAA6C,GAAA,IAAA;AACnD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAM,MAAA,QAAA,GAAWA,cAAM,CAAA,MAAA,CAAoB,IAAI,CAAA;AAE/C,EAAAA,cAAA,CAAM,gBAAgB,MAAM;AAE1B,IAAA,IAAI,SAAS,OAAS,EAAA;AACpB,MAAI,IAAA,EAAE,QAAQ,cAAgB,EAAA,KAAA,EAAO,eACnC,GAAA,QAAA,CAAS,QAAQ,OAAQ,EAAA;AAC3B,MAAiB,cAAA,GAAA,IAAA,CAAK,MAAM,cAAc,CAAA;AAC1C,MAAgB,aAAA,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA;AAExC,MAAI,IAAA,cAAA,KAAmB,MAAU,IAAA,aAAA,KAAkB,KAAO,EAAA;AACxD,QAAA,OAAA,CAAQ,EAAI,EAAA;AAAA,UACV,GAAG,IAAA;AAAA,UACH,MAAQ,EAAA,cAAA;AAAA,UACR,KAAO,EAAA;AAAA,SACR,CAAA;AAAA;AACH;AACF,KACC,CAAC,IAAA,EAAM,QAAQ,KAAO,EAAA,OAAA,EAAS,EAAE,CAAC,CAAA;AAErC,EAAA,IAAI,IAAe,GAAA,EAAA;AAEnB,EAAA,MAAM,aAAaA,cAAM,CAAA,OAAA;AAAA,IACvB,MACE,OACG,CAAA,IAAA,EACA,CAAA,CAAA,CAAE,OAAK,CAAE,CAAA,CAAC,CACV,CAAA,CAAA,CAAE,OAAK,CAAE,CAAA,CAAC,EACV,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA,IACzB,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,IAAI,MAAQ,EAAA;AACV,IAAA,MAAM,eAAe,MAAO,CAAA,MAAA;AAAA,MAC1B,CAAC,UAAqB,QAAS,CAAA,KAAA,CAAM,CAAC,CAAK,IAAA,QAAA,CAAS,MAAM,CAAC;AAAA,KAC7D;AACA,IAAO,IAAA,GAAA,UAAA,CAAW,YAAY,CAAK,IAAA,EAAA;AAAA;AAGrC,EAAA,mFAEK,IACC,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,YAAA;AAAA,MACb,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,SAAW,EAAA,cAAA,GAAiB,CAAQ,KAAA,EAAA,eAAe,CAAM,CAAA,CAAA,GAAA,KAAA,CAAA;AAAA,MACzD,CAAG,EAAA;AAAA;AAAA,GACL,EAED,WAAW,KACV,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,QAAA;AAAA,MACL,aAAa,EAAA,aAAA;AAAA,MACb,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,SAAW,EAAA,CAAA,UAAA,EAAa,CAAC,CAAA,CAAA,EAAI,CAAC,CAAA,CAAA;AAAA,KAAA;AAAA,IAE7B,MAAO,CAAA,EAAE,IAAM,EAAA,UAAA,EAAY;AAAA,MAE5B,IACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Edge.esm.js","sources":["../../../src/components/DependencyGraph/Edge.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 React from 'react';\nimport * as d3Shape from 'd3-shape';\nimport isFinite from 'lodash/isFinite';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\nimport { DependencyGraphTypes as Types } from './types';\nimport { ARROW_MARKER_ID, EDGE_TEST_ID, LABEL_TEST_ID } from './constants';\nimport { DefaultLabel } from './DefaultLabel';\nimport dagre from '@dagrejs/dagre';\n\n/* Based on: https://github.com/dagrejs/dagre/wiki#configuring-the-layout  */\nexport type EdgeProperties = {\n  label?: string;\n  width?: number;\n  height?: number;\n  labeloffset?: number;\n  labelpos?: Types.LabelPosition;\n  minlen?: number;\n  weight?: number;\n};\nexport type GraphEdge<T> = Types.DependencyEdge<T> &\n  dagre.GraphEdge &\n  EdgeProperties;\n\n/** @public */\nexport type DependencyGraphEdgeClassKey = 'path' | 'label';\n\nconst useStyles = makeStyles(\n  theme => ({\n    path: {\n      strokeWidth: 1.3,\n      stroke: theme.palette.textSubtle,\n      fill: 'none',\n      transition: `${theme.transitions.duration.shortest}ms`,\n    },\n    label: {\n      transition: `${theme.transitions.duration.shortest}ms`,\n    },\n  }),\n  { name: 'BackstageDependencyGraphEdge' },\n);\n\ntype EdgePoint = dagre.GraphEdge['points'][0];\n\n/** @public */\nexport type EdgeComponentProps<T = unknown> = {\n  id: dagre.Edge;\n  edge: GraphEdge<T>;\n  render?: Types.RenderLabelFunction<T>;\n  setEdge: (\n    id: dagre.Edge,\n    edge: Types.DependencyEdge<T>,\n  ) => dagre.graphlib.Graph<{}>;\n  curve: 'curveStepBefore' | 'curveMonotoneX';\n  showArrowHeads?: boolean;\n};\n\nconst renderDefault = (props: Types.RenderLabelProps<unknown>) => (\n  <DefaultLabel {...props} />\n);\n\nexport function Edge<EdgeData>({\n  render = renderDefault,\n  setEdge,\n  id,\n  edge,\n  curve,\n  showArrowHeads,\n}: EdgeComponentProps<EdgeData>) {\n  const { x = 0, y = 0, width, height, points } = edge;\n  const labelProps: Types.DependencyEdge<EdgeData> = edge;\n  const classes = useStyles();\n\n  const labelRef = React.useRef<SVGGElement>(null);\n\n  React.useLayoutEffect(() => {\n    // set the label width to the actual rendered width to properly layout graph\n    if (labelRef.current) {\n      let { height: renderedHeight, width: renderedWidth } =\n        labelRef.current.getBBox();\n      renderedHeight = Math.round(renderedHeight);\n      renderedWidth = Math.round(renderedWidth);\n\n      if (renderedHeight !== height || renderedWidth !== width) {\n        setEdge(id, {\n          ...edge,\n          height: renderedHeight,\n          width: renderedWidth,\n        });\n      }\n    }\n  }, [edge, height, width, setEdge, id]);\n\n  let path: string = '';\n\n  const createPath = React.useMemo(\n    () =>\n      d3Shape\n        .line<EdgePoint>()\n        .x(d => d.x)\n        .y(d => d.y)\n        .curve(d3Shape[curve]),\n    [curve],\n  );\n\n  if (points) {\n    const finitePoints = points.filter(\n      (point: EdgePoint) => isFinite(point.x) && isFinite(point.y),\n    );\n    path = createPath(finitePoints) || '';\n  }\n\n  return (\n    <>\n      {path && (\n        <path\n          data-testid={EDGE_TEST_ID}\n          className={classes.path}\n          markerEnd={showArrowHeads ? `url(#${ARROW_MARKER_ID})` : undefined}\n          d={path}\n        />\n      )}\n      {labelProps.label ? (\n        <g\n          ref={labelRef}\n          data-testid={LABEL_TEST_ID}\n          className={classes.label}\n          transform={`translate(${x},${y})`}\n        >\n          {render({ edge: labelProps })}\n        </g>\n      ) : null}\n    </>\n  );\n}\n"],"names":["React"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Node.esm.js","sources":["../../../src/components/DependencyGraph/Node.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 React from 'react';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\nimport { DefaultNode } from './DefaultNode';\nimport { DependencyGraphTypes as Types } from './types';\nimport { NODE_TEST_ID } from './constants';\nimport dagre from 'dagre';\n\n/** @public */\nexport type DependencyGraphNodeClassKey = 'node';\n\nconst useStyles = makeStyles(\n  theme => ({\n    node: {\n      transition: `${theme.transitions.duration.shortest}ms`,\n    },\n  }),\n  { name: 'BackstageDependencyGraphNode' },\n);\n\nexport type GraphNode<T> = dagre.Node<Types.DependencyNode<T>>;\n\nexport type NodeComponentProps<T> = {\n  node: GraphNode<T>;\n  render?: Types.RenderNodeFunction<T>;\n  setNode: dagre.graphlib.Graph['setNode'];\n};\n\nconst renderDefault = (props: Types.RenderNodeProps) => (\n  <DefaultNode {...props} />\n);\n\nexport function Node<T>({\n  render = renderDefault,\n  setNode,\n  node,\n}: NodeComponentProps<T>) {\n  const { width, height, x = 0, y = 0 } = node;\n  const nodeProps: Types.DependencyNode<T> = node;\n  const classes = useStyles();\n  const nodeRef = React.useRef<SVGGElement | null>(null);\n\n  React.useLayoutEffect(() => {\n    // set the node width to the actual rendered width to properly layout graph\n    if (nodeRef.current) {\n      let { height: renderedHeight, width: renderedWidth } =\n        nodeRef.current.getBBox();\n      renderedHeight = Math.round(renderedHeight);\n      renderedWidth = Math.round(renderedWidth);\n\n      if (renderedHeight !== height || renderedWidth !== width) {\n        setNode(node.id, {\n          ...node,\n          height: renderedHeight,\n          width: renderedWidth,\n        });\n      }\n    }\n  }, [node, width, height, setNode]);\n\n  return (\n    <g\n      ref={nodeRef}\n      data-testid={NODE_TEST_ID}\n      className={classes.node}\n      transform={`translate(${x - width / 2},${y - height / 2})`}\n    >\n      {render({ node: nodeProps })}\n    </g>\n  );\n}\n"],"names":["React"],"mappings":";;;;;AA0BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,CAAA,EAAG,KAAM,CAAA,WAAA,CAAY,SAAS,QAAQ,CAAA,EAAA;AAAA;AACpD,GACF,CAAA;AAAA,EACA,EAAE,MAAM,8BAA+B;AACzC,CAAA;AAUA,MAAM,gBAAgB,CAAC,KAAA,qBACpBA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAGnB,SAAS,IAAQ,CAAA;AAAA,EACtB,MAAS,GAAA,aAAA;AAAA,EACT,OAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAA,MAAM,EAAE,KAAO,EAAA,MAAA,EAAQ,IAAI,CAAG,EAAA,CAAA,GAAI,GAAM,GAAA,IAAA;AACxC,EAAA,MAAM,SAAqC,GAAA,IAAA;AAC3C,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,OAAA,GAAUA,cAAM,CAAA,MAAA,CAA2B,IAAI,CAAA;AAErD,EAAAA,cAAA,CAAM,gBAAgB,MAAM;AAE1B,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAI,IAAA,EAAE,QAAQ,cAAgB,EAAA,KAAA,EAAO,eACnC,GAAA,OAAA,CAAQ,QAAQ,OAAQ,EAAA;AAC1B,MAAiB,cAAA,GAAA,IAAA,CAAK,MAAM,cAAc,CAAA;AAC1C,MAAgB,aAAA,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA;AAExC,MAAI,IAAA,cAAA,KAAmB,MAAU,IAAA,aAAA,KAAkB,KAAO,EAAA;AACxD,QAAA,OAAA,CAAQ,KAAK,EAAI,EAAA;AAAA,UACf,GAAG,IAAA;AAAA,UACH,MAAQ,EAAA,cAAA;AAAA,UACR,KAAO,EAAA;AAAA,SACR,CAAA;AAAA;AACH;AACF,KACC,CAAC,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,OAAO,CAAC,CAAA;AAEjC,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,OAAA;AAAA,MACL,aAAa,EAAA,YAAA;AAAA,MACb,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,SAAA,EAAW,aAAa,CAAI,GAAA,KAAA,GAAQ,CAAC,CAAI,CAAA,EAAA,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAAA,KAAA;AAAA,IAEtD,MAAO,CAAA,EAAE,IAAM,EAAA,SAAA,EAAW;AAAA,GAC7B;AAEJ;;;;"}
+{"version":3,"file":"Node.esm.js","sources":["../../../src/components/DependencyGraph/Node.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 React from 'react';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\nimport { DefaultNode } from './DefaultNode';\nimport { DependencyGraphTypes as Types } from './types';\nimport { NODE_TEST_ID } from './constants';\nimport dagre from '@dagrejs/dagre';\n\n/** @public */\nexport type DependencyGraphNodeClassKey = 'node';\n\nconst useStyles = makeStyles(\n  theme => ({\n    node: {\n      transition: `${theme.transitions.duration.shortest}ms`,\n    },\n  }),\n  { name: 'BackstageDependencyGraphNode' },\n);\n\nexport type GraphNode<T> = dagre.Node<Types.DependencyNode<T>>;\n\nexport type NodeComponentProps<T> = {\n  node: GraphNode<T>;\n  render?: Types.RenderNodeFunction<T>;\n  setNode: dagre.graphlib.Graph['setNode'];\n};\n\nconst renderDefault = (props: Types.RenderNodeProps) => (\n  <DefaultNode {...props} />\n);\n\nexport function Node<T>({\n  render = renderDefault,\n  setNode,\n  node,\n}: NodeComponentProps<T>) {\n  const { width, height, x = 0, y = 0 } = node;\n  const nodeProps: Types.DependencyNode<T> = node;\n  const classes = useStyles();\n  const nodeRef = React.useRef<SVGGElement | null>(null);\n\n  React.useLayoutEffect(() => {\n    // set the node width to the actual rendered width to properly layout graph\n    if (nodeRef.current) {\n      let { height: renderedHeight, width: renderedWidth } =\n        nodeRef.current.getBBox();\n      renderedHeight = Math.round(renderedHeight);\n      renderedWidth = Math.round(renderedWidth);\n\n      if (renderedHeight !== height || renderedWidth !== width) {\n        setNode(node.id, {\n          ...node,\n          height: renderedHeight,\n          width: renderedWidth,\n        });\n      }\n    }\n  }, [node, width, height, setNode]);\n\n  return (\n    <g\n      ref={nodeRef}\n      data-testid={NODE_TEST_ID}\n      className={classes.node}\n      transform={`translate(${x - width / 2},${y - height / 2})`}\n    >\n      {render({ node: nodeProps })}\n    </g>\n  );\n}\n"],"names":["React"],"mappings":";;;;;AA0BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,CAAA,EAAG,KAAM,CAAA,WAAA,CAAY,SAAS,QAAQ,CAAA,EAAA;AAAA;AACpD,GACF,CAAA;AAAA,EACA,EAAE,MAAM,8BAA+B;AACzC,CAAA;AAUA,MAAM,gBAAgB,CAAC,KAAA,qBACpBA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAGnB,SAAS,IAAQ,CAAA;AAAA,EACtB,MAAS,GAAA,aAAA;AAAA,EACT,OAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAA,MAAM,EAAE,KAAO,EAAA,MAAA,EAAQ,IAAI,CAAG,EAAA,CAAA,GAAI,GAAM,GAAA,IAAA;AACxC,EAAA,MAAM,SAAqC,GAAA,IAAA;AAC3C,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,OAAA,GAAUA,cAAM,CAAA,MAAA,CAA2B,IAAI,CAAA;AAErD,EAAAA,cAAA,CAAM,gBAAgB,MAAM;AAE1B,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAI,IAAA,EAAE,QAAQ,cAAgB,EAAA,KAAA,EAAO,eACnC,GAAA,OAAA,CAAQ,QAAQ,OAAQ,EAAA;AAC1B,MAAiB,cAAA,GAAA,IAAA,CAAK,MAAM,cAAc,CAAA;AAC1C,MAAgB,aAAA,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA;AAExC,MAAI,IAAA,cAAA,KAAmB,MAAU,IAAA,aAAA,KAAkB,KAAO,EAAA;AACxD,QAAA,OAAA,CAAQ,KAAK,EAAI,EAAA;AAAA,UACf,GAAG,IAAA;AAAA,UACH,MAAQ,EAAA,cAAA;AAAA,UACR,KAAO,EAAA;AAAA,SACR,CAAA;AAAA;AACH;AACF,KACC,CAAC,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,OAAO,CAAC,CAAA;AAEjC,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,OAAA;AAAA,MACL,aAAa,EAAA,YAAA;AAAA,MACb,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,SAAA,EAAW,aAAa,CAAI,GAAA,KAAA,GAAQ,CAAC,CAAI,CAAA,EAAA,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAAA,KAAA;AAAA,IAEtD,MAAO,CAAA,EAAE,IAAM,EAAA,SAAA,EAAW;AAAA,GAC7B;AAEJ;;;;"}

package/dist/components/LogViewer/RealLogViewer.esm.js

@@ -2,7 +2,7 @@ import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import classNames from 'classnames';
-import React__default, { useRef, useMemo, useEffect } from 'react';
+import React__default, { useState, useMemo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
@@ -15,17 +15,27 @@ import { useLogViewerSelection } from './useLogViewerSelection.esm.js';
 
 function RealLogViewer(props) {
   const classes = useStyles({ classes: props.classes });
-  const listRef = useRef(null);
+  const [fixedListInstance, setFixedListInstance] = useState(null);
   const processor = useMemo(() => new AnsiProcessor(), []);
   const lines = processor.process(props.text);
   const search = useLogViewerSearch(lines);
   const selection = useLogViewerSelection(lines);
   const location = useLocation();
   useEffect(() => {
-    if (search.resultLine !== void 0 && listRef.current) {
-      listRef.current.scrollToItem(search.resultLine - 1, "center");
+    if (fixedListInstance) {
+      fixedListInstance.scrollToItem(lines.length - 1, "end");
     }
-  }, [search.resultLine]);
+  }, [fixedListInstance, lines]);
+  useEffect(() => {
+    if (!fixedListInstance) {
+      return;
+    }
+    if (search.resultLine) {
+      fixedListInstance.scrollToItem(search.resultLine - 1, "center");
+    } else {
+      fixedListInstance.scrollToItem(lines.length - 1, "end");
+    }
+  }, [fixedListInstance, search.resultLine, lines]);
   useEffect(() => {
     if (location.hash) {
       const line = parseInt(location.hash.replace(/\D/g, ""), 10);
@@ -38,7 +48,9 @@ function RealLogViewer(props) {
   return /* @__PURE__ */ React__default.createElement(AutoSizer, null, ({ height, width }) => /* @__PURE__ */ React__default.createElement(Box, { style: { width, height }, className: classes.root }, /* @__PURE__ */ React__default.createElement(Box, { className: classes.header }, /* @__PURE__ */ React__default.createElement(LogViewerControls, { ...search })), /* @__PURE__ */ React__default.createElement(
     FixedSizeList,
     {
-      ref: listRef,
+      ref: (instance) => {
+        setFixedListInstance(instance);
+      },
       className: classes.log,
       height: (height || 480) - HEADER_SIZE,
       width: width || 640,

package/dist/components/LogViewer/RealLogViewer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RealLogViewer.esm.js","sources":["../../../src/components/LogViewer/RealLogViewer.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 Box from '@material-ui/core/Box';\nimport IconButton from '@material-ui/core/IconButton';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport classnames from 'classnames';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { FixedSizeList } from 'react-window';\n\nimport { AnsiProcessor } from './AnsiProcessor';\nimport { LogLine } from './LogLine';\nimport { LogViewerControls } from './LogViewerControls';\nimport { HEADER_SIZE, useStyles } from './styles';\nimport { useLogViewerSearch } from './useLogViewerSearch';\nimport { useLogViewerSelection } from './useLogViewerSelection';\n\nexport interface RealLogViewerProps {\n  text: string;\n  classes?: { root?: string };\n}\n\nexport function RealLogViewer(props: RealLogViewerProps) {\n  const classes = useStyles({ classes: props.classes });\n  const listRef = useRef<FixedSizeList | null>(null);\n\n  // The processor keeps state that optimizes appending to the text\n  const processor = useMemo(() => new AnsiProcessor(), []);\n  const lines = processor.process(props.text);\n\n  const search = useLogViewerSearch(lines);\n  const selection = useLogViewerSelection(lines);\n  const location = useLocation();\n\n  useEffect(() => {\n    if (search.resultLine !== undefined && listRef.current) {\n      listRef.current.scrollToItem(search.resultLine - 1, 'center');\n    }\n  }, [search.resultLine]);\n\n  useEffect(() => {\n    if (location.hash) {\n      // #line-6 -> 6\n      const line = parseInt(location.hash.replace(/\\D/g, ''), 10);\n      selection.setSelection(line, false);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleSelectLine = (\n    line: number,\n    event: { shiftKey: boolean; preventDefault: () => void },\n  ) => {\n    selection.setSelection(line, event.shiftKey);\n  };\n\n  return (\n    <AutoSizer>\n      {({ height, width }: { height?: number; width?: number }) => (\n        <Box style={{ width, height }} className={classes.root}>\n          <Box className={classes.header}>\n            <LogViewerControls {...search} />\n          </Box>\n          <FixedSizeList\n            ref={listRef}\n            className={classes.log}\n            height={(height || 480) - HEADER_SIZE}\n            width={width || 640}\n            itemData={search.lines}\n            itemSize={20}\n            itemCount={search.lines.length}\n          >\n            {({ index, style, data }) => {\n              const line = data[index];\n              const { lineNumber } = line;\n              return (\n                <Box\n                  style={{ ...style }}\n                  className={classnames(classes.line, {\n                    [classes.lineSelected]: selection.isSelected(lineNumber),\n                  })}\n                >\n                  {selection.shouldShowButton(lineNumber) && (\n                    <IconButton\n                      data-testid=\"copy-button\"\n                      size=\"small\"\n                      className={classes.lineCopyButton}\n                      onClick={() => selection.copySelection()}\n                    >\n                      <CopyIcon fontSize=\"inherit\" />\n                    </IconButton>\n                  )}\n                  <a\n                    role=\"row\"\n                    target=\"_self\"\n                    href={`#line-${lineNumber}`}\n                    className={classes.lineNumber}\n                    onClick={event => handleSelectLine(lineNumber, event)}\n                    onKeyPress={event => handleSelectLine(lineNumber, event)}\n                  >\n                    {lineNumber}\n                  </a>\n                  <LogLine\n                    line={line}\n                    classes={classes}\n                    searchText={search.searchText}\n                    highlightResultIndex={\n                      search.resultLine === lineNumber\n                        ? search.resultLineIndex\n                        : undefined\n                    }\n                  />\n                </Box>\n              );\n            }}\n          </FixedSizeList>\n        </Box>\n      )}\n    </AutoSizer>\n  );\n}\n"],"names":["React","classnames"],"mappings":"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"}
+{"version":3,"file":"RealLogViewer.esm.js","sources":["../../../src/components/LogViewer/RealLogViewer.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 Box from '@material-ui/core/Box';\nimport IconButton from '@material-ui/core/IconButton';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport classnames from 'classnames';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { FixedSizeList } from 'react-window';\n\nimport { AnsiLine, AnsiProcessor } from './AnsiProcessor';\nimport { LogLine } from './LogLine';\nimport { LogViewerControls } from './LogViewerControls';\nimport { HEADER_SIZE, useStyles } from './styles';\nimport { useLogViewerSearch } from './useLogViewerSearch';\nimport { useLogViewerSelection } from './useLogViewerSelection';\n\nexport interface RealLogViewerProps {\n  text: string;\n  classes?: { root?: string };\n}\n\nexport function RealLogViewer(props: RealLogViewerProps) {\n  const classes = useStyles({ classes: props.classes });\n  const [fixedListInstance, setFixedListInstance] = useState<FixedSizeList<\n    AnsiLine[]\n  > | null>(null);\n\n  // The processor keeps state that optimizes appending to the text\n  const processor = useMemo(() => new AnsiProcessor(), []);\n  const lines = processor.process(props.text);\n\n  const search = useLogViewerSearch(lines);\n  const selection = useLogViewerSelection(lines);\n  const location = useLocation();\n\n  useEffect(() => {\n    if (fixedListInstance) {\n      fixedListInstance.scrollToItem(lines.length - 1, 'end');\n    }\n  }, [fixedListInstance, lines]);\n\n  useEffect(() => {\n    if (!fixedListInstance) {\n      return;\n    }\n    if (search.resultLine) {\n      fixedListInstance.scrollToItem(search.resultLine - 1, 'center');\n    } else {\n      fixedListInstance.scrollToItem(lines.length - 1, 'end');\n    }\n  }, [fixedListInstance, search.resultLine, lines]);\n\n  useEffect(() => {\n    if (location.hash) {\n      // #line-6 -> 6\n      const line = parseInt(location.hash.replace(/\\D/g, ''), 10);\n      selection.setSelection(line, false);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleSelectLine = (\n    line: number,\n    event: { shiftKey: boolean; preventDefault: () => void },\n  ) => {\n    selection.setSelection(line, event.shiftKey);\n  };\n\n  return (\n    <AutoSizer>\n      {({ height, width }: { height?: number; width?: number }) => (\n        <Box style={{ width, height }} className={classes.root}>\n          <Box className={classes.header}>\n            <LogViewerControls {...search} />\n          </Box>\n          <FixedSizeList\n            ref={(instance: FixedSizeList<AnsiLine[]>) => {\n              setFixedListInstance(instance);\n            }}\n            className={classes.log}\n            height={(height || 480) - HEADER_SIZE}\n            width={width || 640}\n            itemData={search.lines}\n            itemSize={20}\n            itemCount={search.lines.length}\n          >\n            {({ index, style, data }) => {\n              const line = data[index];\n              const { lineNumber } = line;\n              return (\n                <Box\n                  style={{ ...style }}\n                  className={classnames(classes.line, {\n                    [classes.lineSelected]: selection.isSelected(lineNumber),\n                  })}\n                >\n                  {selection.shouldShowButton(lineNumber) && (\n                    <IconButton\n                      data-testid=\"copy-button\"\n                      size=\"small\"\n                      className={classes.lineCopyButton}\n                      onClick={() => selection.copySelection()}\n                    >\n                      <CopyIcon fontSize=\"inherit\" />\n                    </IconButton>\n                  )}\n                  <a\n                    role=\"row\"\n                    target=\"_self\"\n                    href={`#line-${lineNumber}`}\n                    className={classes.lineNumber}\n                    onClick={event => handleSelectLine(lineNumber, event)}\n                    onKeyPress={event => handleSelectLine(lineNumber, event)}\n                  >\n                    {lineNumber}\n                  </a>\n                  <LogLine\n                    line={line}\n                    classes={classes}\n                    searchText={search.searchText}\n                    highlightResultIndex={\n                      search.resultLine === lineNumber\n                        ? search.resultLineIndex\n                        : undefined\n                    }\n                  />\n                </Box>\n              );\n            }}\n          </FixedSizeList>\n        </Box>\n      )}\n    </AutoSizer>\n  );\n}\n"],"names":["React","classnames"],"mappings":"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"}

package/dist/components/StructuredMetadataTable/StructuredMetadataTable.esm.js

@@ -1,8 +1,10 @@
 import React__default, { Fragment } from 'react';
-import { createStyles, withStyles } from '@material-ui/core/styles';
 import startCase from 'lodash/startCase';
 import Typography from '@material-ui/core/Typography';
 import { MetadataList, MetadataTable, MetadataTableItem, MetadataListItem } from './MetadataTable.esm.js';
+import { CodeSnippet } from '../CodeSnippet/CodeSnippet.esm.js';
+import jsyaml from 'js-yaml';
+import { createStyles, withStyles } from '@material-ui/core/styles';
 
 const listStyle = createStyles({
   root: {
@@ -37,8 +39,25 @@ function toValue(value, options, nested) {
   if (React__default.isValidElement(value)) {
     return /* @__PURE__ */ React__default.createElement(Fragment, null, value);
   }
-  if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-    return renderMap(value, options, nested);
+  if (value !== null && typeof value === "object") {
+    if (options.nestedValuesAsYaml) {
+      return /* @__PURE__ */ React__default.createElement(
+        CodeSnippet,
+        {
+          language: "yaml",
+          text: jsyaml.dump(value),
+          customStyle: {
+            background: "transparent",
+            lineHeight: "1.4",
+            padding: "0",
+            margin: 0
+          }
+        }
+      );
+    }
+    if (!Array.isArray(value)) {
+      return renderMap(value, options, nested);
+    }
   }
   if (Array.isArray(value)) {
     return renderList(value, options, nested);
@@ -60,9 +79,10 @@ function mapToItems(info, options) {
   return Object.keys(info).map((key) => /* @__PURE__ */ React__default.createElement(TableItem, { key, title: key, value: info[key], options }));
 }
 function StructuredMetadataTable(props) {
-  const { metadata, dense = true, options = {} } = props;
+  const { metadata, dense = true, options } = props;
   const metadataItems = mapToItems(metadata, {
     titleFormat: startCase,
+    nestedValuesAsYaml: options?.nestedValuesAsYaml ?? false,
     ...options
   });
   return /* @__PURE__ */ React__default.createElement(MetadataTable, { dense }, metadataItems);

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

@@ -1 +1 @@
-{"version":3,"file":"StructuredMetadataTable.esm.js","sources":["../../../src/components/StructuredMetadataTable/StructuredMetadataTable.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 React, { Fragment, ReactElement } from 'react';\nimport {\n  withStyles,\n  createStyles,\n  WithStyles,\n  Theme,\n} from '@material-ui/core/styles';\nimport startCase from 'lodash/startCase';\nimport Typography from '@material-ui/core/Typography';\n\nimport {\n  MetadataTable,\n  MetadataTableItem,\n  MetadataList,\n  MetadataListItem,\n} from './MetadataTable';\n\nexport type StructuredMetadataTableListClassKey = 'root';\n\nconst listStyle = createStyles({\n  root: {\n    margin: '0 0',\n    listStyleType: 'none',\n  },\n});\n\nexport type StructuredMetadataTableNestedListClassKey = 'root';\n\nconst nestedListStyle = (theme: Theme) =>\n  createStyles({\n    root: {\n      ...listStyle.root,\n      paddingLeft: theme.spacing(1),\n    },\n  });\n\ninterface StyleProps extends WithStyles {\n  children?: React.ReactNode;\n}\n// Sub Components\nconst StyledList = withStyles(listStyle, {\n  name: 'BackstageStructuredMetadataTableList',\n})(({ classes, children }: StyleProps) => (\n  <MetadataList classes={classes}>{children}</MetadataList>\n));\nconst StyledNestedList = withStyles(nestedListStyle, {\n  name: 'BackstageStructuredMetadataTableNestedList',\n})(({ classes, children }: StyleProps) => (\n  <MetadataList classes={classes}>{children}</MetadataList>\n));\n\nfunction renderList(list: Array<any>, options: Options, nested: boolean) {\n  const values = list.map((item: any, index: number) => (\n    <MetadataListItem key={index}>\n      {toValue(item, options, nested)}\n    </MetadataListItem>\n  ));\n  return nested ? (\n    <StyledNestedList>{values}</StyledNestedList>\n  ) : (\n    <StyledList>{values}</StyledList>\n  );\n}\n\nfunction renderMap(\n  map: { [key: string]: any },\n  options: Options,\n  nested: boolean,\n) {\n  const values = Object.keys(map).map(key => {\n    const value = toValue(map[key], options, true);\n    return (\n      <MetadataListItem key={key}>\n        <Typography variant=\"body2\" component=\"span\">\n          {`${options.titleFormat(key)}: `}\n        </Typography>\n        {value}\n      </MetadataListItem>\n    );\n  });\n\n  return nested ? (\n    <StyledNestedList>{values}</StyledNestedList>\n  ) : (\n    <StyledList>{values}</StyledList>\n  );\n}\n\nfunction toValue(\n  value: ReactElement | object | Array<any> | boolean,\n  options: Options,\n  nested: boolean,\n) {\n  if (React.isValidElement(value)) {\n    return <Fragment>{value}</Fragment>;\n  }\n\n  if (value !== null && typeof value === 'object' && !Array.isArray(value)) {\n    return renderMap(value, options, nested);\n  }\n\n  if (Array.isArray(value)) {\n    return renderList(value, options, nested);\n  }\n\n  if (typeof value === 'boolean') {\n    return <Fragment>{value ? '✅' : '❌'}</Fragment>;\n  }\n\n  return (\n    <Typography variant=\"body2\" component=\"span\">\n      {value}\n    </Typography>\n  );\n}\nconst ItemValue = ({ value, options }: { value: any; options: Options }) => (\n  <Fragment>{toValue(value, options, false)}</Fragment>\n);\n\nconst TableItem = ({\n  title,\n  value,\n  options,\n}: {\n  title: string;\n  value: any;\n  options: Options;\n}) => {\n  return (\n    <MetadataTableItem title={options.titleFormat(title)}>\n      <ItemValue value={value} options={options} />\n    </MetadataTableItem>\n  );\n};\n\nfunction mapToItems(info: { [key: string]: string }, options: Options) {\n  return Object.keys(info).map(key => (\n    <TableItem key={key} title={key} value={info[key]} options={options} />\n  ));\n}\n\n/** @public */\nexport interface StructuredMetadataTableProps {\n  metadata: { [key: string]: any };\n  dense?: boolean;\n  options?: {\n    /**\n     * Function to format the keys from the `metadata` object. Defaults to\n     * startCase from the lodash library.\n     * @param key - A key within the `metadata`\n     * @returns Formatted key\n     */\n    titleFormat?: (key: string) => string;\n  };\n}\n\ntype Options = Required<NonNullable<StructuredMetadataTableProps['options']>>;\n\n/** @public */\nexport function StructuredMetadataTable(props: StructuredMetadataTableProps) {\n  const { metadata, dense = true, options = {} } = props;\n  const metadataItems = mapToItems(metadata, {\n    titleFormat: startCase,\n    ...options,\n  });\n  return <MetadataTable dense={dense}>{metadataItems}</MetadataTable>;\n}\n"],"names":["React"],"mappings":";;;;;;AAmCA,MAAM,YAAY,YAAa,CAAA;AAAA,EAC7B,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,KAAA;AAAA,IACR,aAAe,EAAA;AAAA;AAEnB,CAAC,CAAA;AAID,MAAM,eAAA,GAAkB,CAAC,KAAA,KACvB,YAAa,CAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,GAAG,SAAU,CAAA,IAAA;AAAA,IACb,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAEhC,CAAC,CAAA;AAMH,MAAM,UAAA,GAAa,WAAW,SAAW,EAAA;AAAA,EACvC,IAAM,EAAA;AACR,CAAC,CAAA,CAAE,CAAC,EAAE,OAAS,EAAA,QAAA,uBACZA,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,OAAmB,EAAA,EAAA,QAAS,CAC3C,CAAA;AACD,MAAM,gBAAA,GAAmB,WAAW,eAAiB,EAAA;AAAA,EACnD,IAAM,EAAA;AACR,CAAC,CAAA,CAAE,CAAC,EAAE,OAAS,EAAA,QAAA,uBACZA,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,OAAmB,EAAA,EAAA,QAAS,CAC3C,CAAA;AAED,SAAS,UAAA,CAAW,IAAkB,EAAA,OAAA,EAAkB,MAAiB,EAAA;AACvE,EAAA,MAAM,MAAS,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,MAAW,KAClC,qBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,GAAA,EAAK,SACpB,OAAQ,CAAA,IAAA,EAAM,OAAS,EAAA,MAAM,CAChC,CACD,CAAA;AACD,EAAA,OAAO,yBACJA,cAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,IAAA,EAAkB,MAAO,CAE1B,mBAAAA,cAAA,CAAA,aAAA,CAAC,kBAAY,MAAO,CAAA;AAExB;AAEA,SAAS,SAAA,CACP,GACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,SAAS,MAAO,CAAA,IAAA,CAAK,GAAG,CAAA,CAAE,IAAI,CAAO,GAAA,KAAA;AACzC,IAAA,MAAM,QAAQ,OAAQ,CAAA,GAAA,CAAI,GAAG,CAAA,EAAG,SAAS,IAAI,CAAA;AAC7C,IAAA,oDACG,gBAAiB,EAAA,EAAA,GAAA,EAAA,kBACfA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,OAAQ,EAAA,SAAA,EAAU,MACnC,EAAA,EAAA,CAAA,EAAG,QAAQ,WAAY,CAAA,GAAG,CAAC,CAAA,EAAA,CAC9B,GACC,KACH,CAAA;AAAA,GAEH,CAAA;AAED,EAAA,OAAO,yBACJA,cAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,IAAA,EAAkB,MAAO,CAE1B,mBAAAA,cAAA,CAAA,aAAA,CAAC,kBAAY,MAAO,CAAA;AAExB;AAEA,SAAS,OAAA,CACP,KACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAI,IAAAA,cAAA,CAAM,cAAe,CAAA,KAAK,CAAG,EAAA;AAC/B,IAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAU,KAAM,CAAA;AAAA;AAG1B,EAAI,IAAA,KAAA,KAAU,QAAQ,OAAO,KAAA,KAAU,YAAY,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxE,IAAO,OAAA,SAAA,CAAU,KAAO,EAAA,OAAA,EAAS,MAAM,CAAA;AAAA;AAGzC,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,IAAO,OAAA,UAAA,CAAW,KAAO,EAAA,OAAA,EAAS,MAAM,CAAA;AAAA;AAG1C,EAAI,IAAA,OAAO,UAAU,SAAW,EAAA;AAC9B,IAAA,uBAAQA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAU,KAAQ,GAAA,QAAA,GAAM,QAAI,CAAA;AAAA;AAGtC,EAAA,oDACG,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,SAAA,EAAU,UACnC,KACH,CAAA;AAEJ;AACA,MAAM,SAAY,GAAA,CAAC,EAAE,KAAA,EAAO,OAAQ,EAAA,qBACjCA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAU,OAAQ,CAAA,KAAA,EAAO,OAAS,EAAA,KAAK,CAAE,CAAA;AAG5C,MAAM,YAAY,CAAC;AAAA,EACjB,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAIM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,iBAAkB,EAAA,EAAA,KAAA,EAAO,OAAQ,CAAA,WAAA,CAAY,KAAK,CAAA,EAAA,kBAChDA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,KAAc,EAAA,OAAA,EAAkB,CAC7C,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAA,CAAW,MAAiC,OAAkB,EAAA;AACrE,EAAA,OAAO,OAAO,IAAK,CAAA,IAAI,CAAE,CAAA,GAAA,CAAI,yBAC1BA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,GAAU,EAAA,KAAA,EAAO,KAAK,KAAO,EAAA,IAAA,CAAK,GAAG,CAAA,EAAG,SAAkB,CACtE,CAAA;AACH;AAoBO,SAAS,wBAAwB,KAAqC,EAAA;AAC3E,EAAA,MAAM,EAAE,QAAU,EAAA,KAAA,GAAQ,MAAM,OAAU,GAAA,IAAO,GAAA,KAAA;AACjD,EAAM,MAAA,aAAA,GAAgB,WAAW,QAAU,EAAA;AAAA,IACzC,WAAa,EAAA,SAAA;AAAA,IACb,GAAG;AAAA,GACJ,CAAA;AACD,EAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,KAAA,EAAA,EAAe,aAAc,CAAA;AACrD;;;;"}
+{"version":3,"file":"StructuredMetadataTable.esm.js","sources":["../../../src/components/StructuredMetadataTable/StructuredMetadataTable.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 React, { Fragment, ReactElement } from 'react';\nimport startCase from 'lodash/startCase';\nimport Typography from '@material-ui/core/Typography';\n\nimport {\n  MetadataList,\n  MetadataListItem,\n  MetadataTable,\n  MetadataTableItem,\n} from './MetadataTable';\nimport { CodeSnippet } from '../CodeSnippet';\nimport jsyaml from 'js-yaml';\nimport {\n  Theme,\n  createStyles,\n  WithStyles,\n  withStyles,\n} from '@material-ui/core/styles';\n\nexport type StructuredMetadataTableListClassKey = 'root';\n\nconst listStyle = createStyles({\n  root: {\n    margin: '0 0',\n    listStyleType: 'none',\n  },\n});\n\nexport type StructuredMetadataTableNestedListClassKey = 'root';\nconst nestedListStyle = (theme: Theme) =>\n  createStyles({\n    root: {\n      ...listStyle.root,\n      paddingLeft: theme.spacing(1),\n    },\n  });\n\ninterface StyleProps extends WithStyles {\n  children?: React.ReactNode;\n}\n// Sub Components\nconst StyledList = withStyles(listStyle, {\n  name: 'BackstageStructuredMetadataTableList',\n})(({ classes, children }: StyleProps) => (\n  <MetadataList classes={classes}>{children}</MetadataList>\n));\nconst StyledNestedList = withStyles(nestedListStyle, {\n  name: 'BackstageStructuredMetadataTableNestedList',\n})(({ classes, children }: StyleProps) => (\n  <MetadataList classes={classes}>{children}</MetadataList>\n));\n\nfunction renderList(list: Array<any>, options: Options, nested: boolean) {\n  const values = list.map((item: any, index: number) => (\n    <MetadataListItem key={index}>\n      {toValue(item, options, nested)}\n    </MetadataListItem>\n  ));\n  return nested ? (\n    <StyledNestedList>{values}</StyledNestedList>\n  ) : (\n    <StyledList>{values}</StyledList>\n  );\n}\n\nfunction renderMap(\n  map: { [key: string]: any },\n  options: Options,\n  nested: boolean,\n) {\n  const values = Object.keys(map).map(key => {\n    const value = toValue(map[key], options, true);\n    return (\n      <MetadataListItem key={key}>\n        <Typography variant=\"body2\" component=\"span\">\n          {`${options.titleFormat(key)}: `}\n        </Typography>\n        {value}\n      </MetadataListItem>\n    );\n  });\n\n  return nested ? (\n    <StyledNestedList>{values}</StyledNestedList>\n  ) : (\n    <StyledList>{values}</StyledList>\n  );\n}\n\nfunction toValue(\n  value: ReactElement | object | Array<any> | boolean,\n  options: Options,\n  nested: boolean,\n) {\n  if (React.isValidElement(value)) {\n    return <Fragment>{value}</Fragment>;\n  }\n  if (value !== null && typeof value === 'object') {\n    if (options.nestedValuesAsYaml) {\n      return (\n        <CodeSnippet\n          language=\"yaml\"\n          text={jsyaml.dump(value)}\n          customStyle={{\n            background: 'transparent',\n            lineHeight: '1.4',\n            padding: '0',\n            margin: 0,\n          }}\n        />\n      );\n    }\n    if (!Array.isArray(value)) {\n      return renderMap(value, options, nested);\n    }\n  }\n\n  if (Array.isArray(value)) {\n    return renderList(value, options, nested);\n  }\n\n  if (typeof value === 'boolean') {\n    return <Fragment>{value ? '✅' : '❌'}</Fragment>;\n  }\n  return (\n    <Typography variant=\"body2\" component=\"span\">\n      {value}\n    </Typography>\n  );\n}\nconst ItemValue = ({ value, options }: { value: any; options: Options }) => (\n  <Fragment>{toValue(value, options, false)}</Fragment>\n);\n\nconst TableItem = ({\n  title,\n  value,\n  options,\n}: {\n  title: string;\n  value: any;\n  options: Options;\n}) => {\n  return (\n    <MetadataTableItem title={options.titleFormat(title)}>\n      <ItemValue value={value} options={options} />\n    </MetadataTableItem>\n  );\n};\n\nfunction mapToItems(info: { [key: string]: string }, options: Options) {\n  return Object.keys(info).map(key => (\n    <TableItem key={key} title={key} value={info[key]} options={options} />\n  ));\n}\n\n/** @public */\nexport interface StructuredMetadataTableProps {\n  metadata: { [key: string]: any };\n  dense?: boolean;\n  options?: {\n    /**\n     * Function to format the keys from the `metadata` object. Defaults to\n     * startCase from the lodash library.\n     * @param key - A key within the `metadata`\n     * @returns Formatted key\n     */\n    titleFormat?: (key: string) => string;\n    nestedValuesAsYaml?: boolean;\n  };\n}\n\ntype Options = Required<NonNullable<StructuredMetadataTableProps['options']>>;\n\n/** @public */\nexport function StructuredMetadataTable(props: StructuredMetadataTableProps) {\n  const { metadata, dense = true, options } = props;\n  const metadataItems = mapToItems(metadata, {\n    titleFormat: startCase,\n    nestedValuesAsYaml: options?.nestedValuesAsYaml ?? false,\n    ...options,\n  });\n  return <MetadataTable dense={dense}>{metadataItems}</MetadataTable>;\n}\n"],"names":["React"],"mappings":"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"}

package/dist/index.d.ts

@@ -1113,6 +1113,7 @@ interface StructuredMetadataTableProps {
          * @returns Formatted key
          */
         titleFormat?: (key: string) => string;
+        nestedValuesAsYaml?: boolean;
     };
 }
 /** @public */

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

@@ -27,7 +27,7 @@ import '@material-ui/icons/AddCircleOutline';
 import 'd3-zoom';
 import 'd3-selection';
 import '@material-ui/core/styles/useTheme';
-import 'dagre';
+import '@dagrejs/dagre';
 import 'lodash/debounce';
 import '../../components/DependencyGraph/types.esm.js';
 import '../../components/DependencyGraph/Node.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.16.3",
+  "version": "0.16.4-next.1",
   "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
@@ -66,11 +66,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/config": "^1.3.2",
-    "@backstage/core-plugin-api": "^1.10.3",
-    "@backstage/errors": "^1.2.7",
-    "@backstage/theme": "^0.6.3",
-    "@backstage/version-bridge": "^1.0.10",
+    "@backstage/config": "1.3.2",
+    "@backstage/core-plugin-api": "1.10.4-next.0",
+    "@backstage/errors": "1.2.7",
+    "@backstage/theme": "0.6.4-next.0",
+    "@backstage/version-bridge": "1.0.11-next.0",
+    "@dagrejs/dagre": "^1.1.4",
     "@date-io/core": "^1.3.13",
     "@material-table/core": "^3.1.0",
     "@material-ui/core": "^4.12.2",
@@ -84,7 +85,7 @@
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "dagre": "^0.8.5",
+    "js-yaml": "^4.1.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
     "lodash": "^4.17.21",
@@ -105,10 +106,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@backstage/app-defaults": "^1.5.16",
-    "@backstage/cli": "^0.29.5",
-    "@backstage/core-app-api": "^1.15.4",
-    "@backstage/test-utils": "^1.7.4",
+    "@backstage/app-defaults": "1.5.17-next.1",
+    "@backstage/cli": "0.30.0-next.2",
+    "@backstage/core-app-api": "1.15.5-next.0",
+    "@backstage/test-utils": "1.7.5-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/user-event": "^14.0.0",
@@ -117,7 +118,6 @@
     "@types/d3-selection": "^3.0.1",
     "@types/d3-shape": "^3.0.1",
     "@types/d3-zoom": "^3.0.1",
-    "@types/dagre": "^0.7.44",
     "@types/google-protobuf": "^3.7.2",
     "@types/react": "^18.0.0",
     "@types/react-helmet": "^6.1.0",
@@ -133,10 +133,10 @@
     "react-router-dom": "^6.3.0"
   },
   "peerDependencies": {
-    "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.3.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {