diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 0088081ae..d1f4c21bc 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -9,7 +9,6 @@ import ErrorAlert from "./alerts/error"; import NoticeAlert from "./alerts/notice"; import SuccessAlert from "./alerts/success"; import CrashErrorComponent from "./components/CrashErrorComponent"; -import Header from "./components/headerComponent"; import { alertContext } from "./contexts/alertContext"; import { locationContext } from "./contexts/locationContext"; import { TabsContext } from "./contexts/tabsContext"; @@ -133,7 +132,6 @@ export default function App() { }} FallbackComponent={CrashErrorComponent} > -
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx index c3d028314..30e7ac9d6 100644 --- a/src/frontend/src/pages/CommunityPage/index.tsx +++ b/src/frontend/src/pages/CommunityPage/index.tsx @@ -6,6 +6,7 @@ import { TabsContext } from "../../contexts/tabsContext"; import { useNavigate } from "react-router-dom"; import { CardComponent } from "../../components/cardComponent"; import IconComponent from "../../components/genericIconComponent"; +import Header from "../../components/headerComponent"; import { getExamples } from "../../controllers/API"; import { FlowType } from "../../types/flow"; export default function CommunityPage() { @@ -42,61 +43,65 @@ export default function CommunityPage() { handleExamples(); }, []); return ( -
-
- - - Community Examples + <> +
+ +
+
+ + + Community Examples + + +
+ + Discover and learn from shared examples by the Langflow community. We + welcome new example contributions that can help our community explore + new and powerful features. -
- - Discover and learn from shared examples by the Langflow community. We - welcome new example contributions that can help our community explore - new and powerful features. - -
- {!loadingExamples && - examples.map((flow, idx) => ( - { - addFlow(flow, true).then((id) => { - navigate("/flow/" + id); - }); - }} - > - - Fork Example - - } - /> - ))} -
-
+ ); } diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index ac9aa1d01..5d006a20b 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -35,7 +35,13 @@ const nodeTypes = { genericNode: GenericNode, }; -export default function Page({ flow }: { flow: FlowType }) { +export default function Page({ + flow, + view, +}: { + flow: FlowType; + view?: boolean; +}) { let { updateFlow, uploadFlow, @@ -357,7 +363,7 @@ export default function Page({ flow }: { flow: FlowType }) { return (
- + {!view && } {/* Main area */}
{/* Primary column */} @@ -399,14 +405,21 @@ export default function Page({ flow }: { flow: FlowType }) { className="theme-attribution" minZoom={0.01} maxZoom={8} + zoomOnScroll={!view} + zoomOnPinch={!view} + panOnDrag={!view} > - button]:border-b-border hover:[&>button]:bg-border" - > + > + )} - + {!view && ( + + )}
) : ( <> diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index f47a485ff..3555da2fa 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -1,5 +1,6 @@ import { useContext, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; +import Header from "../../components/headerComponent"; import { TabsContext } from "../../contexts/tabsContext"; import { getVersion } from "../../controllers/API"; import Page from "./components/PageComponent"; @@ -22,20 +23,23 @@ export default function FlowPage() { }, []); return ( -
- {flows.length > 0 && - tabId !== "" && - flows.findIndex((flow) => flow.id === tabId) !== -1 && ( - flow.id === tabId)} /> - )} - - {version &&
⛓️ Langflow v{version}
} -
Created by Logspace
- -
+ <> +
+
+ {flows.length > 0 && + tabId !== "" && + flows.findIndex((flow) => flow.id === tabId) !== -1 && ( + flow.id === tabId)} /> + )} + + {version &&
⛓️ Langflow v{version}
} +
Created by Logspace
+ +
+ ); } diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index 63be47718..62d59c64a 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -2,6 +2,7 @@ import { useContext, useEffect } from "react"; import { Link, useNavigate } from "react-router-dom"; import { CardComponent } from "../../components/cardComponent"; import IconComponent from "../../components/genericIconComponent"; +import Header from "../../components/headerComponent"; import { Button } from "../../components/ui/button"; import { USER_PROJECTS_HEADER } from "../../constants/constants"; import { TabsContext } from "../../contexts/tabsContext"; @@ -17,74 +18,77 @@ export default function HomePage() { // Personal flows display return ( -
-
- - - {USER_PROJECTS_HEADER} + <> +
+
+
+ + + {USER_PROJECTS_HEADER} + +
+ + + +
+
+ + Manage your personal projects. Download or upload your collection. -
- - - +
+ {flows.map((flow, idx) => ( + + + + } + onDelete={() => { + removeFlow(flow.id); + }} + /> + ))}
- - Manage your personal projects. Download or upload your collection. - -
- {flows.map((flow, idx) => ( - - - - } - onDelete={() => { - removeFlow(flow.id); - }} - /> - ))} -
-
+ ); } diff --git a/src/frontend/src/pages/ViewPage/index.tsx b/src/frontend/src/pages/ViewPage/index.tsx new file mode 100644 index 000000000..3d23b3fe6 --- /dev/null +++ b/src/frontend/src/pages/ViewPage/index.tsx @@ -0,0 +1,33 @@ +import { useContext, useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { TabsContext } from "../../contexts/tabsContext"; +import { getVersion } from "../../controllers/API"; +import Page from "../FlowPage/components/PageComponent"; + +export default function ViewPage() { + const { flows, tabId, setTabId } = useContext(TabsContext); + const { id } = useParams(); + + // Set flow tab id + useEffect(() => { + setTabId(id); + }, [id]); + + // Initialize state variable for the version + const [version, setVersion] = useState(""); + useEffect(() => { + getVersion().then((data) => { + setVersion(data.version); + }); + }, []); + + return ( +
+ {flows.length > 0 && + tabId !== "" && + flows.findIndex((flow) => flow.id === tabId) !== -1 && ( + flow.id === tabId)} /> + )} +
+ ); +} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index 21b73f70b..58c1e169d 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom"; import CommunityPage from "./pages/CommunityPage"; import FlowPage from "./pages/FlowPage"; import HomePage from "./pages/MainPage"; +import ViewPage from "./pages/ViewPage"; const Router = () => { return ( @@ -10,6 +11,7 @@ const Router = () => { } /> } /> + } /> } />