@backstage/plugin-catalog-graph 0.2.0 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @backstage/plugin-catalog-graph
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@0.4.0
+  - @backstage/plugin-catalog-react@0.6.8
+  - @backstage/core-components@0.8.2
+  - @backstage/catalog-client@0.5.3
+
+## 0.2.3
+
+### Patch Changes
+
+- cd450844f6: Moved React dependencies to `peerDependencies` and allow both React v16 and v17 to be used.
+- Updated dependencies
+  - @backstage/core-components@0.8.0
+  - @backstage/core-plugin-api@0.3.0
+  - @backstage/plugin-catalog-react@0.6.5
+
+## 0.2.2
+
+### Patch Changes
+
+- a125278b81: Refactor out the deprecated path and icon from RouteRefs
+- Updated dependencies
+  - @backstage/catalog-client@0.5.2
+  - @backstage/catalog-model@0.9.7
+  - @backstage/plugin-catalog-react@0.6.4
+  - @backstage/core-components@0.7.4
+  - @backstage/core-plugin-api@0.2.0
+
+## 0.2.1
+
+### Patch Changes
+
+- ce0aef1841: Capture analytics events for clicks in the graph.
+- Updated dependencies
+  - @backstage/core-components@0.7.1
+  - @backstage/core-plugin-api@0.1.11
+  - @backstage/plugin-catalog-react@0.6.1
+  - @backstage/catalog-model@0.9.5
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/esm/{index-330c5db8.esm.js → index-68fb0e4e.esm.js}

