Add RadialProgress value state, remove progressContext

This commit adds a value state to the RadialProgress component, replacing the progressContext previously used. It also removes the progressContext, as it is no longer needed.

src/frontend/src/components/RadialProgress/index.tsx

@@ -1,28 +1,19 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { RadialProgressType } from "../../types/components";
-import { Progress } from "../ui/progress";
-import { progressContext } from "../../contexts/ProgressContext";
 
 export default function RadialProgressComponent({
   value,
   color,
 }: RadialProgressType) {
-  const ref = useRef(0);
-  const { progress } = useContext(progressContext);
-
-  useEffect(() => {
-    ref.current = progress * 100;
-  }, [progress]);
-
   const style = {
-    "--value": ref.current,
+    "--value": value,
     "--size": "1.5rem",
     "--thickness": "2px",
   } as React.CSSProperties;
 
   return (
     <div className={"radial-progress " + color} style={style}>
-      <strong className="text-[8px]">{ref.current}%</strong>
+      <strong className="text-[8px]">{value * 100}%</strong>
     </div>
   );
 }

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -9,10 +9,7 @@ import { typesContext } from "../../../contexts/typesContext";
 import { alertContext } from "../../../contexts/alertContext";
 import { postBuildInit } from "../../../controllers/API";
 import ProgressBarComponent from "../../ProgressBarComponent";
-import {
-  progressContext,
-  useProgress,
-} from "../../../contexts/ProgressContext";
+
 import RadialProgressComponent from "../../RadialProgress";
 
 export default function BuildTrigger({
@@ -27,12 +24,11 @@ export default function BuildTrigger({
   isBuilt: boolean;
 }) {
   const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
-  const { setProgress } = useContext(progressContext);
   const { reactFlowInstance } = useContext(typesContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [isIconTouched, setIsIconTouched] = useState(false);
-  const { progress } = useContext(progressContext);
   const eventClick = isBuilding ? "pointer-events-none" : "";
+  const [myValue, setMyValue] = useState(0);
 
   async function handleBuild(flow: FlowType) {
     try {
@@ -72,7 +68,6 @@ export default function BuildTrigger({
     // Step 1: Make a POST request to send the flow data and receive a unique session ID
     const response = await postBuildInit(flow);
     const { flowId } = response.data;
-    let loadProgress = [];
     // Step 2: Use the session ID to establish an SSE connection using EventSource
     let validationResults = [];
     let finished = false;
@@ -93,10 +88,7 @@ export default function BuildTrigger({
         // If the event is a log, log it
         // TODO: implement the progress
         setSuccessData({ title: parsedData.log });
-        setSuccessData({ title: parsedData.progress });
-        setProgress(parsedData.progress);
-
-        loadProgress.push(parsedData.progress);
+        setMyValue(parsedData.progress);
       } else {
         // Otherwise, process the data
         const isValid = processStreamResult(parsedData);
@@ -170,10 +162,11 @@ export default function BuildTrigger({
         >
           <button>
             <div className="flex gap-3 items-center">
-              {isBuilding && progress < 1 ? (
+              {isBuilding && myValue * 100 < 100 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
                   color={"text-orange-400"}
+                  value={myValue}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
                 <Loading strokeWidth={1.5} style={{ color: "#fb923c" }} />

src/frontend/src/components/headerComponent/index.tsx

@@ -70,35 +70,35 @@ export default function Header() {
       </div>
       <div className="flex justify-end px-2 w-96">
         <div className="ml-auto mr-2 flex gap-5 items-center">
-            <a
-              href="https://github.com/logspace-ai/langflow"
-              target="_blank"
-              rel="noreferrer"
-              className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 dark:text-gray-300 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
-            >
-              <FaGithub className="h-5 w-5 mr-2" />
-              Star
-              <div className="ml-2 flex text-sm bg-background rounded-md rounded-l-none border px-2 h-9 -mr-px items-center justify-center">
-                {stars}
-              </div>
-            </a>
-            <a
-              href="https://twitter.com/logspace_ai"
-              target="_blank"
-              rel="noreferrer"
-              className="text-muted-foreground"
-            >
-              <FaTwitter className="h-5 w-5" />
-            </a>
-            <a
-              href="https://discord.gg/EqksyE2EX9"
-              target="_blank"
-              rel="noreferrer"
-              className="text-muted-foreground"
-            >
-              <FaDiscord className="h-5 w-5" />
-            </a>
-            {/* <Separator orientation="vertical" />
+          <a
+            href="https://github.com/logspace-ai/langflow"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600 dark:text-gray-300 border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+          >
+            <FaGithub className="h-5 w-5 mr-2" />
+            Star
+            <div className="ml-2 flex text-sm bg-background rounded-md rounded-l-none border px-2 h-9 -mr-px items-center justify-center">
+              {stars}
+            </div>
+          </a>
+          <a
+            href="https://twitter.com/logspace_ai"
+            target="_blank"
+            rel="noreferrer"
+            className="text-muted-foreground"
+          >
+            <FaTwitter className="h-5 w-5" />
+          </a>
+          <a
+            href="https://discord.gg/EqksyE2EX9"
+            target="_blank"
+            rel="noreferrer"
+            className="text-muted-foreground"
+          >
+            <FaDiscord className="h-5 w-5" />
+          </a>
+          {/* <Separator orientation="vertical" />
           <button
             className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
             onClick={() => {
@@ -140,4 +140,4 @@ export default function Header() {
       </div>
     </div>
   );
-}
+}

src/frontend/src/contexts/ProgressContext.tsx

@@ -1,30 +0,0 @@
-import { createContext, useContext, useState } from "react";
-import _ from "lodash";
-//types for progressContext
-type progressContextType = {
-  setProgress: (newState: number) => void;
-  progress: number;
-};
-const initialValue = {
-  setProgress: () => {},
-  progress: 0,
-};
-export const progressContext = createContext<progressContextType>(initialValue);
-export function useProgress() {
-  return useContext(progressContext);
-}
-
-export function ProgressProvider({ children }) {
-  const [progress, setProgress] = useState(0);
-
-  return (
-    <progressContext.Provider
-      value={{
-        setProgress,
-        progress,
-      }}
-    >
-      {children}
-    </progressContext.Provider>
-  );
-}

src/frontend/src/contexts/index.tsx

@@ -8,7 +8,6 @@ import { TypesProvider } from "./typesContext";
 import { ReactFlowProvider } from "reactflow";
 import { UndoRedoProvider } from "./undoRedoContext";
 import { SSEProvider } from "./SSEContext";
-import { ProgressProvider } from "./ProgressContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context
@@ -22,9 +21,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
                 <SSEProvider>
                   <TabsProvider>
                     <UndoRedoProvider>
-                      <ProgressProvider>
-                        <PopUpProvider>{children}</PopUpProvider>
-                      </ProgressProvider>
+                      <PopUpProvider>{children}</PopUpProvider>
                     </UndoRedoProvider>
                   </TabsProvider>
                 </SSEProvider>