From 30c4427542a96fdfd7279521e22ea9742be89198 Mon Sep 17 00:00:00 2001
From: Ricardo M <lordrip@gmail.com>
Date: Tue, 28 Feb 2023 15:38:04 +0100
Subject: [PATCH] fix(vscode): Adding a step in Kaoto VSCode takes several
 seconds

Currently, adding a new step from the `VSCode` extension takes more than 12 seconds.

This is because, in `VSCode`, the `MiniCatalog` component gets rerendered many times
blocking the UI thread.

Part of the solution is to avoid recreating functions inside of components that
later on are passed to child components. A more robust solution would include
removing many other points that trigger extra renders.

Changes
* Move the `onNodeClick` function inside of a `useCallback()` hook
* Given that stepsService it's a dependency of `onNodeClick`, it needed to be moved inside a `useMemo()` hook.
* Remove `setReactFlowInstance` since seems not used
* Remove `reactFlowWrapper` since is not linked with anything
* Move inline styles to a dedicated CSS class

Fixes https://github.com/KaotoIO/vscode-kaoto/issues/132
---
 src/components/MiniCatalog.tsx   |  2 +-
 src/components/Visualization.css |  7 +++++-
 src/components/Visualization.tsx | 37 ++++++++++++--------------------
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/MiniCatalog.tsx b/src/components/MiniCatalog.tsx
index ff9453e4a..a5224fce6 100644
--- a/src/components/MiniCatalog.tsx
+++ b/src/components/MiniCatalog.tsx
@@ -78,7 +78,7 @@ export const MiniCatalog = (props: IMiniCatalog) => {
         });
     }
     searchInputRef.current?.focus();
-  }, [dsl]);
+  }, []);
 
   const changeSearch = (e: string) => {
     setQuery(e);
diff --git a/src/components/Visualization.css b/src/components/Visualization.css
index cc4b0bd07..f148f190c 100644
--- a/src/components/Visualization.css
+++ b/src/components/Visualization.css
@@ -17,6 +17,11 @@
     right: -20px !important;
 }
 
+.reactflow-wrapper {
+    width: 100vw;
+    height: calc(100vh - 77px);
+}
+
 .stepNode {
     align-items: center;
     background: var(--pf-global--BackgroundColor--100);
@@ -51,7 +56,7 @@
     left: 0;
     top: 0;
  }
-  
+
  .stepNode__Icon {
     position: relative;
     top: 55%;
diff --git a/src/components/Visualization.tsx b/src/components/Visualization.tsx
index 6dc21fe83..e9447976e 100644
--- a/src/components/Visualization.tsx
+++ b/src/components/Visualization.tsx
@@ -11,7 +11,7 @@ import {
 import { StepsService, VisualizationService } from '@kaoto/services';
 import { useIntegrationJsonStore, useNestedStepsStore, useVisualizationStore } from '@kaoto/store';
 import { IStepProps, IVizStepNode } from '@kaoto/types';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactFlow, { Background, Viewport } from 'reactflow';
 
 const Visualization = () => {
@@ -25,8 +25,6 @@ const Visualization = () => {
     zoom: 1.2,
   };
   const [isPanelExpanded, setIsPanelExpanded] = useState(false);
-  const [, setReactFlowInstance] = useState(null);
-  const reactFlowWrapper = useRef(null);
   const [selectedStep, setSelectedStep] = useState<IStepProps>({
     maxBranches: 0,
     minBranches: 0,
@@ -40,7 +38,10 @@ const Visualization = () => {
   const previousLayout = useRef(visualizationStore.layout);
   const previousIntegrationJson = useRef(integrationJsonStore.integrationJson);
   const visualizationService = new VisualizationService(integrationJsonStore, visualizationStore);
-  const stepsService = new StepsService(integrationJsonStore, nestedStepsStore, visualizationStore);
+  const stepsService = useMemo(
+    () => new StepsService(integrationJsonStore, nestedStepsStore, visualizationStore),
+    [integrationJsonStore, nestedStepsStore, visualizationStore],
+  );
 
   // initial loading of visualization steps
   useEffect(() => {
@@ -109,7 +110,7 @@ const Visualization = () => {
    * @param e
    * @param node
    */
-  const onNodeClick = (e: any, node: IVizStepNode) => {
+  const onNodeClick = useCallback((e: any, node: IVizStepNode) => {
     // here we check if it's a node or edge
     // workaround for https://github.com/wbkd/react-flow/issues/2202
     if (!e.target.classList.contains('stepNode__clickable')) return;
@@ -132,11 +133,7 @@ const Visualization = () => {
         visualizationStore.setSelectedStepUuid('');
       }
     }
-  };
-
-  const onLoad = (_reactFlowInstance: any) => {
-    setReactFlowInstance(_reactFlowInstance);
-  };
+  }, [isPanelExpanded, selectedStep.UUID, stepsService, visualizationStore]);
 
   /**
    * Handles Step View configuration changes
@@ -152,8 +149,8 @@ const Visualization = () => {
       <KaotoDrawer
         isExpanded={isPanelExpanded}
         data-expanded={isPanelExpanded}
-        isResizable={true}
-        dataTestId={'kaoto-right-drawer'}
+        isResizable
+        dataTestId="kaoto-right-drawer"
         panelContent={
           <VisualizationStepViews
             step={selectedStep}
@@ -162,19 +159,14 @@ const Visualization = () => {
             saveConfig={saveConfig}
           />
         }
-        position={'right'}
-        id={'right-resize-panel'}
-        defaultSize={'500px'}
-        minSize={'150px'}
+        position="right"
+        id="right-resize-panel"
+        defaultSize="500px"
+        minSize="150px"
       >
         <div
           className="reactflow-wrapper"
-          data-testid={'react-flow-wrapper'}
-          ref={reactFlowWrapper}
-          style={{
-            width: '100vw',
-            height: 'calc(100vh - 77px )',
-          }}
+          data-testid="react-flow-wrapper"
         >
           <ReactFlow
             nodes={visualizationStore.nodes}
@@ -186,7 +178,6 @@ const Visualization = () => {
             onNodeClick={onNodeClick}
             onNodesChange={visualizationStore.onNodesChange}
             onEdgesChange={visualizationStore.onEdgesChange}
-            onLoad={onLoad}
             snapToGrid={true}
             snapGrid={[15, 15]}
             deleteKeyCode={null}