From 45087c54ec533ec8987bb88e5b71ef84b643b74b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 10 Feb 2023 16:03:16 -0300 Subject: [PATCH] Project structure changed --- space_flow/package-lock.json | 96 +++++++++++ space_flow/package.json | 5 + space_flow/public/index.html | 7 +- space_flow/src/App.tsx | 155 ++++++++++++++++-- .../src/CustomNodes/PromptNode/index.tsx | 2 +- space_flow/src/components/sidebar.tsx | 25 --- space_flow/src/context/popUpContext.tsx | 32 ---- space_flow/src/flow/index.tsx | 81 --------- space_flow/src/index.tsx | 10 +- 9 files changed, 257 insertions(+), 156 deletions(-) delete mode 100644 space_flow/src/components/sidebar.tsx delete mode 100644 space_flow/src/context/popUpContext.tsx delete mode 100644 space_flow/src/flow/index.tsx diff --git a/space_flow/package-lock.json b/space_flow/package-lock.json index b974cc791..44c7c6576 100644 --- a/space_flow/package-lock.json +++ b/space_flow/package-lock.json @@ -9,6 +9,8 @@ "version": "0.1.0", "dependencies": { "@floating-ui/react": "^0.19.1", + "@headlessui/react": "^1.7.10", + "@heroicons/react": "^2.0.15", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -18,6 +20,9 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.7.1", + "react-laag": "^2.0.5", + "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "reactflow": "^11.5.5", "tailwindcss": "^3.2.6", @@ -2239,6 +2244,29 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@headlessui/react": { + "version": "1.7.10", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.10.tgz", + "integrity": "sha512-1m66h/5eayTEZVT2PI13/2PG3EVC7a9XalmUtVSC8X76pcyKYMuyX1XAL2RUtCr8WhoMa/KrDEyoeU5v+kSQOw==", + "dependencies": { + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, + "node_modules/@heroicons/react": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.15.tgz", + "integrity": "sha512-CZ2dGWgWG3/z5LEoD5D3MEr1syn45JM/OB2aDpw531Ryecgkz2V7TWQ808P0lva7zP003PVW6WlwbofsYyga3A==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -3189,6 +3217,14 @@ "react-dom": ">=17" } }, + "node_modules/@remix-run/router": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz", + "integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -5769,6 +5805,11 @@ "node": ">=0.10.0" } }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" + }, "node_modules/cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -14447,11 +14488,31 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-laag": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/react-laag/-/react-laag-2.0.5.tgz", + "integrity": "sha512-RCvublJhdcgGRHU1wMYJ8kRtnYsKUgYusLvVhMuftg65POnnOB4+fwXvnETm6adc0cMnc1spujlrK6bGIz6aug==", + "dependencies": { + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14460,6 +14521,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz", + "integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==", + "dependencies": { + "@remix-run/router": "1.3.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz", + "integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==", + "dependencies": { + "@remix-run/router": "1.3.2", + "react-router": "6.8.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -16001,6 +16092,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/space_flow/package.json b/space_flow/package.json index cb6ad1c9b..551946af6 100644 --- a/space_flow/package.json +++ b/space_flow/package.json @@ -4,6 +4,8 @@ "private": true, "dependencies": { "@floating-ui/react": "^0.19.1", + "@headlessui/react": "^1.7.10", + "@heroicons/react": "^2.0.15", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -13,6 +15,9 @@ "@types/react-dom": "^18.0.10", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.7.1", + "react-laag": "^2.0.5", + "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "reactflow": "^11.5.5", "tailwindcss": "^3.2.6", diff --git a/space_flow/public/index.html b/space_flow/public/index.html index bb1b68303..7b11caa99 100644 --- a/space_flow/public/index.html +++ b/space_flow/public/index.html @@ -6,10 +6,9 @@ Document - -
- + + +
- \ No newline at end of file diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 2db14d63a..3d91d77ec 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -1,14 +1,149 @@ -import Flow from "./flow"; +import "reactflow/dist/style.css"; +import { useState, useRef, useEffect, useContext } from "react"; +import { ReactFlowProvider } from "reactflow"; +import "./CustomNodes/inputTextFolder/inputText.css"; import "./App.css"; -import PopUpProvider from "./context/popUpContext"; -function App() { +import { useLocation } from "react-router-dom"; +import ErrorAlert from "./alerts/error"; +import NoticeAlert from "./alerts/notice"; +import SuccessAlert from "./alerts/success"; +import ExtraSidebar from "./components/ExtraSidebarComponent"; +import { alertContext } from "./contexts/alertContext"; +import { locationContext } from "./contexts/locationContext"; +import FlowPage from "./pages/FlowPage"; +import Sidebar from "./components/SidebarComponent"; +import Header from "./components/HeaderComponent"; + +export default function App() { + var _ = require("lodash"); + + + let { setAtual, setShowSideBar, setIsStackedOpen} = + useContext(locationContext); + let location = useLocation(); + useEffect(() => { + setAtual(location.pathname.replace(/\/$/g, "").split("/")); + setShowSideBar(true); + setIsStackedOpen(true); + }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]); + + const { + errorData, + errorOpen, + setErrorOpen, + noticeData, + noticeOpen, + setNoticeOpen, + successData, + successOpen, + setSuccessOpen, + } = useContext(alertContext); + + const [alertsList, setAlertsList] = useState([]); + + useEffect(() => { + if (errorOpen && errorData) { + setErrorOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } else if (noticeOpen && noticeData) { + setNoticeOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } else if (successOpen && successData) { + setSuccessOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } + }, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]); + + const removeAlert = (id: number) => { + setAlertsList((prevAlertsList) => + prevAlertsList.filter((alert) => alert.id !== id) + ); + }; + + const user = { + name: "Whitney Francis", + email: "whitney.francis@example.com", + imageUrl: + "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", + }; + + const userNavigation = [ + { name: "Your Projects", href: "/" }, + { + name: "Account settings", + href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", + }, + { name: "Sign out", href: "/" }, + ]; + return ( - -
- -
- + //need parent component with width and height +
+ +
+
+
+
+ + + + {/* Main area */} +
+ {/* Primary column */} +
+ +
+
+
+
+ {alertsList.map((alert) => ( +
+ {alert.type === "error" ? ( + + ) : alert.type === "notice" ? ( + + ) : ( + + )} +
+ ))} +
+ +
); } - -export default App; diff --git a/space_flow/src/CustomNodes/PromptNode/index.tsx b/space_flow/src/CustomNodes/PromptNode/index.tsx index c9f26d21e..c40c07c92 100644 --- a/space_flow/src/CustomNodes/PromptNode/index.tsx +++ b/space_flow/src/CustomNodes/PromptNode/index.tsx @@ -1,6 +1,6 @@ import { Handle, Position } from "reactflow"; import { useContext } from "react"; -import { PopUpContext } from "../../context/popUpContext"; +import { PopUpContext } from "../../contexts/popUpContext"; export default function PromptNode({ data }) { diff --git a/space_flow/src/components/sidebar.tsx b/space_flow/src/components/sidebar.tsx deleted file mode 100644 index 501d39781..000000000 --- a/space_flow/src/components/sidebar.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { prompt } from "../data_assets/prompt"; -import { llm_chain } from "../data_assets/llm_chain"; - -export function Sidebar(){ - - function onDragStart(event:React.DragEvent,nodeType){ - let json; - event.dataTransfer.setData('application/reactflow',nodeType) - event.dataTransfer.effectAllowed = 'move' - if(nodeType==="promptNode"){ - json = JSON.stringify(prompt) - } - if(nodeType==="modelNode"){ - json = JSON.stringify(llm_chain) - } - event.dataTransfer.setData('json',json); - } - - return( -
-
onDragStart(event,'promptNode')}> prompt Node
-
onDragStart(event,'modelNode')}> Model Node
-
- ) -} \ No newline at end of file diff --git a/space_flow/src/context/popUpContext.tsx b/space_flow/src/context/popUpContext.tsx deleted file mode 100644 index 506be2a38..000000000 --- a/space_flow/src/context/popUpContext.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { createContext } from "react"; -import React, { useState } from 'react'; - -export const PopUpContext = createContext({ - openPopUp: (popUpElement: JSX.Element) => {}, - closePopUp: () => {} -}); - -interface PopUpProviderProps { - children: React.ReactNode; -} - -const PopUpProvider = ({ children }: PopUpProviderProps) => { - const [popUpElement, setPopUpElement] = useState(null); - - const openPopUp = (element: JSX.Element) => { - setPopUpElement(element); - }; - - const closePopUp = () => { - setPopUpElement(null); - }; - - return ( - - {children} - {popUpElement} - - ); -}; - -export default PopUpProvider; \ No newline at end of file diff --git a/space_flow/src/flow/index.tsx b/space_flow/src/flow/index.tsx deleted file mode 100644 index 261a36b2b..000000000 --- a/space_flow/src/flow/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import 'reactflow/dist/style.css'; -import { useState, useCallback, useRef } from 'react'; -import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls, Position, useNodesState, useEdgesState, ReactFlowProvider } from 'reactflow'; -import type { Node, Edge } from 'reactflow'; -import TextUpdaterNode from '../CustomNodes/inputTextFolder'; -import '../CustomNodes/inputTextFolder/inputText.css' -import PromptNode from '../CustomNodes/PromptNode'; -import { prompt } from '../data_assets/prompt'; -import { Sidebar } from '../components/sidebar'; -import ModelNode from '../CustomNodes/ModelNode'; - // outside component to avoid render trigger - const nodeTypes = {textUpdater:TextUpdaterNode, promptNode:PromptNode,modelNode:ModelNode} - - const rfStyle={ - backgroundCOlor:"#B8CEFF" - } - let id = 0; - const getId = () => `dndnode_${id++}`; - -export default function Flow(){ - - const reactFlowWrapper = useRef(null) - const [nodes,setNodes,onNodesChange] = useNodesState([]) - const [edges,setEdges, onEdgesChange] = useEdgesState([]) - const [reactFlowInstance,setReactFlowInstance] = useState(null) - const onConnect = useCallback((params)=>setEdges((eds)=>addEdge(params,eds)),[]) - const onDragOver = useCallback((event) => { - event.preventDefault(); - event.dataTransfer.dropEffect = 'move'; - }, []); - const onDrop = useCallback( - (event)=>{ - event.preventDefault(); - - const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect(); - const type = event.dataTransfer.getData('application/reactflow'); - let data = JSON.parse(event.dataTransfer.getData('json')) - // check if the dropped element is valid - if (typeof type === 'undefined' || !type) { - return; - } - - const position = reactFlowInstance.project({x:event.clientX-reactflowBounds.top, y:event.clientY - reactflowBounds.top}) - const newNode = { - id:getId(), - type, - position, - data:{...data,delete:()=>console.log("asdsdsadad")} - } - setNodes((nds)=>nds.concat(newNode)) - - - - },[reactFlowInstance]) - - return ( - //need parent component with width and height -
- - -
- - - - -
- -
- ) -} \ No newline at end of file diff --git a/space_flow/src/index.tsx b/space_flow/src/index.tsx index 5fc443830..2272eb5ec 100644 --- a/space_flow/src/index.tsx +++ b/space_flow/src/index.tsx @@ -2,14 +2,18 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { BrowserRouter } from 'react-router-dom'; +import ContextWrapper from './contexts'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - - - + + + + + ); // If you want to start measuring performance in your app, pass a function