Feature/view mode (#769)

This feature implements a view mode to all of the flows, to embed on
sites.

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>

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,6 +43,9 @@ export default function CommunityPage() {
     handleExamples();
   }, []);
   return (
+    <>
+      <Header />
+
       <div className="community-page-arrangement">
         <div className="community-page-nav-arrangement">
           <span className="community-page-nav-title">
@@ -98,5 +102,6 @@ export default function CommunityPage() {
             ))}
         </div>
       </div>
+    </>
   );
 }

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="" />
+                  {!view && (
                     <Controls
                       className="bg-muted fill-foreground stroke-foreground text-primary
                    [&>button]:border-b-border hover:[&>button]:bg-border"
                     ></Controls>
+                  )}
                 </ReactFlow>
+                {!view && (
                   <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+                )}
               </div>
             ) : (
               <></>

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,6 +23,8 @@ export default function FlowPage() {
   }, []);
 
   return (
+    <>
+      <Header />
       <div className="flow-page-positioning">
         {flows.length > 0 &&
           tabId !== "" &&
@@ -37,5 +40,6 @@ export default function FlowPage() {
           <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
         </a>
       </div>
+    </>
   );
 }

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,6 +18,8 @@ export default function HomePage() {
 
   // Personal flows display
   return (
+    <>
+      <Header />
       <div className="main-page-panel">
         <div className="main-page-nav-arrangement">
           <span className="main-page-nav-title">
@@ -86,5 +89,6 @@ export default function HomePage() {
           ))}
         </div>
       </div>
+    </>
   );
 }

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>
+  );
+}

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>