@backstage/plugin-catalog-graph 0.4.4-next.1 → 0.4.5-next.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @backstage/plugin-catalog-graph
 
+## 0.4.5-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-compat-api@0.2.5-next.0
+  - @backstage/catalog-model@1.5.0-next.0
+  - @backstage/core-components@0.14.5-next.0
+  - @backstage/catalog-client@1.6.5-next.0
+  - @backstage/plugin-catalog-react@1.11.4-next.0
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/frontend-plugin-api@0.6.5-next.0
+  - @backstage/types@1.1.1
+
+## 0.4.4
+
+### Patch Changes
+
+- abfbcfc: Updated dependency `@testing-library/react` to `^15.0.0`.
+- cb1e3b0: Updated dependency `@testing-library/dom` to `^10.0.0`.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.11.3
+  - @backstage/core-compat-api@0.2.4
+  - @backstage/core-components@0.14.4
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/frontend-plugin-api@0.6.4
+  - @backstage/catalog-client@1.6.4
+  - @backstage/catalog-model@1.4.5
+  - @backstage/types@1.1.1
+
 ## 0.4.4-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-graph",
-  "version": "0.4.4-next.1",
+  "version": "0.4.5-next.0",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/alpha.esm.js

@@ -2,18 +2,10 @@ import React from 'react';
 import { createSchemaFromZod, createPageExtension, createPlugin } from '@backstage/frontend-plugin-api';
 import { compatWrapper, convertLegacyRouteRef } from '@backstage/core-compat-api';
 import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
-import { c as catalogGraphRouteRef, D as Direction, a as catalogEntityRouteRef } from './esm/routes-B7pnW8AZ.esm.js';
+import { catalogGraphRouteRef, catalogEntityRouteRef } from './routes.esm.js';
+import './components/EntityRelationsGraph/EntityRelationsGraph.esm.js';
 import '@backstage/catalog-model';
-import '@backstage/core-components';
-import '@backstage/core-plugin-api';
-import '@material-ui/core/CircularProgress';
-import '@material-ui/core/styles';
-import 'classnames';
-import '@material-ui/core/styles/makeStyles';
-import '@backstage/plugin-catalog-react';
-import '@material-ui/core/SvgIcon';
-import 'react-use/esm/useDebounce';
-import 'react-use/esm/useAsyncFn';
+import { Direction } from './components/EntityRelationsGraph/types.esm.js';
 
 function getEntityGraphRelationsConfigSchema(z) {
   return z.object({
@@ -40,7 +32,7 @@ const CatalogGraphEntityCard = createEntityCardExtension({
       // For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
     }).merge(getEntityGraphRelationsConfigSchema(z))
   ),
-  loader: async ({ config: { filter, ...props } }) => import('./esm/index-Dy8_Ufah.esm.js').then(
+  loader: async ({ config: { filter, ...props } }) => import('./components/CatalogGraphCard/index.esm.js').then(
     (m) => compatWrapper(/* @__PURE__ */ React.createElement(m.CatalogGraphCard, { ...props }))
   )
 });
@@ -65,7 +57,7 @@ const CatalogGraphPage = createPageExtension({
       }).merge(getEntityGraphRelationsConfigSchema(z)).optional()
     })
   ),
