@backstage/plugin-catalog-graph 0.4.20 → 0.4.21-next.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @backstage/plugin-catalog-graph
 
+## 0.4.21-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/catalog-model@1.7.5-next.0
+  - @backstage/plugin-catalog-react@1.19.1-next.1
+  - @backstage/catalog-client@1.10.2-next.0
+  - @backstage/core-components@0.17.4-next.1
+  - @backstage/core-plugin-api@1.10.9-next.0
+  - @backstage/core-compat-api@0.4.4-next.1
+  - @backstage/frontend-plugin-api@0.10.4-next.1
+
+## 0.4.21-next.0
+
+### Patch Changes
+
+- fe1a2f4: Catalog graph plugin support i18n
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.19.1-next.0
+  - @backstage/core-components@0.17.4-next.0
+  - @backstage/catalog-client@1.10.1
+  - @backstage/catalog-model@1.7.4
+  - @backstage/core-compat-api@0.4.4-next.0
+  - @backstage/core-plugin-api@1.10.8
+  - @backstage/frontend-plugin-api@0.10.4-next.0
+  - @backstage/types@1.2.1
+
 ## 0.4.20
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -4,6 +4,31 @@ import * as _backstage_plugin_catalog_react_alpha from '@backstage/plugin-catalo
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 import { Direction } from '@backstage/plugin-catalog-graph';
 
+/** @alpha */
+declare const catalogGraphTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"catalog-graph", {
+    readonly "catalogGraphCard.title": "Relations";
+    readonly "catalogGraphCard.deepLinkTitle": "View graph";
+    readonly "catalogGraphPage.title": "Catalog Graph";
+    readonly "catalogGraphPage.filterToggleButtonTitle": "Filters";
+    readonly "catalogGraphPage.supportButtonDescription": "Start tracking your component in by adding it to the software catalog.";
+    readonly "catalogGraphPage.simplifiedSwitchLabel": "Simplified";
+    readonly "catalogGraphPage.mergeRelationsSwitchLabel": "Merge relations";
+    readonly "catalogGraphPage.zoomOutDescription": "Use pinch &amp; zoom to move around the diagram. Click to change active node, shift click to navigate to entity.";
+    readonly "catalogGraphPage.curveFilter.title": "Curve";
+    readonly "catalogGraphPage.curveFilter.curveStepBefore": "Step Before";
+    readonly "catalogGraphPage.curveFilter.curveMonotoneX": "Monotone X";
+    readonly "catalogGraphPage.directionFilter.title": "Direction";
+    readonly "catalogGraphPage.directionFilter.leftToRight": "Left to right";
+    readonly "catalogGraphPage.directionFilter.rightToLeft": "Right to left";
+    readonly "catalogGraphPage.directionFilter.topToBottom": "Top to bottom";
+    readonly "catalogGraphPage.directionFilter.bottomToTop": "Bottom to top";
+    readonly "catalogGraphPage.maxDepthFilter.title": "Max depth";
+    readonly "catalogGraphPage.maxDepthFilter.inputPlaceholder": "∞ Infinite";
+    readonly "catalogGraphPage.maxDepthFilter.clearButtonAriaLabel": "clear max depth";
+    readonly "catalogGraphPage.selectedKindsFilter.title": "Kinds";
+    readonly "catalogGraphPage.selectedRelationsFilter.title": "Relations";
+}>;
+
 declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
     catalogGraph: _backstage_frontend_plugin_api.RouteRef<undefined>;
 }, {
@@ -121,4 +146,4 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
     }>;
 }>;
 
-export { _default as default };
+export { catalogGraphTranslationRef, _default as default };

package/dist/alpha.esm.js

@@ -4,6 +4,7 @@ import { compatWrapper, convertLegacyRouteRef } from '@backstage/core-compat-api
 import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
 import { catalogGraphRouteRef, catalogEntityRouteRef } from './routes.esm.js';
 import { Direction } from '@backstage/plugin-catalog-graph';
