@backstage/plugin-app-visualizer 0.1.5 → 0.1.6-next.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @backstage/plugin-app-visualizer
 
+## 0.1.6-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.14.5-next.0
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/frontend-plugin-api@0.6.5-next.0
+
 ## 0.1.5
 
 ### Patch Changes

package/dist/components/AppVisualizerPage/AppVisualizerPage.esm.js

@@ -0,0 +1,66 @@
+import { Page, Header, Content, HeaderTabs } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { appTreeApiRef } from '@backstage/frontend-plugin-api';
+import Box from '@material-ui/core/Box';
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { DetailedVisualizer } from './DetailedVisualizer.esm.js';
+import { TextVisualizer } from './TextVisualizer.esm.js';
+import { TreeVisualizer } from './TreeVisualizer.esm.js';
+import { useLocation, useRoutes, useParams, matchRoutes, useNavigate } from 'react-router-dom';
+
+function AppVisualizerPage() {
+  var _a;
+  const appTreeApi = useApi(appTreeApiRef);
+  const { tree } = appTreeApi.getTree();
+  const tabs = useMemo(
+    () => [
+      {
+        id: "tree",
+        path: "tree",
+        label: "Tree",
+        element: /* @__PURE__ */ React.createElement(TreeVisualizer, { tree })
+      },
+      {
+        id: "detailed",
+        path: "detailed",
+        label: "Detailed",
+        element: /* @__PURE__ */ React.createElement(DetailedVisualizer, { tree })
+      },
+      {
+        id: "text",
+        path: "text",
+        label: "Text",
+        element: /* @__PURE__ */ React.createElement(TextVisualizer, { tree })
+      }
+    ],
+    [tree]
+  );
+  const location = useLocation();
+  const element = useRoutes(tabs, location);
+  const currentPath = `/${useParams()["*"]}`;
+  const [matchedRoute] = (_a = matchRoutes(tabs, currentPath)) != null ? _a : [];
+  const currentTabIndex = matchedRoute ? tabs.findIndex((t) => t.path === matchedRoute.route.path) : 0;
+  const navigate = useNavigate();
+  const handleTabChange = useCallback(
+    (index) => {
+      navigate(tabs[index].id);
+    },
+    [navigate, tabs]
+  );
+  useEffect(() => {
+    if (!element) {
+      navigate(tabs[0].path);
+    }
+  }, [element, navigate, tabs]);
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "App Visualizer" }), /* @__PURE__ */ React.createElement(Content, { noPadding: true, stretch: true }, /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React.createElement(
+    HeaderTabs,
+    {
+      tabs,
+      selectedIndex: currentTabIndex,
+      onChange: handleTabChange
+    }
+  ), element)));
+}
+
+export { AppVisualizerPage };
+//# sourceMappingURL=AppVisualizerPage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppVisualizerPage.esm.js","sources":["../../../src/components/AppVisualizerPage/AppVisualizerPage.tsx"],"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 { Content, Header, HeaderTabs, Page } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { appTreeApiRef } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { DetailedVisualizer } from './DetailedVisualizer';\nimport { TextVisualizer } from './TextVisualizer';\nimport { TreeVisualizer } from './TreeVisualizer';\nimport {\n  matchRoutes,\n  useLocation,\n  useNavigate,\n  useParams,\n  useRoutes,\n} from 'react-router-dom';\n\nexport function AppVisualizerPage() {\n  const appTreeApi = useApi(appTreeApiRef);\n  const { tree } = appTreeApi.getTree();\n\n  const tabs = useMemo(\n    () => [\n      {\n        id: 'tree',\n        path: 'tree',\n        label: 'Tree',\n        element: <TreeVisualizer tree={tree} />,\n      },\n      {\n        id: 'detailed',\n        path: 'detailed',\n        label: 'Detailed',\n        element: <DetailedVisualizer tree={tree} />,\n      },\n      {\n        id: 'text',\n        path: 'text',\n        label: 'Text',\n        element: <TextVisualizer tree={tree} />,\n      },\n    ],\n    [tree],\n  );\n\n  const location = useLocation();\n  const element = useRoutes(tabs, location);\n\n  const currentPath = `/${useParams()['*']}`;\n  const [matchedRoute] = matchRoutes(tabs, currentPath) ?? [];\n\n  const currentTabIndex = matchedRoute\n    ? tabs.findIndex(t => t.path === matchedRoute.route.path)\n    : 0;\n\n  const navigate = useNavigate();\n  const handleTabChange = useCallback(\n    (index: number) => {\n      navigate(tabs[index].id);\n    },\n    [navigate, tabs],\n  );\n\n  useEffect(() => {\n    if (!element) {\n      navigate(tabs[0].path);\n    }\n  }, [element, navigate, tabs]);\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"App Visualizer\" />\n      <Content noPadding stretch>\n        <Box display=\"flex\" flexDirection=\"column\" height=\"100%\">\n          <HeaderTabs\n            tabs={tabs}\n            selectedIndex={currentTabIndex}\n            onChange={handleTabChange}\n          />\n          {element}\n        </Box>\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{esm/index-sxMs0h52.esm.js → components/AppVisualizerPage/DetailedVisualizer.esm.js}

@@ -1,8 +1,5 @@
-import { DependencyGraph, DependencyGraphTypes, Page, Header, Content, HeaderTabs } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
-import { coreExtensionData, createApiExtension, createThemeExtension, createNavItemExtension, useRouteRef, appTreeApiRef } from '@backstage/frontend-plugin-api';
+import { coreExtensionData, createApiExtension, createThemeExtension, createNavItemExtension, useRouteRef } from '@backstage/frontend-plugin-api';
 import Box from '@material-ui/core/Box';
-import React, { useState, useMemo, useRef, useLayoutEffect, useCallback, useEffect } from 'react';
 import Paper from '@material-ui/core/Paper';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
@@ -10,9 +7,8 @@ import * as colors from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
 import InputIcon from '@material-ui/icons/InputSharp';
 import DisabledIcon from '@material-ui/icons/NotInterestedSharp';
