@backstage/plugin-app-visualizer 0.1.18-next.0 → 0.1.18

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @backstage/plugin-app-visualizer
 
+## 0.1.18
+
+### Patch Changes
+
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.1
+  - @backstage/core-components@0.17.1
+  - @backstage/core-plugin-api@1.10.6
+
+## 0.1.18-next.1
+
+### Patch Changes
+
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.1-next.1
+  - @backstage/core-components@0.17.1-next.1
+  - @backstage/core-plugin-api@1.10.6-next.0
+
 ## 0.1.18-next.0
 
 ### Patch Changes

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

@@ -1,8 +1,9 @@
+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 React, { useMemo, useCallback, useEffect } from 'react';
+import { useMemo, useCallback, useEffect } from 'react';
 import { DetailedVisualizer } from './DetailedVisualizer.esm.js';
 import { TextVisualizer } from './TextVisualizer.esm.js';
 import { TreeVisualizer } from './TreeVisualizer.esm.js';
@@ -17,19 +18,19 @@ function AppVisualizerPage() {
         id: "tree",
         path: "tree",
         label: "Tree",
-        element: /* @__PURE__ */ React.createElement(TreeVisualizer, { tree })
+        element: /* @__PURE__ */ jsx(TreeVisualizer, { tree })
       },
       {
         id: "detailed",
         path: "detailed",
         label: "Detailed",
-        element: /* @__PURE__ */ React.createElement(DetailedVisualizer, { tree })
+        element: /* @__PURE__ */ jsx(DetailedVisualizer, { tree })
       },
       {
         id: "text",
         path: "text",
         label: "Text",
-        element: /* @__PURE__ */ React.createElement(TextVisualizer, { tree })
+        element: /* @__PURE__ */ jsx(TextVisualizer, { tree })
       }
     ],
     [tree]
@@ -51,14 +52,20 @@ function AppVisualizerPage() {
       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)));
+  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(
+        HeaderTabs,
+        {
+          tabs,
+          selectedIndex: currentTabIndex,
+          onChange: handleTabChange
+        }
+      ),
+      element
+    ] }) })
+  ] });
 }
 
 export { AppVisualizerPage };

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 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":";;;;;;;;;;AAgCO,SAAS,iBAAoB,GAAA;AAClC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA;AACvC,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,UAAA,CAAW,OAAQ,EAAA;AAEpC,EAAA,MAAM,IAAO,GAAA,OAAA;AAAA,IACX,MAAM;AAAA,MACJ;AAAA,QACE,EAAI,EAAA,MAAA;AAAA,QACJ,IAAM,EAAA,MAAA;AAAA,QACN,KAAO,EAAA,MAAA;AAAA,QACP,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA;AAAA,OACvC;AAAA,MACA;AAAA,QACE,EAAI,EAAA,UAAA;AAAA,QACJ,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,QACP,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAmB,IAAY,EAAA;AAAA,OAC3C;AAAA,MACA;AAAA,QACE,EAAI,EAAA,MAAA;AAAA,QACJ,IAAM,EAAA,MAAA;AAAA,QACN,KAAO,EAAA,MAAA;AAAA,QACP,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA;AAAA;AACvC,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,IAAA,EAAM,QAAQ,CAAA;AAExC,EAAA,MAAM,WAAc,GAAA,CAAA,CAAA,EAAI,SAAU,EAAA,CAAE,GAAG,CAAC,CAAA,CAAA;AACxC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,IAAM,EAAA,WAAW,KAAK,EAAC;AAE1D,EAAM,MAAA,eAAA,GAAkB,YACpB,GAAA,IAAA,CAAK,SAAU,CAAA,CAAA,CAAA,KAAK,EAAE,IAAS,KAAA,YAAA,CAAa,KAAM,CAAA,IAAI,CACtD,GAAA,CAAA;AAEJ,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,KAAkB,KAAA;AACjB,MAAS,QAAA,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,EAAE,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,GACjB;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAS,QAAA,CAAA,IAAA,CAAK,CAAC,CAAA,CAAE,IAAI,CAAA;AAAA;AACvB,GACC,EAAA,CAAC,OAAS,EAAA,QAAA,EAAU,IAAI,CAAC,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAO,EAAA,EAAA,KAAA,EAAM,gBAAiB,EAAA,CAAA,kBAC9B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,WAAS,IAAC,EAAA,OAAA,EAAO,wBACvB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAQ,MAAO,EAAA,aAAA,EAAc,QAAS,EAAA,MAAA,EAAO,MAChD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,aAAe,EAAA,eAAA;AAAA,MACf,QAAU,EAAA;AAAA;AAAA,GACZ,EACC,OACH,CACF,CACF,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 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,iBAAoB,GAAA;AAClC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA;AACvC,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,UAAA,CAAW,OAAQ,EAAA;AAEpC,EAAA,MAAM,IAAO,GAAA,OAAA;AAAA,IACX,MAAM;AAAA,MACJ;AAAA,QACE,EAAI,EAAA,MAAA;AAAA,QACJ,IAAM,EAAA,MAAA;AAAA,QACN,KAAO,EAAA,MAAA;AAAA,QACP,OAAA,kBAAU,GAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA;AAAA,OACvC;AAAA,MACA;AAAA,QACE,EAAI,EAAA,UAAA;AAAA,QACJ,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,QACP,OAAA,kBAAU,GAAA,CAAA,kBAAA,EAAA,EAAmB,IAAY,EAAA;AAAA,OAC3C;AAAA,MACA;AAAA,QACE,EAAI,EAAA,MAAA;AAAA,QACJ,IAAM,EAAA,MAAA;AAAA,QACN,KAAO,EAAA,MAAA;AAAA,QACP,OAAA,kBAAU,GAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA;AAAA;AACvC,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,IAAA,EAAM,QAAQ,CAAA;AAExC,EAAA,MAAM,WAAc,GAAA,CAAA,CAAA,EAAI,SAAU,EAAA,CAAE,GAAG,CAAC,CAAA,CAAA;AACxC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,IAAM,EAAA,WAAW,KAAK,EAAC;AAE1D,EAAM,MAAA,eAAA,GAAkB,YACpB,GAAA,IAAA,CAAK,SAAU,CAAA,CAAA,CAAA,KAAK,EAAE,IAAS,KAAA,YAAA,CAAa,KAAM,CAAA,IAAI,CACtD,GAAA,CAAA;AAEJ,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,KAAkB,KAAA;AACjB,MAAS,QAAA,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,EAAE,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,GACjB;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAS,QAAA,CAAA,IAAA,CAAK,CAAC,CAAA,CAAE,IAAI,CAAA;AAAA;AACvB,GACC,EAAA,CAAC,OAAS,EAAA,QAAA,EAAU,IAAI,CAAC,CAAA;AAE5B,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAM,gBAAiB,EAAA,CAAA;AAAA,oBAC9B,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAS,EAAA,IAAA,EAAC,OAAO,EAAA,IAAA,EACxB,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,aAAc,EAAA,QAAA,EAAS,QAAO,MAChD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,aAAe,EAAA,eAAA;AAAA,UACf,QAAU,EAAA;AAAA;AAAA,OACZ;AAAA,MACC;AAAA,KAAA,EACH,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,3 +1,4 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { coreExtensionData, ApiBlueprint, ThemeBlueprint, NavItemBlueprint, useRouteRef } from '@backstage/frontend-plugin-api';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
@@ -7,7 +8,6 @@ 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 React from 'react';
 import { Link } from 'react-router-dom';
 
 function createOutputColorGenerator(colorMap, availableColors) {
@@ -136,7 +136,7 @@ function OutputLink(props) {
   const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);
   try {
     const link = useRouteRef(routeRef);
-    return /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(Typography, null, props.dataRef.id) }, /* @__PURE__ */ React.createElement(Box, { className: props.className }, link ? /* @__PURE__ */ React.createElement(Link, { to: link() }, "link") : null));
+    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",
@@ -151,12 +151,12 @@ function Output(props) {
   const instance = node?.instance;
   const classes = useOutputStyles({ color: getOutputColor(id) });
   if (id === coreExtensionData.routePath.id) {
-    return /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(Typography, null, getFullPath(node)) }, /* @__PURE__ */ React.createElement(Box, { className: classes.output }, String(instance?.getData(dataRef) ?? "")));
+    return /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(Typography, { children: getFullPath(node) }), children: /* @__PURE__ */ jsx(Box, { className: classes.output, children: String(instance?.getData(dataRef) ?? "") }) });
   }
   if (id === coreExtensionData.routeRef.id) {
-    return /* @__PURE__ */ React.createElement(OutputLink, { ...props, className: classes.output });
+    return /* @__PURE__ */ jsx(OutputLink, { ...props, className: classes.output });
   }
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(Typography, null, id) }, /* @__PURE__ */ React.createElement(Box, { className: classes.output }));
+  return /* @__PURE__ */ jsx(Tooltip, { title: /* @__PURE__ */ jsx(Typography, { children: id }), children: /* @__PURE__ */ jsx(Box, { className: classes.output }) });
 }
 function Attachments(props) {
   const { node, enabled, depth } = props;
@@ -165,16 +165,22 @@ function Attachments(props) {
   if (attachments.size === 0) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.attachments }, [...attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, children]) => {
-    return /* @__PURE__ */ React.createElement(Box, { key, className: classes.attachmentsInput }, /* @__PURE__ */ React.createElement(Box, { className: classes.attachmentsInputTitle }, /* @__PURE__ */ React.createElement(InputIcon, null), /* @__PURE__ */ React.createElement(Typography, { className: classes.attachmentsInputName }, key)), /* @__PURE__ */ React.createElement(Box, { className: classes.attachmentsInputChildren }, children.map((childNode) => /* @__PURE__ */ React.createElement(
-      Extension,
-      {
-        key: childNode.spec.id,
-        node: childNode,
-        depth: depth + 1
-      }
-    ))));
-  }));
+  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(
+        Extension,
+        {
+          node: childNode,
+          depth: depth + 1
+        },
+        childNode.spec.id
+      )) })
+    ] }, key);
+  }) });
 }
 function ExtensionTooltip(props) {
   const parts = [];
@@ -186,14 +192,23 @@ function ExtensionTooltip(props) {
     parts.push(`${node.spec.id} [${input}]`);
   }
   parts.reverse();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, parts.map((part) => /* @__PURE__ */ React.createElement(Typography, { key: part }, part)));
