@backstage/plugin-app-visualizer 0.1.9-next.3 → 0.1.10-next.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @backstage/plugin-app-visualizer
 
+## 0.1.10-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.8.0-next.0
+  - @backstage/core-components@0.14.10
+  - @backstage/core-plugin-api@1.9.3
+
+## 0.1.9
+
+### Patch Changes
+
+- 72754db: Updated usage of `useRouteRef`, which can now always return `undefined`.
+- c7603e8: Deprecate the old pattern of `create*Extension`, and replace it with the equivalent Blueprint implementation instead
+- e493020: Fixing issue with the visualizer crashing when clicking on the detailed view because of `routeRef` parameters
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.7.0
+  - @backstage/core-components@0.14.10
+  - @backstage/core-plugin-api@1.9.3
+
 ## 0.1.9-next.3
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-import { coreExtensionData, createApiExtension, createThemeExtension, createNavItemExtension, useRouteRef } from '@backstage/frontend-plugin-api';
+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';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -35,9 +35,9 @@ const getOutputColor = createOutputColorGenerator(
     [coreExtensionData.reactElement.id]: colors.green[500],
     [coreExtensionData.routePath.id]: colors.yellow[500],
     [coreExtensionData.routeRef.id]: colors.purple[500],
-    [createApiExtension.factoryDataRef.id]: colors.blue[500],
-    [createThemeExtension.themeDataRef.id]: colors.lime[500],
-    [createNavItemExtension.targetDataRef.id]: colors.orange[500]
+    [ApiBlueprint.dataRefs.factory.id]: colors.blue[500],
+    [ThemeBlueprint.dataRefs.theme.id]: colors.lime[500],
+    [NavItemBlueprint.dataRefs.target.id]: colors.orange[500]
   },
   [
     colors.blue[200],
@@ -134,8 +134,16 @@ function getFullPath(node) {
 }
 function OutputLink(props) {
   const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);
-  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));
+  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));
+  } 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;
@@ -189,11 +197,11 @@ function Extension(props) {
 }
 const legendMap = {
   "React Element": coreExtensionData.reactElement,
-  "Utility API": createApiExtension.factoryDataRef,
+  "Utility API": ApiBlueprint.dataRefs.factory,
   "Route Path": coreExtensionData.routePath,
   "Route Ref": coreExtensionData.routeRef,
-  "Nav Target": createNavItemExtension.targetDataRef,
-  Theme: createThemeExtension.themeDataRef
+  "Nav Target": NavItemBlueprint.dataRefs.target,
+  Theme: ThemeBlueprint.dataRefs.theme
 };
 function Legend() {
   return /* @__PURE__ */ React.createElement(

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

package/dist/index.d.ts

@@ -1,6 +1,37 @@
 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.BackstagePlugin<{}, {}, {}>;
+declare const visualizerPlugin: _backstage_frontend_plugin_api.BackstagePlugin<{}, {}, {
+    "page:app-visualizer": _backstage_frontend_plugin_api.ExtensionDefinition<{
+        kind: "page";
+        namespace: undefined;
+        name: undefined;
+        config: {
+            path: string | undefined;
+        };
+        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", {
+            optional: true;
+        }>;
+        inputs: {};
+    }>;
+    "nav-item:app-visualizer": _backstage_frontend_plugin_api.ExtensionDefinition<{
+        kind: "nav-item";
+        namespace: undefined;
+        name: undefined;
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<{
+            title: string;
+            icon: _backstage_core_plugin_api.IconComponent;
+            routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
+        }, "core.nav-item.target", {}>;
+        inputs: {};
+    }>;
+}>;
 
 export { visualizerPlugin as default };

package/dist/plugin.esm.js

@@ -1,19 +1,23 @@
-import { createRouteRef, createPageExtension, createNavItemExtension, createPlugin } from '@backstage/frontend-plugin-api';
+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 = createPageExtension({
-  defaultPath: "/visualizer",
-  routeRef: rootRouteRef,
-  loader: () => import('./components/AppVisualizerPage/index.esm.js').then((m) => /* @__PURE__ */ React.createElement(m.AppVisualizerPage, null))
+const appVisualizerPage = PageBlueprint.make({
+  params: {
+    defaultPath: "/visualizer",
+    routeRef: rootRouteRef,
+    loader: () => import('./components/AppVisualizerPage/index.esm.js').then((m) => /* @__PURE__ */ React.createElement(m.AppVisualizerPage, null))
+  }
 });
-const appVisualizerNavItem = createNavItemExtension({
-  title: "Visualizer",
-  icon: VisualizerIcon,
-  routeRef: rootRouteRef
+const appVisualizerNavItem = NavItemBlueprint.make({
+  params: {
+    title: "Visualizer",
+    icon: VisualizerIcon,
+    routeRef: rootRouteRef
+  }
 });
-const visualizerPlugin = createPlugin({
+const visualizerPlugin = createFrontendPlugin({
   id: "app-visualizer",
   extensions: [appVisualizerPage, appVisualizerNavItem]
 });

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-app-visualizer",
-  "version": "0.1.9-next.3",
+  "version": "0.1.10-next.0",
   "description": "Visualizes the Backstage app structure",
   "backstage": {
     "role": "frontend-plugin",
@@ -34,15 +34,15 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.14.10-next.0",
+    "@backstage/core-components": "^0.14.10",
     "@backstage/core-plugin-api": "^1.9.3",
-    "@backstage/frontend-plugin-api": "^0.7.0-next.3",
+    "@backstage/frontend-plugin-api": "^0.8.0-next.0",
     "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.9.1"
+    "@material-ui/icons": "^4.9.1",
+    "@types/react": "^16.13.1 || ^17.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.27.0-next.4",
-    "@types/react": "^16.13.1 || ^17.0.0"
+    "@backstage/cli": "^0.27.1-next.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",