-import { Link, useLocation, useRoutes, useParams, matchRoutes, useNavigate } from 'react-router-dom';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 function createOutputColorGenerator(colorMap, availableColors) {
   const map = /* @__PURE__ */ new Map();
@@ -56,7 +52,7 @@ const getOutputColor = createOutputColorGenerator(
 const config = {
   borderWidth: 0.75
 };
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles = makeStyles((theme) => ({
   extension: {
     borderLeftWidth: theme.spacing(config.borderWidth),
     borderLeftStyle: "solid",
@@ -164,7 +160,7 @@ function Output(props) {
 function Attachments(props) {
   const { node, enabled, depth } = props;
   const { attachments } = node.edges;
-  const classes = useStyles$1({ enabled, depth });
+  const classes = useStyles({ enabled, depth });
   if (attachments.size === 0) {
     return null;
   }
@@ -194,7 +190,7 @@ function ExtensionTooltip(props) {
 function Extension(props) {
   const { node, depth } = props;
   const enabled = Boolean(node.instance);
-  const classes = useStyles$1({ enabled, depth });
+  const classes = useStyles({ enabled, depth });
   const dataRefs = node.instance && [...node.instance.getDataRefs()];
   return /* @__PURE__ */ React.createElement(Box, { key: node.spec.id, className: classes.extension }, /* @__PURE__ */ React.createElement(Box, { className: classes.extensionHeader }, /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(ExtensionTooltip, { node }) }, /* @__PURE__ */ React.createElement(Typography, { className: classes.extensionHeaderId }, node.spec.id)), /* @__PURE__ */ React.createElement(Box, { className: classes.extensionHeaderOutputs }, dataRefs && dataRefs.length > 0 && dataRefs.sort((a, b) => a.id.localeCompare(b.id)).map((ref) => /* @__PURE__ */ React.createElement(Output, { key: ref.id, dataRef: ref, node })), !enabled && /* @__PURE__ */ React.createElement(DisabledIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(Attachments, { node, enabled, depth }));
 }
@@ -235,245 +231,5 @@ function DetailedVisualizer({ tree }) {
   return /* @__PURE__ */ React.createElement(Box, { display: "flex", height: "100%", flex: "1 1 100%", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { flex: "1 1 0", overflow: "auto", ml: 2, mt: 2 }, /* @__PURE__ */ React.createElement(Extension, { node: tree.root, depth: 0 })), /* @__PURE__ */ React.createElement(Box, { component: Paper, flex: "0 0 auto", m: 1 }, /* @__PURE__ */ React.createElement(Legend, null)));
 }
 
-function mkDiv(children, options) {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      key: options == null ? void 0 : options.key,
-      style: {
-        color: options == null ? void 0 : options.color,
-        marginLeft: (options == null ? void 0 : options.indent) ? 16 : void 0
-      }
-    },
-    children
-  );
-}
-function nodeToText(node, options) {
-  const dataRefIds = node.instance && [...node.instance.getDataRefs()].map((r) => r.id);
-  const out = (options == null ? void 0 : options.showOutputs) && dataRefIds && dataRefIds.length > 0 ? ` out="${[...dataRefIds].sort().join(", ")}"` : "";
-  const color = node.instance ? void 0 : "gray";
-  if (node.edges.attachments.size === 0) {
-    return mkDiv(`<${node.spec.id}${out}/>`, { color });
-  }
-  return mkDiv([
-    mkDiv(`<${node.spec.id}${out}>`, { key: "start", color }),
-    ...[...node.edges.attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, v]) => {
-      const children = v.filter((e) => (options == null ? void 0 : options.showDisabled) || e.instance).sort((a, b) => a.spec.id.localeCompare(b.spec.id));
-      if (children.length === 0) {
-        return mkDiv(`${key} []`, { indent: true });
-      }
-      return mkDiv(
-        [
-          mkDiv(`${key} [`),
-          ...children.map(
-            (e) => mkDiv(nodeToText(e, options), { indent: true })
-          ),
-          mkDiv("]")
-        ],
-        { key, indent: true }
-      );
-    }),
-    mkDiv(`</${node.spec.id}>`, { key: "end", color })
-  ]);
-}
-function TextVisualizer({ tree }) {
-  const [showOutputs, setShowOutputs] = useState(false);
-  const [showDisabled, setShowDisabled] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { style: { overflow: "auto", flex: "1 0 0" } }, /* @__PURE__ */ React.createElement("div", { style: { margin: 16, width: "max-content" } }, nodeToText(tree.root, { showOutputs, showDisabled }))), /* @__PURE__ */ React.createElement(Paper, { style: { padding: "8px 16px" } }, /* @__PURE__ */ React.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          checked: showOutputs,
-          onChange: (_, value) => setShowOutputs(value)
-        }
-      ),
-      label: "Show Outputs"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          checked: showDisabled,
-          onChange: (_, value) => setShowDisabled(value)
-        }
-      ),
-      label: "Show Disabled"
-    }
-  )));
-}
-
-function inputId({ node, input }) {
-  return `${node.spec.id}$$${input}`;
-}
-function trimNodeId(id) {
-  let newId = id;
-  if (newId.startsWith("apis.")) {
-    newId = newId.slice("apis.".length);
-  }
-  if (newId.startsWith("plugin.")) {
-    newId = newId.slice("plugin.".length);
-  }
-  if (newId.startsWith("catalog.filter.entity.")) {
-    newId = newId.slice("catalog.filter.entity.".length);
-  }
-  if (newId.endsWith(".nav.index")) {
-    newId = newId.slice(0, -".nav.index".length);
-  }
-  return newId;
-}
-function resolveGraphData(tree) {
-  const nodes = [...tree.nodes.values()].filter((node) => node.instance).map((node) => ({ ...node, id: node.spec.id, type: "node" }));
-  return {
-    nodes: [
-      ...nodes,
-      ...nodes.flatMap(
-        (node) => [...node.edges.attachments.keys()].map((input) => ({
-          id: inputId({ node, input }),
-          type: "input",
-          name: input
-        }))
-      )
-    ],
-    edges: [
-      ...nodes.filter((node) => node.edges.attachedTo).map((node) => ({
-        from: inputId(node.edges.attachedTo),
-        to: node.spec.id
-      })),
-      ...nodes.flatMap(
-        (node) => [...node.edges.attachments.keys()].map((input) => ({
-          from: node.spec.id,
-          to: inputId({ node, input })
-        }))
-      )
-    ]
-  };
-}
-const useStyles = makeStyles((theme) => ({
-  node: {
-    fill: (node) => node.type === "node" ? theme.palette.primary.light : theme.palette.grey[500],
-    stroke: (node) => node.type === "node" ? theme.palette.primary.main : theme.palette.grey[600]
-  },
-  text: {
-    fill: theme.palette.primary.contrastText
-  }
-}));
-function Node(props) {
-  const { node } = props;
-  const classes = useStyles(node);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const idRef = useRef(null);
-  useLayoutEffect(() => {
-    if (idRef.current) {
-      let { height: renderedHeight, width: renderedWidth } = idRef.current.getBBox();
-      renderedHeight = Math.round(renderedHeight);
-      renderedWidth = Math.round(renderedWidth);
-      if (renderedHeight !== height || renderedWidth !== width) {
-        setWidth(renderedWidth);
-        setHeight(renderedHeight);
-      }
-    }
-  }, [width, height]);
-  const padding = 10;
-  const paddedWidth = width + padding * 2;
-  const paddedHeight = height + padding * 2;
-  return /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
-    "rect",
-    {
-      className: classes.node,
-      width: paddedWidth,
-      height: paddedHeight,
-      rx: node.type === "node" ? 0 : 20
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "text",
-    {
-      ref: idRef,
-      className: classes.text,
-      y: paddedHeight / 2,
-      x: paddedWidth / 2,
-      textAnchor: "middle",
-      alignmentBaseline: "middle"
-    },
-    node.type === "node" ? trimNodeId(node.id) : node.name
-  ));
-}
-function TreeVisualizer({ tree }) {
-  const graphData = useMemo(() => resolveGraphData(tree), [tree]);
-  return /* @__PURE__ */ React.createElement(Box, { height: "100%", flex: "1 1 100%", flexDirection: "column", overflow: "hidden" }, /* @__PURE__ */ React.createElement(
-    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
-    }
-  ));
-}
-
-function AppVisualizerPage() {
-  var _a;
-  const appTreeApi = useApi(appTreeApiRef);
-  const { tree } = appTreeApi.getTree();
-  const tabs = useMemo(
-    () => [
-      {
-        id: "tree",
-        path: "tree",
-        label: "Tree",
-        element: /* @__PURE__ */ React.createElement(TreeVisualizer, { tree })
-      },
-      {
-        id: "detailed",
-        path: "detailed",
-        label: "Detailed",
-        element: /* @__PURE__ */ React.createElement(DetailedVisualizer, { tree })
-      },
-      {
-        id: "text",
-        path: "text",
-        label: "Text",
-        element: /* @__PURE__ */ React.createElement(TextVisualizer, { tree })
-      }
-    ],
-    [tree]
-  );
-  const location = useLocation();
-  const element = useRoutes(tabs, location);
-  const currentPath = `/${useParams()["*"]}`;
-  const [matchedRoute] = (_a = matchRoutes(tabs, currentPath)) != null ? _a : [];
-  const currentTabIndex = matchedRoute ? tabs.findIndex((t) => t.path === matchedRoute.route.path) : 0;
-  const navigate = useNavigate();
-  const handleTabChange = useCallback(
-    (index) => {
-      navigate(tabs[index].id);
-    },
-    [navigate, tabs]
-  );
-  useEffect(() => {
-    if (!element) {
-      navigate(tabs[0].path);
-    }
-  }, [element, navigate, tabs]);
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "App Visualizer" }), /* @__PURE__ */ React.createElement(Content, { noPadding: true, stretch: true }, /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React.createElement(
-    HeaderTabs,
-    {
-      tabs,
-      selectedIndex: currentTabIndex,
-      onChange: handleTabChange
-    }
-  ), element)));
-}
-
-export { AppVisualizerPage };
-//# sourceMappingURL=index-sxMs0h52.esm.js.map
+export { DetailedVisualizer };
+//# sourceMappingURL=DetailedVisualizer.esm.js.map

