@backstage/plugin-catalog-graph 0.4.9-next.0 → 0.4.9-next.2

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @backstage/plugin-catalog-graph
 
+## 0.4.9-next.2
+
+### Patch Changes
+
+- 836127c: Updated dependency `@testing-library/react` to `^16.0.0`.
+- 8a474f2: Updating docs to use `createFrontendModule` instead
+- Updated dependencies
+  - @backstage/core-components@0.14.11-next.1
+  - @backstage/plugin-catalog-react@1.13.0-next.2
+  - @backstage/catalog-client@1.7.0-next.1
+  - @backstage/core-compat-api@0.3.0-next.2
+  - @backstage/core-plugin-api@1.9.4-next.0
+  - @backstage/frontend-plugin-api@0.8.0-next.2
+  - @backstage/catalog-model@1.6.0
+  - @backstage/types@1.1.1
+
+## 0.4.9-next.1
+
+### Patch Changes
+
+- da91078: Fixed a bug in the `CatalogGraphPage` component where, after clicking on some nodes, clicking the back button would break the navigation. This issue caused the entire navigation to fail and behaved differently across various browsers.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.8.0-next.1
+  - @backstage/core-compat-api@0.3.0-next.1
+  - @backstage/catalog-client@1.6.7-next.0
+  - @backstage/core-components@0.14.11-next.0
+  - @backstage/plugin-catalog-react@1.12.4-next.1
+  - @backstage/catalog-model@1.6.0
+  - @backstage/core-plugin-api@1.9.3
+  - @backstage/types@1.1.1
+
 ## 0.4.9-next.0
 
 ### Patch Changes

package/alpha/package.json

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

package/dist/alpha.d.ts

@@ -3,7 +3,7 @@ import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api'
 import React__default from 'react';
 import { Direction } from '@backstage/plugin-catalog-graph';
 