+  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__ */ 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 }));
+  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 legendMap = {
   "React Element": coreExtensionData.reactElement,
@@ -204,7 +219,7 @@ const legendMap = {
   Theme: ThemeBlueprint.dataRefs.theme
 };
 function Legend() {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Box,
     {
       display: "grid",
@@ -213,23 +228,28 @@ function Legend() {
       style: {
         grid: "auto-flow / repeat(3, 1fr)",
         gap: 16
-      }
-    },
-    Object.entries(legendMap).map(([label, dataRef]) => /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        key: dataRef.id,
-        display: "flex",
-        style: { gap: 8 },
-        alignItems: "center"
       },
-      /* @__PURE__ */ React.createElement(Output, { dataRef }),
-      /* @__PURE__ */ React.createElement(Typography, null, label)
-    ))
+      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
+      ))
+    }
   );
 }
 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)));
+  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, {}) })
+  ] });
 }
 
 export { DetailedVisualizer };

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 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    [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  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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"}

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

@@ -1,20 +1,21 @@
+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 React, { useState } from 'react';
+import { useState } from 'react';
 
 function mkDiv(children, options) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      key: options?.key,
       style: {
         color: options?.color,
         marginLeft: options?.indent ? 16 : void 0
-      }
+      },
+      children
     },
