@backstage/plugin-app-visualizer 0.1.27 → 0.1.28-next.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @backstage/plugin-app-visualizer
 
+## 0.1.28-next.0
+
+### Patch Changes
+
+- cb090b4: Bump react-aria-components to v1.14.0
+- c38b74d: Internal updates for blueprint moves to `@backstage/plugin-app-react`.
+- 4d50e1f: Improved rendering performance of the details page.
+- Updated dependencies
+  - @backstage/ui@0.12.0-next.0
+  - @backstage/core-components@0.18.6-next.0
+  - @backstage/frontend-plugin-api@0.14.0-next.0
+  - @backstage/core-plugin-api@1.12.2-next.0
+
 ## 0.1.27
 
 ### Patch Changes

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

@@ -1,8 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ThemeBlueprint, NavItemBlueprint, coreExtensionData, ApiBlueprint, useApi, routeResolutionApiRef } from '@backstage/frontend-plugin-api';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { NavItemBlueprint, coreExtensionData, ApiBlueprint, useApi, routeResolutionApiRef } from '@backstage/frontend-plugin-api';
 import { Flex, Box, TooltipTrigger, Text, Tooltip, Link } from '@backstage/ui';
 import { RiCloseCircleLine, RiInputField } from '@remixicon/react';
 import { Focusable } from 'react-aria-components';
+import { useMemo, memo, useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
 
 function getContrastColor(bgColor) {
   const hex = bgColor.replace("#", "");
@@ -44,7 +45,6 @@ const getOutputColor = createOutputColorGenerator(
     [coreExtensionData.routePath.id]: "#ffeb3b",
     [coreExtensionData.routeRef.id]: "#9c27b0",
     [ApiBlueprint.dataRefs.factory.id]: "#2196f3",
-    [ThemeBlueprint.dataRefs.theme.id]: "#cddc39",
     [NavItemBlueprint.dataRefs.target.id]: "#ff9800"
   },
   ["#90caf9", "#ffcc80", "#a5d6a7", "#ef9a9a", "#fff59d", "#ce93d8", "#e6ee9c"]
@@ -66,99 +66,106 @@ function getFullPath(node) {
   }
   return getFullPath(parent) + part;
 }
-function Output(props) {
-  const { dataRef, node } = props;
-  const { id } = dataRef;
-  const instance = node?.instance;
-  const routeResolutionApi = useApi(routeResolutionApiRef);
-  const { backgroundColor, color } = getOutputColor(id);
-  const chipStyle = {
-    height: 20,
-    padding: "0 10px",
-    borderRadius: "10px",
-    color,
-    backgroundColor,
-    display: "flex",
-    alignItems: "center",
-    fontWeight: "var(--bui-font-weight-regular)"
-  };
-  if (id === coreExtensionData.routeRef.id && node) {
-    try {
-      const routeRef = props.node?.instance?.getData(
-        coreExtensionData.routeRef
-      );
-      const link = routeRef && routeResolutionApi.resolve(routeRef)?.();
-      if (link) {
-        return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
-          /* @__PURE__ */ jsx(Link, { href: link, style: chipStyle, children: "link" }),
-          /* @__PURE__ */ jsx(Tooltip, { children: id })
-        ] });
-      }
-    } catch {
+function ProgressiveCollection({
+  items,
+  batchSize = 10
+}) {
+  const [maxIndex, setMaxIndex] = useState(0);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (maxIndex >= items.length) {
+      return void 0;
     }
-  }
-  let tooltip = id;
-  let text = void 0;
-  if (id === coreExtensionData.routePath.id) {
-    text = String(instance?.getData(dataRef) ?? "");
-    tooltip = getFullPath(node);
-  }
-  return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
-    /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(Text, { style: { ...chipStyle, cursor: "help" }, children: text }) }),
-    /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: tooltip })
-  ] });
+    const processBatch = () => {
+      const nextIndex = Math.min(maxIndex + batchSize, items.length);
+      setMaxIndex(nextIndex);
+      if (nextIndex < items.length) {
+        timeoutRef.current = setTimeout(processBatch, 0);
+      }
+    };
+    timeoutRef.current = setTimeout(processBatch, 0);
+    return () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [maxIndex, items.length, batchSize]);
+  return /* @__PURE__ */ jsx(Fragment, { children: items.slice(0, maxIndex).map((item, index) => /* @__PURE__ */ jsx(Fragment$1, { children: item() }, index)) });
 }