+export { catalogGraphTranslationRef } from './translation.esm.js';
 
 const CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({
   name: "relations",

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createFrontendPlugin,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';\nimport { Direction } from '@backstage/plugin-catalog-graph';\n\nconst CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({\n  name: 'relations',\n  config: {\n    schema: {\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      // Skipping a \"variant\" config for now, defaulting to \"gridItem\" in the component\n      // For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252\n      title: z => z.string().optional(),\n      height: z => z.number().optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      loader: async () =>\n        import('./components/CatalogGraphCard').then(m =>\n          compatWrapper(<m.CatalogGraphCard {...config} />),\n        ),\n    });\n  },\n});\n\nconst CatalogGraphPage = PageBlueprint.makeWithOverrides({\n  config: {\n    schema: {\n      selectedKinds: z => z.array(z.string()).optional(),\n      selectedRelations: z => z.array(z.string()).optional(),\n      rootEntityRefs: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      showFilters: z => z.boolean().optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      defaultPath: '/catalog-graph',\n      routeRef: convertLegacyRouteRef(catalogGraphRouteRef),\n      loader: () =>\n        import('./components/CatalogGraphPage').then(m =>\n          compatWrapper(<m.CatalogGraphPage {...config} />),\n        ),\n    });\n  },\n});\n\nexport default createFrontendPlugin({\n  pluginId: 'catalog-graph',\n  info: { packageJson: () => import('../package.json') },\n  routes: {\n    catalogGraph: convertLegacyRouteRef(catalogGraphRouteRef),\n  },\n  externalRoutes: {\n    catalogEntity: convertLegacyRouteRef(catalogEntityRouteRef),\n  },\n  extensions: [CatalogGraphPage, CatalogGraphEntityCard],\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createFrontendPlugin,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';\nimport { Direction } from '@backstage/plugin-catalog-graph';\n\nconst CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({\n  name: 'relations',\n  config: {\n    schema: {\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      // Skipping a \"variant\" config for now, defaulting to \"gridItem\" in the component\n      // For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252\n      title: z => z.string().optional(),\n      height: z => z.number().optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      loader: async () =>\n        import('./components/CatalogGraphCard').then(m =>\n          compatWrapper(<m.CatalogGraphCard {...config} />),\n        ),\n    });\n  },\n});\n\nconst CatalogGraphPage = PageBlueprint.makeWithOverrides({\n  config: {\n    schema: {\n      selectedKinds: z => z.array(z.string()).optional(),\n      selectedRelations: z => z.array(z.string()).optional(),\n      rootEntityRefs: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      showFilters: z => z.boolean().optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      defaultPath: '/catalog-graph',\n      routeRef: convertLegacyRouteRef(catalogGraphRouteRef),\n      loader: () =>\n        import('./components/CatalogGraphPage').then(m =>\n          compatWrapper(<m.CatalogGraphPage {...config} />),\n        ),\n    });\n  },\n});\n\nexport default createFrontendPlugin({\n  pluginId: 'catalog-graph',\n  info: { packageJson: () => import('../package.json') },\n  routes: {\n    catalogGraph: convertLegacyRouteRef(catalogGraphRouteRef),\n  },\n  externalRoutes: {\n    catalogEntity: convertLegacyRouteRef(catalogEntityRouteRef),\n  },\n  extensions: [CatalogGraphPage, CatalogGraphEntityCard],\n});\n\nexport { catalogGraphTranslationRef } from './translation';\n"],"names":[],"mappings":"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"}

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

@@ -11,6 +11,8 @@ 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';
 
 const useStyles = makeStyles(
   {
@@ -28,6 +30,7 @@ const useStyles = makeStyles(
   { name: "PluginCatalogGraphCatalogGraphCard" }
 );
 const CatalogGraphCard = (props) => {
+  const { t } = useTranslationRef(catalogGraphTranslationRef);
   const {
     variant = "gridItem",
     relationPairs = ALL_RELATION_PAIRS,
@@ -43,7 +46,7 @@ const CatalogGraphCard = (props) => {
     action,
     rootEntityNames,
     onNodeClick,
-    title = "Relations",
+    title = t("catalogGraphCard.title"),
     zoom = "enable-on-click"
   } = props;
   const { entity } = useEntity();
@@ -92,7 +95,7 @@ const CatalogGraphCard = (props) => {
       variant,
       noPadding: true,
       deepLink: {
-        title: "View graph",
+        title: t("catalogGraphCard.deepLinkTitle"),
         link: catalogGraphUrl
       },
       children: /* @__PURE__ */ jsx(

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';\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 {\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 = 'Relations',\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: 'View graph',\n        link: catalogGraphUrl,\n      }}\n    >\n      <EntityRelationsGraph\n        {...props}\n        rootEntityNames={rootEntityNames || entityName}\n        onNodeClick={onNodeClick || defaultOnNodeClick}\n        className={className || classes.graph}\n        maxDepth={maxDepth}\n        unidirectional={unidirectional}\n        mergeRelations={mergeRelations}\n        direction={direction}\n        relationPairs={relationPairs}\n        entityFilter={entityFilter}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4CA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,IAAM,EAAA,CAAC,EAAE,MAAA,EAAc,MAAA;AAAA,MACrB,OAAS,EAAA,MAAA;AAAA,MACT,aAAe,EAAA,QAAA;AAAA,MACf,SAAW,EAAA,MAAA;AAAA,MACX,SAAW,EAAA;AAAA,KACb,CAAA;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,SAAW,EAAA;AAAA;AACb,GACF;AAAA,EACA,EAAE,MAAM,oCAAqC;AAC/C,CAAA;AAEa,MAAA,gBAAA,GAAmB,CAC9B,KAMG,KAAA;AACH,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,UAAA;AAAA,IACV,aAAgB,GAAA,kBAAA;AAAA,IAChB,QAAW,GAAA,CAAA;AAAA,IACX,cAAiB,GAAA,IAAA;AAAA,IACjB,cAAiB,GAAA,IAAA;AAAA,IACjB,YAAY,SAAU,CAAA,UAAA;AAAA,IACtB,KAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAQ,GAAA,WAAA;AAAA,IACR,IAAO,GAAA;AAAA,GACL,GAAA,KAAA;AAEJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM,oBAAA,CAAqB,MAAM,CAAG,EAAA,CAAC,MAAM,CAAC,CAAA;AACvE,EAAM,MAAA,kBAAA,GAAqB,YAAY,cAAc,CAAA;AACrD,EAAM,MAAA,iBAAA,GAAoB,YAAY,oBAAoB,CAAA;AAC1D,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,OAAU,GAAA,SAAA,CAAU,EAAE,MAAA,EAAQ,CAAA;AACpC,EAAA,MAAM,YAAY,YAAa,EAAA;AAE/B,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,MAAkB,CAA2B,KAAA;AAC5C,MAAM,MAAA,cAAA,GAAiB,cAAe,CAAA,IAAA,CAAK,EAAE,CAAA;AAC7C,MAAA,MAAM,OAAO,kBAAmB,CAAA;AAAA,QAC9B,IAAM,EAAA,cAAA,CAAe,IAAK,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAAA,QACnD,SAAW,EAAA,cAAA,CAAe,SAAU,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAAA,QAC7D,MAAM,cAAe,CAAA;AAAA,OACtB,CAAA;AACD,MAAU,SAAA,CAAA,YAAA;AAAA,QACR,OAAA;AAAA,QACA,IAAK,CAAA,MAAA,CAAO,QAAS,CAAA,KAAA,IAAS,kBAAkB,cAAc,CAAA;AAAA,QAC9D,EAAE,UAAA,EAAY,EAAE,EAAA,EAAI,MAAO;AAAA,OAC7B;AACA,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KACf;AAAA,IACA,CAAC,kBAAoB,EAAA,QAAA,EAAU,SAAS;AAAA,GAC1C;AAEA,EAAA,MAAM,qBAAqB,EAAG,CAAA,SAAA;AAAA,IAC5B;AAAA,MACE,cAAgB,EAAA,CAAC,kBAAmB,CAAA,MAAM,CAAC,CAAA;AAAA,MAC3C,QAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAe,EAAA,KAAA;AAAA,MACf,iBAAmB,EAAA,SAAA;AAAA,MACnB;AAAA,KACF;AAAA,IACA,EAAE,WAAA,EAAa,UAAY,EAAA,cAAA,EAAgB,IAAK;AAAA,GAClD;AACA,EAAA,MAAM,eAAkB,GAAA,CAAA,EAAG,iBAAkB,EAAC,GAAG,kBAAkB,CAAA,CAAA;AAEnE,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,eAAe,OAAQ,CAAA,IAAA;AAAA,MACvB,OAAA;AAAA,MACA,SAAS,EAAA,IAAA;AAAA,MACT,QAAU,EAAA;AAAA,QACR,KAAO,EAAA,YAAA;AAAA,QACP,IAAM,EAAA;AAAA,OACR;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,oBAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,iBAAiB,eAAmB,IAAA,UAAA;AAAA,UACpC,aAAa,WAAe,IAAA,kBAAA;AAAA,UAC5B,SAAA,EAAW,aAAa,OAAQ,CAAA,KAAA;AAAA,UAChC,QAAA;AAAA,UACA,cAAA;AAAA,UACA,cAAA;AAAA,UACA,SAAA;AAAA,UACA,aAAA;AAAA,UACA,YAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
+{"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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"}

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

@@ -21,6 +21,8 @@ import { SelectedKindsFilter } from './SelectedKindsFilter.esm.js';
 import { SelectedRelationsFilter } from './SelectedRelationsFilter.esm.js';
 import { SwitchFilter } from './SwitchFilter.esm.js';
 import { useCatalogGraphPage } from './useCatalogGraphPage.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { catalogGraphTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -82,6 +84,7 @@ const CatalogGraphPage = (props) => {
     initialState,
     entityFilter
   } = props;
+  const { t } = useTranslationRef(catalogGraphTranslationRef);
   const navigate = useNavigate();
   const classes = useStyles();
   const catalogEntityRoute = useRouteRef(entityRouteRef);
@@ -135,7 +138,7 @@ const CatalogGraphPage = (props) => {
     /* @__PURE__ */ jsx(
       Header,
       {
-        title: "Catalog Graph",
+        title: t("catalogGraphPage.title"),
         subtitle: rootEntityNames.map((e) => humanizeEntityRef(e)).join(", ")
       }
     ),
@@ -151,11 +154,12 @@ const CatalogGraphPage = (props) => {
               onChange: () => toggleShowFilters(),
               children: [
                 /* @__PURE__ */ jsx(FilterListIcon, {}),
-                " Filters"
+                " ",
+                t("catalogGraphPage.filterToggleButtonTitle")
               ]
             }
           ),
-          children: /* @__PURE__ */ jsx(SupportButton, { children: "Start tracking your component in by adding it to the software catalog." })
+          children: /* @__PURE__ */ jsx(SupportButton, { children: t("catalogGraphPage.supportButtonDescription") })
         }
       ),
       /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "stretch", className: classes.container, children: [
@@ -183,7 +187,7 @@ const CatalogGraphPage = (props) => {
             {
               value: unidirectional,
               onChange: setUnidirectional,
-              label: "Simplified"
+              label: t("catalogGraphPage.simplifiedSwitchLabel")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -191,7 +195,7 @@ const CatalogGraphPage = (props) => {
             {
               value: mergeRelations,
               onChange: setMergeRelations,
-              label: "Merge Relations"
+              label: t("catalogGraphPage.mergeRelationsSwitchLabel")
             }
           )
         ] }),
@@ -205,7 +209,8 @@ const CatalogGraphPage = (props) => {
               className: classes.legend,
               children: [
                 /* @__PURE__ */ jsx(ZoomOutMap, { className: "icon" }),
-                " Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity."
+                " ",
+                t("catalogGraphPage.zoomOutDescription")
               ]
             }
           ),

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';\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\n  const navigate = useNavigate();\n  const classes = useStyles();\n  const catalogEntityRoute = useRouteRef(entityRouteRef);\n  const {\n    maxDepth,\n    setMaxDepth,\n    selectedKinds,\n    setSelectedKinds,\n    selectedRelations,\n    setSelectedRelations,\n    unidirectional,\n    setUnidirectional,\n    mergeRelations,\n    setMergeRelations,\n    direction,\n    setDirection,\n    curve,\n    setCurve,\n    rootEntityNames,\n    setRootEntityNames,\n    showFilters,\n    toggleShowFilters,\n  } = useCatalogGraphPage({ initialState });\n  const analytics = useAnalytics();\n  const onNodeClick = useCallback(\n    (node: EntityNode, event: MouseEvent<unknown>) => {\n      const nodeEntityName = parseEntityRef(node.id);\n\n      if (event.shiftKey) {\n        const path = catalogEntityRoute({\n          kind: nodeEntityName.kind.toLocaleLowerCase('en-US'),\n          namespace: nodeEntityName.namespace.toLocaleLowerCase('en-US'),\n          name: nodeEntityName.name,\n        });\n\n        analytics.captureEvent(\n          'click',\n          node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),\n          { attributes: { to: path } },\n        );\n        navigate(path);\n      } else {\n        analytics.captureEvent(\n          'click',\n          node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),\n        );\n        setRootEntityNames([nodeEntityName]);\n      }\n    },\n    [catalogEntityRoute, navigate, setRootEntityNames, analytics],\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title=\"Catalog Graph\"\n        subtitle={rootEntityNames.map(e => humanizeEntityRef(e)).join(', ')}\n      />\n      <Content stretch className={classes.content}>\n        <ContentHeader\n          titleComponent={\n            <ToggleButton\n              value=\"show filters\"\n              selected={showFilters}\n              onChange={() => toggleShowFilters()}\n            >\n              <FilterListIcon /> Filters\n            </ToggleButton>\n          }\n        >\n          <SupportButton>\n            Start tracking your component in by adding it to the software\n            catalog.\n          </SupportButton>\n        </ContentHeader>\n        <Grid container alignItems=\"stretch\" className={classes.container}>\n          {showFilters && (\n            <Grid item xs={12} lg={2} className={classes.filters}>\n              <MaxDepthFilter value={maxDepth} onChange={setMaxDepth} />\n              <SelectedKindsFilter\n                value={selectedKinds}\n                onChange={setSelectedKinds}\n              />\n              <SelectedRelationsFilter\n                value={selectedRelations}\n                onChange={setSelectedRelations}\n                relationPairs={relationPairs}\n              />\n              <DirectionFilter value={direction} onChange={setDirection} />\n              <CurveFilter value={curve} onChange={setCurve} />\n              <SwitchFilter\n                value={unidirectional}\n                onChange={setUnidirectional}\n                label=\"Simplified\"\n              />\n              <SwitchFilter\n                value={mergeRelations}\n                onChange={setMergeRelations}\n                label=\"Merge Relations\"\n              />\n            </Grid>\n          )}\n          <Grid item xs className={classes.fullHeight}>\n            <Paper className={classes.graphWrapper}>\n              <Typography\n                variant=\"caption\"\n                color=\"textSecondary\"\n                display=\"block\"\n                className={classes.legend}\n              >\n                <ZoomOutMap className=\"icon\" /> Use pinch &amp; zoom to move\n                around the diagram. Click to change active node, shift click to\n                navigate to entity.\n              </Typography>\n              <EntityRelationsGraph\n                {...props}\n                rootEntityNames={rootEntityNames}\n                maxDepth={maxDepth}\n                kinds={\n                  selectedKinds && selectedKinds.length > 0\n                    ? selectedKinds\n                    : undefined\n                }\n                relations={\n                  selectedRelations && selectedRelations.length > 0\n                    ? selectedRelations\n                    : undefined\n                }\n                mergeRelations={mergeRelations}\n                unidirectional={unidirectional}\n                onNodeClick={onNodeClick}\n                direction={direction}\n                relationPairs={relationPairs}\n                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  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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"}

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

@@ -2,13 +2,16 @@ import { jsx } from 'react/jsx-runtime';
 import { Select } from '@backstage/core-components';
 import Box from '@material-ui/core/Box';
 import { useCallback } from 'react';
+import { catalogGraphTranslationRef } from '../../translation.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 
-const CURVE_DISPLAY_NAMES = {
-  curveMonotoneX: "Monotone X",
-  curveStepBefore: "Step Before"
-};
 const curves = ["curveMonotoneX", "curveStepBefore"];
 const CurveFilter = ({ value, onChange }) => {
+  const { t } = useTranslationRef(catalogGraphTranslationRef);
+  const CURVE_DISPLAY_NAMES = {
+    curveMonotoneX: t("catalogGraphPage.curveFilter.curveMonotoneX"),
+    curveStepBefore: t("catalogGraphPage.curveFilter.curveStepBefore")
+  };
   const handleChange = useCallback(
     (v) => onChange(v),
     [onChange]
@@ -16,7 +19,7 @@ const CurveFilter = ({ value, onChange }) => {
   return /* @__PURE__ */ jsx(Box, { pb: 1, pt: 1, children: /* @__PURE__ */ jsx(
     Select,
     {
-      label: "Curve",
+      label: t("catalogGraphPage.curveFilter.title"),
       selected: value,
       items: curves.map((v) => ({
         label: CURVE_DISPLAY_NAMES[v],

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

@@ -1 +1 @@
-{"version":3,"file":"CurveFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/CurveFilter.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Select, SelectedItems } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport { useCallback } from 'react';\n\ntype Curve = 'curveStepBefore' | 'curveMonotoneX';\nconst CURVE_DISPLAY_NAMES: Record<Curve, string> = {\n  curveMonotoneX: 'Monotone X',\n  curveStepBefore: 'Step Before',\n};\n\nexport type Props = {\n  value: Curve;\n  onChange: (value: 'curveStepBefore' | 'curveMonotoneX') => void;\n};\n\nconst curves: Array<Curve> = ['curveMonotoneX', 'curveStepBefore'];\n\nexport const CurveFilter = ({ value, onChange }: Props) => {\n  const handleChange = useCallback(\n    (v: SelectedItems) => onChange(v as Curve),\n    [onChange],\n  );\n\n  return (\n    <Box pb={1} pt={1}>\n      <Select\n        label=\"Curve\"\n        selected={value}\n        items={curves.map(v => ({\n          label: CURVE_DISPLAY_NAMES[v],\n          value: v,\n        }))}\n        onChange={handleChange}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,mBAA6C,GAAA;AAAA,EACjD,cAAgB,EAAA,YAAA;AAAA,EAChB,eAAiB,EAAA;AACnB,CAAA;AAOA,MAAM,MAAA,GAAuB,CAAC,gBAAA,EAAkB,iBAAiB,CAAA;AAE1D,MAAM,WAAc,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AACzD,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,CAAqB,KAAA,QAAA,CAAS,CAAU,CAAA;AAAA,IACzC,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,QAAU,EAAA,KAAA;AAAA,MACV,KAAA,EAAO,MAAO,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA;AAAA,QACtB,KAAA,EAAO,oBAAoB,CAAC,CAAA;AAAA,QAC5B,KAAO,EAAA;AAAA,OACP,CAAA,CAAA;AAAA,MACF,QAAU,EAAA;AAAA;AAAA,GAEd,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CurveFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/CurveFilter.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Select, SelectedItems } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport { useCallback } from 'react';\nimport { catalogGraphTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\n\ntype Curve = 'curveStepBefore' | 'curveMonotoneX';\n\nexport type Props = {\n  value: Curve;\n  onChange: (value: 'curveStepBefore' | 'curveMonotoneX') => void;\n};\n\nconst curves: Array<Curve> = ['curveMonotoneX', 'curveStepBefore'];\n\nexport const CurveFilter = ({ value, onChange }: Props) => {\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\n  const CURVE_DISPLAY_NAMES: Record<Curve, string> = {\n    curveMonotoneX: t('catalogGraphPage.curveFilter.curveMonotoneX'),\n    curveStepBefore: t('catalogGraphPage.curveFilter.curveStepBefore'),\n  };\n\n  const handleChange = useCallback(\n    (v: SelectedItems) => onChange(v as Curve),\n    [onChange],\n  );\n\n  return (\n    <Box pb={1} pt={1}>\n      <Select\n        label={t('catalogGraphPage.curveFilter.title')}\n        selected={value}\n        items={curves.map(v => ({\n          label: CURVE_DISPLAY_NAMES[v],\n          value: v,\n        }))}\n        onChange={handleChange}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4BA,MAAM,MAAA,GAAuB,CAAC,gBAAA,EAAkB,iBAAiB,CAAA;AAE1D,MAAM,WAAc,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AACzD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAC1D,EAAA,MAAM,mBAA6C,GAAA;AAAA,IACjD,cAAA,EAAgB,EAAE,6CAA6C,CAAA;AAAA,IAC/D,eAAA,EAAiB,EAAE,8CAA8C;AAAA,GACnE;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,CAAqB,KAAA,QAAA,CAAS,CAAU,CAAA;AAAA,IACzC,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,oCAAoC,CAAA;AAAA,MAC7C,QAAU,EAAA,KAAA;AAAA,MACV,KAAA,EAAO,MAAO,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA;AAAA,QACtB,KAAA,EAAO,oBAAoB,CAAC,CAAA;AAAA,QAC5B,KAAO,EAAA;AAAA,OACP,CAAA,CAAA;AAAA,MACF,QAAU,EAAA;AAAA;AAAA,GAEd,EAAA,CAAA;AAEJ;;;;"}

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

@@ -5,14 +5,17 @@ import { useCallback } from 'react';
 import '../EntityRelationsGraph/EntityRelationsGraph.esm.js';
 import '@backstage/catalog-model';
 import { Direction } from '../EntityRelationsGraph/types.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { catalogGraphTranslationRef } from '../../translation.esm.js';
 
-const DIRECTION_DISPLAY_NAMES = {
-  [Direction.LEFT_RIGHT]: "Left to right",
-  [Direction.RIGHT_LEFT]: "Right to left",
-  [Direction.TOP_BOTTOM]: "Top to bottom",
-  [Direction.BOTTOM_TOP]: "Bottom to top"
-};
 const DirectionFilter = ({ value, onChange }) => {
+  const { t } = useTranslationRef(catalogGraphTranslationRef);
+  const DIRECTION_DISPLAY_NAMES = {
+    [Direction.LEFT_RIGHT]: t("catalogGraphPage.directionFilter.leftToRight"),
+    [Direction.RIGHT_LEFT]: t("catalogGraphPage.directionFilter.rightToLeft"),
+    [Direction.TOP_BOTTOM]: t("catalogGraphPage.directionFilter.topToBottom"),
+    [Direction.BOTTOM_TOP]: t("catalogGraphPage.directionFilter.bottomToTop")
+  };
   const handleChange = useCallback(
     (v) => onChange(v),
     [onChange]
@@ -20,7 +23,7 @@ const DirectionFilter = ({ value, onChange }) => {
   return /* @__PURE__ */ jsx(Box, { pb: 1, pt: 1, children: /* @__PURE__ */ jsx(
     Select,
     {
-      label: "Direction",
+      label: t("catalogGraphPage.directionFilter.title"),
       selected: value,
       items: Object.values(Direction).map((v) => ({
         label: DIRECTION_DISPLAY_NAMES[v],

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';\n\nconst DIRECTION_DISPLAY_NAMES = {\n  [Direction.LEFT_RIGHT]: 'Left to right',\n  [Direction.RIGHT_LEFT]: 'Right to left',\n  [Direction.TOP_BOTTOM]: 'Top to bottom',\n  [Direction.BOTTOM_TOP]: 'Bottom to top',\n};\n\nexport type Props = {\n  value: Direction;\n  onChange: (value: Direction) => void;\n};\n\nexport const DirectionFilter = ({ value, onChange }: Props) => {\n  const handleChange = useCallback(\n    (v: SelectedItems) => onChange(v as Direction),\n    [onChange],\n  );\n\n  return (\n    <Box pb={1} pt={1}>\n      <Select\n        label=\"Direction\"\n        selected={value}\n        items={Object.values(Direction).map(v => ({\n          label: DIRECTION_DISPLAY_NAMES[v],\n          value: v,\n        }))}\n        onChange={handleChange}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,uBAA0B,GAAA;AAAA,EAC9B,CAAC,SAAU,CAAA,UAAU,GAAG,eAAA;AAAA,EACxB,CAAC,SAAU,CAAA,UAAU,GAAG,eAAA;AAAA,EACxB,CAAC,SAAU,CAAA,UAAU,GAAG,eAAA;AAAA,EACxB,CAAC,SAAU,CAAA,UAAU,GAAG;AAC1B,CAAA;AAOO,MAAM,eAAkB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AAC7D,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,CAAqB,KAAA,QAAA,CAAS,CAAc,CAAA;AAAA,IAC7C,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,QAAU,EAAA,KAAA;AAAA,MACV,OAAO,MAAO,CAAA,MAAA,CAAO,SAAS,CAAA,CAAE,IAAI,CAAM,CAAA,MAAA;AAAA,QACxC,KAAA,EAAO,wBAAwB,CAAC,CAAA;AAAA,QAChC,KAAO,EAAA;AAAA,OACP,CAAA,CAAA;AAAA,MACF,QAAU,EAAA;AAAA;AAAA,GAEd,EAAA,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 '../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,eAAkB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AAC7D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAC1D,EAAA,MAAM,uBAA0B,GAAA;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,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,CAAqB,KAAA,QAAA,CAAS,CAAc,CAAA;AAAA,IAC7C,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,wCAAwC,CAAA;AAAA,MACjD,QAAU,EAAA,KAAA;AAAA,MACV,OAAO,MAAO,CAAA,MAAA,CAAO,SAAS,CAAA,CAAE,IAAI,CAAM,CAAA,MAAA;AAAA,QACxC,KAAA,EAAO,wBAAwB,CAAC,CAAA;AAAA,QAChC,KAAO,EAAA;AAAA,OACP,CAAA,CAAA;AAAA,MACF,QAAU,EAAA;AAAA;AAAA,GAEd,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import Box from '@material-ui/core/Box';
 import FormControl from '@material-ui/core/FormControl';
 import IconButton from '@material-ui/core/IconButton';
@@ -8,6 +9,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import ClearIcon from '@material-ui/icons/Clear';
 import { useRef, useState, useEffect, useCallback } from 'react';
+import { catalogGraphTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles(
   {
@@ -22,6 +24,7 @@ const MaxDepthFilter = ({ value, onChange }) => {
   const classes = useStyles();
   const onChangeRef = useRef(onChange);
   const [currentValue, setCurrentValue] = useState(value);
+  const { t } = useTranslationRef(catalogGraphTranslationRef);
   useEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
@@ -39,18 +42,20 @@ const MaxDepthFilter = ({ value, onChange }) => {
     onChangeRef.current(Number.POSITIVE_INFINITY);
   }, [onChangeRef]);
   return /* @__PURE__ */ jsx(Box, { pb: 1, pt: 1, children: /* @__PURE__ */ jsxs(FormControl, { variant: "outlined", className: classes.formControl, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "button", children: "Max Depth" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "button", children: t("catalogGraphPage.maxDepthFilter.title") }),
     /* @__PURE__ */ jsx(
       OutlinedInput,
       {
         type: "number",
-        placeholder: "\u221E Infinite",
+        placeholder: t("catalogGraphPage.maxDepthFilter.inputPlaceholder"),
         value: Number.isFinite(currentValue) ? String(currentValue) : "",
         onChange: handleChange,
         endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
           IconButton,
           {
-            "aria-label": "clear max depth",
+            "aria-label": t(
+              "catalogGraphPage.maxDepthFilter.clearButtonAriaLabel"
+            ),
             onClick: reset,
             edge: "end",
             children: /* @__PURE__ */ jsx(ClearIcon, {})

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

@@ -1 +1 @@
-{"version":3,"file":"MaxDepthFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/MaxDepthFilter.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Box from '@material-ui/core/Box';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nexport type Props = {\n  value: number;\n  onChange: (value: number) => void;\n};\n\n/** @public */\nexport type MaxDepthFilterClassKey = 'formControl';\n\nconst useStyles = makeStyles(\n  {\n    formControl: {\n      width: '100%',\n      maxWidth: 300,\n    },\n  },\n  { name: 'PluginCatalogGraphMaxDepthFilter' },\n);\n\nexport const MaxDepthFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n  const onChangeRef = useRef(onChange);\n  const [currentValue, setCurrentValue] = useState(value);\n\n  // Keep a fresh reference to the latest callback\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // If the value changes externally, update ourselves\n  useEffect(() => {\n    setCurrentValue(value);\n  }, [value]);\n\n  // When the entered text changes, update ourselves and communicate externally\n  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    const newValueNumeric = Number(event.target.value);\n    const newValue =\n      Number.isFinite(newValueNumeric) && newValueNumeric > 0\n        ? newValueNumeric\n        : Number.POSITIVE_INFINITY;\n    setCurrentValue(newValue);\n    onChangeRef.current(newValue);\n  }, []);\n\n  const reset = useCallback(() => {\n    setCurrentValue(Number.POSITIVE_INFINITY);\n    onChangeRef.current(Number.POSITIVE_INFINITY);\n  }, [onChangeRef]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <FormControl variant=\"outlined\" className={classes.formControl}>\n        <Typography variant=\"button\">Max Depth</Typography>\n        <OutlinedInput\n          type=\"number\"\n          placeholder=\"∞ Infinite\"\n          value={Number.isFinite(currentValue) ? String(currentValue) : ''}\n          onChange={handleChange}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label=\"clear max depth\"\n                onClick={reset}\n                edge=\"end\"\n              >\n                <ClearIcon />\n              </IconButton>\n            </InputAdornment>\n          }\n          inputProps={{\n            'aria-label': 'maxp',\n          }}\n          labelWidth={0}\n        />\n      </FormControl>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAiCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,kCAAmC;AAC7C,CAAA;AAEO,MAAM,cAAiB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AAC5D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AAGtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,OAAU,GAAA,QAAA;AAAA,GACxB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAGb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,GACvB,EAAG,CAAC,KAAK,CAAC,CAAA;AAGV,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAAC,KAAyC,KAAA;AACzE,IAAA,MAAM,eAAkB,GAAA,MAAA,CAAO,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AACjD,IAAM,MAAA,QAAA,GACJ,OAAO,QAAS,CAAA,eAAe,KAAK,eAAkB,GAAA,CAAA,GAClD,kBACA,MAAO,CAAA,iBAAA;AACb,IAAA,eAAA,CAAgB,QAAQ,CAAA;AACxB,IAAA,WAAA,CAAY,QAAQ,QAAQ,CAAA;AAAA,GAC9B,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,eAAA,CAAgB,OAAO,iBAAiB,CAAA;AACxC,IAAY,WAAA,CAAA,OAAA,CAAQ,OAAO,iBAAiB,CAAA;AAAA,GAC9C,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,OAAQ,EAAA,UAAA,EAAW,SAAW,EAAA,OAAA,CAAQ,WACjD,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,QAAA,EAAS,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,oBACtC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,WAAY,EAAA,iBAAA;AAAA,QACZ,OAAO,MAAO,CAAA,QAAA,CAAS,YAAY,CAAI,GAAA,MAAA,CAAO,YAAY,CAAI,GAAA,EAAA;AAAA,QAC9D,QAAU,EAAA,YAAA;AAAA,QACV,YACE,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,KACvB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,YAAW,EAAA,iBAAA;AAAA,YACX,OAAS,EAAA,KAAA;AAAA,YACT,IAAK,EAAA,KAAA;AAAA,YAEL,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA,SAEf,EAAA,CAAA;AAAA,QAEF,UAAY,EAAA;AAAA,UACV,YAAc,EAAA;AAAA,SAChB;AAAA,QACA,UAAY,EAAA;AAAA;AAAA;AACd,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MaxDepthFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/MaxDepthFilter.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { catalogGraphTranslationRef } from '../../translation';\n\nexport type Props = {\n  value: number;\n  onChange: (value: number) => void;\n};\n\n/** @public */\nexport type MaxDepthFilterClassKey = 'formControl';\n\nconst useStyles = makeStyles(\n  {\n    formControl: {\n      width: '100%',\n      maxWidth: 300,\n    },\n  },\n  { name: 'PluginCatalogGraphMaxDepthFilter' },\n);\n\nexport const MaxDepthFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n  const onChangeRef = useRef(onChange);\n  const [currentValue, setCurrentValue] = useState(value);\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\n\n  // Keep a fresh reference to the latest callback\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  // If the value changes externally, update ourselves\n  useEffect(() => {\n    setCurrentValue(value);\n  }, [value]);\n\n  // When the entered text changes, update ourselves and communicate externally\n  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    const newValueNumeric = Number(event.target.value);\n    const newValue =\n      Number.isFinite(newValueNumeric) && newValueNumeric > 0\n        ? newValueNumeric\n        : Number.POSITIVE_INFINITY;\n    setCurrentValue(newValue);\n    onChangeRef.current(newValue);\n  }, []);\n\n  const reset = useCallback(() => {\n    setCurrentValue(Number.POSITIVE_INFINITY);\n    onChangeRef.current(Number.POSITIVE_INFINITY);\n  }, [onChangeRef]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <FormControl variant=\"outlined\" className={classes.formControl}>\n        <Typography variant=\"button\">\n          {t('catalogGraphPage.maxDepthFilter.title')}\n        </Typography>\n        <OutlinedInput\n          type=\"number\"\n          placeholder={t('catalogGraphPage.maxDepthFilter.inputPlaceholder')}\n          value={Number.isFinite(currentValue) ? String(currentValue) : ''}\n          onChange={handleChange}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label={t(\n                  'catalogGraphPage.maxDepthFilter.clearButtonAriaLabel',\n                )}\n                onClick={reset}\n                edge=\"end\"\n              >\n                <ClearIcon />\n              </IconButton>\n            </InputAdornment>\n          }\n          inputProps={{\n            'aria-label': 'maxp',\n          }}\n          labelWidth={0}\n        />\n      </FormControl>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,kCAAmC;AAC7C,CAAA;AAEO,MAAM,cAAiB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AAC5D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAG1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,OAAU,GAAA,QAAA;AAAA,GACxB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAGb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,GACvB,EAAG,CAAC,KAAK,CAAC,CAAA;AAGV,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAAC,KAAyC,KAAA;AACzE,IAAA,MAAM,eAAkB,GAAA,MAAA,CAAO,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AACjD,IAAM,MAAA,QAAA,GACJ,OAAO,QAAS,CAAA,eAAe,KAAK,eAAkB,GAAA,CAAA,GAClD,kBACA,MAAO,CAAA,iBAAA;AACb,IAAA,eAAA,CAAgB,QAAQ,CAAA;AACxB,IAAA,WAAA,CAAY,QAAQ,QAAQ,CAAA;AAAA,GAC9B,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,eAAA,CAAgB,OAAO,iBAAiB,CAAA;AACxC,IAAY,WAAA,CAAA,OAAA,CAAQ,OAAO,iBAAiB,CAAA;AAAA,GAC9C,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,OAAQ,EAAA,UAAA,EAAW,SAAW,EAAA,OAAA,CAAQ,WACjD,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,QACjB,EAAA,QAAA,EAAA,CAAA,CAAE,uCAAuC,CAC5C,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,WAAA,EAAa,EAAE,kDAAkD,CAAA;AAAA,QACjE,OAAO,MAAO,CAAA,QAAA,CAAS,YAAY,CAAI,GAAA,MAAA,CAAO,YAAY,CAAI,GAAA,EAAA;AAAA,QAC9D,QAAU,EAAA,YAAA;AAAA,QACV,YACE,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,KACvB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,YAAY,EAAA,CAAA;AAAA,cACV;AAAA,aACF;AAAA,YACA,OAAS,EAAA,KAAA;AAAA,YACT,IAAK,EAAA,KAAA;AAAA,YAEL,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA,SAEf,EAAA,CAAA;AAAA,QAEF,UAAY,EAAA;AAAA,UACV,YAAc,EAAA;AAAA,SAChB;AAAA,QACA,UAAY,EAAA;AAAA;AAAA;AACd,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -13,6 +13,8 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { useEffect, useMemo, useCallback } from 'react';
 import useAsync from 'react-use/esm/useAsync';
+import { catalogGraphTranslationRef } from '../../translation.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 
 const useStyles = makeStyles(
   {
@@ -26,6 +28,7 @@ const SelectedKindsFilter = ({ value, onChange }) => {
   const classes = useStyles();
   const alertApi = useApi(alertApiRef);
   const catalogApi = useApi(catalogApiRef);
+  const { t } = useTranslationRef(catalogGraphTranslationRef);
   const { error, value: kinds } = useAsync(async () => {
     return await catalogApi.getEntityFacets({ facets: ["kind"] }).then((response) => response.facets.kind?.map((f) => f.value).sort() || []);
   });
@@ -56,7 +59,7 @@ const SelectedKindsFilter = ({ value, onChange }) => {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs(Box, { pb: 1, pt: 1, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "button", children: "Kinds" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "button", children: t("catalogGraphPage.selectedKindsFilter.title") }),
     /* @__PURE__ */ jsx(
       Autocomplete,
       {
@@ -64,7 +67,7 @@ const SelectedKindsFilter = ({ value, onChange }) => {
         multiple: true,
         limitTags: 4,
         disableCloseOnSelect: true,
-        "aria-label": "Kinds",
+        "aria-label": t("catalogGraphPage.selectedKindsFilter.title"),
         options: normalizedKinds,
         value: value ?? normalizedKinds,
         getOptionLabel: (k) => kinds[normalizedKinds.indexOf(k)] ?? k,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectedKindsFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/SelectedKindsFilter.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 { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\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, useEffect, useMemo } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\n\n/** @public */\nexport type SelectedKindsFilterClassKey = 'formControl';\n\nconst useStyles = makeStyles(\n  {\n    formControl: {\n      maxWidth: 300,\n    },\n  },\n  { name: 'PluginCatalogGraphSelectedKindsFilter' },\n);\n\nexport type Props = {\n  value: string[] | undefined;\n  onChange: (value: string[] | undefined) => void;\n};\n\nexport const SelectedKindsFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  const { error, value: kinds } = useAsync(async () => {\n    return await catalogApi\n      .getEntityFacets({ facets: ['kind'] })\n      .then(response => response.facets.kind?.map(f => f.value).sort() || []);\n  });\n\n  useEffect(() => {\n    if (error) {\n      alertApi.post({\n        message: `Failed to load entity kinds`,\n        severity: 'error',\n      });\n    }\n  }, [error, alertApi]);\n\n  const normalizedKinds = useMemo(\n    () => (kinds ? kinds.map(k => k.toLocaleLowerCase('en-US')) : kinds),\n    [kinds],\n  );\n\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(\n        normalizedKinds && normalizedKinds.every(r => v.includes(r))\n          ? undefined\n          : v,\n      );\n    },\n    [normalizedKinds, onChange],\n  );\n\n  const handleEmpty = useCallback(() => {\n    onChange(value?.length ? value : undefined);\n  }, [value, onChange]);\n\n  if (!kinds?.length || !normalizedKinds?.length || error) {\n    return <></>;\n  }\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography variant=\"button\">Kinds</Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label=\"Kinds\"\n        options={normalizedKinds}\n        value={value ?? normalizedKinds}\n        getOptionLabel={k => kinds[normalizedKinds.indexOf(k)] ?? k}\n        onChange={handleChange}\n        onBlur={handleEmpty}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                checked={selected}\n              />\n            }\n            label={kinds[normalizedKinds.indexOf(option)] ?? option}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"selected-kinds-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,WAAa,EAAA;AAAA,MACX,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,uCAAwC;AAClD,CAAA;AAOO,MAAM,mBAAsB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAsB,KAAA;AACjE,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA;AAEvC,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,KAAM,EAAA,GAAI,SAAS,YAAY;AACnD,IAAO,OAAA,MAAM,WACV,eAAgB,CAAA,EAAE,QAAQ,CAAC,MAAM,CAAE,EAAC,CACpC,CAAA,IAAA,CAAK,cAAY,QAAS,CAAA,MAAA,CAAO,IAAM,EAAA,GAAA,CAAI,CAAK,CAAA,KAAA,CAAA,CAAE,KAAK,CAAE,CAAA,IAAA,EAAU,IAAA,EAAE,CAAA;AAAA,GACzE,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,QAAA,CAAS,IAAK,CAAA;AAAA,QACZ,OAAS,EAAA,CAAA,2BAAA,CAAA;AAAA,QACT,QAAU,EAAA;AAAA,OACX,CAAA;AAAA;AACH,GACC,EAAA,CAAC,KAAO,EAAA,QAAQ,CAAC,CAAA;AAEpB,EAAA,MAAM,eAAkB,GAAA,OAAA;AAAA,IACtB,MAAO,QAAQ,KAAM,CAAA,GAAA,CAAI,OAAK,CAAE,CAAA,iBAAA,CAAkB,OAAO,CAAC,CAAI,GAAA,KAAA;AAAA,IAC9D,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAY,CAAgB,KAAA;AAC3B,MAAA,QAAA;AAAA,QACE,eAAA,IAAmB,gBAAgB,KAAM,CAAA,CAAA,CAAA,KAAK,EAAE,QAAS,CAAA,CAAC,CAAC,CAAA,GACvD,KACA,CAAA,GAAA;AAAA,OACN;AAAA,KACF;AAAA,IACA,CAAC,iBAAiB,QAAQ;AAAA,GAC5B;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAS,QAAA,CAAA,KAAA,EAAO,MAAS,GAAA,KAAA,GAAQ,KAAS,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,KAAO,EAAA,QAAQ,CAAC,CAAA;AAEpB,EAAA,IAAI,CAAC,KAAO,EAAA,MAAA,IAAU,CAAC,eAAA,EAAiB,UAAU,KAAO,EAAA;AACvD,IAAA,uBAAS,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA;AAGX,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,QAAA,EAAS,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,oBAClC,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,WAAA;AAAA,QACnB,QAAQ,EAAA,IAAA;AAAA,QACR,SAAW,EAAA,CAAA;AAAA,QACX,oBAAoB,EAAA,IAAA;AAAA,QACpB,YAAW,EAAA,OAAA;AAAA,QACX,OAAS,EAAA,eAAA;AAAA,QACT,OAAO,KAAS,IAAA,eAAA;AAAA,QAChB,gBAAgB,CAAK,CAAA,KAAA,KAAA,CAAM,gBAAgB,OAAQ,CAAA,CAAC,CAAC,CAAK,IAAA,CAAA;AAAA,QAC1D,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,WAAA;AAAA,QACR,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,OACE,kBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAM,kBAAA,GAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,gBACjD,WAAa,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,gBAC5C,OAAS,EAAA;AAAA;AAAA,aACX;AAAA,YAEF,OAAO,KAAM,CAAA,eAAA,CAAgB,OAAQ,CAAA,MAAM,CAAC,CAAK,IAAA;AAAA;AAAA,SACnD;AAAA,QAEF,IAAK,EAAA,OAAA;AAAA,QACL,SAAW,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,aAAA,EAAY,uBAAwB,EAAA,CAAA;AAAA,QAC/D,aAAa,CAAU,MAAA,qBAAA,GAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA;AAAA;AAAA;AACnE,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectedKindsFilter.esm.js","sources":["../../../src/components/CatalogGraphPage/SelectedKindsFilter.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 { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\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, useEffect, useMemo } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { catalogGraphTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\n\n/** @public */\nexport type SelectedKindsFilterClassKey = 'formControl';\n\nconst useStyles = makeStyles(\n  {\n    formControl: {\n      maxWidth: 300,\n    },\n  },\n  { name: 'PluginCatalogGraphSelectedKindsFilter' },\n);\n\nexport type Props = {\n  value: string[] | undefined;\n  onChange: (value: string[] | undefined) => void;\n};\n\nexport const SelectedKindsFilter = ({ value, onChange }: Props) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const { t } = useTranslationRef(catalogGraphTranslationRef);\n\n  const { error, value: kinds } = useAsync(async () => {\n    return await catalogApi\n      .getEntityFacets({ facets: ['kind'] })\n      .then(response => response.facets.kind?.map(f => f.value).sort() || []);\n  });\n\n  useEffect(() => {\n    if (error) {\n      alertApi.post({\n        message: `Failed to load entity kinds`,\n        severity: 'error',\n      });\n    }\n  }, [error, alertApi]);\n\n  const normalizedKinds = useMemo(\n    () => (kinds ? kinds.map(k => k.toLocaleLowerCase('en-US')) : kinds),\n    [kinds],\n  );\n\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(\n        normalizedKinds && normalizedKinds.every(r => v.includes(r))\n          ? undefined\n          : v,\n      );\n    },\n    [normalizedKinds, onChange],\n  );\n\n  const handleEmpty = useCallback(() => {\n    onChange(value?.length ? value : undefined);\n  }, [value, onChange]);\n\n  if (!kinds?.length || !normalizedKinds?.length || error) {\n    return <></>;\n  }\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography variant=\"button\">\n        {t('catalogGraphPage.selectedKindsFilter.title')}\n      </Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label={t('catalogGraphPage.selectedKindsFilter.title')}\n        options={normalizedKinds}\n        value={value ?? normalizedKinds}\n        getOptionLabel={k => kinds[normalizedKinds.indexOf(k)] ?? k}\n        onChange={handleChange}\n        onBlur={handleEmpty}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                checked={selected}\n              />\n            }\n            label={kinds[normalizedKinds.indexOf(option)] ?? option}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"selected-kinds-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -10,6 +10,8 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 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';
 
 const useStyles = makeStyles(
   {
@@ -26,6 +28,7 @@ const SelectedRelationsFilter = ({
 }) => {
   const classes = useStyles();
   const relations = useMemo(() => relationPairs.flat(), [relationPairs]);
+  const { t } = useTranslationRef(catalogGraphTranslationRef);
   const handleChange = useCallback(
     (_, v) => {
       onChange(relations.every((r) => v.includes(r)) ? void 0 : v);
@@ -36,7 +39,7 @@ const SelectedRelationsFilter = ({
     onChange(value?.length ? value : void 0);
   }, [value, onChange]);
   return /* @__PURE__ */ jsxs(Box, { pb: 1, pt: 1, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "button", children: "Relations" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "button", children: t("catalogGraphPage.selectedRelationsFilter.title") }),
     /* @__PURE__ */ jsx(
       Autocomplete,
       {
@@ -44,7 +47,7 @@ const SelectedRelationsFilter = ({
         multiple: true,
         limitTags: 4,
         disableCloseOnSelect: true,
-        "aria-label": "Relations",
+        "aria-label": t("catalogGraphPage.selectedRelationsFilter.title"),
         options: relations,
         value: value ?? relations,
         onChange: handleChange,

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';\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\n  const handleChange = useCallback(\n    (_: unknown, v: string[]) => {\n      onChange(relations.every(r => v.includes(r)) ? undefined : v);\n    },\n    [relations, onChange],\n  );\n\n  const handleEmpty = useCallback(() => {\n    onChange(value?.length ? value : undefined);\n  }, [value, onChange]);\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography variant=\"button\">Relations</Typography>\n      <Autocomplete\n        className={classes.formControl}\n        multiple\n        limitTags={4}\n        disableCloseOnSelect\n        aria-label=\"Relations\"\n        options={relations}\n        value={value ?? relations}\n        onChange={handleChange}\n        onBlur={handleEmpty}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                checked={selected}\n              />\n            }\n            label={option}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"selected-relations-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,WAAa,EAAA;AAAA,MACX,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,2CAA4C;AACtD,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,aAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM,aAAA,CAAc,MAAQ,EAAA,CAAC,aAAa,CAAC,CAAA;AAErE,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAY,CAAgB,KAAA;AAC3B,MAAS,QAAA,CAAA,SAAA,CAAU,MAAM,CAAK,CAAA,KAAA,CAAA,CAAE,SAAS,CAAC,CAAC,CAAI,GAAA,KAAA,CAAA,GAAY,CAAC,CAAA;AAAA,KAC9D;AAAA,IACA,CAAC,WAAW,QAAQ;AAAA,GACtB;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAS,QAAA,CAAA,KAAA,EAAO,MAAS,GAAA,KAAA,GAAQ,KAAS,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,KAAO,EAAA,QAAQ,CAAC,CAAA;AAEpB,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,QAAA,EAAS,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,oBACtC,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,WAAA;AAAA,QACnB,QAAQ,EAAA,IAAA;AAAA,QACR,SAAW,EAAA,CAAA;AAAA,QACX,oBAAoB,EAAA,IAAA;AAAA,QACpB,YAAW,EAAA,WAAA;AAAA,QACX,OAAS,EAAA,SAAA;AAAA,QACT,OAAO,KAAS,IAAA,SAAA;AAAA,QAChB,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,WAAA;AAAA,QACR,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,OACE,kBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAM,kBAAA,GAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,gBACjD,WAAa,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,gBAC5C,OAAS,EAAA;AAAA;AAAA,aACX;AAAA,YAEF,KAAO,EAAA;AAAA;AAAA,SACT;AAAA,QAEF,IAAK,EAAA,OAAA;AAAA,QACL,SAAW,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,aAAA,EAAY,2BAA4B,EAAA,CAAA;AAAA,QACnE,aAAa,CAAU,MAAA,qBAAA,GAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA;AAAA;AAAA;AACnE,GACF,EAAA,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 { 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,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,WAAa,EAAA;AAAA,MACX,QAAU,EAAA;AAAA;AACZ,GACF;AAAA,EACA,EAAE,MAAM,2CAA4C;AACtD,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,aAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM,aAAA,CAAc,MAAQ,EAAA,CAAC,aAAa,CAAC,CAAA;AACrE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAY,CAAgB,KAAA;AAC3B,MAAS,QAAA,CAAA,SAAA,CAAU,MAAM,CAAK,CAAA,KAAA,CAAA,CAAE,SAAS,CAAC,CAAC,CAAI,GAAA,KAAA,CAAA,GAAY,CAAC,CAAA;AAAA,KAC9D;AAAA,IACA,CAAC,WAAW,QAAQ;AAAA,GACtB;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAS,QAAA,CAAA,KAAA,EAAO,MAAS,GAAA,KAAA,GAAQ,KAAS,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,KAAO,EAAA,QAAQ,CAAC,CAAA;AAEpB,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,QACjB,EAAA,QAAA,EAAA,CAAA,CAAE,gDAAgD,CACrD,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,WAAA;AAAA,QACnB,QAAQ,EAAA,IAAA;AAAA,QACR,SAAW,EAAA,CAAA;AAAA,QACX,oBAAoB,EAAA,IAAA;AAAA,QACpB,YAAA,EAAY,EAAE,gDAAgD,CAAA;AAAA,QAC9D,OAAS,EAAA,SAAA;AAAA,QACT,OAAO,KAAS,IAAA,SAAA;AAAA,QAChB,QAAU,EAAA,YAAA;AAAA,QACV,MAAQ,EAAA,WAAA;AAAA,QACR,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,OACE,kBAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAM,kBAAA,GAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,gBACjD,WAAa,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,gBAC5C,OAAS,EAAA;AAAA;AAAA,aACX;AAAA,YAEF,KAAO,EAAA;AAAA;AAAA,SACT;AAAA,QAEF,IAAK,EAAA,OAAA;AAAA,QACL,SAAW,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,aAAA,EAAY,2BAA4B,EAAA,CAAA;AAAA,QACnE,aAAa,CAAU,MAAA,qBAAA,GAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA;AAAA;AAAA;AACnE,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/package.json.esm.js

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

package/dist/translation.esm.js

@@ -0,0 +1,45 @@
+import { createTranslationRef } from '@backstage/frontend-plugin-api';
+
+const catalogGraphTranslationRef = createTranslationRef({
+  id: "catalog-graph",
+  messages: {
+    catalogGraphCard: {
+      title: "Relations",
+      deepLinkTitle: "View graph"
+    },
+    catalogGraphPage: {
+      title: "Catalog Graph",
+      filterToggleButtonTitle: "Filters",
+      supportButtonDescription: "Start tracking your component in by adding it to the software catalog.",
+      simplifiedSwitchLabel: "Simplified",
+      mergeRelationsSwitchLabel: "Merge relations",
+      zoomOutDescription: "Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity.",
+      curveFilter: {
+        title: "Curve",
+        curveMonotoneX: "Monotone X",
+        curveStepBefore: "Step Before"
+      },
+      directionFilter: {
+        title: "Direction",
+        leftToRight: "Left to right",
+        rightToLeft: "Right to left",
+        topToBottom: "Top to bottom",
+        bottomToTop: "Bottom to top"
+      },
+      maxDepthFilter: {
+        title: "Max depth",
+        inputPlaceholder: "\u221E Infinite",
+        clearButtonAriaLabel: "clear max depth"
+      },
+      selectedKindsFilter: {
+        title: "Kinds"
+      },
+      selectedRelationsFilter: {
+        title: "Relations"
+      }
+    }
+  }
+});
+
+export { catalogGraphTranslationRef };
+//# sourceMappingURL=translation.esm.js.map

package/dist/translation.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.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 */\nimport { createTranslationRef } from '@backstage/frontend-plugin-api';\n\n/** @alpha */\nexport const catalogGraphTranslationRef = createTranslationRef({\n  id: 'catalog-graph',\n  messages: {\n    catalogGraphCard: {\n      title: 'Relations',\n      deepLinkTitle: 'View graph',\n    },\n    catalogGraphPage: {\n      title: 'Catalog Graph',\n      filterToggleButtonTitle: 'Filters',\n      supportButtonDescription:\n        'Start tracking your component in by adding it to the software catalog.',\n      simplifiedSwitchLabel: 'Simplified',\n      mergeRelationsSwitchLabel: 'Merge relations',\n      zoomOutDescription:\n        'Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity.',\n      curveFilter: {\n        title: 'Curve',\n        curveMonotoneX: 'Monotone X',\n        curveStepBefore: 'Step Before',\n      },\n      directionFilter: {\n        title: 'Direction',\n        leftToRight: 'Left to right',\n        rightToLeft: 'Right to left',\n        topToBottom: 'Top to bottom',\n        bottomToTop: 'Bottom to top',\n      },\n      maxDepthFilter: {\n        title: 'Max depth',\n        inputPlaceholder: '∞ Infinite',\n        clearButtonAriaLabel: 'clear max depth',\n      },\n      selectedKindsFilter: {\n        title: 'Kinds',\n      },\n      selectedRelationsFilter: {\n        title: 'Relations',\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAkBO,MAAM,6BAA6B,oBAAqB,CAAA;AAAA,EAC7D,EAAI,EAAA,eAAA;AAAA,EACJ,QAAU,EAAA;AAAA,IACR,gBAAkB,EAAA;AAAA,MAChB,KAAO,EAAA,WAAA;AAAA,MACP,aAAe,EAAA;AAAA,KACjB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,KAAO,EAAA,eAAA;AAAA,MACP,uBAAyB,EAAA,SAAA;AAAA,MACzB,wBACE,EAAA,wEAAA;AAAA,MACF,qBAAuB,EAAA,YAAA;AAAA,MACvB,yBAA2B,EAAA,iBAAA;AAAA,MAC3B,kBACE,EAAA,kHAAA;AAAA,MACF,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,OAAA;AAAA,QACP,cAAgB,EAAA,YAAA;AAAA,QAChB,eAAiB,EAAA;AAAA,OACnB;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,KAAO,EAAA,WAAA;AAAA,QACP,WAAa,EAAA,eAAA;AAAA,QACb,WAAa,EAAA,eAAA;AAAA,QACb,WAAa,EAAA,eAAA;AAAA,QACb,WAAa,EAAA;AAAA,OACf;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,KAAO,EAAA,WAAA;AAAA,QACP,gBAAkB,EAAA,iBAAA;AAAA,QAClB,oBAAsB,EAAA;AAAA,OACxB;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA;AAAA,OACT;AAAA,MACA,uBAAyB,EAAA;AAAA,QACvB,KAAO,EAAA;AAAA;AACT;AACF;AAEJ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-graph",
-  "version": "0.4.20",
+  "version": "0.4.21-next.1",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "catalog-graph",
@@ -61,14 +61,14 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "^1.10.1",
-    "@backstage/catalog-model": "^1.7.4",
-    "@backstage/core-compat-api": "^0.4.3",
-    "@backstage/core-components": "^0.17.3",
-    "@backstage/core-plugin-api": "^1.10.8",
-    "@backstage/frontend-plugin-api": "^0.10.3",
-    "@backstage/plugin-catalog-react": "^1.19.0",
-    "@backstage/types": "^1.2.1",
+    "@backstage/catalog-client": "1.10.2-next.0",
+    "@backstage/catalog-model": "1.7.5-next.0",
+    "@backstage/core-compat-api": "0.4.4-next.1",
+    "@backstage/core-components": "0.17.4-next.1",
+    "@backstage/core-plugin-api": "1.10.9-next.0",
+    "@backstage/frontend-plugin-api": "0.10.4-next.1",
+    "@backstage/plugin-catalog-react": "1.19.1-next.1",
+    "@backstage/types": "1.2.1",
     "@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.33.0",
-    "@backstage/core-app-api": "^1.17.1",
-    "@backstage/dev-utils": "^1.1.11",
-    "@backstage/plugin-catalog": "^1.31.0",
-    "@backstage/test-utils": "^1.7.9",
+    "@backstage/cli": "0.33.1-next.1",
+    "@backstage/core-app-api": "1.17.2-next.0",
+    "@backstage/dev-utils": "1.1.12-next.1",
+    "@backstage/plugin-catalog": "1.31.1-next.1",
+    "@backstage/test-utils": "1.7.10-next.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",