-  loader: ({ config: { path, ...props } }) => import('./esm/index-CyVoUbSq.esm.js').then(
+  loader: ({ config: { path, ...props } }) => import('./components/CatalogGraphPage/index.esm.js').then(
     (m) => compatWrapper(/* @__PURE__ */ React.createElement(m.CatalogGraphPage, { ...props }))
   )
 });

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport {\n  createPageExtension,\n  createPlugin,\n  createSchemaFromZod,\n} from '@backstage/frontend-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';\nimport { Direction } from './components';\n\nfunction getEntityGraphRelationsConfigSchema(\n  z: Parameters<Parameters<typeof createSchemaFromZod>[0]>[0],\n) {\n  // Mapping EntityRelationsGraphProps to config\n  // The classname and render functions are configurable only via extension overrides\n  return z.object({\n    kinds: z.array(z.string()).optional(),\n    relations: z.array(z.string()).optional(),\n    maxDepth: z.number().optional(),\n    unidirectional: z.boolean().optional(),\n    mergeRelations: z.boolean().optional(),\n    direction: z.nativeEnum(Direction).optional(),\n    relationPairs: z.array(z.tuple([z.string(), z.string()])).optional(),\n    zoom: z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n    curve: z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n  });\n}\n\nconst CatalogGraphEntityCard = createEntityCardExtension({\n  name: 'relations',\n  configSchema: createSchemaFromZod(z =>\n    z\n      .object({\n        // Filter is a config required to all entity cards\n        filter: z.string().optional(),\n        title: z.string().optional(),\n        height: z.number().optional(),\n        // Skipping a \"variant\" config for now, defaulting to \"gridItem\" in the component\n        // For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252\n      })\n      .merge(getEntityGraphRelationsConfigSchema(z)),\n  ),\n  loader: async ({ config: { filter, ...props } }) =>\n    import('./components/CatalogGraphCard').then(m =>\n      compatWrapper(<m.CatalogGraphCard {...props} />),\n    ),\n});\n\nconst CatalogGraphPage = createPageExtension({\n  defaultPath: '/catalog-graph',\n  routeRef: convertLegacyRouteRef(catalogGraphRouteRef),\n  configSchema: createSchemaFromZod(z =>\n    z.object({\n      // Path is a default config required to all pages\n      path: z.string().default('/catalog-graph'),\n      // Mapping intialState prop to config, these are the initial filter values, as opposed to configuration of the available filter values\n      initialState: z\n        .object({\n          selectedKinds: z.array(z.string()).optional(),\n          selectedRelations: z.array(z.string()).optional(),\n          rootEntityRefs: z.array(z.string()).optional(),\n          maxDepth: z.number().optional(),\n          unidirectional: z.boolean().optional(),\n          mergeRelations: z.boolean().optional(),\n          direction: z.nativeEnum(Direction).optional(),\n          showFilters: z.boolean().optional(),\n          curve: z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n        })\n        .merge(getEntityGraphRelationsConfigSchema(z))\n        .optional(),\n    }),\n  ),\n  loader: ({ config: { path, ...props } }) =>\n    import('./components/CatalogGraphPage').then(m =>\n      compatWrapper(<m.CatalogGraphPage {...props} />),\n    ),\n});\n\nexport default createPlugin({\n  id: 'catalog-graph',\n  routes: {\n    catalogGraph: convertLegacyRouteRef(catalogGraphRouteRef),\n  },\n  externalRoutes: {\n    catalogEntity: convertLegacyRouteRef(catalogEntityRouteRef),\n  },\n  extensions: [CatalogGraphPage, CatalogGraphEntityCard],\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport {\n  createPageExtension,\n  createPlugin,\n  createSchemaFromZod,\n} from '@backstage/frontend-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';\nimport { Direction } from './components';\n\nfunction getEntityGraphRelationsConfigSchema(\n  z: Parameters<Parameters<typeof createSchemaFromZod>[0]>[0],\n) {\n  // Mapping EntityRelationsGraphProps to config\n  // The classname and render functions are configurable only via extension overrides\n  return z.object({\n    kinds: z.array(z.string()).optional(),\n    relations: z.array(z.string()).optional(),\n    maxDepth: z.number().optional(),\n    unidirectional: z.boolean().optional(),\n    mergeRelations: z.boolean().optional(),\n    direction: z.nativeEnum(Direction).optional(),\n    relationPairs: z.array(z.tuple([z.string(), z.string()])).optional(),\n    zoom: z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n    curve: z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n  });\n}\n\nconst CatalogGraphEntityCard = createEntityCardExtension({\n  name: 'relations',\n  configSchema: createSchemaFromZod(z =>\n    z\n      .object({\n        // Filter is a config required to all entity cards\n        filter: z.string().optional(),\n        title: z.string().optional(),\n        height: z.number().optional(),\n        // Skipping a \"variant\" config for now, defaulting to \"gridItem\" in the component\n        // For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252\n      })\n      .merge(getEntityGraphRelationsConfigSchema(z)),\n  ),\n  loader: async ({ config: { filter, ...props } }) =>\n    import('./components/CatalogGraphCard').then(m =>\n      compatWrapper(<m.CatalogGraphCard {...props} />),\n    ),\n});\n\nconst CatalogGraphPage = createPageExtension({\n  defaultPath: '/catalog-graph',\n  routeRef: convertLegacyRouteRef(catalogGraphRouteRef),\n  configSchema: createSchemaFromZod(z =>\n    z.object({\n      // Path is a default config required to all pages\n      path: z.string().default('/catalog-graph'),\n      // Mapping intialState prop to config, these are the initial filter values, as opposed to configuration of the available filter values\n      initialState: z\n        .object({\n          selectedKinds: z.array(z.string()).optional(),\n          selectedRelations: z.array(z.string()).optional(),\n          rootEntityRefs: z.array(z.string()).optional(),\n          maxDepth: z.number().optional(),\n          unidirectional: z.boolean().optional(),\n          mergeRelations: z.boolean().optional(),\n          direction: z.nativeEnum(Direction).optional(),\n          showFilters: z.boolean().optional(),\n          curve: z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n        })\n        .merge(getEntityGraphRelationsConfigSchema(z))\n        .optional(),\n    }),\n  ),\n  loader: ({ config: { path, ...props } }) =>\n    import('./components/CatalogGraphPage').then(m =>\n      compatWrapper(<m.CatalogGraphPage {...props} />),\n    ),\n});\n\nexport default createPlugin({\n  id: 'catalog-graph',\n  routes: {\n    catalogGraph: convertLegacyRouteRef(catalogGraphRouteRef),\n  },\n  externalRoutes: {\n    catalogEntity: convertLegacyRouteRef(catalogEntityRouteRef),\n  },\n  extensions: [CatalogGraphPage, CatalogGraphEntityCard],\n});\n"],"names":[],"mappings":";;;;;;;;;AA8BA,SAAS,oCACP,CACA,EAAA;AAGA,EAAA,OAAO,EAAE,MAAO,CAAA;AAAA,IACd,OAAO,CAAE,CAAA,KAAA,CAAM,EAAE,MAAO,EAAC,EAAE,QAAS,EAAA;AAAA,IACpC,WAAW,CAAE,CAAA,KAAA,CAAM,EAAE,MAAO,EAAC,EAAE,QAAS,EAAA;AAAA,IACxC,QAAU,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,IAC9B,cAAgB,EAAA,CAAA,CAAE,OAAQ,EAAA,CAAE,QAAS,EAAA;AAAA,IACrC,cAAgB,EAAA,CAAA,CAAE,OAAQ,EAAA,CAAE,QAAS,EAAA;AAAA,IACrC,SAAW,EAAA,CAAA,CAAE,UAAW,CAAA,SAAS,EAAE,QAAS,EAAA;AAAA,IAC5C,aAAe,EAAA,CAAA,CAAE,KAAM,CAAA,CAAA,CAAE,MAAM,CAAC,CAAA,CAAE,MAAO,EAAA,EAAG,EAAE,MAAO,EAAC,CAAC,CAAC,EAAE,QAAS,EAAA;AAAA,IACnE,IAAA,EAAM,EAAE,IAAK,CAAA,CAAC,WAAW,UAAY,EAAA,iBAAiB,CAAC,CAAA,CAAE,QAAS,EAAA;AAAA,IAClE,KAAA,EAAO,EAAE,IAAK,CAAA,CAAC,mBAAmB,gBAAgB,CAAC,EAAE,QAAS,EAAA;AAAA,GAC/D,CAAA,CAAA;AACH,CAAA;AAEA,MAAM,yBAAyB,yBAA0B,CAAA;AAAA,EACvD,IAAM,EAAA,WAAA;AAAA,EACN,YAAc,EAAA,mBAAA;AAAA,IAAoB,CAAA,CAAA,KAChC,EACG,MAAO,CAAA;AAAA;AAAA,MAEN,MAAQ,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,MAC5B,KAAO,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,MAC3B,MAAQ,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA;AAAA;AAAA,KAG7B,CAAA,CACA,KAAM,CAAA,mCAAA,CAAoC,CAAC,CAAC,CAAA;AAAA,GACjD;AAAA,EACA,MAAQ,EAAA,OAAO,EAAE,MAAA,EAAQ,EAAE,MAAA,EAAQ,GAAG,KAAA,EAAQ,EAAA,KAC5C,OAAO,4CAA+B,CAAE,CAAA,IAAA;AAAA,IAAK,CAAA,CAAA,KAC3C,8BAAe,KAAA,CAAA,aAAA,CAAA,CAAA,CAAE,kBAAF,EAAoB,GAAG,OAAO,CAAE,CAAA;AAAA,GACjD;AACJ,CAAC,CAAA,CAAA;AAED,MAAM,mBAAmB,mBAAoB,CAAA;AAAA,EAC3C,WAAa,EAAA,gBAAA;AAAA,EACb,QAAA,EAAU,sBAAsB,oBAAoB,CAAA;AAAA,EACpD,YAAc,EAAA,mBAAA;AAAA,IAAoB,CAAA,CAAA,KAChC,EAAE,MAAO,CAAA;AAAA;AAAA,MAEP,IAAM,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAQ,gBAAgB,CAAA;AAAA;AAAA,MAEzC,YAAA,EAAc,EACX,MAAO,CAAA;AAAA,QACN,eAAe,CAAE,CAAA,KAAA,CAAM,EAAE,MAAO,EAAC,EAAE,QAAS,EAAA;AAAA,QAC5C,mBAAmB,CAAE,CAAA,KAAA,CAAM,EAAE,MAAO,EAAC,EAAE,QAAS,EAAA;AAAA,QAChD,gBAAgB,CAAE,CAAA,KAAA,CAAM,EAAE,MAAO,EAAC,EAAE,QAAS,EAAA;AAAA,QAC7C,QAAU,EAAA,CAAA,CAAE,MAAO,EAAA,CAAE,QAAS,EAAA;AAAA,QAC9B,cAAgB,EAAA,CAAA,CAAE,OAAQ,EAAA,CAAE,QAAS,EAAA;AAAA,QACrC,cAAgB,EAAA,CAAA,CAAE,OAAQ,EAAA,CAAE,QAAS,EAAA;AAAA,QACrC,SAAW,EAAA,CAAA,CAAE,UAAW,CAAA,SAAS,EAAE,QAAS,EAAA;AAAA,QAC5C,WAAa,EAAA,CAAA,CAAE,OAAQ,EAAA,CAAE,QAAS,EAAA;AAAA,QAClC,KAAA,EAAO,EAAE,IAAK,CAAA,CAAC,mBAAmB,gBAAgB,CAAC,EAAE,QAAS,EAAA;AAAA,OAC/D,CACA,CAAA,KAAA,CAAM,oCAAoC,CAAC,CAAC,EAC5C,QAAS,EAAA;AAAA,KACb,CAAA;AAAA,GACH;AAAA,EACA,MAAQ,EAAA,CAAC,EAAE,MAAA,EAAQ,EAAE,IAAA,EAAM,GAAG,KAAA,EAAQ,EAAA,KACpC,OAAO,4CAA+B,CAAE,CAAA,IAAA;AAAA,IAAK,CAAA,CAAA,KAC3C,8BAAe,KAAA,CAAA,aAAA,CAAA,CAAA,CAAE,kBAAF,EAAoB,GAAG,OAAO,CAAE,CAAA;AAAA,GACjD;AACJ,CAAC,CAAA,CAAA;AAED,YAAe,YAAa,CAAA;AAAA,EAC1B,EAAI,EAAA,eAAA;AAAA,EACJ,MAAQ,EAAA;AAAA,IACN,YAAA,EAAc,sBAAsB,oBAAoB,CAAA;AAAA,GAC1D;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,aAAA,EAAe,sBAAsB,qBAAqB,CAAA;AAAA,GAC5D;AAAA,EACA,UAAA,EAAY,CAAC,gBAAA,EAAkB,sBAAsB,CAAA;AACvD,CAAC,CAAA;;;;"}

package/dist/{esm/index-Dy8_Ufah.esm.js → components/CatalogGraphCard/CatalogGraphCard.esm.js}

@@ -6,13 +6,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import qs from 'qs';
 import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { A as ALL_RELATION_PAIRS, D as Direction, c as catalogGraphRouteRef, E as EntityRelationsGraph } from './routes-B7pnW8AZ.esm.js';
-import '@material-ui/core/CircularProgress';
-import 'classnames';
-import '@material-ui/core/styles/makeStyles';
-import '@material-ui/core/SvgIcon';
-import 'react-use/esm/useDebounce';
-import 'react-use/esm/useAsyncFn';
+import { catalogGraphRouteRef } from '../../routes.esm.js';
+import { EntityRelationsGraph } from '../EntityRelationsGraph/EntityRelationsGraph.esm.js';
+import { ALL_RELATION_PAIRS } from '../EntityRelationsGraph/relations.esm.js';
+import { Direction } from '../EntityRelationsGraph/types.esm.js';
 
 const useStyles = makeStyles(
   {
@@ -115,4 +112,4 @@ const CatalogGraphCard = (props) => {
 };
 
 export { CatalogGraphCard };
-//# sourceMappingURL=index-Dy8_Ufah.esm.js.map
+//# sourceMappingURL=CatalogGraphCard.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CatalogGraphCard.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 */\n\nimport {\n  getCompoundEntityRef,\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  humanizeEntityRef,\n  useEntity,\n  entityRouteRef,\n} from '@backstage/plugin-catalog-react';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport qs from 'qs';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { catalogGraphRouteRef } from '../../routes';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n} from '../EntityRelationsGraph';\nimport { EntityRelationsGraphProps } from '../EntityRelationsGraph';\n\nconst useStyles = makeStyles<Theme, { height: number | undefined }>(\n  {\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  { name: 'PluginCatalogGraphCatalogGraphCard' },\n);\n\nexport const CatalogGraphCard = (\n  props: Partial<EntityRelationsGraphProps> & {\n    variant?: InfoCardVariants;\n    height?: number;\n    title?: string;\n  },\n) => {\n  const {\n    variant = 'gridItem',\n    relationPairs = ALL_RELATION_PAIRS,\n    maxDepth = 1,\n    unidirectional = true,\n    mergeRelations = true,\n    direction = Direction.LEFT_RIGHT,\n    kinds,\n    relations,\n    height,\n    className,\n    rootEntityNames,\n    onNodeClick,\n    title = 'Relations',\n    zoom = 'enable-on-click',\n  } = props;\n\n  const { entity } = useEntity();\n  const entityName = getCompoundEntityRef(entity);\n  const catalogEntityRoute = useRouteRef(entityRouteRef);\n  const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);\n  const navigate = useNavigate();\n  const classes = useStyles({ height });\n  const analytics = useAnalytics();\n\n  const defaultOnNodeClick = 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.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),\n        { attributes: { to: path } },\n      );\n      navigate(path);\n    },\n    [catalogEntityRoute, navigate, analytics],\n  );\n\n  const catalogGraphParams = qs.stringify(\n    {\n      rootEntityRefs: [stringifyEntityRef(entity)],\n      maxDepth: maxDepth,\n      unidirectional,\n      mergeRelations,\n      selectedKinds: kinds,\n      selectedRelations: relations,\n      direction,\n    },\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        {...props}\n        rootEntityNames={rootEntityNames || entityName}\n        onNodeClick={onNodeClick || defaultOnNodeClick}\n        className={className || classes.graph}\n        maxDepth={maxDepth}\n        unidirectional={unidirectional}\n        mergeRelations={mergeRelations}\n        direction={direction}\n        relationPairs={relationPairs}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CatalogGraphCard/index.esm.js

@@ -0,0 +1,2 @@
+export { CatalogGraphCard } from './CatalogGraphCard.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/components/CatalogGraphCard/index.esm.js.map

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

package/dist/components/CatalogGraphPage/CatalogGraphPage.esm.js

@@ -0,0 +1,209 @@
+import { parseEntityRef } from '@backstage/catalog-model';
+import { Page, Header, Content, ContentHeader, SupportButton } from '@backstage/core-components';
+import { useRouteRef, useAnalytics } from '@backstage/core-plugin-api';
+import { entityRouteRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { EntityRelationsGraph } from '../EntityRelationsGraph/EntityRelationsGraph.esm.js';
+import { ALL_RELATION_PAIRS } from '../EntityRelationsGraph/relations.esm.js';
+import { CurveFilter } from './CurveFilter.esm.js';
+import { DirectionFilter } from './DirectionFilter.esm.js';
+import { MaxDepthFilter } from './MaxDepthFilter.esm.js';
+import { SelectedKindsFilter } from './SelectedKindsFilter.esm.js';
+import { SelectedRelationsFilter } from './SelectedRelationsFilter.esm.js';
+import { SwitchFilter } from './SwitchFilter.esm.js';
+import { useCatalogGraphPage } from './useCatalogGraphPage.esm.js';
+
+const useStyles = makeStyles(
+  (theme) => ({
+    content: {
+      minHeight: 0
+    },
+    container: {
+      height: "100%",
+      maxHeight: "100%",
+      minHeight: 0
+    },
+    fullHeight: {
+      maxHeight: "100%",
+      display: "flex",
+      minHeight: 0
+    },
+    graphWrapper: {
+      position: "relative",
+      flex: 1,
+      minHeight: 0,
+      display: "flex"
+    },
+    graph: {
+      flex: 1,
+      minHeight: 0
+    },
+    legend: {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      padding: theme.spacing(1),
+      "& .icon": {
+        verticalAlign: "bottom"
+      }
+    },
+    filters: {
+      display: "grid",
+      gridGap: theme.spacing(1),
+      gridAutoRows: "auto",
+      [theme.breakpoints.up("lg")]: {
+        display: "block"
+      },
+      [theme.breakpoints.only("md")]: {
+        gridTemplateColumns: "repeat(3, 1fr)"
+      },
+      [theme.breakpoints.only("sm")]: {
+        gridTemplateColumns: "repeat(2, 1fr)"
+      },
+      [theme.breakpoints.down("xs")]: {
+        gridTemplateColumns: "repeat(1, 1fr)"
+      }
+    }
+  }),
+  { name: "PluginCatalogGraphCatalogGraphPage" }
+);
+const CatalogGraphPage = (props) => {
+  const { relationPairs = ALL_RELATION_PAIRS, initialState } = props;
+  const navigate = useNavigate();
+  const classes = useStyles();
+  const catalogEntityRoute = useRouteRef(entityRouteRef);
+  const {
+    maxDepth,
+    setMaxDepth,
+    selectedKinds,
+    setSelectedKinds,
+    selectedRelations,
+    setSelectedRelations,
+    unidirectional,
+    setUnidirectional,
+    mergeRelations,
+    setMergeRelations,
+    direction,
+    setDirection,
+    curve,
+    setCurve,
+    rootEntityNames,
+    setRootEntityNames,
+    showFilters,
+    toggleShowFilters
+  } = useCatalogGraphPage({ initialState });
+  const analytics = useAnalytics();
+  const onNodeClick = useCallback(
+    (node, event) => {
+      var _a, _b;
+      const nodeEntityName = parseEntityRef(node.id);
+      if (event.shiftKey) {
+        const path = catalogEntityRoute({
+          kind: nodeEntityName.kind.toLocaleLowerCase("en-US"),
+          namespace: nodeEntityName.namespace.toLocaleLowerCase("en-US"),
+          name: nodeEntityName.name
+        });
+        analytics.captureEvent(
+          "click",
+          (_a = node.entity.metadata.title) != null ? _a : humanizeEntityRef(nodeEntityName),
+          { attributes: { to: path } }
+        );
+        navigate(path);
+      } else {
+        analytics.captureEvent(
+          "click",
+          (_b = node.entity.metadata.title) != null ? _b : humanizeEntityRef(nodeEntityName)
+        );
+        setRootEntityNames([nodeEntityName]);
+      }
+    },
+    [catalogEntityRoute, navigate, setRootEntityNames, analytics]
+  );
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Catalog Graph",
+      subtitle: rootEntityNames.map((e) => humanizeEntityRef(e)).join(", ")
+    }
+  ), /* @__PURE__ */ React.createElement(Content, { stretch: true, className: classes.content }, /* @__PURE__ */ React.createElement(
+    ContentHeader,
+    {
+      titleComponent: /* @__PURE__ */ React.createElement(
+        ToggleButton,
+        {
+          value: "show filters",
+          selected: showFilters,
+          onChange: () => toggleShowFilters()
+        },
+        /* @__PURE__ */ React.createElement(FilterListIcon, null),
+        " Filters"
+      )
+    },
+    /* @__PURE__ */ React.createElement(SupportButton, null, "Start tracking your component in by adding it to the software catalog.")
+  ), /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "stretch", className: classes.container }, showFilters && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, lg: 2, className: classes.filters }, /* @__PURE__ */ React.createElement(MaxDepthFilter, { value: maxDepth, onChange: setMaxDepth }), /* @__PURE__ */ React.createElement(
+    SelectedKindsFilter,
+    {
+      value: selectedKinds,
+      onChange: setSelectedKinds
+    }
+  ), /* @__PURE__ */ React.createElement(
+    SelectedRelationsFilter,
+    {
+      value: selectedRelations,
+      onChange: setSelectedRelations,
+      relationPairs
+    }
+  ), /* @__PURE__ */ React.createElement(DirectionFilter, { value: direction, onChange: setDirection }), /* @__PURE__ */ React.createElement(CurveFilter, { value: curve, onChange: setCurve }), /* @__PURE__ */ React.createElement(
+    SwitchFilter,
+    {
+      value: unidirectional,
+      onChange: setUnidirectional,
+      label: "Simplified"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    SwitchFilter,
+    {
+      value: mergeRelations,
+      onChange: setMergeRelations,
+      label: "Merge Relations"
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, className: classes.fullHeight }, /* @__PURE__ */ React.createElement(Paper, { className: classes.graphWrapper }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "caption",
+      color: "textSecondary",
+      display: "block",
+      className: classes.legend
+    },
+    /* @__PURE__ */ React.createElement(ZoomOutMap, { className: "icon" }),
+    " Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity."
+  ), /* @__PURE__ */ React.createElement(
+    EntityRelationsGraph,
+    {
+      ...props,
+      rootEntityNames,
+      maxDepth,
+      kinds: selectedKinds && selectedKinds.length > 0 ? selectedKinds : void 0,
+      relations: selectedRelations && selectedRelations.length > 0 ? selectedRelations : void 0,
+      mergeRelations,
+      unidirectional,
+      onNodeClick,
+      direction,
+      relationPairs,
+      className: classes.graph,
+      zoom: "enabled",
+      curve
+    }
+  ))))));
+};
+
+export { CatalogGraphPage };
+//# sourceMappingURL=CatalogGraphPage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CatalogGraphPage.esm.js","sources":["../../../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 */\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 {\n  entityRouteRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport Grid from '@material-ui/core/Grid';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport ZoomOutMap from '@material-ui/icons/ZoomOutMap';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  EntityRelationsGraphProps,\n} from '../EntityRelationsGraph';\nimport { CurveFilter } from './CurveFilter';\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(\n  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  { name: 'PluginCatalogGraphCatalogGraphPage' },\n);\n\nexport const CatalogGraphPage = (\n  props: {\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      curve?: 'curveStepBefore' | 'curveMonotoneX';\n    };\n  } & Partial<EntityRelationsGraphProps>,\n) => {\n  const { relationPairs = ALL_RELATION_PAIRS, initialState } = props;\n\n  const navigate = useNavigate();\n  const classes = useStyles();\n  const catalogEntityRoute = useRouteRef(entityRouteRef);\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    curve,\n    setCurve,\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.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),\n          { attributes: { to: path } },\n        );\n        navigate(path);\n      } else {\n        analytics.captureEvent(\n          'click',\n          node.entity.metadata.title ?? humanizeEntityRef(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 => humanizeEntityRef(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              <CurveFilter value={curve} onChange={setCurve} />\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                {...props}\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                curve={curve}\n              />\n            </Paper>\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CatalogGraphPage/CurveFilter.esm.js