@@ -20,7 +20,7 @@ const useStyles$2 = makeStyles((theme) => ({
   }
 }));
 function CustomLabel({
-  edge: {relations}
+  edge: { relations }
 }) {
   const classes = useStyles$2();
   return /* @__PURE__ */ React.createElement("text", {
@@ -91,7 +91,7 @@ function CustomNode({
   const idRef = useRef(null);
   useLayoutEffect(() => {
     if (idRef.current) {
-      let {height: renderedHeight, width: renderedWidth} = idRef.current.getBBox();
+      let { height: renderedHeight, width: renderedWidth } = idRef.current.getBBox();
       renderedHeight = Math.round(renderedHeight);
       renderedWidth = Math.round(renderedWidth);
       if (renderedHeight !== height || renderedWidth !== width) {
@@ -105,7 +105,7 @@ function CustomNode({
   const paddedIconWidth = kind ? iconSize + padding : 0;
   const paddedWidth = paddedIconWidth + width + padding * 2;
   const paddedHeight = height + padding * 2;
-  const displayTitle = title != null ? title : kind && name && namespace ? formatEntityRefTitle({kind, name, namespace}) : id;
+  const displayTitle = title != null ? title : kind && name && namespace ? formatEntityRefTitle({ kind, name, namespace }) : id;
   return /* @__PURE__ */ React.createElement("g", {
     onClick,
     className: classNames(onClick && classes.clickable)
@@ -141,25 +141,25 @@ const ALL_RELATION_PAIRS = [
   [RELATION_DEPENDS_ON, RELATION_DEPENDENCY_OF]
 ];
 
-var Direction;
-(function(Direction2) {
+var Direction = /* @__PURE__ */ ((Direction2) => {
   Direction2["TOP_BOTTOM"] = "TB";
   Direction2["BOTTOM_TOP"] = "BT";
   Direction2["LEFT_RIGHT"] = "LR";
   Direction2["RIGHT_LEFT"] = "RL";
-})(Direction || (Direction = {}));
+  return Direction2;
+})(Direction || {});
 
 const limiter = limiterFactory(10);
 function useEntityStore() {
   const catalogClient = useApi(catalogApiRef);
   const state = useRef({
-    requestedEntities: new Set(),
-    outstandingEntities: new Map(),
-    cachedEntities: new Map()
+    requestedEntities: /* @__PURE__ */ new Set(),
+    outstandingEntities: /* @__PURE__ */ new Map(),
+    cachedEntities: /* @__PURE__ */ new Map()
   });
   const [entities, setEntities] = useState({});
   const updateEntities = useCallback(() => {
-    const {cachedEntities, requestedEntities} = state.current;
+    const { cachedEntities, requestedEntities } = state.current;
     const filteredEntities = {};
     requestedEntities.forEach((entityRef) => {
       const entity = cachedEntities.get(entityRef);
@@ -170,7 +170,7 @@ function useEntityStore() {
     setEntities(filteredEntities);
   }, [state, setEntities]);
   const [asyncState, fetch] = useAsyncFn(async () => {
-    const {requestedEntities, outstandingEntities, cachedEntities} = state.current;
+    const { requestedEntities, outstandingEntities, cachedEntities } = state.current;
     await Promise.all(Array.from(requestedEntities).map((entityRef) => limiter(async () => {
       if (cachedEntities.has(entityRef)) {
         return;
@@ -192,10 +192,10 @@ function useEntityStore() {
       }
     })));
   }, [state, updateEntities]);
-  const {loading, error} = asyncState;
+  const { loading, error } = asyncState;
   const requestEntities = useCallback((entityRefs) => {
     const n = new Set(entityRefs);
-    const {requestedEntities} = state.current;
+    const { requestedEntities } = state.current;
     if (n.size !== requestedEntities.size || Array.from(n).some((e) => !requestedEntities.has(e))) {
       state.current.requestedEntities = n;
       fetch();
@@ -212,12 +212,12 @@ function useEntityStore() {
 
 function useEntityRelationGraph({
   rootEntityRefs,
-  filter: {maxDepth = Number.POSITIVE_INFINITY, relations, kinds} = {}
+  filter: { maxDepth = Number.POSITIVE_INFINITY, relations, kinds } = {}
 }) {
-  const {entities, loading, error, requestEntities} = useEntityStore();
+  const { entities, loading, error, requestEntities } = useEntityStore();
   useEffect(() => {
-    const expectedEntities = new Set([...rootEntityRefs]);
-    const processedEntityRefs = new Set();
+    const expectedEntities = /* @__PURE__ */ new Set([...rootEntityRefs]);
+    const processedEntityRefs = /* @__PURE__ */ new Set();
     let nextDepthRefQueue = [...rootEntityRefs];
     let depth = 0;
     while (nextDepthRefQueue.length > 0 && (!isFinite(maxDepth) || depth < maxDepth)) {
@@ -261,7 +261,7 @@ function useEntityRelationNodesAndEdges({
   relationPairs = ALL_RELATION_PAIRS
 }) {
   const [nodesAndEdges, setNodesAndEdges] = useState({});
-  const {entities, loading, error} = useEntityRelationGraph({
+  const { entities, loading, error } = useEntityRelationGraph({
     rootEntityRefs,
     filter: {
       maxDepth,
@@ -293,7 +293,7 @@ function useEntityRelationNodesAndEdges({
       return node;
     });
     const edges = [];
-    const visitedNodes = new Set();
+    const visitedNodes = /* @__PURE__ */ new Set();
     const nodeQueue = [...rootEntityRefs];
     while (nodeQueue.length > 0) {
       const entityRef = nodeQueue.pop();
@@ -338,7 +338,7 @@ function useEntityRelationNodesAndEdges({
         });
       }
     }
-    setNodesAndEdges({nodes, edges});
+    setNodesAndEdges({ nodes, edges });
   }, 100, [
     entities,
     rootEntityRefs,
@@ -401,7 +401,7 @@ const EntityRelationsGraph = ({
   const classes = useStyles();
   const rootEntityRefs = useMemo(() => (Array.isArray(rootEntityNames) ? rootEntityNames : [rootEntityNames]).map((e) => stringifyEntityRef(e)), [rootEntityNames]);
   const errorApi = useApi(errorApiRef);
-  const {loading, error, nodes, edges} = useEntityRelationNodesAndEdges({
+  const { loading, error, nodes, edges } = useEntityRelationNodesAndEdges({
     rootEntityRefs,
     maxDepth,
     unidirectional,
@@ -436,8 +436,7 @@ const EntityRelationsGraph = ({
 };
 
 const catalogGraphRouteRef = createRouteRef({
-  path: "/catalog-graph",
-  title: "Catalog Graph"
+  id: "catalog-graph"
 });
 const catalogEntityRouteRef = createExternalRouteRef({
   id: "catalog-entity",
@@ -457,14 +456,14 @@ const catalogGraphPlugin = createPlugin({
 const EntityCatalogGraphCard = catalogGraphPlugin.provide(createComponentExtension({
   name: "EntityCatalogGraphCard",
   component: {
-    lazy: () => import('./index-83ed5e32.esm.js').then((m) => m.CatalogGraphCard)
+    lazy: () => import('./index-750fc596.esm.js').then((m) => m.CatalogGraphCard)
   }
 }));
 const CatalogGraphPage = catalogGraphPlugin.provide(createRoutableExtension({
   name: "CatalogGraphPage",
-  component: () => import('./index-d337a594.esm.js').then((m) => m.CatalogGraphPage),
+  component: () => import('./index-6e3d9654.esm.js').then((m) => m.CatalogGraphPage),
   mountPoint: catalogGraphRouteRef
 }));
 
 export { ALL_RELATION_PAIRS as A, CatalogGraphPage as C, Direction as D, EntityRelationsGraph as E, catalogGraphRouteRef as a, EntityCatalogGraphCard as b, catalogEntityRouteRef as c, catalogGraphPlugin as d };
-//# sourceMappingURL=index-330c5db8.esm.js.map
+//# sourceMappingURL=index-68fb0e4e.esm.js.map

package/dist/esm/{index-330c5db8.esm.js.map → index-68fb0e4e.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-330c5db8.esm.js","sources":["../../src/components/EntityRelationsGraph/CustomLabel.tsx","../../src/components/EntityRelationsGraph/EntityKindIcon.tsx","../../src/components/EntityRelationsGraph/CustomNode.tsx","../../src/components/EntityRelationsGraph/relations.ts","../../src/components/EntityRelationsGraph/types.ts","../../src/components/EntityRelationsGraph/useEntityStore.ts","../../src/components/EntityRelationsGraph/useEntityRelationGraph.ts","../../src/components/EntityRelationsGraph/useEntityRelationNodesAndEdges.ts","../../src/components/EntityRelationsGraph/EntityRelationsGraph.tsx","../../src/routes.ts","../../src/plugin.ts","../../src/extensions.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport { DependencyGraphTypes } from '@backstage/core-components';\nimport { BackstageTheme } from '@backstage/theme';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\nimport React from 'react';\nimport { EntityEdgeData } from './types';\nimport classNames from 'classnames';\n\nconst useStyles = makeStyles((theme: BackstageTheme) => ({\n  text: {\n    fill: theme.palette.textContrast,\n  },\n  secondary: {\n    fill: theme.palette.textSubtle,\n  },\n}));\n\nexport function CustomLabel({\n  edge: { relations },\n}: DependencyGraphTypes.RenderLabelProps<EntityEdgeData>) {\n  const classes = useStyles();\n  return (\n    <text className={classes.text} textAnchor=\"middle\">\n      {relations.map((r, i) => (\n        <tspan key={r} className={classNames(i > 0 && classes.secondary)}>\n          {i > 0 && <tspan> / </tspan>}\n          {r}\n        </tspan>\n      ))}\n    </text>\n  );\n}\n","/*\n * Copyright 2021 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 */\nimport { useApp } from '@backstage/core-plugin-api';\nimport WorkIcon from '@material-ui/icons/Work';\nimport React from 'react';\n\nexport function EntityKindIcon({\n  kind,\n  ...props\n}: {\n  kind: string;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  className?: string;\n}) {\n  const app = useApp();\n  const Icon =\n    app.getSystemIcon(`kind:${kind.toLocaleLowerCase('en-US')}`) ?? WorkIcon;\n  return <Icon {...props} />;\n}\n","/*\n * Copyright 2021 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 */\nimport { DependencyGraphTypes } from '@backstage/core-components';\nimport { formatEntityRefTitle } from '@backstage/plugin-catalog-react';\nimport { BackstageTheme } from '@backstage/theme';\nimport { makeStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { EntityKindIcon } from './EntityKindIcon';\nimport { EntityNodeData } from './types';\n\nconst useStyles = makeStyles((theme: BackstageTheme) => ({\n  node: {\n    fill: theme.palette.grey[300],\n    stroke: theme.palette.grey[300],\n\n    '&.primary': {\n      fill: theme.palette.primary.light,\n      stroke: theme.palette.primary.light,\n    },\n    '&.secondary': {\n      fill: theme.palette.secondary.light,\n      stroke: theme.palette.secondary.light,\n    },\n  },\n  text: {\n    fill: theme.palette.getContrastText(theme.palette.grey[300]),\n\n    '&.primary': {\n      fill: theme.palette.primary.contrastText,\n    },\n    '&.secondary': {\n      fill: theme.palette.secondary.contrastText,\n    },\n    '&.focused': {\n      fontWeight: 'bold',\n    },\n  },\n  clickable: {\n    cursor: 'pointer',\n  },\n}));\n\nexport function CustomNode({\n  node: {\n    id,\n    kind,\n    namespace,\n    name,\n    color = 'default',\n    focused,\n    title,\n    onClick,\n  },\n}: DependencyGraphTypes.RenderNodeProps<EntityNodeData>) {\n  const classes = useStyles();\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 iconSize = height;\n  const paddedIconWidth = kind ? iconSize + padding : 0;\n  const paddedWidth = paddedIconWidth + width + padding * 2;\n  const paddedHeight = height + padding * 2;\n\n  const displayTitle =\n    title ??\n    (kind && name && namespace\n      ? formatEntityRefTitle({ kind, name, namespace })\n      : id);\n\n  return (\n    <g onClick={onClick} className={classNames(onClick && classes.clickable)}>\n      <rect\n        className={classNames(\n          classes.node,\n          color === 'primary' && 'primary',\n          color === 'secondary' && 'secondary',\n        )}\n        width={paddedWidth}\n        height={paddedHeight}\n        rx={10}\n      />\n      {kind && (\n        <EntityKindIcon\n          kind={kind}\n          y={padding}\n          x={padding}\n          width={iconSize}\n          height={iconSize}\n          className={classNames(\n            classes.text,\n            focused && 'focused',\n            color === 'primary' && 'primary',\n            color === 'secondary' && 'secondary',\n          )}\n        />\n      )}\n      <text\n        ref={idRef}\n        className={classNames(\n          classes.text,\n          focused && 'focused',\n          color === 'primary' && 'primary',\n          color === 'secondary' && 'secondary',\n        )}\n        y={paddedHeight / 2}\n        x={paddedIconWidth + (width + padding * 2) / 2}\n        textAnchor=\"middle\"\n        alignmentBaseline=\"middle\"\n      >\n        {displayTitle}\n      </text>\n    </g>\n  );\n}\n","/*\n * Copyright 2021 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 */\nimport {\n  RELATION_API_CONSUMED_BY,\n  RELATION_API_PROVIDED_BY,\n  RELATION_CHILD_OF,\n  RELATION_CONSUMES_API,\n  RELATION_DEPENDENCY_OF,\n  RELATION_DEPENDS_ON,\n  RELATION_HAS_MEMBER,\n  RELATION_HAS_PART,\n  RELATION_MEMBER_OF,\n  RELATION_OWNED_BY,\n  RELATION_OWNER_OF,\n  RELATION_PARENT_OF,\n  RELATION_PART_OF,\n  RELATION_PROVIDES_API,\n} from '@backstage/catalog-model';\n\n/**\n * A pair of two relations that describe the opposite of each other. The first\n * relation is considered as the primary relation.\n *\n * @public\n */\nexport type RelationPairs = [string, string][];\n\n// TODO: This file only contains the pairs for the build-in relations.\n//  How to implement this when custom relations are used? Right now you can pass\n//  the relations everywhere.\n//  Another option is to move this into @backstage/catalog-model\n\n/**\n * A list of pairs of entity relations, used to define which relations are\n * merged together and which the primary relation is.\n *\n * @public\n */\nexport const ALL_RELATION_PAIRS: RelationPairs = [\n  [RELATION_OWNER_OF, RELATION_OWNED_BY],\n  [RELATION_CONSUMES_API, RELATION_API_CONSUMED_BY],\n  [RELATION_API_PROVIDED_BY, RELATION_PROVIDES_API],\n  [RELATION_HAS_PART, RELATION_PART_OF],\n  [RELATION_PARENT_OF, RELATION_CHILD_OF],\n  [RELATION_HAS_MEMBER, RELATION_MEMBER_OF],\n  [RELATION_DEPENDS_ON, RELATION_DEPENDENCY_OF],\n];\n","/*\n * Copyright 2021 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 */\nimport { DependencyGraphTypes } from '@backstage/core-components';\nimport { MouseEventHandler } from 'react';\n\n/**\n * Additional Data for entities\n */\nexport type EntityEdgeData = {\n  /**\n   * Up to two relations that are connecting an entity.\n   */\n  relations: string[];\n  /**\n   * Whether the entity is visible or not.\n   */\n  // Not used, but has to be non empty to draw a label at all!\n  label: 'visible';\n};\n\n/**\n * Edge between two entities.\n *\n * @public\n */\nexport type EntityEdge = DependencyGraphTypes.DependencyEdge<EntityEdgeData>;\n\n/**\n * Additional data for Entity Node\n */\nexport type EntityNodeData = {\n  /**\n   * Name of the entity.\n   */\n  name: string;\n  /**\n   * Optional kind of the entity.\n   */\n  kind?: string;\n  /**\n   * Optional title of the entity.\n   */\n  title?: string;\n  /**\n   * Namespace of the entity.\n   */\n  namespace: string;\n  /**\n   * Whether the entity is focused, optional, defaults to false. Focused\n   * entities are highlighted in the graph.\n   */\n  focused?: boolean;\n  /**\n   * Optional color of the entity, defaults to 'default'.\n   */\n  color?: 'primary' | 'secondary' | 'default';\n  /**\n   * Optional click handler.\n   */\n  onClick?: MouseEventHandler<unknown>;\n};\n\n/**\n * Node representing an entity.\n *\n * @public\n */\nexport type EntityNode = DependencyGraphTypes.DependencyNode<EntityNodeData>;\n\n/**\n * Render direction of the graph.\n *\n * @public\n */\nexport enum Direction {\n  /**\n   * Top to bottom.\n   */\n  TOP_BOTTOM = 'TB',\n  /**\n   * Bottom to top.\n   */\n  BOTTOM_TOP = 'BT',\n  /**\n   * Left to right.\n   */\n  LEFT_RIGHT = 'LR',\n  /**\n   * Right to left.\n   */\n  RIGHT_LEFT = 'RL',\n}\n","/*\n * Copyright 2021 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 */\nimport { Entity, parseEntityRef } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport limiterFactory from 'p-limit';\nimport { Dispatch, useCallback, useRef, useState } from 'react';\nimport { useAsyncFn } from 'react-use';\n\n// TODO: This is a good use case for a graphql API, once it is available in the\n// future.\n\nconst limiter = limiterFactory(10);\n\n/**\n * Ensures that a set of requested entities is loaded.\n */\nexport function useEntityStore(): {\n  entities: { [ref: string]: Entity };\n  loading: boolean;\n  error?: Error;\n  requestEntities: Dispatch<string[]>;\n} {\n  const catalogClient = useApi(catalogApiRef);\n  const state = useRef({\n    requestedEntities: new Set<string>(),\n    outstandingEntities: new Map<string, Promise<Entity | undefined>>(),\n    cachedEntities: new Map<string, Entity>(),\n  });\n  const [entities, setEntities] = useState<{\n    [ref: string]: Entity;\n  }>({});\n\n  const updateEntities = useCallback(() => {\n    const { cachedEntities, requestedEntities } = state.current;\n    const filteredEntities: { [ref: string]: Entity } = {};\n    requestedEntities.forEach(entityRef => {\n      const entity = cachedEntities.get(entityRef);\n\n      if (entity) {\n        filteredEntities[entityRef] = entity;\n      }\n    });\n    setEntities(filteredEntities);\n  }, [state, setEntities]);\n\n  const [asyncState, fetch] = useAsyncFn(async () => {\n    const { requestedEntities, outstandingEntities, cachedEntities } =\n      state.current;\n\n    await Promise.all(\n      Array.from(requestedEntities).map(entityRef =>\n        limiter(async () => {\n          if (cachedEntities.has(entityRef)) {\n            return;\n          }\n\n          if (outstandingEntities.has(entityRef)) {\n            await outstandingEntities.get(entityRef);\n            return;\n          }\n\n          const promise = catalogClient.getEntityByName(\n            parseEntityRef(entityRef),\n          );\n\n          outstandingEntities.set(entityRef, promise);\n\n          try {\n            const entity = await promise;\n\n            if (entity) {\n              cachedEntities.set(entityRef, entity);\n              updateEntities();\n            }\n          } finally {\n            outstandingEntities.delete(entityRef);\n          }\n        }),\n      ),\n    );\n  }, [state, updateEntities]);\n  const { loading, error } = asyncState;\n\n  const requestEntities = useCallback(\n    (entityRefs: string[]) => {\n      const n = new Set(entityRefs);\n      const { requestedEntities } = state.current;\n\n      if (\n        n.size !== requestedEntities.size ||\n        Array.from(n).some(e => !requestedEntities.has(e))\n      ) {\n        state.current.requestedEntities = n;\n        fetch();\n        updateEntities();\n      }\n    },\n    [state, fetch, updateEntities],\n  );\n\n  return {\n    entities,\n    loading,\n    error,\n    requestEntities,\n  };\n}\n","/*\n * Copyright 2021 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 */\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { useEffect } from 'react';\nimport { useEntityStore } from './useEntityStore';\n\n/**\n * Discover the graph of entities connected by relations, starting from a set of\n * root entities. Filters are used to select which relations to includes.\n * Returns all discovered entities once they are loaded.\n */\nexport function useEntityRelationGraph({\n  rootEntityRefs,\n  filter: { maxDepth = Number.POSITIVE_INFINITY, relations, kinds } = {},\n}: {\n  rootEntityRefs: string[];\n  filter?: {\n    maxDepth?: number;\n    relations?: string[];\n    kinds?: string[];\n  };\n}): {\n  entities?: { [ref: string]: Entity };\n  loading: boolean;\n  error?: Error;\n} {\n  const { entities, loading, error, requestEntities } = useEntityStore();\n\n  useEffect(() => {\n    const expectedEntities = new Set([...rootEntityRefs]);\n    const processedEntityRefs = new Set<string>();\n\n    let nextDepthRefQueue = [...rootEntityRefs];\n    let depth = 0;\n\n    while (\n      nextDepthRefQueue.length > 0 &&\n      (!isFinite(maxDepth) || depth < maxDepth)\n    ) {\n      const entityRefQueue = nextDepthRefQueue;\n      nextDepthRefQueue = [];\n\n      while (entityRefQueue.length > 0) {\n        const entityRef = entityRefQueue.shift()!;\n        const entity = entities[entityRef];\n\n        processedEntityRefs.add(entityRef);\n\n        if (entity && entity.relations) {\n          for (const rel of entity.relations) {\n            if (\n              (!relations || relations.includes(rel.type)) &&\n              (!kinds ||\n                kinds.includes(rel.target.kind.toLocaleLowerCase('en-US')))\n            ) {\n              const relationEntityRef = stringifyEntityRef(rel.target);\n\n              if (!processedEntityRefs.has(relationEntityRef)) {\n                nextDepthRefQueue.push(relationEntityRef);\n                expectedEntities.add(relationEntityRef);\n              }\n            }\n          }\n        }\n      }\n\n      ++depth;\n    }\n\n    requestEntities([...expectedEntities]);\n  }, [entities, rootEntityRefs, maxDepth, relations, kinds, requestEntities]);\n\n  return {\n    entities,\n    loading,\n    error,\n  };\n}\n","/*\n * Copyright 2021 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 */\nimport {\n  ENTITY_DEFAULT_NAMESPACE,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { MouseEvent, useState } from 'react';\nimport { useDebounce } from 'react-use';\nimport { RelationPairs, ALL_RELATION_PAIRS } from './relations';\nimport { EntityEdge, EntityNode } from './types';\nimport { useEntityRelationGraph } from './useEntityRelationGraph';\n\n/**\n * Generate nodes and edges to render the entity graph.\n */\nexport function useEntityRelationNodesAndEdges({\n  rootEntityRefs,\n  maxDepth = Number.POSITIVE_INFINITY,\n  unidirectional = true,\n  mergeRelations = true,\n  kinds,\n  relations,\n  onNodeClick,\n  relationPairs = ALL_RELATION_PAIRS,\n}: {\n  rootEntityRefs: string[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n}): {\n  loading: boolean;\n  nodes?: EntityNode[];\n  edges?: EntityEdge[];\n  error?: Error;\n} {\n  const [nodesAndEdges, setNodesAndEdges] = useState<{\n    nodes?: EntityNode[];\n    edges?: EntityEdge[];\n  }>({});\n  const { entities, loading, error } = useEntityRelationGraph({\n    rootEntityRefs,\n    filter: {\n      maxDepth,\n      kinds,\n      relations,\n    },\n  });\n\n  useDebounce(\n    () => {\n      if (!entities || Object.keys(entities).length === 0) {\n        setNodesAndEdges({});\n        return;\n      }\n\n      const nodes = Object.entries(entities).map(([entityRef, entity]) => {\n        const focused = rootEntityRefs.includes(entityRef);\n        const node: EntityNode = {\n          id: entityRef,\n          title: entity.metadata?.title ?? undefined,\n          kind: entity.kind,\n          name: entity.metadata.name,\n          namespace: entity.metadata.namespace ?? ENTITY_DEFAULT_NAMESPACE,\n          focused,\n          color: focused ? 'secondary' : 'primary',\n        };\n\n        if (onNodeClick) {\n          node.onClick = event => onNodeClick(node, event);\n        }\n\n        return node;\n      });\n\n      const edges: EntityEdge[] = [];\n      const visitedNodes = new Set<string>();\n      const nodeQueue = [...rootEntityRefs];\n\n      while (nodeQueue.length > 0) {\n        const entityRef = nodeQueue.pop()!;\n        const entity = entities[entityRef];\n        visitedNodes.add(entityRef);\n\n        if (entity) {\n          entity?.relations?.forEach(rel => {\n            const targetRef = stringifyEntityRef(rel.target);\n\n            // Check if the related entity should be displayed, if not, ignore\n            // the relation too\n            if (!entities[targetRef]) {\n              return;\n            }\n\n            if (relations && !relations.includes(rel.type)) {\n              return;\n            }\n\n            if (\n              kinds &&\n              !kinds.includes(rel.target.kind.toLocaleLowerCase('en-US'))\n            ) {\n              return;\n            }\n\n            if (!unidirectional || !visitedNodes.has(targetRef)) {\n              if (mergeRelations) {\n                const pair = relationPairs.find(\n                  ([l, r]) => l === rel.type || r === rel.type,\n                ) ?? [rel.type];\n                const [left] = pair;\n\n                edges.push({\n                  from: left === rel.type ? entityRef : targetRef,\n                  to: left === rel.type ? targetRef : entityRef,\n                  relations: pair,\n                  label: 'visible',\n                });\n              } else {\n                edges.push({\n                  from: entityRef,\n                  to: targetRef,\n                  relations: [rel.type],\n                  label: 'visible',\n                });\n              }\n            }\n\n            if (!visitedNodes.has(targetRef)) {\n              nodeQueue.push(targetRef);\n              visitedNodes.add(targetRef);\n            }\n          });\n        }\n      }\n\n      setNodesAndEdges({ nodes, edges });\n    },\n    100,\n    [\n      entities,\n      rootEntityRefs,\n      kinds,\n      relations,\n      unidirectional,\n      mergeRelations,\n      onNodeClick,\n      relationPairs,\n    ],\n  );\n\n  return {\n    loading,\n    error,\n    ...nodesAndEdges,\n  };\n}\n","/*\n * Copyright 2021 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 */\nimport { EntityName, stringifyEntityRef } from '@backstage/catalog-model';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport { CircularProgress, makeStyles, useTheme } from '@material-ui/core';\nimport classNames from 'classnames';\nimport React, { MouseEvent, useEffect, useMemo } from 'react';\nimport { CustomLabel } from './CustomLabel';\nimport { CustomNode } from './CustomNode';\nimport { ALL_RELATION_PAIRS, RelationPairs } from './relations';\nimport { Direction, EntityNode } from './types';\nimport { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';\n\nconst useStyles = makeStyles(theme => ({\n  progress: {\n    position: 'absolute',\n    left: '50%',\n    top: '50%',\n    marginLeft: '-20px',\n    marginTop: '-20px',\n  },\n  container: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  graph: {\n    width: '100%',\n    flex: 1,\n    // Right now there is no good way to style edges between nodes, we have to\n    // fallback to these hacks:\n    '& path[marker-end]': {\n      transition: 'filter 0.1s ease-in-out',\n    },\n    '& path[marker-end]:hover': {\n      filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,\n    },\n    '& g[data-testid=label]': {\n      transition: 'transform 0s',\n    },\n  },\n}));\n\n/**\n * Core building block for custom entity relations diagrams.\n *\n * @public\n */\nexport const EntityRelationsGraph = ({\n  rootEntityNames,\n  maxDepth = Number.POSITIVE_INFINITY,\n  unidirectional = true,\n  mergeRelations = true,\n  kinds,\n  relations,\n  direction = Direction.LEFT_RIGHT,\n  onNodeClick,\n  relationPairs = ALL_RELATION_PAIRS,\n  className,\n  zoom = 'enabled',\n}: {\n  rootEntityNames: EntityName | EntityName[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  direction?: Direction;\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n  className?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n}) => {\n  const theme = useTheme();\n  const classes = useStyles();\n  const rootEntityRefs = useMemo(\n    () =>\n      (Array.isArray(rootEntityNames)\n        ? rootEntityNames\n        : [rootEntityNames]\n      ).map(e => stringifyEntityRef(e)),\n    [rootEntityNames],\n  );\n  const errorApi = useApi(errorApiRef);\n  const { loading, error, nodes, edges } = useEntityRelationNodesAndEdges({\n    rootEntityRefs,\n    maxDepth,\n    unidirectional,\n    mergeRelations,\n    kinds,\n    relations,\n    onNodeClick,\n    relationPairs,\n  });\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [errorApi, error]);\n\n  return (\n    <div className={classNames(classes.container, className)}>\n      {loading && <CircularProgress className={classes.progress} />}\n      {nodes && edges && (\n        <DependencyGraph\n          nodes={nodes}\n          edges={edges}\n          renderNode={CustomNode}\n          renderLabel={CustomLabel}\n          direction={direction}\n          className={classes.graph}\n          paddingX={theme.spacing(4)}\n          paddingY={theme.spacing(4)}\n          labelPosition={DependencyGraphTypes.LabelPosition.RIGHT}\n          labelOffset={theme.spacing(1)}\n          zoom={zoom}\n        />\n      )}\n    </div>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  createExternalRouteRef,\n  createRouteRef,\n} from '@backstage/core-plugin-api';\n\n/**\n * Route pointing to the standalone catalog graph page.\n *\n * @public\n */\nexport const catalogGraphRouteRef = createRouteRef({\n  path: '/catalog-graph',\n  title: 'Catalog Graph',\n});\n\n/**\n * Route pointing to the entity page.\n * Used to navigate from the graph to an entity.\n *\n * @public\n */\nexport const catalogEntityRouteRef = createExternalRouteRef({\n  id: 'catalog-entity',\n  params: ['namespace', 'kind', 'name'],\n});\n","/*\n * Copyright 2021 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 */\nimport { createPlugin } from '@backstage/core-plugin-api';\nimport { catalogEntityRouteRef, catalogGraphRouteRef } from './routes';\n\n/**\n * Catalog Graph Plugin instance.\n * @public\n */\nexport const catalogGraphPlugin = createPlugin({\n  id: 'catalog-graph',\n  routes: {\n    catalogGraph: catalogGraphRouteRef,\n  },\n  externalRoutes: {\n    catalogEntity: catalogEntityRouteRef,\n  },\n});\n","/*\n * Copyright 2021 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 */\nimport {\n  createComponentExtension,\n  createRoutableExtension,\n} from '@backstage/core-plugin-api';\nimport { catalogGraphPlugin } from './plugin';\nimport { catalogGraphRouteRef } from './routes';\n\n/**\n * A card that displays the directly related entities to the current entity.\n *\n * @public\n */\nexport const EntityCatalogGraphCard = catalogGraphPlugin.provide(\n  createComponentExtension({\n    name: 'EntityCatalogGraphCard',\n    component: {\n      lazy: () =>\n        import('./components/CatalogGraphCard').then(m => m.CatalogGraphCard),\n    },\n  }),\n);\n\n/**\n * A standalone page that can be added to your application providing a viewer\n * for your entities and their relations.\n *\n * @public\n */\nexport const CatalogGraphPage = catalogGraphPlugin.provide(\n  createRoutableExtension({\n    name: 'CatalogGraphPage',\n    component: () =>\n      import('./components/CatalogGraphPage').then(m => m.CatalogGraphPage),\n    mountPoint: catalogGraphRouteRef,\n  }),\n);\n"],"names":["useStyles","makeStyles"],"mappings":"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"}
+{"version":3,"file":"index-68fb0e4e.esm.js","sources":["../../src/components/EntityRelationsGraph/CustomLabel.tsx","../../src/components/EntityRelationsGraph/EntityKindIcon.tsx","../../src/components/EntityRelationsGraph/CustomNode.tsx","../../src/components/EntityRelationsGraph/relations.ts","../../src/components/EntityRelationsGraph/types.ts","../../src/components/EntityRelationsGraph/useEntityStore.ts","../../src/components/EntityRelationsGraph/useEntityRelationGraph.ts","../../src/components/EntityRelationsGraph/useEntityRelationNodesAndEdges.ts","../../src/components/EntityRelationsGraph/EntityRelationsGraph.tsx","../../src/routes.ts","../../src/plugin.ts","../../src/extensions.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport { DependencyGraphTypes } from '@backstage/core-components';\nimport { BackstageTheme } from '@backstage/theme';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\nimport React from 'react';\nimport { EntityEdgeData } from './types';\nimport classNames from 'classnames';\n\nconst useStyles = makeStyles((theme: BackstageTheme) => ({\n  text: {\n    fill: theme.palette.textContrast,\n  },\n  secondary: {\n    fill: theme.palette.textSubtle,\n  },\n}));\n\nexport function CustomLabel({\n  edge: { relations },\n}: DependencyGraphTypes.RenderLabelProps<EntityEdgeData>) {\n  const classes = useStyles();\n  return (\n    <text className={classes.text} textAnchor=\"middle\">\n      {relations.map((r, i) => (\n        <tspan key={r} className={classNames(i > 0 && classes.secondary)}>\n          {i > 0 && <tspan> / </tspan>}\n          {r}\n        </tspan>\n      ))}\n    </text>\n  );\n}\n","/*\n * Copyright 2021 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 */\nimport { useApp } from '@backstage/core-plugin-api';\nimport WorkIcon from '@material-ui/icons/Work';\nimport React from 'react';\n\nexport function EntityKindIcon({\n  kind,\n  ...props\n}: {\n  kind: string;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  className?: string;\n}) {\n  const app = useApp();\n  const Icon =\n    app.getSystemIcon(`kind:${kind.toLocaleLowerCase('en-US')}`) ?? WorkIcon;\n  return <Icon {...props} />;\n}\n","/*\n * Copyright 2021 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 */\nimport { DependencyGraphTypes } from '@backstage/core-components';\nimport { formatEntityRefTitle } from '@backstage/plugin-catalog-react';\nimport { BackstageTheme } from '@backstage/theme';\nimport { makeStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { EntityKindIcon } from './EntityKindIcon';\nimport { EntityNodeData } from './types';\n\nconst useStyles = makeStyles((theme: BackstageTheme) => ({\n  node: {\n    fill: theme.palette.grey[300],\n    stroke: theme.palette.grey[300],\n\n    '&.primary': {\n      fill: theme.palette.primary.light,\n      stroke: theme.palette.primary.light,\n    },\n    '&.secondary': {\n      fill: theme.palette.secondary.light,\n      stroke: theme.palette.secondary.light,\n    },\n  },\n  text: {\n    fill: theme.palette.getContrastText(theme.palette.grey[300]),\n\n    '&.primary': {\n      fill: theme.palette.primary.contrastText,\n    },\n    '&.secondary': {\n      fill: theme.palette.secondary.contrastText,\n    },\n    '&.focused': {\n      fontWeight: 'bold',\n    },\n  },\n  clickable: {\n    cursor: 'pointer',\n  },\n}));\n\nexport function CustomNode({\n  node: {\n    id,\n    kind,\n    namespace,\n    name,\n    color = 'default',\n    focused,\n    title,\n    onClick,\n  },\n}: DependencyGraphTypes.RenderNodeProps<EntityNodeData>) {\n  const classes = useStyles();\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 iconSize = height;\n  const paddedIconWidth = kind ? iconSize + padding : 0;\n  const paddedWidth = paddedIconWidth + width + padding * 2;\n  const paddedHeight = height + padding * 2;\n\n  const displayTitle =\n    title ??\n    (kind && name && namespace\n      ? formatEntityRefTitle({ kind, name, namespace })\n      : id);\n\n  return (\n    <g onClick={onClick} className={classNames(onClick && classes.clickable)}>\n      <rect\n        className={classNames(\n          classes.node,\n          color === 'primary' && 'primary',\n          color === 'secondary' && 'secondary',\n        )}\n        width={paddedWidth}\n        height={paddedHeight}\n        rx={10}\n      />\n      {kind && (\n        <EntityKindIcon\n          kind={kind}\n          y={padding}\n          x={padding}\n          width={iconSize}\n          height={iconSize}\n          className={classNames(\n            classes.text,\n            focused && 'focused',\n            color === 'primary' && 'primary',\n            color === 'secondary' && 'secondary',\n          )}\n        />\n      )}\n      <text\n        ref={idRef}\n        className={classNames(\n          classes.text,\n          focused && 'focused',\n          color === 'primary' && 'primary',\n          color === 'secondary' && 'secondary',\n        )}\n        y={paddedHeight / 2}\n        x={paddedIconWidth + (width + padding * 2) / 2}\n        textAnchor=\"middle\"\n        alignmentBaseline=\"middle\"\n      >\n        {displayTitle}\n      </text>\n    </g>\n  );\n}\n","/*\n * Copyright 2021 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 */\nimport {\n  RELATION_API_CONSUMED_BY,\n  RELATION_API_PROVIDED_BY,\n  RELATION_CHILD_OF,\n  RELATION_CONSUMES_API,\n  RELATION_DEPENDENCY_OF,\n  RELATION_DEPENDS_ON,\n  RELATION_HAS_MEMBER,\n  RELATION_HAS_PART,\n  RELATION_MEMBER_OF,\n  RELATION_OWNED_BY,\n  RELATION_OWNER_OF,\n  RELATION_PARENT_OF,\n  RELATION_PART_OF,\n  RELATION_PROVIDES_API,\n} from '@backstage/catalog-model';\n\n/**\n * A pair of two relations that describe the opposite of each other. The first\n * relation is considered as the primary relation.\n *\n * @public\n */\nexport type RelationPairs = [string, string][];\n\n// TODO: This file only contains the pairs for the build-in relations.\n//  How to implement this when custom relations are used? Right now you can pass\n//  the relations everywhere.\n//  Another option is to move this into @backstage/catalog-model\n\n/**\n * A list of pairs of entity relations, used to define which relations are\n * merged together and which the primary relation is.\n *\n * @public\n */\nexport const ALL_RELATION_PAIRS: RelationPairs = [\n  [RELATION_OWNER_OF, RELATION_OWNED_BY],\n  [RELATION_CONSUMES_API, RELATION_API_CONSUMED_BY],\n  [RELATION_API_PROVIDED_BY, RELATION_PROVIDES_API],\n  [RELATION_HAS_PART, RELATION_PART_OF],\n  [RELATION_PARENT_OF, RELATION_CHILD_OF],\n  [RELATION_HAS_MEMBER, RELATION_MEMBER_OF],\n  [RELATION_DEPENDS_ON, RELATION_DEPENDENCY_OF],\n];\n","/*\n * Copyright 2021 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 */\nimport { DependencyGraphTypes } from '@backstage/core-components';\nimport { MouseEventHandler } from 'react';\n\n/**\n * Additional Data for entities\n */\nexport type EntityEdgeData = {\n  /**\n   * Up to two relations that are connecting an entity.\n   */\n  relations: string[];\n  /**\n   * Whether the entity is visible or not.\n   */\n  // Not used, but has to be non empty to draw a label at all!\n  label: 'visible';\n};\n\n/**\n * Edge between two entities.\n *\n * @public\n */\nexport type EntityEdge = DependencyGraphTypes.DependencyEdge<EntityEdgeData>;\n\n/**\n * Additional data for Entity Node\n */\nexport type EntityNodeData = {\n  /**\n   * Name of the entity.\n   */\n  name: string;\n  /**\n   * Optional kind of the entity.\n   */\n  kind?: string;\n  /**\n   * Optional title of the entity.\n   */\n  title?: string;\n  /**\n   * Namespace of the entity.\n   */\n  namespace: string;\n  /**\n   * Whether the entity is focused, optional, defaults to false. Focused\n   * entities are highlighted in the graph.\n   */\n  focused?: boolean;\n  /**\n   * Optional color of the entity, defaults to 'default'.\n   */\n  color?: 'primary' | 'secondary' | 'default';\n  /**\n   * Optional click handler.\n   */\n  onClick?: MouseEventHandler<unknown>;\n};\n\n/**\n * Node representing an entity.\n *\n * @public\n */\nexport type EntityNode = DependencyGraphTypes.DependencyNode<EntityNodeData>;\n\n/**\n * Render direction of the graph.\n *\n * @public\n */\nexport enum Direction {\n  /**\n   * Top to bottom.\n   */\n  TOP_BOTTOM = 'TB',\n  /**\n   * Bottom to top.\n   */\n  BOTTOM_TOP = 'BT',\n  /**\n   * Left to right.\n   */\n  LEFT_RIGHT = 'LR',\n  /**\n   * Right to left.\n   */\n  RIGHT_LEFT = 'RL',\n}\n","/*\n * Copyright 2021 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 */\nimport { Entity, parseEntityRef } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport limiterFactory from 'p-limit';\nimport { Dispatch, useCallback, useRef, useState } from 'react';\nimport { useAsyncFn } from 'react-use';\n\n// TODO: This is a good use case for a graphql API, once it is available in the\n// future.\n\nconst limiter = limiterFactory(10);\n\n/**\n * Ensures that a set of requested entities is loaded.\n */\nexport function useEntityStore(): {\n  entities: { [ref: string]: Entity };\n  loading: boolean;\n  error?: Error;\n  requestEntities: Dispatch<string[]>;\n} {\n  const catalogClient = useApi(catalogApiRef);\n  const state = useRef({\n    requestedEntities: new Set<string>(),\n    outstandingEntities: new Map<string, Promise<Entity | undefined>>(),\n    cachedEntities: new Map<string, Entity>(),\n  });\n  const [entities, setEntities] = useState<{\n    [ref: string]: Entity;\n  }>({});\n\n  const updateEntities = useCallback(() => {\n    const { cachedEntities, requestedEntities } = state.current;\n    const filteredEntities: { [ref: string]: Entity } = {};\n    requestedEntities.forEach(entityRef => {\n      const entity = cachedEntities.get(entityRef);\n\n      if (entity) {\n        filteredEntities[entityRef] = entity;\n      }\n    });\n    setEntities(filteredEntities);\n  }, [state, setEntities]);\n\n  const [asyncState, fetch] = useAsyncFn(async () => {\n    const { requestedEntities, outstandingEntities, cachedEntities } =\n      state.current;\n\n    await Promise.all(\n      Array.from(requestedEntities).map(entityRef =>\n        limiter(async () => {\n          if (cachedEntities.has(entityRef)) {\n            return;\n          }\n\n          if (outstandingEntities.has(entityRef)) {\n            await outstandingEntities.get(entityRef);\n            return;\n          }\n\n          const promise = catalogClient.getEntityByName(\n            parseEntityRef(entityRef),\n          );\n\n          outstandingEntities.set(entityRef, promise);\n\n          try {\n            const entity = await promise;\n\n            if (entity) {\n              cachedEntities.set(entityRef, entity);\n              updateEntities();\n            }\n          } finally {\n            outstandingEntities.delete(entityRef);\n          }\n        }),\n      ),\n    );\n  }, [state, updateEntities]);\n  const { loading, error } = asyncState;\n\n  const requestEntities = useCallback(\n    (entityRefs: string[]) => {\n      const n = new Set(entityRefs);\n      const { requestedEntities } = state.current;\n\n      if (\n        n.size !== requestedEntities.size ||\n        Array.from(n).some(e => !requestedEntities.has(e))\n      ) {\n        state.current.requestedEntities = n;\n        fetch();\n        updateEntities();\n      }\n    },\n    [state, fetch, updateEntities],\n  );\n\n  return {\n    entities,\n    loading,\n    error,\n    requestEntities,\n  };\n}\n","/*\n * Copyright 2021 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 */\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { useEffect } from 'react';\nimport { useEntityStore } from './useEntityStore';\n\n/**\n * Discover the graph of entities connected by relations, starting from a set of\n * root entities. Filters are used to select which relations to includes.\n * Returns all discovered entities once they are loaded.\n */\nexport function useEntityRelationGraph({\n  rootEntityRefs,\n  filter: { maxDepth = Number.POSITIVE_INFINITY, relations, kinds } = {},\n}: {\n  rootEntityRefs: string[];\n  filter?: {\n    maxDepth?: number;\n    relations?: string[];\n    kinds?: string[];\n  };\n}): {\n  entities?: { [ref: string]: Entity };\n  loading: boolean;\n  error?: Error;\n} {\n  const { entities, loading, error, requestEntities } = useEntityStore();\n\n  useEffect(() => {\n    const expectedEntities = new Set([...rootEntityRefs]);\n    const processedEntityRefs = new Set<string>();\n\n    let nextDepthRefQueue = [...rootEntityRefs];\n    let depth = 0;\n\n    while (\n      nextDepthRefQueue.length > 0 &&\n      (!isFinite(maxDepth) || depth < maxDepth)\n    ) {\n      const entityRefQueue = nextDepthRefQueue;\n      nextDepthRefQueue = [];\n\n      while (entityRefQueue.length > 0) {\n        const entityRef = entityRefQueue.shift()!;\n        const entity = entities[entityRef];\n\n        processedEntityRefs.add(entityRef);\n\n        if (entity && entity.relations) {\n          for (const rel of entity.relations) {\n            if (\n              (!relations || relations.includes(rel.type)) &&\n              (!kinds ||\n                kinds.includes(rel.target.kind.toLocaleLowerCase('en-US')))\n            ) {\n              const relationEntityRef = stringifyEntityRef(rel.target);\n\n              if (!processedEntityRefs.has(relationEntityRef)) {\n                nextDepthRefQueue.push(relationEntityRef);\n                expectedEntities.add(relationEntityRef);\n              }\n            }\n          }\n        }\n      }\n\n      ++depth;\n    }\n\n    requestEntities([...expectedEntities]);\n  }, [entities, rootEntityRefs, maxDepth, relations, kinds, requestEntities]);\n\n  return {\n    entities,\n    loading,\n    error,\n  };\n}\n","/*\n * Copyright 2021 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 */\nimport {\n  ENTITY_DEFAULT_NAMESPACE,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { MouseEvent, useState } from 'react';\nimport { useDebounce } from 'react-use';\nimport { RelationPairs, ALL_RELATION_PAIRS } from './relations';\nimport { EntityEdge, EntityNode } from './types';\nimport { useEntityRelationGraph } from './useEntityRelationGraph';\n\n/**\n * Generate nodes and edges to render the entity graph.\n */\nexport function useEntityRelationNodesAndEdges({\n  rootEntityRefs,\n  maxDepth = Number.POSITIVE_INFINITY,\n  unidirectional = true,\n  mergeRelations = true,\n  kinds,\n  relations,\n  onNodeClick,\n  relationPairs = ALL_RELATION_PAIRS,\n}: {\n  rootEntityRefs: string[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n}): {\n  loading: boolean;\n  nodes?: EntityNode[];\n  edges?: EntityEdge[];\n  error?: Error;\n} {\n  const [nodesAndEdges, setNodesAndEdges] = useState<{\n    nodes?: EntityNode[];\n    edges?: EntityEdge[];\n  }>({});\n  const { entities, loading, error } = useEntityRelationGraph({\n    rootEntityRefs,\n    filter: {\n      maxDepth,\n      kinds,\n      relations,\n    },\n  });\n\n  useDebounce(\n    () => {\n      if (!entities || Object.keys(entities).length === 0) {\n        setNodesAndEdges({});\n        return;\n      }\n\n      const nodes = Object.entries(entities).map(([entityRef, entity]) => {\n        const focused = rootEntityRefs.includes(entityRef);\n        const node: EntityNode = {\n          id: entityRef,\n          title: entity.metadata?.title ?? undefined,\n          kind: entity.kind,\n          name: entity.metadata.name,\n          namespace: entity.metadata.namespace ?? ENTITY_DEFAULT_NAMESPACE,\n          focused,\n          color: focused ? 'secondary' : 'primary',\n        };\n\n        if (onNodeClick) {\n          node.onClick = event => onNodeClick(node, event);\n        }\n\n        return node;\n      });\n\n      const edges: EntityEdge[] = [];\n      const visitedNodes = new Set<string>();\n      const nodeQueue = [...rootEntityRefs];\n\n      while (nodeQueue.length > 0) {\n        const entityRef = nodeQueue.pop()!;\n        const entity = entities[entityRef];\n        visitedNodes.add(entityRef);\n\n        if (entity) {\n          entity?.relations?.forEach(rel => {\n            const targetRef = stringifyEntityRef(rel.target);\n\n            // Check if the related entity should be displayed, if not, ignore\n            // the relation too\n            if (!entities[targetRef]) {\n              return;\n            }\n\n            if (relations && !relations.includes(rel.type)) {\n              return;\n            }\n\n            if (\n              kinds &&\n              !kinds.includes(rel.target.kind.toLocaleLowerCase('en-US'))\n            ) {\n              return;\n            }\n\n            if (!unidirectional || !visitedNodes.has(targetRef)) {\n              if (mergeRelations) {\n                const pair = relationPairs.find(\n                  ([l, r]) => l === rel.type || r === rel.type,\n                ) ?? [rel.type];\n                const [left] = pair;\n\n                edges.push({\n                  from: left === rel.type ? entityRef : targetRef,\n                  to: left === rel.type ? targetRef : entityRef,\n                  relations: pair,\n                  label: 'visible',\n                });\n              } else {\n                edges.push({\n                  from: entityRef,\n                  to: targetRef,\n                  relations: [rel.type],\n                  label: 'visible',\n                });\n              }\n            }\n\n            if (!visitedNodes.has(targetRef)) {\n              nodeQueue.push(targetRef);\n              visitedNodes.add(targetRef);\n            }\n          });\n        }\n      }\n\n      setNodesAndEdges({ nodes, edges });\n    },\n    100,\n    [\n      entities,\n      rootEntityRefs,\n      kinds,\n      relations,\n      unidirectional,\n      mergeRelations,\n      onNodeClick,\n      relationPairs,\n    ],\n  );\n\n  return {\n    loading,\n    error,\n    ...nodesAndEdges,\n  };\n}\n","/*\n * Copyright 2021 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 */\nimport { EntityName, stringifyEntityRef } from '@backstage/catalog-model';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport { CircularProgress, makeStyles, useTheme } from '@material-ui/core';\nimport classNames from 'classnames';\nimport React, { MouseEvent, useEffect, useMemo } from 'react';\nimport { CustomLabel } from './CustomLabel';\nimport { CustomNode } from './CustomNode';\nimport { ALL_RELATION_PAIRS, RelationPairs } from './relations';\nimport { Direction, EntityNode } from './types';\nimport { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';\n\nconst useStyles = makeStyles(theme => ({\n  progress: {\n    position: 'absolute',\n    left: '50%',\n    top: '50%',\n    marginLeft: '-20px',\n    marginTop: '-20px',\n  },\n  container: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  graph: {\n    width: '100%',\n    flex: 1,\n    // Right now there is no good way to style edges between nodes, we have to\n    // fallback to these hacks:\n    '& path[marker-end]': {\n      transition: 'filter 0.1s ease-in-out',\n    },\n    '& path[marker-end]:hover': {\n      filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,\n    },\n    '& g[data-testid=label]': {\n      transition: 'transform 0s',\n    },\n  },\n}));\n\n/**\n * Core building block for custom entity relations diagrams.\n *\n * @public\n */\nexport const EntityRelationsGraph = ({\n  rootEntityNames,\n  maxDepth = Number.POSITIVE_INFINITY,\n  unidirectional = true,\n  mergeRelations = true,\n  kinds,\n  relations,\n  direction = Direction.LEFT_RIGHT,\n  onNodeClick,\n  relationPairs = ALL_RELATION_PAIRS,\n  className,\n  zoom = 'enabled',\n}: {\n  rootEntityNames: EntityName | EntityName[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  direction?: Direction;\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n  className?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n}) => {\n  const theme = useTheme();\n  const classes = useStyles();\n  const rootEntityRefs = useMemo(\n    () =>\n      (Array.isArray(rootEntityNames)\n        ? rootEntityNames\n        : [rootEntityNames]\n      ).map(e => stringifyEntityRef(e)),\n    [rootEntityNames],\n  );\n  const errorApi = useApi(errorApiRef);\n  const { loading, error, nodes, edges } = useEntityRelationNodesAndEdges({\n    rootEntityRefs,\n    maxDepth,\n    unidirectional,\n    mergeRelations,\n    kinds,\n    relations,\n    onNodeClick,\n    relationPairs,\n  });\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [errorApi, error]);\n\n  return (\n    <div className={classNames(classes.container, className)}>\n      {loading && <CircularProgress className={classes.progress} />}\n      {nodes && edges && (\n        <DependencyGraph\n          nodes={nodes}\n          edges={edges}\n          renderNode={CustomNode}\n          renderLabel={CustomLabel}\n          direction={direction}\n          className={classes.graph}\n          paddingX={theme.spacing(4)}\n          paddingY={theme.spacing(4)}\n          labelPosition={DependencyGraphTypes.LabelPosition.RIGHT}\n          labelOffset={theme.spacing(1)}\n          zoom={zoom}\n        />\n      )}\n    </div>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  createExternalRouteRef,\n  createRouteRef,\n} from '@backstage/core-plugin-api';\n\n/**\n * Route pointing to the standalone catalog graph page.\n *\n * @public\n */\nexport const catalogGraphRouteRef = createRouteRef({\n  id: 'catalog-graph',\n});\n\n/**\n * Route pointing to the entity page.\n * Used to navigate from the graph to an entity.\n *\n * @public\n */\nexport const catalogEntityRouteRef = createExternalRouteRef({\n  id: 'catalog-entity',\n  params: ['namespace', 'kind', 'name'],\n});\n","/*\n * Copyright 2021 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 */\nimport { createPlugin } from '@backstage/core-plugin-api';\nimport { catalogEntityRouteRef, catalogGraphRouteRef } from './routes';\n\n/**\n * Catalog Graph Plugin instance.\n * @public\n */\nexport const catalogGraphPlugin = createPlugin({\n  id: 'catalog-graph',\n  routes: {\n    catalogGraph: catalogGraphRouteRef,\n  },\n  externalRoutes: {\n    catalogEntity: catalogEntityRouteRef,\n  },\n});\n","/*\n * Copyright 2021 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 */\nimport {\n  createComponentExtension,\n  createRoutableExtension,\n} from '@backstage/core-plugin-api';\nimport { catalogGraphPlugin } from './plugin';\nimport { catalogGraphRouteRef } from './routes';\n\n/**\n * A card that displays the directly related entities to the current entity.\n *\n * @public\n */\nexport const EntityCatalogGraphCard = catalogGraphPlugin.provide(\n  createComponentExtension({\n    name: 'EntityCatalogGraphCard',\n    component: {\n      lazy: () =>\n        import('./components/CatalogGraphCard').then(m => m.CatalogGraphCard),\n    },\n  }),\n);\n\n/**\n * A standalone page that can be added to your application providing a viewer\n * for your entities and their relations.\n *\n * @public\n */\nexport const CatalogGraphPage = catalogGraphPlugin.provide(\n  createRoutableExtension({\n    name: 'CatalogGraphPage',\n    component: () =>\n      import('./components/CatalogGraphPage').then(m => m.CatalogGraphPage),\n    mountPoint: catalogGraphRouteRef,\n  }),\n);\n"],"names":["useStyles","makeStyles"],"mappings":"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"}

package/dist/esm/{index-d337a594.esm.js → index-6e3d9654.esm.js}

@@ -1,6 +1,6 @@
 import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import { Select, Page, Header, Content, ContentHeader, SupportButton } from '@backstage/core-components';
-import { useApi, alertApiRef, useRouteRef } from '@backstage/core-plugin-api';
+import { useApi, alertApiRef, useRouteRef, useAnalytics } from '@backstage/core-plugin-api';
 import { useEntityKinds, formatEntityRefTitle } from '@backstage/plugin-catalog-react';
 import { Box, makeStyles, FormControl, Typography, OutlinedInput, InputAdornment, IconButton, FormControlLabel, Checkbox, TextField, Switch, Grid, Paper } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
@@ -8,7 +8,7 @@ import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import { Autocomplete, ToggleButton } from '@material-ui/lab';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
-import { D as Direction, A as ALL_RELATION_PAIRS, c as catalogEntityRouteRef, E as EntityRelationsGraph } from './index-330c5db8.esm.js';
+import { D as Direction, A as ALL_RELATION_PAIRS, c as catalogEntityRouteRef, E as EntityRelationsGraph } from './index-68fb0e4e.esm.js';
 import ClearIcon from '@material-ui/icons/Clear';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
@@ -27,7 +27,7 @@ const DIRECTION_DISPLAY_NAMES = {
   [Direction.TOP_BOTTOM]: "Top to bottom",
   [Direction.BOTTOM_TOP]: "Bottom to top"
 };
-const DirectionFilter = ({value, onChange}) => {
+const DirectionFilter = ({ value, onChange }) => {
   const handleChange = useCallback((v) => onChange(v), [onChange]);
   return /* @__PURE__ */ React.createElement(Box, {
     pb: 1,
@@ -49,7 +49,7 @@ const useStyles$4 = makeStyles({
     maxWidth: 300
   }
 });
-const MaxDepthFilter = ({value, onChange}) => {
+const MaxDepthFilter = ({ value, onChange }) => {
   const classes = useStyles$4();
   const handleChange = useCallback((event) => {
     const v = Number(event.target.value);
@@ -90,10 +90,10 @@ const useStyles$3 = makeStyles({
     maxWidth: 300
   }
 });
-const SelectedKindsFilter = ({value, onChange}) => {
+const SelectedKindsFilter = ({ value, onChange }) => {
   const classes = useStyles$3();
   const alertApi = useApi(alertApiRef);
-  const {error, kinds} = useEntityKinds();
+  const { error, kinds } = useEntityKinds();
   useEffect(() => {
     if (error) {
       alertApi.post({
@@ -131,7 +131,7 @@ const SelectedKindsFilter = ({value, onChange}) => {
     },
     onChange: handleChange,
     onBlur: handleEmpty,
-    renderOption: (option, {selected}) => {
+    renderOption: (option, { selected }) => {
       var _a;
       return /* @__PURE__ */ React.createElement(FormControlLabel, {
         control: /* @__PURE__ */ React.createElement(Checkbox, {
@@ -190,7 +190,7 @@ const SelectedRelationsFilter = ({
     value: value != null ? value : relations,
     onChange: handleChange,
     onBlur: handleEmpty,
-    renderOption: (option, {selected}) => /* @__PURE__ */ React.createElement(FormControlLabel, {
+    renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(FormControlLabel, {
       control: /* @__PURE__ */ React.createElement(Checkbox, {
         icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, {
           fontSize: "small"
@@ -219,7 +219,7 @@ const useStyles$1 = makeStyles({
     maxWidth: 300
   }
 });
-const SwitchFilter = ({label, value, onChange}) => {
+const SwitchFilter = ({ label, value, onChange }) => {
   const classes = useStyles$1();
   const handleChange = useCallback((event) => {
     onChange(event.target.checked);
@@ -243,7 +243,7 @@ function useCatalogGraphPage({
   initialState = {}
 }) {
   const location = useLocation();
-  const query = useMemo(() => qs.parse(location.search, {arrayLimit: 0, ignoreQueryPrefix: true}) || {}, [location.search]);
+  const query = useMemo(() => qs.parse(location.search, { arrayLimit: 0, ignoreQueryPrefix: true }) || {}, [location.search]);
   const [rootEntityNames, setRootEntityNames] = useState(() => {
     var _a;
     return (Array.isArray(query.rootEntityRefs) ? query.rootEntityRefs : (_a = initialState == null ? void 0 : initialState.rootEntityRefs) != null ? _a : []).map((r) => parseEntityRef(r));
@@ -328,7 +328,7 @@ function useCatalogGraphPage({
       mergeRelations,
       direction,
       showFilters
-    }, {arrayFormat: "brackets", addQueryPrefix: true});
+    }, { arrayFormat: "brackets", addQueryPrefix: true });
     const newUrl = `${window.location.pathname}${newParams}`;
     if (!previousRootEntityRefs || rootEntityRefs.length === previousRootEntityRefs.length && rootEntityRefs.every((v, i) => v === previousRootEntityRefs[i])) {
       window.history.replaceState(null, document.title, newUrl);
@@ -444,8 +444,10 @@ const CatalogGraphPage = ({
     setRootEntityNames,
     showFilters,
     toggleShowFilters
-  } = useCatalogGraphPage({initialState});
+  } = useCatalogGraphPage({ initialState });
+  const analytics = useAnalytics();
   const onNodeClick = useCallback((node, event) => {
+    var _a, _b;
     const nodeEntityName = parseEntityRef(node.id);
     if (event.shiftKey) {
       const path = catalogEntityRoute({
@@ -453,11 +455,13 @@ const CatalogGraphPage = ({
         namespace: nodeEntityName.namespace.toLocaleLowerCase("en-US"),
         name: nodeEntityName.name
       });
+      analytics.captureEvent("click", (_a = node.title) != null ? _a : formatEntityRefTitle(nodeEntityName), { attributes: { to: path } });
       navigate(path);
     } else {
+      analytics.captureEvent("click", (_b = node.title) != null ? _b : formatEntityRefTitle(nodeEntityName));
       setRootEntityNames([nodeEntityName]);
     }
-  }, [catalogEntityRoute, navigate, setRootEntityNames]);
+  }, [catalogEntityRoute, navigate, setRootEntityNames, analytics]);
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
@@ -531,4 +535,4 @@ const CatalogGraphPage = ({
 };
 
 export { CatalogGraphPage };
-//# sourceMappingURL=index-d337a594.esm.js.map
+//# sourceMappingURL=index-6e3d9654.esm.js.map

package/dist/esm/{index-d337a594.esm.js.map → index-6e3d9654.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-d337a594.esm.js","sources":["../../src/components/CatalogGraphPage/DirectionFilter.tsx","../../src/components/CatalogGraphPage/MaxDepthFilter.tsx","../../src/components/CatalogGraphPage/SelectedKindsFilter.tsx","../../src/components/CatalogGraphPage/SelectedRelationsFilter.tsx","../../src/components/CatalogGraphPage/SwitchFilter.tsx","../../src/components/CatalogGraphPage/useCatalogGraphPage.ts","../../src/components/CatalogGraphPage/CatalogGraphPage.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport { Select } from '@backstage/core-components';\nimport { Box } from '@material-ui/core';\nimport React, { useCallback } from 'react';\nimport { Direction } from '../EntityRelationsGraph';\n\nconst DIRECTION_DISPLAY_NAMES = {\n  [Direction.LEFT_RIGHT]: 'Left to right',\n  [Direction.RIGHT_LEFT]: 'Right to left',\n  [Direction.TOP_BOTTOM]: 'Top to bottom',\n  [Direction.BOTTOM_TOP]: 'Bottom to top',\n};\n\nexport type Props = {\n  value: Direction;\n  onChange: (value: Direction) => void;\n};\n\nexport const DirectionFilter = ({ value, onChange }: Props) => {\n  const handleChange = useCallback(v => onChange(v as Direction), [onChange]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <Select\n        label=\"Direction\"\n        selected={value}\n        items={Object.values(Direction).map(v => ({\n          label: DIRECTION_DISPLAY_NAMES[v],\n          value: v,\n        }))}\n        onChange={handleChange}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  Box,\n  FormControl,\n  IconButton,\n  InputAdornment,\n  makeStyles,\n  OutlinedInput,\n  Typography,\n} from '@material-ui/core';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport React, { useCallback } from 'react';\n\nexport type Props = {\n  value: number;\n  onChange: (value: number) => void;\n};\n\nconst useStyles = makeStyles({\n  formControl: {\n    width: '100%',\n    maxWidth: 300,\n  },\n});\n\nexport const MaxDepthFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const v = Number(event.target.value);\n      onChange(v <= 0 ? Number.POSITIVE_INFINITY : v);\n    },\n    [onChange],\n  );\n\n  const reset = useCallback(() => {\n    onChange(Number.POSITIVE_INFINITY);\n  }, [onChange]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <FormControl variant=\"outlined\" className={classes.formControl}>\n        <Typography variant=\"button\">Max Depth</Typography>\n        <OutlinedInput\n          type=\"number\"\n          placeholder=\"∞ Infinite\"\n          value={isFinite(value) ? value : ''}\n          onChange={handleChange}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label=\"clear max depth\"\n                onClick={reset}\n                edge=\"end\"\n              >\n                <ClearIcon />\n              </IconButton>\n            </InputAdornment>\n          }\n          inputProps={{\n            'aria-label': 'maxp',\n          }}\n          labelWidth={0}\n        />\n      </FormControl>\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useEntityKinds } from '@backstage/plugin-catalog-react';\nimport {\n  Box,\n  Checkbox,\n  FormControlLabel,\n  makeStyles,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { Autocomplete } from '@material-ui/lab';\nimport React, { useCallback, useEffect, useMemo } from 'react';\n\nconst useStyles = makeStyles({\n  formControl: {\n    maxWidth: 300,\n  },\n});\n\nexport type Props = {\n  value: string[] | undefined;\n  onChange: (value: string[] | undefined) => void;\n};\n\nexport const SelectedKindsFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const { error, kinds } = useEntityKinds();\n\n  useEffect(() => {\n    if (error) {\n      alertApi.post({\n        message: `Failed to load entity kinds`,\n        severity: 'error',\n      });\n    }\n  }, [error, alertApi]);\n\n  const normalizedKinds = useMemo(\n    () => (kinds ? kinds.map(k => k.toLocaleLowerCase('en-US')) : kinds),\n    [kinds],\n  );\n\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(\n        normalizedKinds && normalizedKinds.every(r => v.includes(r))\n          ? undefined\n          : v,\n      );\n    },\n    [normalizedKinds, onChange],\n  );\n\n  const handleEmpty = useCallback(() => {\n    onChange(value?.length ? value : undefined);\n  }, [value, onChange]);\n\n  if (!kinds?.length || !normalizedKinds?.length || error) {\n    return <></>;\n  }\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography variant=\"button\">Kinds</Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label=\"Kinds\"\n        options={normalizedKinds}\n        value={value ?? normalizedKinds}\n        getOptionLabel={k => kinds[normalizedKinds.indexOf(k)] ?? k}\n        onChange={handleChange}\n        onBlur={handleEmpty}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                checked={selected}\n              />\n            }\n            label={kinds[normalizedKinds.indexOf(option)] ?? option}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"selected-kinds-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  Box,\n  Checkbox,\n  FormControlLabel,\n  makeStyles,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { Autocomplete } from '@material-ui/lab';\nimport React, { useCallback, useMemo } from 'react';\nimport { RelationPairs } from '../EntityRelationsGraph';\n\nconst useStyles = makeStyles({\n  formControl: {\n    maxWidth: 300,\n  },\n});\n\nexport type Props = {\n  relationPairs: RelationPairs;\n  value: string[] | undefined;\n  onChange: (value: string[] | undefined) => void;\n};\n\nexport const SelectedRelationsFilter = ({\n  relationPairs,\n  value,\n  onChange,\n}: Props) => {\n  const classes = useStyles();\n  const relations = useMemo(() => relationPairs.flat(), [relationPairs]);\n\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(relations.every(r => v.includes(r)) ? undefined : v);\n    },\n    [relations, onChange],\n  );\n\n  const handleEmpty = useCallback(() => {\n    onChange(value?.length ? value : undefined);\n  }, [value, onChange]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography variant=\"button\">Relations</Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label=\"Relations\"\n        options={relations}\n        value={value ?? relations}\n        onChange={handleChange}\n        onBlur={handleEmpty}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                checked={selected}\n              />\n            }\n            label={option}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"selected-relations-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport { Box, FormControlLabel, makeStyles, Switch } from '@material-ui/core';\nimport React, { useCallback } from 'react';\n\nexport type Props = {\n  label: string;\n  value: boolean;\n  onChange: (value: boolean) => void;\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    maxWidth: 300,\n  },\n});\n\nexport const SwitchFilter = ({ label, value, onChange }: Props) => {\n  const classes = useStyles();\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(event.target.checked);\n    },\n    [onChange],\n  );\n\n  return (\n    <Box pb={1} pt={1}>\n      <FormControlLabel\n        control={\n          <Switch\n            checked={value}\n            onChange={handleChange}\n            name={label}\n            color=\"primary\"\n          />\n        }\n        label={label}\n        className={classes.root}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  EntityName,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport qs from 'qs';\nimport {\n  Dispatch,\n  DispatchWithoutAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useLocation } from 'react-router';\nimport { usePrevious } from 'react-use';\nimport { Direction } from '../EntityRelationsGraph';\n\nexport type CatalogGraphPageValue = {\n  rootEntityNames: EntityName[];\n  setRootEntityNames: Dispatch<React.SetStateAction<EntityName[]>>;\n  maxDepth: number;\n  setMaxDepth: Dispatch<React.SetStateAction<number>>;\n  selectedRelations: string[] | undefined;\n  setSelectedRelations: Dispatch<React.SetStateAction<string[] | undefined>>;\n  selectedKinds: string[] | undefined;\n  setSelectedKinds: Dispatch<React.SetStateAction<string[] | undefined>>;\n  unidirectional: boolean;\n  setUnidirectional: Dispatch<React.SetStateAction<boolean>>;\n  mergeRelations: boolean;\n  setMergeRelations: Dispatch<React.SetStateAction<boolean>>;\n  direction: Direction;\n  setDirection: Dispatch<React.SetStateAction<Direction>>;\n  showFilters: boolean;\n  toggleShowFilters: DispatchWithoutAction;\n};\n\nexport function useCatalogGraphPage({\n  initialState = {},\n}: {\n  initialState?: {\n    selectedRelations?: string[] | undefined;\n    selectedKinds?: string[] | undefined;\n    rootEntityRefs?: string[];\n    maxDepth?: number;\n    unidirectional?: boolean;\n    mergeRelations?: boolean;\n    direction?: Direction;\n    showFilters?: boolean;\n  };\n}): CatalogGraphPageValue {\n  const location = useLocation();\n  const query = useMemo(\n    () =>\n      (qs.parse(location.search, { arrayLimit: 0, ignoreQueryPrefix: true }) ||\n        {}) as {\n        selectedRelations?: string[] | string;\n        selectedKinds?: string[] | string;\n        rootEntityRefs?: string[] | string;\n        maxDepth?: string[] | string;\n        unidirectional?: string[] | string;\n        mergeRelations?: string[] | string;\n        direction?: string[] | Direction;\n        showFilters?: string[] | string;\n      },\n    [location.search],\n  );\n\n  // Initial state\n  const [rootEntityNames, setRootEntityNames] = useState<EntityName[]>(() =>\n    (Array.isArray(query.rootEntityRefs)\n      ? query.rootEntityRefs\n      : initialState?.rootEntityRefs ?? []\n    ).map(r => parseEntityRef(r)),\n  );\n  const [maxDepth, setMaxDepth] = useState<number>(() =>\n    typeof query.maxDepth === 'string'\n      ? parseMaxDepth(query.maxDepth)\n      : initialState?.maxDepth ?? Number.POSITIVE_INFINITY,\n  );\n  const [selectedRelations, setSelectedRelations] = useState<\n    string[] | undefined\n  >(() =>\n    Array.isArray(query.selectedRelations)\n      ? query.selectedRelations\n      : initialState?.selectedRelations,\n  );\n  const [selectedKinds, setSelectedKinds] = useState<string[] | undefined>(() =>\n    (Array.isArray(query.selectedKinds)\n      ? query.selectedKinds\n      : initialState?.selectedKinds\n    )?.map(k => k.toLocaleLowerCase('en-US')),\n  );\n  const [unidirectional, setUnidirectional] = useState<boolean>(() =>\n    typeof query.unidirectional === 'string'\n      ? query.unidirectional === 'true'\n      : initialState?.unidirectional ?? true,\n  );\n  const [mergeRelations, setMergeRelations] = useState<boolean>(() =>\n    typeof query.mergeRelations === 'string'\n      ? query.mergeRelations === 'true'\n      : initialState?.mergeRelations ?? true,\n  );\n  const [direction, setDirection] = useState<Direction>(() =>\n    typeof query.direction === 'string'\n      ? query.direction\n      : initialState?.direction ?? Direction.LEFT_RIGHT,\n  );\n  const [showFilters, setShowFilters] = useState<boolean>(() =>\n    typeof query.showFilters === 'string'\n      ? query.showFilters === 'true'\n      : initialState?.showFilters ?? true,\n  );\n  const toggleShowFilters = useCallback(\n    () => setShowFilters(s => !s),\n    [setShowFilters],\n  );\n\n  // Update from query parameters\n  const prevQueryParams = usePrevious(location.search);\n  useEffect(() => {\n    // Only respond to changes to url query params\n    if (location.search === prevQueryParams) {\n      return;\n    }\n\n    if (Array.isArray(query.rootEntityRefs)) {\n      setRootEntityNames(query.rootEntityRefs.map(r => parseEntityRef(r)));\n    }\n\n    if (typeof query.maxDepth === 'string') {\n      setMaxDepth(parseMaxDepth(query.maxDepth));\n    }\n\n    if (Array.isArray(query.selectedKinds)) {\n      setSelectedKinds(query.selectedKinds);\n    }\n\n    if (Array.isArray(query.selectedRelations)) {\n      setSelectedRelations(query.selectedRelations);\n    }\n\n    if (typeof query.unidirectional === 'string') {\n      setUnidirectional(query.unidirectional === 'true');\n    }\n\n    if (typeof query.mergeRelations === 'string') {\n      setMergeRelations(query.mergeRelations === 'true');\n    }\n\n    if (typeof query.direction === 'string') {\n      setDirection(query.direction);\n    }\n\n    if (typeof query.showFilters === 'string') {\n      setShowFilters(query.showFilters === 'true');\n    }\n  }, [\n    prevQueryParams,\n    location.search,\n    query,\n    setRootEntityNames,\n    setMaxDepth,\n    setSelectedKinds,\n    setSelectedRelations,\n    setUnidirectional,\n    setMergeRelations,\n    setDirection,\n    setShowFilters,\n  ]);\n\n  // Update query parameters\n  const previousRootEntityRefs = usePrevious(\n    rootEntityNames.map(e => stringifyEntityRef(e)),\n  );\n\n  useEffect(() => {\n    const rootEntityRefs = rootEntityNames.map(e => stringifyEntityRef(e));\n    const newParams = qs.stringify(\n      {\n        rootEntityRefs,\n        maxDepth: isFinite(maxDepth) ? maxDepth : '∞',\n        selectedKinds,\n        selectedRelations,\n        unidirectional,\n        mergeRelations,\n        direction,\n        showFilters,\n      },\n      { arrayFormat: 'brackets', addQueryPrefix: true },\n    );\n    const newUrl = `${window.location.pathname}${newParams}`;\n\n    // We directly manipulate window history here in order to not re-render\n    // infinitely (state => location => state => etc). The intention of this\n    // code is just to ensure the right query/filters are loaded when a user\n    // clicks the \"back\" button after clicking a result.\n    // Only push a new history entry if we switched to another entity, but not\n    // if we just changed a viewer setting.\n    if (\n      !previousRootEntityRefs ||\n      (rootEntityRefs.length === previousRootEntityRefs.length &&\n        rootEntityRefs.every((v, i) => v === previousRootEntityRefs[i]))\n    ) {\n      window.history.replaceState(null, document.title, newUrl);\n    } else {\n      window.history.pushState(null, document.title, newUrl);\n    }\n  }, [\n    rootEntityNames,\n    maxDepth,\n    selectedKinds,\n    selectedRelations,\n    unidirectional,\n    mergeRelations,\n    direction,\n    showFilters,\n    previousRootEntityRefs,\n  ]);\n\n  return {\n    rootEntityNames,\n    setRootEntityNames,\n    maxDepth,\n    setMaxDepth,\n    selectedRelations,\n    setSelectedRelations,\n    selectedKinds,\n    setSelectedKinds,\n    unidirectional,\n    setUnidirectional,\n    mergeRelations,\n    setMergeRelations,\n    direction,\n    setDirection,\n    showFilters,\n    toggleShowFilters,\n  };\n}\n\nfunction parseMaxDepth(value: string): number {\n  return value === '∞' ? Number.POSITIVE_INFINITY : Number(value);\n}\n","/*\n * Copyright 2021 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 */\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { formatEntityRefTitle } from '@backstage/plugin-catalog-react';\nimport { Grid, makeStyles, Paper, Typography } from '@material-ui/core';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport ZoomOutMap from '@material-ui/icons/ZoomOutMap';\nimport { ToggleButton } from '@material-ui/lab';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport { catalogEntityRouteRef } from '../../routes';\nimport {\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  RelationPairs,\n  ALL_RELATION_PAIRS,\n} from '../EntityRelationsGraph';\nimport { DirectionFilter } from './DirectionFilter';\nimport { MaxDepthFilter } from './MaxDepthFilter';\nimport { SelectedKindsFilter } from './SelectedKindsFilter';\nimport { SelectedRelationsFilter } from './SelectedRelationsFilter';\nimport { SwitchFilter } from './SwitchFilter';\nimport { useCatalogGraphPage } from './useCatalogGraphPage';\n\nconst useStyles = makeStyles(theme => ({\n  content: {\n    minHeight: 0,\n  },\n  container: {\n    height: '100%',\n    maxHeight: '100%',\n    minHeight: 0,\n  },\n  fullHeight: {\n    maxHeight: '100%',\n    display: 'flex',\n    minHeight: 0,\n  },\n  graphWrapper: {\n    position: 'relative',\n    flex: 1,\n    minHeight: 0,\n    display: 'flex',\n  },\n  graph: {\n    flex: 1,\n    minHeight: 0,\n  },\n  legend: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    padding: theme.spacing(1),\n    '& .icon': {\n      verticalAlign: 'bottom',\n    },\n  },\n  filters: {\n    display: 'grid',\n    gridGap: theme.spacing(1),\n    gridAutoRows: 'auto',\n    [theme.breakpoints.up('lg')]: {\n      display: 'block',\n    },\n    [theme.breakpoints.only('md')]: {\n      gridTemplateColumns: 'repeat(3, 1fr)',\n    },\n    [theme.breakpoints.only('sm')]: {\n      gridTemplateColumns: 'repeat(2, 1fr)',\n    },\n    [theme.breakpoints.down('xs')]: {\n      gridTemplateColumns: 'repeat(1, 1fr)',\n    },\n  },\n}));\n\nexport const CatalogGraphPage = ({\n  relationPairs = ALL_RELATION_PAIRS,\n  initialState,\n}: {\n  relationPairs?: RelationPairs;\n  initialState?: {\n    selectedRelations?: string[];\n    selectedKinds?: string[];\n    rootEntityRefs?: string[];\n    maxDepth?: number;\n    unidirectional?: boolean;\n    mergeRelations?: boolean;\n    direction?: Direction;\n    showFilters?: boolean;\n  };\n}) => {\n  const navigate = useNavigate();\n  const classes = useStyles();\n  const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);\n  const {\n    maxDepth,\n    setMaxDepth,\n    selectedKinds,\n    setSelectedKinds,\n    selectedRelations,\n    setSelectedRelations,\n    unidirectional,\n    setUnidirectional,\n    mergeRelations,\n    setMergeRelations,\n    direction,\n    setDirection,\n    rootEntityNames,\n    setRootEntityNames,\n    showFilters,\n    toggleShowFilters,\n  } = useCatalogGraphPage({ initialState });\n  const onNodeClick = useCallback(\n    (node: EntityNode, event: MouseEvent<unknown>) => {\n      const nodeEntityName = parseEntityRef(node.id);\n\n      if (event.shiftKey) {\n        const path = catalogEntityRoute({\n          kind: nodeEntityName.kind.toLocaleLowerCase('en-US'),\n          namespace: nodeEntityName.namespace.toLocaleLowerCase('en-US'),\n          name: nodeEntityName.name,\n        });\n        navigate(path);\n      } else {\n        setRootEntityNames([nodeEntityName]);\n      }\n    },\n    [catalogEntityRoute, navigate, setRootEntityNames],\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title=\"Catalog Graph\"\n        subtitle={rootEntityNames.map(e => formatEntityRefTitle(e)).join(', ')}\n      />\n      <Content stretch className={classes.content}>\n        <ContentHeader\n          titleComponent={\n            <ToggleButton\n              value=\"show filters\"\n              selected={showFilters}\n              onChange={() => toggleShowFilters()}\n            >\n              <FilterListIcon /> Filters\n            </ToggleButton>\n          }\n        >\n          <SupportButton>\n            Start tracking your component in by adding it to the software\n            catalog.\n          </SupportButton>\n        </ContentHeader>\n        <Grid container alignItems=\"stretch\" className={classes.container}>\n          {showFilters && (\n            <Grid item xs={12} lg={2} className={classes.filters}>\n              <MaxDepthFilter value={maxDepth} onChange={setMaxDepth} />\n              <SelectedKindsFilter\n                value={selectedKinds}\n                onChange={setSelectedKinds}\n              />\n              <SelectedRelationsFilter\n                value={selectedRelations}\n                onChange={setSelectedRelations}\n                relationPairs={relationPairs}\n              />\n              <DirectionFilter value={direction} onChange={setDirection} />\n              <SwitchFilter\n                value={unidirectional}\n                onChange={setUnidirectional}\n                label=\"Simplified\"\n              />\n              <SwitchFilter\n                value={mergeRelations}\n                onChange={setMergeRelations}\n                label=\"Merge Relations\"\n              />\n            </Grid>\n          )}\n          <Grid item xs className={classes.fullHeight}>\n            <Paper className={classes.graphWrapper}>\n              <Typography\n                variant=\"caption\"\n                color=\"textSecondary\"\n                display=\"block\"\n                className={classes.legend}\n              >\n                <ZoomOutMap className=\"icon\" /> Use pinch &amp; zoom to move\n                around the diagram. Click to change active node, shift click to\n                navigate to entity.\n              </Typography>\n              <EntityRelationsGraph\n                rootEntityNames={rootEntityNames}\n                maxDepth={maxDepth}\n                kinds={\n                  selectedKinds && selectedKinds.length > 0\n                    ? selectedKinds\n                    : undefined\n                }\n                relations={\n                  selectedRelations && selectedRelations.length > 0\n                    ? selectedRelations\n                    : undefined\n                }\n                mergeRelations={mergeRelations}\n                unidirectional={unidirectional}\n                onNodeClick={onNodeClick}\n                direction={direction}\n                relationPairs={relationPairs}\n                className={classes.graph}\n                zoom=\"enabled\"\n              />\n            </Paper>\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":["useStyles"],"mappings":"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"}
+{"version":3,"file":"index-6e3d9654.esm.js","sources":["../../src/components/CatalogGraphPage/DirectionFilter.tsx","../../src/components/CatalogGraphPage/MaxDepthFilter.tsx","../../src/components/CatalogGraphPage/SelectedKindsFilter.tsx","../../src/components/CatalogGraphPage/SelectedRelationsFilter.tsx","../../src/components/CatalogGraphPage/SwitchFilter.tsx","../../src/components/CatalogGraphPage/useCatalogGraphPage.ts","../../src/components/CatalogGraphPage/CatalogGraphPage.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport { Select } from '@backstage/core-components';\nimport { Box } from '@material-ui/core';\nimport React, { useCallback } from 'react';\nimport { Direction } from '../EntityRelationsGraph';\n\nconst DIRECTION_DISPLAY_NAMES = {\n  [Direction.LEFT_RIGHT]: 'Left to right',\n  [Direction.RIGHT_LEFT]: 'Right to left',\n  [Direction.TOP_BOTTOM]: 'Top to bottom',\n  [Direction.BOTTOM_TOP]: 'Bottom to top',\n};\n\nexport type Props = {\n  value: Direction;\n  onChange: (value: Direction) => void;\n};\n\nexport const DirectionFilter = ({ value, onChange }: Props) => {\n  const handleChange = useCallback(v => onChange(v as Direction), [onChange]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <Select\n        label=\"Direction\"\n        selected={value}\n        items={Object.values(Direction).map(v => ({\n          label: DIRECTION_DISPLAY_NAMES[v],\n          value: v,\n        }))}\n        onChange={handleChange}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  Box,\n  FormControl,\n  IconButton,\n  InputAdornment,\n  makeStyles,\n  OutlinedInput,\n  Typography,\n} from '@material-ui/core';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport React, { useCallback } from 'react';\n\nexport type Props = {\n  value: number;\n  onChange: (value: number) => void;\n};\n\nconst useStyles = makeStyles({\n  formControl: {\n    width: '100%',\n    maxWidth: 300,\n  },\n});\n\nexport const MaxDepthFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const v = Number(event.target.value);\n      onChange(v <= 0 ? Number.POSITIVE_INFINITY : v);\n    },\n    [onChange],\n  );\n\n  const reset = useCallback(() => {\n    onChange(Number.POSITIVE_INFINITY);\n  }, [onChange]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <FormControl variant=\"outlined\" className={classes.formControl}>\n        <Typography variant=\"button\">Max Depth</Typography>\n        <OutlinedInput\n          type=\"number\"\n          placeholder=\"∞ Infinite\"\n          value={isFinite(value) ? value : ''}\n          onChange={handleChange}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label=\"clear max depth\"\n                onClick={reset}\n                edge=\"end\"\n              >\n                <ClearIcon />\n              </IconButton>\n            </InputAdornment>\n          }\n          inputProps={{\n            'aria-label': 'maxp',\n          }}\n          labelWidth={0}\n        />\n      </FormControl>\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useEntityKinds } from '@backstage/plugin-catalog-react';\nimport {\n  Box,\n  Checkbox,\n  FormControlLabel,\n  makeStyles,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { Autocomplete } from '@material-ui/lab';\nimport React, { useCallback, useEffect, useMemo } from 'react';\n\nconst useStyles = makeStyles({\n  formControl: {\n    maxWidth: 300,\n  },\n});\n\nexport type Props = {\n  value: string[] | undefined;\n  onChange: (value: string[] | undefined) => void;\n};\n\nexport const SelectedKindsFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const { error, kinds } = useEntityKinds();\n\n  useEffect(() => {\n    if (error) {\n      alertApi.post({\n        message: `Failed to load entity kinds`,\n        severity: 'error',\n      });\n    }\n  }, [error, alertApi]);\n\n  const normalizedKinds = useMemo(\n    () => (kinds ? kinds.map(k => k.toLocaleLowerCase('en-US')) : kinds),\n    [kinds],\n  );\n\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(\n        normalizedKinds && normalizedKinds.every(r => v.includes(r))\n          ? undefined\n          : v,\n      );\n    },\n    [normalizedKinds, onChange],\n  );\n\n  const handleEmpty = useCallback(() => {\n    onChange(value?.length ? value : undefined);\n  }, [value, onChange]);\n\n  if (!kinds?.length || !normalizedKinds?.length || error) {\n    return <></>;\n  }\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography variant=\"button\">Kinds</Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label=\"Kinds\"\n        options={normalizedKinds}\n        value={value ?? normalizedKinds}\n        getOptionLabel={k => kinds[normalizedKinds.indexOf(k)] ?? k}\n        onChange={handleChange}\n        onBlur={handleEmpty}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                checked={selected}\n              />\n            }\n            label={kinds[normalizedKinds.indexOf(option)] ?? option}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"selected-kinds-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  Box,\n  Checkbox,\n  FormControlLabel,\n  makeStyles,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { Autocomplete } from '@material-ui/lab';\nimport React, { useCallback, useMemo } from 'react';\nimport { RelationPairs } from '../EntityRelationsGraph';\n\nconst useStyles = makeStyles({\n  formControl: {\n    maxWidth: 300,\n  },\n});\n\nexport type Props = {\n  relationPairs: RelationPairs;\n  value: string[] | undefined;\n  onChange: (value: string[] | undefined) => void;\n};\n\nexport const SelectedRelationsFilter = ({\n  relationPairs,\n  value,\n  onChange,\n}: Props) => {\n  const classes = useStyles();\n  const relations = useMemo(() => relationPairs.flat(), [relationPairs]);\n\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(relations.every(r => v.includes(r)) ? undefined : v);\n    },\n    [relations, onChange],\n  );\n\n  const handleEmpty = useCallback(() => {\n    onChange(value?.length ? value : undefined);\n  }, [value, onChange]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography variant=\"button\">Relations</Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label=\"Relations\"\n        options={relations}\n        value={value ?? relations}\n        onChange={handleChange}\n        onBlur={handleEmpty}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                checked={selected}\n              />\n            }\n            label={option}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"selected-relations-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport { Box, FormControlLabel, makeStyles, Switch } from '@material-ui/core';\nimport React, { useCallback } from 'react';\n\nexport type Props = {\n  label: string;\n  value: boolean;\n  onChange: (value: boolean) => void;\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    maxWidth: 300,\n  },\n});\n\nexport const SwitchFilter = ({ label, value, onChange }: Props) => {\n  const classes = useStyles();\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(event.target.checked);\n    },\n    [onChange],\n  );\n\n  return (\n    <Box pb={1} pt={1}>\n      <FormControlLabel\n        control={\n          <Switch\n            checked={value}\n            onChange={handleChange}\n            name={label}\n            color=\"primary\"\n          />\n        }\n        label={label}\n        className={classes.root}\n      />\n    </Box>\n  );\n};\n","/*\n * Copyright 2021 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 */\nimport {\n  EntityName,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport qs from 'qs';\nimport {\n  Dispatch,\n  DispatchWithoutAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useLocation } from 'react-router';\nimport { usePrevious } from 'react-use';\nimport { Direction } from '../EntityRelationsGraph';\n\nexport type CatalogGraphPageValue = {\n  rootEntityNames: EntityName[];\n  setRootEntityNames: Dispatch<React.SetStateAction<EntityName[]>>;\n  maxDepth: number;\n  setMaxDepth: Dispatch<React.SetStateAction<number>>;\n  selectedRelations: string[] | undefined;\n  setSelectedRelations: Dispatch<React.SetStateAction<string[] | undefined>>;\n  selectedKinds: string[] | undefined;\n  setSelectedKinds: Dispatch<React.SetStateAction<string[] | undefined>>;\n  unidirectional: boolean;\n  setUnidirectional: Dispatch<React.SetStateAction<boolean>>;\n  mergeRelations: boolean;\n  setMergeRelations: Dispatch<React.SetStateAction<boolean>>;\n  direction: Direction;\n  setDirection: Dispatch<React.SetStateAction<Direction>>;\n  showFilters: boolean;\n  toggleShowFilters: DispatchWithoutAction;\n};\n\nexport function useCatalogGraphPage({\n  initialState = {},\n}: {\n  initialState?: {\n    selectedRelations?: string[] | undefined;\n    selectedKinds?: string[] | undefined;\n    rootEntityRefs?: string[];\n    maxDepth?: number;\n    unidirectional?: boolean;\n    mergeRelations?: boolean;\n    direction?: Direction;\n    showFilters?: boolean;\n  };\n}): CatalogGraphPageValue {\n  const location = useLocation();\n  const query = useMemo(\n    () =>\n      (qs.parse(location.search, { arrayLimit: 0, ignoreQueryPrefix: true }) ||\n        {}) as {\n        selectedRelations?: string[] | string;\n        selectedKinds?: string[] | string;\n        rootEntityRefs?: string[] | string;\n        maxDepth?: string[] | string;\n        unidirectional?: string[] | string;\n        mergeRelations?: string[] | string;\n        direction?: string[] | Direction;\n        showFilters?: string[] | string;\n      },\n    [location.search],\n  );\n\n  // Initial state\n  const [rootEntityNames, setRootEntityNames] = useState<EntityName[]>(() =>\n    (Array.isArray(query.rootEntityRefs)\n      ? query.rootEntityRefs\n      : initialState?.rootEntityRefs ?? []\n    ).map(r => parseEntityRef(r)),\n  );\n  const [maxDepth, setMaxDepth] = useState<number>(() =>\n    typeof query.maxDepth === 'string'\n      ? parseMaxDepth(query.maxDepth)\n      : initialState?.maxDepth ?? Number.POSITIVE_INFINITY,\n  );\n  const [selectedRelations, setSelectedRelations] = useState<\n    string[] | undefined\n  >(() =>\n    Array.isArray(query.selectedRelations)\n      ? query.selectedRelations\n      : initialState?.selectedRelations,\n  );\n  const [selectedKinds, setSelectedKinds] = useState<string[] | undefined>(() =>\n    (Array.isArray(query.selectedKinds)\n      ? query.selectedKinds\n      : initialState?.selectedKinds\n    )?.map(k => k.toLocaleLowerCase('en-US')),\n  );\n  const [unidirectional, setUnidirectional] = useState<boolean>(() =>\n    typeof query.unidirectional === 'string'\n      ? query.unidirectional === 'true'\n      : initialState?.unidirectional ?? true,\n  );\n  const [mergeRelations, setMergeRelations] = useState<boolean>(() =>\n    typeof query.mergeRelations === 'string'\n      ? query.mergeRelations === 'true'\n      : initialState?.mergeRelations ?? true,\n  );\n  const [direction, setDirection] = useState<Direction>(() =>\n    typeof query.direction === 'string'\n      ? query.direction\n      : initialState?.direction ?? Direction.LEFT_RIGHT,\n  );\n  const [showFilters, setShowFilters] = useState<boolean>(() =>\n    typeof query.showFilters === 'string'\n      ? query.showFilters === 'true'\n      : initialState?.showFilters ?? true,\n  );\n  const toggleShowFilters = useCallback(\n    () => setShowFilters(s => !s),\n    [setShowFilters],\n  );\n\n  // Update from query parameters\n  const prevQueryParams = usePrevious(location.search);\n  useEffect(() => {\n    // Only respond to changes to url query params\n    if (location.search === prevQueryParams) {\n      return;\n    }\n\n    if (Array.isArray(query.rootEntityRefs)) {\n      setRootEntityNames(query.rootEntityRefs.map(r => parseEntityRef(r)));\n    }\n\n    if (typeof query.maxDepth === 'string') {\n      setMaxDepth(parseMaxDepth(query.maxDepth));\n    }\n\n    if (Array.isArray(query.selectedKinds)) {\n      setSelectedKinds(query.selectedKinds);\n    }\n\n    if (Array.isArray(query.selectedRelations)) {\n      setSelectedRelations(query.selectedRelations);\n    }\n\n    if (typeof query.unidirectional === 'string') {\n      setUnidirectional(query.unidirectional === 'true');\n    }\n\n    if (typeof query.mergeRelations === 'string') {\n      setMergeRelations(query.mergeRelations === 'true');\n    }\n\n    if (typeof query.direction === 'string') {\n      setDirection(query.direction);\n    }\n\n    if (typeof query.showFilters === 'string') {\n      setShowFilters(query.showFilters === 'true');\n    }\n  }, [\n    prevQueryParams,\n    location.search,\n    query,\n    setRootEntityNames,\n    setMaxDepth,\n    setSelectedKinds,\n    setSelectedRelations,\n    setUnidirectional,\n    setMergeRelations,\n    setDirection,\n    setShowFilters,\n  ]);\n\n  // Update query parameters\n  const previousRootEntityRefs = usePrevious(\n    rootEntityNames.map(e => stringifyEntityRef(e)),\n  );\n\n  useEffect(() => {\n    const rootEntityRefs = rootEntityNames.map(e => stringifyEntityRef(e));\n    const newParams = qs.stringify(\n      {\n        rootEntityRefs,\n        maxDepth: isFinite(maxDepth) ? maxDepth : '∞',\n        selectedKinds,\n        selectedRelations,\n        unidirectional,\n        mergeRelations,\n        direction,\n        showFilters,\n      },\n      { arrayFormat: 'brackets', addQueryPrefix: true },\n    );\n    const newUrl = `${window.location.pathname}${newParams}`;\n\n    // We directly manipulate window history here in order to not re-render\n    // infinitely (state => location => state => etc). The intention of this\n    // code is just to ensure the right query/filters are loaded when a user\n    // clicks the \"back\" button after clicking a result.\n    // Only push a new history entry if we switched to another entity, but not\n    // if we just changed a viewer setting.\n    if (\n      !previousRootEntityRefs ||\n      (rootEntityRefs.length === previousRootEntityRefs.length &&\n        rootEntityRefs.every((v, i) => v === previousRootEntityRefs[i]))\n    ) {\n      window.history.replaceState(null, document.title, newUrl);\n    } else {\n      window.history.pushState(null, document.title, newUrl);\n    }\n  }, [\n    rootEntityNames,\n    maxDepth,\n    selectedKinds,\n    selectedRelations,\n    unidirectional,\n    mergeRelations,\n    direction,\n    showFilters,\n    previousRootEntityRefs,\n  ]);\n\n  return {\n    rootEntityNames,\n    setRootEntityNames,\n    maxDepth,\n    setMaxDepth,\n    selectedRelations,\n    setSelectedRelations,\n    selectedKinds,\n    setSelectedKinds,\n    unidirectional,\n    setUnidirectional,\n    mergeRelations,\n    setMergeRelations,\n    direction,\n    setDirection,\n    showFilters,\n    toggleShowFilters,\n  };\n}\n\nfunction parseMaxDepth(value: string): number {\n  return value === '∞' ? Number.POSITIVE_INFINITY : Number(value);\n}\n","/*\n * Copyright 2021 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 */\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';\nimport { formatEntityRefTitle } from '@backstage/plugin-catalog-react';\nimport { Grid, makeStyles, Paper, Typography } from '@material-ui/core';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport ZoomOutMap from '@material-ui/icons/ZoomOutMap';\nimport { ToggleButton } from '@material-ui/lab';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport { catalogEntityRouteRef } from '../../routes';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  RelationPairs,\n} from '../EntityRelationsGraph';\nimport { DirectionFilter } from './DirectionFilter';\nimport { MaxDepthFilter } from './MaxDepthFilter';\nimport { SelectedKindsFilter } from './SelectedKindsFilter';\nimport { SelectedRelationsFilter } from './SelectedRelationsFilter';\nimport { SwitchFilter } from './SwitchFilter';\nimport { useCatalogGraphPage } from './useCatalogGraphPage';\n\nconst useStyles = makeStyles(theme => ({\n  content: {\n    minHeight: 0,\n  },\n  container: {\n    height: '100%',\n    maxHeight: '100%',\n    minHeight: 0,\n  },\n  fullHeight: {\n    maxHeight: '100%',\n    display: 'flex',\n    minHeight: 0,\n  },\n  graphWrapper: {\n    position: 'relative',\n    flex: 1,\n    minHeight: 0,\n    display: 'flex',\n  },\n  graph: {\n    flex: 1,\n    minHeight: 0,\n  },\n  legend: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    padding: theme.spacing(1),\n    '& .icon': {\n      verticalAlign: 'bottom',\n    },\n  },\n  filters: {\n    display: 'grid',\n    gridGap: theme.spacing(1),\n    gridAutoRows: 'auto',\n    [theme.breakpoints.up('lg')]: {\n      display: 'block',\n    },\n    [theme.breakpoints.only('md')]: {\n      gridTemplateColumns: 'repeat(3, 1fr)',\n    },\n    [theme.breakpoints.only('sm')]: {\n      gridTemplateColumns: 'repeat(2, 1fr)',\n    },\n    [theme.breakpoints.down('xs')]: {\n      gridTemplateColumns: 'repeat(1, 1fr)',\n    },\n  },\n}));\n\nexport const CatalogGraphPage = ({\n  relationPairs = ALL_RELATION_PAIRS,\n  initialState,\n}: {\n  relationPairs?: RelationPairs;\n  initialState?: {\n    selectedRelations?: string[];\n    selectedKinds?: string[];\n    rootEntityRefs?: string[];\n    maxDepth?: number;\n    unidirectional?: boolean;\n    mergeRelations?: boolean;\n    direction?: Direction;\n    showFilters?: boolean;\n  };\n}) => {\n  const navigate = useNavigate();\n  const classes = useStyles();\n  const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);\n  const {\n    maxDepth,\n    setMaxDepth,\n    selectedKinds,\n    setSelectedKinds,\n    selectedRelations,\n    setSelectedRelations,\n    unidirectional,\n    setUnidirectional,\n    mergeRelations,\n    setMergeRelations,\n    direction,\n    setDirection,\n    rootEntityNames,\n    setRootEntityNames,\n    showFilters,\n    toggleShowFilters,\n  } = useCatalogGraphPage({ initialState });\n  const analytics = useAnalytics();\n  const onNodeClick = useCallback(\n    (node: EntityNode, event: MouseEvent<unknown>) => {\n      const nodeEntityName = parseEntityRef(node.id);\n\n      if (event.shiftKey) {\n        const path = catalogEntityRoute({\n          kind: nodeEntityName.kind.toLocaleLowerCase('en-US'),\n          namespace: nodeEntityName.namespace.toLocaleLowerCase('en-US'),\n          name: nodeEntityName.name,\n        });\n\n        analytics.captureEvent(\n          'click',\n          node.title ?? formatEntityRefTitle(nodeEntityName),\n          { attributes: { to: path } },\n        );\n        navigate(path);\n      } else {\n        analytics.captureEvent(\n          'click',\n          node.title ?? formatEntityRefTitle(nodeEntityName),\n        );\n        setRootEntityNames([nodeEntityName]);\n      }\n    },\n    [catalogEntityRoute, navigate, setRootEntityNames, analytics],\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title=\"Catalog Graph\"\n        subtitle={rootEntityNames.map(e => formatEntityRefTitle(e)).join(', ')}\n      />\n      <Content stretch className={classes.content}>\n        <ContentHeader\n          titleComponent={\n            <ToggleButton\n              value=\"show filters\"\n              selected={showFilters}\n              onChange={() => toggleShowFilters()}\n            >\n              <FilterListIcon /> Filters\n            </ToggleButton>\n          }\n        >\n          <SupportButton>\n            Start tracking your component in by adding it to the software\n            catalog.\n          </SupportButton>\n        </ContentHeader>\n        <Grid container alignItems=\"stretch\" className={classes.container}>\n          {showFilters && (\n            <Grid item xs={12} lg={2} className={classes.filters}>\n              <MaxDepthFilter value={maxDepth} onChange={setMaxDepth} />\n              <SelectedKindsFilter\n                value={selectedKinds}\n                onChange={setSelectedKinds}\n              />\n              <SelectedRelationsFilter\n                value={selectedRelations}\n                onChange={setSelectedRelations}\n                relationPairs={relationPairs}\n              />\n              <DirectionFilter value={direction} onChange={setDirection} />\n              <SwitchFilter\n                value={unidirectional}\n                onChange={setUnidirectional}\n                label=\"Simplified\"\n              />\n              <SwitchFilter\n                value={mergeRelations}\n                onChange={setMergeRelations}\n                label=\"Merge Relations\"\n              />\n            </Grid>\n          )}\n          <Grid item xs className={classes.fullHeight}>\n            <Paper className={classes.graphWrapper}>\n              <Typography\n                variant=\"caption\"\n                color=\"textSecondary\"\n                display=\"block\"\n                className={classes.legend}\n              >\n                <ZoomOutMap className=\"icon\" /> Use pinch &amp; zoom to move\n                around the diagram. Click to change active node, shift click to\n                navigate to entity.\n              </Typography>\n              <EntityRelationsGraph\n                rootEntityNames={rootEntityNames}\n                maxDepth={maxDepth}\n                kinds={\n                  selectedKinds && selectedKinds.length > 0\n                    ? selectedKinds\n                    : undefined\n                }\n                relations={\n                  selectedRelations && selectedRelations.length > 0\n                    ? selectedRelations\n                    : undefined\n                }\n                mergeRelations={mergeRelations}\n                unidirectional={unidirectional}\n                onNodeClick={onNodeClick}\n                direction={direction}\n                relationPairs={relationPairs}\n                className={classes.graph}\n                zoom=\"enabled\"\n              />\n            </Paper>\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,0BAA0B;AAAA,GAC7B,UAAU,aAAa;AAAA,GACvB,UAAU,aAAa;AAAA,GACvB,UAAU,aAAa;AAAA,GACvB,UAAU,aAAa;AAAA;MAQb,kBAAkB,CAAC,EAAE,OAAO,eAAsB;AAC7D,QAAM,eAAe,YAAY,OAAK,SAAS,IAAiB,CAAC;AAEjE,6CACG,KAAD;AAAA,IAAK,IAAI;AAAA,IAAG,IAAI;AAAA,yCACb,QAAD;AAAA,IACE,OAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO,OAAO,OAAO,WAAW,IAAI;AAAM,MACxC,OAAO,wBAAwB;AAAA,MAC/B,OAAO;AAAA;AAAA,IAET,UAAU;AAAA;AAAA;;ACZlB,MAAMA,cAAY,WAAW;AAAA,EAC3B,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA;AAAA;MAID,iBAAiB,CAAC,EAAE,OAAO,eAAsB;AAC5D,QAAM,UAAUA;AAEhB,QAAM,eAAe,YACnB,CAAC,UAA+C;AAC9C,UAAM,IAAI,OAAO,MAAM,OAAO;AAC9B,aAAS,KAAK,IAAI,OAAO,oBAAoB;AAAA,KAE/C,CAAC;AAGH,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,OAAO;AAAA,KACf,CAAC;AAEJ,6CACG,KAAD;AAAA,IAAK,IAAI;AAAA,IAAG,IAAI;AAAA,yCACb,aAAD;AAAA,IAAa,SAAQ;AAAA,IAAW,WAAW,QAAQ;AAAA,yCAChD,YAAD;AAAA,IAAY,SAAQ;AAAA,KAAS,kDAC5B,eAAD;AAAA,IACE,MAAK;AAAA,IACL,aAAY;AAAA,IACZ,OAAO,SAAS,SAAS,QAAQ;AAAA,IACjC,UAAU;AAAA,IACV,kDACG,gBAAD;AAAA,MAAgB,UAAS;AAAA,2CACtB,YAAD;AAAA,MACE,cAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAK;AAAA,2CAEJ,WAAD;AAAA,IAIN,YAAY;AAAA,MACV,cAAc;AAAA;AAAA,IAEhB,YAAY;AAAA;AAAA;;AC9CtB,MAAMA,cAAY,WAAW;AAAA,EAC3B,aAAa;AAAA,IACX,UAAU;AAAA;AAAA;MASD,sBAAsB,CAAC,EAAE,OAAO,eAAsB;AACjE,QAAM,UAAUA;AAChB,QAAM,WAAW,OAAO;AACxB,QAAM,EAAE,OAAO,UAAU;AAEzB,YAAU,MAAM;AACd,QAAI,OAAO;AACT,eAAS,KAAK;AAAA,QACZ,SAAS;AAAA,QACT,UAAU;AAAA;AAAA;AAAA,KAGb,CAAC,OAAO;AAEX,QAAM,kBAAkB,QACtB,MAAO,QAAQ,MAAM,IAAI,OAAK,EAAE,kBAAkB,YAAY,OAC9D,CAAC;AAGH,QAAM,eAAe,YACnB,CAAC,GAAY,MAAgB;AAC3B,aACE,mBAAmB,gBAAgB,MAAM,OAAK,EAAE,SAAS,MACrD,SACA;AAAA,KAGR,CAAC,iBAAiB;AAGpB,QAAM,cAAc,YAAY,MAAM;AACpC,aAAS,gCAAO,UAAS,QAAQ;AAAA,KAChC,CAAC,OAAO;AAEX,MAAI,iCAAQ,WAAU,qDAAkB,WAAU,OAAO;AACvD;AAAO;AAGT,6CACG,KAAD;AAAA,IAAK,IAAI;AAAA,IAAG,IAAI;AAAA,yCACb,YAAD;AAAA,IAAY,SAAQ;AAAA,KAAS,8CAC5B,cAAD;AAAA,IACE,WAAW,QAAQ;AAAA,IACnB,UAAQ;AAAA,IACR,WAAW;AAAA,IACX,sBAAoB;AAAA,IACpB,cAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO,wBAAS;AAAA,IAChB,gBAAgB,OAAE;AA3F1B;AA2F6B,yBAAM,gBAAgB,QAAQ,QAA9B,YAAqC;AAAA;AAAA,IAC1D,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,CAAC,QAAQ,EAAE,eAAY;AA9F7C;AA+FU,iDAAC,kBAAD;AAAA,QACE,6CACG,UAAD;AAAA,UACE,0CAAO,0BAAD;AAAA,YAA0B,UAAS;AAAA;AAAA,UACzC,iDAAc,cAAD;AAAA,YAAc,UAAS;AAAA;AAAA,UACpC,SAAS;AAAA;AAAA,QAGb,OAAO,YAAM,gBAAgB,QAAQ,aAA9B,YAA0C;AAAA;AAAA;AAAA,IAGrD,MAAK;AAAA,IACL,+CAAY,gBAAD;AAAA,MAAgB,eAAY;AAAA;AAAA,IACvC,aAAa,gDAAW,WAAD;AAAA,SAAe;AAAA,MAAQ,SAAQ;AAAA;AAAA;AAAA;;AC9E9D,MAAMA,cAAY,WAAW;AAAA,EAC3B,aAAa;AAAA,IACX,UAAU;AAAA;AAAA;MAUD,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,MACW;AACX,QAAM,UAAUA;AAChB,QAAM,YAAY,QAAQ,MAAM,cAAc,QAAQ,CAAC;AAEvD,QAAM,eAAe,YACnB,CAAC,GAAY,MAAgB;AAC3B,aAAS,UAAU,MAAM,OAAK,EAAE,SAAS,MAAM,SAAY;AAAA,KAE7D,CAAC,WAAW;AAGd,QAAM,cAAc,YAAY,MAAM;AACpC,aAAS,gCAAO,UAAS,QAAQ;AAAA,KAChC,CAAC,OAAO;AAEX,6CACG,KAAD;AAAA,IAAK,IAAI;AAAA,IAAG,IAAI;AAAA,yCACb,YAAD;AAAA,IAAY,SAAQ;AAAA,KAAS,kDAC5B,cAAD;AAAA,IACE,WAAW,QAAQ;AAAA,IACnB,UAAQ;AAAA,IACR,WAAW;AAAA,IACX,sBAAoB;AAAA,IACpB,cAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO,wBAAS;AAAA,IAChB,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,CAAC,QAAQ,EAAE,mDACtB,kBAAD;AAAA,MACE,6CACG,UAAD;AAAA,QACE,0CAAO,0BAAD;AAAA,UAA0B,UAAS;AAAA;AAAA,QACzC,iDAAc,cAAD;AAAA,UAAc,UAAS;AAAA;AAAA,QACpC,SAAS;AAAA;AAAA,MAGb,OAAO;AAAA;AAAA,IAGX,MAAK;AAAA,IACL,+CAAY,gBAAD;AAAA,MAAgB,eAAY;AAAA;AAAA,IACvC,aAAa,gDAAW,WAAD;AAAA,SAAe;AAAA,MAAQ,SAAQ;AAAA;AAAA;AAAA;;AChE9D,MAAMA,cAAY,WAAW;AAAA,EAC3B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA;AAAA;MAID,eAAe,CAAC,EAAE,OAAO,OAAO,eAAsB;AACjE,QAAM,UAAUA;AAEhB,QAAM,eAAe,YACnB,CAAC,UAA+C;AAC9C,aAAS,MAAM,OAAO;AAAA,KAExB,CAAC;AAGH,6CACG,KAAD;AAAA,IAAK,IAAI;AAAA,IAAG,IAAI;AAAA,yCACb,kBAAD;AAAA,IACE,6CACG,QAAD;AAAA,MACE,SAAS;AAAA,MACT,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAM;AAAA;AAAA,IAGV;AAAA,IACA,WAAW,QAAQ;AAAA;AAAA;;6BCDS;AAAA,EAClC,eAAe;AAAA,GAYS;AACxB,QAAM,WAAW;AACjB,QAAM,QAAQ,QACZ,MACG,GAAG,MAAM,SAAS,QAAQ,EAAE,YAAY,GAAG,mBAAmB,WAC7D,IAUJ,CAAC,SAAS;AAIZ,QAAM,CAAC,iBAAiB,sBAAsB,SAAuB,MAAG;AApF1E;AAqFK,kBAAM,QAAQ,MAAM,kBACjB,MAAM,iBACN,mDAAc,mBAAd,YAAgC,IAClC,IAAI,OAAK,eAAe;AAAA;AAE5B,QAAM,CAAC,UAAU,eAAe,SAAiB,MAAG;AA1FtD;AA2FI,kBAAO,MAAM,aAAa,WACtB,cAAc,MAAM,YACpB,mDAAc,aAAd,YAA0B,OAAO;AAAA;AAEvC,QAAM,CAAC,mBAAmB,wBAAwB,SAEhD,MACA,MAAM,QAAQ,MAAM,qBAChB,MAAM,oBACN,6CAAc;AAEpB,QAAM,CAAC,eAAe,oBAAoB,SAA+B,MAAG;AAtG9E;AAuGK,uBAAM,QAAQ,MAAM,iBACjB,MAAM,gBACN,6CAAc,kBAFjB,mBAGE,IAAI,OAAK,EAAE,kBAAkB;AAAA;AAElC,QAAM,CAAC,gBAAgB,qBAAqB,SAAkB,MAAG;AA5GnE;AA6GI,kBAAO,MAAM,mBAAmB,WAC5B,MAAM,mBAAmB,SACzB,mDAAc,mBAAd,YAAgC;AAAA;AAEtC,QAAM,CAAC,gBAAgB,qBAAqB,SAAkB,MAAG;AAjHnE;AAkHI,kBAAO,MAAM,mBAAmB,WAC5B,MAAM,mBAAmB,SACzB,mDAAc,mBAAd,YAAgC;AAAA;AAEtC,QAAM,CAAC,WAAW,gBAAgB,SAAoB,MAAG;AAtH3D;AAuHI,kBAAO,MAAM,cAAc,WACvB,MAAM,YACN,mDAAc,cAAd,YAA2B,UAAU;AAAA;AAE3C,QAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAG;AA3H7D;AA4HI,kBAAO,MAAM,gBAAgB,WACzB,MAAM,gBAAgB,SACtB,mDAAc,gBAAd,YAA6B;AAAA;AAEnC,QAAM,oBAAoB,YACxB,MAAM,eAAe,OAAK,CAAC,IAC3B,CAAC;AAIH,QAAM,kBAAkB,YAAY,SAAS;AAC7C,YAAU,MAAM;AAEd,QAAI,SAAS,WAAW,iBAAiB;AACvC;AAAA;AAGF,QAAI,MAAM,QAAQ,MAAM,iBAAiB;AACvC,yBAAmB,MAAM,eAAe,IAAI,OAAK,eAAe;AAAA;AAGlE,QAAI,OAAO,MAAM,aAAa,UAAU;AACtC,kBAAY,cAAc,MAAM;AAAA;AAGlC,QAAI,MAAM,QAAQ,MAAM,gBAAgB;AACtC,uBAAiB,MAAM;AAAA;AAGzB,QAAI,MAAM,QAAQ,MAAM,oBAAoB;AAC1C,2BAAqB,MAAM;AAAA;AAG7B,QAAI,OAAO,MAAM,mBAAmB,UAAU;AAC5C,wBAAkB,MAAM,mBAAmB;AAAA;AAG7C,QAAI,OAAO,MAAM,mBAAmB,UAAU;AAC5C,wBAAkB,MAAM,mBAAmB;AAAA;AAG7C,QAAI,OAAO,MAAM,cAAc,UAAU;AACvC,mBAAa,MAAM;AAAA;AAGrB,QAAI,OAAO,MAAM,gBAAgB,UAAU;AACzC,qBAAe,MAAM,gBAAgB;AAAA;AAAA,KAEtC;AAAA,IACD;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,yBAAyB,YAC7B,gBAAgB,IAAI,OAAK,mBAAmB;AAG9C,YAAU,MAAM;AACd,UAAM,iBAAiB,gBAAgB,IAAI,OAAK,mBAAmB;AACnE,UAAM,YAAY,GAAG,UACnB;AAAA,MACE;AAAA,MACA,UAAU,SAAS,YAAY,WAAW;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OAEF,EAAE,aAAa,YAAY,gBAAgB;AAE7C,UAAM,SAAS,GAAG,OAAO,SAAS,WAAW;AAQ7C,QACE,CAAC,0BACA,eAAe,WAAW,uBAAuB,UAChD,eAAe,MAAM,CAAC,GAAG,MAAM,MAAM,uBAAuB,KAC9D;AACA,aAAO,QAAQ,aAAa,MAAM,SAAS,OAAO;AAAA,WAC7C;AACL,aAAO,QAAQ,UAAU,MAAM,SAAS,OAAO;AAAA;AAAA,KAEhD;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAIJ,uBAAuB,OAAuB;AAC5C,SAAO,UAAU,WAAM,OAAO,oBAAoB,OAAO;AAAA;;AClN3D,MAAM,YAAY,WAAW;AAAU,EACrC,SAAS;AAAA,IACP,WAAW;AAAA;AAAA,EAEb,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA;AAAA,EAEb,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,EAEb,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,EAEb,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW;AAAA,MACT,eAAe;AAAA;AAAA;AAAA,EAGnB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,SAAS,MAAM,QAAQ;AAAA,IACvB,cAAc;AAAA,KACb,MAAM,YAAY,GAAG,QAAQ;AAAA,MAC5B,SAAS;AAAA;AAAA,KAEV,MAAM,YAAY,KAAK,QAAQ;AAAA,MAC9B,qBAAqB;AAAA;AAAA,KAEtB,MAAM,YAAY,KAAK,QAAQ;AAAA,MAC9B,qBAAqB;AAAA;AAAA,KAEtB,MAAM,YAAY,KAAK,QAAQ;AAAA,MAC9B,qBAAqB;AAAA;AAAA;AAAA;MAKd,mBAAmB,CAAC;AAAA,EAC/B,gBAAgB;AAAA,EAChB;AAAA,MAaI;AACJ,QAAM,WAAW;AACjB,QAAM,UAAU;AAChB,QAAM,qBAAqB,YAAY;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB,EAAE;AAC1B,QAAM,YAAY;AAClB,QAAM,cAAc,YAClB,CAAC,MAAkB,UAA+B;AAzItD;AA0IM,UAAM,iBAAiB,eAAe,KAAK;AAE3C,QAAI,MAAM,UAAU;AAClB,YAAM,OAAO,mBAAmB;AAAA,QAC9B,MAAM,eAAe,KAAK,kBAAkB;AAAA,QAC5C,WAAW,eAAe,UAAU,kBAAkB;AAAA,QACtD,MAAM,eAAe;AAAA;AAGvB,gBAAU,aACR,SACA,WAAK,UAAL,YAAc,qBAAqB,iBACnC,EAAE,YAAY,EAAE,IAAI;AAEtB,eAAS;AAAA,WACJ;AACL,gBAAU,aACR,SACA,WAAK,UAAL,YAAc,qBAAqB;AAErC,yBAAmB,CAAC;AAAA;AAAA,KAGxB,CAAC,oBAAoB,UAAU,oBAAoB;AAGrD,6CACG,MAAD;AAAA,IAAM,SAAQ;AAAA,yCACX,QAAD;AAAA,IACE,OAAM;AAAA,IACN,UAAU,gBAAgB,IAAI,OAAK,qBAAqB,IAAI,KAAK;AAAA,0CAElE,SAAD;AAAA,IAAS,SAAO;AAAA,IAAC,WAAW,QAAQ;AAAA,yCACjC,eAAD;AAAA,IACE,oDACG,cAAD;AAAA,MACE,OAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,2CAEf,gBAAD,OAAkB;AAAA,yCAIrB,eAAD,MAAe,gHAKhB,MAAD;AAAA,IAAM,WAAS;AAAA,IAAC,YAAW;AAAA,IAAU,WAAW,QAAQ;AAAA,KACrD,mDACE,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAI;AAAA,IAAI,IAAI;AAAA,IAAG,WAAW,QAAQ;AAAA,yCAC1C,gBAAD;AAAA,IAAgB,OAAO;AAAA,IAAU,UAAU;AAAA,0CAC1C,qBAAD;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,0CAEX,yBAAD;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,0CAED,iBAAD;AAAA,IAAiB,OAAO;AAAA,IAAW,UAAU;AAAA,0CAC5C,cAAD;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAM;AAAA,0CAEP,cAAD;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAM;AAAA,2CAIX,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAE;AAAA,IAAC,WAAW,QAAQ;AAAA,yCAC9B,OAAD;AAAA,IAAO,WAAW,QAAQ;AAAA,yCACvB,YAAD;AAAA,IACE,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,WAAW,QAAQ;AAAA,yCAElB,YAAD;AAAA,IAAY,WAAU;AAAA,MAAS,sJAIhC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,OACE,iBAAiB,cAAc,SAAS,IACpC,gBACA;AAAA,IAEN,WACE,qBAAqB,kBAAkB,SAAS,IAC5C,oBACA;AAAA,IAEN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,QAAQ;AAAA,IACnB,MAAK;AAAA;AAAA;;;;"}

package/dist/esm/{index-83ed5e32.esm.js → index-750fc596.esm.js}

@@ -1,12 +1,12 @@
 import { getEntityName, parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import { InfoCard } from '@backstage/core-components';
-import { useRouteRef } from '@backstage/core-plugin-api';
-import { useEntity } from '@backstage/plugin-catalog-react';
+import { useRouteRef, useAnalytics } from '@backstage/core-plugin-api';
+import { useEntity, formatEntityRefTitle } from '@backstage/plugin-catalog-react';
 import { makeStyles } from '@material-ui/core';
 import qs from 'qs';
 import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router';
-import { A as ALL_RELATION_PAIRS, D as Direction, c as catalogEntityRouteRef, a as catalogGraphRouteRef, E as EntityRelationsGraph } from './index-330c5db8.esm.js';
+import { A as ALL_RELATION_PAIRS, D as Direction, c as catalogEntityRouteRef, a as catalogGraphRouteRef, E as EntityRelationsGraph } from './index-68fb0e4e.esm.js';
 import 'classnames';
 import '@material-ui/core/styles/makeStyles';
 import '@material-ui/core/styles';
@@ -15,7 +15,7 @@ import 'react-use';
 import 'p-limit';
 
 const useStyles = makeStyles({
-  card: ({height}) => ({
+  card: ({ height }) => ({
     display: "flex",
     flexDirection: "column",
     maxHeight: height,
@@ -39,22 +39,25 @@ const CatalogGraphCard = ({
   title = "Relations",
   zoom = "enable-on-click"
 }) => {
-  const {entity} = useEntity();
+  const { entity } = useEntity();
   const entityName = getEntityName(entity);
   const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);
   const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);
   const navigate = useNavigate();
-  const classes = useStyles({height});
+  const classes = useStyles({ height });
+  const analytics = useAnalytics();
   const onNodeClick = useCallback((node, _) => {
+    var _a;
     const nodeEntityName = parseEntityRef(node.id);
     const path = catalogEntityRoute({
       kind: nodeEntityName.kind.toLocaleLowerCase("en-US"),
       namespace: nodeEntityName.namespace.toLocaleLowerCase("en-US"),
       name: nodeEntityName.name
     });
+    analytics.captureEvent("click", (_a = node.title) != null ? _a : formatEntityRefTitle(nodeEntityName), { attributes: { to: path } });
     navigate(path);
-  }, [catalogEntityRoute, navigate]);
-  const catalogGraphParams = qs.stringify({rootEntityRefs: [stringifyEntityRef(entity)]}, {arrayFormat: "brackets", addQueryPrefix: true});
+  }, [catalogEntityRoute, navigate, analytics]);
+  const catalogGraphParams = qs.stringify({ rootEntityRefs: [stringifyEntityRef(entity)] }, { arrayFormat: "brackets", addQueryPrefix: true });
   const catalogGraphUrl = `${catalogGraphRoute()}${catalogGraphParams}`;
   return /* @__PURE__ */ React.createElement(InfoCard, {
     title,
@@ -81,4 +84,4 @@ const CatalogGraphCard = ({
 };
 
 export { CatalogGraphCard };
-//# sourceMappingURL=index-83ed5e32.esm.js.map
+//# sourceMappingURL=index-750fc596.esm.js.map

package/dist/esm/index-750fc596.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-750fc596.esm.js","sources":["../../src/components/CatalogGraphCard/CatalogGraphCard.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport {\n  getEntityName,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { InfoCard, InfoCardVariants } from '@backstage/core-components';\nimport { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  formatEntityRefTitle,\n  useEntity,\n} from '@backstage/plugin-catalog-react';\nimport { makeStyles, Theme } from '@material-ui/core';\nimport qs from 'qs';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport { catalogEntityRouteRef, catalogGraphRouteRef } from '../../routes';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  RelationPairs,\n} from '../EntityRelationsGraph';\n\nconst useStyles = makeStyles<Theme, { height: number | undefined }>({\n  card: ({ height }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    maxHeight: height,\n    minHeight: height,\n  }),\n  graph: {\n    flex: 1,\n    minHeight: 0,\n  },\n});\n\nexport const CatalogGraphCard = ({\n  variant = 'gridItem',\n  relationPairs = ALL_RELATION_PAIRS,\n  maxDepth = 1,\n  unidirectional = true,\n  mergeRelations = true,\n  kinds,\n  relations,\n  direction = Direction.LEFT_RIGHT,\n  height,\n  title = 'Relations',\n  zoom = 'enable-on-click',\n}: {\n  variant?: InfoCardVariants;\n  relationPairs?: RelationPairs;\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  direction?: Direction;\n  height?: number;\n  title?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n}) => {\n  const { entity } = useEntity();\n  const entityName = getEntityName(entity);\n  const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);\n  const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);\n  const navigate = useNavigate();\n  const classes = useStyles({ height });\n  const analytics = useAnalytics();\n\n  const onNodeClick = useCallback(\n    (node: EntityNode, _: MouseEvent<unknown>) => {\n      const nodeEntityName = parseEntityRef(node.id);\n      const path = catalogEntityRoute({\n        kind: nodeEntityName.kind.toLocaleLowerCase('en-US'),\n        namespace: nodeEntityName.namespace.toLocaleLowerCase('en-US'),\n        name: nodeEntityName.name,\n      });\n      analytics.captureEvent(\n        'click',\n        node.title ?? formatEntityRefTitle(nodeEntityName),\n        { attributes: { to: path } },\n      );\n      navigate(path);\n    },\n    [catalogEntityRoute, navigate, analytics],\n  );\n\n  const catalogGraphParams = qs.stringify(\n    { rootEntityRefs: [stringifyEntityRef(entity)] },\n    { arrayFormat: 'brackets', addQueryPrefix: true },\n  );\n  const catalogGraphUrl = `${catalogGraphRoute()}${catalogGraphParams}`;\n\n  return (\n    <InfoCard\n      title={title}\n      cardClassName={classes.card}\n      variant={variant}\n      noPadding\n      deepLink={{\n        title: 'View graph',\n        link: catalogGraphUrl,\n      }}\n    >\n      <EntityRelationsGraph\n        rootEntityNames={entityName}\n        maxDepth={maxDepth}\n        unidirectional={unidirectional}\n        mergeRelations={mergeRelations}\n        kinds={kinds}\n        relations={relations}\n        direction={direction}\n        onNodeClick={onNodeClick}\n        className={classes.graph}\n        relationPairs={relationPairs}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuCA,MAAM,YAAY,WAAkD;AAAA,EAClE,MAAM,CAAC,EAAE;AAAc,IACrB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA;AAAA,EAEb,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA;AAAA;MAIF,mBAAmB,CAAC;AAAA,EAC/B,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,YAAY,UAAU;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,MAaH;AACJ,QAAM,EAAE,WAAW;AACnB,QAAM,aAAa,cAAc;AACjC,QAAM,qBAAqB,YAAY;AACvC,QAAM,oBAAoB,YAAY;AACtC,QAAM,WAAW;AACjB,QAAM,UAAU,UAAU,EAAE;AAC5B,QAAM,YAAY;AAElB,QAAM,cAAc,YAClB,CAAC,MAAkB,MAA2B;AAtFlD;AAuFM,UAAM,iBAAiB,eAAe,KAAK;AAC3C,UAAM,OAAO,mBAAmB;AAAA,MAC9B,MAAM,eAAe,KAAK,kBAAkB;AAAA,MAC5C,WAAW,eAAe,UAAU,kBAAkB;AAAA,MACtD,MAAM,eAAe;AAAA;AAEvB,cAAU,aACR,SACA,WAAK,UAAL,YAAc,qBAAqB,iBACnC,EAAE,YAAY,EAAE,IAAI;AAEtB,aAAS;AAAA,KAEX,CAAC,oBAAoB,UAAU;AAGjC,QAAM,qBAAqB,GAAG,UAC5B,EAAE,gBAAgB,CAAC,mBAAmB,YACtC,EAAE,aAAa,YAAY,gBAAgB;AAE7C,QAAM,kBAAkB,GAAG,sBAAsB;AAEjD,6CACG,UAAD;AAAA,IACE;AAAA,IACA,eAAe,QAAQ;AAAA,IACvB;AAAA,IACA,WAAS;AAAA,IACT,UAAU;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA;AAAA,yCAGP,sBAAD;AAAA,IACE,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA;AAAA;;;;"}

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-export { A as ALL_RELATION_PAIRS, C as CatalogGraphPage, D as Direction, b as EntityCatalogGraphCard, E as EntityRelationsGraph, d as catalogGraphPlugin, a as catalogGraphRouteRef } from './esm/index-330c5db8.esm.js';
+export { A as ALL_RELATION_PAIRS, C as CatalogGraphPage, D as Direction, b as EntityCatalogGraphCard, E as EntityRelationsGraph, d as catalogGraphPlugin, a as catalogGraphRouteRef } from './esm/index-68fb0e4e.esm.js';
 import '@backstage/catalog-model';
 import '@backstage/core-components';
 import '@backstage/core-plugin-api';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-graph",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -21,30 +21,31 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/catalog-client": "^0.5.0",
-    "@backstage/catalog-model": "^0.9.4",
-    "@backstage/core-components": "^0.7.0",
-    "@backstage/core-plugin-api": "^0.1.10",
-    "@backstage/plugin-catalog-react": "^0.6.0",
-    "@backstage/theme": "^0.2.11",
+    "@backstage/catalog-client": "^0.5.3",
+    "@backstage/catalog-model": "^0.9.7",
+    "@backstage/core-components": "^0.8.2",
+    "@backstage/core-plugin-api": "^0.4.0",
+    "@backstage/plugin-catalog-react": "^0.6.8",
+    "@backstage/theme": "^0.2.14",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
-    "@types/react": "*",
     "classnames": "^2.3.1",
     "lodash": "^4.17.15",
     "p-limit": "^3.1.0",
     "qs": "^6.9.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",
     "react-use": "^17.2.4"
   },
+  "peerDependencies": {
+    "@types/react": "^16.13.1 || ^17.0.0",
+    "react": "^16.13.1 || ^17.0.0"
+  },
   "devDependencies": {
-    "@backstage/cli": "^0.7.16",
-    "@backstage/core-app-api": "^0.1.17",
-    "@backstage/dev-utils": "^0.2.12",
-    "@backstage/test-utils": "^0.1.19",
+    "@backstage/cli": "^0.10.3",
+    "@backstage/core-app-api": "^0.3.0",
+    "@backstage/dev-utils": "^0.2.15",
+    "@backstage/test-utils": "^0.2.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
@@ -54,5 +55,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "1b02df9f467ea11a4571df46faabe655c3ee10c8"
+  "gitHead": "b315430f9dfcfa19ab0dd90f5b4ac6904938fba7"
 }

package/dist/esm/index-83ed5e32.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-83ed5e32.esm.js","sources":["../../src/components/CatalogGraphCard/CatalogGraphCard.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 */\nimport {\n  getEntityName,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { InfoCard, InfoCardVariants } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { makeStyles, Theme } from '@material-ui/core';\nimport qs from 'qs';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport { catalogEntityRouteRef, catalogGraphRouteRef } from '../../routes';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  RelationPairs,\n} from '../EntityRelationsGraph';\n\nconst useStyles = makeStyles<Theme, { height: number | undefined }>({\n  card: ({ height }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    maxHeight: height,\n    minHeight: height,\n  }),\n  graph: {\n    flex: 1,\n    minHeight: 0,\n  },\n});\n\nexport const CatalogGraphCard = ({\n  variant = 'gridItem',\n  relationPairs = ALL_RELATION_PAIRS,\n  maxDepth = 1,\n  unidirectional = true,\n  mergeRelations = true,\n  kinds,\n  relations,\n  direction = Direction.LEFT_RIGHT,\n  height,\n  title = 'Relations',\n  zoom = 'enable-on-click',\n}: {\n  variant?: InfoCardVariants;\n  relationPairs?: RelationPairs;\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  direction?: Direction;\n  height?: number;\n  title?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n}) => {\n  const { entity } = useEntity();\n  const entityName = getEntityName(entity);\n  const catalogEntityRoute = useRouteRef(catalogEntityRouteRef);\n  const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);\n  const navigate = useNavigate();\n  const classes = useStyles({ height });\n\n  const onNodeClick = useCallback(\n    (node: EntityNode, _: MouseEvent<unknown>) => {\n      const nodeEntityName = parseEntityRef(node.id);\n      const path = catalogEntityRoute({\n        kind: nodeEntityName.kind.toLocaleLowerCase('en-US'),\n        namespace: nodeEntityName.namespace.toLocaleLowerCase('en-US'),\n        name: nodeEntityName.name,\n      });\n      navigate(path);\n    },\n    [catalogEntityRoute, navigate],\n  );\n\n  const catalogGraphParams = qs.stringify(\n    { rootEntityRefs: [stringifyEntityRef(entity)] },\n    { arrayFormat: 'brackets', addQueryPrefix: true },\n  );\n  const catalogGraphUrl = `${catalogGraphRoute()}${catalogGraphParams}`;\n\n  return (\n    <InfoCard\n      title={title}\n      cardClassName={classes.card}\n      variant={variant}\n      noPadding\n      deepLink={{\n        title: 'View graph',\n        link: catalogGraphUrl,\n      }}\n    >\n      <EntityRelationsGraph\n        rootEntityNames={entityName}\n        maxDepth={maxDepth}\n        unidirectional={unidirectional}\n        mergeRelations={mergeRelations}\n        kinds={kinds}\n        relations={relations}\n        direction={direction}\n        onNodeClick={onNodeClick}\n        className={classes.graph}\n        relationPairs={relationPairs}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,YAAY,WAAkD;AAAA,EAClE,MAAM,CAAC,CAAE;AAAc,IACrB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA;AAAA,EAEb,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA;AAAA;MAIF,mBAAmB,CAAC;AAAA,EAC/B,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,YAAY,UAAU;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,MAaH;AACJ,QAAM,CAAE,UAAW;AACnB,QAAM,aAAa,cAAc;AACjC,QAAM,qBAAqB,YAAY;AACvC,QAAM,oBAAoB,YAAY;AACtC,QAAM,WAAW;AACjB,QAAM,UAAU,UAAU,CAAE;AAE5B,QAAM,cAAc,YAClB,CAAC,MAAkB,MAA2B;AAC5C,UAAM,iBAAiB,eAAe,KAAK;AAC3C,UAAM,OAAO,mBAAmB;AAAA,MAC9B,MAAM,eAAe,KAAK,kBAAkB;AAAA,MAC5C,WAAW,eAAe,UAAU,kBAAkB;AAAA,MACtD,MAAM,eAAe;AAAA;AAEvB,aAAS;AAAA,KAEX,CAAC,oBAAoB;AAGvB,QAAM,qBAAqB,GAAG,UAC5B,CAAE,gBAAgB,CAAC,mBAAmB,WACtC,CAAE,aAAa,YAAY,gBAAgB;AAE7C,QAAM,kBAAkB,GAAG,sBAAsB;AAEjD,6CACG,UAAD;AAAA,IACE;AAAA,IACA,eAAe,QAAQ;AAAA,IACvB;AAAA,IACA,WAAS;AAAA,IACT,UAAU;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA;AAAA,yCAGP,sBAAD;AAAA,IACE,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,QAAQ;AAAA,IACnB;AAAA,IACA;AAAA;AAAA;;;;"}