Improve data picker performance (#1179)

Co-authored-by: Marcelo Gonçalves <marcelo@openops.com>

Author: Roman Snapko

packages/react-ui/src/app/features/builder/data-selector/data-selector-utils.ts

@@ -28,6 +28,9 @@ type HandleStepOutputProps = {
   displayName: string;
 };
 
+const MAX_SLICE_LENGTH = 10;
+const MAX_SLICES_AMOUNT = 10;
+
 function traverseStepOutputAndReturnMentionTree({
   stepOutput,
   success,
@@ -70,9 +73,8 @@ function handlingArrayStepOutput(
   parentDisplayName: string,
   startingIndex = 0,
 ): MentionTreeNode {
-  const maxSliceLength = 100;
   const isEmptyList = Object.keys(stepOutput).length === 0;
-  if (stepOutput.length <= maxSliceLength) {
+  if (stepOutput.length <= MAX_SLICE_LENGTH) {
     return {
       key: parentDisplayName,
       children: stepOutput.map((ouput, idx) =>
@@ -92,13 +94,15 @@ function handlingArrayStepOutput(
     };
   }
 
+  const slicesAmount = Math.ceil(stepOutput.length / MAX_SLICE_LENGTH);
+
   const numberOfSlices = new Array(
-    Math.ceil(stepOutput.length / maxSliceLength),
+    Math.min(slicesAmount, MAX_SLICES_AMOUNT),
   ).fill(0);
   const children: MentionTreeNode[] = numberOfSlices.map((_, idx) => {
-    const startingIndex = idx * maxSliceLength;
+    const startingIndex = idx * MAX_SLICE_LENGTH;
     const endingIndex =
-      Math.min((idx + 1) * maxSliceLength, stepOutput.length) - 1;
+      Math.min((idx + 1) * MAX_SLICE_LENGTH, stepOutput.length) - 1;
     const displayName = `${parentDisplayName} ${startingIndex}-${endingIndex}`;
     const sliceOutput = handlingArrayStepOutput(
       stepOutput.slice(startingIndex, endingIndex),

packages/ui-components/src/components/code-editor/code-editor.tsx

@@ -8,6 +8,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -67,9 +68,14 @@ const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>(
     const [currentLanguage, setCurrentLanguage] =
       useState<MonacoLanguage>(language);
 
-    const { code, packageJson } = isStringValue
-      ? { code: value, packageJson: undefined }
-      : sourceCodeObject || { code: convertToString(value), packageJson: '{}' };
+    const { code, packageJson } = useMemo(() => {
+      return isStringValue
+        ? { code: value, packageJson: undefined }
+        : sourceCodeObject || {
+            code: convertToString(value),
+            packageJson: '{}',
+          };
+    }, [value, sourceCodeObject, isStringValue]);
 
     const formatValue = (value: unknown): string => {
       if (typeof value === 'string') {