@@ -0,0 +1,30 @@
+import { Select } from '@backstage/core-components';
+import Box from '@material-ui/core/Box';
+import React, { useCallback } from 'react';
+
+const CURVE_DISPLAY_NAMES = {
+  curveMonotoneX: "Monotone X",
+  curveStepBefore: "Step Before"
+};
+const curves = ["curveMonotoneX", "curveStepBefore"];
+const CurveFilter = ({ value, onChange }) => {
+  const handleChange = useCallback(
+    (v) => onChange(v),
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      label: "Curve",
+      selected: value,
+      items: curves.map((v) => ({
+        label: CURVE_DISPLAY_NAMES[v],
+        value: v
+      })),
+      onChange: handleChange
+    }
+  ));
+};
+
+export { CurveFilter };
+//# sourceMappingURL=CurveFilter.esm.js.map

package/dist/components/CatalogGraphPage/CurveFilter.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurveFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/CurveFilter.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, SelectedItems } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport React, { useCallback } from 'react';\n\ntype Curve = 'curveStepBefore' | 'curveMonotoneX';\nconst CURVE_DISPLAY_NAMES: Record<Curve, string> = {\n  curveMonotoneX: 'Monotone X',\n  curveStepBefore: 'Step Before',\n};\n\nexport type Props = {\n  value: Curve;\n  onChange: (value: 'curveStepBefore' | 'curveMonotoneX') => void;\n};\n\nconst curves: Array<Curve> = ['curveMonotoneX', 'curveStepBefore'];\n\nexport const CurveFilter = ({ value, onChange }: Props) => {\n  const handleChange = useCallback(\n    (v: SelectedItems) => onChange(v as Curve),\n    [onChange],\n  );\n\n  return (\n    <Box pb={1} pt={1}>\n      <Select\n        label=\"Curve\"\n        selected={value}\n        items={curves.map(v => ({\n          label: CURVE_DISPLAY_NAMES[v],\n          value: v,\n        }))}\n        onChange={handleChange}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAoBA,MAAM,mBAA6C,GAAA;AAAA,EACjD,cAAgB,EAAA,YAAA;AAAA,EAChB,eAAiB,EAAA,aAAA;AACnB,CAAA,CAAA;AAOA,MAAM,MAAA,GAAuB,CAAC,gBAAA,EAAkB,iBAAiB,CAAA,CAAA;AAE1D,MAAM,WAAc,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AACzD,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,CAAqB,KAAA,QAAA,CAAS,CAAU,CAAA;AAAA,IACzC,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,QAAU,EAAA,KAAA;AAAA,MACV,KAAA,EAAO,MAAO,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA;AAAA,QACtB,KAAA,EAAO,oBAAoB,CAAC,CAAA;AAAA,QAC5B,KAAO,EAAA,CAAA;AAAA,OACP,CAAA,CAAA;AAAA,MACF,QAAU,EAAA,YAAA;AAAA,KAAA;AAAA,GAEd,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/CatalogGraphPage/DirectionFilter.esm.js

@@ -0,0 +1,34 @@
+import { Select } from '@backstage/core-components';
+import Box from '@material-ui/core/Box';
+import React, { useCallback } from 'react';
+import '../EntityRelationsGraph/EntityRelationsGraph.esm.js';
+import '@backstage/catalog-model';
+import { Direction } from '../EntityRelationsGraph/types.esm.js';
+
+const DIRECTION_DISPLAY_NAMES = {
+  [Direction.LEFT_RIGHT]: "Left to right",
+  [Direction.RIGHT_LEFT]: "Right to left",
+  [Direction.TOP_BOTTOM]: "Top to bottom",
+  [Direction.BOTTOM_TOP]: "Bottom to top"
+};
+const DirectionFilter = ({ value, onChange }) => {
+  const handleChange = useCallback(
+    (v) => onChange(v),
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      label: "Direction",
+      selected: value,
+      items: Object.values(Direction).map((v) => ({
+        label: DIRECTION_DISPLAY_NAMES[v],
+        value: v
+      })),
+      onChange: handleChange
+    }
+  ));
+};
+
+export { DirectionFilter };
+//# sourceMappingURL=DirectionFilter.esm.js.map

