Merge pull request #31597 from backstage/rugvip/vis

app-visualizer: fix tree rendering and add to create-app

.changeset/eighty-results-prove.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app-visualizer': patch
+---
+
+Improve tree visualizer to use a horizontal layout and fill the content space.

.changeset/legal-weeks-walk.md

@@ -0,0 +1,5 @@
+---
+'@backstage/create-app': patch
+---
+
+Added `@backstage/plugin-app-visualizer` to the app in the `--next` template.

packages/create-app/src/lib/versions.ts

@@ -53,6 +53,7 @@ import { version as repoTools } from '../../../repo-tools/package.json';
 import { version as ui } from '../../../ui/package.json';
 
 import { version as pluginApiDocs } from '../../../../plugins/api-docs/package.json';
+import { version as pluginAppVisualizer } from '../../../../plugins/app-visualizer/package.json';
 import { version as pluginAppBackend } from '../../../../plugins/app-backend/package.json';
 import { version as pluginAuthBackend } from '../../../../plugins/auth-backend/package.json';
 import { version as pluginAuthBackendModuleGithubProvider } from '../../../../plugins/auth-backend-module-github-provider/package.json';
@@ -117,6 +118,7 @@ export const packageVersions = {
   '@backstage/repo-tools': repoTools,
   '@backstage/plugin-api-docs': pluginApiDocs,
   '@backstage/plugin-app-backend': pluginAppBackend,
+  '@backstage/plugin-app-visualizer': pluginAppVisualizer,
   '@backstage/plugin-auth-backend': pluginAuthBackend,
   '@backstage/plugin-auth-backend-module-github-provider':
     pluginAuthBackendModuleGithubProvider,

packages/create-app/templates/next-app/packages/app/package.json.hbs

@@ -21,6 +21,7 @@
     "@backstage/frontend-defaults": "^{{ version '@backstage/frontend-defaults'}}",
     "@backstage/frontend-plugin-api": "^{{ version '@backstage/frontend-plugin-api'}}",
     "@backstage/integration-react": "^{{ version '@backstage/integration-react'}}",
+    "@backstage/plugin-app-visualizer": "^{{ version '@backstage/plugin-app-visualizer'}}",
     "@backstage/plugin-catalog": "^{{ version '@backstage/plugin-catalog'}}",
     "@backstage/plugin-notifications": "^{{ version '@backstage/plugin-notifications'}}",
     "@backstage/plugin-org": "^{{ version '@backstage/plugin-org'}}",

plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx

@@ -153,18 +153,22 @@ export function TreeVisualizer({ tree }: { tree: AppTree }) {
   const graphData = useMemo(() => resolveGraphData(tree), [tree]);
 
   return (
-    <Box height="100%" flex="1 1 100%" flexDirection="column" overflow="hidden">
+    <Box
+      flex="1 1 0"
+      display="flex"
+      justifyContent="stretch"
+      alignItems="stretch"
+      overflow="hidden"
+    >
       <DependencyGraph
         fit="contain"
-        style={{ height: '100%', width: '100%' }}
         {...graphData}
         nodeMargin={10}
         rankMargin={50}
         paddingX={50}
         renderNode={Node}
-        align={DependencyGraphTypes.Alignment.DOWN_RIGHT}
         ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}
-        direction={DependencyGraphTypes.Direction.TOP_BOTTOM}
+        direction={DependencyGraphTypes.Direction.LEFT_RIGHT}
       />
     </Box>
   );