@backstage/plugin-catalog-graph 0.4.23-next.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @backstage/plugin-catalog-graph
 
+## 0.5.0
+
+### Minor Changes
+
+- ae6b606: Support custom relations by using an API to define known relations and which to show by default
+  Fixes "simplified" bug (#30121) which caused graphs not to be simplified
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.21.0
+  - @backstage/frontend-plugin-api@0.12.0
+  - @backstage/core-plugin-api@1.11.0
+  - @backstage/catalog-client@1.12.0
+  - @backstage/core-components@0.18.0
+  - @backstage/types@1.2.2
+  - @backstage/core-compat-api@0.5.2
+
+## 0.4.23-next.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/catalog-client@1.12.0-next.0
+  - @backstage/plugin-catalog-react@1.21.0-next.2
+  - @backstage/core-components@0.17.6-next.1
+  - @backstage/core-compat-api@0.5.2-next.2
+
 ## 0.4.23-next.1
 
 ### Patch Changes

package/README.md

@@ -50,18 +50,6 @@ To use the catalog graph plugin, you have to add some things to your Backstage a
        <CatalogGraphPage
          initialState={{
            selectedKinds: ['component', 'domain', 'system', 'api', 'group'],
-           selectedRelations: [
-             RELATION_OWNER_OF,
-             RELATION_OWNED_BY,
-             RELATION_CONSUMES_API,
-             RELATION_API_CONSUMED_BY,
-             RELATION_PROVIDES_API,
-             RELATION_API_PROVIDED_BY,
-             RELATION_HAS_PART,
-             RELATION_PART_OF,
-             RELATION_DEPENDS_ON,
-             RELATION_DEPENDENCY_OF,
-           ],
          }}
        />
      }
@@ -88,7 +76,7 @@ To use the catalog graph plugin, you have to add some things to your Backstage a
    </Grid>
    ```
 
-### Customization
+### Customizing the UI
 
 Copy the default implementation `DefaultRenderNode.tsx` and add more classes to the styles:
 
@@ -151,6 +139,44 @@ Once you have your custom implementation, you can follow these steps to modify t
 <EntityCatalogGraphCard variant=“gridItem” renderNode={MyCustomRenderNode} height={400} />
 ```
 
+### Custom relations
+
+Implementers with added custom relations can add them to the catalog graph plugin by overriding the default API. This also allows some relations to not be selected by default.
+
+In `packages/app/src/apis.ts`, import the api ref and create the API as:
+
+```ts
+import {
+  ALL_RELATIONS,
+  ALL_RELATION_PAIRS,
+  catalogGraphApiRef,
+  DefaultCatalogGraphApi,
+} from '@backstage/plugin-catalog-graph';
+
+// ...
+
+  createApiFactory({
+    api: catalogGraphApiRef,
+    deps: {},
+    factory: () =>
+      new DefaultCatalogGraphApi({
+        // The relations to support
+        knownRelations: [...ALL_RELATIONS, 'myRelationOf', 'myRelationFor'],
+        // The relation pairs to support
+        knownRelationPairs: [
+          ...ALL_RELATION_PAIRS,
+          ['myRelationOf', 'myRelationFor'],
+        ],
+        // Select what relations to be shown by default, either by including them,
+        // or excluding some from all known relations:
+        defaultRelationTypes: {
+          // Don't show/select these by default
+          exclude: ['myRelationOf', 'myRelationFor'],
+        },
+      }),
+  }),
+```
+
 ## Development
 
 Run `yarn` in the root of this plugin to install all dependencies and then `yarn start` to run a [development version](./dev/index.tsx) of this plugin.

package/dist/alpha.d.ts

@@ -64,9 +64,9 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
             relations?: string[] | undefined;
             maxDepth?: number | undefined;
             kinds?: string[] | undefined;
-            unidirectional?: boolean | undefined;
             mergeRelations?: boolean | undefined;
             relationPairs?: [string, string][] | undefined;