package/dist/components/CatalogGraphPage/DirectionFilter.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/DirectionFilter.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, SelectedItems } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\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(\n    (v: SelectedItems) => onChange(v as Direction),\n    [onChange],\n  );\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"],"names":[],"mappings":";;;;;;;AAoBA,MAAM,uBAA0B,GAAA;AAAA,EAC9B,CAAC,SAAU,CAAA,UAAU,GAAG,eAAA;AAAA,EACxB,CAAC,SAAU,CAAA,UAAU,GAAG,eAAA;AAAA,EACxB,CAAC,SAAU,CAAA,UAAU,GAAG,eAAA;AAAA,EACxB,CAAC,SAAU,CAAA,UAAU,GAAG,eAAA;AAC1B,CAAA,CAAA;AAOO,MAAM,eAAkB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AAC7D,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,CAAqB,KAAA,QAAA,CAAS,CAAc,CAAA;AAAA,IAC7C,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,QAAU,EAAA,KAAA;AAAA,MACV,OAAO,MAAO,CAAA,MAAA,CAAO,SAAS,CAAA,CAAE,IAAI,CAAM,CAAA,MAAA;AAAA,QACxC,KAAA,EAAO,wBAAwB,CAAC,CAAA;AAAA,QAChC,KAAO,EAAA,CAAA;AAAA,OACP,CAAA,CAAA;AAAA,MACF,QAAU,EAAA,YAAA;AAAA,KAAA;AAAA,GAEd,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/CatalogGraphPage/MaxDepthFilter.esm.js