-declare const _default: _backstage_frontend_plugin_api.BackstagePlugin<{
+declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
     catalogGraph: _backstage_frontend_plugin_api.RouteRef<undefined>;
 }, {
     catalogEntity: _backstage_frontend_plugin_api.ExternalRouteRef<{

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

@@ -1,8 +1,7 @@
 import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import qs from 'qs';
-import { useMemo, useState, useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import usePrevious from 'react-use/esm/usePrevious';
+import { useMemo, useCallback, useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import '../EntityRelationsGraph/EntityRelationsGraph.esm.js';
 import { Direction } from '../EntityRelationsGraph/types.esm.js';
 
@@ -10,12 +9,33 @@ function useCatalogGraphPage({
   initialState = {}
 }) {
   const location = useLocation();
+  const navigate = useNavigate();
   const query = useMemo(
     () => qs.parse(location.search, { arrayLimit: 0, ignoreQueryPrefix: true }) || {},
     [location.search]
   );
-  const [rootEntityNames, setRootEntityNames] = useState(
-    () => (Array.isArray(query.rootEntityRefs) ? query.rootEntityRefs : initialState?.rootEntityRefs ?? []).map((r) => parseEntityRef(r))
+  const rootEntityNames = useMemo(
+    () => (Array.isArray(query.rootEntityRefs) ? query.rootEntityRefs : initialState?.rootEntityRefs ?? []).map((r) => parseEntityRef(r)),
+    [initialState?.rootEntityRefs, query.rootEntityRefs]
+  );
+  const setRootEntityNames = useCallback(
+    (value) => {
+      const areSame = rootEntityNames.length === value.length && rootEntityNames.every(
+        (r, i) => stringifyEntityRef(r) === stringifyEntityRef(value[i])
+      );
+      if (areSame) {
+        return;
+      }
+      const newSearch = qs.stringify(
+        {
+          ...query,
+          rootEntityRefs: value.map((r) => stringifyEntityRef(r))
+        },
+        { arrayFormat: "brackets", addQueryPrefix: true }
+      );
+      navigate(newSearch);
+    },
+    [rootEntityNames, navigate, query]
   );
   const [maxDepth, setMaxDepth] = useState(
     () => typeof query.maxDepth === "string" ? parseMaxDepth(query.maxDepth) : initialState?.maxDepth ?? Number.POSITIVE_INFINITY
@@ -45,82 +65,33 @@ function useCatalogGraphPage({
     () => setShowFilters((s) => !s),
     [setShowFilters]
   );
-  const prevQueryParams = usePrevious(location.search);
   useEffect(() => {
-    if (location.search === prevQueryParams) {
-      return;
-    }
-    if (Array.isArray(query.rootEntityRefs)) {
-      setRootEntityNames(query.rootEntityRefs.map((r) => parseEntityRef(r)));
-    }
-    if (typeof query.maxDepth === "string") {
-      setMaxDepth(parseMaxDepth(query.maxDepth));
-    }
-    if (Array.isArray(query.selectedKinds)) {
-      setSelectedKinds(query.selectedKinds);
-    }
-    if (Array.isArray(query.selectedRelations)) {
-      setSelectedRelations(query.selectedRelations);
-    }
-    if (typeof query.unidirectional === "string") {
-      setUnidirectional(query.unidirectional === "true");
-    }
-    if (typeof query.mergeRelations === "string") {
-      setMergeRelations(query.mergeRelations === "true");
-    }
-    if (typeof query.direction === "string") {
-      setDirection(query.direction);
-    }
-    if (typeof query.showFilters === "string") {
-      setShowFilters(query.showFilters === "true");
-    }
-  }, [
-    prevQueryParams,
-    location.search,
-    query,
-    setRootEntityNames,
-    setMaxDepth,
-    setSelectedKinds,
-    setSelectedRelations,
-    setUnidirectional,
-    setMergeRelations,
-    setDirection,
-    setShowFilters
-  ]);
-  const previousRootEntityRefs = usePrevious(
-    rootEntityNames.map((e) => stringifyEntityRef(e))
-  );
-  useEffect(() => {
-    const rootEntityRefs = rootEntityNames.map((e) => stringifyEntityRef(e));
     const newParams = qs.stringify(
       {
-        rootEntityRefs,
+        rootEntityRefs: rootEntityNames.map(stringifyEntityRef),
         maxDepth: isFinite(maxDepth) ? maxDepth : "\u221E",
         selectedKinds,
         selectedRelations,
         unidirectional,
         mergeRelations,
         direction,
-        showFilters
+        showFilters,
+        curve
       },
       { arrayFormat: "brackets", addQueryPrefix: true }
     );
-    const newUrl = `${window.location.pathname}${newParams}`;
-    if (!previousRootEntityRefs || rootEntityRefs.length === previousRootEntityRefs.length && rootEntityRefs.every((v, i) => v === previousRootEntityRefs[i])) {
-      window.history.replaceState(null, document.title, newUrl);
-    } else {
-      window.history.pushState(null, document.title, newUrl);
-    }
+    navigate(newParams, { replace: true });
   }, [
-    rootEntityNames,
     maxDepth,
+    curve,
     selectedKinds,
     selectedRelations,
     unidirectional,
     mergeRelations,
     direction,
     showFilters,
-    previousRootEntityRefs
+    rootEntityNames,
+    navigate
   ]);
   return {
     rootEntityNames,

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

@@ -1 +1 @@
-{"version":3,"file":"useCatalogGraphPage.esm.js","sources":["../../../src/components/CatalogGraphPage/useCatalogGraphPage.ts"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  CompoundEntityRef,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport qs from 'qs';\nimport {\n  Dispatch,\n  DispatchWithoutAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useLocation } from 'react-router-dom';\nimport usePrevious from 'react-use/esm/usePrevious';\nimport { Direction } from '../EntityRelationsGraph';\n\nexport type CatalogGraphPageValue = {\n  rootEntityNames: CompoundEntityRef[];\n  setRootEntityNames: Dispatch<React.SetStateAction<CompoundEntityRef[]>>;\n  maxDepth: number;\n  setMaxDepth: Dispatch<React.SetStateAction<number>>;\n  selectedRelations: string[] | undefined;\n  setSelectedRelations: Dispatch<React.SetStateAction<string[] | undefined>>;\n  selectedKinds: string[] | undefined;\n  setSelectedKinds: Dispatch<React.SetStateAction<string[] | undefined>>;\n  unidirectional: boolean;\n  setUnidirectional: Dispatch<React.SetStateAction<boolean>>;\n  mergeRelations: boolean;\n  setMergeRelations: Dispatch<React.SetStateAction<boolean>>;\n  direction: Direction;\n  setDirection: Dispatch<React.SetStateAction<Direction>>;\n  curve: 'curveStepBefore' | 'curveMonotoneX';\n  setCurve: Dispatch<\n    React.SetStateAction<'curveStepBefore' | 'curveMonotoneX'>\n  >;\n  showFilters: boolean;\n  toggleShowFilters: DispatchWithoutAction;\n};\n\nexport function useCatalogGraphPage({\n  initialState = {},\n}: {\n  initialState?: {\n    selectedRelations?: string[] | undefined;\n    selectedKinds?: string[] | undefined;\n    rootEntityRefs?: string[];\n    maxDepth?: number;\n    unidirectional?: boolean;\n    mergeRelations?: boolean;\n    direction?: Direction;\n    showFilters?: boolean;\n    curve?: 'curveStepBefore' | 'curveMonotoneX';\n  };\n}): CatalogGraphPageValue {\n  const location = useLocation();\n  const query = useMemo(\n    () =>\n      (qs.parse(location.search, { arrayLimit: 0, ignoreQueryPrefix: true }) ||\n        {}) as {\n        selectedRelations?: string[] | string;\n        selectedKinds?: string[] | string;\n        rootEntityRefs?: string[] | string;\n        maxDepth?: string[] | string;\n        unidirectional?: string[] | string;\n        mergeRelations?: string[] | string;\n        direction?: string[] | Direction;\n        showFilters?: string[] | string;\n        curve?: string[] | 'curveStepBefore' | 'curveMonotoneX';\n      },\n    [location.search],\n  );\n\n  // Initial state\n  const [rootEntityNames, setRootEntityNames] = useState<CompoundEntityRef[]>(\n    () =>\n      (Array.isArray(query.rootEntityRefs)\n        ? query.rootEntityRefs\n        : initialState?.rootEntityRefs ?? []\n      ).map(r => parseEntityRef(r)),\n  );\n  const [maxDepth, setMaxDepth] = useState<number>(() =>\n    typeof query.maxDepth === 'string'\n      ? parseMaxDepth(query.maxDepth)\n      : initialState?.maxDepth ?? Number.POSITIVE_INFINITY,\n  );\n  const [selectedRelations, setSelectedRelations] = useState<\n    string[] | undefined\n  >(() =>\n    Array.isArray(query.selectedRelations)\n      ? query.selectedRelations\n      : initialState?.selectedRelations,\n  );\n  const [selectedKinds, setSelectedKinds] = useState<string[] | undefined>(() =>\n    (Array.isArray(query.selectedKinds)\n      ? query.selectedKinds\n      : initialState?.selectedKinds\n    )?.map(k => k.toLocaleLowerCase('en-US')),\n  );\n  const [unidirectional, setUnidirectional] = useState<boolean>(() =>\n    typeof query.unidirectional === 'string'\n      ? query.unidirectional === 'true'\n      : initialState?.unidirectional ?? true,\n  );\n  const [mergeRelations, setMergeRelations] = useState<boolean>(() =>\n    typeof query.mergeRelations === 'string'\n      ? query.mergeRelations === 'true'\n      : initialState?.mergeRelations ?? true,\n  );\n  const [direction, setDirection] = useState<Direction>(() =>\n    typeof query.direction === 'string'\n      ? query.direction\n      : initialState?.direction ?? Direction.LEFT_RIGHT,\n  );\n  const [curve, setCurve] = useState<'curveStepBefore' | 'curveMonotoneX'>(() =>\n    typeof query.curve === 'string'\n      ? query.curve\n      : initialState?.curve ?? 'curveMonotoneX',\n  );\n  const [showFilters, setShowFilters] = useState<boolean>(() =>\n    typeof query.showFilters === 'string'\n      ? query.showFilters === 'true'\n      : initialState?.showFilters ?? true,\n  );\n  const toggleShowFilters = useCallback(\n    () => setShowFilters(s => !s),\n    [setShowFilters],\n  );\n\n  // Update from query parameters\n  const prevQueryParams = usePrevious(location.search);\n  useEffect(() => {\n    // Only respond to changes to url query params\n    if (location.search === prevQueryParams) {\n      return;\n    }\n\n    if (Array.isArray(query.rootEntityRefs)) {\n      setRootEntityNames(query.rootEntityRefs.map(r => parseEntityRef(r)));\n    }\n\n    if (typeof query.maxDepth === 'string') {\n      setMaxDepth(parseMaxDepth(query.maxDepth));\n    }\n\n    if (Array.isArray(query.selectedKinds)) {\n      setSelectedKinds(query.selectedKinds);\n    }\n\n    if (Array.isArray(query.selectedRelations)) {\n      setSelectedRelations(query.selectedRelations);\n    }\n\n    if (typeof query.unidirectional === 'string') {\n      setUnidirectional(query.unidirectional === 'true');\n    }\n\n    if (typeof query.mergeRelations === 'string') {\n      setMergeRelations(query.mergeRelations === 'true');\n    }\n\n    if (typeof query.direction === 'string') {\n      setDirection(query.direction);\n    }\n\n    if (typeof query.showFilters === 'string') {\n      setShowFilters(query.showFilters === 'true');\n    }\n  }, [\n    prevQueryParams,\n    location.search,\n    query,\n    setRootEntityNames,\n    setMaxDepth,\n    setSelectedKinds,\n    setSelectedRelations,\n    setUnidirectional,\n    setMergeRelations,\n    setDirection,\n    setShowFilters,\n  ]);\n\n  // Update query parameters\n  const previousRootEntityRefs = usePrevious(\n    rootEntityNames.map(e => stringifyEntityRef(e)),\n  );\n\n  useEffect(() => {\n    const rootEntityRefs = rootEntityNames.map(e => stringifyEntityRef(e));\n    const newParams = qs.stringify(\n      {\n        rootEntityRefs,\n        maxDepth: isFinite(maxDepth) ? maxDepth : '∞',\n        selectedKinds,\n        selectedRelations,\n        unidirectional,\n        mergeRelations,\n        direction,\n        showFilters,\n      },\n      { arrayFormat: 'brackets', addQueryPrefix: true },\n    );\n    const newUrl = `${window.location.pathname}${newParams}`;\n\n    // We directly manipulate window history here in order to not re-render\n    // infinitely (state => location => state => etc). The intention of this\n    // code is just to ensure the right query/filters are loaded when a user\n    // clicks the \"back\" button after clicking a result.\n    // Only push a new history entry if we switched to another entity, but not\n    // if we just changed a viewer setting.\n    if (\n      !previousRootEntityRefs ||\n      (rootEntityRefs.length === previousRootEntityRefs.length &&\n        rootEntityRefs.every((v, i) => v === previousRootEntityRefs[i]))\n    ) {\n      window.history.replaceState(null, document.title, newUrl);\n    } else {\n      window.history.pushState(null, document.title, newUrl);\n    }\n  }, [\n    rootEntityNames,\n    maxDepth,\n    selectedKinds,\n    selectedRelations,\n    unidirectional,\n    mergeRelations,\n    direction,\n    showFilters,\n    previousRootEntityRefs,\n  ]);\n\n  return {\n    rootEntityNames,\n    setRootEntityNames,\n    maxDepth,\n    setMaxDepth,\n    selectedRelations,\n    setSelectedRelations,\n    selectedKinds,\n    setSelectedKinds,\n    unidirectional,\n    setUnidirectional,\n    mergeRelations,\n    setMergeRelations,\n    direction,\n    setDirection,\n    curve,\n    setCurve,\n    showFilters,\n    toggleShowFilters,\n  };\n}\n\nfunction parseMaxDepth(value: string): number {\n  return value === '∞' ? Number.POSITIVE_INFINITY : Number(value);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCatalogGraphPage.esm.js","sources":["../../../src/components/CatalogGraphPage/useCatalogGraphPage.ts"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  CompoundEntityRef,\n  parseEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport qs from 'qs';\nimport {\n  Dispatch,\n  DispatchWithoutAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { Direction } from '../EntityRelationsGraph';\n\nexport type CatalogGraphPageValue = {\n  rootEntityNames: CompoundEntityRef[];\n  setRootEntityNames: (value: CompoundEntityRef[]) => void;\n  maxDepth: number;\n  setMaxDepth: Dispatch<React.SetStateAction<number>>;\n  selectedRelations: string[] | undefined;\n  setSelectedRelations: Dispatch<React.SetStateAction<string[] | undefined>>;\n  selectedKinds: string[] | undefined;\n  setSelectedKinds: Dispatch<React.SetStateAction<string[] | undefined>>;\n  unidirectional: boolean;\n  setUnidirectional: Dispatch<React.SetStateAction<boolean>>;\n  mergeRelations: boolean;\n  setMergeRelations: Dispatch<React.SetStateAction<boolean>>;\n  direction: Direction;\n  setDirection: Dispatch<React.SetStateAction<Direction>>;\n  curve: 'curveStepBefore' | 'curveMonotoneX';\n  setCurve: Dispatch<\n    React.SetStateAction<'curveStepBefore' | 'curveMonotoneX'>\n  >;\n  showFilters: boolean;\n  toggleShowFilters: DispatchWithoutAction;\n};\n\nexport function useCatalogGraphPage({\n  initialState = {},\n}: {\n  initialState?: {\n    selectedRelations?: string[] | undefined;\n    selectedKinds?: string[] | undefined;\n    rootEntityRefs?: string[];\n    maxDepth?: number;\n    unidirectional?: boolean;\n    mergeRelations?: boolean;\n    direction?: Direction;\n    showFilters?: boolean;\n    curve?: 'curveStepBefore' | 'curveMonotoneX';\n  };\n}): CatalogGraphPageValue {\n  const location = useLocation();\n  const navigate = useNavigate();\n\n  const query = useMemo(\n    () =>\n      (qs.parse(location.search, { arrayLimit: 0, ignoreQueryPrefix: true }) ||\n        {}) as {\n        selectedRelations?: string[] | string;\n        selectedKinds?: string[] | string;\n        rootEntityRefs?: string[] | string;\n        maxDepth?: string[] | string;\n        unidirectional?: string[] | string;\n        mergeRelations?: string[] | string;\n        direction?: string[] | Direction;\n        showFilters?: string[] | string;\n        curve?: string[] | 'curveStepBefore' | 'curveMonotoneX';\n      },\n    [location.search],\n  );\n\n  const rootEntityNames = useMemo(\n    () =>\n      (Array.isArray(query.rootEntityRefs)\n        ? query.rootEntityRefs\n        : initialState?.rootEntityRefs ?? []\n      ).map(r => parseEntityRef(r)),\n    [initialState?.rootEntityRefs, query.rootEntityRefs],\n  );\n\n  const setRootEntityNames = useCallback(\n    (value: CompoundEntityRef[]) => {\n      const areSame =\n        rootEntityNames.length === value.length &&\n        rootEntityNames.every(\n          (r, i) => stringifyEntityRef(r) === stringifyEntityRef(value[i]),\n        );\n\n      if (areSame) {\n        return;\n      }\n\n      const newSearch = qs.stringify(\n        {\n          ...query,\n          rootEntityRefs: value.map(r => stringifyEntityRef(r)),\n        },\n        { arrayFormat: 'brackets', addQueryPrefix: true },\n      );\n\n      navigate(newSearch);\n    },\n    [rootEntityNames, navigate, query],\n  );\n\n  const [maxDepth, setMaxDepth] = useState<number>(() =>\n    typeof query.maxDepth === 'string'\n      ? parseMaxDepth(query.maxDepth)\n      : initialState?.maxDepth ?? Number.POSITIVE_INFINITY,\n  );\n\n  const [selectedRelations, setSelectedRelations] = useState<\n    string[] | undefined\n  >(() =>\n    Array.isArray(query.selectedRelations)\n      ? query.selectedRelations\n      : initialState?.selectedRelations,\n  );\n\n  const [selectedKinds, setSelectedKinds] = useState<string[] | undefined>(() =>\n    (Array.isArray(query.selectedKinds)\n      ? query.selectedKinds\n      : initialState?.selectedKinds\n    )?.map(k => k.toLocaleLowerCase('en-US')),\n  );\n\n  const [unidirectional, setUnidirectional] = useState<boolean>(() =>\n    typeof query.unidirectional === 'string'\n      ? query.unidirectional === 'true'\n      : initialState?.unidirectional ?? true,\n  );\n\n  const [mergeRelations, setMergeRelations] = useState<boolean>(() =>\n    typeof query.mergeRelations === 'string'\n      ? query.mergeRelations === 'true'\n      : initialState?.mergeRelations ?? true,\n  );\n\n  const [direction, setDirection] = useState<Direction>(() =>\n    typeof query.direction === 'string'\n      ? query.direction\n      : initialState?.direction ?? Direction.LEFT_RIGHT,\n  );\n\n  const [curve, setCurve] = useState<'curveStepBefore' | 'curveMonotoneX'>(() =>\n    typeof query.curve === 'string'\n      ? query.curve\n      : initialState?.curve ?? 'curveMonotoneX',\n  );\n\n  const [showFilters, setShowFilters] = useState<boolean>(() =>\n    typeof query.showFilters === 'string'\n      ? query.showFilters === 'true'\n      : initialState?.showFilters ?? true,\n  );\n\n  const toggleShowFilters = useCallback(\n    () => setShowFilters(s => !s),\n    [setShowFilters],\n  );\n\n  useEffect(() => {\n    const newParams = qs.stringify(\n      {\n        rootEntityRefs: rootEntityNames.map(stringifyEntityRef),\n        maxDepth: isFinite(maxDepth) ? maxDepth : '∞',\n        selectedKinds,\n        selectedRelations,\n        unidirectional,\n        mergeRelations,\n        direction,\n        showFilters,\n        curve,\n      },\n      { arrayFormat: 'brackets', addQueryPrefix: true },\n    );\n\n    navigate(newParams, { replace: true });\n  }, [\n    maxDepth,\n    curve,\n    selectedKinds,\n    selectedRelations,\n    unidirectional,\n    mergeRelations,\n    direction,\n    showFilters,\n    rootEntityNames,\n    navigate,\n  ]);\n\n  return {\n    rootEntityNames,\n    setRootEntityNames,\n    maxDepth,\n    setMaxDepth,\n    selectedRelations,\n    setSelectedRelations,\n    selectedKinds,\n    setSelectedKinds,\n    unidirectional,\n    setUnidirectional,\n    mergeRelations,\n    setMergeRelations,\n    direction,\n    setDirection,\n    curve,\n    setCurve,\n    showFilters,\n    toggleShowFilters,\n  };\n}\n\nfunction parseMaxDepth(value: string): number {\n  return value === '∞' ? Number.POSITIVE_INFINITY : Number(value);\n}\n"],"names":[],"mappings":";;;;;;;AAuDO,SAAS,mBAAoB,CAAA;AAAA,EAClC,eAAe,EAAC;AAClB,CAY0B,EAAA;AACxB,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MACG,EAAA,CAAG,KAAM,CAAA,QAAA,CAAS,MAAQ,EAAA,EAAE,UAAY,EAAA,CAAA,EAAG,iBAAmB,EAAA,IAAA,EAAM,CAAA,IACnE,EAAC;AAAA,IAWL,CAAC,SAAS,MAAM,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAA,OAAA;AAAA,IACtB,OACG,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA,cAAc,IAC/B,KAAM,CAAA,cAAA,GACN,YAAc,EAAA,cAAA,IAAkB,EAClC,EAAA,GAAA,CAAI,CAAK,CAAA,KAAA,cAAA,CAAe,CAAC,CAAC,CAAA;AAAA,IAC9B,CAAC,YAAA,EAAc,cAAgB,EAAA,KAAA,CAAM,cAAc,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,KAA+B,KAAA;AAC9B,MAAA,MAAM,OACJ,GAAA,eAAA,CAAgB,MAAW,KAAA,KAAA,CAAM,UACjC,eAAgB,CAAA,KAAA;AAAA,QACd,CAAC,GAAG,CAAM,KAAA,kBAAA,CAAmB,CAAC,CAAM,KAAA,kBAAA,CAAmB,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,OACjE,CAAA;AAEF,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AAEA,MAAA,MAAM,YAAY,EAAG,CAAA,SAAA;AAAA,QACnB;AAAA,UACE,GAAG,KAAA;AAAA,UACH,gBAAgB,KAAM,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA,kBAAA,CAAmB,CAAC,CAAC,CAAA;AAAA,SACtD;AAAA,QACA,EAAE,WAAA,EAAa,UAAY,EAAA,cAAA,EAAgB,IAAK,EAAA;AAAA,OAClD,CAAA;AAEA,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,eAAiB,EAAA,QAAA,EAAU,KAAK,CAAA;AAAA,GACnC,CAAA;AAEA,EAAM,MAAA,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA;AAAA,IAAiB,MAC/C,OAAO,KAAA,CAAM,QAAa,KAAA,QAAA,GACtB,aAAc,CAAA,KAAA,CAAM,QAAQ,CAAA,GAC5B,YAAc,EAAA,QAAA,IAAY,MAAO,CAAA,iBAAA;AAAA,GACvC,CAAA;AAEA,EAAM,MAAA,CAAC,iBAAmB,EAAA,oBAAoB,CAAI,GAAA,QAAA;AAAA,IAEhD,MACA,MAAM,OAAQ,CAAA,KAAA,CAAM,iBAAiB,CACjC,GAAA,KAAA,CAAM,oBACN,YAAc,EAAA,iBAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IAA+B,MACtE,CAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,CAAM,aAAa,CAC9B,GAAA,KAAA,CAAM,aACN,GAAA,YAAA,EAAc,gBACf,GAAI,CAAA,CAAA,CAAA,KAAK,CAAE,CAAA,iBAAA,CAAkB,OAAO,CAAC,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAM,MAAA,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA;AAAA,IAAkB,MAC5D,OAAO,KAAM,CAAA,cAAA,KAAmB,WAC5B,KAAM,CAAA,cAAA,KAAmB,MACzB,GAAA,YAAA,EAAc,cAAkB,IAAA,IAAA;AAAA,GACtC,CAAA;AAEA,EAAM,MAAA,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA;AAAA,IAAkB,MAC5D,OAAO,KAAM,CAAA,cAAA,KAAmB,WAC5B,KAAM,CAAA,cAAA,KAAmB,MACzB,GAAA,YAAA,EAAc,cAAkB,IAAA,IAAA;AAAA,GACtC,CAAA;AAEA,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA;AAAA,IAAoB,MACpD,OAAO,KAAM,CAAA,SAAA,KAAc,WACvB,KAAM,CAAA,SAAA,GACN,YAAc,EAAA,SAAA,IAAa,SAAU,CAAA,UAAA;AAAA,GAC3C,CAAA;AAEA,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,IAA+C,MACvE,OAAO,KAAM,CAAA,KAAA,KAAU,WACnB,KAAM,CAAA,KAAA,GACN,cAAc,KAAS,IAAA,gBAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,IAAkB,MACtD,OAAO,KAAM,CAAA,WAAA,KAAgB,WACzB,KAAM,CAAA,WAAA,KAAgB,MACtB,GAAA,YAAA,EAAc,WAAe,IAAA,IAAA;AAAA,GACnC,CAAA;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,MAAM,cAAA,CAAe,CAAK,CAAA,KAAA,CAAC,CAAC,CAAA;AAAA,IAC5B,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAY,EAAG,CAAA,SAAA;AAAA,MACnB;AAAA,QACE,cAAA,EAAgB,eAAgB,CAAA,GAAA,CAAI,kBAAkB,CAAA;AAAA,QACtD,QAAU,EAAA,QAAA,CAAS,QAAQ,CAAA,GAAI,QAAW,GAAA,QAAA;AAAA,QAC1C,aAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,cAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MACA,EAAE,WAAA,EAAa,UAAY,EAAA,cAAA,EAAgB,IAAK,EAAA;AAAA,KAClD,CAAA;AAEA,IAAA,QAAA,CAAS,SAAW,EAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GACpC,EAAA;AAAA,IACD,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,oBAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEA,SAAS,cAAc,KAAuB,EAAA;AAC5C,EAAA,OAAO,KAAU,KAAA,QAAA,GAAM,MAAO,CAAA,iBAAA,GAAoB,OAAO,KAAK,CAAA,CAAA;AAChE;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-graph",
-  "version": "0.4.9-next.0",
+  "version": "0.4.9-next.2",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "catalog-graph",
@@ -48,13 +48,13 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "^1.6.6",
+    "@backstage/catalog-client": "^1.7.0-next.1",
     "@backstage/catalog-model": "^1.6.0",
-    "@backstage/core-compat-api": "^0.2.9-next.0",
-    "@backstage/core-components": "^0.14.10",
-    "@backstage/core-plugin-api": "^1.9.3",
-    "@backstage/frontend-plugin-api": "^0.8.0-next.0",
-    "@backstage/plugin-catalog-react": "^1.12.4-next.0",
+    "@backstage/core-compat-api": "^0.3.0-next.2",
+    "@backstage/core-components": "^0.14.11-next.1",
+    "@backstage/core-plugin-api": "^1.9.4-next.0",
+    "@backstage/frontend-plugin-api": "^0.8.0-next.2",
+    "@backstage/plugin-catalog-react": "^1.13.0-next.2",
     "@backstage/types": "^1.1.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
@@ -67,14 +67,14 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.27.1-next.0",
-    "@backstage/core-app-api": "^1.14.2",
-    "@backstage/dev-utils": "^1.0.38-next.0",
-    "@backstage/plugin-catalog": "^1.22.1-next.0",
-    "@backstage/test-utils": "^1.6.0-next.0",
+    "@backstage/cli": "^0.27.1-next.2",
+    "@backstage/core-app-api": "^1.14.3-next.0",
+    "@backstage/dev-utils": "^1.1.0-next.2",
+    "@backstage/plugin-catalog": "^1.23.0-next.2",
+    "@backstage/test-utils": "^1.6.0-next.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0"
   },
   "peerDependencies": {