package/dist/components/AppVisualizerPage/DetailedVisualizer.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/DetailedVisualizer.tsx"],"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 {\n  AppNode,\n  AppTree,\n  ExtensionDataRef,\n  RouteRef,\n  coreExtensionData,\n  createApiExtension,\n  createNavItemExtension,\n  createThemeExtension,\n  useRouteRef,\n} from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport * as colors from '@material-ui/core/colors';\nimport { makeStyles } from '@material-ui/core/styles';\nimport InputIcon from '@material-ui/icons/InputSharp';\nimport DisabledIcon from '@material-ui/icons/NotInterestedSharp';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction createOutputColorGenerator(\n  colorMap: { [extDataId: string]: string },\n  availableColors: string[],\n) {\n  const map = new Map<string, string>();\n  let i = 0;\n\n  return function getOutputColor(id: string) {\n    if (id in colorMap) {\n      return colorMap[id];\n    }\n    let color = map.get(id);\n    if (color) {\n      return color;\n    }\n    color = availableColors[i];\n    i += 1;\n    if (i >= availableColors.length) {\n      i = 0;\n    }\n    map.set(id, color);\n    return color;\n  };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n  {\n    [coreExtensionData.reactElement.id]: colors.green[500],\n    [coreExtensionData.routePath.id]: colors.yellow[500],\n    [coreExtensionData.routeRef.id]: colors.purple[500],\n    [createApiExtension.factoryDataRef.id]: colors.blue[500],\n    [createThemeExtension.themeDataRef.id]: colors.lime[500],\n    [createNavItemExtension.targetDataRef.id]: colors.orange[500],\n  },\n\n  [\n    colors.blue[200],\n    colors.orange[200],\n    colors.green[200],\n    colors.red[200],\n    colors.yellow[200],\n    colors.purple[200],\n    colors.lime[200],\n  ],\n);\n\ninterface StyleProps {\n  enabled: boolean;\n  depth: number;\n}\n\nconst config = {\n  borderWidth: 0.75,\n};\n\nconst useStyles = makeStyles(theme => ({\n  extension: {\n    borderLeftWidth: theme.spacing(config.borderWidth),\n    borderLeftStyle: 'solid',\n    borderLeftColor: ({ depth }: StyleProps) =>\n      colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n    cursor: 'pointer',\n\n    '&:hover $extensionHeader': {\n      color: ({ enabled }: StyleProps) =>\n        enabled ? theme.palette.primary.main : theme.palette.text.secondary,\n    },\n  },\n  extensionHeader: {\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n\n    padding: theme.spacing(0.5, 1),\n    color: ({ enabled }: StyleProps) =>\n      enabled ? theme.palette.text.primary : theme.palette.text.disabled,\n    background: theme.palette.background.paper,\n\n    borderTopRightRadius: theme.shape.borderRadius,\n    borderBottomRightRadius: theme.shape.borderRadius,\n  },\n  extensionHeaderId: {\n    userSelect: 'all',\n  },\n  extensionHeaderOutputs: {\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: theme.spacing(1),\n    gap: theme.spacing(1),\n  },\n  attachments: {\n    gap: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  attachmentsInput: {\n    '&:first-child $attachmentsInputTitle': {\n      borderTop: 0,\n    },\n  },\n  attachmentsInputTitle: {\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n    padding: theme.spacing(1),\n\n    borderTopWidth: theme.spacing(config.borderWidth),\n    borderTopStyle: 'solid',\n    borderTopColor: ({ depth }: StyleProps) =>\n      colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n  },\n  attachmentsInputName: {\n    marginLeft: theme.spacing(1),\n  },\n  attachmentsInputChildren: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    gap: theme.spacing(0.5),\n    marginLeft: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n  },\n}));\n\nconst useOutputStyles = makeStyles(theme => ({\n  output: ({ color }: { color: string }) => ({\n    padding: `0 10px`,\n    height: 20,\n    borderRadius: 10,\n    color: theme.palette.getContrastText(color),\n    backgroundColor: color,\n  }),\n}));\n\nfunction getFullPath(node?: AppNode): string {\n  if (!node) {\n    return '';\n  }\n  const parent = node.edges.attachedTo?.node;\n  const part = node.instance?.getData(coreExtensionData.routePath);\n  if (!part) {\n    return getFullPath(parent);\n  }\n  return getFullPath(parent) + part;\n}\n\nfunction OutputLink(props: {\n  dataRef: ExtensionDataRef<unknown>;\n  node?: AppNode;\n  className: string;\n}) {\n  const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);\n\n  let link: string | undefined = undefined;\n  try {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    link = useRouteRef(routeRef as RouteRef<undefined>)();\n  } catch {\n    /* ignore */\n  }\n\n  return (\n    <Tooltip title={<Typography>{props.dataRef.id}</Typography>}>\n      <Box className={props.className}>\n        {link ? <Link to={link}>link</Link> : null}\n      </Box>\n    </Tooltip>\n  );\n}\n\nfunction Output(props: { dataRef: ExtensionDataRef<unknown>; node?: AppNode }) {\n  const { dataRef, node } = props;\n  const { id } = dataRef;\n  const instance = node?.instance;\n\n  const classes = useOutputStyles({ color: getOutputColor(id) });\n\n  if (id === coreExtensionData.routePath.id) {\n    return (\n      <Tooltip title={<Typography>{getFullPath(node)}</Typography>}>\n        <Box className={classes.output}>\n          {String(instance?.getData(dataRef) ?? '')}\n        </Box>\n      </Tooltip>\n    );\n  }\n\n  if (id === coreExtensionData.routeRef.id) {\n    return <OutputLink {...props} className={classes.output} />;\n  }\n\n  return (\n    <Tooltip title={<Typography>{id}</Typography>}>\n      <Box className={classes.output} />\n    </Tooltip>\n  );\n}\n\nfunction Attachments(props: {\n  node: AppNode;\n  enabled: boolean;\n  depth: number;\n}) {\n  const { node, enabled, depth } = props;\n  const { attachments } = node.edges;\n\n  const classes = useStyles({ enabled, depth });\n\n  if (attachments.size === 0) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.attachments}>\n      {[...attachments.entries()]\n        .sort(([a], [b]) => a.localeCompare(b))\n        .map(([key, children]) => {\n          return (\n            <Box key={key} className={classes.attachmentsInput}>\n              <Box className={classes.attachmentsInputTitle}>\n                <InputIcon />\n                <Typography className={classes.attachmentsInputName}>\n                  {key}\n                </Typography>\n              </Box>\n              <Box className={classes.attachmentsInputChildren}>\n                {children.map(childNode => (\n                  <Extension\n                    key={childNode.spec.id}\n                    node={childNode}\n                    depth={depth + 1}\n                  />\n                ))}\n              </Box>\n            </Box>\n          );\n        })}\n    </Box>\n  );\n}\n\nfunction ExtensionTooltip(props: { node: AppNode }) {\n  const parts = [];\n  let node = props.node;\n  parts.push(node.spec.id);\n  while (node.edges.attachedTo) {\n    const input = node.edges.attachedTo.input;\n    node = node.edges.attachedTo.node;\n    parts.push(`${node.spec.id} [${input}]`);\n  }\n  parts.reverse();\n\n  return (\n    <>\n      {parts.map(part => (\n        <Typography key={part}>{part}</Typography>\n      ))}\n    </>\n  );\n}\n\nfunction Extension(props: { node: AppNode; depth: number }) {\n  const { node, depth } = props;\n\n  const enabled = Boolean(node.instance);\n  const classes = useStyles({ enabled, depth });\n\n  const dataRefs = node.instance && [...node.instance.getDataRefs()];\n\n  return (\n    <Box key={node.spec.id} className={classes.extension}>\n      <Box className={classes.extensionHeader}>\n        <Tooltip title={<ExtensionTooltip node={node} />}>\n          <Typography className={classes.extensionHeaderId}>\n            {node.spec.id}\n          </Typography>\n        </Tooltip>\n        <Box className={classes.extensionHeaderOutputs}>\n          {dataRefs &&\n            dataRefs.length > 0 &&\n            dataRefs\n              .sort((a, b) => a.id.localeCompare(b.id))\n              .map(ref => <Output key={ref.id} dataRef={ref} node={node} />)}\n          {!enabled && <DisabledIcon fontSize=\"small\" />}\n        </Box>\n      </Box>\n      <Attachments node={node} enabled={enabled} depth={depth} />\n    </Box>\n  );\n}\n\nconst legendMap = {\n  'React Element': coreExtensionData.reactElement,\n  'Utility API': createApiExtension.factoryDataRef,\n  'Route Path': coreExtensionData.routePath,\n  'Route Ref': coreExtensionData.routeRef,\n  'Nav Target': createNavItemExtension.targetDataRef,\n  Theme: createThemeExtension.themeDataRef,\n};\n\nfunction Legend() {\n  return (\n    <Box\n      display=\"grid\"\n      maxWidth={600}\n      p={1}\n      style={{\n        grid: 'auto-flow / repeat(3, 1fr)',\n        gap: 16,\n      }}\n    >\n      {Object.entries(legendMap).map(([label, dataRef]) => (\n        <Box\n          key={dataRef.id}\n          display=\"flex\"\n          style={{ gap: 8 }}\n          alignItems=\"center\"\n        >\n          <Output dataRef={dataRef} />\n          <Typography>{label}</Typography>\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n  return (\n    <Box display=\"flex\" height=\"100%\" flex=\"1 1 100%\" flexDirection=\"column\">\n      <Box flex=\"1 1 0\" overflow=\"auto\" ml={2} mt={2}>\n        <Extension node={tree.root} depth={0} />\n      </Box>\n\n      <Box component={Paper} flex=\"0 0 auto\" m={1}>\n        <Legend />\n      </Box>\n    </Box>\n  );\n}\n"],"names":["getOutputColor"],"mappings":"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"}

package/dist/components/AppVisualizerPage/TextVisualizer.esm.js

@@ -0,0 +1,79 @@
+import Box from '@material-ui/core/Box';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Paper from '@material-ui/core/Paper';
+import React, { useState } from 'react';
+
+function mkDiv(children, options) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: options == null ? void 0 : options.key,
+      style: {
+        color: options == null ? void 0 : options.color,
+        marginLeft: (options == null ? void 0 : options.indent) ? 16 : void 0
+      }
+    },
+    children
+  );
+}
+function nodeToText(node, options) {
+  const dataRefIds = node.instance && [...node.instance.getDataRefs()].map((r) => r.id);
+  const out = (options == null ? void 0 : options.showOutputs) && dataRefIds && dataRefIds.length > 0 ? ` out="${[...dataRefIds].sort().join(", ")}"` : "";
+  const color = node.instance ? void 0 : "gray";
+  if (node.edges.attachments.size === 0) {
+    return mkDiv(`<${node.spec.id}${out}/>`, { color });
+  }
+  return mkDiv([
+    mkDiv(`<${node.spec.id}${out}>`, { key: "start", color }),
+    ...[...node.edges.attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, v]) => {
+      const children = v.filter((e) => (options == null ? void 0 : options.showDisabled) || e.instance).sort((a, b) => a.spec.id.localeCompare(b.spec.id));
+      if (children.length === 0) {
+        return mkDiv(`${key} []`, { indent: true });
+      }
+      return mkDiv(
+        [
+          mkDiv(`${key} [`),
+          ...children.map(
+            (e) => mkDiv(nodeToText(e, options), { indent: true })
+          ),
+          mkDiv("]")
+        ],
+        { key, indent: true }
+      );
+    }),
+    mkDiv(`</${node.spec.id}>`, { key: "end", color })
+  ]);
+}
+function TextVisualizer({ tree }) {
+  const [showOutputs, setShowOutputs] = useState(false);
+  const [showDisabled, setShowDisabled] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { style: { overflow: "auto", flex: "1 0 0" } }, /* @__PURE__ */ React.createElement("div", { style: { margin: 16, width: "max-content" } }, nodeToText(tree.root, { showOutputs, showDisabled }))), /* @__PURE__ */ React.createElement(Paper, { style: { padding: "8px 16px" } }, /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          checked: showOutputs,
+          onChange: (_, value) => setShowOutputs(value)
+        }
+      ),
+      label: "Show Outputs"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          checked: showDisabled,
+          onChange: (_, value) => setShowDisabled(value)
+        }
+      ),
+      label: "Show Disabled"
+    }
+  )));
+}
+
+export { TextVisualizer };
+//# sourceMappingURL=TextVisualizer.esm.js.map

