@backstage/plugin-app-visualizer 0.1.25-next.1 → 0.1.25-next.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage/plugin-app-visualizer
 
+## 0.1.25-next.2
+
+### Patch Changes
+
+- 722e2df: Migrated to use `@backstage/ui`.
+- Updated dependencies
+  - @backstage/ui@0.9.0-next.3
+  - @backstage/frontend-plugin-api@0.12.2-next.2
+  - @backstage/core-components@0.18.3-next.2
+
 ## 0.1.25-next.1
 
 ### Patch Changes

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 { Flex } from '@backstage/ui';
 import { useMemo, useCallback, useEffect } from 'react';
 import { DetailedVisualizer } from './DetailedVisualizer.esm.js';
 import { TextVisualizer } from './TextVisualizer.esm.js';
@@ -54,7 +54,7 @@ function AppVisualizerPage() {
   }, [element, navigate, tabs]);
   return /* @__PURE__ */ jsxs(Page, { themeId: "tool", children: [
     /* @__PURE__ */ jsx(Header, { title: "App Visualizer" }),
-    /* @__PURE__ */ jsx(Content, { noPadding: true, stretch: true, children: /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", height: "100%", children: [
+    /* @__PURE__ */ jsx(Content, { noPadding: true, stretch: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { height: "100%" }, children: [
       /* @__PURE__ */ jsx(
         HeaderTabs,
         {

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

@@ -1 +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 { 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":";;;;;;;;;;;AAgCO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,UAAA,GAAa,OAAO,aAAa,CAAA;AACvC,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,UAAA,CAAW,OAAA,EAAQ;AAEpC,EAAA,MAAM,IAAA,GAAO,OAAA;AAAA,IACX,MAAM;AAAA,MACJ;AAAA,QACE,EAAA,EAAI,MAAA;AAAA,QACJ,IAAA,EAAM,MAAA;AAAA,QACN,KAAA,EAAO,MAAA;AAAA,QACP,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY;AAAA,OACvC;AAAA,MACA;AAAA,QACE,EAAA,EAAI,UAAA;AAAA,QACJ,IAAA,EAAM,UAAA;AAAA,QACN,KAAA,EAAO,UAAA;AAAA,QACP,OAAA,kBAAS,GAAA,CAAC,kBAAA,EAAA,EAAmB,IAAA,EAAY;AAAA,OAC3C;AAAA,MACA;AAAA,QACE,EAAA,EAAI,MAAA;AAAA,QACJ,IAAA,EAAM,MAAA;AAAA,QACN,KAAA,EAAO,MAAA;AAAA,QACP,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY;AAAA;AACvC,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,OAAA,GAAU,SAAA,CAAU,IAAA,EAAM,QAAQ,CAAA;AAExC,EAAA,MAAM,WAAA,GAAc,CAAA,CAAA,EAAI,SAAA,EAAU,CAAE,GAAG,CAAC,CAAA,CAAA;AACxC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,IAAA,EAAM,WAAW,KAAK,EAAC;AAE1D,EAAA,MAAM,eAAA,GAAkB,YAAA,GACpB,IAAA,CAAK,SAAA,CAAU,CAAA,CAAA,KAAK,EAAE,IAAA,KAAS,YAAA,CAAa,KAAA,CAAM,IAAI,CAAA,GACtD,CAAA;AAEJ,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,KAAA,KAAkB;AACjB,MAAA,QAAA,CAAS,IAAA,CAAK,KAAK,CAAA,CAAE,EAAE,CAAA;AAAA,IACzB,CAAA;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,GACjB;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,QAAA,CAAS,IAAA,CAAK,CAAC,CAAA,CAAE,IAAI,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,QAAA,EAAU,IAAI,CAAC,CAAA;AAE5B,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,MAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAM,gBAAA,EAAiB,CAAA;AAAA,oBAC/B,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAS,IAAA,EAAC,OAAA,EAAO,IAAA,EACxB,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,aAAA,EAAc,QAAA,EAAS,QAAO,MAAA,EAChD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,aAAA,EAAe,eAAA;AAAA,UACf,QAAA,EAAU;AAAA;AAAA,OACZ;AAAA,MACC;AAAA,KAAA,EACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"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 { Flex } from '@backstage/ui';\nimport { 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        <Flex direction=\"column\" style={{ height: '100%' }}>\n          <HeaderTabs\n            tabs={tabs}\n            selectedIndex={currentTabIndex}\n            onChange={handleTabChange}\n          />\n          {element}\n        </Flex>\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAgCO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,UAAA,GAAa,OAAO,aAAa,CAAA;AACvC,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,UAAA,CAAW,OAAA,EAAQ;AAEpC,EAAA,MAAM,IAAA,GAAO,OAAA;AAAA,IACX,MAAM;AAAA,MACJ;AAAA,QACE,EAAA,EAAI,MAAA;AAAA,QACJ,IAAA,EAAM,MAAA;AAAA,QACN,KAAA,EAAO,MAAA;AAAA,QACP,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY;AAAA,OACvC;AAAA,MACA;AAAA,QACE,EAAA,EAAI,UAAA;AAAA,QACJ,IAAA,EAAM,UAAA;AAAA,QACN,KAAA,EAAO,UAAA;AAAA,QACP,OAAA,kBAAS,GAAA,CAAC,kBAAA,EAAA,EAAmB,IAAA,EAAY;AAAA,OAC3C;AAAA,MACA;AAAA,QACE,EAAA,EAAI,MAAA;AAAA,QACJ,IAAA,EAAM,MAAA;AAAA,QACN,KAAA,EAAO,MAAA;AAAA,QACP,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY;AAAA;AACvC,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,OAAA,GAAU,SAAA,CAAU,IAAA,EAAM,QAAQ,CAAA;AAExC,EAAA,MAAM,WAAA,GAAc,CAAA,CAAA,EAAI,SAAA,EAAU,CAAE,GAAG,CAAC,CAAA,CAAA;AACxC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,IAAA,EAAM,WAAW,KAAK,EAAC;AAE1D,EAAA,MAAM,eAAA,GAAkB,YAAA,GACpB,IAAA,CAAK,SAAA,CAAU,CAAA,CAAA,KAAK,EAAE,IAAA,KAAS,YAAA,CAAa,KAAA,CAAM,IAAI,CAAA,GACtD,CAAA;AAEJ,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,KAAA,KAAkB;AACjB,MAAA,QAAA,CAAS,IAAA,CAAK,KAAK,CAAA,CAAE,EAAE,CAAA;AAAA,IACzB,CAAA;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,GACjB;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,QAAA,CAAS,IAAA,CAAK,CAAC,CAAA,CAAE,IAAI,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,QAAA,EAAU,IAAI,CAAC,CAAA;AAE5B,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,MAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAM,gBAAA,EAAiB,CAAA;AAAA,oBAC/B,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAS,IAAA,EAAC,SAAO,IAAA,EACxB,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAA,EAAO,EAAE,MAAA,EAAQ,QAAO,EAC/C,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,aAAA,EAAe,eAAA;AAAA,UACf,QAAA,EAAU;AAAA;AAAA,OACZ;AAAA,MACC;AAAA,KAAA,EACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,126 +1,60 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ThemeBlueprint, NavItemBlueprint, coreExtensionData, ApiBlueprint, useRouteRef } from '@backstage/frontend-plugin-api';
-import Box from '@material-ui/core/Box';
-import Paper from '@material-ui/core/Paper';
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
-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 } from 'react-router-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ThemeBlueprint, NavItemBlueprint, coreExtensionData, ApiBlueprint, useApi, routeResolutionApiRef } from '@backstage/frontend-plugin-api';
+import { Flex, Box, TooltipTrigger, Text, Tooltip, Link } from '@backstage/ui';
+import { RiCloseCircleLine, RiInputField } from '@remixicon/react';
+import { Focusable } from 'react-aria-components';
 
+function getContrastColor(bgColor) {
+  const hex = bgColor.replace("#", "");
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  return brightness > 128 ? "#000000" : "#ffffff";
+}
 function createOutputColorGenerator(colorMap, availableColors) {
   const map = /* @__PURE__ */ new Map();
   let i = 0;
   return function getOutputColor2(id) {
+    let backgroundColor;
     if (id in colorMap) {
-      return colorMap[id];
-    }
-    let color = map.get(id);
-    if (color) {
-      return color;
+      backgroundColor = colorMap[id];
+    } else {
+      const cached = map.get(id);
+      if (cached) {
+        return cached;
+      }
+      backgroundColor = availableColors[i];
+      i += 1;
+      if (i >= availableColors.length) {
+        i = 0;
+      }
     }
-    color = availableColors[i];
-    i += 1;
-    if (i >= availableColors.length) {
-      i = 0;
-    }
-    map.set(id, color);
-    return color;
+    const result = {
+      backgroundColor,
+      color: getContrastColor(backgroundColor)
+    };
+    map.set(id, result);
+    return result;
   };
 }
 const getOutputColor = createOutputColorGenerator(
   {
-    [coreExtensionData.reactElement.id]: colors.green[500],
-    [coreExtensionData.routePath.id]: colors.yellow[500],
-    [coreExtensionData.routeRef.id]: colors.purple[500],
-    [ApiBlueprint.dataRefs.factory.id]: colors.blue[500],
-    [ThemeBlueprint.dataRefs.theme.id]: colors.lime[500],
-    [NavItemBlueprint.dataRefs.target.id]: colors.orange[500]
+    [coreExtensionData.reactElement.id]: "#4caf50",
+    [coreExtensionData.routePath.id]: "#ffeb3b",
+    [coreExtensionData.routeRef.id]: "#9c27b0",
+    [ApiBlueprint.dataRefs.factory.id]: "#2196f3",
+    [ThemeBlueprint.dataRefs.theme.id]: "#cddc39",
+    [NavItemBlueprint.dataRefs.target.id]: "#ff9800"
   },
-  [
-    colors.blue[200],
-    colors.orange[200],
-    colors.green[200],
-    colors.red[200],
-    colors.yellow[200],
-    colors.purple[200],
-    colors.lime[200]
-  ]
+  ["#90caf9", "#ffcc80", "#a5d6a7", "#ef9a9a", "#fff59d", "#ce93d8", "#e6ee9c"]
 );
-const config = {
-  borderWidth: 0.75
-};
-const useStyles = makeStyles((theme) => ({
-  extension: {
-    borderLeftWidth: theme.spacing(config.borderWidth),
-    borderLeftStyle: "solid",
-    borderLeftColor: ({ depth }) => colors.grey[700 - depth % 6 * 100],
-    cursor: "pointer",
-    "&:hover $extensionHeader": {
-      color: ({ enabled }) => enabled ? theme.palette.primary.main : theme.palette.text.secondary
-    }
-  },
-  extensionHeader: {
-    display: "flex",
-    alignItems: "center",
-    width: "fit-content",
-    padding: theme.spacing(0.5, 1),
-    color: ({ enabled }) => enabled ? theme.palette.text.primary : theme.palette.text.disabled,
-    background: theme.palette.background.paper,
-    borderTopRightRadius: theme.shape.borderRadius,
-    borderBottomRightRadius: theme.shape.borderRadius
-  },
-  extensionHeaderId: {
-    userSelect: "all"
-  },
-  extensionHeaderOutputs: {
-    display: "flex",
-    alignItems: "center",
-    marginLeft: theme.spacing(1),
-    gap: theme.spacing(1)
-  },
-  attachments: {
-    gap: theme.spacing(2),
-    display: "flex",
-    flexDirection: "column"
-  },
-  attachmentsInput: {
-    "&:first-child $attachmentsInputTitle": {
-      borderTop: 0
-    }
-  },
-  attachmentsInputTitle: {
-    display: "flex",
-    alignItems: "center",
-    width: "fit-content",
-    padding: theme.spacing(1),
-    borderTopWidth: theme.spacing(config.borderWidth),
-    borderTopStyle: "solid",
-    borderTopColor: ({ depth }) => colors.grey[700 - depth % 6 * 100]
-  },
-  attachmentsInputName: {
-    marginLeft: theme.spacing(1)
-  },
-  attachmentsInputChildren: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: theme.spacing(0.5),
-    marginLeft: theme.spacing(1),
-    marginBottom: theme.spacing(1)
-  }
-}));
-const useOutputStyles = makeStyles((theme) => ({
-  output: ({ color }) => ({
-    padding: `0 10px`,
-    height: 20,
-    borderRadius: 10,
-    color: theme.palette.getContrastText(color),
-    backgroundColor: color
-  })
-}));
+function getBorderColor(depth) {
+  const greyLevels = [8, 7, 6, 5];
+  const index = depth % greyLevels.length;
+  const level = greyLevels[index];
+  return `var(--bui-gray-${level})`;
+}
 function getFullPath(node) {
   if (!node) {
     return "";
@@ -132,46 +66,75 @@ function getFullPath(node) {
   }
   return getFullPath(parent) + part;
 }
-function OutputLink(props) {
-  const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);
-  try {
-    const link = useRouteRef(routeRef);
-    return /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(Typography, { children: props.dataRef.id }), children: /* @__PURE__ */ jsx(Box, { className: props.className, children: link ? /* @__PURE__ */ jsx(Link, { to: link(), children: "link" }) : null }) });
-  } catch (ex) {
-    console.warn(
-      props.node?.spec.id ? `Unable to generate output link for ${props.node.spec.id}` : "Unable to generate output link",
-      ex
-    );
-    return null;
-  }
-}
 function Output(props) {
   const { dataRef, node } = props;
   const { id } = dataRef;
   const instance = node?.instance;
-  const classes = useOutputStyles({ color: getOutputColor(id) });
-  if (id === coreExtensionData.routePath.id) {
-    return /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(Typography, { children: getFullPath(node) }), children: /* @__PURE__ */ jsx(Box, { className: classes.output, children: String(instance?.getData(dataRef) ?? "") }) });
+  const routeResolutionApi = useApi(routeResolutionApiRef);
+  const { backgroundColor, color } = getOutputColor(id);
+  const chipStyle = {
+    height: 20,
+    padding: "0 10px",
+    borderRadius: "10px",
+    color,
+    backgroundColor,
+    display: "flex",
+    alignItems: "center",
+    fontWeight: "var(--bui-font-weight-regular)"
+  };
+  if (id === coreExtensionData.routeRef.id && node) {
+    try {
+      const routeRef = props.node?.instance?.getData(
+        coreExtensionData.routeRef
+      );
+      const link = routeRef && routeResolutionApi.resolve(routeRef)?.();
+      if (link) {
+        return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(Link, { href: link, style: chipStyle, children: "link" }),
+          /* @__PURE__ */ jsx(Tooltip, { children: id })
+        ] });
+      }
+    } catch {
+    }
   }
-  if (id === coreExtensionData.routeRef.id) {
-    return /* @__PURE__ */ jsx(OutputLink, { ...props, className: classes.output });
+  let tooltip = id;
+  let text = void 0;
+  if (id === coreExtensionData.routePath.id) {
+    text = String(instance?.getData(dataRef) ?? "");
+    tooltip = getFullPath(node);
   }
-  return /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(Typography, { children: id }), children: /* @__PURE__ */ jsx(Box, { className: classes.output }) });
+  return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+    /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(Text, { style: { ...chipStyle, cursor: "help" }, children: text }) }),
+    /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: tooltip })
+  ] });
 }
 function Attachments(props) {
-  const { node, enabled, depth } = props;
+  const { node, depth } = props;
   const { attachments } = node.edges;
-  const classes = useStyles({ enabled, depth });
   if (attachments.size === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Box, { className: classes.attachments, children: [...attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, children]) => {
-    return /* @__PURE__ */ jsxs(Box, { className: classes.attachmentsInput, children: [
-      /* @__PURE__ */ jsxs(Box, { className: classes.attachmentsInputTitle, children: [
-        /* @__PURE__ */ jsx(InputIcon, {}),
-        /* @__PURE__ */ jsx(Typography, { className: classes.attachmentsInputName, children: key })
-      ] }),
-      /* @__PURE__ */ jsx(Box, { className: classes.attachmentsInputChildren, children: children.map((childNode) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: [...attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, children], idx) => {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          p: "2",
+          align: "center",
+          style: {
+            borderTopWidth: "var(--bui-space-1_5)",
+            borderTopStyle: "solid",
+            borderTopColor: getBorderColor(depth),
+            borderTop: idx === 0 ? "none" : void 0,
+            width: "fit-content"
+          },
+          children: [
+            /* @__PURE__ */ jsx(RiInputField, { size: 16 }),
+            /* @__PURE__ */ jsx("div", { style: { marginLeft: "var(--bui-space-2)" }, children: key })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Flex, { ml: "2", mb: "2", direction: "column", align: "start", gap: "1", children: children.map((childNode) => /* @__PURE__ */ jsx(
         Extension,
         {
           node: childNode,
@@ -182,33 +145,59 @@ function Attachments(props) {
     ] }, key);
   }) });
 }
-function ExtensionTooltip(props) {
-  const parts = [];
-  let node = props.node;
-  parts.push(node.spec.id);
-  while (node.edges.attachedTo) {
-    const input = node.edges.attachedTo.input;
-    node = node.edges.attachedTo.node;
-    parts.push(`${node.spec.id} [${input}]`);
-  }
-  parts.reverse();
-  return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part) => /* @__PURE__ */ jsx(Typography, { children: part }, part)) });
-}
 function Extension(props) {
   const { node, depth } = props;
   const enabled = Boolean(node.instance);
-  const classes = useStyles({ enabled, depth });
   const dataRefs = node.instance && [...node.instance.getDataRefs()];
-  return /* @__PURE__ */ jsxs(Box, { className: classes.extension, children: [
-    /* @__PURE__ */ jsxs(Box, { className: classes.extensionHeader, children: [
-      /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(ExtensionTooltip, { node }), children: /* @__PURE__ */ jsx(Typography, { className: classes.extensionHeaderId, children: node.spec.id }) }),
-      /* @__PURE__ */ jsxs(Box, { className: classes.extensionHeaderOutputs, children: [
-        dataRefs && dataRefs.length > 0 && dataRefs.sort((a, b) => a.id.localeCompare(b.id)).map((ref) => /* @__PURE__ */ jsx(Output, { dataRef: ref, node }, ref.id)),
-        !enabled && /* @__PURE__ */ jsx(DisabledIcon, { fontSize: "small" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Attachments, { node, enabled, depth })
-  ] }, node.spec.id);
+  const tooltipParts = [];
+  let currentNode = node;
+  tooltipParts.push(currentNode.spec.id);
+  while (currentNode.edges.attachedTo) {
+    const input = currentNode.edges.attachedTo.input;
+    currentNode = currentNode.edges.attachedTo.node;
+    tooltipParts.push(`${currentNode.spec.id} [${input}]`);
+  }
+  tooltipParts.reverse();
+  const tooltipText = tooltipParts.join("\n");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        borderLeftWidth: "var(--bui-space-1_5)",
+        borderLeftStyle: "solid",
+        borderLeftColor: getBorderColor(depth)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            py: "1",
+            px: "2",
+            align: "center",
+            style: {
+              width: "fit-content",
+              color: enabled ? "var(--bui-fg-primary)" : "var(--bui-fg-disabled)",
+              background: "var(--bui-bg-surface-1)",
+              borderTopRightRadius: "var(--bui-radius-2)",
+              borderBottomRightRadius: "var(--bui-radius-2)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+                /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(Text, { style: { userSelect: "all" }, children: node.spec.id }) }),
+                /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: /* @__PURE__ */ jsx(Text, { style: { whiteSpace: "pre-wrap" }, children: tooltipText }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { ml: "2", align: "center", gap: "2", children: [
+                dataRefs && dataRefs.length > 0 && dataRefs.sort((a, b) => a.id.localeCompare(b.id)).map((ref) => /* @__PURE__ */ jsx(Output, { dataRef: ref, node }, ref.id)),
+                !enabled && /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Attachments, { node, enabled, depth })
+      ]
+    },
+    node.spec.id
+  );
 }
 const legendMap = {
   "React Element": coreExtensionData.reactElement,
@@ -222,33 +211,36 @@ function Legend() {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      display: "grid",
-      maxWidth: 600,
-      p: 1,
+      p: "2",
       style: {
+        display: "grid",
+        maxWidth: 600,
         grid: "auto-flow / repeat(3, 1fr)",
-        gap: 16
+        gap: "var(--bui-space-4)"
       },
-      children: Object.entries(legendMap).map(([label, dataRef]) => /* @__PURE__ */ jsxs(
-        Box,
-        {
-          display: "flex",
-          style: { gap: 8 },
-          alignItems: "center",
-          children: [
-            /* @__PURE__ */ jsx(Output, { dataRef }),
-            /* @__PURE__ */ jsx(Typography, { children: label })
-          ]
-        },
-        dataRef.id
-      ))
+      children: Object.entries(legendMap).map(([label, dataRef]) => /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+        /* @__PURE__ */ jsx(Output, { dataRef }),
+        /* @__PURE__ */ jsx("div", { children: label })
+      ] }, dataRef.id))
     }
   );
 }
 function DetailedVisualizer({ tree }) {
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", height: "100%", flex: "1 1 100%", flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(Box, { flex: "1 1 0", overflow: "auto", ml: 2, mt: 2, children: /* @__PURE__ */ jsx(Extension, { node: tree.root, depth: 0 }) }),
-    /* @__PURE__ */ jsx(Box, { component: Paper, flex: "0 0 auto", m: 1, children: /* @__PURE__ */ jsx(Legend, {}) })
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { height: "100%", flex: "1 1 100%" }, children: [
+    /* @__PURE__ */ jsx(Box, { ml: "4", mt: "4", style: { flex: "1 1 0", overflow: "auto" }, children: /* @__PURE__ */ jsx(Extension, { node: tree.root, depth: 0 }) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        m: "2",
+        style: {
+          flex: "0 0 auto",
+          background: "var(--bui-bg-surface-1)",
+          border: "1px solid var(--bui-border)",
+          borderRadius: "var(--bui-radius-2)"
+        },
+        children: /* @__PURE__ */ jsx(Legend, {})
+      }
+    )
   ] });
 }
 

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

@@ -1 +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  ApiBlueprint,\n  NavItemBlueprint,\n  ThemeBlueprint,\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 { 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    [ApiBlueprint.dataRefs.factory.id]: colors.blue[500],\n    [ThemeBlueprint.dataRefs.theme.id]: colors.lime[500],\n    [NavItemBlueprint.dataRefs.target.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  try {\n    const link = useRouteRef(routeRef as RouteRef<undefined>);\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  } catch (ex) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      props.node?.spec.id\n        ? `Unable to generate output link for ${props.node.spec.id}`\n        : 'Unable to generate output link',\n      ex,\n    );\n    return null;\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': ApiBlueprint.dataRefs.factory,\n  'Route Path': coreExtensionData.routePath,\n  'Route Ref': coreExtensionData.routeRef,\n  'Nav Target': NavItemBlueprint.dataRefs.target,\n  Theme: ThemeBlueprint.dataRefs.theme,\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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"}
+{"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  coreExtensionData,\n  ApiBlueprint,\n  NavItemBlueprint,\n  ThemeBlueprint,\n  useApi,\n  routeResolutionApiRef,\n} from '@backstage/frontend-plugin-api';\nimport { Box, Flex, Link, Text, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport {\n  RiInputField as InputIcon,\n  RiCloseCircleLine as DisabledIcon,\n} from '@remixicon/react';\nimport { Focusable } from 'react-aria-components';\n\nfunction getContrastColor(bgColor: string): string {\n  const hex = bgColor.replace('#', '');\n  const r = parseInt(hex.substr(0, 2), 16);\n  const g = parseInt(hex.substr(2, 2), 16);\n  const b = parseInt(hex.substr(4, 2), 16);\n  const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n  return brightness > 128 ? '#000000' : '#ffffff';\n}\n\nfunction createOutputColorGenerator(\n  colorMap: { [extDataId: string]: string },\n  availableColors: string[],\n) {\n  const map = new Map<string, { backgroundColor: string; color: string }>();\n  let i = 0;\n\n  return function getOutputColor(id: string) {\n    let backgroundColor: string;\n    if (id in colorMap) {\n      backgroundColor = colorMap[id];\n    } else {\n      const cached = map.get(id);\n      if (cached) {\n        return cached;\n      }\n      backgroundColor = availableColors[i];\n      i += 1;\n      if (i >= availableColors.length) {\n        i = 0;\n      }\n    }\n    const result = {\n      backgroundColor,\n      color: getContrastColor(backgroundColor),\n    };\n    map.set(id, result);\n    return result;\n  };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n  {\n    [coreExtensionData.reactElement.id]: '#4caf50',\n    [coreExtensionData.routePath.id]: '#ffeb3b',\n    [coreExtensionData.routeRef.id]: '#9c27b0',\n    [ApiBlueprint.dataRefs.factory.id]: '#2196f3',\n    [ThemeBlueprint.dataRefs.theme.id]: '#cddc39',\n    [NavItemBlueprint.dataRefs.target.id]: '#ff9800',\n  },\n\n  ['#90caf9', '#ffcc80', '#a5d6a7', '#ef9a9a', '#fff59d', '#ce93d8', '#e6ee9c'],\n);\n\n// Helper function to get border color based on depth\nfunction getBorderColor(depth: number): string {\n  const greyLevels = [8, 7, 6, 5]; // darker levels that contrast well with background\n  const index = depth % greyLevels.length;\n  const level = greyLevels[index];\n  return `var(--bui-gray-${level})`;\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 Output(props: { dataRef: ExtensionDataRef<unknown>; node?: AppNode }) {\n  const { dataRef, node } = props;\n  const { id } = dataRef;\n  const instance = node?.instance;\n\n  const routeResolutionApi = useApi(routeResolutionApiRef);\n\n  const { backgroundColor, color } = getOutputColor(id);\n\n  const chipStyle: React.CSSProperties = {\n    height: 20,\n    padding: '0 10px',\n    borderRadius: '10px',\n    color,\n    backgroundColor,\n    display: 'flex',\n    alignItems: 'center',\n    fontWeight:\n      'var(--bui-font-weight-regular)' as React.CSSProperties['fontWeight'],\n  };\n\n  if (id === coreExtensionData.routeRef.id && node) {\n    try {\n      const routeRef = props.node?.instance?.getData(\n        coreExtensionData.routeRef,\n      );\n      const link = routeRef && routeResolutionApi.resolve(routeRef)?.();\n      if (link) {\n        return (\n          <TooltipTrigger>\n            <Link href={link} style={chipStyle}>\n              link\n            </Link>\n            <Tooltip>{id}</Tooltip>\n          </TooltipTrigger>\n        );\n      }\n    } catch {\n      /* ignore */\n    }\n  }\n\n  let tooltip = id;\n  let text: string | undefined = undefined;\n  if (id === coreExtensionData.routePath.id) {\n    text = String(instance?.getData(dataRef) ?? '');\n    tooltip = getFullPath(node);\n  }\n\n  return (\n    <TooltipTrigger>\n      <Focusable>\n        <Text style={{ ...chipStyle, cursor: 'help' }}>{text}</Text>\n      </Focusable>\n      <Tooltip style={{ maxWidth: 'unset' }}>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n\nfunction Attachments(props: {\n  node: AppNode;\n  enabled: boolean;\n  depth: number;\n}) {\n  const { node, depth } = props;\n  const { attachments } = node.edges;\n\n  if (attachments.size === 0) {\n    return null;\n  }\n\n  return (\n    <Flex direction=\"column\" gap=\"4\">\n      {[...attachments.entries()]\n        .sort(([a], [b]) => a.localeCompare(b))\n        .map(([key, children], idx) => {\n          return (\n            <Box key={key}>\n              <Flex\n                p=\"2\"\n                align=\"center\"\n                style={{\n                  borderTopWidth: 'var(--bui-space-1_5)',\n                  borderTopStyle: 'solid',\n                  borderTopColor: getBorderColor(depth),\n                  borderTop: idx === 0 ? 'none' : undefined,\n                  width: 'fit-content',\n                }}\n              >\n                <InputIcon size={16} />\n                <div style={{ marginLeft: 'var(--bui-space-2)' }}>{key}</div>\n              </Flex>\n              <Flex ml=\"2\" mb=\"2\" direction=\"column\" align=\"start\" gap=\"1\">\n                {children.map(childNode => (\n                  <Extension\n                    key={childNode.spec.id}\n                    node={childNode}\n                    depth={depth + 1}\n                  />\n                ))}\n              </Flex>\n            </Box>\n          );\n        })}\n    </Flex>\n  );\n}\n\nfunction Extension(props: { node: AppNode; depth: number }) {\n  const { node, depth } = props;\n\n  const enabled = Boolean(node.instance);\n  const dataRefs = node.instance && [...node.instance.getDataRefs()];\n\n  // Build tooltip text\n  const tooltipParts = [];\n  let currentNode = node;\n  tooltipParts.push(currentNode.spec.id);\n  while (currentNode.edges.attachedTo) {\n    const input = currentNode.edges.attachedTo.input;\n    currentNode = currentNode.edges.attachedTo.node;\n    tooltipParts.push(`${currentNode.spec.id} [${input}]`);\n  }\n  tooltipParts.reverse();\n  const tooltipText = tooltipParts.join('\\n');\n\n  return (\n    <Box\n      key={node.spec.id}\n      style={{\n        borderLeftWidth: 'var(--bui-space-1_5)',\n        borderLeftStyle: 'solid',\n        borderLeftColor: getBorderColor(depth),\n      }}\n    >\n      <Flex\n        py=\"1\"\n        px=\"2\"\n        align=\"center\"\n        style={{\n          width: 'fit-content',\n          color: enabled ? 'var(--bui-fg-primary)' : 'var(--bui-fg-disabled)',\n          background: 'var(--bui-bg-surface-1)',\n          borderTopRightRadius: 'var(--bui-radius-2)',\n          borderBottomRightRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <TooltipTrigger>\n          <Focusable>\n            <Text style={{ userSelect: 'all' }}>{node.spec.id}</Text>\n          </Focusable>\n          <Tooltip style={{ maxWidth: 'unset' }}>\n            <Text style={{ whiteSpace: 'pre-wrap' }}>{tooltipText}</Text>\n          </Tooltip>\n        </TooltipTrigger>\n        <Flex ml=\"2\" align=\"center\" gap=\"2\">\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 size={16} />}\n        </Flex>\n      </Flex>\n      <Attachments node={node} enabled={enabled} depth={depth} />\n    </Box>\n  );\n}\n\nconst legendMap = {\n  'React Element': coreExtensionData.reactElement,\n  'Utility API': ApiBlueprint.dataRefs.factory,\n  'Route Path': coreExtensionData.routePath,\n  'Route Ref': coreExtensionData.routeRef,\n  'Nav Target': NavItemBlueprint.dataRefs.target,\n  Theme: ThemeBlueprint.dataRefs.theme,\n};\n\nfunction Legend() {\n  return (\n    <Box\n      p=\"2\"\n      style={{\n        display: 'grid',\n        maxWidth: 600,\n        grid: 'auto-flow / repeat(3, 1fr)',\n        gap: 'var(--bui-space-4)',\n      }}\n    >\n      {Object.entries(legendMap).map(([label, dataRef]) => (\n        <Flex key={dataRef.id} gap=\"2\" align=\"center\">\n          <Output dataRef={dataRef} />\n          <div>{label}</div>\n        </Flex>\n      ))}\n    </Box>\n  );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n  return (\n    <Flex direction=\"column\" style={{ height: '100%', flex: '1 1 100%' }}>\n      <Box ml=\"4\" mt=\"4\" style={{ flex: '1 1 0', overflow: 'auto' }}>\n        <Extension node={tree.root} depth={0} />\n      </Box>\n\n      <Box\n        m=\"2\"\n        style={{\n          flex: '0 0 auto',\n          background: 'var(--bui-bg-surface-1)',\n          border: '1px solid var(--bui-border)',\n          borderRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <Legend />\n      </Box>\n    </Flex>\n  );\n}\n"],"names":["getOutputColor","InputIcon","DisabledIcon"],"mappings":"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"}

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

@@ -1,8 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-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 { Box, Checkbox } from '@backstage/ui';
 import { useState } from 'react';
 
 function mkDiv(children, options) {
@@ -11,7 +8,7 @@ function mkDiv(children, options) {
     {
       style: {
         color: options?.color,
-        marginLeft: options?.indent ? 16 : void 0
+        marginLeft: options?.indent ? "var(--bui-space-4)" : void 0
       },
       children
     },
@@ -50,35 +47,22 @@ function TextVisualizer({ tree }) {
   const [showOutputs, setShowOutputs] = useState(false);
   const [showDisabled, setShowDisabled] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { style: { overflow: "auto", flex: "1 0 0" }, children: /* @__PURE__ */ jsx("div", { style: { margin: 16, width: "max-content" }, children: nodeToText(tree.root, { showOutputs, showDisabled }) }) }),
-    /* @__PURE__ */ jsxs(Paper, { style: { padding: "8px 16px" }, children: [
-      /* @__PURE__ */ jsx(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: showOutputs,
-              onChange: (_, value) => setShowOutputs(value)
-            }
-          ),
-          label: "Show Outputs"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: showDisabled,
-              onChange: (_, value) => setShowDisabled(value)
-            }
-          ),
-          label: "Show Disabled"
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(Box, { style: { overflow: "auto", flex: "1 0 0" }, children: /* @__PURE__ */ jsx(Box, { m: "4", style: { width: "max-content" }, children: nodeToText(tree.root, { showOutputs, showDisabled }) }) }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        py: "2",
+        px: "4",
+        style: {
+          background: "var(--bui-bg-surface-1)",
+          borderTop: "1px solid var(--bui-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Checkbox, { isSelected: showOutputs, onChange: setShowOutputs, children: "Show Outputs" }),
+          /* @__PURE__ */ jsx(Checkbox, { isSelected: showDisabled, onChange: setShowDisabled, children: "Show Disabled" })
+        ]
+      }
+    )
   ] });
 }
 

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