-    children
+    options?.key
   );
 }
 function nodeToText(node, options) {
@@ -48,31 +49,37 @@ function nodeToText(node, options) {
 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,
+  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,
         {
-          checked: showOutputs,
-          onChange: (_, value) => setShowOutputs(value)
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: showOutputs,
+              onChange: (_, value) => setShowOutputs(value)
+            }
+          ),
+          label: "Show Outputs"
         }
       ),
-      label: "Show Outputs"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
+      /* @__PURE__ */ jsx(
+        FormControlLabel,
         {
-          checked: showDisabled,
-          onChange: (_, value) => setShowDisabled(value)
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: showDisabled,
+              onChange: (_, value) => setShowDisabled(value)
+            }
+          ),
+          label: "Show Disabled"
         }
-      ),
-      label: "Show Disabled"
-    }
-  )));
+      )
+    ] })
+  ] });
 }
 
 export { TextVisualizer };

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 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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"}
+{"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} []`, { 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

@@ -1,7 +1,8 @@
-import React, { useMemo, useState, useRef, useLayoutEffect } from 'react';
+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 { useMemo, useState, useRef, useLayoutEffect } from 'react';
 
 function inputId({ node, input }) {
   return `${node.spec.id}$$${input}`;
@@ -78,30 +79,33 @@ function Node(props) {
   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
-  ));
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: classes.node,
+        width: paddedWidth,
+        height: paddedHeight,
+        rx: node.type === "node" ? 0 : 20
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        ref: idRef,
+        className: classes.text,
+        y: paddedHeight / 2,
+        x: paddedWidth / 2,
+        textAnchor: "middle",
+        alignmentBaseline: "middle",
+        children: 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(
+  return /* @__PURE__ */ jsx(Box, { height: "100%", flex: "1 1 100%", flexDirection: "column", overflow: "hidden", children: /* @__PURE__ */ jsx(
     DependencyGraph,
     {
       fit: "contain",
@@ -115,7 +119,7 @@ function TreeVisualizer({ tree }) {
       ranker: DependencyGraphTypes.Ranker.TIGHT_TREE,
       direction: DependencyGraphTypes.Direction.TOP_BOTTOM
     }
-  ));
+  ) });
 }
 
 export { Node, TreeVisualizer };

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 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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"}
+{"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 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/index.d.ts

@@ -1,6 +1,6 @@
+import * as react from 'react';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
-import React from 'react';
 
 /** @public */
 declare const visualizerPlugin: _backstage_frontend_plugin_api.FrontendPlugin<{}, {}, {
@@ -30,7 +30,7 @@ declare const visualizerPlugin: _backstage_frontend_plugin_api.FrontendPlugin<{}
         configInput: {
             path?: string | undefined;
         };
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
             optional: true;
         }>;
         inputs: {};

package/dist/plugin.esm.js

@@ -1,13 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
 import { createRouteRef, PageBlueprint, NavItemBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
 import VisualizerIcon from '@material-ui/icons/Visibility';
-import React from 'react';
 
 const rootRouteRef = createRouteRef();
 const appVisualizerPage = PageBlueprint.make({
   params: {
     defaultPath: "/visualizer",
     routeRef: rootRouteRef,
-    loader: () => import('./components/AppVisualizerPage/index.esm.js').then((m) => /* @__PURE__ */ React.createElement(m.AppVisualizerPage, null))
+    loader: () => import('./components/AppVisualizerPage/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.AppVisualizerPage, {}))
   }
 });
 const appVisualizerNavItem = NavItemBlueprint.make({

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';\nimport React from 'react';\n\nconst rootRouteRef = createRouteRef();\n\nconst appVisualizerPage = PageBlueprint.make({\n  params: {\n    defaultPath: '/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  id: 'app-visualizer',\n  extensions: [appVisualizerPage, appVisualizerNavItem],\n});\n"],"names":[],"mappings":";;;;AAyBA,MAAM,eAAe,cAAe,EAAA;AAEpC,MAAM,iBAAA,GAAoB,cAAc,IAAK,CAAA;AAAA,EAC3C,MAAQ,EAAA;AAAA,IACN,WAAa,EAAA,aAAA;AAAA,IACb,QAAU,EAAA,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,6CAAgC,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,qBAC3C,KAAA,CAAA,aAAA,CAAA,CAAA,CAAE,iBAAF,EAAA,IAAoB,CACtB;AAAA;AAEP,CAAC,CAAA;AAEY,MAAA,oBAAA,GAAuB,iBAAiB,IAAK,CAAA;AAAA,EACxD,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,YAAA;AAAA,IACP,IAAM,EAAA,cAAA;AAAA,IACN,QAAU,EAAA;AAAA;AAEd,CAAC;AAGM,MAAM,mBAAmB,oBAAqB,CAAA;AAAA,EACnD,EAAI,EAAA,gBAAA;AAAA,EACJ,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 VisualizerIcon from '@material-ui/icons/Visibility';\n\nconst rootRouteRef = createRouteRef();\n\nconst appVisualizerPage = PageBlueprint.make({\n  params: {\n    defaultPath: '/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  id: 'app-visualizer',\n  extensions: [appVisualizerPage, appVisualizerNavItem],\n});\n"],"names":[],"mappings":";;;;AAwBA,MAAM,eAAe,cAAe,EAAA;AAEpC,MAAM,iBAAA,GAAoB,cAAc,IAAK,CAAA;AAAA,EAC3C,MAAQ,EAAA;AAAA,IACN,WAAa,EAAA,aAAA;AAAA,IACb,QAAU,EAAA,YAAA;AAAA,IACV,MAAA,EAAQ,MACN,OAAO,6CAAgC,CAAA,CAAE,IAAK,CAAA,CAAA,CAAA,qBAC3C,GAAA,CAAA,CAAA,CAAE,iBAAF,EAAA,EAAoB,CACtB;AAAA;AAEP,CAAC,CAAA;AAEY,MAAA,oBAAA,GAAuB,iBAAiB,IAAK,CAAA;AAAA,EACxD,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,YAAA;AAAA,IACP,IAAM,EAAA,cAAA;AAAA,IACN,QAAU,EAAA;AAAA;AAEd,CAAC;AAGM,MAAM,mBAAmB,oBAAqB,CAAA;AAAA,EACnD,EAAI,EAAA,gBAAA;AAAA,EACJ,UAAA,EAAY,CAAC,iBAAA,EAAmB,oBAAoB;AACtD,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-app-visualizer",
-  "version": "0.1.18-next.0",
+  "version": "0.1.18",
   "description": "Visualizes the Backstage app structure",
   "backstage": {
     "role": "frontend-plugin",
@@ -37,15 +37,15 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "0.17.1-next.0",
-    "@backstage/core-plugin-api": "1.10.5",
-    "@backstage/frontend-plugin-api": "0.10.1-next.0",
+    "@backstage/core-components": "^0.17.1",
+    "@backstage/core-plugin-api": "^1.10.6",
+    "@backstage/frontend-plugin-api": "^0.10.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1"
   },
   "devDependencies": {
-    "@backstage/cli": "0.32.0-next.1",
-    "@backstage/frontend-defaults": "0.2.1-next.0",
+    "@backstage/cli": "^0.32.0",
+    "@backstage/frontend-defaults": "^0.2.1",
     "@types/react": "^18.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
@@ -62,5 +62,12 @@
       "optional": true
     }
   },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "module": "./dist/index.esm.js"
 }