Merge branch 'dev' into merge_repo
This commit is contained in:
Ibis Prevedello
commit
13495cedc1
19 changed files with 862 additions and 690 deletions
|
|
@ -1,6 +1,5 @@
|
|||
import "reactflow/dist/style.css";
|
||||
import { useState, useRef, useEffect, useContext } from "react";
|
||||
import { ReactFlowProvider } from "reactflow";
|
||||
import { useState, useEffect, useContext } from "react";
|
||||
import "./App.css";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import ErrorAlert from "./alerts/error";
|
||||
|
|
@ -9,24 +8,21 @@ 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";
|
||||
import { TabsProvider } from "./contexts/tabsContext";
|
||||
import { TabsManager } from "./pages/FlowPage/flowManager";
|
||||
|
||||
export default function App() {
|
||||
var _ = require("lodash");
|
||||
|
||||
|
||||
let { setAtual, setShowSideBar, setIsStackedOpen} =
|
||||
let { setCurrent, setShowSideBar, setIsStackedOpen } =
|
||||
useContext(locationContext);
|
||||
let location = useLocation();
|
||||
useEffect(() => {
|
||||
setAtual(location.pathname.replace(/\/$/g, "").split("/"));
|
||||
setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
|
||||
setShowSideBar(true);
|
||||
setIsStackedOpen(true);
|
||||
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
|
||||
}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
|
||||
|
||||
const {
|
||||
errorData,
|
||||
|
|
@ -98,7 +94,6 @@ export default function App() {
|
|||
return (
|
||||
//need parent component with width and height
|
||||
<div className="h-full flex flex-col">
|
||||
|
||||
<div className="flex grow-0 shrink basis-auto">
|
||||
<Header userNavigation={userNavigation} user={user}></Header>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
const defaultErrorMessages ={
|
||||
deleteRLAS:"Could not remove label from record, please try again",
|
||||
addRLAS:"Could not label this record, please try again",
|
||||
deleteRecords:"Could not delete record, please try again later"
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class CustomError extends Error{
|
||||
constructor(message:string){
|
||||
super(message)
|
||||
Object.setPrototypeOf(this,CustomError.prototype)
|
||||
}
|
||||
|
||||
getErrorMessage(): string{
|
||||
return defaultErrorMessages[this.message]?? "unknow error, please try again"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
import { Disclosure } from "@headlessui/react";
|
||||
import { ChevronLeftIcon } from "@heroicons/react/24/outline";
|
||||
import { ArrowUpTrayIcon, ChevronLeftIcon } from "@heroicons/react/24/outline";
|
||||
import { useContext } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { classNames } from "../../utils";
|
||||
import { locationContext } from "../../contexts/locationContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
|
||||
export default function ExtraSidebar() {
|
||||
const {uploadFlow} = useContext(TabsContext)
|
||||
const {
|
||||
atual,
|
||||
current,
|
||||
isStackedOpen,
|
||||
setIsStackedOpen,
|
||||
extraNavigation,
|
||||
|
|
@ -20,7 +22,7 @@ export default function ExtraSidebar() {
|
|||
isStackedOpen ? "w-60" : "w-0 "
|
||||
} flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
|
||||
>
|
||||
<div className="w-60 overflow-y-auto scrollbar-hide h-full">
|
||||
<div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
|
||||
<div className="flex pt-4 px-4 justify-between align-middle w-full">
|
||||
<span className="text-gray-900 text-lg ml-2 font-semibold">
|
||||
{extraNavigation.title}
|
||||
|
|
@ -32,7 +34,7 @@ export default function ExtraSidebar() {
|
|||
<ChevronLeftIcon className="h-6 w-6"></ChevronLeftIcon>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col">
|
||||
<div className="flex flex-grow flex-col w-full">
|
||||
{extraNavigation.options ? (
|
||||
<div className="p-4">
|
||||
<nav className="flex-1 space-y-1">
|
||||
|
|
@ -42,7 +44,7 @@ export default function ExtraSidebar() {
|
|||
<Link
|
||||
to={item.href}
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === atual[4]
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
|
||||
"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
|
||||
|
|
@ -50,7 +52,7 @@ export default function ExtraSidebar() {
|
|||
>
|
||||
<item.icon
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === atual[4]
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "text-gray-500"
|
||||
: "text-gray-400 group-hover:text-gray-500",
|
||||
"mr-3 flex-shrink-0 h-6 w-6"
|
||||
|
|
@ -69,7 +71,7 @@ export default function ExtraSidebar() {
|
|||
<>
|
||||
<Disclosure.Button
|
||||
className={classNames(
|
||||
item.href.split("/")[2] === atual[4]
|
||||
item.href.split("/")[2] === current[4]
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
|
||||
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
|
|
@ -102,7 +104,7 @@ export default function ExtraSidebar() {
|
|||
key={subItem.name}
|
||||
to={subItem.href}
|
||||
className={classNames(
|
||||
subItem.href.split("/")[3] === atual[5]
|
||||
subItem.href.split("/")[3] === current[5]
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
|
||||
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
|
||||
|
|
@ -122,7 +124,11 @@ export default function ExtraSidebar() {
|
|||
) : (
|
||||
extraComponent
|
||||
)}
|
||||
{/* need to convert to multi stackbar logic */}
|
||||
</div>
|
||||
{/* <div className="w-full flex content-center justify-center mt-auto mb-8">
|
||||
<button onClick={()=>uploadFlow()} className="flex content-center justify-center py-3 px-6 border rounded-lg border-blue-500 text-blue-500 hover:text-white hover:bg-blue-500"><span>import flow</span><ArrowUpTrayIcon className=" ml-2 w-5 h-5"/> </button>
|
||||
</div> */}
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default function Header({user, userNavigation}){
|
|||
<div className="min-w-0 flex-1 ml-5">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
{/* <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
|
||||
<div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
|
||||
<div className="flex items-center space-x-8">
|
||||
<span className="inline-flex">
|
||||
<button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
|
||||
|
|
@ -56,7 +56,7 @@ export default function Header({user, userNavigation}){
|
|||
</button>{renderLayer(<div {...layerProps}><AlertDropdown closeFunction={()=>setIsOpen(false)} open={isOpen}></AlertDropdown></div>)}
|
||||
</span>
|
||||
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
{/* <Menu as="div" className="relative inline-block text-left">
|
||||
<Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
|
||||
|
|
@ -100,9 +100,9 @@ export default function Header({user, userNavigation}){
|
|||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</Menu> */}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import { useContext } from "react"
|
|||
import { locationContext } from "../../../contexts/locationContext";
|
||||
|
||||
export default function SidebarButton({item}){
|
||||
let {atual}= useContext(locationContext);
|
||||
let {current}= useContext(locationContext);
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={classNames(
|
||||
item.href.split("/")[1]=== atual[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
|
||||
item.href.split("/")[1]=== current[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
|
||||
'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg'
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function getPages(atual){
|
|||
}
|
||||
|
||||
export default function Breadcrumb(){
|
||||
let {atual} = useContext(locationContext);
|
||||
let {current} = useContext(locationContext);
|
||||
return (
|
||||
<div>
|
||||
<nav className="flex ml-2" aria-label="Breadcrumb">
|
||||
|
|
@ -35,7 +35,7 @@ export default function Breadcrumb(){
|
|||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{getPages(atual).map((page) => (
|
||||
{getPages(current).map((page) => (
|
||||
<li key={page.href}>
|
||||
<div className="flex items-center">
|
||||
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -9,13 +9,16 @@ import { useContext, useEffect, useRef, useState } from "react";
|
|||
import { sendAll } from "../../controllers/NodesServices";
|
||||
import { alertContext } from "../../contexts/alertContext";
|
||||
import { nodeColors } from "../../utils";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
|
||||
const _ = require("lodash");
|
||||
|
||||
export default function Chat({ reactFlowInstance }) {
|
||||
export default function Chat({flow, reactFlowInstance }) {
|
||||
const {updateFlow} = useContext(TabsContext)
|
||||
const [saveChat,setSaveChat] = useState(false)
|
||||
const [open, setOpen] = useState(true);
|
||||
const [chatValue, setChatValue] = useState("");
|
||||
const [chatHistory, setChatHistory] = useState([]);
|
||||
const [chatHistory, setChatHistory] = useState(flow.chat);
|
||||
const {setErrorData} = useContext(alertContext);
|
||||
const addChatHistory = (message, isSend) => {
|
||||
setChatHistory((old) => {
|
||||
|
|
@ -23,8 +26,17 @@ export default function Chat({ reactFlowInstance }) {
|
|||
newChat.push({ message, isSend });
|
||||
return newChat;
|
||||
});
|
||||
setSaveChat(chat=>!chat)
|
||||
};
|
||||
useEffect(()=>{
|
||||
console.log("flow")
|
||||
updateFlow({..._.cloneDeep(flow),chat:chatHistory})
|
||||
},[saveChat])
|
||||
useEffect(()=>{
|
||||
setChatHistory(flow.chat)
|
||||
},[flow])
|
||||
useEffect(()=>{
|
||||
if(ref.current)
|
||||
ref.current.scrollIntoView({behavior: 'smooth'});
|
||||
}, [chatHistory])
|
||||
function validateNodes(){
|
||||
|
|
@ -40,6 +52,29 @@ export default function Chat({ reactFlowInstance }) {
|
|||
return true;
|
||||
}
|
||||
const ref = useRef(null);
|
||||
|
||||
function sendMessage(){
|
||||
console.log(reactFlowInstance.toObject())
|
||||
if(chatValue !== ""){
|
||||
if(validateNodes()){
|
||||
if(validateChatNodes()){
|
||||
let message = chatValue;
|
||||
setChatValue("");
|
||||
addChatHistory(message, true);
|
||||
console.log({...reactFlowInstance.toObject(),message,chatHistory})
|
||||
sendAll({...reactFlowInstance.toObject(),message,chatHistory}).then((r) => {addChatHistory(r.data.result, false);});
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
|
||||
}
|
||||
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
|
||||
}
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition
|
||||
|
|
@ -71,14 +106,14 @@ export default function Chat({ reactFlowInstance }) {
|
|||
{chatHistory.map((c, i) => (
|
||||
<div key={i}>
|
||||
{c.isSend ? (
|
||||
<div className="w-full text-start">
|
||||
<div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none">
|
||||
<div className="w-full text-end">
|
||||
<div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
|
||||
{c.message}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full text-end">
|
||||
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tr-none">
|
||||
<div className="w-full text-start">
|
||||
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tl-none">
|
||||
{c.message}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,6 +125,11 @@ export default function Chat({ reactFlowInstance }) {
|
|||
<div className="w-full bg-white border-t flex items-center justify-between p-3">
|
||||
<div className="relative w-full mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
onKeyDown={(event)=>{
|
||||
if(event.key==='Enter'){
|
||||
sendMessage()
|
||||
}
|
||||
}}
|
||||
type="text"
|
||||
value={chatValue}
|
||||
onChange={(e) => {
|
||||
|
|
@ -100,28 +140,7 @@ export default function Chat({ reactFlowInstance }) {
|
|||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(reactFlowInstance.toObject())
|
||||
if(chatValue !== ""){
|
||||
if(validateNodes()){
|
||||
if(validateChatNodes()){
|
||||
let message = chatValue;
|
||||
setChatValue("");
|
||||
addChatHistory(message, true);
|
||||
sendAll({...reactFlowInstance.toObject(),message}).then((r) => {addChatHistory(r.data.result, false);});
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']})
|
||||
}
|
||||
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
|
||||
}
|
||||
} else {
|
||||
setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
|
||||
}
|
||||
|
||||
|
||||
}}
|
||||
onClick={() => sendMessage()}
|
||||
>
|
||||
<PaperAirplaneIcon
|
||||
className="h-5 w-5 text-gray-400 hover:text-gray-600"
|
||||
|
|
|
|||
|
|
@ -3,28 +3,29 @@ import { alertDropdownItem } from "../alerts/alertDropDown";
|
|||
|
||||
var _ = require("lodash");
|
||||
|
||||
type alertContextType=
|
||||
{
|
||||
errorData: {title: string, list?: Array<string>};
|
||||
setErrorData:(newState:{title: string, list?: Array<string>})=>void;
|
||||
//types for alertContextType
|
||||
type alertContextType = {
|
||||
errorData: { title: string; list?: Array<string> };
|
||||
setErrorData: (newState: { title: string; list?: Array<string> }) => void;
|
||||
errorOpen: boolean;
|
||||
setErrorOpen: (newState: boolean) => void;
|
||||
noticeData: {title: string, link?: string};
|
||||
setNoticeData:(newState:{title: string, link?: string})=>void;
|
||||
noticeData: { title: string; link?: string };
|
||||
setNoticeData: (newState: { title: string; link?: string }) => void;
|
||||
noticeOpen: boolean;
|
||||
setNoticeOpen: (newState: boolean) => void;
|
||||
successData: { title: string };
|
||||
setSuccessData: (newState: { title: string }) => void;
|
||||
successOpen: boolean;
|
||||
setSuccessOpen: (newState: boolean) => void;
|
||||
notificationCenter:boolean
|
||||
notificationCenter: boolean;
|
||||
setNotificationCenter: (newState: boolean) => void;
|
||||
notificationList: Array<alertDropdownItem>;
|
||||
pushNotificationList:(Object)=>void
|
||||
clearNotificationList:()=>void,
|
||||
removeFromNotificationList:(index:number)=>void
|
||||
}
|
||||
pushNotificationList: (Object) => void;
|
||||
clearNotificationList: () => void;
|
||||
removeFromNotificationList: (index: number) => void;
|
||||
};
|
||||
|
||||
//initial values to alertContextType
|
||||
const initialValue = {
|
||||
errorData: { title: "", list: [] },
|
||||
setErrorData: () => {},
|
||||
|
|
@ -43,61 +44,105 @@ const initialValue= {
|
|||
notificationList: [],
|
||||
pushNotificationList: () => {},
|
||||
clearNotificationList: () => {},
|
||||
removeFromNotificationList:()=>{}
|
||||
}
|
||||
removeFromNotificationList: () => {},
|
||||
};
|
||||
|
||||
export const alertContext = createContext<alertContextType>(initialValue);
|
||||
|
||||
export function AlertProvider({ children }) {
|
||||
const [errorData, setErrorDataState] = useState<{title:string,list?:Array<string>}>({title:"",list:[]});
|
||||
const [errorData, setErrorDataState] = useState<{
|
||||
title: string;
|
||||
list?: Array<string>;
|
||||
}>({ title: "", list: [] });
|
||||
const [errorOpen, setErrorOpen] = useState(false);
|
||||
const [noticeData, setNoticeDataState] = useState<{title:string,link?:string}>({title:"",link:""});
|
||||
const [noticeData, setNoticeDataState] = useState<{
|
||||
title: string;
|
||||
link?: string;
|
||||
}>({ title: "", link: "" });
|
||||
const [noticeOpen, setNoticeOpen] = useState(false);
|
||||
const [successData, setSuccessDataState] = useState<{title:string}>({title:""});
|
||||
const [successData, setSuccessDataState] = useState<{ title: string }>({
|
||||
title: "",
|
||||
});
|
||||
const [successOpen, setSuccessOpen] = useState(false);
|
||||
const [notificationCenter, setNotificationCenter] = useState(false);
|
||||
const [notificationList,setNotificationList] = useState([])
|
||||
const [notificationList, setNotificationList] = useState([]);
|
||||
const pushNotificationList = (notification: alertDropdownItem) => {
|
||||
setNotificationList((old) => {
|
||||
let newNotificationList = _.cloneDeep(old);
|
||||
newNotificationList.unshift(notification);
|
||||
return newNotificationList;
|
||||
})
|
||||
}
|
||||
function setErrorData (newState:{title: string, list?: Array<string>}){
|
||||
setErrorDataState(newState)
|
||||
setErrorOpen(true)
|
||||
});
|
||||
};
|
||||
function setErrorData(newState: { title: string; list?: Array<string> }) {
|
||||
setErrorDataState(newState);
|
||||
setErrorOpen(true);
|
||||
if (newState.title) {
|
||||
setNotificationCenter(true)
|
||||
pushNotificationList({type:"error",title:newState.title,list:newState.list, id:_.uniqueId()})
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
type: "error",
|
||||
title: newState.title,
|
||||
list: newState.list,
|
||||
id: _.uniqueId(),
|
||||
});
|
||||
}
|
||||
}
|
||||
function setNoticeData(newState:{title: string, link?: string}){
|
||||
setNoticeDataState(newState)
|
||||
setNoticeOpen(true)
|
||||
function setNoticeData(newState: { title: string; link?: string }) {
|
||||
setNoticeDataState(newState);
|
||||
setNoticeOpen(true);
|
||||
if (newState.title) {
|
||||
setNotificationCenter(true)
|
||||
pushNotificationList({type:"notice",title:newState.title,link:newState.link, id:_.uniqueId()})
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
type: "notice",
|
||||
title: newState.title,
|
||||
link: newState.link,
|
||||
id: _.uniqueId(),
|
||||
});
|
||||
}
|
||||
}
|
||||
function setSuccessData(newState: { title: string }) {
|
||||
setSuccessDataState(newState)
|
||||
setSuccessOpen(true)
|
||||
setSuccessDataState(newState);
|
||||
setSuccessOpen(true);
|
||||
if (newState.title) {
|
||||
setNotificationCenter(true)
|
||||
pushNotificationList({type:"success",title:newState.title, id:_.uniqueId()})
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
type: "success",
|
||||
title: newState.title,
|
||||
id: _.uniqueId(),
|
||||
});
|
||||
}
|
||||
}
|
||||
function clearNotificationList() {
|
||||
setNotificationList([])
|
||||
setNotificationList([]);
|
||||
}
|
||||
function removeFromNotificationList(index: number) {
|
||||
setNotificationList((prevAlertsList) => prevAlertsList.filter((alert) => alert.id !== index));
|
||||
setNotificationList((prevAlertsList) =>
|
||||
prevAlertsList.filter((alert) => alert.id !== index)
|
||||
);
|
||||
}
|
||||
return (
|
||||
<alertContext.Provider value={{ removeFromNotificationList,clearNotificationList,notificationList,pushNotificationList,setNotificationCenter,notificationCenter,errorData, setErrorData,
|
||||
errorOpen,setErrorOpen, noticeData, setNoticeData, noticeOpen, setNoticeOpen, successData, setSuccessData, successOpen, setSuccessOpen}}>
|
||||
<alertContext.Provider
|
||||
value={{
|
||||
removeFromNotificationList,
|
||||
clearNotificationList,
|
||||
notificationList,
|
||||
pushNotificationList,
|
||||
setNotificationCenter,
|
||||
notificationCenter,
|
||||
errorData,
|
||||
setErrorData,
|
||||
errorOpen,
|
||||
setErrorOpen,
|
||||
noticeData,
|
||||
setNoticeData,
|
||||
noticeOpen,
|
||||
setNoticeOpen,
|
||||
successData,
|
||||
setSuccessData,
|
||||
successOpen,
|
||||
setSuccessOpen,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</alertContext.Provider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { TabsProvider } from "./tabsContext";
|
|||
import { TypesProvider } from "./typesContext";
|
||||
|
||||
export default function ContextWrapper({ children }) {
|
||||
//element to wrap all context
|
||||
return (
|
||||
<>
|
||||
<LocationProvider>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,44 @@
|
|||
import { createContext, useState } from "react";
|
||||
|
||||
type locationContextType=
|
||||
{
|
||||
atual:Array<string>;
|
||||
setAtual:(newState:Array<string>)=>void;
|
||||
//types for location context
|
||||
type locationContextType = {
|
||||
current: Array<string>;
|
||||
setCurrent: (newState: Array<string>) => void;
|
||||
isStackedOpen: boolean;
|
||||
setIsStackedOpen: (newState: boolean) => void;
|
||||
showSideBar: boolean;
|
||||
setShowSideBar: (newState: boolean) => void;
|
||||
extraNavigation:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>};
|
||||
setExtraNavigation:(newState:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>}) => void;
|
||||
extraNavigation: {
|
||||
title: string;
|
||||
options?: Array<{
|
||||
name: string;
|
||||
href: string;
|
||||
icon: any;
|
||||
children?: Array<any>;
|
||||
}>;
|
||||
};
|
||||
setExtraNavigation: (newState: {
|
||||
title: string;
|
||||
options?: Array<{
|
||||
name: string;
|
||||
href: string;
|
||||
icon: any;
|
||||
children?: Array<any>;
|
||||
}>;
|
||||
}) => void;
|
||||
extraComponent: any;
|
||||
setExtraComponent: (newState: any) => void;
|
||||
}
|
||||
};
|
||||
|
||||
//initial value for location context
|
||||
const initialValue = {
|
||||
atual : window.location.pathname.replace(/\/$/g, '').split("/"),
|
||||
isStackedOpen:((window.innerWidth > 1024 && window.location.pathname.split("/")[1]) ? true : false),
|
||||
setAtual: ()=>{},
|
||||
//actual
|
||||
current: window.location.pathname.replace(/\/$/g, "").split("/"),
|
||||
isStackedOpen:
|
||||
window.innerWidth > 1024 && window.location.pathname.split("/")[1]
|
||||
? true
|
||||
: false,
|
||||
setCurrent: () => {},
|
||||
setIsStackedOpen: () => {},
|
||||
showSideBar: window.location.pathname.split("/")[1] ? true : false,
|
||||
setShowSideBar: () => {},
|
||||
|
|
@ -25,21 +46,34 @@ const initialValue= {
|
|||
setExtraNavigation: () => {},
|
||||
extraComponent: <></>,
|
||||
setExtraComponent: () => {},
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
export const locationContext = createContext<locationContextType>(initialValue);
|
||||
|
||||
export function LocationProvider({ children }) {
|
||||
const [atual,setAtual] = useState(initialValue.atual)
|
||||
const [isStackedOpen,setIsStackedOpen] = useState(initialValue.isStackedOpen)
|
||||
const [showSideBar,setShowSideBar] = useState(initialValue.showSideBar)
|
||||
const [extraNavigation, setExtraNavigation] = useState({title:""})
|
||||
const [extraComponent, setExtraComponent] = useState(<></>)
|
||||
const [current, setCurrent] = useState(initialValue.current);
|
||||
const [isStackedOpen, setIsStackedOpen] = useState(
|
||||
initialValue.isStackedOpen
|
||||
);
|
||||
const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
|
||||
const [extraNavigation, setExtraNavigation] = useState({ title: "" });
|
||||
const [extraComponent, setExtraComponent] = useState(<></>);
|
||||
return (
|
||||
<locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}>
|
||||
<locationContext.Provider
|
||||
value={{
|
||||
isStackedOpen,
|
||||
setIsStackedOpen,
|
||||
current,
|
||||
setCurrent,
|
||||
showSideBar,
|
||||
setShowSideBar,
|
||||
extraNavigation,
|
||||
setExtraNavigation,
|
||||
extraComponent,
|
||||
setExtraComponent,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</locationContext.Provider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { createContext } from "react";
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
//context to set JSX element on the DOM
|
||||
export const PopUpContext = createContext({
|
||||
openPopUp: (popUpElement: JSX.Element) => {},
|
||||
closePopUp: () => {}
|
||||
closePopUp: () => {},
|
||||
});
|
||||
|
||||
interface PopUpProviderProps {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,24 @@
|
|||
import { createContext, useEffect, useState, useRef } from "react";
|
||||
import { example } from "../data_assets/example";
|
||||
|
||||
type flow={name:string,id:string,data:any}
|
||||
type flow = {
|
||||
name: string;
|
||||
id: string;
|
||||
data: any;
|
||||
chat: Array<{ message: string; isSend: boolean }>;
|
||||
};
|
||||
|
||||
type TabsContextType = {
|
||||
tabIndex: number;
|
||||
setTabIndex: (index: number) => void;
|
||||
flows:Array<flow>
|
||||
flows: Array<flow>;
|
||||
removeFlow: (id: string) => void;
|
||||
addFlow: (flowData?: any) => void;
|
||||
updateFlow: (newFlow: flow) => void;
|
||||
incrementNodeId:()=>number,
|
||||
}
|
||||
incrementNodeId: () => number;
|
||||
downloadFlow: () => void;
|
||||
uploadFlow: () => void;
|
||||
};
|
||||
|
||||
const TabsContextInitialValue = {
|
||||
tabIndex: 0,
|
||||
|
|
@ -20,17 +28,19 @@ const TabsContextInitialValue = {
|
|||
addFlow: (flowData?: any) => {},
|
||||
updateFlow: (newFlow: flow) => {},
|
||||
incrementNodeId: () => 0,
|
||||
downloadFlow: () => {},
|
||||
uploadFlow: () => {},
|
||||
};
|
||||
|
||||
export const TabsContext = createContext<TabsContextType>(
|
||||
TabsContextInitialValue
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export const TabsContext = createContext<TabsContextType>(TabsContextInitialValue)
|
||||
|
||||
let _ = require('lodash');
|
||||
let _ = require("lodash");
|
||||
|
||||
export function TabsProvider({ children }) {
|
||||
const [tabIndex,setTabIndex] = useState(0)
|
||||
const [flows,setFlows] = useState<Array<flow>>([])
|
||||
const [tabIndex, setTabIndex] = useState(0);
|
||||
const [flows, setFlows] = useState<Array<flow>>([]);
|
||||
const [id, setId] = useState(0);
|
||||
|
||||
const newNodeId = useRef(0);
|
||||
|
|
@ -40,11 +50,14 @@ export function TabsProvider({children}){
|
|||
}
|
||||
useEffect(() => {
|
||||
if (flows.length !== 0)
|
||||
window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current}));
|
||||
window.localStorage.setItem(
|
||||
"tabsData",
|
||||
JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
|
||||
);
|
||||
}, [flows, id, tabIndex, newNodeId]);
|
||||
|
||||
useEffect(() => {
|
||||
let cookie = window.localStorage.getItem('tabsData');
|
||||
let cookie = window.localStorage.getItem("tabsData");
|
||||
if (cookie) {
|
||||
let cookieObject = JSON.parse(cookie);
|
||||
setTabIndex(cookieObject.tabIndex);
|
||||
|
|
@ -52,12 +65,37 @@ export function TabsProvider({children}){
|
|||
setId(cookieObject.id);
|
||||
newNodeId.current = cookieObject.nodeId;
|
||||
}
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
function downloadFlow() {
|
||||
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
|
||||
JSON.stringify(flows[tabIndex])
|
||||
)}`;
|
||||
const link = document.createElement("a");
|
||||
link.href = jsonString;
|
||||
link.download = `${flows[tabIndex].name}.json`;
|
||||
link.click();
|
||||
}
|
||||
|
||||
function uploadFlow() {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.onchange = (e: Event) => {
|
||||
if ((e.target as HTMLInputElement).files[0].type === "application/json") {
|
||||
const file = (e.target as HTMLInputElement).files[0];
|
||||
file.text().then((text) => {
|
||||
console.log(JSON.parse(text),"json from upload")
|
||||
addFlow(JSON.parse(text));
|
||||
});
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
|
||||
function removeFlow(id: string) {
|
||||
setFlows(prevState=>{
|
||||
setFlows((prevState) => {
|
||||
const newFlows = [...prevState];
|
||||
const index = newFlows.findIndex(flow=>flow.id===id);
|
||||
const index = newFlows.findIndex((flow) => flow.id === id);
|
||||
if (index >= 0) {
|
||||
if (index === tabIndex) {
|
||||
setTabIndex(flows.length - 2);
|
||||
|
|
@ -65,38 +103,56 @@ export function TabsProvider({children}){
|
|||
} else {
|
||||
let flowId = flows[tabIndex].id;
|
||||
newFlows.splice(index, 1);
|
||||
setTabIndex(newFlows.findIndex(flow=>flow.id === flowId));
|
||||
setTabIndex(newFlows.findIndex((flow) => flow.id === flowId));
|
||||
}
|
||||
|
||||
}
|
||||
return newFlows;
|
||||
});
|
||||
}
|
||||
function addFlow(flowData?:flow) {
|
||||
const data = flowData?flowData:null
|
||||
let newFlow: flow = {name: "flow"+id, id: id.toString(), data}
|
||||
function addFlow(flow?: flow) {
|
||||
const data = flow?.data ? flow.data : null;
|
||||
let newFlow: flow = {
|
||||
name: flow ? flow.name : "flow" + id,
|
||||
id: id.toString(),
|
||||
data,
|
||||
chat: flow ? flow.chat : [],
|
||||
};
|
||||
setId((old) => old + 1);
|
||||
setFlows(prevState => {
|
||||
setFlows((prevState) => {
|
||||
const newFlows = [...prevState, newFlow];
|
||||
return newFlows;
|
||||
});
|
||||
setTabIndex(flows.length);
|
||||
}
|
||||
function updateFlow(newFlow: flow) {
|
||||
setFlows(prevState=>{
|
||||
console.log(newFlow);
|
||||
setFlows((prevState) => {
|
||||
const newFlows = [...prevState];
|
||||
const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
|
||||
const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
|
||||
if (index !== -1) {
|
||||
newFlows[index].data = newFlow.data
|
||||
newFlows[index].name = newFlow.name
|
||||
newFlows[index].data = newFlow.data;
|
||||
newFlows[index].name = newFlow.name;
|
||||
newFlows[index].chat = newFlow.chat;
|
||||
}
|
||||
return newFlows;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}>
|
||||
<TabsContext.Provider
|
||||
value={{
|
||||
tabIndex,
|
||||
setTabIndex,
|
||||
flows,
|
||||
incrementNodeId,
|
||||
removeFlow,
|
||||
addFlow,
|
||||
updateFlow,
|
||||
downloadFlow,
|
||||
uploadFlow,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsContext.Provider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import { ReactEventHandler, createContext, useState } from "react";
|
||||
import { createContext, useState } from "react";
|
||||
import { ReactFlowInstance } from "reactflow";
|
||||
|
||||
type typesContextType=
|
||||
{
|
||||
//context to share types adn functions from nodes to flow
|
||||
type typesContextType = {
|
||||
reactFlowInstance: ReactFlowInstance;
|
||||
setReactFlowInstance: any;
|
||||
deleteNode: (idx: number) => void;
|
||||
types: {};
|
||||
setTypes: (newState: {}) => void;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const initialValue = {
|
||||
reactFlowInstance: null,
|
||||
|
|
@ -17,7 +16,7 @@ const initialValue= {
|
|||
deleteNode: () => {},
|
||||
types: {},
|
||||
setTypes: () => {},
|
||||
}
|
||||
};
|
||||
|
||||
export const typesContext = createContext<typesContextType>(initialValue);
|
||||
|
||||
|
|
@ -30,8 +29,16 @@ export function TypesProvider({children}){
|
|||
);
|
||||
}
|
||||
return (
|
||||
<typesContext.Provider value={{ types, setTypes, reactFlowInstance, setReactFlowInstance, deleteNode}}>
|
||||
<typesContext.Provider
|
||||
value={{
|
||||
types,
|
||||
setTypes,
|
||||
reactFlowInstance,
|
||||
setReactFlowInstance,
|
||||
deleteNode,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</typesContext.Provider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import {
|
|||
|
||||
export const sidebarNavigation = [
|
||||
{ name: 'Home', href: '/', icon: HomeIcon, current: true },
|
||||
{ name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
|
||||
//{ name: 'Train', href: '#', icon: BoltIcon, current: false },
|
||||
//{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
|
||||
//{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
|
||||
{ name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
|
||||
// { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false },
|
||||
// //{ name: 'Train', href: '#', icon: BoltIcon, current: false },
|
||||
// //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false },
|
||||
// //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false },
|
||||
// { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div className="mt-4 w-full">
|
||||
{Object.keys(data).map((d, i) => (
|
||||
<DisclosureComponent
|
||||
key={i}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
|
||||
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import { useContext, useRef, useState } from "react";
|
||||
import { TabsContext } from "../../../../contexts/tabsContext";
|
||||
|
|
@ -5,7 +6,8 @@ import { TabsContext } from "../../../../contexts/tabsContext";
|
|||
var _ = require("lodash");
|
||||
|
||||
export default function TabComponent({ selected, flow, onClick }) {
|
||||
const { removeFlow, updateFlow,flows } = useContext(TabsContext);
|
||||
const { removeFlow, updateFlow, flows, downloadFlow } =
|
||||
useContext(TabsContext);
|
||||
const [isRename, setIsRename] = useState(false);
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
|
|
@ -46,6 +48,7 @@ export default function TabComponent({ selected, flow, onClick }) {
|
|||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="text-left truncate"
|
||||
onDoubleClick={() => {
|
||||
|
|
@ -55,13 +58,20 @@ export default function TabComponent({ selected, flow, onClick }) {
|
|||
>
|
||||
{flow.name}
|
||||
</span>
|
||||
{/* <ArrowDownTrayIcon
|
||||
onClick={() => downloadFlow()}
|
||||
className="w-4 h-4 hover:text-blue-500 cursor-pointer"
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
removeFlow(flow.id);
|
||||
}}
|
||||
>
|
||||
{flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />}
|
||||
{flows.length > 1 && (
|
||||
<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import ReactFlow, {
|
|||
useNodesState,
|
||||
ReactFlowProvider,
|
||||
useReactFlow,
|
||||
ControlButton,
|
||||
} from "reactflow";
|
||||
import { locationContext } from "../../contexts/locationContext";
|
||||
import ExtraSidebar from "./components/extraSidebarComponent";
|
||||
|
|
@ -20,6 +21,10 @@ import BooleanNode from "../../CustomNodes/BooleanNode";
|
|||
import { alertContext } from "../../contexts/alertContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
ArrowUpTrayIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
const nodeTypes = {
|
||||
genericNode: GenericNode,
|
||||
|
|
@ -32,14 +37,15 @@ const nodeTypes = {
|
|||
var _ = require("lodash");
|
||||
|
||||
export default function FlowPage({ flow }) {
|
||||
let { updateFlow, incrementNodeId } = useContext(TabsContext);
|
||||
let { updateFlow, incrementNodeId, downloadFlow, uploadFlow } =
|
||||
useContext(TabsContext);
|
||||
const { types, reactFlowInstance, setReactFlowInstance } =
|
||||
useContext(typesContext);
|
||||
const reactFlowWrapper = useRef(null);
|
||||
|
||||
function getId() {
|
||||
return `dndnode_}`+incrementNodeId();
|
||||
};
|
||||
return `dndnode_` + incrementNodeId();
|
||||
}
|
||||
|
||||
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
|
||||
const { setErrorData } = useContext(alertContext);
|
||||
|
|
@ -50,7 +56,7 @@ export default function FlowPage({ flow }) {
|
|||
const [edges, setEdges, onEdgesChange] = useEdgesState(
|
||||
flow.data?.edges ?? []
|
||||
);
|
||||
const {setViewport} = useReactFlow()
|
||||
const { setViewport } = useReactFlow();
|
||||
|
||||
useEffect(() => {
|
||||
if (reactFlowInstance && flow) {
|
||||
|
|
@ -63,9 +69,7 @@ export default function FlowPage({ flow }) {
|
|||
setNodes(flow?.data?.nodes ?? []);
|
||||
setEdges(flow?.data?.edges ?? []);
|
||||
if (reactFlowInstance) {
|
||||
setViewport(
|
||||
flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 }
|
||||
);
|
||||
setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 });
|
||||
}
|
||||
}, [flow, reactFlowInstance, setEdges, setNodes]);
|
||||
|
||||
|
|
@ -171,9 +175,23 @@ export default function FlowPage({ flow }) {
|
|||
onDrop={onDrop}
|
||||
>
|
||||
<Background />
|
||||
<Controls></Controls>
|
||||
<Controls>
|
||||
<ControlButton
|
||||
className="text-black hover:text-blue-500"
|
||||
onClick={() => uploadFlow()}
|
||||
>
|
||||
<ArrowUpTrayIcon />
|
||||
</ControlButton>
|
||||
|
||||
<ControlButton
|
||||
className="text-black hover:text-blue-500"
|
||||
onClick={() => downloadFlow()}
|
||||
>
|
||||
<ArrowDownTrayIcon />
|
||||
</ControlButton>
|
||||
</Controls>
|
||||
</ReactFlow>
|
||||
<Chat reactFlowInstance={reactFlowInstance} />
|
||||
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
|
|
|
|||
1
space_flow/src/react-app-env.d.ts
vendored
1
space_flow/src/react-app-env.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -1 +0,0 @@
|
|||
import '@testing-library/jest-dom';
|
||||
Loading…
Add table
Add a link
Reference in a new issue