@backstage/plugin-catalog-graph 0.2.23 → 0.2.24-next.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @backstage/plugin-catalog-graph
 
+## 0.2.24-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.12.1-next.1
+  - @backstage/core-plugin-api@1.1.1-next.1
+  - @backstage/plugin-catalog-react@1.2.2-next.1
+  - @backstage/catalog-client@1.2.0-next.1
+  - @backstage/catalog-model@1.1.4-next.1
+  - @backstage/theme@0.2.16
+
+## 0.2.24-next.0
+
+### Patch Changes
+
+- cb716004ef: Internal refactor to improve tests
+- Updated dependencies
+  - @backstage/catalog-client@1.2.0-next.0
+  - @backstage/core-components@0.12.1-next.0
+  - @backstage/core-plugin-api@1.1.1-next.0
+  - @backstage/plugin-catalog-react@1.2.2-next.0
+  - @backstage/catalog-model@1.1.4-next.0
+  - @backstage/theme@0.2.16
+
 ## 0.2.23
 
 ### Patch Changes

package/dist/esm/{index-04b3cc7d.esm.js → index-3b0f9dff.esm.js}

@@ -82,29 +82,36 @@ const CatalogGraphCard = (props) => {
     { arrayFormat: "brackets", addQueryPrefix: true }
   );
   const catalogGraphUrl = `${catalogGraphRoute()}${catalogGraphParams}`;
-  return /* @__PURE__ */ React.createElement(InfoCard, {
-    title,
-    cardClassName: classes.card,
-    variant,
-    noPadding: true,
-    deepLink: {
-      title: "View graph",
-      link: catalogGraphUrl
-    }
-  }, /* @__PURE__ */ React.createElement(EntityRelationsGraph, {
-    rootEntityNames: entityName,
-    maxDepth,
-    unidirectional,
-    mergeRelations,
-    kinds,
-    relations,
-    direction,
-    onNodeClick,
-    className: classes.graph,
-    relationPairs,
-    zoom
-  }));
+  return /* @__PURE__ */ React.createElement(
+    InfoCard,
+    {
+      title,
+      cardClassName: classes.card,
+      variant,
+      noPadding: true,
+      deepLink: {
+        title: "View graph",
+        link: catalogGraphUrl
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      EntityRelationsGraph,
+      {
+        rootEntityNames: entityName,
+        maxDepth,
+        unidirectional,
+        mergeRelations,
+        kinds,
+        relations,
+        direction,
+        onNodeClick,
+        className: classes.graph,
+        relationPairs,
+        zoom
+      }
+    )
+  );
 };
 
 export { CatalogGraphCard };
-//# sourceMappingURL=index-04b3cc7d.esm.js.map
+//# sourceMappingURL=index-3b0f9dff.esm.js.map

