Feat/wf new layout (#40)

* feat: change history icon * feat:add close button * feat: modify wf layout
Onelevenvy · Sep 23, 2024 · 64c40ed · 64c40ed
1 parent 0844503
commit 64c40ed
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 46 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,7 +5,7 @@
             "server": "localhost",
             "port": 5432,
             "driver": "PostgreSQL",
-            "name": "next",
+            "name": "n",
             "database": "evoagi",
             "username": "postgres",
             "password": "evoagi123456"

diff --git a/web/src/components/Teams/DebugPreview/head.tsx b/web/src/components/Teams/DebugPreview/head.tsx
@@ -16,8 +16,9 @@ import {
 } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { MdBuild } from "react-icons/md";
-import { ImHistory } from "react-icons/im";
 import ChatHistoryList from "@/components/Playground/ChatHistoryList";
+import { LuHistory } from "react-icons/lu";
+import { useState } from "react";
 
 function DebugPreviewHead({
   teamId,
@@ -31,6 +32,7 @@ function DebugPreviewHead({
   const bgColor = useColorModeValue("ui.bgMain", "ui.bgMainDark");
   const buttonColor = useColorModeValue("ui.main", "ui.main");
   const { t } = useTranslation();
+
   return (
     <Box
       display={"flex"}
@@ -46,7 +48,7 @@ function DebugPreviewHead({
           <PopoverTrigger>
             <IconButton
               aria-label="history"
-              icon={<Icon as={ImHistory} h="6" w="6" color={buttonColor} />}
+              icon={<Icon as={LuHistory} h="6" w="6" color={buttonColor} />}
               h="10"
               w="10"
               bg={bgColor}
@@ -85,6 +87,7 @@ function DebugPreviewHead({
             <Text color={"white"}>{t("team.teamsetting.savedeploy")}</Text>
           </Button>
         )}
+
       </Box>
     </Box>
   );

diff --git a/web/src/components/Teams/DebugPreview/index.tsx b/web/src/components/Teams/DebugPreview/index.tsx
@@ -5,11 +5,11 @@ import DebugPreviewHead from "./head";
 function DebugPreview({
   teamId,
   triggerSubmit,
-  useDeployButton
+  useDeployButton,
 }: {
   teamId: number;
   triggerSubmit: () => void;
-  useDeployButton:boolean
+  useDeployButton: boolean;
 }) {
   return (
     <Box
@@ -20,10 +20,12 @@ function DebugPreview({
       display={"flex"}
       flexDirection={"column"}
     >
-      <Box 
-      py="5"
-       overflow={"hidden"}>
-        <DebugPreviewHead teamId={teamId} triggerSubmit={triggerSubmit} useDeployButton={useDeployButton} />
+      <Box py="5" overflow={"hidden"}>
+        <DebugPreviewHead
+          teamId={teamId}
+          triggerSubmit={triggerSubmit}
+          useDeployButton={useDeployButton}
+        />
       </Box>
       <Box
         display={"flex"}

diff --git a/web/src/components/Teams/WorkflowTeamSettings.tsx b/web/src/components/Teams/WorkflowTeamSettings.tsx
@@ -1,10 +1,20 @@
-import { Box, Flex, Spinner } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Center,
+  CloseButton,
+  Flex,
+  Spinner,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import useCustomToast from "@/hooks/useCustomToast";
 import DebugPreview from "./DebugPreview";
 import TqxWorkflow from "../WorkFlow";
 import { useEffect, useState } from "react";
 import { ApiError, GraphsService } from "@/client";
 import { useQuery, useQueryClient } from "react-query";
+import PaneStateControl from "../Common/PaneStateControl";
+import { LuChevronLeft, LuChevronRight } from "react-icons/lu";
 
 interface WorkflowSettingProps {
   teamId: number;
@@ -28,6 +38,10 @@ function WorkflowTeamSettings({ teamId, triggerSubmit }: WorkflowSettingProps) {
       keepPreviousData: true,
     }
   );
+  const selctedColor = useColorModeValue(
+    "ui.selctedColor",
+    "ui.selctedColorDark"
+  );
 
   const createDefaultGraph = async (teamId: number) => {
     try {
@@ -114,32 +128,48 @@ function WorkflowTeamSettings({ teamId, triggerSubmit }: WorkflowSettingProps) {
     const errDetail = (error as ApiError).body?.detail;
     showToast("Something went wrong.", `${errDetail}`, "error");
   }
-
+  const [showDebugPreview, setShowDebugPreview] = useState(true);
+  const toggleDebugPreview = () => {
+    setShowDebugPreview(!showDebugPreview);
+  };
   return (
-    <>
-      {isLoading ? (
-        <Flex justify="center" align="center" height="100vh" width="full">
-          <Spinner size="xl" color="ui.main" />
-        </Flex>
-      ) : (
-        <>
-          {graphs && (
-            <>
-              <Box w="80%" maxH={"full"} bg={"#f6f8fa"} mr="2">
-                <TqxWorkflow teamId={currentTeamId} graphData={graphs} />
-              </Box>
-              <Box w="20%">
-                <DebugPreview
-                  teamId={currentTeamId}
-                  triggerSubmit={triggerSubmit}
-                  useDeployButton={false}
-                />
-              </Box>
-            </>
-          )}
-        </>
+    <Flex width="full" height="full">
+      <Box width={showDebugPreview ? "80%" : "100%"} transition="width 0.3s">
+        {isLoading ? (
+          <Flex justify="center" align="center" height="100%" width="100%">
+            <Spinner size="xl" color="ui.main" />
+          </Flex>
+        ) : (
+          graphs && (
+            <Box height="100%" bg="#f6f8fa">
+              <TqxWorkflow teamId={currentTeamId} graphData={graphs} />
+            </Box>
+          )
+        )}
+      </Box>
+      <Center>
+        <PaneStateControl
+          selectedColor={selctedColor}
+          onClick={toggleDebugPreview}
+          background={"transparent"}
+          Icon={showDebugPreview ? LuChevronRight : LuChevronLeft}
+        />
+      </Center>
+      {showDebugPreview && (
+        <Box
+          width="20%"
+          position="relative"
+          borderLeft="1px solid"
+          borderColor="gray.200"
+        >
+          <DebugPreview
+            teamId={currentTeamId}
+            triggerSubmit={triggerSubmit}
+            useDeployButton={false}
+          />
+        </Box>
       )}
-    </>
+    </Flex>
   );
 }
 

diff --git a/web/src/components/WorkFlow/FlowVisualizer.tsx b/web/src/components/WorkFlow/FlowVisualizer.tsx
@@ -24,14 +24,16 @@ import {
   MenuItem,
   CloseButton,
   Kbd,
+  useColorModeValue,
+  Text,
 } from "@chakra-ui/react";
 import { nodeConfig, NodeType } from "./nodes/nodeConfig";
 import BaseProperties from "./nodes/Base/Properties";
 import { CustomNode, FlowVisualizerProps } from "./types";
 import { useFlowState } from "@/hooks/graphs/useFlowState";
 import { useContextMenu } from "@/hooks/graphs/useContextMenu";
 import { useGraphConfig } from "@/hooks/graphs/useUpdateGraphConfig";
-import { MdOutlineHelp } from "react-icons/md";
+import { MdBuild, MdOutlineHelp } from "react-icons/md";
 
 const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
   nodeTypes,
@@ -57,7 +59,7 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
   );
 
   const { contextMenu, onNodeContextMenu, closeContextMenu } = useContextMenu();
-
+  const buttonColor = useColorModeValue("ui.main", "ui.main");
   const reactFlowInstance = useReactFlow();
 
   const onNodeClick = useCallback(
@@ -344,15 +346,7 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
             style={{ background: "#f1f1f1" }}
           />
           <MiniMap />
-          <Panel position="top-right">
-            <Button
-              onClick={onSave}
-              isLoading={isSaving}
-              loadingText="Saving..."
-            >
-              Save Graph
-            </Button>
-          </Panel>
+
           <Panel position="top-left">
             <MdOutlineHelp
               onMouseEnter={toggleShortcutPanel}
@@ -385,11 +379,27 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
                 top: `${contextMenu.y}px`,
               }}
             >
-              <MenuItem onClick={deleteNode}>删除节点</MenuItem>
+              <MenuItem onClick={deleteNode}>Delete Node</MenuItem>
             </MenuList>
           </Menu>
         )}
       </Box>
+      {/* <Panel position="top-right" > */}
+      <Button
+        bg={buttonColor}
+        borderRadius={"md"}
+        onClick={onSave}
+        isLoading={isSaving}
+        loadingText="Saving..."
+        _hover={{ backgroundColor: "#1c86ee" }}
+        rightIcon={<MdBuild color={"white"} />}
+        position={"absolute"}
+        right={"20px"}
+        top={"8px"}
+      >
+        <Text color={"white"}>Deploy</Text>
+      </Button>
+      {/* </Panel> */}
       {selectedNodeId && (
         <Box
           position="relative"