package/dist/components/AppVisualizerPage/TextVisualizer.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/TextVisualizer.tsx"],"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 { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Paper from '@material-ui/core/Paper';\nimport React, { ReactNode, useState } from 'react';\n\nfunction mkDiv(\n  children: ReactNode,\n  options?: { indent?: boolean; key?: string | number; color?: string },\n) {\n  return (\n    <div\n      key={options?.key}\n      style={{\n        color: options?.color,\n        marginLeft: options?.indent ? 16 : undefined,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction nodeToText(\n  node: AppNode,\n  options?: { showOutputs?: boolean; showDisabled?: boolean },\n): ReactNode {\n  const dataRefIds =\n    node.instance && [...node.instance.getDataRefs()].map(r => r.id);\n  const out =\n    options?.showOutputs && dataRefIds && dataRefIds.length > 0\n      ? ` out=\"${[...dataRefIds].sort().join(', ')}\"`\n      : '';\n  const color = node.instance ? undefined : 'gray';\n\n  if (node.edges.attachments.size === 0) {\n    return mkDiv(`<${node.spec.id}${out}/>`, { color });\n  }\n\n  return mkDiv([\n    mkDiv(`<${node.spec.id}${out}>`, { key: 'start', color }),\n    ...[...node.edges.attachments.entries()]\n      .sort(([a], [b]) => a.localeCompare(b))\n      .map(([key, v]) => {\n        const children = v\n          .filter(e => options?.showDisabled || e.instance)\n          .sort((a, b) => a.spec.id.localeCompare(b.spec.id));\n        if (children.length === 0) {\n          return mkDiv(`${key} []`, { indent: true });\n        }\n        return mkDiv(\n          [\n            mkDiv(`${key} [`),\n            ...children.map(e =>\n              mkDiv(nodeToText(e, options), { indent: true }),\n            ),\n            mkDiv(']'),\n          ],\n          { key, indent: true },\n        );\n      }),\n    mkDiv(`</${node.spec.id}>`, { key: 'end', color }),\n  ]);\n}\n\nexport function TextVisualizer({ tree }: { tree: AppTree }) {\n  const [showOutputs, setShowOutputs] = useState(false);\n  const [showDisabled, setShowDisabled] = useState(false);\n\n  return (\n    <>\n      <Box style={{ overflow: 'auto', flex: '1 0 0' }}>\n        <div style={{ margin: 16, width: 'max-content' }}>\n          {nodeToText(tree.root, { showOutputs, showDisabled })}\n        </div>\n      </Box>\n      <Paper style={{ padding: '8px 16px' }}>\n        <FormControlLabel\n          control={\n            <Checkbox\n              checked={showOutputs}\n              onChange={(_, value) => setShowOutputs(value)}\n            />\n          }\n          label=\"Show Outputs\"\n        />\n        <FormControlLabel\n          control={\n            <Checkbox\n              checked={showDisabled}\n              onChange={(_, value) => setShowDisabled(value)}\n            />\n          }\n          label=\"Show Disabled\"\n        />\n      </Paper>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/AppVisualizerPage/TreeVisualizer.esm.js

@@ -0,0 +1,122 @@
+import React, { useMemo, useState, useRef, useLayoutEffect } from 'react';
+import { DependencyGraph, DependencyGraphTypes } from '@backstage/core-components';
+import Box from '@material-ui/core/Box';
+import { makeStyles } from '@material-ui/core/styles';
+
+function inputId({ node, input }) {
+  return `${node.spec.id}$$${input}`;
+}
+function trimNodeId(id) {
+  let newId = id;
+  if (newId.startsWith("apis.")) {
+    newId = newId.slice("apis.".length);
+  }
+  if (newId.startsWith("plugin.")) {
+    newId = newId.slice("plugin.".length);
+  }
+  if (newId.startsWith("catalog.filter.entity.")) {
+    newId = newId.slice("catalog.filter.entity.".length);
+  }
+  if (newId.endsWith(".nav.index")) {
+    newId = newId.slice(0, -".nav.index".length);
+  }
+  return newId;
+}
+function resolveGraphData(tree) {
+  const nodes = [...tree.nodes.values()].filter((node) => node.instance).map((node) => ({ ...node, id: node.spec.id, type: "node" }));
+  return {
+    nodes: [
+      ...nodes,
+      ...nodes.flatMap(
+        (node) => [...node.edges.attachments.keys()].map((input) => ({
+          id: inputId({ node, input }),
+          type: "input",
+          name: input
+        }))
+      )
+    ],
+    edges: [
+      ...nodes.filter((node) => node.edges.attachedTo).map((node) => ({
+        from: inputId(node.edges.attachedTo),
+        to: node.spec.id
+      })),
+      ...nodes.flatMap(
+        (node) => [...node.edges.attachments.keys()].map((input) => ({
+          from: node.spec.id,
+          to: inputId({ node, input })
+        }))
+      )
+    ]
+  };
+}
+const useStyles = makeStyles((theme) => ({
+  node: {
+    fill: (node) => node.type === "node" ? theme.palette.primary.light : theme.palette.grey[500],
+    stroke: (node) => node.type === "node" ? theme.palette.primary.main : theme.palette.grey[600]
+  },
+  text: {
+    fill: theme.palette.primary.contrastText
+  }
+}));
+function Node(props) {
+  const { node } = props;
+  const classes = useStyles(node);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const idRef = useRef(null);
+  useLayoutEffect(() => {
+    if (idRef.current) {
+      let { height: renderedHeight, width: renderedWidth } = idRef.current.getBBox();
+      renderedHeight = Math.round(renderedHeight);
+      renderedWidth = Math.round(renderedWidth);
+      if (renderedHeight !== height || renderedWidth !== width) {
+        setWidth(renderedWidth);
+        setHeight(renderedHeight);
+      }
+    }
+  }, [width, height]);
+  const padding = 10;
+  const paddedWidth = width + padding * 2;
+  const paddedHeight = height + padding * 2;
+  return /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
+    "rect",
+    {
+      className: classes.node,
+      width: paddedWidth,
+      height: paddedHeight,
+      rx: node.type === "node" ? 0 : 20
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "text",
+    {
+      ref: idRef,
+      className: classes.text,
+      y: paddedHeight / 2,
+      x: paddedWidth / 2,
+      textAnchor: "middle",
+      alignmentBaseline: "middle"
+    },
+    node.type === "node" ? trimNodeId(node.id) : node.name
+  ));
+}
+function TreeVisualizer({ tree }) {
+  const graphData = useMemo(() => resolveGraphData(tree), [tree]);
+  return /* @__PURE__ */ React.createElement(Box, { height: "100%", flex: "1 1 100%", flexDirection: "column", overflow: "hidden" }, /* @__PURE__ */ React.createElement(
+    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
+    }
+  ));
+}
+
+export { Node, TreeVisualizer };
+//# sourceMappingURL=TreeVisualizer.esm.js.map

package/dist/components/AppVisualizerPage/TreeVisualizer.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/TreeVisualizer.tsx"],"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 React from 'react';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\n\ntype NodeType =\n  | ({ type: 'node'; id: string } & AppNode)\n  | { type: 'input'; id: string; name: string };\n\nfunction inputId({ node, input }: { node: AppNode; input: string }) {\n  return `${node.spec.id}$$${input}`;\n}\n\nfunction trimNodeId(id: string) {\n  let newId = id;\n  if (newId.startsWith('apis.')) {\n    newId = newId.slice('apis.'.length);\n  }\n  if (newId.startsWith('plugin.')) {\n    newId = newId.slice('plugin.'.length);\n  }\n  if (newId.startsWith('catalog.filter.entity.')) {\n    newId = newId.slice('catalog.filter.entity.'.length);\n  }\n  if (newId.endsWith('.nav.index')) {\n    newId = newId.slice(0, -'.nav.index'.length);\n  }\n  return newId;\n}\n\nfunction resolveGraphData(tree: AppTree): {\n  nodes: NodeType[];\n  edges: { from: string; to: string }[];\n} {\n  const nodes = [...tree.nodes.values()]\n    .filter(node => node.instance)\n    .map(node => ({ ...node, id: node.spec.id, type: 'node' as const }));\n\n  return {\n    nodes: [\n      ...nodes,\n      ...nodes.flatMap(node =>\n        [...node.edges.attachments.keys()].map(input => ({\n          id: inputId({ node, input }),\n          type: 'input' as const,\n          name: input,\n        })),\n      ),\n    ],\n    edges: [\n      ...nodes\n        .filter(node => node.edges.attachedTo)\n        .map(node => ({\n          from: inputId(node.edges.attachedTo!),\n          to: node.spec.id,\n        })),\n      ...nodes.flatMap(node =>\n        [...node.edges.attachments.keys()].map(input => ({\n          from: node.spec.id,\n          to: inputId({ node, input }),\n        })),\n      ),\n    ],\n  };\n}\n\nconst useStyles = makeStyles(theme => ({\n  node: {\n    fill: (node: NodeType) =>\n      node.type === 'node'\n        ? theme.palette.primary.light\n        : theme.palette.grey[500],\n    stroke: (node: NodeType) =>\n      node.type === 'node'\n        ? theme.palette.primary.main\n        : theme.palette.grey[600],\n  },\n  text: {\n    fill: theme.palette.primary.contrastText,\n  },\n}));\n\n/** @public */\nexport function Node(props: { node: NodeType }) {\n  const { node } = props;\n  const classes = useStyles(node);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const idRef = useRef<SVGTextElement | null>(null);\n\n  useLayoutEffect(() => {\n    // set the width to the length of the ID\n    if (idRef.current) {\n      let { height: renderedHeight, width: renderedWidth } =\n        idRef.current.getBBox();\n      renderedHeight = Math.round(renderedHeight);\n      renderedWidth = Math.round(renderedWidth);\n\n      if (renderedHeight !== height || renderedWidth !== width) {\n        setWidth(renderedWidth);\n        setHeight(renderedHeight);\n      }\n    }\n  }, [width, height]);\n\n  const padding = 10;\n  const paddedWidth = width + padding * 2;\n  const paddedHeight = height + padding * 2;\n\n  return (\n    <g>\n      <rect\n        className={classes.node}\n        width={paddedWidth}\n        height={paddedHeight}\n        rx={node.type === 'node' ? 0 : 20}\n      />\n      <text\n        ref={idRef}\n        className={classes.text}\n        y={paddedHeight / 2}\n        x={paddedWidth / 2}\n        textAnchor=\"middle\"\n        alignmentBaseline=\"middle\"\n      >\n        {node.type === 'node' ? trimNodeId(node.id) : node.name}\n      </text>\n    </g>\n  );\n}\n\nexport function TreeVisualizer({ tree }: { tree: AppTree }) {\n  const graphData = useMemo(() => resolveGraphData(tree), [tree]);\n\n  return (\n    <Box height=\"100%\" flex=\"1 1 100%\" flexDirection=\"column\" overflow=\"hidden\">\n      <DependencyGraph\n        fit=\"contain\"\n        style={{ height: '100%', width: '100%' }}\n        {...graphData}\n        nodeMargin={10}\n        rankMargin={50}\n        paddingX={50}\n        renderNode={Node}\n        align={DependencyGraphTypes.Alignment.DOWN_RIGHT}\n        ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}\n        direction={DependencyGraphTypes.Direction.TOP_BOTTOM}\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/AppVisualizerPage/index.esm.js

@@ -0,0 +1,2 @@
+export { AppVisualizerPage } from './AppVisualizerPage.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/components/AppVisualizerPage/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.esm.js

@@ -1,22 +1,2 @@
-import { createRouteRef, createPageExtension, createNavItemExtension, createPlugin } from '@backstage/frontend-plugin-api';
-import VisualizerIcon from '@material-ui/icons/Visibility';
-import React from 'react';
-
-const rootRouteRef = createRouteRef();
-const appVisualizerPage = createPageExtension({
-  defaultPath: "/visualizer",
-  routeRef: rootRouteRef,
-  loader: () => import('./esm/index-sxMs0h52.esm.js').then((m) => /* @__PURE__ */ React.createElement(m.AppVisualizerPage, null))
-});
-const appVisualizerNavItem = createNavItemExtension({
-  title: "Visualizer",
-  icon: VisualizerIcon,
-  routeRef: rootRouteRef
-});
-const visualizerPlugin = createPlugin({
-  id: "app-visualizer",
-  extensions: [appVisualizerPage, appVisualizerNavItem]
-});
-
-export { visualizerPlugin as default };
+export { visualizerPlugin as default } from './plugin.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/plugin.tsx"],"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 {\n  createNavItemExtension,\n  createPageExtension,\n  createPlugin,\n  createRouteRef,\n} from '@backstage/frontend-plugin-api';\nimport VisualizerIcon from '@material-ui/icons/Visibility';\nimport React from 'react';\n\nconst rootRouteRef = createRouteRef();\n\nconst appVisualizerPage = createPageExtension({\n  defaultPath: '/visualizer',\n  routeRef: rootRouteRef,\n  loader: () =>\n    import('./components/AppVisualizerPage').then(m => <m.AppVisualizerPage />),\n});\n\nexport const appVisualizerNavItem = createNavItemExtension({\n  title: 'Visualizer',\n  icon: VisualizerIcon,\n  routeRef: rootRouteRef,\n});\n\n/** @public */\nexport const visualizerPlugin = createPlugin({\n  id: 'app-visualizer',\n  extensions: [appVisualizerPage, appVisualizerNavItem],\n});\n"],"names":[],"mappings":";;;;AAyBA,MAAM,eAAe,cAAe,EAAA,CAAA;AAEpC,MAAM,oBAAoB,mBAAoB,CAAA;AAAA,EAC5C,WAAa,EAAA,aAAA;AAAA,EACb,QAAU,EAAA,YAAA;AAAA,EACV,MAAA,EAAQ,MACN,OAAO,6BAAgC,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,qBAAM,KAAA,CAAA,aAAA,CAAA,CAAA,CAAE,iBAAF,EAAA,IAAoB,CAAE,CAAA;AAC9E,CAAC,CAAA,CAAA;AAEM,MAAM,uBAAuB,sBAAuB,CAAA;AAAA,EACzD,KAAO,EAAA,YAAA;AAAA,EACP,IAAM,EAAA,cAAA;AAAA,EACN,QAAU,EAAA,YAAA;AACZ,CAAC,CAAA,CAAA;AAGM,MAAM,mBAAmB,YAAa,CAAA;AAAA,EAC3C,EAAI,EAAA,gBAAA;AAAA,EACJ,UAAA,EAAY,CAAC,iBAAA,EAAmB,oBAAoB,CAAA;AACtD,CAAC;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/plugin.esm.js

@@ -0,0 +1,22 @@
+import { createRouteRef, createPageExtension, createNavItemExtension, createPlugin } from '@backstage/frontend-plugin-api';
+import VisualizerIcon from '@material-ui/icons/Visibility';
+import React from 'react';
+
+const rootRouteRef = createRouteRef();
+const appVisualizerPage = createPageExtension({
+  defaultPath: "/visualizer",
+  routeRef: rootRouteRef,
+  loader: () => import('./components/AppVisualizerPage/index.esm.js').then((m) => /* @__PURE__ */ React.createElement(m.AppVisualizerPage, null))
+});
+const appVisualizerNavItem = createNavItemExtension({
+  title: "Visualizer",
+  icon: VisualizerIcon,
+  routeRef: rootRouteRef
+});
+const visualizerPlugin = createPlugin({
+  id: "app-visualizer",
+  extensions: [appVisualizerPage, appVisualizerNavItem]
+});
+
+export { appVisualizerNavItem, visualizerPlugin };
+//# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.tsx"],"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 {\n  createNavItemExtension,\n  createPageExtension,\n  createPlugin,\n  createRouteRef,\n} from '@backstage/frontend-plugin-api';\nimport VisualizerIcon from '@material-ui/icons/Visibility';\nimport React from 'react';\n\nconst rootRouteRef = createRouteRef();\n\nconst appVisualizerPage = createPageExtension({\n  defaultPath: '/visualizer',\n  routeRef: rootRouteRef,\n  loader: () =>\n    import('./components/AppVisualizerPage').then(m => <m.AppVisualizerPage />),\n});\n\nexport const appVisualizerNavItem = createNavItemExtension({\n  title: 'Visualizer',\n  icon: VisualizerIcon,\n  routeRef: rootRouteRef,\n});\n\n/** @public */\nexport const visualizerPlugin = createPlugin({\n  id: 'app-visualizer',\n  extensions: [appVisualizerPage, appVisualizerNavItem],\n});\n"],"names":[],"mappings":";;;;AAyBA,MAAM,eAAe,cAAe,EAAA,CAAA;AAEpC,MAAM,oBAAoB,mBAAoB,CAAA;AAAA,EAC5C,WAAa,EAAA,aAAA;AAAA,EACb,QAAU,EAAA,YAAA;AAAA,EACV,MAAA,EAAQ,MACN,OAAO,6CAAgC,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,qBAAM,KAAA,CAAA,aAAA,CAAA,CAAA,CAAE,iBAAF,EAAA,IAAoB,CAAE,CAAA;AAC9E,CAAC,CAAA,CAAA;AAEM,MAAM,uBAAuB,sBAAuB,CAAA;AAAA,EACzD,KAAO,EAAA,YAAA;AAAA,EACP,IAAM,EAAA,cAAA;AAAA,EACN,QAAU,EAAA,YAAA;AACZ,CAAC,EAAA;AAGM,MAAM,mBAAmB,YAAa,CAAA;AAAA,EAC3C,EAAI,EAAA,gBAAA;AAAA,EACJ,UAAA,EAAY,CAAC,iBAAA,EAAmB,oBAAoB,CAAA;AACtD,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-app-visualizer",
-  "version": "0.1.5",
+  "version": "0.1.6-next.0",
   "description": "Visualizes the Backstage app structure",
   "backstage": {
     "role": "frontend-plugin"
@@ -30,14 +30,14 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.14.4",
+    "@backstage/core-components": "^0.14.5-next.0",
     "@backstage/core-plugin-api": "^1.9.2",
-    "@backstage/frontend-plugin-api": "^0.6.4",
+    "@backstage/frontend-plugin-api": "^0.6.5-next.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.26.3",
+    "@backstage/cli": "^0.26.5-next.0",
     "@types/react": "^16.13.1 || ^17.0.0"
   },
   "peerDependencies": {

package/dist/esm/index-sxMs0h52.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-sxMs0h52.esm.js","sources":["../../src/components/AppVisualizerPage/DetailedVisualizer.tsx","../../src/components/AppVisualizerPage/TextVisualizer.tsx","../../src/components/AppVisualizerPage/TreeVisualizer.tsx","../../src/components/AppVisualizerPage/AppVisualizerPage.tsx"],"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 {\n  AppNode,\n  AppTree,\n  ExtensionDataRef,\n  RouteRef,\n  coreExtensionData,\n  createApiExtension,\n  createNavItemExtension,\n  createThemeExtension,\n  useRouteRef,\n} from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport * as colors from '@material-ui/core/colors';\nimport { makeStyles } from '@material-ui/core/styles';\nimport InputIcon from '@material-ui/icons/InputSharp';\nimport DisabledIcon from '@material-ui/icons/NotInterestedSharp';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction createOutputColorGenerator(\n  colorMap: { [extDataId: string]: string },\n  availableColors: string[],\n) {\n  const map = new Map<string, string>();\n  let i = 0;\n\n  return function getOutputColor(id: string) {\n    if (id in colorMap) {\n      return colorMap[id];\n    }\n    let color = map.get(id);\n    if (color) {\n      return color;\n    }\n    color = availableColors[i];\n    i += 1;\n    if (i >= availableColors.length) {\n      i = 0;\n    }\n    map.set(id, color);\n    return color;\n  };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n  {\n    [coreExtensionData.reactElement.id]: colors.green[500],\n    [coreExtensionData.routePath.id]: colors.yellow[500],\n    [coreExtensionData.routeRef.id]: colors.purple[500],\n    [createApiExtension.factoryDataRef.id]: colors.blue[500],\n    [createThemeExtension.themeDataRef.id]: colors.lime[500],\n    [createNavItemExtension.targetDataRef.id]: colors.orange[500],\n  },\n\n  [\n    colors.blue[200],\n    colors.orange[200],\n    colors.green[200],\n    colors.red[200],\n    colors.yellow[200],\n    colors.purple[200],\n    colors.lime[200],\n  ],\n);\n\ninterface StyleProps {\n  enabled: boolean;\n  depth: number;\n}\n\nconst config = {\n  borderWidth: 0.75,\n};\n\nconst useStyles = makeStyles(theme => ({\n  extension: {\n    borderLeftWidth: theme.spacing(config.borderWidth),\n    borderLeftStyle: 'solid',\n    borderLeftColor: ({ depth }: StyleProps) =>\n      colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n    cursor: 'pointer',\n\n    '&:hover $extensionHeader': {\n      color: ({ enabled }: StyleProps) =>\n        enabled ? theme.palette.primary.main : theme.palette.text.secondary,\n    },\n  },\n  extensionHeader: {\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n\n    padding: theme.spacing(0.5, 1),\n    color: ({ enabled }: StyleProps) =>\n      enabled ? theme.palette.text.primary : theme.palette.text.disabled,\n    background: theme.palette.background.paper,\n\n    borderTopRightRadius: theme.shape.borderRadius,\n    borderBottomRightRadius: theme.shape.borderRadius,\n  },\n  extensionHeaderId: {\n    userSelect: 'all',\n  },\n  extensionHeaderOutputs: {\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: theme.spacing(1),\n    gap: theme.spacing(1),\n  },\n  attachments: {\n    gap: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  attachmentsInput: {\n    '&:first-child $attachmentsInputTitle': {\n      borderTop: 0,\n    },\n  },\n  attachmentsInputTitle: {\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n    padding: theme.spacing(1),\n\n    borderTopWidth: theme.spacing(config.borderWidth),\n    borderTopStyle: 'solid',\n    borderTopColor: ({ depth }: StyleProps) =>\n      colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n  },\n  attachmentsInputName: {\n    marginLeft: theme.spacing(1),\n  },\n  attachmentsInputChildren: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    gap: theme.spacing(0.5),\n    marginLeft: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n  },\n}));\n\nconst useOutputStyles = makeStyles(theme => ({\n  output: ({ color }: { color: string }) => ({\n    padding: `0 10px`,\n    height: 20,\n    borderRadius: 10,\n    color: theme.palette.getContrastText(color),\n    backgroundColor: color,\n  }),\n}));\n\nfunction getFullPath(node?: AppNode): string {\n  if (!node) {\n    return '';\n  }\n  const parent = node.edges.attachedTo?.node;\n  const part = node.instance?.getData(coreExtensionData.routePath);\n  if (!part) {\n    return getFullPath(parent);\n  }\n  return getFullPath(parent) + part;\n}\n\nfunction OutputLink(props: {\n  dataRef: ExtensionDataRef<unknown>;\n  node?: AppNode;\n  className: string;\n}) {\n  const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);\n\n  let link: string | undefined = undefined;\n  try {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    link = useRouteRef(routeRef as RouteRef<undefined>)();\n  } catch {\n    /* ignore */\n  }\n\n  return (\n    <Tooltip title={<Typography>{props.dataRef.id}</Typography>}>\n      <Box className={props.className}>\n        {link ? <Link to={link}>link</Link> : null}\n      </Box>\n    </Tooltip>\n  );\n}\n\nfunction Output(props: { dataRef: ExtensionDataRef<unknown>; node?: AppNode }) {\n  const { dataRef, node } = props;\n  const { id } = dataRef;\n  const instance = node?.instance;\n\n  const classes = useOutputStyles({ color: getOutputColor(id) });\n\n  if (id === coreExtensionData.routePath.id) {\n    return (\n      <Tooltip title={<Typography>{getFullPath(node)}</Typography>}>\n        <Box className={classes.output}>\n          {String(instance?.getData(dataRef) ?? '')}\n        </Box>\n      </Tooltip>\n    );\n  }\n\n  if (id === coreExtensionData.routeRef.id) {\n    return <OutputLink {...props} className={classes.output} />;\n  }\n\n  return (\n    <Tooltip title={<Typography>{id}</Typography>}>\n      <Box className={classes.output} />\n    </Tooltip>\n  );\n}\n\nfunction Attachments(props: {\n  node: AppNode;\n  enabled: boolean;\n  depth: number;\n}) {\n  const { node, enabled, depth } = props;\n  const { attachments } = node.edges;\n\n  const classes = useStyles({ enabled, depth });\n\n  if (attachments.size === 0) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.attachments}>\n      {[...attachments.entries()]\n        .sort(([a], [b]) => a.localeCompare(b))\n        .map(([key, children]) => {\n          return (\n            <Box key={key} className={classes.attachmentsInput}>\n              <Box className={classes.attachmentsInputTitle}>\n                <InputIcon />\n                <Typography className={classes.attachmentsInputName}>\n                  {key}\n                </Typography>\n              </Box>\n              <Box className={classes.attachmentsInputChildren}>\n                {children.map(childNode => (\n                  <Extension\n                    key={childNode.spec.id}\n                    node={childNode}\n                    depth={depth + 1}\n                  />\n                ))}\n              </Box>\n            </Box>\n          );\n        })}\n    </Box>\n  );\n}\n\nfunction ExtensionTooltip(props: { node: AppNode }) {\n  const parts = [];\n  let node = props.node;\n  parts.push(node.spec.id);\n  while (node.edges.attachedTo) {\n    const input = node.edges.attachedTo.input;\n    node = node.edges.attachedTo.node;\n    parts.push(`${node.spec.id} [${input}]`);\n  }\n  parts.reverse();\n\n  return (\n    <>\n      {parts.map(part => (\n        <Typography key={part}>{part}</Typography>\n      ))}\n    </>\n  );\n}\n\nfunction Extension(props: { node: AppNode; depth: number }) {\n  const { node, depth } = props;\n\n  const enabled = Boolean(node.instance);\n  const classes = useStyles({ enabled, depth });\n\n  const dataRefs = node.instance && [...node.instance.getDataRefs()];\n\n  return (\n    <Box key={node.spec.id} className={classes.extension}>\n      <Box className={classes.extensionHeader}>\n        <Tooltip title={<ExtensionTooltip node={node} />}>\n          <Typography className={classes.extensionHeaderId}>\n            {node.spec.id}\n          </Typography>\n        </Tooltip>\n        <Box className={classes.extensionHeaderOutputs}>\n          {dataRefs &&\n            dataRefs.length > 0 &&\n            dataRefs\n              .sort((a, b) => a.id.localeCompare(b.id))\n              .map(ref => <Output key={ref.id} dataRef={ref} node={node} />)}\n          {!enabled && <DisabledIcon fontSize=\"small\" />}\n        </Box>\n      </Box>\n      <Attachments node={node} enabled={enabled} depth={depth} />\n    </Box>\n  );\n}\n\nconst legendMap = {\n  'React Element': coreExtensionData.reactElement,\n  'Utility API': createApiExtension.factoryDataRef,\n  'Route Path': coreExtensionData.routePath,\n  'Route Ref': coreExtensionData.routeRef,\n  'Nav Target': createNavItemExtension.targetDataRef,\n  Theme: createThemeExtension.themeDataRef,\n};\n\nfunction Legend() {\n  return (\n    <Box\n      display=\"grid\"\n      maxWidth={600}\n      p={1}\n      style={{\n        grid: 'auto-flow / repeat(3, 1fr)',\n        gap: 16,\n      }}\n    >\n      {Object.entries(legendMap).map(([label, dataRef]) => (\n        <Box\n          key={dataRef.id}\n          display=\"flex\"\n          style={{ gap: 8 }}\n          alignItems=\"center\"\n        >\n          <Output dataRef={dataRef} />\n          <Typography>{label}</Typography>\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n  return (\n    <Box display=\"flex\" height=\"100%\" flex=\"1 1 100%\" flexDirection=\"column\">\n      <Box flex=\"1 1 0\" overflow=\"auto\" ml={2} mt={2}>\n        <Extension node={tree.root} depth={0} />\n      </Box>\n\n      <Box component={Paper} flex=\"0 0 auto\" m={1}>\n        <Legend />\n      </Box>\n    </Box>\n  );\n}\n","/*\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 { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Paper from '@material-ui/core/Paper';\nimport React, { ReactNode, useState } from 'react';\n\nfunction mkDiv(\n  children: ReactNode,\n  options?: { indent?: boolean; key?: string | number; color?: string },\n) {\n  return (\n    <div\n      key={options?.key}\n      style={{\n        color: options?.color,\n        marginLeft: options?.indent ? 16 : undefined,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction nodeToText(\n  node: AppNode,\n  options?: { showOutputs?: boolean; showDisabled?: boolean },\n): ReactNode {\n  const dataRefIds =\n    node.instance && [...node.instance.getDataRefs()].map(r => r.id);\n  const out =\n    options?.showOutputs && dataRefIds && dataRefIds.length > 0\n      ? ` out=\"${[...dataRefIds].sort().join(', ')}\"`\n      : '';\n  const color = node.instance ? undefined : 'gray';\n\n  if (node.edges.attachments.size === 0) {\n    return mkDiv(`<${node.spec.id}${out}/>`, { color });\n  }\n\n  return mkDiv([\n    mkDiv(`<${node.spec.id}${out}>`, { key: 'start', color }),\n    ...[...node.edges.attachments.entries()]\n      .sort(([a], [b]) => a.localeCompare(b))\n      .map(([key, v]) => {\n        const children = v\n          .filter(e => options?.showDisabled || e.instance)\n          .sort((a, b) => a.spec.id.localeCompare(b.spec.id));\n        if (children.length === 0) {\n          return mkDiv(`${key} []`, { indent: true });\n        }\n        return mkDiv(\n          [\n            mkDiv(`${key} [`),\n            ...children.map(e =>\n              mkDiv(nodeToText(e, options), { indent: true }),\n            ),\n            mkDiv(']'),\n          ],\n          { key, indent: true },\n        );\n      }),\n    mkDiv(`</${node.spec.id}>`, { key: 'end', color }),\n  ]);\n}\n\nexport function TextVisualizer({ tree }: { tree: AppTree }) {\n  const [showOutputs, setShowOutputs] = useState(false);\n  const [showDisabled, setShowDisabled] = useState(false);\n\n  return (\n    <>\n      <Box style={{ overflow: 'auto', flex: '1 0 0' }}>\n        <div style={{ margin: 16, width: 'max-content' }}>\n          {nodeToText(tree.root, { showOutputs, showDisabled })}\n        </div>\n      </Box>\n      <Paper style={{ padding: '8px 16px' }}>\n        <FormControlLabel\n          control={\n            <Checkbox\n              checked={showOutputs}\n              onChange={(_, value) => setShowOutputs(value)}\n            />\n          }\n          label=\"Show Outputs\"\n        />\n        <FormControlLabel\n          control={\n            <Checkbox\n              checked={showDisabled}\n              onChange={(_, value) => setShowDisabled(value)}\n            />\n          }\n          label=\"Show Disabled\"\n        />\n      </Paper>\n    </>\n  );\n}\n","/*\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 React from 'react';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\n\ntype NodeType =\n  | ({ type: 'node'; id: string } & AppNode)\n  | { type: 'input'; id: string; name: string };\n\nfunction inputId({ node, input }: { node: AppNode; input: string }) {\n  return `${node.spec.id}$$${input}`;\n}\n\nfunction trimNodeId(id: string) {\n  let newId = id;\n  if (newId.startsWith('apis.')) {\n    newId = newId.slice('apis.'.length);\n  }\n  if (newId.startsWith('plugin.')) {\n    newId = newId.slice('plugin.'.length);\n  }\n  if (newId.startsWith('catalog.filter.entity.')) {\n    newId = newId.slice('catalog.filter.entity.'.length);\n  }\n  if (newId.endsWith('.nav.index')) {\n    newId = newId.slice(0, -'.nav.index'.length);\n  }\n  return newId;\n}\n\nfunction resolveGraphData(tree: AppTree): {\n  nodes: NodeType[];\n  edges: { from: string; to: string }[];\n} {\n  const nodes = [...tree.nodes.values()]\n    .filter(node => node.instance)\n    .map(node => ({ ...node, id: node.spec.id, type: 'node' as const }));\n\n  return {\n    nodes: [\n      ...nodes,\n      ...nodes.flatMap(node =>\n        [...node.edges.attachments.keys()].map(input => ({\n          id: inputId({ node, input }),\n          type: 'input' as const,\n          name: input,\n        })),\n      ),\n    ],\n    edges: [\n      ...nodes\n        .filter(node => node.edges.attachedTo)\n        .map(node => ({\n          from: inputId(node.edges.attachedTo!),\n          to: node.spec.id,\n        })),\n      ...nodes.flatMap(node =>\n        [...node.edges.attachments.keys()].map(input => ({\n          from: node.spec.id,\n          to: inputId({ node, input }),\n        })),\n      ),\n    ],\n  };\n}\n\nconst useStyles = makeStyles(theme => ({\n  node: {\n    fill: (node: NodeType) =>\n      node.type === 'node'\n        ? theme.palette.primary.light\n        : theme.palette.grey[500],\n    stroke: (node: NodeType) =>\n      node.type === 'node'\n        ? theme.palette.primary.main\n        : theme.palette.grey[600],\n  },\n  text: {\n    fill: theme.palette.primary.contrastText,\n  },\n}));\n\n/** @public */\nexport function Node(props: { node: NodeType }) {\n  const { node } = props;\n  const classes = useStyles(node);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const idRef = useRef<SVGTextElement | null>(null);\n\n  useLayoutEffect(() => {\n    // set the width to the length of the ID\n    if (idRef.current) {\n      let { height: renderedHeight, width: renderedWidth } =\n        idRef.current.getBBox();\n      renderedHeight = Math.round(renderedHeight);\n      renderedWidth = Math.round(renderedWidth);\n\n      if (renderedHeight !== height || renderedWidth !== width) {\n        setWidth(renderedWidth);\n        setHeight(renderedHeight);\n      }\n    }\n  }, [width, height]);\n\n  const padding = 10;\n  const paddedWidth = width + padding * 2;\n  const paddedHeight = height + padding * 2;\n\n  return (\n    <g>\n      <rect\n        className={classes.node}\n        width={paddedWidth}\n        height={paddedHeight}\n        rx={node.type === 'node' ? 0 : 20}\n      />\n      <text\n        ref={idRef}\n        className={classes.text}\n        y={paddedHeight / 2}\n        x={paddedWidth / 2}\n        textAnchor=\"middle\"\n        alignmentBaseline=\"middle\"\n      >\n        {node.type === 'node' ? trimNodeId(node.id) : node.name}\n      </text>\n    </g>\n  );\n}\n\nexport function TreeVisualizer({ tree }: { tree: AppTree }) {\n  const graphData = useMemo(() => resolveGraphData(tree), [tree]);\n\n  return (\n    <Box height=\"100%\" flex=\"1 1 100%\" flexDirection=\"column\" overflow=\"hidden\">\n      <DependencyGraph\n        fit=\"contain\"\n        style={{ height: '100%', width: '100%' }}\n        {...graphData}\n        nodeMargin={10}\n        rankMargin={50}\n        paddingX={50}\n        renderNode={Node}\n        align={DependencyGraphTypes.Alignment.DOWN_RIGHT}\n        ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}\n        direction={DependencyGraphTypes.Direction.TOP_BOTTOM}\n      />\n    </Box>\n  );\n}\n","/*\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 { Content, Header, HeaderTabs, Page } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { appTreeApiRef } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { DetailedVisualizer } from './DetailedVisualizer';\nimport { TextVisualizer } from './TextVisualizer';\nimport { TreeVisualizer } from './TreeVisualizer';\nimport {\n  matchRoutes,\n  useLocation,\n  useNavigate,\n  useParams,\n  useRoutes,\n} from 'react-router-dom';\n\nexport function AppVisualizerPage() {\n  const appTreeApi = useApi(appTreeApiRef);\n  const { tree } = appTreeApi.getTree();\n\n  const tabs = useMemo(\n    () => [\n      {\n        id: 'tree',\n        path: 'tree',\n        label: 'Tree',\n        element: <TreeVisualizer tree={tree} />,\n      },\n      {\n        id: 'detailed',\n        path: 'detailed',\n        label: 'Detailed',\n        element: <DetailedVisualizer tree={tree} />,\n      },\n      {\n        id: 'text',\n        path: 'text',\n        label: 'Text',\n        element: <TextVisualizer tree={tree} />,\n      },\n    ],\n    [tree],\n  );\n\n  const location = useLocation();\n  const element = useRoutes(tabs, location);\n\n  const currentPath = `/${useParams()['*']}`;\n  const [matchedRoute] = matchRoutes(tabs, currentPath) ?? [];\n\n  const currentTabIndex = matchedRoute\n    ? tabs.findIndex(t => t.path === matchedRoute.route.path)\n    : 0;\n\n  const navigate = useNavigate();\n  const handleTabChange = useCallback(\n    (index: number) => {\n      navigate(tabs[index].id);\n    },\n    [navigate, tabs],\n  );\n\n  useEffect(() => {\n    if (!element) {\n      navigate(tabs[0].path);\n    }\n  }, [element, navigate, tabs]);\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"App Visualizer\" />\n      <Content noPadding stretch>\n        <Box display=\"flex\" flexDirection=\"column\" height=\"100%\">\n          <HeaderTabs\n            tabs={tabs}\n            selectedIndex={currentTabIndex}\n            onChange={handleTabChange}\n          />\n          {element}\n        </Box>\n      </Content>\n    </Page>\n  );\n}\n"],"names":["getOutputColor","useStyles"],"mappings":"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"}