@backstage/plugin-catalog-graph 0.5.3-next.1 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @backstage/plugin-catalog-graph
 
+## 0.5.3
+
+### Patch Changes
+
+- a2d7ae7: Ensure the catalog graph entity card respects the height prop so the visualization scales down properly on wide screens.
+- 1c7e1ce: - Revert `viewbox` back to old values.
+  - Added `fullScreen` prop to `EntityCatalogGraphCard`
+- b2bef92: Convert all enums to erasable-syntax compliant patterns
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.13.0
+  - @backstage/core-compat-api@0.5.4
+  - @backstage/plugin-catalog-react@1.21.3
+  - @backstage/core-components@0.18.3
+  - @backstage/core-plugin-api@1.12.0
+  - @backstage/catalog-model@1.7.6
+  - @backstage/catalog-client@1.12.1
+
+## 0.5.3-next.2
+
+### Patch Changes
+
+- a2d7ae7: Ensure the catalog graph entity card respects the height prop so the visualization scales down properly on wide screens.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.21.3-next.2
+  - @backstage/frontend-plugin-api@0.12.2-next.2
+  - @backstage/core-components@0.18.3-next.2
+
 ## 0.5.3-next.1
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -37,7 +37,7 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         namespace: string;
     }>;
 }, {
-    "api:catalog-graph": _backstage_frontend_plugin_api.ExtensionDefinition<{
+    "api:catalog-graph": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         kind: "api";
         name: undefined;
         config: {};
@@ -46,7 +46,7 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         inputs: {};
         params: <TApi, TImpl extends TApi, TDeps extends { [name in string]: unknown; }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
     }>;
-    "entity-card:catalog-graph/relations": _backstage_frontend_plugin_api.ExtensionDefinition<{
+    "entity-card:catalog-graph/relations": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         config: {
             kinds: string[] | undefined;
             relations: string[] | undefined;
@@ -100,7 +100,7 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
             type?: _backstage_plugin_catalog_react_alpha.EntityCardType;
         };
     }>;
-    "page:catalog-graph": _backstage_frontend_plugin_api.ExtensionDefinition<{
+    "page:catalog-graph": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         config: {
             selectedKinds: string[] | undefined;
             selectedRelations: string[] | undefined;

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

@@ -12,19 +12,24 @@ import { EntityRelationsGraph } from '../EntityRelationsGraph/EntityRelationsGra
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { catalogGraphTranslationRef } from '../../translation.esm.js';
 import { Direction } from '../../lib/types/graph.esm.js';
+import classNames from 'classnames';
 
 const useStyles = makeStyles(
   {
     card: ({ height }) => ({
       display: "flex",
       flexDirection: "column",
-      maxHeight: height,
-      minHeight: height
+      ...height && {
+        height,
+        maxHeight: height,
+        minHeight: height
+      }
     }),
-    graph: {
-      flex: 1,
-      minHeight: 0
-    }
+    graph: ({ height }) => ({
+      flex: height ? "0 0 auto" : 1,
+      minHeight: 0,
+      ...height && { height }
+    })
   },
   { name: "PluginCatalogGraphCatalogGraphCard" }
 );
@@ -103,7 +108,7 @@ const CatalogGraphCard = (props) => {
           ...props,
           rootEntityNames: rootEntityNames || entityName,
           onNodeClick: onNodeClick || defaultOnNodeClick,
-          className: className || classes.graph,
+          className: classNames(classes.graph, className),
           maxDepth,
           unidirectional,
           mergeRelations,

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  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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"}
+{"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';\nimport classNames from 'classnames';\n\n/** @public */\nexport type CatalogGraphCardClassKey = 'card' | 'graph';\n\nconst useStyles = makeStyles<Theme, { height?: number }>(\n  {\n    card: ({ height }) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      ...(height && {\n        height,\n        maxHeight: height,\n        minHeight: height,\n      }),\n    }),\n    graph: ({ height }) => ({\n      flex: height ? '0 0 auto' : 1,\n      minHeight: 0,\n      ...(height && { height }),\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={classNames(classes.graph, className)}\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/EntityRelationsGraph/EntityRelationsGraph.esm.js

@@ -62,7 +62,8 @@ const EntityRelationsGraph = (props) => {
     renderLabel,
     renderEdge,
     curve,
-    showArrowHeads
+    showArrowHeads,
+    allowFullscreen
   } = props;
   const theme = useTheme();
   const classes = useStyles();
@@ -106,7 +107,8 @@ const EntityRelationsGraph = (props) => {
         labelOffset: theme.spacing(1),
         zoom,
         curve,
-        showArrowHeads
+        showArrowHeads,
+        allowFullscreen
       }
     )
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"EntityRelationsGraph.esm.js","sources":["../../../src/components/EntityRelationsGraph/EntityRelationsGraph.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  CompoundEntityRef,\n  Entity,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { MouseEvent, useEffect, useMemo } from 'react';\nimport { DefaultRenderLabel } from './DefaultRenderLabel';\nimport { DefaultRenderNode } from './DefaultRenderNode';\nimport { RelationPairs } from '../../lib/types';\nimport { Direction, EntityEdge, EntityNode } from '../../lib/types';\nimport { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';\n\n/** @public */\nexport type EntityRelationsGraphClassKey = 'progress' | 'container' | 'graph';\n\nconst useStyles = makeStyles(\n  theme => ({\n    progress: {\n      position: 'absolute',\n      left: '50%',\n      top: '50%',\n      marginLeft: '-20px',\n      marginTop: '-20px',\n    },\n    container: {\n      position: 'relative',\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    graph: {\n      width: '100%',\n      flex: 1,\n      // Right now there is no good way to style edges between nodes, we have to\n      // fall back to these hacks:\n      '& path[marker-end]': {\n        transition: 'filter 0.1s ease-in-out',\n      },\n      '& path[marker-end]:hover': {\n        filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,\n      },\n      '& g[data-testid=label]': {\n        transition: 'transform 0s',\n      },\n    },\n  }),\n  { name: 'PluginCatalogGraphEntityRelationsGraph' },\n);\n\n/**\n * @public\n */\nexport type EntityRelationsGraphProps = {\n  rootEntityNames: CompoundEntityRef | CompoundEntityRef[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  entityFilter?: (entity: Entity) => boolean;\n  direction?: Direction;\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n  className?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;\n  renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;\n  renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;\n  curve?: 'curveStepBefore' | 'curveMonotoneX';\n  showArrowHeads?: boolean;\n};\n\n/**\n * Core building block for custom entity relations diagrams.\n *\n * @public\n */\nexport const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {\n  const {\n    rootEntityNames,\n    maxDepth = 2,\n    unidirectional = true,\n    mergeRelations = true,\n    kinds,\n    relations,\n    entityFilter,\n    direction = Direction.LEFT_RIGHT,\n    onNodeClick,\n    relationPairs,\n    className,\n    zoom = 'enabled',\n    renderNode,\n    renderLabel,\n    renderEdge,\n    curve,\n    showArrowHeads,\n  } = props;\n\n  const theme = useTheme();\n  const classes = useStyles();\n  const rootEntityRefs = useMemo(\n    () =>\n      (Array.isArray(rootEntityNames)\n        ? rootEntityNames\n        : [rootEntityNames]\n      ).map(e => stringifyEntityRef(e)),\n    [rootEntityNames],\n  );\n  const errorApi = useApi(errorApiRef);\n  const { loading, error, nodes, edges } = useEntityRelationNodesAndEdges({\n    rootEntityRefs,\n    maxDepth,\n    unidirectional,\n    mergeRelations,\n    kinds,\n    relations,\n    entityFilter,\n    onNodeClick,\n    relationPairs,\n  });\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [errorApi, error]);\n\n  return (\n    <div className={classNames(classes.container, className)}>\n      {loading && <CircularProgress className={classes.progress} />}\n      {nodes && edges && (\n        <DependencyGraph\n          nodes={nodes}\n          edges={edges}\n          renderNode={renderNode || DefaultRenderNode}\n          renderLabel={renderLabel || DefaultRenderLabel}\n          renderEdge={renderEdge}\n          direction={direction}\n          className={classes.graph}\n          fit=\"contain\"\n          paddingX={theme.spacing(4)}\n          paddingY={theme.spacing(4)}\n          labelPosition={DependencyGraphTypes.LabelPosition.RIGHT}\n          labelOffset={theme.spacing(1)}\n          zoom={zoom}\n          curve={curve}\n          showArrowHeads={showArrowHeads}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityRelationsGraph.esm.js","sources":["../../../src/components/EntityRelationsGraph/EntityRelationsGraph.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  CompoundEntityRef,\n  Entity,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { MouseEvent, useEffect, useMemo } from 'react';\nimport { DefaultRenderLabel } from './DefaultRenderLabel';\nimport { DefaultRenderNode } from './DefaultRenderNode';\nimport { RelationPairs } from '../../lib/types';\nimport { Direction, EntityEdge, EntityNode } from '../../lib/types';\nimport { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';\n\n/** @public */\nexport type EntityRelationsGraphClassKey = 'progress' | 'container' | 'graph';\n\nconst useStyles = makeStyles(\n  theme => ({\n    progress: {\n      position: 'absolute',\n      left: '50%',\n      top: '50%',\n      marginLeft: '-20px',\n      marginTop: '-20px',\n    },\n    container: {\n      position: 'relative',\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    graph: {\n      width: '100%',\n      flex: 1,\n      // Right now there is no good way to style edges between nodes, we have to\n      // fall back to these hacks:\n      '& path[marker-end]': {\n        transition: 'filter 0.1s ease-in-out',\n      },\n      '& path[marker-end]:hover': {\n        filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,\n      },\n      '& g[data-testid=label]': {\n        transition: 'transform 0s',\n      },\n    },\n  }),\n  { name: 'PluginCatalogGraphEntityRelationsGraph' },\n);\n\n/**\n * @public\n */\nexport type EntityRelationsGraphProps = {\n  rootEntityNames: CompoundEntityRef | CompoundEntityRef[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  entityFilter?: (entity: Entity) => boolean;\n  direction?: Direction;\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n  className?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;\n  renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;\n  renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;\n  curve?: 'curveStepBefore' | 'curveMonotoneX';\n  showArrowHeads?: boolean;\n  allowFullscreen?: boolean;\n};\n\n/**\n * Core building block for custom entity relations diagrams.\n *\n * @public\n */\nexport const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {\n  const {\n    rootEntityNames,\n    maxDepth = 2,\n    unidirectional = true,\n    mergeRelations = true,\n    kinds,\n    relations,\n    entityFilter,\n    direction = Direction.LEFT_RIGHT,\n    onNodeClick,\n    relationPairs,\n    className,\n    zoom = 'enabled',\n    renderNode,\n    renderLabel,\n    renderEdge,\n    curve,\n    showArrowHeads,\n    allowFullscreen,\n  } = props;\n\n  const theme = useTheme();\n  const classes = useStyles();\n  const rootEntityRefs = useMemo(\n    () =>\n      (Array.isArray(rootEntityNames)\n        ? rootEntityNames\n        : [rootEntityNames]\n      ).map(e => stringifyEntityRef(e)),\n    [rootEntityNames],\n  );\n  const errorApi = useApi(errorApiRef);\n  const { loading, error, nodes, edges } = useEntityRelationNodesAndEdges({\n    rootEntityRefs,\n    maxDepth,\n    unidirectional,\n    mergeRelations,\n    kinds,\n    relations,\n    entityFilter,\n    onNodeClick,\n    relationPairs,\n  });\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [errorApi, error]);\n\n  return (\n    <div className={classNames(classes.container, className)}>\n      {loading && <CircularProgress className={classes.progress} />}\n      {nodes && edges && (\n        <DependencyGraph\n          nodes={nodes}\n          edges={edges}\n          renderNode={renderNode || DefaultRenderNode}\n          renderLabel={renderLabel || DefaultRenderLabel}\n          renderEdge={renderEdge}\n          direction={direction}\n          className={classes.graph}\n          fit=\"contain\"\n          paddingX={theme.spacing(4)}\n          paddingY={theme.spacing(4)}\n          labelPosition={DependencyGraphTypes.LabelPosition.RIGHT}\n          labelOffset={theme.spacing(1)}\n          zoom={zoom}\n          curve={curve}\n          showArrowHeads={showArrowHeads}\n          allowFullscreen={allowFullscreen}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -165,6 +165,7 @@ type EntityRelationsGraphProps = {
     renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;
     curve?: 'curveStepBefore' | 'curveMonotoneX';
     showArrowHeads?: boolean;
+    allowFullscreen?: boolean;
 };
 /**
  * Core building block for custom entity relations diagrams.

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-catalog-graph";
-var version = "0.5.3-next.1";
+var version = "0.5.3";
 var backstage = {
 	role: "frontend-plugin",
 	pluginId: "catalog-graph",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-graph",
-  "version": "0.5.3-next.1",
+  "version": "0.5.3",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "catalog-graph",
@@ -61,14 +61,14 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "1.12.1-next.0",
-    "@backstage/catalog-model": "1.7.6-next.0",
-    "@backstage/core-compat-api": "0.5.4-next.0",
-    "@backstage/core-components": "0.18.3-next.1",
-    "@backstage/core-plugin-api": "1.11.2-next.1",
-    "@backstage/frontend-plugin-api": "0.12.2-next.1",
-    "@backstage/plugin-catalog-react": "1.21.3-next.1",
-    "@backstage/types": "1.2.2",
+    "@backstage/catalog-client": "^1.12.1",
+    "@backstage/catalog-model": "^1.7.6",
+    "@backstage/core-compat-api": "^0.5.4",
+    "@backstage/core-components": "^0.18.3",
+    "@backstage/core-plugin-api": "^1.12.0",
+    "@backstage/frontend-plugin-api": "^0.13.0",
+    "@backstage/plugin-catalog-react": "^1.21.3",
+    "@backstage/types": "^1.2.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -79,11 +79,11 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.34.5-next.1",
-    "@backstage/core-app-api": "1.19.2-next.1",
-    "@backstage/dev-utils": "1.1.17-next.1",
-    "@backstage/plugin-catalog": "1.32.0-next.1",
-    "@backstage/test-utils": "1.7.13-next.0",
+    "@backstage/cli": "^0.34.5",
+    "@backstage/core-app-api": "^1.19.2",
+    "@backstage/dev-utils": "^1.1.17",
+    "@backstage/plugin-catalog": "^1.32.0",
+    "@backstage/test-utils": "^1.7.13",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",