package/dist/esm/{index-04b3cc7d.esm.js.map → index-3b0f9dff.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-04b3cc7d.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';\nimport qs from 'qs';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport { catalogGraphRouteRef } from '../../routes';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  RelationPairs,\n} from '../EntityRelationsGraph';\n\nconst useStyles = makeStyles<Theme, { height: number | undefined }>(\n  {\n    card: ({ height }) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: height,\n      minHeight: height,\n    }),\n    graph: {\n      flex: 1,\n      minHeight: 0,\n    },\n  },\n  { name: 'PluginCatalogGraphCatalogGraphCard' },\n);\n\nexport const CatalogGraphCard = (props: {\n  variant?: InfoCardVariants;\n  relationPairs?: RelationPairs;\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  direction?: Direction;\n  height?: number;\n  title?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n}) => {\n  const {\n    variant = 'gridItem',\n    relationPairs = ALL_RELATION_PAIRS,\n    maxDepth = 1,\n    unidirectional = true,\n    mergeRelations = true,\n    kinds,\n    relations,\n    direction = Direction.LEFT_RIGHT,\n    height,\n    title = 'Relations',\n    zoom = 'enable-on-click',\n  } = props;\n\n  const { entity } = useEntity();\n  const entityName = getCompoundEntityRef(entity);\n  const catalogEntityRoute = useRouteRef(entityRouteRef);\n  const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);\n  const navigate = useNavigate();\n  const classes = useStyles({ height });\n  const analytics = useAnalytics();\n\n  const onNodeClick = 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.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 + 1,\n      unidirectional,\n      mergeRelations,\n      kinds,\n      relations,\n      direction,\n    },\n    { arrayFormat: 'brackets', addQueryPrefix: true },\n  );\n  const catalogGraphUrl = `${catalogGraphRoute()}${catalogGraphParams}`;\n\n  return (\n    <InfoCard\n      title={title}\n      cardClassName={classes.card}\n      variant={variant}\n      noPadding\n      deepLink={{\n        title: 'View graph',\n        link: catalogGraphUrl,\n      }}\n    >\n      <EntityRelationsGraph\n        rootEntityNames={entityName}\n        maxDepth={maxDepth}\n        unidirectional={unidirectional}\n        mergeRelations={mergeRelations}\n        kinds={kinds}\n        relations={relations}\n        direction={direction}\n        onNodeClick={onNodeClick}\n        className={classes.graph}\n        relationPairs={relationPairs}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index-3b0f9dff.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';\nimport qs from 'qs';\nimport React, { MouseEvent, useCallback } from 'react';\nimport { useNavigate } from 'react-router';\nimport { catalogGraphRouteRef } from '../../routes';\nimport {\n  ALL_RELATION_PAIRS,\n  Direction,\n  EntityNode,\n  EntityRelationsGraph,\n  RelationPairs,\n} from '../EntityRelationsGraph';\n\nconst useStyles = makeStyles<Theme, { height: number | undefined }>(\n  {\n    card: ({ height }) => ({\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: height,\n      minHeight: height,\n    }),\n    graph: {\n      flex: 1,\n      minHeight: 0,\n    },\n  },\n  { name: 'PluginCatalogGraphCatalogGraphCard' },\n);\n\nexport const CatalogGraphCard = (props: {\n  variant?: InfoCardVariants;\n  relationPairs?: RelationPairs;\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  direction?: Direction;\n  height?: number;\n  title?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n}) => {\n  const {\n    variant = 'gridItem',\n    relationPairs = ALL_RELATION_PAIRS,\n    maxDepth = 1,\n    unidirectional = true,\n    mergeRelations = true,\n    kinds,\n    relations,\n    direction = Direction.LEFT_RIGHT,\n    height,\n    title = 'Relations',\n    zoom = 'enable-on-click',\n  } = props;\n\n  const { entity } = useEntity();\n  const entityName = getCompoundEntityRef(entity);\n  const catalogEntityRoute = useRouteRef(entityRouteRef);\n  const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);\n  const navigate = useNavigate();\n  const classes = useStyles({ height });\n  const analytics = useAnalytics();\n\n  const onNodeClick = 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.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 + 1,\n      unidirectional,\n      mergeRelations,\n      kinds,\n      relations,\n      direction,\n    },\n    { arrayFormat: 'brackets', addQueryPrefix: true },\n  );\n  const catalogGraphUrl = `${catalogGraphRoute()}${catalogGraphParams}`;\n\n  return (\n    <InfoCard\n      title={title}\n      cardClassName={classes.card}\n      variant={variant}\n      noPadding\n      deepLink={{\n        title: 'View graph',\n        link: catalogGraphUrl,\n      }}\n    >\n      <EntityRelationsGraph\n        rootEntityNames={entityName}\n        maxDepth={maxDepth}\n        unidirectional={unidirectional}\n        mergeRelations={mergeRelations}\n        kinds={kinds}\n        relations={relations}\n        direction={direction}\n        onNodeClick={onNodeClick}\n        className={classes.graph}\n        relationPairs={relationPairs}\n        zoom={zoom}\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/{index-e6a68f95.esm.js → index-3f9f92d1.esm.js}

@@ -6,7 +6,7 @@ import { Box, makeStyles, FormControl, Typography, OutlinedInput, InputAdornment
 import FilterListIcon from '@material-ui/icons/FilterList';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import { Autocomplete, ToggleButton } from '@material-ui/lab';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { Direction, EntityRelationsGraph, ALL_RELATION_PAIRS } from '../index.esm.js';
 import ClearIcon from '@material-ui/icons/Clear';
@@ -31,18 +31,18 @@ const CURVE_DISPLAY_NAMES = {
 const curves = ["curveMonotoneX", "curveStepBefore"];
 const CurveFilter = ({ value, onChange }) => {
   const handleChange = useCallback((v) => onChange(v), [onChange]);
-  return /* @__PURE__ */ React.createElement(Box, {
-    pb: 1,
-    pt: 1
-  }, /* @__PURE__ */ React.createElement(Select, {
-    label: "Curve",
-    selected: value,
-    items: curves.map((v) => ({
-      label: CURVE_DISPLAY_NAMES[v],
-      value: v
-    })),
-    onChange: handleChange
-  }));
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      label: "Curve",
+      selected: value,
+      items: curves.map((v) => ({
+        label: CURVE_DISPLAY_NAMES[v],
+        value: v
+      })),
+      onChange: handleChange
+    }
+  ));
 };
 
 const DIRECTION_DISPLAY_NAMES = {
@@ -53,18 +53,18 @@ const DIRECTION_DISPLAY_NAMES = {
 };
 const DirectionFilter = ({ value, onChange }) => {
   const handleChange = useCallback((v) => onChange(v), [onChange]);
-  return /* @__PURE__ */ React.createElement(Box, {
-    pb: 1,
-    pt: 1
-  }, /* @__PURE__ */ React.createElement(Select, {
-    label: "Direction",
-    selected: value,
-    items: Object.values(Direction).map((v) => ({
-      label: DIRECTION_DISPLAY_NAMES[v],
-      value: v
-    })),
-    onChange: handleChange
-  }));
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      label: "Direction",
+      selected: value,
+      items: Object.values(Direction).map((v) => ({
+        label: DIRECTION_DISPLAY_NAMES[v],
+        value: v
+      })),
+      onChange: handleChange
+    }
+  ));
 };
 
 const useStyles$4 = makeStyles(
@@ -78,41 +78,49 @@ const useStyles$4 = makeStyles(
 );
 const MaxDepthFilter = ({ value, onChange }) => {
   const classes = useStyles$4();
+  const onChangeRef = useRef(onChange);
+  const [currentValue, setCurrentValue] = useState(value);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
   const handleChange = useCallback(
     (event) => {
-      const v = Number(event.target.value);
-      onChange(v <= 0 ? Number.POSITIVE_INFINITY : v);
+      const newValueNumeric = Number(event.target.value);
+      const newValue = Number.isFinite(newValueNumeric) && newValueNumeric > 0 ? newValueNumeric : Number.POSITIVE_INFINITY;
+      setCurrentValue(newValue);
+      onChangeRef.current(newValue);
     },
-    [onChange]
+    []
   );
   const reset = useCallback(() => {
-    onChange(Number.POSITIVE_INFINITY);
-  }, [onChange]);
-  return /* @__PURE__ */ React.createElement(Box, {
-    pb: 1,
-    pt: 1
-  }, /* @__PURE__ */ React.createElement(FormControl, {
-    variant: "outlined",
-    className: classes.formControl
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, "Max Depth"), /* @__PURE__ */ React.createElement(OutlinedInput, {
-    type: "number",
-    placeholder: "\u221E Infinite",
-    value: isFinite(value) ? value : "",
-    onChange: handleChange,
-    endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
-      position: "end"
-    }, /* @__PURE__ */ React.createElement(IconButton, {
-      "aria-label": "clear max depth",
-      onClick: reset,
-      edge: "end"
-    }, /* @__PURE__ */ React.createElement(ClearIcon, null))),
-    inputProps: {
-      "aria-label": "maxp"
-    },
-    labelWidth: 0
-  })));
+    setCurrentValue(Number.POSITIVE_INFINITY);
+    onChangeRef.current(Number.POSITIVE_INFINITY);
+  }, [onChangeRef]);
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", className: classes.formControl }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Max Depth"), /* @__PURE__ */ React.createElement(
+    OutlinedInput,
+    {
+      type: "number",
+      placeholder: "\u221E Infinite",
+      value: Number.isFinite(currentValue) ? String(currentValue) : "",
+      onChange: handleChange,
+      endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          "aria-label": "clear max depth",
+          onClick: reset,
+          edge: "end"
+        },
+        /* @__PURE__ */ React.createElement(ClearIcon, null)
+      )),
+      inputProps: {
+        "aria-label": "maxp"
+      },
+      labelWidth: 0
+    }
+  )));
 };
 
 const useStyles$3 = makeStyles(
@@ -159,49 +167,44 @@ const SelectedKindsFilter = ({ value, onChange }) => {
   if (!(kinds == null ? void 0 : kinds.length) || !(normalizedKinds == null ? void 0 : normalizedKinds.length) || error) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null);
   }