@@ -0,0 +1,68 @@
+import Box from '@material-ui/core/Box';
+import FormControl from '@material-ui/core/FormControl';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import ClearIcon from '@material-ui/icons/Clear';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+
+const useStyles = makeStyles(
+  {
+    formControl: {
+      width: "100%",
+      maxWidth: 300
+    }
+  },
+  { name: "PluginCatalogGraphMaxDepthFilter" }
+);
+const MaxDepthFilter = ({ value, onChange }) => {
+  const classes = useStyles();
+  const onChangeRef = useRef(onChange);
+  const [currentValue, setCurrentValue] = useState(value);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+  const handleChange = useCallback(
+    (event) => {
+      const newValueNumeric = Number(event.target.value);
+      const newValue = Number.isFinite(newValueNumeric) && newValueNumeric > 0 ? newValueNumeric : Number.POSITIVE_INFINITY;
+      setCurrentValue(newValue);
+      onChangeRef.current(newValue);
+    },
+    []
+  );
+  const reset = useCallback(() => {
+    setCurrentValue(Number.POSITIVE_INFINITY);
+    onChangeRef.current(Number.POSITIVE_INFINITY);
+  }, [onChangeRef]);
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", className: classes.formControl }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Max Depth"), /* @__PURE__ */ React.createElement(
+    OutlinedInput,
+    {
+      type: "number",
+      placeholder: "\u221E Infinite",
+      value: Number.isFinite(currentValue) ? String(currentValue) : "",
+      onChange: handleChange,
+      endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          "aria-label": "clear max depth",
+          onClick: reset,
+          edge: "end"
+        },
+        /* @__PURE__ */ React.createElement(ClearIcon, null)
+      )),
+      inputProps: {
+        "aria-label": "maxp"
+      },
+      labelWidth: 0
+    }
+  )));
+};
+
+export { MaxDepthFilter };
+//# sourceMappingURL=MaxDepthFilter.esm.js.map

