Merge pull request #527 from josejulio/jira/KIALI-1193

KIALI-1193 Re-fits the graph on every resize if we are on the "initial" pan/zoom level

src/components/CytoscapeGraph/CytoscapeGraph.tsx

@@ -53,6 +53,16 @@ type CytoscapeGraphProps = CytoscapeGraphType &
 
 type CytoscapeGraphState = {};
 
+type Position = {
+  x: number;
+  y: number;
+};
+
+type InitialValues = {
+  position?: Position;
+  zoom?: number;
+};
+
 // @todo: Move this class to 'containers' folder -- but it effects many other things
 // exporting this class for testing
 export class CytoscapeGraph extends React.Component<CytoscapeGraphProps, CytoscapeGraphState> {
@@ -65,11 +75,16 @@ export class CytoscapeGraph extends React.Component<CytoscapeGraphProps, Cytosca
   private cytoscapeReactWrapperRef: any;
   private updateLayout: boolean;
   private resetSelection: boolean;
+  private initialValues: InitialValues;
   private cy: any;
 
   constructor(props: CytoscapeGraphProps) {
     super(props);
     this.updateLayout = false;
+    this.initialValues = {
+      position: undefined,
+      zoom: undefined
+    };
   }
 
   shouldComponentUpdate(nextProps: CytoscapeGraphProps, nextState: CytoscapeGraphState) {
@@ -108,14 +123,7 @@ export class CytoscapeGraph extends React.Component<CytoscapeGraphProps, Cytosca
   render() {
     return (
       <div id="cytoscape-container" className={this.props.containerClassName}>
-        <ReactResizeDetector
-          handleWidth={true}
-          handleHeight={true}
-          skipOnMount={true}
-          refreshMode={'throttle'}
-          refreshRate={100}
-          onResize={this.onResize}
-        />
+        <ReactResizeDetector handleWidth={true} handleHeight={true} skipOnMount={true} onResize={this.onResize} />
         <EmptyGraphLayout
           elements={this.props.elements}
           namespace={this.props.namespace.name}
@@ -145,6 +153,17 @@ export class CytoscapeGraph extends React.Component<CytoscapeGraphProps, Cytosca
   private onResize = () => {
     if (this.cy) {
       this.cy.resize();
+      const currentPosition = this.cy.pan();
+      const currentZoom = this.cy.zoom();
+      if (
+        this.initialValues.position &&
+        this.initialValues.position.x === currentPosition.x &&
+        this.initialValues.position.y === currentPosition.y &&
+        this.initialValues.zoom === currentZoom
+      ) {
+        // There was a resize, but we are in the initial pan/zoom state, we can fit again.
+        this.safeFit(this.cy);
+      }
     }
   };
 
@@ -265,6 +284,8 @@ export class CytoscapeGraph extends React.Component<CytoscapeGraphProps, Cytosca
       cy.zoom(2.5);
       cy.center();
     }
+    this.initialValues.position = { ...cy.pan() };
+    this.initialValues.zoom = cy.zoom();
   }
 
   private processGraphUpdate(cy: any) {

src/pages/ServiceGraph/ServiceGraphPage.tsx

@@ -37,7 +37,7 @@ const containerStyle = style({
   height: 'calc(100vh - 60px)' // View height minus top bar height
 });
 
-const cytoscapeGraphContainerStyle = style({ flex: '1', minWidth: '350px', zIndex: 0 });
+const cytoscapeGraphContainerStyle = style({ flex: '1', minWidth: '350px', zIndex: 0, paddingRight: '5px' });
 
 const makeCancelablePromise = (promise: Promise<any>) => {
   let hasCanceled = false;