Added view option to LangFlow (#770)

2023-08-15 14:07:40 -03:00 · 2023-08-15 14:07:40 -03:00 · 5756f46e81
commit 5756f46e81
parent ea3aef363c 1e0f4f316f
9 changed files with 207 additions and 148 deletions
--- a/poetry.lock
+++ b/poetry.lock
@ -739,13 +739,13 @@ sqlalchemy = ["sqlalchemy (>1.3.21,<2.0)"]

 [[package]]
 name = "cohere"
-version = "4.20.0"
+version = "4.20.1"
 description = ""
 optional = false
 python-versions = ">=3.7,<4.0"
 files = [
-    {file = "cohere-4.20.0-py3-none-any.whl", hash = "sha256:bebe4b1d21da0719aaa7db2cc180b5f3d0a802c19ad2d893d627971286e50497"},
-    {file = "cohere-4.20.0.tar.gz", hash = "sha256:a16e86981945c201bab67ad6d47e57f42a37bf2a774f6ac6b8b12233aae6409a"},
+    {file = "cohere-4.20.1-py3-none-any.whl", hash = "sha256:4466c7abdbb168fe2893e5b5123882fe91691d0e3fe43ee254b411917f780dfc"},
+    {file = "cohere-4.20.1.tar.gz", hash = "sha256:533e4a45b38dc338f8a27f24e098b652b4f5ed9f9fbb4719780d1a9fcd1af39e"},
 ]

 [package.dependencies]
@ -1577,13 +1577,13 @@ grpcio-gcp = ["grpcio-gcp (>=0.2.2,<1.0.dev0)"]

 [[package]]
 name = "google-api-python-client"
-version = "2.96.0"
+version = "2.97.0"
 description = "Google API Client Library for Python"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "google-api-python-client-2.96.0.tar.gz", hash = "sha256:f712373d03d338af57b9f5fe98c91f4b5baaa8765469b015bc623c4681c5bd51"},
-    {file = "google_api_python_client-2.96.0-py2.py3-none-any.whl", hash = "sha256:38c2b61b10d15bb41ec8f89303e3837ec2d2c3e4e38de5800c05ee322492f937"},
+    {file = "google-api-python-client-2.97.0.tar.gz", hash = "sha256:48277291894876a1ca7ed4127e055e81f81e6343ced1b544a7200ae2c119dcd7"},
+    {file = "google_api_python_client-2.97.0-py2.py3-none-any.whl", hash = "sha256:5215f4cd577753fc4192ccfbe0bb8b55d4bb5fd68fa6268ac5cf271b6305de31"},
 ]

 [package.dependencies]
--- a/pyproject.toml
+++ b/pyproject.toml
@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.4.9"
+version = "0.4.10"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [
--- 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}
      >
-        <Header />
        <Router />
      </ErrorBoundary>
      <div></div>
--- 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 (
-    <div className="community-page-arrangement">
-      <div className="community-page-nav-arrangement">
-        <span className="community-page-nav-title">
-          <IconComponent name="Users2" className="w-6" />
-          Community Examples
+    <>
+      <Header />
+
+      <div className="community-page-arrangement">
+        <div className="community-page-nav-arrangement">
+          <span className="community-page-nav-title">
+            <IconComponent name="Users2" className="w-6" />
+            Community Examples
+          </span>
+          <div className="community-page-nav-button">
+            <a
+              href="https://github.com/logspace-ai/langflow_examples"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Button variant="primary">
+                <IconComponent
+                  name="GithubIcon"
+                  className="main-page-nav-button"
+                />
+                Add Your Example
+              </Button>
+            </a>
+          </div>
+        </div>
+        <span className="community-page-description-text">
+          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.
        </span>
-        <div className="community-page-nav-button">
-          <a
-            href="https://github.com/logspace-ai/langflow_examples"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Button variant="primary">
-              <IconComponent
-                name="GithubIcon"
-                className="main-page-nav-button"
+        <div className="community-pages-flows-panel">
+          {!loadingExamples &&
+            examples.map((flow, idx) => (
+              <CardComponent
+                key={idx}
+                flow={flow}
+                id={flow.id}
+                button={
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="whitespace-nowrap "
+                    onClick={() => {
+                      addFlow(flow, true).then((id) => {
+                        navigate("/flow/" + id);
+                      });
+                    }}
+                  >
+                    <IconComponent
+                      name="GitFork"
+                      className="main-page-nav-button"
+                    />
+                    Fork Example
+                  </Button>
+                }
              />
-              Add Your Example
-            </Button>
-          </a>
+            ))}
        </div>
      </div>
-      <span className="community-page-description-text">
-        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.
-      </span>
-      <div className="community-pages-flows-panel">
-        {!loadingExamples &&
-          examples.map((flow, idx) => (
-            <CardComponent
-              key={idx}
-              flow={flow}
-              id={flow.id}
-              button={
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="whitespace-nowrap "
-                  onClick={() => {
-                    addFlow(flow, true).then((id) => {
-                      navigate("/flow/" + id);
-                    });
-                  }}
-                >
-                  <IconComponent
-                    name="GitFork"
-                    className="main-page-nav-button"
-                  />
-                  Fork Example
-                </Button>
-              }
-            />
-          ))}
-      </div>
-    </div>
+    </>
  );
 }