-  return /* @__PURE__ */ React.createElement(Box, {
-    pb: 1,
-    pt: 1
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, "Kinds"), /* @__PURE__ */ React.createElement(Autocomplete, {
-    className: classes.formControl,
-    multiple: true,
-    limitTags: 4,
-    disableCloseOnSelect: true,
-    "aria-label": "Kinds",
-    options: normalizedKinds,
-    value: value != null ? value : normalizedKinds,
-    getOptionLabel: (k) => {
-      var _a;
-      return (_a = kinds[normalizedKinds.indexOf(k)]) != null ? _a : k;
-    },
-    onChange: handleChange,
-    onBlur: handleEmpty,
-    renderOption: (option, { selected }) => {
-      var _a;
-      return /* @__PURE__ */ React.createElement(FormControlLabel, {
-        control: /* @__PURE__ */ React.createElement(Checkbox, {
-          icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, {
-            fontSize: "small"
-          }),
-          checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, {
-            fontSize: "small"
-          }),
-          checked: selected
-        }),
-        label: (_a = kinds[normalizedKinds.indexOf(option)]) != null ? _a : option
-      });
-    },
-    size: "small",
-    popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, {
-      "data-testid": "selected-kinds-expand"
-    }),
-    renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
-      ...params,
-      variant: "outlined"
-    })
-  }));
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Kinds"), /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      className: classes.formControl,
+      multiple: true,
+      limitTags: 4,
+      disableCloseOnSelect: true,
+      "aria-label": "Kinds",
+      options: normalizedKinds,
+      value: value != null ? value : normalizedKinds,
+      getOptionLabel: (k) => {
+        var _a;
+        return (_a = kinds[normalizedKinds.indexOf(k)]) != null ? _a : k;
+      },
+      onChange: handleChange,
+      onBlur: handleEmpty,
+      renderOption: (option, { selected }) => {
+        var _a;
+        return /* @__PURE__ */ React.createElement(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ React.createElement(
+              Checkbox,
+              {
+                icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }),
+                checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" }),
+                checked: selected
+              }
+            ),
+            label: (_a = kinds[normalizedKinds.indexOf(option)]) != null ? _a : option
+          }
+        );
+      },
+      size: "small",
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "selected-kinds-expand" }),
+      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
+    }
+  ));
 };
 
 const useStyles$2 = makeStyles(
@@ -228,42 +231,37 @@ const SelectedRelationsFilter = ({
   const handleEmpty = useCallback(() => {
     onChange((value == null ? void 0 : value.length) ? value : void 0);
   }, [value, onChange]);
-  return /* @__PURE__ */ React.createElement(Box, {
-    pb: 1,
-    pt: 1
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, "Relations"), /* @__PURE__ */ React.createElement(Autocomplete, {
-    className: classes.formControl,
-    multiple: true,
-    limitTags: 4,
-    disableCloseOnSelect: true,
-    "aria-label": "Relations",
-    options: relations,
-    value: value != null ? value : relations,
-    onChange: handleChange,
-    onBlur: handleEmpty,
-    renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(FormControlLabel, {
-      control: /* @__PURE__ */ React.createElement(Checkbox, {
-        icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, {
-          fontSize: "small"
-        }),
-        checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, {
-          fontSize: "small"
-        }),
-        checked: selected
-      }),
-      label: option
-    }),
-    size: "small",
-    popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, {
-      "data-testid": "selected-relations-expand"
-    }),
-    renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
-      ...params,
-      variant: "outlined"
-    })
-  }));
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Relations"), /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      className: classes.formControl,
+      multiple: true,
+      limitTags: 4,
+      disableCloseOnSelect: true,
+      "aria-label": "Relations",
+      options: relations,
+      value: value != null ? value : relations,
+      onChange: handleChange,
+      onBlur: handleEmpty,
+      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }),
+              checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" }),
+              checked: selected
+            }
+          ),
+          label: option
+        }
+      ),
+      size: "small",
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "selected-relations-expand" }),
+      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
+    }
+  ));
 };
 
 const useStyles$1 = makeStyles(
@@ -283,19 +281,22 @@ const SwitchFilter = ({ label, value, onChange }) => {
     },
     [onChange]
   );