-function Attachments(props) {
-  const { node, depth } = props;
-  const { attachments } = node.edges;
-  if (attachments.size === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: [...attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, children], idx) => {
-    return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          p: "2",
-          align: "center",
-          style: {
-            borderTopWidth: "var(--bui-space-1_5)",
-            borderTopStyle: "solid",
-            borderTopColor: getBorderColor(depth),
-            borderTop: idx === 0 ? "none" : void 0,
-            width: "fit-content"
-          },
-          children: [
-            /* @__PURE__ */ jsx(RiInputField, { size: 16 }),
-            /* @__PURE__ */ jsx("div", { style: { marginLeft: "var(--bui-space-2)" }, children: key })
-          ]
+const Output = memo(
+  function Output2(props) {
+    const { dataRef, node } = props;
+    const { id } = dataRef;
+    const instance = node?.instance;
+    const routeResolutionApi = useApi(routeResolutionApiRef);
+    const { backgroundColor, color } = getOutputColor(id);
+    const chipStyle = {
+      height: 20,
+      padding: "0 10px",
+      borderRadius: "10px",
+      color,
+      backgroundColor,
+      display: "flex",
+      alignItems: "center",
+      fontWeight: "var(--bui-font-weight-regular)"
+    };
+    if (id === coreExtensionData.routeRef.id && node) {
+      try {
+        const routeRef = props.node?.instance?.getData(
+          coreExtensionData.routeRef
+        );
+        const link = routeRef && routeResolutionApi.resolve(routeRef)?.();
+        if (link) {
+          return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+            /* @__PURE__ */ jsx(Link, { href: link, style: chipStyle, children: "link" }),
+            /* @__PURE__ */ jsx(Tooltip, { children: id })
+          ] });
         }
-      ),
-      /* @__PURE__ */ jsx(Flex, { ml: "2", mb: "2", direction: "column", align: "start", gap: "1", children: children.map((childNode) => /* @__PURE__ */ jsx(
-        Extension,
-        {
-          node: childNode,
-          depth: depth + 1
-        },
-        childNode.spec.id
-      )) })
-    ] }, key);
-  }) });
-}
-function Extension(props) {
-  const { node, depth } = props;
-  const enabled = Boolean(node.instance);
-  const dataRefs = node.instance && [...node.instance.getDataRefs()];
-  const tooltipParts = [];
-  let currentNode = node;
-  tooltipParts.push(currentNode.spec.id);
-  while (currentNode.edges.attachedTo) {
-    const input = currentNode.edges.attachedTo.input;
-    currentNode = currentNode.edges.attachedTo.node;
-    tooltipParts.push(`${currentNode.spec.id} [${input}]`);
+      } catch {
+      }
+    }
+    let tooltip = id;
+    let text = void 0;
+    if (id === coreExtensionData.routePath.id) {
+      text = String(instance?.getData(dataRef) ?? "");
+      tooltip = getFullPath(node);
+    }
+    return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+      /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(Text, { style: { ...chipStyle, cursor: "help" }, children: text }) }),
+      /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: tooltip })
+    ] });
+  },
+  (prevProps, nextProps) => {
+    return prevProps.dataRef.id === nextProps.dataRef.id && prevProps.node?.spec.id === nextProps.node?.spec.id;
   }
