catalog-graph: fix flickering when parent re-renders

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

.changeset/short-keys-heal.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Fixed an issue causing the `CatalogGraphCard` to redraw its content whenever the parent component re-renders, resulting in flickering.

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx

@@ -28,7 +28,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import qs from 'qs';
-import React, { MouseEvent, ReactNode, useCallback } from 'react';
+import React, { MouseEvent, ReactNode, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { catalogGraphRouteRef } from '../../routes';
 import {
@@ -86,7 +86,7 @@ export const CatalogGraphCard = (
   } = props;
 
   const { entity } = useEntity();
-  const entityName = getCompoundEntityRef(entity);
+  const entityName = useMemo(() => getCompoundEntityRef(entity), [entity]);
   const catalogEntityRoute = useRouteRef(entityRouteRef);
   const catalogGraphRoute = useRouteRef(catalogGraphRouteRef);
   const navigate = useNavigate();

plugins/catalog-react/report.api.md

@@ -685,7 +685,9 @@ export function humanizeEntityRef(
 export function InspectEntityDialog(props: {
   open: boolean;
   entity: Entity;
+  initialTab?: 'overview' | 'ancestry' | 'colocated' | 'json' | 'yaml';
   onClose: () => void;
+  onSelect?: (tab: string) => void;
 }): React_2.JSX.Element | null;
 
 // @public