jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

download flow for each tab implemented, tabs bug not solved yet

Browse source
This commit is contained in:
anovazzi1 2023-02-26 15:39:58 -03:00
commit 48083791ce
2 changed files with 89 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

13
space_flow/src/contexts/tabsContext.tsx
View file

@ -10,6 +10,7 @@ type TabsContextType={
addFlow:(flowData?:any)=>void; addFlow:(flowData?:any)=>void;
updateFlow:(newFlow:flow)=>void; updateFlow:(newFlow:flow)=>void;
incrementNodeId:()=>number, incrementNodeId:()=>number,
downloadFlow:()=>void
} }
const TabsContextInitialValue = { const TabsContextInitialValue = {
@ -20,7 +21,7 @@ const TabsContextInitialValue = {
addFlow:(flowData?:any)=>{}, addFlow:(flowData?:any)=>{},
updateFlow:(newFlow:flow)=>{}, updateFlow:(newFlow:flow)=>{},
incrementNodeId:()=>0, incrementNodeId:()=>0,
downloadFlow:()=>{}
} }
@ -54,6 +55,14 @@ export function TabsProvider({children}){
} }
}, []) }, [])
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 removeFlow(id:string){ function removeFlow(id:string){
setFlows(prevState=>{ setFlows(prevState=>{
const newFlows = [...prevState]; const newFlows = [...prevState];
@ -97,7 +106,7 @@ export function TabsProvider({children}){
} }
return( return(
<TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow}}> <TabsContext.Provider value={{tabIndex,setTabIndex,flows,incrementNodeId, removeFlow,addFlow,updateFlow, downloadFlow}}>
{children} {children}
</TabsContext.Provider> </TabsContext.Provider>
) )

150
space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
View file

@ -1,3 +1,4 @@
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid"; import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
@ -5,76 +6,81 @@ import { TabsContext } from "../../../../contexts/tabsContext";
var _ = require("lodash"); var _ = require("lodash");
export default function TabComponent({ selected, flow, onClick }) { 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 [isRename, setIsRename] = useState(false);
const [value, setValue] = useState(""); const [value, setValue] = useState("");
return ( return (
<> <>
{flow ? ( {flow ? (
!selected ? ( !selected ? (
<div <div
className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px" className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
onClick={onClick} onClick={onClick}
> >
{flow.name} {flow.name}
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
removeFlow(flow.id); removeFlow(flow.id);
}} }}
> >
<XMarkIcon className="h-4 hover:bg-white rounded-full" /> <XMarkIcon className="h-4 hover:bg-white rounded-full" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px"> <div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
{isRename ? ( {isRename ? (
<input <input
autoFocus autoFocus
className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28" className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md w-28"
onBlur={() => { onBlur={() => {
setIsRename(false); setIsRename(false);
if (value !== "") { if (value !== "") {
let newFlow = _.cloneDeep(flow); let newFlow = _.cloneDeep(flow);
newFlow.name = value; newFlow.name = value;
updateFlow(newFlow); updateFlow(newFlow);
} }
}} }}
value={value} value={value}
onChange={(e) => { onChange={(e) => {
setValue(e.target.value); setValue(e.target.value);
}} }}
/> />
) : ( ) : (
<span <div className="flex items-center gap-2">
className="text-left truncate" <span
onDoubleClick={() => { className="text-left truncate"
setIsRename(true); onDoubleClick={() => {
setValue(flow.name); setIsRename(true);
}} setValue(flow.name);
> }}
{flow.name} >
</span> {flow.name}
)} </span>
<button <ArrowDownTrayIcon onClick={()=>downloadFlow()} className="w-4 h-4 hover:text-blue-500 cursor-pointer"/>
onClick={() => { </div>
removeFlow(flow.id); )}
}} <button
> onClick={() => {
{flows.length>1&& <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />} removeFlow(flow.id);
</button> }}
</div> >
) {flows.length > 1 && (
) : ( <XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
<div className="h-full py-1.5 flex justify-center items-center"> )}
<button </button>
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent" </div>
onClick={onClick} )
> ) : (
<PlusIcon className="h-5 rounded-full hover:bg-white" /> <div className="h-full py-1.5 flex justify-center items-center">
</button> <button
</div> className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
)} onClick={onClick}
</> >
); <PlusIcon className="h-5 rounded-full hover:bg-white" />
</button>
</div>
)}
</>
);
} }