FEAT: Added "Run All Prompts" with Concurrent API Request Queuing Mec…

…hanism (#749) * Refactored the code to support concurrent prompt run API calls in the FE * Code quality improvement * Sonar Fix: Removed redundant jump * Optimization after load testing * Fixed sonar issues * Optimized and fixed sonar issues in usePromptRun custom hook * Fixed sonar issues * Disabled the feature to persist the prompt run details --------- Co-authored-by: Neha <[email protected]>
Zipstack · Oct 1, 2024 · 146130b · 146130b
1 parent e36941f
commit 146130b
Show file tree

Hide file tree

Showing 27 changed files with 850 additions and 819 deletions.
diff --git a/frontend/src/components/custom-tools/document-manager/DocumentManager.jsx b/frontend/src/components/custom-tools/document-manager/DocumentManager.jsx
@@ -88,7 +88,7 @@ function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
   const {
     selectedDoc,
     listOfDocs,
-    disableLlmOrDocChange,
+    isMultiPassExtractLoading,
     details,
     indexDocs,
     isSinglePassExtractLoading,
@@ -353,7 +353,7 @@ function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
                 size="small"
                 disabled={
                   !selectedDoc ||
-                  disableLlmOrDocChange?.length > 0 ||
+                  isMultiPassExtractLoading ||
                   isSinglePassExtractLoading ||
                   page <= 1
                 }
@@ -366,7 +366,7 @@ function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
                 size="small"
                 disabled={
                   !selectedDoc ||
-                  disableLlmOrDocChange?.length > 0 ||
+                  isMultiPassExtractLoading ||
                   isSinglePassExtractLoading ||
                   page >= listOfDocs?.length
                 }

diff --git a/frontend/src/components/custom-tools/editable-text/EditableText.jsx b/frontend/src/components/custom-tools/editable-text/EditableText.jsx
@@ -15,18 +15,13 @@ function EditableText({
   handleChange,
   isTextarea,
   placeHolder,
+  isCoverageLoading,
 }) {
   const name = isTextarea ? "prompt" : "prompt_key";
   const [triggerHandleChange, setTriggerHandleChange] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const divRef = useRef(null);
-  const {
-    disableLlmOrDocChange,
-    indexDocs,
-    selectedDoc,
-    isSinglePassExtractLoading,
-    isPublicSource,
-  } = useCustomToolStore();
+  const { isSinglePassExtractLoading, isPublicSource } = useCustomToolStore();
 
   useEffect(() => {
     setText(defaultText);
@@ -91,9 +86,7 @@ function EditableText({
         onBlur={handleBlur}
         onClick={() => setIsEditing(true)}
         disabled={
-          disableLlmOrDocChange.includes(promptId) ||
-          isSinglePassExtractLoading ||
-          isPublicSource
+          isCoverageLoading || isSinglePassExtractLoading || isPublicSource
         }
       />
     );
@@ -115,10 +108,7 @@ function EditableText({
       onBlur={handleBlur}
       onClick={() => setIsEditing(true)}
       disabled={
-        disableLlmOrDocChange.includes(promptId) ||
-        indexDocs.includes(selectedDoc?.document_id) ||
-        isSinglePassExtractLoading ||
-        isPublicSource
+        isCoverageLoading || isSinglePassExtractLoading || isPublicSource
       }
     />
   );
@@ -129,11 +119,12 @@ EditableText.propTypes = {
   setIsEditing: PropTypes.func.isRequired,
   text: PropTypes.string,
   setText: PropTypes.func.isRequired,
-  promptId: PropTypes.string.isRequired,
-  defaultText: PropTypes.string.isRequired,
+  promptId: PropTypes.string,
+  defaultText: PropTypes.string,
   handleChange: PropTypes.func.isRequired,
   isTextarea: PropTypes.bool,
   placeHolder: PropTypes.string,
+  isCoverageLoading: PropTypes.bool.isRequired,
 };
 
 export { EditableText };
diff --git a/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx b/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx
@@ -79,7 +79,7 @@ function ManageDocsModal({
     updateCustomTool,
     details,
     defaultLlmProfile,
-    disableLlmOrDocChange,
+    isMultiPassExtractLoading,
     indexDocs,
     rawIndexStatus,
     summarizeIndexStatus,
@@ -392,7 +392,7 @@ function ManageDocsModal({
                     icon={<ReloadOutlined />}
                     onClick={() => handleReIndexBtnClick(item)}
                     disabled={
-                      disableLlmOrDocChange?.length > 0 ||
+                      isMultiPassExtractLoading ||
                       isSinglePassExtractLoading ||
                       indexDocs.includes(item?.document_id) ||
                       isUploading ||
@@ -418,7 +418,7 @@ function ManageDocsModal({
                 size="small"
                 className="display-flex-align-center"
                 disabled={
-                  disableLlmOrDocChange?.length > 0 ||
+                  isMultiPassExtractLoading ||
                   isSinglePassExtractLoading ||
                   indexDocs.includes(item?.document_id) ||
                   isUploading ||
@@ -435,7 +435,7 @@ function ManageDocsModal({
             checked={selectedDoc?.document_id === item?.document_id}
             onClick={() => handleDocChange(item)}
             disabled={
-              disableLlmOrDocChange?.length > 0 ||
+              isMultiPassExtractLoading ||
               isSinglePassExtractLoading ||
               indexDocs.includes(item?.document_id)
             }
@@ -447,7 +447,7 @@ function ManageDocsModal({
   }, [
     listOfDocs,
     selectedDoc,
-    disableLlmOrDocChange,
+    isMultiPassExtractLoading,
     rawIndexStatus,
     summarizeIndexStatus,
     indexDocs,
@@ -602,7 +602,7 @@ function ManageDocsModal({
                   loading={isUploading}
                   disabled={
                     !defaultLlmProfile ||
-                    disableLlmOrDocChange?.length > 0 ||
+                    isMultiPassExtractLoading ||
                     isSinglePassExtractLoading ||
                     isPublicSource
                   }

diff --git a/frontend/src/components/custom-tools/output-for-doc-modal/OutputForDocModal.jsx b/frontend/src/components/custom-tools/output-for-doc-modal/OutputForDocModal.jsx
@@ -50,7 +50,7 @@ function OutputForDocModal({
   promptId,
   promptKey,
   profileManagerId,
-  docOutputs,
+  docOutputs = [],
 }) {
   const [promptOutputs, setPromptOutputs] = useState([]);
   const [rows, setRows] = useState([]);
@@ -60,7 +60,7 @@ function OutputForDocModal({
     details,
     listOfDocs,
     selectedDoc,
-    disableLlmOrDocChange,
+    isMultiPassExtractLoading,
     singlePassExtractMode,
     isSinglePassExtractLoading,
     isPublicSource,
@@ -89,10 +89,6 @@ function OutputForDocModal({
     isSinglePassExtractLoading,
   ]);
 
-  useEffect(() => {
-    updatePromptOutput(docOutputs);
-  }, [docOutputs]);
-
   useEffect(() => {
     handleRowsGeneration(promptOutputs);
   }, [promptOutputs, tokenUsage]);
@@ -360,9 +356,7 @@ function OutputForDocModal({
           <Button
             size="small"
             onClick={() => navigate("outputAnalyzer")}
-            disabled={
-              disableLlmOrDocChange?.length > 0 || isSinglePassExtractLoading
-            }
+            disabled={isMultiPassExtractLoading || isSinglePassExtractLoading}
           >
             View in Output Analyzer
           </Button>
@@ -391,8 +385,8 @@ function OutputForDocModal({
 OutputForDocModal.propTypes = {
   open: PropTypes.bool.isRequired,
   setOpen: PropTypes.func.isRequired,
-  promptId: PropTypes.string.isRequired,
-  promptKey: PropTypes.string.isRequired,
+  promptId: PropTypes.string,
+  promptKey: PropTypes.string,
   profileManagerId: PropTypes.string,
   docOutputs: PropTypes.object,
 };

diff --git a/frontend/src/components/custom-tools/prompt-card/DisplayPromptResult.jsx b/frontend/src/components/custom-tools/prompt-card/DisplayPromptResult.jsx
@@ -1,11 +1,41 @@
-import { Typography } from "antd";
+import { Spin, Typography } from "antd";
 import PropTypes from "prop-types";
 import { InfoCircleFilled } from "@ant-design/icons";
 
-import { displayPromptResult } from "../../../helpers/GetStaticData";
+import {
+  displayPromptResult,
+  generateApiRunStatusId,
+  PROMPT_RUN_API_STATUSES,
+} from "../../../helpers/GetStaticData";
 import "./PromptCard.css";
+import { useCustomToolStore } from "../../../store/custom-tool-store";
+import { useEffect, useState } from "react";
+import { SpinnerLoader } from "../../widgets/spinner-loader/SpinnerLoader";
+
+function DisplayPromptResult({ output, profileId, docId, promptRunStatus }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const { singlePassExtractMode, isSinglePassExtractLoading } =
+    useCustomToolStore();
+
+  useEffect(() => {
+    if (singlePassExtractMode && isSinglePassExtractLoading) {
+      setIsLoading(true);
+      return;
+    }
+
+    const key = generateApiRunStatusId(docId, profileId);
+    if (promptRunStatus?.[key] === PROMPT_RUN_API_STATUSES.RUNNING) {
+      setIsLoading(true);
+      return;
+    }
+
+    setIsLoading(false);
+  }, [promptRunStatus, isSinglePassExtractLoading]);
+
+  if (isLoading) {
+    return <Spin indicator={<SpinnerLoader size="small" />} />;
+  }
 
-function DisplayPromptResult({ output }) {
   if (output === undefined) {
     return (
       <Typography.Text className="prompt-not-ran">
@@ -25,7 +55,10 @@ function DisplayPromptResult({ output }) {
 }
 
 DisplayPromptResult.propTypes = {
-  output: PropTypes.any.isRequired,
+  output: PropTypes.any,
+  profileId: PropTypes.string,
+  docId: PropTypes.string,
+  promptRunStatus: PropTypes.object,
 };
 
 export { DisplayPromptResult };
diff --git a/frontend/src/components/custom-tools/prompt-card/Header.jsx b/frontend/src/components/custom-tools/prompt-card/Header.jsx
@@ -11,7 +11,10 @@ import { useEffect, useState } from "react";
 import { Button, Checkbox, Col, Dropdown, Row, Tag, Tooltip } from "antd";
 import PropTypes from "prop-types";
 
-import { promptStudioUpdateStatus } from "../../../helpers/GetStaticData";
+import {
+  PROMPT_RUN_TYPES,
+  promptStudioUpdateStatus,
+} from "../../../helpers/GetStaticData";
 import { ConfirmModal } from "../../widgets/confirm-modal/ConfirmModal";
 import { EditableText } from "../editable-text/EditableText";
 import { useCustomToolStore } from "../../../store/custom-tool-store";
@@ -40,13 +43,11 @@ function Header({
   setIsEditingTitle,
   expandCard,
   setExpandCard,
-  enabledProfiles,
   spsLoading,
   handleSpsLoading,
 }) {
   const {
     selectedDoc,
-    disableLlmOrDocChange,
     singlePassExtractMode,
     isSinglePassExtractLoading,
     indexDocs,
@@ -58,9 +59,9 @@ function Header({
 
   const [isDisablePrompt, setIsDisablePrompt] = useState(null);
 
-  const handleRunBtnClick = (profileManager = null, coverAllDoc = true) => {
+  const handleRunBtnClick = (promptRunType, docId = null) => {
     setExpandCard(true);
-    handleRun(profileManager, coverAllDoc, enabledProfiles, true);
+    handleRun(promptRunType, promptDetails?.prompt_id, null, docId);
   };
 
   const handleDisablePrompt = (event) => {
@@ -97,7 +98,7 @@ function Header({
         ),
         key: "delete",
         disabled:
-          disableLlmOrDocChange?.includes(promptDetails?.prompt_id) ||
+          isCoverageLoading ||
           isSinglePassExtractLoading ||
           indexDocs?.includes(selectedDoc?.document_id) ||
           isPublicSource,
@@ -122,6 +123,7 @@ function Header({
           defaultText={promptDetails?.prompt_key}
           handleChange={handleChange}
           placeHolder={updatePlaceHolder}
+          isCoverageLoading={isCoverageLoading}
         />
       </Col>
       <Col span={12} className="display-flex-right">
@@ -186,13 +188,16 @@ function Header({
                 type="text"
                 className="prompt-card-action-button"
                 onClick={() =>
-                  handleRunBtnClick(promptDetails?.profile_manager, false)
+                  handleRunBtnClick(
+                    PROMPT_RUN_TYPES.RUN_ONE_PROMPT_ALL_LLMS_ONE_DOC,
+                    selectedDoc?.document_id
+                  )
                 }
                 disabled={
                   (updateStatus?.promptId === promptDetails?.prompt_id &&
                     updateStatus?.status ===
                       promptStudioUpdateStatus?.isUpdating) ||
-                  disableLlmOrDocChange?.includes(promptDetails?.prompt_id) ||
+                  isCoverageLoading ||
                   indexDocs?.includes(selectedDoc?.document_id) ||
                   isPublicSource ||
                   spsLoading[selectedDoc?.document_id]
@@ -206,12 +211,16 @@ function Header({
                 size="small"
                 type="text"
                 className="prompt-card-action-button"
-                onClick={handleRunBtnClick}
+                onClick={() =>
+                  handleRunBtnClick(
+                    PROMPT_RUN_TYPES.RUN_ONE_PROMPT_ALL_LLMS_ALL_DOCS
+                  )
+                }
                 disabled={
                   (updateStatus?.promptId === promptDetails?.prompt_id &&
                     updateStatus?.status ===
                       promptStudioUpdateStatus?.isUpdating) ||
-                  disableLlmOrDocChange?.includes(promptDetails?.prompt_id) ||
+                  isCoverageLoading ||
                   indexDocs?.includes(selectedDoc?.document_id) ||
                   isPublicSource
                 }
@@ -259,7 +268,6 @@ Header.propTypes = {
   setIsEditingTitle: PropTypes.func.isRequired,
   expandCard: PropTypes.bool.isRequired,
   setExpandCard: PropTypes.func.isRequired,
-  enabledProfiles: PropTypes.array.isRequired,
   spsLoading: PropTypes.object,
   handleSpsLoading: PropTypes.func.isRequired,
 };