+            unidirectional?: boolean | undefined;
         } & {
             filter?: _backstage_plugin_catalog_react_alpha.EntityPredicate | undefined;
             type?: "content" | "summary" | "info" | undefined;
@@ -118,9 +118,9 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
             rootEntityRefs?: string[] | undefined;
             maxDepth?: number | undefined;
             kinds?: string[] | undefined;
-            unidirectional?: boolean | undefined;
             mergeRelations?: boolean | undefined;
             relationPairs?: [string, string][] | undefined;
+            unidirectional?: boolean | undefined;
             selectedRelations?: string[] | undefined;
             selectedKinds?: string[] | undefined;
             showFilters?: boolean | undefined;

package/dist/api/CatalogGraphApi.esm.js

@@ -0,0 +1,8 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+
+const catalogGraphApiRef = createApiRef({
+  id: "plugin.catalog-graph.service"
+});
+
+export { catalogGraphApiRef };
+//# sourceMappingURL=CatalogGraphApi.esm.js.map

package/dist/api/CatalogGraphApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CatalogGraphApi.esm.js","sources":["../../src/api/CatalogGraphApi.ts"],"sourcesContent":["/*\n * Copyright 2025 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 { createApiRef } from '@backstage/core-plugin-api';\n\n/**\n * Utility API reference for the {@link CatalogGraphApi}.\n *\n * @public\n */\nexport const catalogGraphApiRef = createApiRef<CatalogGraphApi>({\n  id: 'plugin.catalog-graph.service',\n});\n\n/** @public */\nexport type DefaultRelationsInclude = { include: string[] };\n\n/** @public */\nexport type DefaultRelationsExclude = { exclude: string[] };\n\n/**\n * Default relations. Can either be a list of relations to use by default, or\n * a list of relations to _not_ use, i.e. include all other relations.\n *\n * @public\n */\nexport type DefaultRelations =\n  | DefaultRelationsInclude\n  | DefaultRelationsExclude;\n\n/**\n * API for driving catalog imports.\n *\n * @public\n */\nexport interface CatalogGraphApi {\n  /** All known relations */\n  readonly knownRelations: string[];\n\n  /** All known relation pairs */\n  readonly knownRelationPairs: [string, string][];\n\n  /** The default relations to show in the graph */\n  readonly defaultRelations: string[];\n}\n"],"names":[],"mappings":";;AAuBO,MAAM,qBAAqB,YAAA,CAA8B;AAAA,EAC9D,EAAA,EAAI;AACN,CAAC;;;;"}

package/dist/api/DefaultCatalogGraphApi.esm.js

@@ -0,0 +1,30 @@
+import { ALL_RELATION_PAIRS, ALL_RELATIONS } from '../lib/types/relations.esm.js';
+
+class DefaultCatalogGraphApi {
+  knownRelations;
+  knownRelationPairs;
+  defaultRelations;
+  constructor(options = {
+    knownRelations: ALL_RELATIONS,
+    knownRelationPairs: ALL_RELATION_PAIRS,
+    defaultRelationTypes: { exclude: [] }
+  }) {
+    this.knownRelations = options.knownRelations ?? ALL_RELATIONS;
+    this.knownRelationPairs = options.knownRelationPairs ?? ALL_RELATION_PAIRS;
+    const defaultRelations = options.defaultRelationTypes;
+    if (Array.isArray(defaultRelations.include)) {
+      const defaultRelationsInclude = defaultRelations;
+      this.defaultRelations = this.knownRelations.filter(
+        (rel) => defaultRelationsInclude.include.includes(rel)
+      );
+    } else {
+      const defaultRelationsExclude = defaultRelations;
+      this.defaultRelations = this.knownRelations.filter(
+        (rel) => !defaultRelationsExclude.exclude.includes(rel)
+      );
+    }
+  }
+}
+
+export { DefaultCatalogGraphApi };
+//# sourceMappingURL=DefaultCatalogGraphApi.esm.js.map

package/dist/api/DefaultCatalogGraphApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultCatalogGraphApi.esm.js","sources":["../../src/api/DefaultCatalogGraphApi.ts"],"sourcesContent":["/*\n * Copyright 2025 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 { ALL_RELATION_PAIRS, ALL_RELATIONS, RelationPairs } from '../lib/types';\nimport {\n  CatalogGraphApi,\n  DefaultRelations,\n  DefaultRelationsExclude,\n  DefaultRelationsInclude,\n} from './CatalogGraphApi';\n\n/**\n * Options for the {@link DefaultCatalogGraphApi}.\n *\n * @public\n */\nexport interface DefaultCatalogGraphApiOptions {\n  readonly knownRelations?: string[];\n  readonly knownRelationPairs?: RelationPairs;\n  readonly defaultRelationTypes?: DefaultRelations;\n}\n\n/**\n * The default implementation of the {@link CatalogGraphApi}.\n *\n * @public\n */\nexport class DefaultCatalogGraphApi implements CatalogGraphApi {\n  readonly knownRelations: string[];\n  readonly knownRelationPairs: [string, string][];\n  readonly defaultRelations: string[];\n\n  constructor(\n    options: DefaultCatalogGraphApiOptions = {\n      knownRelations: ALL_RELATIONS,\n      knownRelationPairs: ALL_RELATION_PAIRS,\n      defaultRelationTypes: { exclude: [] },\n    },\n  ) {\n    this.knownRelations = options.knownRelations ?? ALL_RELATIONS;\n    this.knownRelationPairs = options.knownRelationPairs ?? ALL_RELATION_PAIRS;\n\n    const defaultRelations = options.defaultRelationTypes;\n\n    if (Array.isArray((defaultRelations as DefaultRelationsInclude).include)) {\n      const defaultRelationsInclude =\n        defaultRelations as DefaultRelationsInclude;\n\n      this.defaultRelations = this.knownRelations.filter(rel =>\n        defaultRelationsInclude.include.includes(rel),\n      );\n    } else {\n      const defaultRelationsExclude =\n        defaultRelations as DefaultRelationsExclude;\n\n      this.defaultRelations = this.knownRelations.filter(\n        rel => !defaultRelationsExclude.exclude.includes(rel),\n      );\n    }\n  }\n}\n"],"names":[],"mappings":";;AAwCO,MAAM,sBAAA,CAAkD;AAAA,EACpD,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EAET,YACE,OAAA,GAAyC;AAAA,IACvC,cAAA,EAAgB,aAAA;AAAA,IAChB,kBAAA,EAAoB,kBAAA;AAAA,IACpB,oBAAA,EAAsB,EAAE,OAAA,EAAS,EAAC;AAAE,GACtC,EACA;AACA,IAAA,IAAA,CAAK,cAAA,GAAiB,QAAQ,cAAA,IAAkB,aAAA;AAChD,IAAA,IAAA,CAAK,kBAAA,GAAqB,QAAQ,kBAAA,IAAsB,kBAAA;AAExD,IAAA,MAAM,mBAAmB,OAAA,CAAQ,oBAAA;AAEjC,IAAA,IAAI,KAAA,CAAM,OAAA,CAAS,gBAAA,CAA6C,OAAO,CAAA,EAAG;AACxE,MAAA,MAAM,uBAAA,GACJ,gBAAA;AAEF,MAAA,IAAA,CAAK,gBAAA,GAAmB,KAAK,cAAA,CAAe,MAAA;AAAA,QAAO,CAAA,GAAA,KACjD,uBAAA,CAAwB,OAAA,CAAQ,QAAA,CAAS,GAAG;AAAA,OAC9C;AAAA,IACF,CAAA,MAAO;AACL,MAAA,MAAM,uBAAA,GACJ,gBAAA;AAEF,MAAA,IAAA,CAAK,gBAAA,GAAmB,KAAK,cAAA,CAAe,MAAA;AAAA,QAC1C,CAAA,GAAA,KAAO,CAAC,uBAAA,CAAwB,OAAA,CAAQ,SAAS,GAAG;AAAA,OACtD;AAAA,IACF;AAAA,EACF;AACF;;;;"}

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

@@ -9,10 +9,9 @@ import { useMemo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 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';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { catalogGraphTranslationRef } from '../../translation.esm.js';
+import { Direction } from '../../lib/types/graph.esm.js';
 
 const useStyles = makeStyles(
   {
@@ -33,7 +32,7 @@ const CatalogGraphCard = (props) => {
   const { t } = useTranslationRef(catalogGraphTranslationRef);
   const {
     variant = "gridItem",
-    relationPairs = ALL_RELATION_PAIRS,
+    relationPairs,
     maxDepth = 1,
     unidirectional = true,
     mergeRelations = true,

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

@@ -1 +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 { MouseEvent, ReactNode, useCallback, useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { catalogGraphRouteRef } from '../../routes';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  EntityRelationsGraphProps,\n} from '../EntityRelationsGraph';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\n\n/** @public */\nexport type CatalogGraphCardClassKey = 'card' | 'graph';\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    action?: ReactNode;\n  },\n) => {\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\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    entityFilter,\n    height,\n    className,\n    action,\n    rootEntityNames,\n    onNodeClick,\n    title = t('catalogGraphCard.title'),\n    zoom = 'enable-on-click',\n  } = props;\n\n  const { entity } = useEntity();\n  const entityName = useMemo(() => getCompoundEntityRef(entity), [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      action={action}\n      cardClassName={classes.card}\n      variant={variant}\n      noPadding\n      deepLink={{\n        title: t('catalogGraphCard.deepLinkTitle'),\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        entityFilter={entityFilter}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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 { MouseEvent, ReactNode, useCallback, useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { catalogGraphRouteRef } from '../../routes';\nimport {\n  EntityRelationsGraph,\n  EntityRelationsGraphProps,\n} from '../EntityRelationsGraph';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\nimport { Direction, EntityNode } from '../../lib/types';\n\n/** @public */\nexport type CatalogGraphCardClassKey = 'card' | 'graph';\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    action?: ReactNode;\n  },\n) => {\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\n  const {\n    variant = 'gridItem',\n    relationPairs,\n    maxDepth = 1,\n    unidirectional = true,\n    mergeRelations = true,\n    direction = Direction.LEFT_RIGHT,\n    kinds,\n    relations,\n    entityFilter,\n    height,\n    className,\n    action,\n    rootEntityNames,\n    onNodeClick,\n    title = t('catalogGraphCard.title'),\n    zoom = 'enable-on-click',\n  } = props;\n\n  const { entity } = useEntity();\n  const entityName = useMemo(() => getCompoundEntityRef(entity), [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      action={action}\n      cardClassName={classes.card}\n      variant={variant}\n      noPadding\n      deepLink={{\n        title: t('catalogGraphCard.deepLinkTitle'),\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        entityFilter={entityFilter}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -13,7 +13,6 @@ import ToggleButton from '@material-ui/lab/ToggleButton';
 import { 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';
@@ -79,11 +78,7 @@ const useStyles = makeStyles(
   { name: "PluginCatalogGraphCatalogGraphPage" }
 );
 const CatalogGraphPage = (props) => {
-  const {
-    relationPairs = ALL_RELATION_PAIRS,
-    initialState,
-    entityFilter
-  } = props;
+  const { relationPairs, initialState, entityFilter } = props;
   const { t } = useTranslationRef(catalogGraphTranslationRef);
   const navigate = useNavigate();
   const classes = useStyles();
@@ -176,8 +171,7 @@ const CatalogGraphPage = (props) => {
             SelectedRelationsFilter,
             {
               value: selectedRelations,
-              onChange: setSelectedRelations,
-              relationPairs
+              onChange: setSelectedRelations
             }
           ),
           /* @__PURE__ */ jsx(DirectionFilter, { value: direction, onChange: setDirection }),

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

@@ -1 +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 { 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';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\n\n/** @public */\nexport type CatalogGraphPageClassKey =\n  | 'content'\n  | 'container'\n  | 'fullHeight'\n  | 'graphWrapper'\n  | 'graph'\n  | 'legend'\n  | 'filters';\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 {\n    relationPairs = ALL_RELATION_PAIRS,\n    initialState,\n    entityFilter,\n  } = props;\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\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={t('catalogGraphPage.title')}\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 /> {t('catalogGraphPage.filterToggleButtonTitle')}\n            </ToggleButton>\n          }\n        >\n          <SupportButton>\n            {t('catalogGraphPage.supportButtonDescription')}\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={t('catalogGraphPage.simplifiedSwitchLabel')}\n              />\n              <SwitchFilter\n                value={mergeRelations}\n                onChange={setMergeRelations}\n                label={t('catalogGraphPage.mergeRelationsSwitchLabel')}\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\" />{' '}\n                {t('catalogGraphPage.zoomOutDescription')}\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                entityFilter={entityFilter}\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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"}
+{"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 { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\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';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\nimport { Direction, EntityNode } from '../../lib/types';\n\n/** @public */\nexport type CatalogGraphPageClassKey =\n  | 'content'\n  | 'container'\n  | 'fullHeight'\n  | 'graphWrapper'\n  | 'graph'\n  | 'legend'\n  | 'filters';\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, initialState, entityFilter } = props;\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\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={t('catalogGraphPage.title')}\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 /> {t('catalogGraphPage.filterToggleButtonTitle')}\n            </ToggleButton>\n          }\n        >\n          <SupportButton>\n            {t('catalogGraphPage.supportButtonDescription')}\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              />\n              <DirectionFilter value={direction} onChange={setDirection} />\n              <CurveFilter value={curve} onChange={setCurve} />\n              <SwitchFilter\n                value={unidirectional}\n                onChange={setUnidirectional}\n                label={t('catalogGraphPage.simplifiedSwitchLabel')}\n              />\n              <SwitchFilter\n                value={mergeRelations}\n                onChange={setMergeRelations}\n                label={t('catalogGraphPage.mergeRelationsSwitchLabel')}\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\" />{' '}\n                {t('catalogGraphPage.zoomOutDescription')}\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                entityFilter={entityFilter}\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/DirectionFilter.esm.js

@@ -2,9 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { Select } from '@backstage/core-components';
 import Box from '@material-ui/core/Box';
 import { useCallback } from 'react';
-import '../EntityRelationsGraph/EntityRelationsGraph.esm.js';
 import '@backstage/catalog-model';
-import { Direction } from '../EntityRelationsGraph/types.esm.js';
+import { Direction } from '../../lib/types/graph.esm.js';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { catalogGraphTranslationRef } from '../../translation.esm.js';
 

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

@@ -1 +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 { useCallback } from 'react';\nimport { Direction } from '../EntityRelationsGraph';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\n\nexport type Props = {\n  value: Direction;\n  onChange: (value: Direction) => void;\n};\n\nexport const DirectionFilter = ({ value, onChange }: Props) => {\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\n  const DIRECTION_DISPLAY_NAMES = {\n    [Direction.LEFT_RIGHT]: t('catalogGraphPage.directionFilter.leftToRight'),\n    [Direction.RIGHT_LEFT]: t('catalogGraphPage.directionFilter.rightToLeft'),\n    [Direction.TOP_BOTTOM]: t('catalogGraphPage.directionFilter.topToBottom'),\n    [Direction.BOTTOM_TOP]: t('catalogGraphPage.directionFilter.bottomToTop'),\n  };\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={t('catalogGraphPage.directionFilter.title')}\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":";;;;;;;;;;AA2BO,MAAM,eAAA,GAAkB,CAAC,EAAE,KAAA,EAAO,UAAS,KAAa;AAC7D,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,0BAA0B,CAAA;AAC1D,EAAA,MAAM,uBAAA,GAA0B;AAAA,IAC9B,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C,CAAA;AAAA,IACxE,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C,CAAA;AAAA,IACxE,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C,CAAA;AAAA,IACxE,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C;AAAA,GAC1E;AACA,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,CAAA,KAAqB,QAAA,CAAS,CAAc,CAAA;AAAA,IAC7C,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,IAAI,CAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,wCAAwC,CAAA;AAAA,MACjD,QAAA,EAAU,KAAA;AAAA,MACV,OAAO,MAAA,CAAO,MAAA,CAAO,SAAS,CAAA,CAAE,IAAI,CAAA,CAAA,MAAM;AAAA,QACxC,KAAA,EAAO,wBAAwB,CAAC,CAAA;AAAA,QAChC,KAAA,EAAO;AAAA,OACT,CAAE,CAAA;AAAA,MACF,QAAA,EAAU;AAAA;AAAA,GACZ,EACF,CAAA;AAEJ;;;;"}
+{"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 { useCallback } from 'react';\nimport { Direction } from '../../lib/types';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\n\nexport type Props = {\n  value: Direction;\n  onChange: (value: Direction) => void;\n};\n\nexport const DirectionFilter = ({ value, onChange }: Props) => {\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\n  const DIRECTION_DISPLAY_NAMES = {\n    [Direction.LEFT_RIGHT]: t('catalogGraphPage.directionFilter.leftToRight'),\n    [Direction.RIGHT_LEFT]: t('catalogGraphPage.directionFilter.rightToLeft'),\n    [Direction.TOP_BOTTOM]: t('catalogGraphPage.directionFilter.topToBottom'),\n    [Direction.BOTTOM_TOP]: t('catalogGraphPage.directionFilter.bottomToTop'),\n  };\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={t('catalogGraphPage.directionFilter.title')}\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":";;;;;;;;;AA2BO,MAAM,eAAA,GAAkB,CAAC,EAAE,KAAA,EAAO,UAAS,KAAa;AAC7D,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,0BAA0B,CAAA;AAC1D,EAAA,MAAM,uBAAA,GAA0B;AAAA,IAC9B,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C,CAAA;AAAA,IACxE,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C,CAAA;AAAA,IACxE,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C,CAAA;AAAA,IACxE,CAAC,SAAA,CAAU,UAAU,GAAG,EAAE,8CAA8C;AAAA,GAC1E;AACA,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,CAAA,KAAqB,QAAA,CAAS,CAAc,CAAA;AAAA,IAC7C,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,IAAI,CAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,wCAAwC,CAAA;AAAA,MACjD,QAAA,EAAU,KAAA;AAAA,MACV,OAAO,MAAA,CAAO,MAAA,CAAO,SAAS,CAAA,CAAE,IAAI,CAAA,CAAA,MAAM;AAAA,QACxC,KAAA,EAAO,wBAAwB,CAAC,CAAA;AAAA,QAChC,KAAA,EAAO;AAAA,OACT,CAAE,CAAA;AAAA,MACF,QAAA,EAAU;AAAA;AAAA,GACZ,EACF,CAAA;AAEJ;;;;"}

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

@@ -12,6 +12,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 import { useMemo, useCallback } from 'react';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { catalogGraphTranslationRef } from '../../translation.esm.js';
+import { useRelations } from '../../hooks/useRelations.esm.js';
 
 const useStyles = makeStyles(
   {
@@ -21,19 +22,22 @@ const useStyles = makeStyles(
   },
   { name: "PluginCatalogGraphSelectedRelationsFilter" }
 );
-const SelectedRelationsFilter = ({
-  relationPairs,
-  value,
-  onChange
-}) => {
+const SelectedRelationsFilter = (props) => {
+  const { relations: incomingRelations, value, onChange } = props;
   const classes = useStyles();
-  const relations = useMemo(() => relationPairs.flat(), [relationPairs]);
+  const { relations, includeRelation } = useRelations({
+    relations: incomingRelations
+  });
+  const defaultValue = useMemo(
+    () => relations.filter((rel) => includeRelation(rel)),
+    [relations, includeRelation]
+  );
   const { t } = useTranslationRef(catalogGraphTranslationRef);
   const handleChange = useCallback(
     (_, v) => {
-      onChange(relations.every((r) => v.includes(r)) ? void 0 : v);
+      onChange(v);
     },
-    [relations, onChange]
+    [onChange]
   );
   const handleEmpty = useCallback(() => {
     onChange(value?.length ? value : void 0);
@@ -49,7 +53,7 @@ const SelectedRelationsFilter = ({
         disableCloseOnSelect: true,
         "aria-label": t("catalogGraphPage.selectedRelationsFilter.title"),
         options: relations,
-        value: value ?? relations,
+        value: value ?? defaultValue,
         onChange: handleChange,
         onBlur: handleEmpty,
         renderOption: (option, { selected }) => /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"SelectedRelationsFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/SelectedRelationsFilter.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 Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\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/Autocomplete';\nimport { useCallback, useMemo } from 'react';\nimport { RelationPairs } from '../EntityRelationsGraph';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\n\n/** @public */\nexport type SelectedRelationsFilterClassKey = 'formControl';\n\nconst useStyles = makeStyles(\n  {\n    formControl: {\n      maxWidth: 300,\n    },\n  },\n  { name: 'PluginCatalogGraphSelectedRelationsFilter' },\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  const { t } = useTranslationRef(catalogGraphTranslationRef);\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\">\n        {t('catalogGraphPage.selectedRelationsFilter.title')}\n      </Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label={t('catalogGraphPage.selectedRelationsFilter.title')}\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"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB;AAAA,IACE,WAAA,EAAa;AAAA,MACX,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,2CAAA;AACV,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,aAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAAa;AACX,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,SAAA,GAAY,QAAQ,MAAM,aAAA,CAAc,MAAK,EAAG,CAAC,aAAa,CAAC,CAAA;AACrE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,GAAY,CAAA,KAAgB;AAC3B,MAAA,QAAA,CAAS,SAAA,CAAU,MAAM,CAAA,CAAA,KAAK,CAAA,CAAE,SAAS,CAAC,CAAC,CAAA,GAAI,MAAA,GAAY,CAAC,CAAA;AAAA,IAC9D,CAAA;AAAA,IACA,CAAC,WAAW,QAAQ;AAAA,GACtB;AAEA,EAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,KAAA,EAAO,MAAA,GAAS,KAAA,GAAQ,MAAS,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,KAAA,EAAO,QAAQ,CAAC,CAAA;AAEpB,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,IAAI,CAAA,EACd,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,QAAA,EACjB,QAAA,EAAA,CAAA,CAAE,gDAAgD,CAAA,EACrD,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,WAAA;AAAA,QACnB,QAAA,EAAQ,IAAA;AAAA,QACR,SAAA,EAAW,CAAA;AAAA,QACX,oBAAA,EAAoB,IAAA;AAAA,QACpB,YAAA,EAAY,EAAE,gDAAgD,CAAA;AAAA,QAC9D,OAAA,EAAS,SAAA;AAAA,QACT,OAAO,KAAA,IAAS,SAAA;AAAA,QAChB,QAAA,EAAU,YAAA;AAAA,QACV,MAAA,EAAQ,WAAA;AAAA,QACR,YAAA,EAAc,CAAC,MAAA,EAAQ,EAAE,UAAS,qBAChC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,OAAA,kBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,kBAAM,GAAA,CAAC,wBAAA,EAAA,EAAyB,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,gBACjD,WAAA,kBAAa,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,gBAC5C,OAAA,EAAS;AAAA;AAAA,aACX;AAAA,YAEF,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEF,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,kBAAW,GAAA,CAAC,cAAA,EAAA,EAAe,aAAA,EAAY,2BAAA,EAA4B,CAAA;AAAA,QACnE,aAAa,CAAA,MAAA,qBAAU,GAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAA,EAAW;AAAA;AAAA;AACnE,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectedRelationsFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/SelectedRelationsFilter.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 Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\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/Autocomplete';\nimport { useCallback, useMemo } from 'react';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { catalogGraphTranslationRef } from '../../translation';\nimport { useRelations } from '../../hooks';\n\n/** @public */\nexport type SelectedRelationsFilterClassKey = 'formControl';\n\nconst useStyles = makeStyles(\n  {\n    formControl: {\n      maxWidth: 300,\n    },\n  },\n  { name: 'PluginCatalogGraphSelectedRelationsFilter' },\n);\n\nexport type Props = {\n  relations?: string[];\n  value: string[] | undefined;\n  onChange: (value: string[] | undefined) => void;\n};\n\nexport const SelectedRelationsFilter = (props: Props) => {\n  const { relations: incomingRelations, value, onChange } = props;\n\n  const classes = useStyles();\n\n  const { relations, includeRelation } = useRelations({\n    relations: incomingRelations,\n  });\n\n  const defaultValue = useMemo(\n    () => relations.filter(rel => includeRelation(rel)),\n    [relations, includeRelation],\n  );\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\n\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(v);\n    },\n    [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\">\n        {t('catalogGraphPage.selectedRelationsFilter.title')}\n      </Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label={t('catalogGraphPage.selectedRelationsFilter.title')}\n        options={relations}\n        value={value ?? defaultValue}\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB;AAAA,IACE,WAAA,EAAa;AAAA,MACX,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,2CAAA;AACV,CAAA;AAQO,MAAM,uBAAA,GAA0B,CAAC,KAAA,KAAiB;AACvD,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAmB,KAAA,EAAO,UAAS,GAAI,KAAA;AAE1D,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,MAAM,EAAE,SAAA,EAAW,eAAA,EAAgB,GAAI,YAAA,CAAa;AAAA,IAClD,SAAA,EAAW;AAAA,GACZ,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,MAAM,SAAA,CAAU,MAAA,CAAO,CAAA,GAAA,KAAO,eAAA,CAAgB,GAAG,CAAC,CAAA;AAAA,IAClD,CAAC,WAAW,eAAe;AAAA,GAC7B;AACA,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,GAAY,CAAA,KAAgB;AAC3B,MAAA,QAAA,CAAS,CAAC,CAAA;AAAA,IACZ,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,KAAA,EAAO,MAAA,GAAS,KAAA,GAAQ,MAAS,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,KAAA,EAAO,QAAQ,CAAC,CAAA;AAEpB,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,IAAI,CAAA,EACd,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,QAAA,EACjB,QAAA,EAAA,CAAA,CAAE,gDAAgD,CAAA,EACrD,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,WAAA;AAAA,QACnB,QAAA,EAAQ,IAAA;AAAA,QACR,SAAA,EAAW,CAAA;AAAA,QACX,oBAAA,EAAoB,IAAA;AAAA,QACpB,YAAA,EAAY,EAAE,gDAAgD,CAAA;AAAA,QAC9D,OAAA,EAAS,SAAA;AAAA,QACT,OAAO,KAAA,IAAS,YAAA;AAAA,QAChB,QAAA,EAAU,YAAA;AAAA,QACV,MAAA,EAAQ,WAAA;AAAA,QACR,YAAA,EAAc,CAAC,MAAA,EAAQ,EAAE,UAAS,qBAChC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,OAAA,kBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,kBAAM,GAAA,CAAC,wBAAA,EAAA,EAAyB,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,gBACjD,WAAA,kBAAa,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,gBAC5C,OAAA,EAAS;AAAA;AAAA,aACX;AAAA,YAEF,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEF,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,kBAAW,GAAA,CAAC,cAAA,EAAA,EAAe,aAAA,EAAY,2BAAA,EAA4B,CAAA;AAAA,QACnE,aAAa,CAAA,MAAA,qBAAU,GAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAA,EAAW;AAAA;AAAA;AACnE,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -2,8 +2,7 @@ import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import qs from 'qs';
 import { useMemo, useCallback, useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import '../EntityRelationsGraph/EntityRelationsGraph.esm.js';
-import { Direction } from '../EntityRelationsGraph/types.esm.js';
+import { Direction } from '../../lib/types/graph.esm.js';
 
 function useCatalogGraphPage({
   initialState = {}

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

@@ -1 +1 @@
-{"version":3,"file":"useCatalogGraphPage.esm.js","sources":["../../../src/components/CatalogGraphPage/useCatalogGraphPage.ts"],"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  CompoundEntityRef,\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, useNavigate } from 'react-router-dom';\nimport { Direction } from '../EntityRelationsGraph';\n\nexport type CatalogGraphPageValue = {\n  rootEntityNames: CompoundEntityRef[];\n  setRootEntityNames: (value: CompoundEntityRef[]) => void;\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  curve: 'curveStepBefore' | 'curveMonotoneX';\n  setCurve: Dispatch<\n    React.SetStateAction<'curveStepBefore' | 'curveMonotoneX'>\n  >;\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    curve?: 'curveStepBefore' | 'curveMonotoneX';\n  };\n}): CatalogGraphPageValue {\n  const location = useLocation();\n  const navigate = useNavigate();\n\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        curve?: string[] | 'curveStepBefore' | 'curveMonotoneX';\n      },\n    [location.search],\n  );\n\n  const rootEntityNames = useMemo(\n    () =>\n      (Array.isArray(query.rootEntityRefs)\n        ? query.rootEntityRefs\n        : initialState?.rootEntityRefs ?? []\n      ).map(r => parseEntityRef(r)),\n    [initialState?.rootEntityRefs, query.rootEntityRefs],\n  );\n\n  const setRootEntityNames = useCallback(\n    (value: CompoundEntityRef[]) => {\n      const areSame =\n        rootEntityNames.length === value.length &&\n        rootEntityNames.every(\n          (r, i) => stringifyEntityRef(r) === stringifyEntityRef(value[i]),\n        );\n\n      if (areSame) {\n        return;\n      }\n\n      const newSearch = qs.stringify(\n        {\n          ...query,\n          rootEntityRefs: value.map(r => stringifyEntityRef(r)),\n        },\n        { arrayFormat: 'brackets', addQueryPrefix: true },\n      );\n\n      navigate(newSearch);\n    },\n    [rootEntityNames, navigate, query],\n  );\n\n  const [maxDepth, setMaxDepth] = useState<number>(() =>\n    typeof query.maxDepth === 'string'\n      ? parseMaxDepth(query.maxDepth)\n      : initialState?.maxDepth ?? Number.POSITIVE_INFINITY,\n  );\n\n  const [selectedRelations, setSelectedRelations] = useState<\n    string[] | undefined\n  >(() =>\n    Array.isArray(query.selectedRelations)\n      ? query.selectedRelations\n      : initialState?.selectedRelations,\n  );\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\n  const [unidirectional, setUnidirectional] = useState<boolean>(() =>\n    typeof query.unidirectional === 'string'\n      ? query.unidirectional === 'true'\n      : initialState?.unidirectional ?? true,\n  );\n\n  const [mergeRelations, setMergeRelations] = useState<boolean>(() =>\n    typeof query.mergeRelations === 'string'\n      ? query.mergeRelations === 'true'\n      : initialState?.mergeRelations ?? true,\n  );\n\n  const [direction, setDirection] = useState<Direction>(() =>\n    typeof query.direction === 'string'\n      ? query.direction\n      : initialState?.direction ?? Direction.LEFT_RIGHT,\n  );\n\n  const [curve, setCurve] = useState<'curveStepBefore' | 'curveMonotoneX'>(() =>\n    typeof query.curve === 'string'\n      ? query.curve\n      : initialState?.curve ?? 'curveMonotoneX',\n  );\n\n  const [showFilters, setShowFilters] = useState<boolean>(() =>\n    typeof query.showFilters === 'string'\n      ? query.showFilters === 'true'\n      : initialState?.showFilters ?? true,\n  );\n\n  const toggleShowFilters = useCallback(\n    () => setShowFilters(s => !s),\n    [setShowFilters],\n  );\n\n  useEffect(() => {\n    const newParams = qs.stringify(\n      {\n        rootEntityRefs: rootEntityNames.map(stringifyEntityRef),\n        maxDepth: isFinite(maxDepth) ? maxDepth : '∞',\n        selectedKinds,\n        selectedRelations,\n        unidirectional,\n        mergeRelations,\n        direction,\n        showFilters,\n        curve,\n      },\n      { arrayFormat: 'brackets', addQueryPrefix: true },\n    );\n\n    navigate(newParams, { replace: true });\n  }, [\n    maxDepth,\n    curve,\n    selectedKinds,\n    selectedRelations,\n    unidirectional,\n    mergeRelations,\n    direction,\n    showFilters,\n    rootEntityNames,\n    navigate,\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    curve,\n    setCurve,\n    showFilters,\n    toggleShowFilters,\n  };\n}\n\nfunction parseMaxDepth(value: string): number {\n  return value === '∞' ? Number.POSITIVE_INFINITY : Number(value);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCatalogGraphPage.esm.js","sources":["../../../src/components/CatalogGraphPage/useCatalogGraphPage.ts"],"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  CompoundEntityRef,\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, useNavigate } from 'react-router-dom';\nimport { Direction } from '../../lib/types';\n\nexport type CatalogGraphPageValue = {\n  rootEntityNames: CompoundEntityRef[];\n  setRootEntityNames: (value: CompoundEntityRef[]) => void;\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  curve: 'curveStepBefore' | 'curveMonotoneX';\n  setCurve: Dispatch<\n    React.SetStateAction<'curveStepBefore' | 'curveMonotoneX'>\n  >;\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    curve?: 'curveStepBefore' | 'curveMonotoneX';\n  };\n}): CatalogGraphPageValue {\n  const location = useLocation();\n  const navigate = useNavigate();\n\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        curve?: string[] | 'curveStepBefore' | 'curveMonotoneX';\n      },\n    [location.search],\n  );\n\n  const rootEntityNames = useMemo(\n    () =>\n      (Array.isArray(query.rootEntityRefs)\n        ? query.rootEntityRefs\n        : initialState?.rootEntityRefs ?? []\n      ).map(r => parseEntityRef(r)),\n    [initialState?.rootEntityRefs, query.rootEntityRefs],\n  );\n\n  const setRootEntityNames = useCallback(\n    (value: CompoundEntityRef[]) => {\n      const areSame =\n        rootEntityNames.length === value.length &&\n        rootEntityNames.every(\n          (r, i) => stringifyEntityRef(r) === stringifyEntityRef(value[i]),\n        );\n\n      if (areSame) {\n        return;\n      }\n\n      const newSearch = qs.stringify(\n        {\n          ...query,\n          rootEntityRefs: value.map(r => stringifyEntityRef(r)),\n        },\n        { arrayFormat: 'brackets', addQueryPrefix: true },\n      );\n\n      navigate(newSearch);\n    },\n    [rootEntityNames, navigate, query],\n  );\n\n  const [maxDepth, setMaxDepth] = useState<number>(() =>\n    typeof query.maxDepth === 'string'\n      ? parseMaxDepth(query.maxDepth)\n      : initialState?.maxDepth ?? Number.POSITIVE_INFINITY,\n  );\n\n  const [selectedRelations, setSelectedRelations] = useState<\n    string[] | undefined\n  >(() =>\n    Array.isArray(query.selectedRelations)\n      ? query.selectedRelations\n      : initialState?.selectedRelations,\n  );\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\n  const [unidirectional, setUnidirectional] = useState<boolean>(() =>\n    typeof query.unidirectional === 'string'\n      ? query.unidirectional === 'true'\n      : initialState?.unidirectional ?? true,\n  );\n\n  const [mergeRelations, setMergeRelations] = useState<boolean>(() =>\n    typeof query.mergeRelations === 'string'\n      ? query.mergeRelations === 'true'\n      : initialState?.mergeRelations ?? true,\n  );\n\n  const [direction, setDirection] = useState<Direction>(() =>\n    typeof query.direction === 'string'\n      ? query.direction\n      : initialState?.direction ?? Direction.LEFT_RIGHT,\n  );\n\n  const [curve, setCurve] = useState<'curveStepBefore' | 'curveMonotoneX'>(() =>\n    typeof query.curve === 'string'\n      ? query.curve\n      : initialState?.curve ?? 'curveMonotoneX',\n  );\n\n  const [showFilters, setShowFilters] = useState<boolean>(() =>\n    typeof query.showFilters === 'string'\n      ? query.showFilters === 'true'\n      : initialState?.showFilters ?? true,\n  );\n\n  const toggleShowFilters = useCallback(\n    () => setShowFilters(s => !s),\n    [setShowFilters],\n  );\n\n  useEffect(() => {\n    const newParams = qs.stringify(\n      {\n        rootEntityRefs: rootEntityNames.map(stringifyEntityRef),\n        maxDepth: isFinite(maxDepth) ? maxDepth : '∞',\n        selectedKinds,\n        selectedRelations,\n        unidirectional,\n        mergeRelations,\n        direction,\n        showFilters,\n        curve,\n      },\n      { arrayFormat: 'brackets', addQueryPrefix: true },\n    );\n\n    navigate(newParams, { replace: true });\n  }, [\n    maxDepth,\n    curve,\n    selectedKinds,\n    selectedRelations,\n    unidirectional,\n    mergeRelations,\n    direction,\n    showFilters,\n    rootEntityNames,\n    navigate,\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    curve,\n    setCurve,\n    showFilters,\n    toggleShowFilters,\n  };\n}\n\nfunction parseMaxDepth(value: string): number {\n  return value === '∞' ? Number.POSITIVE_INFINITY : Number(value);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/EntityRelationsGraph/DefaultRenderLabel.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRenderLabel.esm.js","sources":["../../../src/components/EntityRelationsGraph/DefaultRenderLabel.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 makeStyles from '@material-ui/core/styles/makeStyles';\nimport { EntityEdgeData } from './types';\nimport classNames from 'classnames';\n\n/** @public */\nexport type CustomLabelClassKey = 'text' | 'secondary';\n\nconst useStyles = makeStyles(\n  theme => ({\n    text: {\n      fill: theme.palette.textContrast,\n    },\n    secondary: {\n      fill: theme.palette.textSubtle,\n    },\n  }),\n  { name: 'PluginCatalogGraphCustomLabel' },\n);\n\nexport function DefaultRenderLabel({\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 % 2 !== 0 && classes.secondary)}>\n          {i > 0 && <tspan> / </tspan>}\n          {r}\n        </tspan>\n      ))}\n    </text>\n  );\n}\n"],"names":[],"mappings":";;;;AAuBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,MAAM,OAAA,CAAQ;AAAA,KACtB;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,MAAM,OAAA,CAAQ;AAAA;AACtB,GACF,CAAA;AAAA,EACA,EAAE,MAAM,+BAAA;AACV,CAAA;AAEO,SAAS,kBAAA,CAAmB;AAAA,EACjC,IAAA,EAAM,EAAE,SAAA;AACV,CAAA,EAA0D;AACxD,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,uBACE,GAAA,CAAC,UAAK,SAAA,EAAW,OAAA,CAAQ,MAAM,UAAA,EAAW,QAAA,EACvC,oBAAU,GAAA,CAAI,CAAC,GAAG,CAAA,qBACjB,IAAA,CAAC,WAAc,SAAA,EAAW,UAAA,CAAW,IAAI,CAAA,KAAM,CAAA,IAAK,OAAA,CAAQ,SAAS,CAAA,EAClE,QAAA,EAAA;AAAA,IAAA,CAAA,GAAI,CAAA,oBAAK,GAAA,CAAC,OAAA,EAAA,EAAM,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,IACnB;AAAA,GAAA,EAAA,EAFS,CAGZ,CACD,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DefaultRenderLabel.esm.js","sources":["../../../src/components/EntityRelationsGraph/DefaultRenderLabel.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 makeStyles from '@material-ui/core/styles/makeStyles';\nimport { EntityEdgeData } from '../../lib/types';\nimport classNames from 'classnames';\n\n/** @public */\nexport type CustomLabelClassKey = 'text' | 'secondary';\n\nconst useStyles = makeStyles(\n  theme => ({\n    text: {\n      fill: theme.palette.textContrast,\n    },\n    secondary: {\n      fill: theme.palette.textSubtle,\n    },\n  }),\n  { name: 'PluginCatalogGraphCustomLabel' },\n);\n\nexport function DefaultRenderLabel({\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 % 2 !== 0 && classes.secondary)}>\n          {i > 0 && <tspan> / </tspan>}\n          {r}\n        </tspan>\n      ))}\n    </text>\n  );\n}\n"],"names":[],"mappings":";;;;AAuBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,MAAM,OAAA,CAAQ;AAAA,KACtB;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,MAAM,OAAA,CAAQ;AAAA;AACtB,GACF,CAAA;AAAA,EACA,EAAE,MAAM,+BAAA;AACV,CAAA;AAEO,SAAS,kBAAA,CAAmB;AAAA,EACjC,IAAA,EAAM,EAAE,SAAA;AACV,CAAA,EAA0D;AACxD,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,uBACE,GAAA,CAAC,UAAK,SAAA,EAAW,OAAA,CAAQ,MAAM,UAAA,EAAW,QAAA,EACvC,oBAAU,GAAA,CAAI,CAAC,GAAG,CAAA,qBACjB,IAAA,CAAC,WAAc,SAAA,EAAW,UAAA,CAAW,IAAI,CAAA,KAAM,CAAA,IAAK,OAAA,CAAQ,SAAS,CAAA,EAClE,QAAA,EAAA;AAAA,IAAA,CAAA,GAAI,CAAA,oBAAK,GAAA,CAAC,OAAA,EAAA,EAAM,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,IACnB;AAAA,GAAA,EAAA,EAFS,CAGZ,CACD,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/EntityRelationsGraph/DefaultRenderNode.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRenderNode.esm.js","sources":["../../../src/components/EntityRelationsGraph/DefaultRenderNode.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 { IconComponent } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { EntityIcon } from './EntityIcon';\nimport { EntityNodeData } from './types';\nimport { DEFAULT_NAMESPACE } from '@backstage/catalog-model';\n\n/** @public */\nexport type CustomNodeClassKey = 'node' | 'text' | 'clickable';\n\nconst useStyles = makeStyles(\n  theme => ({\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  { name: 'PluginCatalogGraphCustomNode' },\n);\n\nexport function DefaultRenderNode({\n  node: { id, entity, color = 'default', focused, onClick },\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  const entityRefPresentationSnapshot = useEntityPresentation(entity, {\n    defaultNamespace: DEFAULT_NAMESPACE,\n  });\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 hasKindIcon = !!entityRefPresentationSnapshot.Icon;\n  const padding = 10;\n  const iconSize = height;\n  const paddedIconWidth = hasKindIcon ? iconSize + padding : 0;\n  const paddedWidth = paddedIconWidth + width + padding * 2;\n  const paddedHeight = height + padding * 2;\n\n  const displayTitle = entityRefPresentationSnapshot.primaryTitle ?? 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      {hasKindIcon && (\n        <EntityIcon\n          icon={entityRefPresentationSnapshot.Icon as IconComponent}\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      <title>{entityRefPresentationSnapshot.entityRef}</title>\n    </g>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DefaultRenderNode.esm.js","sources":["../../../src/components/EntityRelationsGraph/DefaultRenderNode.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 { IconComponent } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { EntityIcon } from './EntityIcon';\nimport { EntityNodeData } from '../../lib/types';\nimport { DEFAULT_NAMESPACE } from '@backstage/catalog-model';\n\n/** @public */\nexport type CustomNodeClassKey = 'node' | 'text' | 'clickable';\n\nconst useStyles = makeStyles(\n  theme => ({\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  { name: 'PluginCatalogGraphCustomNode' },\n);\n\nexport function DefaultRenderNode({\n  node: { id, entity, color = 'default', focused, onClick },\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  const entityRefPresentationSnapshot = useEntityPresentation(entity, {\n    defaultNamespace: DEFAULT_NAMESPACE,\n  });\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 hasKindIcon = !!entityRefPresentationSnapshot.Icon;\n  const padding = 10;\n  const iconSize = height;\n  const paddedIconWidth = hasKindIcon ? iconSize + padding : 0;\n  const paddedWidth = paddedIconWidth + width + padding * 2;\n  const paddedHeight = height + padding * 2;\n\n  const displayTitle = entityRefPresentationSnapshot.primaryTitle ?? 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      {hasKindIcon && (\n        <EntityIcon\n          icon={entityRefPresentationSnapshot.Icon as IconComponent}\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      <title>{entityRefPresentationSnapshot.entityRef}</title>\n    </g>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/EntityRelationsGraph/EntityRelationsGraph.esm.js

@@ -8,8 +8,7 @@ import classNames from 'classnames';
 import { useMemo, useEffect } from 'react';
 import { DefaultRenderLabel } from './DefaultRenderLabel.esm.js';
 import { DefaultRenderNode } from './DefaultRenderNode.esm.js';
-import { ALL_RELATION_PAIRS } from './relations.esm.js';
-import { Direction } from './types.esm.js';
+import { Direction } from '../../lib/types/graph.esm.js';
 import { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges.esm.js';
 
 const useStyles = makeStyles(
@@ -56,7 +55,7 @@ const EntityRelationsGraph = (props) => {
     entityFilter,
     direction = Direction.LEFT_RIGHT,
     onNodeClick,
-    relationPairs = ALL_RELATION_PAIRS,
+    relationPairs,
     className,
     zoom = "enabled",
     renderNode,