From 81dba957205d12695615b9f98579d51a30511a19 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 15 Aug 2023 12:16:32 -0300 Subject: [PATCH 1/5] Added view option to LangFlow --- src/frontend/src/App.tsx | 2 - .../src/pages/CommunityPage/index.tsx | 109 +++++++------- .../components/PageComponent/index.tsx | 108 ++++++++------ src/frontend/src/pages/FlowPage/index.tsx | 34 +++-- src/frontend/src/pages/MainPage/index.tsx | 136 +++++++++--------- src/frontend/src/pages/ViewPage/index.tsx | 33 +++++ src/frontend/src/routes.tsx | 2 + 7 files changed, 247 insertions(+), 177 deletions(-) create mode 100644 src/frontend/src/pages/ViewPage/index.tsx diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 0088081aebc..d1f4c21bc6d 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 c3d028314ea..30e7ac9d65e 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 ac9aa1d0199..a7ad0e16c81 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 */} @@ -366,47 +372,65 @@ export default function Page({ flow }: { flow: FlowType }) { {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
- { - if (reactFlowInstance) - updateFlow({ - ...flow, - data: reactFlowInstance.toObject(), - }); - }} - edges={edges} - onNodesChange={onNodesChangeMod} - onEdgesChange={onEdgesChangeMod} - onConnect={onConnect} - disableKeyboardA11y={true} - onLoad={setReactFlowInstance} - onInit={setReactFlowInstance} - nodeTypes={nodeTypes} - onEdgeUpdate={onEdgeUpdate} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} - onNodeDragStart={onNodeDragStart} - onSelectionDragStart={onSelectionDragStart} - onSelectionEnd={onSelectionEnd} - onSelectionStart={onSelectionStart} - onEdgesDelete={onEdgesDelete} - connectionLineComponent={ConnectionLineComponent} - onDragOver={onDragOver} - onDrop={onDrop} - onNodesDelete={onDelete} - onSelectionChange={onSelectionChange} - className="theme-attribution" - minZoom={0.01} - maxZoom={8} - > - - + + + + ) : ( + { + if (reactFlowInstance) + updateFlow({ + ...flow, + data: reactFlowInstance.toObject(), + }); + }} + edges={edges} + onNodesChange={onNodesChangeMod} + onEdgesChange={onEdgesChangeMod} + onConnect={onConnect} + disableKeyboardA11y={true} + onLoad={setReactFlowInstance} + onInit={setReactFlowInstance} + nodeTypes={nodeTypes} + onEdgeUpdate={onEdgeUpdate} + onEdgeUpdateStart={onEdgeUpdateStart} + onEdgeUpdateEnd={onEdgeUpdateEnd} + onNodeDragStart={onNodeDragStart} + onSelectionDragStart={onSelectionDragStart} + onSelectionEnd={onSelectionEnd} + onSelectionStart={onSelectionStart} + onEdgesDelete={onEdgesDelete} + connectionLineComponent={ConnectionLineComponent} + onDragOver={onDragOver} + onDrop={onDrop} + onNodesDelete={onDelete} + onSelectionChange={onSelectionChange} + className="theme-attribution" + minZoom={0.01} + maxZoom={8} + > + + - - + > + + )} + {view && ( + + )}
) : ( <> diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index f47a485ff97..92ebc6775bd 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 63be47718ad..62d59c64a5f 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 00000000000..f7e484217da --- /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 21b73f70b77..58c1e169d4c 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 = () => { } /> } /> + } /> } /> From 3667f4812e2c28acd4c2febf67afbf4b2a6533bf Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 15 Aug 2023 12:21:20 -0300 Subject: [PATCH 2/5] Fixed bug: flow not showing --- .../components/PageComponent/index.tsx | 98 ++++++++----------- src/frontend/src/pages/FlowPage/index.tsx | 2 +- src/frontend/src/pages/ViewPage/index.tsx | 2 +- 3 files changed, 43 insertions(+), 59 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index a7ad0e16c81..8c2332a2d56 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -363,7 +363,7 @@ export default function Page({ return (
- {view && } + {!view && } {/* Main area */}
{/* Primary column */} @@ -372,63 +372,47 @@ export default function Page({ {Object.keys(templates).length > 0 && Object.keys(types).length > 0 ? (
- {view ? ( - - - - - ) : ( - { - if (reactFlowInstance) - updateFlow({ - ...flow, - data: reactFlowInstance.toObject(), - }); - }} - edges={edges} - onNodesChange={onNodesChangeMod} - onEdgesChange={onEdgesChangeMod} - onConnect={onConnect} - disableKeyboardA11y={true} - onLoad={setReactFlowInstance} - onInit={setReactFlowInstance} - nodeTypes={nodeTypes} - onEdgeUpdate={onEdgeUpdate} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} - onNodeDragStart={onNodeDragStart} - onSelectionDragStart={onSelectionDragStart} - onSelectionEnd={onSelectionEnd} - onSelectionStart={onSelectionStart} - onEdgesDelete={onEdgesDelete} - connectionLineComponent={ConnectionLineComponent} - onDragOver={onDragOver} - onDrop={onDrop} - onNodesDelete={onDelete} - onSelectionChange={onSelectionChange} - className="theme-attribution" - minZoom={0.01} - maxZoom={8} - > - - + + - - )} - {view && ( + > + + {!view && ( )}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index 92ebc6775bd..3555da2faaa 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -29,7 +29,7 @@ export default function FlowPage() { {flows.length > 0 && tabId !== "" && flows.findIndex((flow) => flow.id === tabId) !== -1 && ( - flow.id === tabId)} /> + flow.id === tabId)} /> )} 0 && tabId !== "" && flows.findIndex((flow) => flow.id === tabId) !== -1 && ( - flow.id === tabId)} /> + flow.id === tabId)} /> )}
); From 8529c379e1d9b5507d7aeecd9dd8e8960df7b29a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 15 Aug 2023 12:29:19 -0300 Subject: [PATCH 3/5] Disabled zoom and pan when on view mode --- .../FlowPage/components/PageComponent/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 8c2332a2d56..d269de79563 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -405,12 +405,19 @@ export default function Page({ className="theme-attribution" minZoom={0.01} maxZoom={8} + zoomOnDoubleClick={!view} + zoomOnScroll={!view} + zoomOnPinch={!view} + panOnDrag={!view} + panOnScroll={!view} > - button]:border-b-border hover:[&>button]:bg-border" - > + > + )} {!view && ( From fe7239b577bf17be9f9e343f2345a89b899ad69c Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 15 Aug 2023 12:30:39 -0300 Subject: [PATCH 4/5] Disabled Pan On Pinch --- .../src/pages/FlowPage/components/PageComponent/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index d269de79563..e8c2813b909 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -409,7 +409,6 @@ export default function Page({ zoomOnScroll={!view} zoomOnPinch={!view} panOnDrag={!view} - panOnScroll={!view} > {!view && ( From 685ac70e902aa75e72b7bb1eb9c0a21affca7cef Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 15 Aug 2023 12:31:17 -0300 Subject: [PATCH 5/5] disabled ZoomOnDoubleClick --- .../src/pages/FlowPage/components/PageComponent/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index e8c2813b909..5d006a20b97 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -405,7 +405,6 @@ export default function Page({ className="theme-attribution" minZoom={0.01} maxZoom={8} - zoomOnDoubleClick={!view} zoomOnScroll={!view} zoomOnPinch={!view} panOnDrag={!view}