-  return /* @__PURE__ */ React.createElement(Box, {
-    pb: 1,
-    pt: 1
-  }, /* @__PURE__ */ React.createElement(FormControlLabel, {
-    control: /* @__PURE__ */ React.createElement(Switch, {
-      checked: value,
-      onChange: handleChange,
-      name: label,
-      color: "primary"
-    }),
-    label,
-    className: classes.root
-  }));
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React.createElement(
+        Switch,
+        {
+          checked: value,
+          onChange: handleChange,
+          name: label,
+          color: "primary"
+        }
+      ),
+      label,
+      className: classes.root
+    }
+  ));
 };
 
 function useCatalogGraphPage({
@@ -569,81 +570,82 @@ const CatalogGraphPage = (props) => {
     },
     [catalogEntityRoute, navigate, setRootEntityNames, analytics]
   );
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    title: "Catalog Graph",
-    subtitle: rootEntityNames.map((e) => humanizeEntityRef(e)).join(", ")
-  }), /* @__PURE__ */ React.createElement(Content, {
-    stretch: true,
-    className: classes.content
-  }, /* @__PURE__ */ React.createElement(ContentHeader, {
-    titleComponent: /* @__PURE__ */ React.createElement(ToggleButton, {
-      value: "show filters",
-      selected: showFilters,
-      onChange: () => toggleShowFilters()
-    }, /* @__PURE__ */ React.createElement(FilterListIcon, null), " Filters")
-  }, /* @__PURE__ */ React.createElement(SupportButton, null, "Start tracking your component in by adding it to the software catalog.")), /* @__PURE__ */ React.createElement(Grid, {
-    container: true,
-    alignItems: "stretch",
-    className: classes.container
-  }, showFilters && /* @__PURE__ */ React.createElement(Grid, {
-    item: true,
-    xs: 12,
-    lg: 2,
-    className: classes.filters
-  }, /* @__PURE__ */ React.createElement(MaxDepthFilter, {
-    value: maxDepth,
-    onChange: setMaxDepth
-  }), /* @__PURE__ */ React.createElement(SelectedKindsFilter, {
-    value: selectedKinds,
-    onChange: setSelectedKinds
-  }), /* @__PURE__ */ React.createElement(SelectedRelationsFilter, {
-    value: selectedRelations,
-    onChange: setSelectedRelations,
-    relationPairs
-  }), /* @__PURE__ */ React.createElement(DirectionFilter, {
-    value: direction,
-    onChange: setDirection
-  }), /* @__PURE__ */ React.createElement(CurveFilter, {
-    value: curve,
-    onChange: setCurve
-  }), /* @__PURE__ */ React.createElement(SwitchFilter, {
-    value: unidirectional,
-    onChange: setUnidirectional,
-    label: "Simplified"
-  }), /* @__PURE__ */ React.createElement(SwitchFilter, {
-    value: mergeRelations,
-    onChange: setMergeRelations,
-    label: "Merge Relations"
-  })), /* @__PURE__ */ React.createElement(Grid, {
-    item: true,
-    xs: true,
-    className: classes.fullHeight
-  }, /* @__PURE__ */ React.createElement(Paper, {
-    className: classes.graphWrapper
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "caption",
-    color: "textSecondary",
-    display: "block",
-    className: classes.legend
-  }, /* @__PURE__ */ React.createElement(ZoomOutMap, {
-    className: "icon"
-  }), " Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity."), /* @__PURE__ */ React.createElement(EntityRelationsGraph, {
-    rootEntityNames,
-    maxDepth,
-    kinds: selectedKinds && selectedKinds.length > 0 ? selectedKinds : void 0,
-    relations: selectedRelations && selectedRelations.length > 0 ? selectedRelations : void 0,
-    mergeRelations,
-    unidirectional,
-    onNodeClick,
-    direction,
-    relationPairs,
-    className: classes.graph,
-    zoom: "enabled",
-    curve
-  }))))));
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Catalog Graph",
+      subtitle: rootEntityNames.map((e) => humanizeEntityRef(e)).join(", ")
+    }
+  ), /* @__PURE__ */ React.createElement(Content, { stretch: true, className: classes.content }, /* @__PURE__ */ React.createElement(
+    ContentHeader,
+    {
+      titleComponent: /* @__PURE__ */ React.createElement(
+        ToggleButton,
+        {
+          value: "show filters",
+          selected: showFilters,
+          onChange: () => toggleShowFilters()
+        },
+        /* @__PURE__ */ React.createElement(FilterListIcon, null),
+        " Filters"
+      )
+    },
+    /* @__PURE__ */ React.createElement(SupportButton, null, "Start tracking your component in by adding it to the software catalog.")
+  ), /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "stretch", className: classes.container }, showFilters && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, lg: 2, className: classes.filters }, /* @__PURE__ */ React.createElement(MaxDepthFilter, { value: maxDepth, onChange: setMaxDepth }), /* @__PURE__ */ React.createElement(
+    SelectedKindsFilter,
+    {
+      value: selectedKinds,
+      onChange: setSelectedKinds
+    }
+  ), /* @__PURE__ */ React.createElement(
+    SelectedRelationsFilter,
+    {
+      value: selectedRelations,
+      onChange: setSelectedRelations,
+      relationPairs
+    }
+  ), /* @__PURE__ */ React.createElement(DirectionFilter, { value: direction, onChange: setDirection }), /* @__PURE__ */ React.createElement(CurveFilter, { value: curve, onChange: setCurve }), /* @__PURE__ */ React.createElement(
+    SwitchFilter,
+    {
+      value: unidirectional,
+      onChange: setUnidirectional,
+      label: "Simplified"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    SwitchFilter,
+    {
+      value: mergeRelations,
+      onChange: setMergeRelations,
+      label: "Merge Relations"
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, className: classes.fullHeight }, /* @__PURE__ */ React.createElement(Paper, { className: classes.graphWrapper }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "caption",
+      color: "textSecondary",
+      display: "block",
+      className: classes.legend
+    },
+    /* @__PURE__ */ React.createElement(ZoomOutMap, { className: "icon" }),
+    " Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity."
+  ), /* @__PURE__ */ React.createElement(
+    EntityRelationsGraph,
+    {
+      rootEntityNames,
+      maxDepth,
+      kinds: selectedKinds && selectedKinds.length > 0 ? selectedKinds : void 0,
+      relations: selectedRelations && selectedRelations.length > 0 ? selectedRelations : void 0,
+      mergeRelations,
+      unidirectional,
+      onNodeClick,
+      direction,
+      relationPairs,
+      className: classes.graph,
+      zoom: "enabled",
+      curve
+    }
+  ))))));
 };
 
 export { CatalogGraphPage };
-//# sourceMappingURL=index-e6a68f95.esm.js.map
+//# sourceMappingURL=index-3f9f92d1.esm.js.map