@@ -1 +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 { 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} []`, { key, indent: true });\n        }\n        return mkDiv(\n          [\n            mkDiv(`${key} [`, { key: 'start' }),\n            ...children.map(e =>\n              mkDiv(nodeToText(e, options), { indent: true, key: e.spec.id }),\n            ),\n            mkDiv(']', { key: 'end' }),\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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"}
+{"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, Checkbox } from '@backstage/ui';\nimport { 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 ? 'var(--bui-space-4)' : 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} []`, { key, indent: true });\n        }\n        return mkDiv(\n          [\n            mkDiv(`${key} [`, { key: 'start' }),\n            ...children.map(e =>\n              mkDiv(nodeToText(e, options), { indent: true, key: e.spec.id }),\n            ),\n            mkDiv(']', { key: 'end' }),\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        <Box m=\"4\" style={{ width: 'max-content' }}>\n          {nodeToText(tree.root, { showOutputs, showDisabled })}\n        </Box>\n      </Box>\n      <Box\n        py=\"2\"\n        px=\"4\"\n        style={{\n          background: 'var(--bui-bg-surface-1)',\n          borderTop: '1px solid var(--bui-border)',\n        }}\n      >\n        <Checkbox isSelected={showOutputs} onChange={setShowOutputs}>\n          Show Outputs\n        </Checkbox>\n        <Checkbox isSelected={showDisabled} onChange={setShowDisabled}>\n          Show Disabled\n        </Checkbox>\n      </Box>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAoBA,SAAS,KAAA,CACP,UACA,OAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EAAO;AAAA,QACL,OAAO,OAAA,EAAS,KAAA;AAAA,QAChB,UAAA,EAAY,OAAA,EAAS,MAAA,GAAS,oBAAA,GAAuB;AAAA,OACvD;AAAA,MAEC;AAAA,KAAA;AAAA,IANI,OAAA,EAAS;AAAA,GAOhB;AAEJ;AAEA,SAAS,UAAA,CACP,MACA,OAAA,EACW;AACX,EAAA,MAAM,UAAA,GACJ,IAAA,CAAK,QAAA,IAAY,CAAC,GAAG,IAAA,CAAK,QAAA,CAAS,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAAA,CAAA,KAAK,EAAE,EAAE,CAAA;AACjE,EAAA,MAAM,MACJ,OAAA,EAAS,WAAA,IAAe,UAAA,IAAc,UAAA,CAAW,SAAS,CAAA,GACtD,CAAA,MAAA,EAAS,CAAC,GAAG,UAAU,CAAA,CAAE,IAAA,GAAO,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA,CAAA,GAC1C,EAAA;AACN,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,QAAA,GAAW,MAAA,GAAY,MAAA;AAE1C,EAAA,IAAI,IAAA,CAAK,KAAA,CAAM,WAAA,CAAY,IAAA,KAAS,CAAA,EAAG;AACrC,IAAA,OAAO,KAAA,CAAM,CAAA,CAAA,EAAI,IAAA,CAAK,IAAA,CAAK,EAAE,GAAG,GAAG,CAAA,EAAA,CAAA,EAAM,EAAE,KAAA,EAAO,CAAA;AAAA,EACpD;AAEA,EAAA,OAAO,KAAA,CAAM;AAAA,IACX,KAAA,CAAM,CAAA,CAAA,EAAI,IAAA,CAAK,IAAA,CAAK,EAAE,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,EAAK,EAAE,GAAA,EAAK,OAAA,EAAS,KAAA,EAAO,CAAA;AAAA,IACxD,GAAG,CAAC,GAAG,IAAA,CAAK,KAAA,CAAM,WAAA,CAAY,OAAA,EAAS,CAAA,CACpC,IAAA,CAAK,CAAC,CAAC,CAAC,CAAA,EAAG,CAAC,CAAC,CAAA,KAAM,CAAA,CAAE,aAAA,CAAc,CAAC,CAAC,CAAA,CACrC,GAAA,CAAI,CAAC,CAAC,GAAA,EAAK,CAAC,CAAA,KAAM;AACjB,MAAA,MAAM,QAAA,GAAW,EACd,MAAA,CAAO,CAAA,CAAA,KAAK,SAAS,YAAA,IAAgB,CAAA,CAAE,QAAQ,CAAA,CAC/C,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM,EAAE,IAAA,CAAK,EAAA,CAAG,cAAc,CAAA,CAAE,IAAA,CAAK,EAAE,CAAC,CAAA;AACpD,MAAA,IAAI,QAAA,CAAS,WAAW,CAAA,EAAG;AACzB,QAAA,OAAO,KAAA,CAAM,GAAG,GAAG,CAAA,GAAA,CAAA,EAAO,EAAE,GAAA,EAAK,MAAA,EAAQ,MAAM,CAAA;AAAA,MACjD;AACA,MAAA,OAAO,KAAA;AAAA,QACL;AAAA,UACE,MAAM,CAAA,EAAG,GAAG,MAAM,EAAE,GAAA,EAAK,SAAS,CAAA;AAAA,UAClC,GAAG,QAAA,CAAS,GAAA;AAAA,YAAI,CAAA,CAAA,KACd,KAAA,CAAM,UAAA,CAAW,CAAA,EAAG,OAAO,CAAA,EAAG,EAAE,MAAA,EAAQ,IAAA,EAAM,GAAA,EAAK,CAAA,CAAE,IAAA,CAAK,IAAI;AAAA,WAChE;AAAA,UACA,KAAA,CAAM,GAAA,EAAK,EAAE,GAAA,EAAK,OAAO;AAAA,SAC3B;AAAA,QACA,EAAE,GAAA,EAAK,MAAA,EAAQ,IAAA;AAAK,OACtB;AAAA,IACF,CAAC,CAAA;AAAA,IACH,KAAA,CAAM,CAAA,EAAA,EAAK,IAAA,CAAK,IAAA,CAAK,EAAE,KAAK,EAAE,GAAA,EAAK,KAAA,EAAO,KAAA,EAAO;AAAA,GAClD,CAAA;AACH;AAEO,SAAS,cAAA,CAAe,EAAE,IAAA,EAAK,EAAsB;AAC1D,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,OAAA,EAAQ,EAC5C,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,CAAA,EAAE,GAAA,EAAI,OAAO,EAAE,KAAA,EAAO,aAAA,EAAc,EACtC,QAAA,EAAA,UAAA,CAAW,IAAA,CAAK,IAAA,EAAM,EAAE,WAAA,EAAa,YAAA,EAAc,CAAA,EACtD,CAAA,EACF,CAAA;AAAA,oBACA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,GAAA;AAAA,QACH,EAAA,EAAG,GAAA;AAAA,QACH,KAAA,EAAO;AAAA,UACL,UAAA,EAAY,yBAAA;AAAA,UACZ,SAAA,EAAW;AAAA,SACb;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,UAAA,EAAY,WAAA,EAAa,QAAA,EAAU,gBAAgB,QAAA,EAAA,cAAA,EAE7D,CAAA;AAAA,8BACC,QAAA,EAAA,EAAS,UAAA,EAAY,YAAA,EAAc,QAAA,EAAU,iBAAiB,QAAA,EAAA,eAAA,EAE/D;AAAA;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { DependencyGraph, DependencyGraphTypes } from '@backstage/core-components';
-import Box from '@material-ui/core/Box';
-import { makeStyles } from '@material-ui/core/styles';
+import { Flex } from '@backstage/ui';
 import { useMemo, useState, useRef, useLayoutEffect } from 'react';
 
 function inputId({ node, input }) {
@@ -50,18 +49,8 @@ function resolveGraphData(tree) {
     ]
   };
 }
-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);
@@ -79,11 +68,15 @@ function Node(props) {
   const padding = 10;
   const paddedWidth = width + padding * 2;
   const paddedHeight = height + padding * 2;
+  const nodeFill = node.type === "node" ? "#90caf9" : "#9e9e9e";
+  const nodeStroke = node.type === "node" ? "#2196f3" : "#757575";
+  const textFill = "#000000";
   return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "rect",
       {
-        className: classes.node,
+        fill: nodeFill,
+        stroke: nodeStroke,
         width: paddedWidth,
         height: paddedHeight,
         rx: node.type === "node" ? 0 : 20
@@ -93,7 +86,7 @@ function Node(props) {
       "text",
       {
         ref: idRef,
-        className: classes.text,
+        fill: textFill,
         y: paddedHeight / 2,
         x: paddedWidth / 2,
         textAnchor: "middle",
@@ -106,13 +99,14 @@ function Node(props) {
 function TreeVisualizer({ tree }) {
   const graphData = useMemo(() => resolveGraphData(tree), [tree]);
   return /* @__PURE__ */ jsx(
-    Box,
+    Flex,
     {
-      flex: "1 1 0",
-      display: "flex",
-      justifyContent: "stretch",
-      alignItems: "stretch",
-      overflow: "hidden",
+      style: {
+        flex: "1 1 0",
+        overflow: "hidden",
+        justifyContent: "stretch",
+        alignItems: "stretch"
+      },
       children: /* @__PURE__ */ jsx(
         DependencyGraph,
         {

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

@@ -1 +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 {\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\n      flex=\"1 1 0\"\n      display=\"flex\"\n      justifyContent=\"stretch\"\n      alignItems=\"stretch\"\n      overflow=\"hidden\"\n    >\n      <DependencyGraph\n        fit=\"contain\"\n        {...graphData}\n        nodeMargin={10}\n        rankMargin={50}\n        paddingX={50}\n        renderNode={Node}\n        ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}\n        direction={DependencyGraphTypes.Direction.LEFT_RIGHT}\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"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 {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport { Flex } from '@backstage/ui';\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\n/** @public */\nexport function Node(props: { node: NodeType }) {\n  const { node } = props;\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  // Simple inline styles for SVG elements\n  const nodeFill = node.type === 'node' ? '#90caf9' : '#9e9e9e';\n  const nodeStroke = node.type === 'node' ? '#2196f3' : '#757575';\n  const textFill = '#000000';\n\n  return (\n    <g>\n      <rect\n        fill={nodeFill}\n        stroke={nodeStroke}\n        width={paddedWidth}\n        height={paddedHeight}\n        rx={node.type === 'node' ? 0 : 20}\n      />\n      <text\n        ref={idRef}\n        fill={textFill}\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    <Flex\n      style={{\n        flex: '1 1 0',\n        overflow: 'hidden',\n        justifyContent: 'stretch',\n        alignItems: 'stretch',\n      }}\n    >\n      <DependencyGraph\n        fit=\"contain\"\n        {...graphData}\n        nodeMargin={10}\n        rankMargin={50}\n        paddingX={50}\n        renderNode={Node}\n        ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}\n        direction={DependencyGraphTypes.Direction.LEFT_RIGHT}\n      />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-app-visualizer";
-var version = "0.1.25-next.1";
+var version = "0.1.25-next.2";
 var description = "Visualizes the Backstage app structure";
 var backstage = {
 	role: "frontend-plugin",
@@ -36,8 +36,9 @@ var dependencies = {
 	"@backstage/core-components": "workspace:^",
 	"@backstage/core-plugin-api": "workspace:^",
 	"@backstage/frontend-plugin-api": "workspace:^",
-	"@material-ui/core": "^4.12.2",
-	"@material-ui/icons": "^4.9.1"
+	"@backstage/ui": "workspace:^",
+	"@remixicon/react": "^4.6.0",
+	"react-aria-components": "^1.13.0"
 };
 var devDependencies = {
 	"@backstage/cli": "workspace:^",

package/dist/package.json.esm.js.map

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

package/dist/plugin.esm.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createRouteRef, PageBlueprint, NavItemBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
-import VisualizerIcon from '@material-ui/icons/Visibility';
+import { RiEyeLine } from '@remixicon/react';
 
 const rootRouteRef = createRouteRef();
 const appVisualizerPage = PageBlueprint.make({
@@ -13,7 +13,7 @@ const appVisualizerPage = PageBlueprint.make({
 const appVisualizerNavItem = NavItemBlueprint.make({
   params: {
     title: "Visualizer",
-    icon: VisualizerIcon,
+    icon: () => /* @__PURE__ */ jsx(RiEyeLine, {}),
     routeRef: rootRouteRef
   }
 });

package/dist/plugin.esm.js.map

@@ -1 +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  createFrontendPlugin,\n  createRouteRef,\n  NavItemBlueprint,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport VisualizerIcon from '@material-ui/icons/Visibility';\n\nconst rootRouteRef = createRouteRef();\n\nconst appVisualizerPage = PageBlueprint.make({\n  params: {\n    path: '/visualizer',\n    routeRef: rootRouteRef,\n    loader: () =>\n      import('./components/AppVisualizerPage').then(m => (\n        <m.AppVisualizerPage />\n      )),\n  },\n});\n\nexport const appVisualizerNavItem = NavItemBlueprint.make({\n  params: {\n    title: 'Visualizer',\n    icon: VisualizerIcon,\n    routeRef: rootRouteRef,\n  },\n});\n\n/** @public */\nexport const visualizerPlugin = createFrontendPlugin({\n  pluginId: 'app-visualizer',\n  info: { packageJson: () => import('../package.json') },\n  extensions: [appVisualizerPage, appVisualizerNavItem],\n});\n"],"names":[],"mappings":";;;;AAwBA,MAAM,eAAe,cAAA,EAAe;AAEpC,MAAM,iBAAA,GAAoB,cAAc,IAAA,CAAK;AAAA,EAC3C,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,aAAA;AAAA,IACN,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,6CAAgC,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,qBAC5C,GAAA,CAAC,CAAA,CAAE,iBAAA,EAAF,EAAoB,CACtB;AAAA;AAEP,CAAC,CAAA;AAEM,MAAM,oBAAA,GAAuB,iBAAiB,IAAA,CAAK;AAAA,EACxD,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,YAAA;AAAA,IACP,IAAA,EAAM,cAAA;AAAA,IACN,QAAA,EAAU;AAAA;AAEd,CAAC;AAGM,MAAM,mBAAmB,oBAAA,CAAqB;AAAA,EACnD,QAAA,EAAU,gBAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,uBAAiB,CAAA,EAAE;AAAA,EACrD,UAAA,EAAY,CAAC,iBAAA,EAAmB,oBAAoB;AACtD,CAAC;;;;"}
+{"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  createFrontendPlugin,\n  createRouteRef,\n  NavItemBlueprint,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport { RiEyeLine as VisualizerIcon } from '@remixicon/react';\n\nconst rootRouteRef = createRouteRef();\n\nconst appVisualizerPage = PageBlueprint.make({\n  params: {\n    path: '/visualizer',\n    routeRef: rootRouteRef,\n    loader: () =>\n      import('./components/AppVisualizerPage').then(m => (\n        <m.AppVisualizerPage />\n      )),\n  },\n});\n\nexport const appVisualizerNavItem = NavItemBlueprint.make({\n  params: {\n    title: 'Visualizer',\n    icon: () => <VisualizerIcon />,\n    routeRef: rootRouteRef,\n  },\n});\n\n/** @public */\nexport const visualizerPlugin = createFrontendPlugin({\n  pluginId: 'app-visualizer',\n  info: { packageJson: () => import('../package.json') },\n  extensions: [appVisualizerPage, appVisualizerNavItem],\n});\n"],"names":["VisualizerIcon"],"mappings":";;;;AAwBA,MAAM,eAAe,cAAA,EAAe;AAEpC,MAAM,iBAAA,GAAoB,cAAc,IAAA,CAAK;AAAA,EAC3C,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,aAAA;AAAA,IACN,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,6CAAgC,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,qBAC5C,GAAA,CAAC,CAAA,CAAE,iBAAA,EAAF,EAAoB,CACtB;AAAA;AAEP,CAAC,CAAA;AAEM,MAAM,oBAAA,GAAuB,iBAAiB,IAAA,CAAK;AAAA,EACxD,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,YAAA;AAAA,IACP,IAAA,EAAM,sBAAM,GAAA,CAACA,SAAA,EAAA,EAAe,CAAA;AAAA,IAC5B,QAAA,EAAU;AAAA;AAEd,CAAC;AAGM,MAAM,mBAAmB,oBAAA,CAAqB;AAAA,EACnD,QAAA,EAAU,gBAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,uBAAiB,CAAA,EAAE;AAAA,EACrD,UAAA,EAAY,CAAC,iBAAA,EAAmB,oBAAoB;AACtD,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-app-visualizer",
-  "version": "0.1.25-next.1",
+  "version": "0.1.25-next.2",
   "description": "Visualizes the Backstage app structure",
   "backstage": {
     "role": "frontend-plugin",
@@ -37,11 +37,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "0.18.3-next.1",
+    "@backstage/core-components": "0.18.3-next.2",
     "@backstage/core-plugin-api": "1.11.2-next.1",
-    "@backstage/frontend-plugin-api": "0.12.2-next.1",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.9.1"
+    "@backstage/frontend-plugin-api": "0.12.2-next.2",
+    "@backstage/ui": "0.9.0-next.3",
+    "@remixicon/react": "^4.6.0",
+    "react-aria-components": "^1.13.0"
   },
   "devDependencies": {
     "@backstage/cli": "0.34.5-next.1",