Project structure changed
This commit is contained in:
Lucas Oliveira
parent
8ace199118
commit
45087c54ec
9 changed files with 257 additions and 156 deletions
|
|
@ -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 (
|
||||
<PopUpProvider>
|
||||
<div className="w-screen h-screen">
|
||||
<Flow></Flow>
|
||||
</div>
|
||||
</PopUpProvider>
|
||||
//need parent component with width and height
|
||||
<div className="h-full flex flex-col">
|
||||
<ReactFlowProvider>
|
||||
<div className="flex grow-0 shrink basis-auto">
|
||||
<Header userNavigation={userNavigation} user={user}></Header>
|
||||
</div>
|
||||
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
|
||||
<Sidebar />
|
||||
<ExtraSidebar />
|
||||
|
||||
{/* Main area */}
|
||||
<main className="min-w-0 flex-1 border-t border-gray-200 flex">
|
||||
{/* Primary column */}
|
||||
<div className="w-full h-full">
|
||||
<FlowPage />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
|
||||
{alertsList.map((alert) => (
|
||||
<div key={alert.id}>
|
||||
{alert.type === "error" ? (
|
||||
<ErrorAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
list={alert.data.list}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : alert.type === "notice" ? (
|
||||
<NoticeAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
link={alert.data.link}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
) : (
|
||||
<SuccessAlert
|
||||
key={alert.id}
|
||||
title={alert.data.title}
|
||||
id={alert.id}
|
||||
removeAlert={removeAlert}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ReactFlowProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -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 }) {
|
||||
|
|
|
|||
|
|
@ -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<any>,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(
|
||||
<div className="h-full w-48 bg-slate-200 flex flex-col">
|
||||
<div className="w-full text-center border border-black cursor-grab" draggable onDragStart={(event)=>onDragStart(event,'promptNode')}> prompt Node</div>
|
||||
<div draggable className="w-full text-center border border-black cursor-grab" onDragStart={(event)=>onDragStart(event,'modelNode')}> Model Node</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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<JSX.Element | null>(null);
|
||||
|
||||
const openPopUp = (element: JSX.Element) => {
|
||||
setPopUpElement(element);
|
||||
};
|
||||
|
||||
const closePopUp = () => {
|
||||
setPopUpElement(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
|
||||
{children}
|
||||
{popUpElement}
|
||||
</PopUpContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopUpProvider;
|
||||
|
|
@ -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
|
||||
<div className='w-full h-full flex flex-row'>
|
||||
<ReactFlowProvider>
|
||||
<Sidebar/>
|
||||
<div className='w-screen h-full' ref={reactFlowWrapper}>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect = {onConnect}
|
||||
onInit={setReactFlowInstance}
|
||||
nodeTypes={nodeTypes}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
fitView
|
||||
>
|
||||
<Background/>
|
||||
<Controls></Controls>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</ReactFlowProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
<ContextWrapper>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</ContextWrapper>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue