Execution result/s views

.env.local

@@ -4,7 +4,7 @@ NEXT_PUBLIC_EDITION=ce
 SAGITTARIUS_GRAPHQL_URL=http://localhost:80/graphql
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.9.1
+NEXT_PUBLIC_PICTOR_VERSION=0.10.3
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 
 NEXT_PUBLIC_OTEL_SERVICE_NAME=#"sculptor-client"

package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.9.1",
-    "@code0-tech/triangulum": "^0.19.1",
+    "@code0-tech/pictor": "^0.10.3",
+    "@code0-tech/triangulum": "^0.22.0",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",
     "@opentelemetry/api": "^1.9.1",
@@ -27,7 +27,9 @@
     "@opentelemetry/instrumentation-fetch": "^0.218.0",
     "@opentelemetry/instrumentation-xml-http-request": "^0.218.0",
     "@opentelemetry/sdk-trace-web": "^2.6.1",
+    "@uidotdev/usehooks": "^2.4.1",
     "@vercel/otel": "^2.1.1",
+    "@xyflow/react": "^12.11.0",
     "date-fns": "^4.1.0",
     "graphql": "^16.12.0",
     "graphql-tag": "^2.12.6",

src/app/(flow)/namespace/[namespaceId]/project/[projectId]/flow/[flowId]/page.tsx

@@ -1,11 +1,8 @@
 "use client"
 
-import {
-    Button,
-    Flex,
-} from "@code0-tech/pictor";
+import {Button, Flex,} from "@code0-tech/pictor";
 import React from "react";
-import {IconDatabase, IconFile, IconMessageChatbot} from "@tabler/icons-react";
+import {IconFile, IconPlayerPlay} from "@tabler/icons-react";
 import {useParams} from "next/navigation";
 import {Flow} from "@code0-tech/sagittarius-graphql-types";
 import {FlowBuilderComponent} from "@edition/flow/components/builder/FlowBuilderComponent";
@@ -16,6 +13,7 @@ import {
     ResizablePanelGroup
 } from "@code0-tech/pictor/dist/components/resizable/Resizable";
 import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