-  tooltipParts.reverse();
-  const tooltipText = tooltipParts.join("\n");
+);
+function Extension({ node, depth }) {
+  const enabled = Boolean(node.instance);
+  const tooltipText = useMemo(() => {
+    const tooltipParts = [];
+    let currentNode = node;
+    tooltipParts.push(currentNode.spec.id);
+    while (currentNode.edges.attachedTo) {
+      const input = currentNode.edges.attachedTo.input;
+      currentNode = currentNode.edges.attachedTo.node;
+      tooltipParts.push(`${currentNode.spec.id} [${input}]`);
+    }
+    tooltipParts.reverse();
+    return tooltipParts.join("\n");
+  }, [node]);
+  const sortedDataRefs = useMemo(() => {
+    if (!node.instance) {
+      return [];
+    }
+    const dataRefs = [...node.instance.getDataRefs()];
+    return dataRefs.sort((a, b) => a.id.localeCompare(b.id));
+  }, [node.instance]);
+  const sortedAttachments = useMemo(() => {
+    return [...node.edges.attachments.entries()].sort(
+      ([a], [b]) => a.localeCompare(b)
+    );
+  }, [node.edges.attachments]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -187,13 +194,45 @@ function Extension(props) {
                 /* @__PURE__ */ jsx(Tooltip, { style: { maxWidth: "unset" }, children: /* @__PURE__ */ jsx(Text, { style: { whiteSpace: "pre-wrap" }, children: tooltipText }) })
               ] }),
               /* @__PURE__ */ jsxs(Flex, { ml: "2", align: "center", gap: "2", children: [
-                dataRefs && dataRefs.length > 0 && dataRefs.sort((a, b) => a.id.localeCompare(b.id)).map((ref) => /* @__PURE__ */ jsx(Output, { dataRef: ref, node }, ref.id)),
+                sortedDataRefs.length > 0 && sortedDataRefs.map((ref) => /* @__PURE__ */ jsx(Output, { dataRef: ref, node }, ref.id)),
                 !enabled && /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Attachments, { node, enabled, depth })
+        sortedAttachments.length > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: sortedAttachments.map(([key, children], idx) => /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              p: "2",
+              align: "center",
+              style: {
+                borderTopWidth: "var(--bui-space-1_5)",
+                borderTopStyle: "solid",
+                borderTopColor: getBorderColor(depth),
+                borderTop: idx === 0 ? "none" : void 0,
+                width: "fit-content"
+              },
+              children: [
+                /* @__PURE__ */ jsx(RiInputField, { size: 16 }),
+                /* @__PURE__ */ jsx("div", { style: { marginLeft: "var(--bui-space-2)" }, children: key })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Flex, { ml: "2", mb: "2", direction: "column", align: "start", gap: "1", children: /* @__PURE__ */ jsx(
+            ProgressiveCollection,
+            {
+              items: children.map((childNode) => () => /* @__PURE__ */ jsx(
+                Extension,
+                {
+                  node: childNode,
+                  depth: depth + 1
+                },
+                childNode.spec.id
+              ))
+            }
+          ) })
+        ] }, key)) })
       ]
     },
     node.spec.id
@@ -204,8 +243,7 @@ const legendMap = {
   "Utility API": ApiBlueprint.dataRefs.factory,
   "Route Path": coreExtensionData.routePath,
   "Route Ref": coreExtensionData.routeRef,
-  "Nav Target": NavItemBlueprint.dataRefs.target,
-  Theme: ThemeBlueprint.dataRefs.theme
+  "Nav Target": NavItemBlueprint.dataRefs.target
 };
 function Legend() {
   return /* @__PURE__ */ jsx(

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  coreExtensionData,\n  ApiBlueprint,\n  NavItemBlueprint,\n  ThemeBlueprint,\n  useApi,\n  routeResolutionApiRef,\n} from '@backstage/frontend-plugin-api';\nimport { Box, Flex, Link, Text, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport {\n  RiInputField as InputIcon,\n  RiCloseCircleLine as DisabledIcon,\n} from '@remixicon/react';\nimport { Focusable } from 'react-aria-components';\n\nfunction getContrastColor(bgColor: string): string {\n  const hex = bgColor.replace('#', '');\n  const r = parseInt(hex.substr(0, 2), 16);\n  const g = parseInt(hex.substr(2, 2), 16);\n  const b = parseInt(hex.substr(4, 2), 16);\n  const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n  return brightness > 128 ? '#000000' : '#ffffff';\n}\n\nfunction createOutputColorGenerator(\n  colorMap: { [extDataId: string]: string },\n  availableColors: string[],\n) {\n  const map = new Map<string, { backgroundColor: string; color: string }>();\n  let i = 0;\n\n  return function getOutputColor(id: string) {\n    let backgroundColor: string;\n    if (id in colorMap) {\n      backgroundColor = colorMap[id];\n    } else {\n      const cached = map.get(id);\n      if (cached) {\n        return cached;\n      }\n      backgroundColor = availableColors[i];\n      i += 1;\n      if (i >= availableColors.length) {\n        i = 0;\n      }\n    }\n    const result = {\n      backgroundColor,\n      color: getContrastColor(backgroundColor),\n    };\n    map.set(id, result);\n    return result;\n  };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n  {\n    [coreExtensionData.reactElement.id]: '#4caf50',\n    [coreExtensionData.routePath.id]: '#ffeb3b',\n    [coreExtensionData.routeRef.id]: '#9c27b0',\n    [ApiBlueprint.dataRefs.factory.id]: '#2196f3',\n    [ThemeBlueprint.dataRefs.theme.id]: '#cddc39',\n    [NavItemBlueprint.dataRefs.target.id]: '#ff9800',\n  },\n\n  ['#90caf9', '#ffcc80', '#a5d6a7', '#ef9a9a', '#fff59d', '#ce93d8', '#e6ee9c'],\n);\n\n// Helper function to get border color based on depth\nfunction getBorderColor(depth: number): string {\n  const greyLevels = [8, 7, 6, 5]; // darker levels that contrast well with background\n  const index = depth % greyLevels.length;\n  const level = greyLevels[index];\n  return `var(--bui-gray-${level})`;\n}\n\nfunction getFullPath(node?: AppNode): string {\n  if (!node) {\n    return '';\n  }\n  const parent = node.edges.attachedTo?.node;\n  const part = node.instance?.getData(coreExtensionData.routePath);\n  if (!part) {\n    return getFullPath(parent);\n  }\n  return getFullPath(parent) + part;\n}\n\nfunction Output(props: { dataRef: ExtensionDataRef<unknown>; node?: AppNode }) {\n  const { dataRef, node } = props;\n  const { id } = dataRef;\n  const instance = node?.instance;\n\n  const routeResolutionApi = useApi(routeResolutionApiRef);\n\n  const { backgroundColor, color } = getOutputColor(id);\n\n  const chipStyle: React.CSSProperties = {\n    height: 20,\n    padding: '0 10px',\n    borderRadius: '10px',\n    color,\n    backgroundColor,\n    display: 'flex',\n    alignItems: 'center',\n    fontWeight:\n      'var(--bui-font-weight-regular)' as React.CSSProperties['fontWeight'],\n  };\n\n  if (id === coreExtensionData.routeRef.id && node) {\n    try {\n      const routeRef = props.node?.instance?.getData(\n        coreExtensionData.routeRef,\n      );\n      const link = routeRef && routeResolutionApi.resolve(routeRef)?.();\n      if (link) {\n        return (\n          <TooltipTrigger>\n            <Link href={link} style={chipStyle}>\n              link\n            </Link>\n            <Tooltip>{id}</Tooltip>\n          </TooltipTrigger>\n        );\n      }\n    } catch {\n      /* ignore */\n    }\n  }\n\n  let tooltip = id;\n  let text: string | undefined = undefined;\n  if (id === coreExtensionData.routePath.id) {\n    text = String(instance?.getData(dataRef) ?? '');\n    tooltip = getFullPath(node);\n  }\n\n  return (\n    <TooltipTrigger>\n      <Focusable>\n        <Text style={{ ...chipStyle, cursor: 'help' }}>{text}</Text>\n      </Focusable>\n      <Tooltip style={{ maxWidth: 'unset' }}>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n\nfunction Attachments(props: {\n  node: AppNode;\n  enabled: boolean;\n  depth: number;\n}) {\n  const { node, depth } = props;\n  const { attachments } = node.edges;\n\n  if (attachments.size === 0) {\n    return null;\n  }\n\n  return (\n    <Flex direction=\"column\" gap=\"4\">\n      {[...attachments.entries()]\n        .sort(([a], [b]) => a.localeCompare(b))\n        .map(([key, children], idx) => {\n          return (\n            <Box key={key}>\n              <Flex\n                p=\"2\"\n                align=\"center\"\n                style={{\n                  borderTopWidth: 'var(--bui-space-1_5)',\n                  borderTopStyle: 'solid',\n                  borderTopColor: getBorderColor(depth),\n                  borderTop: idx === 0 ? 'none' : undefined,\n                  width: 'fit-content',\n                }}\n              >\n                <InputIcon size={16} />\n                <div style={{ marginLeft: 'var(--bui-space-2)' }}>{key}</div>\n              </Flex>\n              <Flex ml=\"2\" mb=\"2\" direction=\"column\" align=\"start\" gap=\"1\">\n                {children.map(childNode => (\n                  <Extension\n                    key={childNode.spec.id}\n                    node={childNode}\n                    depth={depth + 1}\n                  />\n                ))}\n              </Flex>\n            </Box>\n          );\n        })}\n    </Flex>\n  );\n}\n\nfunction Extension(props: { node: AppNode; depth: number }) {\n  const { node, depth } = props;\n\n  const enabled = Boolean(node.instance);\n  const dataRefs = node.instance && [...node.instance.getDataRefs()];\n\n  // Build tooltip text\n  const tooltipParts = [];\n  let currentNode = node;\n  tooltipParts.push(currentNode.spec.id);\n  while (currentNode.edges.attachedTo) {\n    const input = currentNode.edges.attachedTo.input;\n    currentNode = currentNode.edges.attachedTo.node;\n    tooltipParts.push(`${currentNode.spec.id} [${input}]`);\n  }\n  tooltipParts.reverse();\n  const tooltipText = tooltipParts.join('\\n');\n\n  return (\n    <Box\n      key={node.spec.id}\n      style={{\n        borderLeftWidth: 'var(--bui-space-1_5)',\n        borderLeftStyle: 'solid',\n        borderLeftColor: getBorderColor(depth),\n      }}\n    >\n      <Flex\n        py=\"1\"\n        px=\"2\"\n        align=\"center\"\n        style={{\n          width: 'fit-content',\n          color: enabled ? 'var(--bui-fg-primary)' : 'var(--bui-fg-disabled)',\n          background: 'var(--bui-bg-surface-1)',\n          borderTopRightRadius: 'var(--bui-radius-2)',\n          borderBottomRightRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <TooltipTrigger>\n          <Focusable>\n            <Text style={{ userSelect: 'all' }}>{node.spec.id}</Text>\n          </Focusable>\n          <Tooltip style={{ maxWidth: 'unset' }}>\n            <Text style={{ whiteSpace: 'pre-wrap' }}>{tooltipText}</Text>\n          </Tooltip>\n        </TooltipTrigger>\n        <Flex ml=\"2\" align=\"center\" gap=\"2\">\n          {dataRefs &&\n            dataRefs.length > 0 &&\n            dataRefs\n              .sort((a, b) => a.id.localeCompare(b.id))\n              .map(ref => <Output key={ref.id} dataRef={ref} node={node} />)}\n          {!enabled && <DisabledIcon size={16} />}\n        </Flex>\n      </Flex>\n      <Attachments node={node} enabled={enabled} depth={depth} />\n    </Box>\n  );\n}\n\nconst legendMap = {\n  'React Element': coreExtensionData.reactElement,\n  'Utility API': ApiBlueprint.dataRefs.factory,\n  'Route Path': coreExtensionData.routePath,\n  'Route Ref': coreExtensionData.routeRef,\n  'Nav Target': NavItemBlueprint.dataRefs.target,\n  Theme: ThemeBlueprint.dataRefs.theme,\n};\n\nfunction Legend() {\n  return (\n    <Box\n      p=\"2\"\n      style={{\n        display: 'grid',\n        maxWidth: 600,\n        grid: 'auto-flow / repeat(3, 1fr)',\n        gap: 'var(--bui-space-4)',\n      }}\n    >\n      {Object.entries(legendMap).map(([label, dataRef]) => (\n        <Flex key={dataRef.id} gap=\"2\" align=\"center\">\n          <Output dataRef={dataRef} />\n          <div>{label}</div>\n        </Flex>\n      ))}\n    </Box>\n  );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n  return (\n    <Flex direction=\"column\" style={{ height: '100%', flex: '1 1 100%' }}>\n      <Box ml=\"4\" mt=\"4\" style={{ flex: '1 1 0', overflow: 'auto' }}>\n        <Extension node={tree.root} depth={0} />\n      </Box>\n\n      <Box\n        m=\"2\"\n        style={{\n          flex: '0 0 auto',\n          background: 'var(--bui-bg-surface-1)',\n          border: '1px solid var(--bui-border)',\n          borderRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <Legend />\n      </Box>\n    </Flex>\n  );\n}\n"],"names":["getOutputColor","InputIcon","DisabledIcon"],"mappings":"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"}
+{"version":3,"file":"DetailedVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/DetailedVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AppNode,\n  AppTree,\n  ExtensionDataRef,\n  coreExtensionData,\n  ApiBlueprint,\n  NavItemBlueprint,\n  useApi,\n  routeResolutionApiRef,\n} from '@backstage/frontend-plugin-api';\nimport { Box, Flex, Link, Text, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport {\n  RiInputField as InputIcon,\n  RiCloseCircleLine as DisabledIcon,\n} from '@remixicon/react';\nimport { Focusable } from 'react-aria-components';\nimport { memo, useMemo, useState, useEffect, useRef, Fragment } from 'react';\n\nfunction getContrastColor(bgColor: string): string {\n  const hex = bgColor.replace('#', '');\n  const r = parseInt(hex.substr(0, 2), 16);\n  const g = parseInt(hex.substr(2, 2), 16);\n  const b = parseInt(hex.substr(4, 2), 16);\n  const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n  return brightness > 128 ? '#000000' : '#ffffff';\n}\n\nfunction createOutputColorGenerator(\n  colorMap: { [extDataId: string]: string },\n  availableColors: string[],\n) {\n  const map = new Map<string, { backgroundColor: string; color: string }>();\n  let i = 0;\n\n  return function getOutputColor(id: string) {\n    let backgroundColor: string;\n    if (id in colorMap) {\n      backgroundColor = colorMap[id];\n    } else {\n      const cached = map.get(id);\n      if (cached) {\n        return cached;\n      }\n      backgroundColor = availableColors[i];\n      i += 1;\n      if (i >= availableColors.length) {\n        i = 0;\n      }\n    }\n    const result = {\n      backgroundColor,\n      color: getContrastColor(backgroundColor),\n    };\n    map.set(id, result);\n    return result;\n  };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n  {\n    [coreExtensionData.reactElement.id]: '#4caf50',\n    [coreExtensionData.routePath.id]: '#ffeb3b',\n    [coreExtensionData.routeRef.id]: '#9c27b0',\n    [ApiBlueprint.dataRefs.factory.id]: '#2196f3',\n    [NavItemBlueprint.dataRefs.target.id]: '#ff9800',\n  },\n\n  ['#90caf9', '#ffcc80', '#a5d6a7', '#ef9a9a', '#fff59d', '#ce93d8', '#e6ee9c'],\n);\n\n// Helper function to get border color based on depth\nfunction getBorderColor(depth: number): string {\n  const greyLevels = [8, 7, 6, 5]; // darker levels that contrast well with background\n  const index = depth % greyLevels.length;\n  const level = greyLevels[index];\n  return `var(--bui-gray-${level})`;\n}\n\nfunction getFullPath(node?: AppNode): string {\n  if (!node) {\n    return '';\n  }\n  const parent = node.edges.attachedTo?.node;\n  const part = node.instance?.getData(coreExtensionData.routePath);\n  if (!part) {\n    return getFullPath(parent);\n  }\n  return getFullPath(parent) + part;\n}\n\nfunction ProgressiveCollection({\n  items,\n  batchSize = 10,\n}: {\n  items: Array<() => React.ReactElement>;\n  batchSize?: number;\n}) {\n  const [maxIndex, setMaxIndex] = useState(0);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (maxIndex >= items.length) {\n      return undefined;\n    }\n\n    const processBatch = () => {\n      const nextIndex = Math.min(maxIndex + batchSize, items.length);\n      setMaxIndex(nextIndex);\n\n      if (nextIndex < items.length) {\n        timeoutRef.current = setTimeout(processBatch, 0);\n      }\n    };\n\n    timeoutRef.current = setTimeout(processBatch, 0);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      if (timeoutRef.current !== null) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n    };\n  }, [maxIndex, items.length, batchSize]);\n\n  return (\n    <>\n      {items.slice(0, maxIndex).map((item, index) => (\n        <Fragment key={index}>{item()}</Fragment>\n      ))}\n    </>\n  );\n}\n\nconst Output = memo(\n  function Output(props: {\n    dataRef: ExtensionDataRef<unknown>;\n    node?: AppNode;\n  }) {\n    const { dataRef, node } = props;\n    const { id } = dataRef;\n    const instance = node?.instance;\n\n    const routeResolutionApi = useApi(routeResolutionApiRef);\n\n    const { backgroundColor, color } = getOutputColor(id);\n\n    const chipStyle: React.CSSProperties = {\n      height: 20,\n      padding: '0 10px',\n      borderRadius: '10px',\n      color,\n      backgroundColor,\n      display: 'flex',\n      alignItems: 'center',\n      fontWeight:\n        'var(--bui-font-weight-regular)' as React.CSSProperties['fontWeight'],\n    };\n\n    if (id === coreExtensionData.routeRef.id && node) {\n      try {\n        const routeRef = props.node?.instance?.getData(\n          coreExtensionData.routeRef,\n        );\n        const link = routeRef && routeResolutionApi.resolve(routeRef)?.();\n        if (link) {\n          return (\n            <TooltipTrigger>\n              <Link href={link} style={chipStyle}>\n                link\n              </Link>\n              <Tooltip>{id}</Tooltip>\n            </TooltipTrigger>\n          );\n        }\n      } catch {\n        /* ignore */\n      }\n    }\n\n    let tooltip = id;\n    let text: string | undefined = undefined;\n    if (id === coreExtensionData.routePath.id) {\n      text = String(instance?.getData(dataRef) ?? '');\n      tooltip = getFullPath(node);\n    }\n\n    return (\n      <TooltipTrigger>\n        <Focusable>\n          <Text style={{ ...chipStyle, cursor: 'help' }}>{text}</Text>\n        </Focusable>\n        <Tooltip style={{ maxWidth: 'unset' }}>{tooltip}</Tooltip>\n      </TooltipTrigger>\n    );\n  },\n  (prevProps, nextProps) => {\n    return (\n      prevProps.dataRef.id === nextProps.dataRef.id &&\n      prevProps.node?.spec.id === nextProps.node?.spec.id\n    );\n  },\n);\n\nfunction Extension({ node, depth }: { node: AppNode; depth: number }) {\n  const enabled = Boolean(node.instance);\n\n  const tooltipText = useMemo(() => {\n    const tooltipParts = [];\n    let currentNode = node;\n    tooltipParts.push(currentNode.spec.id);\n    while (currentNode.edges.attachedTo) {\n      const input = currentNode.edges.attachedTo.input;\n      currentNode = currentNode.edges.attachedTo.node;\n      tooltipParts.push(`${currentNode.spec.id} [${input}]`);\n    }\n    tooltipParts.reverse();\n    return tooltipParts.join('\\n');\n  }, [node]);\n\n  const sortedDataRefs = useMemo(() => {\n    if (!node.instance) {\n      return [];\n    }\n    const dataRefs = [...node.instance.getDataRefs()];\n    return dataRefs.sort((a, b) => a.id.localeCompare(b.id));\n  }, [node.instance]);\n\n  const sortedAttachments = useMemo(() => {\n    return [...node.edges.attachments.entries()].sort(([a], [b]) =>\n      a.localeCompare(b),\n    );\n  }, [node.edges.attachments]);\n\n  return (\n    <Box\n      key={node.spec.id}\n      style={{\n        borderLeftWidth: 'var(--bui-space-1_5)',\n        borderLeftStyle: 'solid',\n        borderLeftColor: getBorderColor(depth),\n      }}\n    >\n      <Flex\n        py=\"1\"\n        px=\"2\"\n        align=\"center\"\n        style={{\n          width: 'fit-content',\n          color: enabled ? 'var(--bui-fg-primary)' : 'var(--bui-fg-disabled)',\n          background: 'var(--bui-bg-surface-1)',\n          borderTopRightRadius: 'var(--bui-radius-2)',\n          borderBottomRightRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <TooltipTrigger>\n          <Focusable>\n            <Text style={{ userSelect: 'all' }}>{node.spec.id}</Text>\n          </Focusable>\n          <Tooltip style={{ maxWidth: 'unset' }}>\n            <Text style={{ whiteSpace: 'pre-wrap' }}>{tooltipText}</Text>\n          </Tooltip>\n        </TooltipTrigger>\n        <Flex ml=\"2\" align=\"center\" gap=\"2\">\n          {sortedDataRefs.length > 0 &&\n            sortedDataRefs.map(ref => (\n              <Output key={ref.id} dataRef={ref} node={node} />\n            ))}\n          {!enabled && <DisabledIcon size={16} />}\n        </Flex>\n      </Flex>\n      {sortedAttachments.length > 0 && (\n        <Flex direction=\"column\" gap=\"4\">\n          {sortedAttachments.map(([key, children], idx) => (\n            <Box key={key}>\n              <Flex\n                p=\"2\"\n                align=\"center\"\n                style={{\n                  borderTopWidth: 'var(--bui-space-1_5)',\n                  borderTopStyle: 'solid',\n                  borderTopColor: getBorderColor(depth),\n                  borderTop: idx === 0 ? 'none' : undefined,\n                  width: 'fit-content',\n                }}\n              >\n                <InputIcon size={16} />\n                <div style={{ marginLeft: 'var(--bui-space-2)' }}>{key}</div>\n              </Flex>\n              <Flex ml=\"2\" mb=\"2\" direction=\"column\" align=\"start\" gap=\"1\">\n                <ProgressiveCollection\n                  items={children.map(childNode => () => (\n                    <Extension\n                      key={childNode.spec.id}\n                      node={childNode}\n                      depth={depth + 1}\n                    />\n                  ))}\n                />\n              </Flex>\n            </Box>\n          ))}\n        </Flex>\n      )}\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};\n\nfunction Legend() {\n  return (\n    <Box\n      p=\"2\"\n      style={{\n        display: 'grid',\n        maxWidth: 600,\n        grid: 'auto-flow / repeat(3, 1fr)',\n        gap: 'var(--bui-space-4)',\n      }}\n    >\n      {Object.entries(legendMap).map(([label, dataRef]) => (\n        <Flex key={dataRef.id} gap=\"2\" align=\"center\">\n          <Output dataRef={dataRef} />\n          <div>{label}</div>\n        </Flex>\n      ))}\n    </Box>\n  );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n  return (\n    <Flex direction=\"column\" style={{ height: '100%', flex: '1 1 100%' }}>\n      <Box ml=\"4\" mt=\"4\" style={{ flex: '1 1 0', overflow: 'auto' }}>\n        <Extension node={tree.root} depth={0} />\n      </Box>\n\n      <Box\n        m=\"2\"\n        style={{\n          flex: '0 0 auto',\n          background: 'var(--bui-bg-surface-1)',\n          border: '1px solid var(--bui-border)',\n          borderRadius: 'var(--bui-radius-2)',\n        }}\n      >\n        <Legend />\n      </Box>\n    </Flex>\n  );\n}\n"],"names":["getOutputColor","Fragment","Output","DisabledIcon","InputIcon"],"mappings":"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"}

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-app-visualizer";
-var version = "0.1.27";
+var version = "0.1.28-next.0";
 var description = "Visualizes the Backstage app structure";
 var backstage = {
 	role: "frontend-plugin",
@@ -38,7 +38,7 @@ var dependencies = {
 	"@backstage/frontend-plugin-api": "workspace:^",
 	"@backstage/ui": "workspace:^",
 	"@remixicon/react": "^4.6.0",
-	"react-aria-components": "^1.13.0"
+	"react-aria-components": "^1.14.0"
 };
 var devDependencies = {
 	"@backstage/cli": "workspace:^",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-app-visualizer",
-  "version": "0.1.27",
+  "version": "0.1.28-next.0",
   "description": "Visualizes the Backstage app structure",
   "backstage": {
     "role": "frontend-plugin",
@@ -37,16 +37,16 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.18.5",
-    "@backstage/core-plugin-api": "^1.12.1",
-    "@backstage/frontend-plugin-api": "^0.13.3",
-    "@backstage/ui": "^0.11.0",
+    "@backstage/core-components": "0.18.6-next.0",
+    "@backstage/core-plugin-api": "1.12.2-next.0",
+    "@backstage/frontend-plugin-api": "0.14.0-next.0",
+    "@backstage/ui": "0.12.0-next.0",
     "@remixicon/react": "^4.6.0",
-    "react-aria-components": "^1.13.0"
+    "react-aria-components": "^1.14.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.35.2",
-    "@backstage/frontend-defaults": "^0.3.5",
+    "@backstage/cli": "0.35.3-next.0",
+    "@backstage/frontend-defaults": "0.3.6-next.0",
     "@types/react": "^18.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",