Disable zooming for the CatalogGraphCard

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

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

@@ -27,11 +27,11 @@ import React, { MouseEvent, useCallback } from 'react';
 import { useNavigate } from 'react-router';
 import { catalogEntityRouteRef, catalogGraphRouteRef } from '../../routes';
 import {
+  ALL_RELATION_PAIRS,
   Direction,
   EntityNode,
   EntityRelationsGraph,
   RelationPairs,
-  ALL_RELATION_PAIRS,
 } from '../EntityRelationsGraph';
 
 const useStyles = makeStyles<Theme, { height: number | undefined }>({
@@ -58,6 +58,7 @@ export const CatalogGraphCard = ({
   direction = Direction.LEFT_RIGHT,
   height,
   title = 'Relations',
+  zoom = 'enable-on-click',
 }: {
   variant?: InfoCardVariants;
   relationPairs?: RelationPairs;
@@ -69,6 +70,7 @@ export const CatalogGraphCard = ({
   direction?: Direction;
   height?: number;
   title?: string;
+  zoom?: 'enabled' | 'disabled' | 'enable-on-click';
 }) => {
   const { entity } = useEntity();
   const entityName = getEntityName(entity);
@@ -118,6 +120,7 @@ export const CatalogGraphCard = ({
         onNodeClick={onNodeClick}
         className={classes.graph}
         relationPairs={relationPairs}
+        zoom={zoom}
       />
     </InfoCard>
   );

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

@@ -231,6 +231,7 @@ export const CatalogGraphPage = ({
                 direction={direction}
                 relationPairs={relationPairs}
                 className={classes.graph}
+                zoom="enabled"
               />
             </Paper>
           </Grid>

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

@@ -24,7 +24,7 @@ import classNames from 'classnames';
 import React, { MouseEvent, useEffect, useMemo } from 'react';
 import { CustomLabel } from './CustomLabel';
 import { CustomNode } from './CustomNode';
-import { RelationPairs, ALL_RELATION_PAIRS } from './relations';
+import { ALL_RELATION_PAIRS, RelationPairs } from './relations';
 import { Direction, EntityNode } from './types';
 import { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';
 
@@ -75,6 +75,7 @@ export const EntityRelationsGraph = ({
   onNodeClick,
   relationPairs = ALL_RELATION_PAIRS,
   className,
+  zoom = 'enabled',
 }: {
   rootEntityNames: EntityName | EntityName[];
   maxDepth?: number;
@@ -86,6 +87,7 @@ export const EntityRelationsGraph = ({
   onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;
   relationPairs?: RelationPairs;
   className?: string;
+  zoom?: 'enabled' | 'disabled' | 'enable-on-click';
 }) => {
   const theme = useTheme();
   const classes = useStyles();
@@ -130,6 +132,7 @@ export const EntityRelationsGraph = ({
           paddingY={theme.spacing(4)}
           labelPosition={DependencyGraphTypes.LabelPosition.RIGHT}
           labelOffset={theme.spacing(1)}
+          zoom={zoom}
         />
       )}
     </div>