Merge pull request #71 from logspace-ai/uiUpdates

langflow-ai · Mar 27, 2023 · 953f819 · 953f819
2 parents 250d3a1 + fb96ccd
commit 953f819
Show file tree

Hide file tree

Showing 19 changed files with 673 additions and 170 deletions.
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -17,9 +17,11 @@
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
         "axios": "^1.3.2",
+        "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-cookie": "^4.1.1",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.2",
         "react-icons": "^4.7.1",
         "react-laag": "^2.0.5",
         "react-router-dom": "^6.8.1",
@@ -54,5 +56,5 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://localhost:7860"
-}
+    "proxy": "http://backend:7860"
+}
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
@@ -9,6 +9,9 @@ import ExtraSidebar from "./components/ExtraSidebarComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent";
+import { ErrorBoundary } from "react-error-boundary";
+import CrashErrorComponent from "./components/CrashErrorComponent";
+import { TabsContext } from "./contexts/tabsContext";
 
 export default function App() {
 	var _ = require("lodash");
@@ -21,7 +24,7 @@ export default function App() {
 		setShowSideBar(true);
 		setIsStackedOpen(true);
 	}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
-
+	const {hardReset} = useContext(TabsContext)
 	const {
 		errorData,
 		errorOpen,
@@ -34,45 +37,62 @@ export default function App() {
 		setSuccessOpen,
 	} = useContext(alertContext);
 
-// Initialize state variable for the list of alerts
-const [alertsList, setAlertsList] = useState<Array<{type:string,data:{title:string,list?:Array<string>,link?:string},id:string}>>([]);
+	// Initialize state variable for the list of alerts
+	const [alertsList, setAlertsList] = useState<
+		Array<{
+			type: string;
+			data: { title: string; list?: Array<string>; link?: string };
+			id: string;
+		}>
+	>([]);
 
-// Use effect hook to update alertsList when a new alert is added
-useEffect(() => {
-	// If there is an error alert open with data, add it to the alertsList
-	if (errorOpen && errorData) {
-		setErrorOpen(false);
-		setAlertsList((old) => {
-			let newAlertsList = [
-				...old,
-				{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
-			];
-			return newAlertsList;
-		});
-	}
-	// If there is a notice alert open with data, add it to the alertsList
-	else if (noticeOpen && noticeData) {
-		setNoticeOpen(false);
-		setAlertsList((old) => {
-			let newAlertsList = [
-				...old,
-				{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
-			];
-			return newAlertsList;
-		});
-	}
-	// If there is a success alert open with data, add it to the alertsList
-	else if (successOpen && successData) {
-		setSuccessOpen(false);
-		setAlertsList((old) => {
-			let newAlertsList = [
-				...old,
-				{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
-			];
-			return newAlertsList;
-		});
-	}
-}, [_, errorData, errorOpen, noticeData, noticeOpen, setErrorOpen, setNoticeOpen, setSuccessOpen, successData, successOpen]);
+	// Use effect hook to update alertsList when a new alert is added
+	useEffect(() => {
+		// If there is an error alert open with data, add it to the alertsList
+		if (errorOpen && errorData) {
+			setErrorOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		}
+		// If there is a notice alert open with data, add it to the alertsList
+		else if (noticeOpen && noticeData) {
+			setNoticeOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		}
+		// If there is a success alert open with data, add it to the alertsList
+		else if (successOpen && successData) {
+			setSuccessOpen(false);
+			setAlertsList((old) => {
+				let newAlertsList = [
+					...old,
+					{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
+				];
+				return newAlertsList;
+			});
+		}
+	}, [
+		_,
+		errorData,
+		errorOpen,
+		noticeData,
+		noticeOpen,
+		setErrorOpen,
+		setNoticeOpen,
+		setSuccessOpen,
+		successData,
+		successOpen,
+	]);
 
 	const removeAlert = (id: string) => {
 		setAlertsList((prevAlertsList) =>
@@ -83,18 +103,27 @@ useEffect(() => {
 	return (
 		//need parent component with width and height
 		<div className="h-full flex flex-col">
-			<div className="flex grow-0 shrink basis-auto">
-			</div>
-			<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
-				<ExtraSidebar />
-				{/* Main area */}
-				<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
-					{/* Primary column */}
-					<div className="w-full h-full">
-						<TabsManagerComponent></TabsManagerComponent>
-					</div>
-				</main>
-			</div>
+			<div className="flex grow-0 shrink basis-auto"></div>
+			<ErrorBoundary
+				onReset={() => {
+					window.localStorage.removeItem("tabsData");
+					window.localStorage.clear();
+					hardReset()
+					window.location.href = window.location.href;
+				}}
+				FallbackComponent={CrashErrorComponent}
+			>
+				<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
+					<ExtraSidebar />
+					{/* Main area */}
+					<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
+						{/* Primary column */}
+						<div className="w-full h-full">
+							<TabsManagerComponent></TabsManagerComponent>
+						</div>
+					</main>
+				</div>
+			</ErrorBoundary>
 			<div></div>
 			<div className="flex z-40 flex-col-reverse fixed bottom-5 left-5">
 				{alertsList.map((alert) => (
@@ -126,7 +155,13 @@ useEffect(() => {
 					</div>
 				))}
 			</div>
-			<a target={"_blank"} href="https://logspace.ai/" className="absolute bottom-1 left-1 text-gray-500 text-xs cursor-pointer font-sans tracking-wide">Created by Logspace</a>
+			<a
+				target={"_blank"}
+				href="https://logspace.ai/"
+				className="absolute bottom-1 left-1 text-gray-500 text-xs cursor-pointer font-sans tracking-wide"
+			>
+				Created by Logspace
+			</a>
 		</div>
 	);
 }