package/dist/components/CatalogGraphPage/MaxDepthFilter.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxDepthFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/MaxDepthFilter.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 Box from '@material-ui/core/Box';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type Props = {\n  value: number;\n  onChange: (value: number) => void;\n};\n\nconst useStyles = makeStyles(\n  {\n    formControl: {\n      width: '100%',\n      maxWidth: 300,\n    },\n  },\n  { name: 'PluginCatalogGraphMaxDepthFilter' },\n);\n\nexport const MaxDepthFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n  const onChangeRef = useRef(onChange);\n  const [currentValue, setCurrentValue] = useState(value);\n\n  // Keep a fresh reference to the latest callback\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // If the value changes externally, update ourselves\n  useEffect(() => {\n    setCurrentValue(value);\n  }, [value]);\n\n  // When the entered text changes, update ourselves and communicate externally\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValueNumeric = Number(event.target.value);\n      const newValue =\n        Number.isFinite(newValueNumeric) && newValueNumeric > 0\n          ? newValueNumeric\n          : Number.POSITIVE_INFINITY;\n      setCurrentValue(newValue);\n      onChangeRef.current(newValue);\n    },\n    [],\n  );\n\n  const reset = useCallback(() => {\n    setCurrentValue(Number.POSITIVE_INFINITY);\n    onChangeRef.current(Number.POSITIVE_INFINITY);\n  }, [onChangeRef]);\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={Number.isFinite(currentValue) ? String(currentValue) : ''}\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"],"names":[],"mappings":";;;;;;;;;;AA8BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,EAAA,GAAA;AAAA,KACZ;AAAA,GACF;AAAA,EACA,EAAE,MAAM,kCAAmC,EAAA;AAC7C,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AAC5D,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,OAAO,QAAQ,CAAA,CAAA;AACnC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAGtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,OAAU,GAAA,QAAA,CAAA;AAAA,GACxB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAGb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAAA,GACvB,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAGV,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,KAA+C,KAAA;AAC9C,MAAA,MAAM,eAAkB,GAAA,MAAA,CAAO,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACjD,MAAM,MAAA,QAAA,GACJ,OAAO,QAAS,CAAA,eAAe,KAAK,eAAkB,GAAA,CAAA,GAClD,kBACA,MAAO,CAAA,iBAAA,CAAA;AACb,MAAA,eAAA,CAAgB,QAAQ,CAAA,CAAA;AACxB,MAAA,WAAA,CAAY,QAAQ,QAAQ,CAAA,CAAA;AAAA,KAC9B;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,eAAA,CAAgB,OAAO,iBAAiB,CAAA,CAAA;AACxC,IAAY,WAAA,CAAA,OAAA,CAAQ,OAAO,iBAAiB,CAAA,CAAA;AAAA,GAC9C,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,2CACG,GAAI,EAAA,EAAA,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAAA,sCACb,WAAY,EAAA,EAAA,OAAA,EAAQ,UAAW,EAAA,SAAA,EAAW,QAAQ,WACjD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,QAAA,EAAA,EAAS,WAAS,CACtC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,WAAY,EAAA,iBAAA;AAAA,MACZ,OAAO,MAAO,CAAA,QAAA,CAAS,YAAY,CAAI,GAAA,MAAA,CAAO,YAAY,CAAI,GAAA,EAAA;AAAA,MAC9D,QAAU,EAAA,YAAA;AAAA,MACV,YACE,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,KACvB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,iBAAA;AAAA,UACX,OAAS,EAAA,KAAA;AAAA,UACT,IAAK,EAAA,KAAA;AAAA,SAAA;AAAA,4CAEJ,SAAU,EAAA,IAAA,CAAA;AAAA,OAEf,CAAA;AAAA,MAEF,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,MAAA;AAAA,OAChB;AAAA,MACA,UAAY,EAAA,CAAA;AAAA,KAAA;AAAA,GAEhB,CACF,CAAA,CAAA;AAEJ;;;;"}