+import {FlowExecutionResultView} from "@edition/flow/views/FlowExecutionResultView";
 
 export default function Page() {
 
@@ -24,31 +22,49 @@ export default function Page() {
     const flowIndex = params.flowId as any as number
     const flowId: Flow['id'] = `gid://sagittarius/Flow/${flowIndex}`
 
-    const [show, setShow] = React.useState(false);
+    const [tab, setTab] = React.useState<string | undefined>(undefined);
 
     return <ResizablePanel id={"2"}>
         <Layout layoutGap={0} showLayoutSplitter={false} rightContent={
             <Flex pl={0.7} style={{flexDirection: "column", gap: "0.7rem"}}>
-                <Button aria-selected={show} onClick={() => setShow(prevState => !prevState)} variant={"none"}
+                <Button aria-selected={tab === "file"}
+                        onClick={() => setTab(prevState => prevState === "file" ? undefined : "file")} variant={"none"}
                         paddingSize={"xs"}>
                     <IconFile size={16}/>
                 </Button>
-                <Button variant={"none"} paddingSize={"xs"}>
-                    <IconDatabase size={16}/>
-                </Button>
-                <Button variant={"none"} paddingSize={"xs"}>
-                    <IconMessageChatbot size={16}/>
+                <Button aria-selected={tab === "execution"}
+                        onClick={() => setTab(prevState => prevState === "execution" ? undefined : "execution")}
+                        variant={"none"}
+                        paddingSize={"xs"}>
+                    <IconPlayerPlay size={16}/>
                 </Button>
             </Flex>
         }>
             <ResizablePanelGroup orientation={"horizontal"} key={flowIndex}>
-                <ResizablePanel id={"2"} color={"primary"} style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
-                    <FlowBuilderComponent flowId={flowId} namespaceId={undefined} projectId={undefined}/>
+                <ResizablePanel id={"2"}>
+                    <ResizablePanelGroup orientation={"vertical"}>
+                        <ResizablePanel id={"1"} color={"primary"}
+                                        style={{borderRadius: "1rem"}}>
+                            <FlowBuilderComponent flowId={flowId} namespaceId={undefined} projectId={undefined}/>
+                        </ResizablePanel>
+                        {
+                            tab === "execution" && (
+                                <>
+                                    <ResizableHandle/>
+                                    <ResizablePanel id={"2"} color={"primary"}
+                                                    style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
+                                        <FlowExecutionResultView/>
+                                    </ResizablePanel>
+                                </>
+                            )
+                        }
+                    </ResizablePanelGroup>
                 </ResizablePanel>
-                {show && (
+                {tab === "file" && (
                     <>
                         <ResizableHandle/>
-                        <ResizablePanel id={"3"} defaultSize={"25%"} color={"primary"} style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
+                        <ResizablePanel id={"3"} defaultSize={"25%"} color={"primary"}
+                                        style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
                             <FunctionFilesComponent flowId={flowId} namespaceId={undefined}
                                                     projectId={undefined}/>
                         </ResizablePanel>

src/app/layout.tsx

@@ -17,9 +17,9 @@ import {ErrorLink} from "@apollo/client/link/error";
 import {useRouter} from "next/navigation";
 import {Toaster} from "sonner";
 import {Error} from "@code0-tech/sagittarius-graphql-types";
-import {toast} from "@code0-tech/pictor";
 import {Inter} from 'next/font/google'
 import {GraphQLFormattedError} from "graphql/error";
+import {addIslandErrorNotification} from "@code0-tech/pictor/dist/components/island/Island.hook";
 
 /**
  * Load the Inter font with Latin subset and swap display strategy
@@ -70,16 +70,12 @@ const ErrorCodeDescription: Record<string, string> = {
 const toastHandler = (error: Error | GraphQLFormattedError) => {
     console.error("[ERROR]", error)
     if (error && "errorCode" in error) {
-        toast({
-            title: ErrorCodeDescription[(error.errorCode as string)],
-            color: "error",
-            dismissible: true,
+        addIslandErrorNotification({
+            message: ErrorCodeDescription[(error.errorCode as string)]
         })
     } else {
-        toast({
-            title: "An internal error occurred",
-            color: "error",
-            dismissible: true,
+        addIslandErrorNotification({
+            message: "Internal error"
         })
     }
 }

src/packages/ce/src/application/views/ApplicationBarView.tsx

@@ -1,14 +1,16 @@
 "use client"
 
-import {Button, Flex, MenuItem, MenuSeparator, useService, useStore} from "@code0-tech/pictor";
+import {Button, Flex, MenuItem, MenuSeparator, Text, useService, useStore} from "@code0-tech/pictor";
 import {UserService} from "@edition/user/services/User.service";
-import {useRouter} from "next/navigation";
+import {useParams, useRouter} from "next/navigation";
 import React from "react";
 import Link from "next/link";
 import {IconBuilding, IconFolders, IconInbox, IconLogout, IconSearch, IconUser} from "@tabler/icons-react";
 import {ApplicationBreadcrumbView} from "@edition/application/views/ApplicationBreadcrumbView";
 import UserMenuComponent from "@edition/user/components/UserMenuComponent";
 import {useUserSession} from "@edition/user/hooks/User.session.hook";
+import {Island} from "@code0-tech/pictor/dist/components/island/Island";
+import {ButtonGroup} from "@code0-tech/pictor/dist/components/button-group/ButtonGroup";
 
 export const ApplicationBarView: React.FC = () => {
 
@@ -17,10 +19,14 @@ export const ApplicationBarView: React.FC = () => {
     const userStore = useStore(UserService)
     const router = useRouter()
     const [loading, startTransition] = React.useTransition()
+    const params = useParams()
 
+    const namespaceIndex = params.namespaceId as string | undefined
+    const projectIndex = params.projectId as string | undefined
     const currentUser = React.useMemo(() => userService.getById(currentSession?.user?.id), [userStore, currentSession])
-    const namespaceIndex = React.useMemo(() => currentUser?.namespace?.id?.match(/Namespace\/(\d+)$/)?.[1], [currentUser])
+    const userNamespaceIndex = React.useMemo(() => currentUser?.namespace?.id?.match(/Namespace\/(\d+)$/)?.[1], [currentUser])
     const userIndex = currentUser?.id?.match(/User\/(\d+)$/)?.[1]
+    const currentStep = projectIndex ? "project" : namespaceIndex ? "namespace" : "home";
 
     const userMenu = React.useMemo(() => {
 
@@ -51,7 +57,7 @@ export const ApplicationBarView: React.FC = () => {
                     <IconBuilding size={16}/>Organizations
                 </MenuItem>
             </Link>
-            <Link href={`/namespace/${namespaceIndex}`}>
+            <Link href={`/namespace/${userNamespaceIndex}`}>
                 <MenuItem>
                     <IconFolders size={16}/>Personal Workspace
                 </MenuItem>
@@ -61,10 +67,36 @@ export const ApplicationBarView: React.FC = () => {
                 <IconLogout size={16}/>Logout
             </MenuItem>
         </UserMenuComponent>
-    }, [currentUser, currentSession, namespaceIndex])
+    }, [currentUser, currentSession, userNamespaceIndex])
 
-    return <Flex py={0.7} align={"center"} justify={"space-between"}>
+    return <Flex py={0.7} key={`island-${currentStep}`} align={"center"} justify={"space-between"}>
         <ApplicationBreadcrumbView/>
+        <Flex pos={"fixed"} top={"1rem"} left={"50%"} justify={"center"}
+              style={{zIndex: 9999, transform: "translateX(-50%)"}}>
+            <Island>
+                <ButtonGroup color={"primary"} bg={"transparent"} style={{boxShadow: "none"}}>
+                    <Button paddingSize={"xxs"} key={"home-button"} variant={"none"}
+                            aria-selected={!namespaceIndex && !projectIndex} onClick={() => router.push(`/`)}>
+                        <Text>Home</Text>
+                    </Button>
+                    {namespaceIndex ? (
+                        <Button paddingSize={"xxs"} key={"orga-button"} variant={"none"}
+                                onClick={() => router.push(`/namespace/${namespaceIndex}`)}
+                                aria-selected={!!namespaceIndex && !projectIndex}>
+                            <Text>Organization</Text>
+                        </Button>
+                    ) : (null as any)}
+                    {namespaceIndex && projectIndex ? (
+                        <Button paddingSize={"xxs"} key={"home-button"} variant={"none"}
+                                onClick={() => router.push(`/namespace/${namespaceIndex}/project/${projectIndex}/flow`)}
+                                aria-selected={!!namespaceIndex && !!projectIndex}>
+                            <Text>Project</Text>
+                        </Button>
+                    ) : (null as any)}
+                </ButtonGroup>
+
+            </Island>
+        </Flex>
         <Flex align={"center"} style={{gap: ".7rem"}}>
             <Button disabled variant={"none"} paddingSize={"xs"}>
                 <IconSearch size={16}/>