revert viewBox back on DependencyGraph and add allowFullscreen prop to EntityRelationsGraph

Signed-off-by: Antonio Ereiz <antonio.ereiz@gmail.com>

.changeset/real-trains-visit.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog-graph': patch
+---
+
+Reverted back viewbox to old values. Also, added fullScreen prop to EntityCatalogGraphCard

packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx

@@ -533,7 +533,7 @@ export function DependencyGraph<NodeData, EdgeData>(
               height={graphHeight}
               y={maxHeight / 2 - graphHeight / 2}
               x={maxWidth / 2 - graphWidth / 2}
-              viewBox={`-25 -25 ${graphWidth + 50} ${graphHeight + 50}`}
+              viewBox={`0 0 ${graphWidth} ${graphHeight}`}
             >
               {graphEdges.map(e => {
                 const edge = graph.current.edge(e) as GraphEdge<EdgeData>;

plugins/catalog-graph/report.api.md

@@ -182,6 +182,7 @@ export type EntityRelationsGraphProps = {
   renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;
   curve?: 'curveStepBefore' | 'curveMonotoneX';
   showArrowHeads?: boolean;
+  allowFullscreen?: boolean;
 };
 
 // @public

plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx

@@ -92,6 +92,7 @@ export type EntityRelationsGraphProps = {
   renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;
   curve?: 'curveStepBefore' | 'curveMonotoneX';
   showArrowHeads?: boolean;
+  allowFullscreen?: boolean;
 };
 
 /**
@@ -118,6 +119,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {
     renderEdge,
     curve,
     showArrowHeads,
+    allowFullscreen,
   } = props;
 
   const theme = useTheme();
@@ -169,6 +171,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {
           zoom={zoom}
           curve={curve}
           showArrowHeads={showArrowHeads}
+          allowFullscreen={allowFullscreen}
         />
       )}
     </div>