--- 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 (
    <div className="flex h-full overflow-hidden">
-      <ExtraSidebar />
+      {!view && <ExtraSidebar />}
      {/* Main area */}
      <main className="flex flex-1">
        {/* 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}
                >
                  <Background className="" />
-                  <Controls
-                    className="bg-muted fill-foreground stroke-foreground text-primary
+                  {!view && (
+                    <Controls
+                      className="bg-muted fill-foreground stroke-foreground text-primary
                   [&>button]:border-b-border hover:[&>button]:bg-border"
-                  ></Controls>
+                    ></Controls>
+                  )}
                </ReactFlow>
-                <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+                {!view && (
+                  <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+                )}
              </div>
            ) : (
              <></>
--- 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 (
-    <div className="flow-page-positioning">
-      {flows.length > 0 &&
-        tabId !== "" &&
-        flows.findIndex((flow) => flow.id === tabId) !== -1 && (
-          <Page flow={flows.find((flow) => flow.id === tabId)} />
-        )}
-      <a
-        target={"_blank"}
-        href="https://logspace.ai/"
-        className="logspace-page-icon"
-      >
-        {version && <div className="mt-1">⛓️ Langflow v{version}</div>}
-        <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
-      </a>
-    </div>
+    <>
+      <Header />
+      <div className="flow-page-positioning">
+        {flows.length > 0 &&
+          tabId !== "" &&
+          flows.findIndex((flow) => flow.id === tabId) !== -1 && (
+            <Page flow={flows.find((flow) => flow.id === tabId)} />
+          )}
+        <a
+          target={"_blank"}
+          href="https://logspace.ai/"
+          className="logspace-page-icon"
+        >
+          {version && <div className="mt-1">⛓️ Langflow v{version}</div>}
+          <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
+        </a>
+      </div>
+    </>
  );
 }
--- 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 (
-    <div className="main-page-panel">
-      <div className="main-page-nav-arrangement">
-        <span className="main-page-nav-title">
-          <IconComponent name="Home" className="w-6" />
-          {USER_PROJECTS_HEADER}
+    <>
+      <Header />
+      <div className="main-page-panel">
+        <div className="main-page-nav-arrangement">
+          <span className="main-page-nav-title">
+            <IconComponent name="Home" className="w-6" />
+            {USER_PROJECTS_HEADER}
+          </span>
+          <div className="button-div-style">
+            <Button
+              variant="primary"
+              onClick={() => {
+                downloadFlows();
+              }}
+            >
+              <IconComponent name="Download" className="main-page-nav-button" />
+              Download Collection
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => {
+                uploadFlows();
+              }}
+            >
+              <IconComponent name="Upload" className="main-page-nav-button" />
+              Upload Collection
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => {
+                addFlow(null, true).then((id) => {
+                  navigate("/flow/" + id);
+                });
+              }}
+            >
+              <IconComponent name="Plus" className="main-page-nav-button" />
+              New Project
+            </Button>
+          </div>
+        </div>
+        <span className="main-page-description-text">
+          Manage your personal projects. Download or upload your collection.
        </span>
-        <div className="button-div-style">
-          <Button
-            variant="primary"
-            onClick={() => {
-              downloadFlows();
-            }}
-          >
-            <IconComponent name="Download" className="main-page-nav-button" />
-            Download Collection
-          </Button>
-          <Button
-            variant="primary"
-            onClick={() => {
-              uploadFlows();
-            }}
-          >
-            <IconComponent name="Upload" className="main-page-nav-button" />
-            Upload Collection
-          </Button>
-          <Button
-            variant="primary"
-            onClick={() => {
-              addFlow(null, true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}
-          >
-            <IconComponent name="Plus" className="main-page-nav-button" />
-            New Project
-          </Button>
+        <div className="main-page-flows-display">
+          {flows.map((flow, idx) => (
+            <CardComponent
+              key={idx}
+              flow={flow}
+              id={flow.id}
+              button={
+                <Link to={"/flow/" + flow.id}>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="whitespace-nowrap "
+                  >
+                    <IconComponent
+                      name="ExternalLink"
+                      className="main-page-nav-button"
+                    />
+                    Edit Flow
+                  </Button>
+                </Link>
+              }
+              onDelete={() => {
+                removeFlow(flow.id);
+              }}
+            />
+          ))}
        </div>
      </div>
-      <span className="main-page-description-text">
-        Manage your personal projects. Download or upload your collection.
-      </span>
-      <div className="main-page-flows-display">
-        {flows.map((flow, idx) => (
-          <CardComponent
-            key={idx}
-            flow={flow}
-            id={flow.id}
-            button={
-              <Link to={"/flow/" + flow.id}>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="whitespace-nowrap "
-                >
-                  <IconComponent
-                    name="ExternalLink"
-                    className="main-page-nav-button"
-                  />
-                  Edit Flow
-                </Button>
-              </Link>
-            }
-            onDelete={() => {
-              removeFlow(flow.id);
-            }}
-          />
-        ))}
-      </div>
-    </div>
+    </>
  );
 }
--- a/src/frontend/src/pages/ViewPage/index.tsx
+++ 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 (
+    <div className="flow-page-positioning">
+      {flows.length > 0 &&
+        tabId !== "" &&
+        flows.findIndex((flow) => flow.id === tabId) !== -1 && (
+          <Page view flow={flows.find((flow) => flow.id === tabId)} />
+        )}
+    </div>
+  );
+}
--- 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 = () => {
      <Route path="/community" element={<CommunityPage />} />
      <Route path="/flow/:id/">
        <Route path="" element={<FlowPage />} />
+        <Route path="view" element={<ViewPage />} />
      </Route>
      <Route path="*" element={<HomePage />} />
    </Routes>