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

Merge remote-tracking branch 'origin/dev' into bugfix-msgSuccess

Browse source
This commit is contained in:
anovazzi1 2023-08-24 17:41:26 -03:00
commit 6dbc06dc12
9 changed files with 94 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -32,13 +32,6 @@ export default function AccordionComponent({
value === "" ? setValue(keyValue!) : setValue(""); value === "" ? setValue(keyValue!) : setValue("");
} }
const handleKeyDown = (event) => {
if (event.key === "Backspace") {
event.preventDefault();
event.stopPropagation();
}
};
return ( return (
<> <>
<Accordion <Accordion
@ -46,7 +39,6 @@ export default function AccordionComponent({
className="w-full" className="w-full"
value={value} value={value}
onValueChange={setValue} onValueChange={setValue}
onKeyDown={handleKeyDown}
> >
<AccordionItem value={keyValue!} className="border-b"> <AccordionItem value={keyValue!} className="border-b">
<AccordionTrigger <AccordionTrigger

5
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -60,6 +60,11 @@ export default function BuildTrigger({
], ],
}); });
} }
if (errors.length === 0 && allNodesValid) {
setSuccessData({
title: "Flow is ready to run",
});
}
} catch (error) { } catch (error) {
console.error("Error:", error); console.error("Error:", error);
} finally { } finally {

127
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -28,8 +28,11 @@ import {
TabsList, TabsList,
TabsTrigger, TabsTrigger,
} from "../../components/ui/tabs"; } from "../../components/ui/tabs";
import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
import { typesContext } from "../../contexts/typesContext";
import { codeTabsPropsType } from "../../types/components"; import { codeTabsPropsType } from "../../types/components";
import { unselectAllNodes } from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
@ -45,6 +48,8 @@ export default function CodeTabsComponent({
const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null); const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
const [openAccordion, setOpenAccordion] = useState<string[]>([]); const [openAccordion, setOpenAccordion] = useState<string[]>([]);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { reactFlowInstance } = useContext(typesContext);
const { isTweakPage, setIsTweakPage } = useContext(alertContext);
useEffect(() => { useEffect(() => {
if (flow && flow["data"]!["nodes"]) { if (flow && flow["data"]!["nodes"]) {
@ -52,6 +57,19 @@ export default function CodeTabsComponent({
} }
}, [flow]); }, [flow]);
useEffect(() => {
unselectAllNodes({
data,
updateNodes: (nodes) => {
reactFlowInstance?.setNodes(nodes);
},
});
return () => {
if (isTweakPage) setIsTweakPage(false);
};
}, []);
const copyToClipboard = () => { const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) { if (!navigator.clipboard || !navigator.clipboard.writeText) {
return; return;
@ -159,13 +177,13 @@ export default function CodeTabsComponent({
)} )}
</div> </div>
{tabs.map((tab, index) => ( {tabs.map((tab, idx) => (
<TabsContent <TabsContent
value={index.toString()} value={idx.toString()}
className="api-modal-tabs-content" className="api-modal-tabs-content"
key={index} // Remember to add a unique key prop key={idx} // Remember to add a unique key prop
> >
{index < 4 ? ( {idx < 4 ? (
<> <>
{tab.description && ( {tab.description && (
<div <div
@ -181,7 +199,7 @@ export default function CodeTabsComponent({
{tab.code} {tab.code}
</SyntaxHighlighter> </SyntaxHighlighter>
</> </>
) : index === 4 ? ( ) : idx === 4 ? (
<> <>
<div className="api-modal-according-display"> <div className="api-modal-according-display">
<div <div
@ -192,8 +210,8 @@ export default function CodeTabsComponent({
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
{data?.map((node: any, index) => ( {data?.map((node: any, i) => (
<div className="px-3" key={index}> <div className="px-3" key={i}>
{tweaks?.tweaksList!.current.includes( {tweaks?.tweaksList!.current.includes(
node["data"]["id"] node["data"]["id"]
) && ( ) && (
@ -236,10 +254,10 @@ export default function CodeTabsComponent({
node.data.node.template[templateField] node.data.node.template[templateField]
.type === "int") .type === "int")
) )
.map((templateField, index) => { .map((templateField, indx) => {
return ( return (
<TableRow <TableRow
key={index} key={indx}
className="h-10 dark:border-b-muted" className="h-10 dark:border-b-muted"
> >
<TableCell className="p-0 text-center text-sm text-foreground"> <TableCell className="p-0 text-center text-sm text-foreground">
@ -277,13 +295,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;
@ -330,13 +344,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;
@ -379,13 +389,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;
@ -416,13 +422,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = e; ].value = e;
return newInputList; return newInputList;
@ -511,13 +513,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;
@ -551,13 +549,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;
@ -607,14 +601,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList![
newInputList!.find( i
(obj) => ].data.node.template[
obj.data.node
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;
@ -667,13 +656,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;
@ -726,13 +711,9 @@ export default function CodeTabsComponent({
setData((old) => { setData((old) => {
let newInputList = let newInputList =
cloneDeep(old); cloneDeep(old);
newInputList!.find( newInputList![
(obj) => i
obj.data.node ].data.node.template[
.template[
templateField
]
)!.data.node.template[
templateField templateField
].value = target; ].value = target;
return newInputList; return newInputList;

5
src/frontend/src/contexts/alertContext.tsx
View file

@ -26,6 +26,8 @@ const initialValue: alertContextType = {
pushNotificationList: () => {}, pushNotificationList: () => {},
clearNotificationList: () => {}, clearNotificationList: () => {},
removeFromNotificationList: () => {}, removeFromNotificationList: () => {},
isTweakPage: false,
setIsTweakPage: () => {},
}; };
export const alertContext = createContext<alertContextType>(initialValue); export const alertContext = createContext<alertContextType>(initialValue);
@ -48,6 +50,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
const [successOpen, setSuccessOpen] = useState(false); const [successOpen, setSuccessOpen] = useState(false);
const [notificationCenter, setNotificationCenter] = useState(false); const [notificationCenter, setNotificationCenter] = useState(false);
const [notificationList, setNotificationList] = useState<AlertItemType[]>([]); const [notificationList, setNotificationList] = useState<AlertItemType[]>([]);
const [isTweakPage, setIsTweakPage] = useState<boolean>(false);
const pushNotificationList = (notification: AlertItemType) => { const pushNotificationList = (notification: AlertItemType) => {
setNotificationList((old) => { setNotificationList((old) => {
let newNotificationList = _.cloneDeep(old); let newNotificationList = _.cloneDeep(old);
@ -120,6 +123,8 @@ export function AlertProvider({ children }: { children: ReactNode }) {
return ( return (
<alertContext.Provider <alertContext.Provider
value={{ value={{
isTweakPage,
setIsTweakPage,
removeFromNotificationList, removeFromNotificationList,
clearNotificationList, clearNotificationList,
notificationList, notificationList,

5
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -28,7 +28,8 @@ export default function CodeAreaModal({
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const [height, setHeight] = useState<string | null>(null); const [height, setHeight] = useState<string | null>(null);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData, isTweakPage } =
useContext(alertContext);
const [error, setError] = useState<{ const [error, setError] = useState<{
detail: { error: string | undefined; traceback: string | undefined }; detail: { error: string | undefined; traceback: string | undefined };
} | null>(null); } | null>(null);
@ -39,7 +40,7 @@ export default function CodeAreaModal({
if (dynamic && Object.keys(nodeClass!.template).length > 2) { if (dynamic && Object.keys(nodeClass!.template).length > 2) {
return; return;
} }
processCode(); if (!isTweakPage) processCode();
}, []); }, []);
function processNonDynamicField() { function processNonDynamicField() {

8
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -21,7 +21,8 @@ export default function ExtraSidebar(): JSX.Element {
const { data, templates } = useContext(typesContext); const { data, templates } = useContext(typesContext);
const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } = const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
useContext(TabsContext); useContext(TabsContext);
const { setErrorData } = useContext(alertContext); const { setSuccessData, setErrorData, setIsTweakPage } =
useContext(alertContext);
const [dataFilter, setFilterData] = useState(data); const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const isPending = tabsState[tabId]?.isPending; const isPending = tabsState[tabId]?.isPending;
@ -100,7 +101,10 @@ export default function ExtraSidebar(): JSX.Element {
<div className="side-bar-button"> <div className="side-bar-button">
{flow && flow.data && ( {flow && flow.data && (
<ApiModal flow={flow} disable={!isBuilt}> <ApiModal flow={flow} disable={!isBuilt}>
<div className={classNames("extra-side-bar-buttons")}> <div
className={classNames("extra-side-bar-buttons")}
onClick={() => setIsTweakPage(true)}
>
<IconComponent <IconComponent
name="Code2" name="Code2"
className={ className={

2
src/frontend/src/types/typesContext/index.ts
View file

@ -41,6 +41,8 @@ export type alertContextType = {
removeFromNotificationList: (index: string) => void; removeFromNotificationList: (index: string) => void;
loading: boolean; loading: boolean;
setLoading: (newState: boolean) => void; setLoading: (newState: boolean) => void;
isTweakPage: boolean;
setIsTweakPage: (newState: boolean) => void;
}; };
export type darkContextType = { export type darkContextType = {

7
src/frontend/src/types/utils/reactflowUtils.ts
View file

@ -1,4 +1,4 @@
import { Edge } from "reactflow"; import { Edge, Node } from "reactflow";
import { NodeType } from "../flow"; import { NodeType } from "../flow";
export type cleanEdgesType = { export type cleanEdgesType = {
@ -8,3 +8,8 @@ export type cleanEdgesType = {
}; };
updateEdge: (edge: Edge[]) => void; updateEdge: (edge: Edge[]) => void;
}; };
export type unselectAllNodesType = {
updateNodes: (nodes: Node[]) => void;
data: Node[] | null;
};

15
src/frontend/src/utils/reactflowUtils.ts
View file

@ -2,13 +2,17 @@ import _ from "lodash";
import { import {
Connection, Connection,
Edge, Edge,
Node,
ReactFlowInstance, ReactFlowInstance,
ReactFlowJsonObject, ReactFlowJsonObject,
} from "reactflow"; } from "reactflow";
import { specialCharsRegex } from "../constants/constants"; import { specialCharsRegex } from "../constants/constants";
import { APITemplateType } from "../types/api"; import { APITemplateType } from "../types/api";
import { FlowType, NodeType } from "../types/flow"; import { FlowType, NodeType } from "../types/flow";
import { cleanEdgesType } from "../types/utils/reactflowUtils"; import {
cleanEdgesType,
unselectAllNodesType,
} from "../types/utils/reactflowUtils";
import { toNormalCase } from "./utils"; import { toNormalCase } from "./utils";
export function cleanEdges({ export function cleanEdges({
@ -55,6 +59,14 @@ export function cleanEdges({
updateEdge(newEdges); updateEdge(newEdges);
} }
export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) {
let newNodes = _.cloneDeep(data);
newNodes!.forEach((node: Node) => {
node.selected = false;
});
updateNodes(newNodes!);
}
export function isValidConnection( export function isValidConnection(
{ source, target, sourceHandle, targetHandle }: Connection, { source, target, sourceHandle, targetHandle }: Connection,
reactFlowInstance: ReactFlowInstance reactFlowInstance: ReactFlowInstance
@ -247,7 +259,6 @@ export function handleKeyDown(
inputValue: string | string[] | null, inputValue: string | string[] | null,
block: string block: string
) { ) {
console.log(e, inputValue, block);
//condition to fix bug control+backspace on Windows/Linux //condition to fix bug control+backspace on Windows/Linux
if ( if (
(typeof inputValue === "string" && (typeof inputValue === "string" &&