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

adding validator when there are no options

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-06 18:11:38 -03:00
commit de37410e54
2 changed files with 71 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -27,11 +27,30 @@ import { VariableIcon } from "@heroicons/react/24/outline";
export default function EditNodeModal({ data }: { data: NodeDataType }) { export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [nodeLength, setNodeLength] = useState(
Object.keys(data.node.template).filter(
(t) =>
t.charAt(0) !== "_" &&
data.node.template[t].show &&
(data.node.template[t].type === "str" ||
data.node.template[t].type === "bool" ||
data.node.template[t].type === "float" ||
data.node.template[t].type === "code" ||
data.node.template[t].type === "prompt" ||
data.node.template[t].type === "file" ||
data.node.template[t].type === "Any" ||
data.node.template[t].type === "int")
).length
);
const [nodeValue, setNodeValue] = useState(true); const [nodeValue, setNodeValue] = useState(true);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const { types } = useContext(typesContext); const { types } = useContext(typesContext);
const ref = useRef(); const ref = useRef();
if(nodeLength == 0){
closePopUp();
}
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
@ -85,7 +104,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]"> <Dialog.Panel className="relative flex flex-col justify-between transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
<button <button
type="button" type="button"
@ -122,29 +141,19 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</div> </div>
<div className="flex w-full h-[415px]"> <div className="flex w-full h-fit max-h-[415px]">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg bg-white dark:bg-gray-800 shadow", "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
Object.keys(data.node.template).filter( nodeLength > limitScrollFieldsModal
(t) =>
t.charAt(0) !== "_" &&
data.node.template[t].show &&
(data.node.template[t].type === "str" ||
data.node.template[t].type === "bool" ||
data.node.template[t].type === "float" ||
data.node.template[t].type === "code" ||
data.node.template[t].type === "prompt" ||
data.node.template[t].type === "file" ||
data.node.template[t].type === "Any" ||
data.node.template[t].type === "int")
).length > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
<div className="flex flex-col gap-5 h-fit"> {
nodeLength > 0 &&
<div className="flex flex-col gap-5 h-fit">
<Table> <Table>
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium"> <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
<TableRow> <TableRow>
@ -172,11 +181,11 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
.map((n, i) => ( .map((n, i) => (
<TableRow key={i} className="h-8"> <TableRow key={i} className="h-8">
<TableCell className="p-0 text-center text-gray-900 text-xs"> <TableCell className="p-0 text-center text-gray-900 text-xs">
{data.node.template[n].display_name {data.node.template[n].name
? data.node.template[n].display_name ? data.node.template[n].name
: data.node.template[n].name} : data.node.template[n].display_name}
</TableCell> </TableCell>
<TableCell className="p-0 text-center text-gray-900 text-xs max-w-[140px]" <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]"
> >
{data.node.template[n].value {data.node.template[n].value
@ -196,7 +205,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>}
</div> </div>
</div> </div>
</div> </div>

59
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext } from "react"; import React, { useContext, useState } from "react";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
import { EllipsisVerticalIcon } from "@heroicons/react/20/solid"; import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
import { import {
@ -18,6 +18,23 @@ import EditNodeModal from "../../../../modals/EditNodeModal";
import TooltipReact from "../../../../components/ReactTooltipComponent"; import TooltipReact from "../../../../components/ReactTooltipComponent";
const NodeToolbarComponent = (props) => { const NodeToolbarComponent = (props) => {
const [nodeLength, setNodeLength] = useState(
Object.keys(props.data.node.template).filter(
(t) =>
t.charAt(0) !== "_" &&
props.data.node.template[t].show &&
(props.data.node.template[t].type === "str" ||
props.data.node.template[t].type === "bool" ||
props.data.node.template[t].type === "float" ||
props.data.node.template[t].type === "code" ||
props.data.node.template[t].type === "prompt" ||
props.data.node.template[t].type === "file" ||
props.data.node.template[t].type === "Any" ||
props.data.node.template[t].type === "int")
).length
);
const { setLastCopiedSelection, paste } = useContext(TabsContext); const { setLastCopiedSelection, paste } = useContext(TabsContext);
const reactFlowInstance = useReactFlow(); const reactFlowInstance = useReactFlow();
return ( return (
@ -92,7 +109,12 @@ const NodeToolbarComponent = (props) => {
position="top" position="top"
> >
<button <button
className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" className={
classNames(
nodeLength > 0 ?
"hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" :
"hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
)}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
console.log(reactFlowInstance.getNode(props.data.id)); console.log(reactFlowInstance.getNode(props.data.id));
@ -114,22 +136,23 @@ const NodeToolbarComponent = (props) => {
</button> </button>
</TooltipReact> </TooltipReact>
<TooltipReact {nodeLength > 0 && <TooltipReact
delayShow={1000} delayShow={1000}
selector="Edit" selector="Edit"
htmlContent="Edit" htmlContent="Edit"
position="top" position="top"
> >
<button <button
className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md" className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
props.openPopUp(<EditNodeModal data={props.data} />); props.openPopUp(<EditNodeModal data={props.data} />);
}} }}
> >
<PencilSquareIcon className="w-5 h-5 dark:text-gray-300"></PencilSquareIcon> <PencilSquareIcon className="w-5 h-5 dark:text-gray-300"></PencilSquareIcon>
</button> </button>
</TooltipReact> </TooltipReact>}
{/* {/*
<Menu as="div" className="relative inline-block text-left z-100"> <Menu as="div" className="relative inline-block text-left z-100">