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

adding variables table for edit and css table

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-05 23:02:08 -03:00
commit 2a22943d90
2 changed files with 39 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/src/components/toggleShadComponent/index.tsx
View file

@ -16,6 +16,9 @@ export default function ToggleShadComponent({
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<Switch <Switch
style={{
transform: 'scaleX(0.6) scaleY(0.6)',
}}
checked={enabled} checked={enabled}
onCheckedChange={(x: boolean) => { onCheckedChange={(x: boolean) => {
setEnabled(x); setEnabled(x);

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

@ -21,11 +21,13 @@ import {
} from "../../components/ui/table"; } from "../../components/ui/table";
import { Switch } from "../../components/ui/switch"; import { Switch } from "../../components/ui/switch";
import ToggleShadComponent from "../../components/toggleShadComponent"; import ToggleShadComponent from "../../components/toggleShadComponent";
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 [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();
@ -46,8 +48,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
return true; return true;
}); });
setNodeValue(!nodeValue)
} }
console.log(data.node.template);
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Transition.Root show={open} appear={true} as={Fragment}>
<Dialog <Dialog
@ -109,8 +115,15 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center"> <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 pt-0 gap-4 justify-center items-center">
<div className="flex w-full h-full max-h-[445px]"> <div className="py-3 flex items-center">
<VariableIcon className="w-5 h-5 pe-1 text-orange-500 stroke-2">&nbsp;</VariableIcon>
<span className="text-sm font-semibold text-gray-800">Variables</span>
</div>
<div className="flex w-full 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",
@ -127,22 +140,22 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
data.node.template[t].type === "Any" || data.node.template[t].type === "Any" ||
data.node.template[t].type === "int") data.node.template[t].type === "int")
).length > limitScrollFieldsModal ).length > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll h-fit" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden h-fit" : "overflow-hidden"
)} )}
> >
<div className="flex flex-col h-full gap-5 h-fit "> <div className="flex flex-col gap-5 h-fit">
<Table> <Table>
<TableHeader> <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
<TableRow> <TableRow>
<TableHead className="w-[80px]"> <TableHead className="h-7 text-center">
Param PARAM
</TableHead> </TableHead>
<TableHead>Value</TableHead> <TableHead className="p-0 h-7 text-center">VALUE</TableHead>
<TableHead>Show</TableHead> <TableHead className="text-center h-7">SHOW</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody className="p-0">
{ Object.keys(data.node.template).filter( { Object.keys(data.node.template).filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
@ -157,22 +170,24 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
data.node.template[t].type === "int") data.node.template[t].type === "int")
) )
.map((n, i) => ( .map((n, i) => (
<TableRow key={i}> <TableRow key={i} className="h-8">
<TableCell className="font-medium"> <TableCell className="p-0 text-center text-gray-900 text-xs">
{data.node.template[n].name {data.node.template[n].display_name
? data.node.template[n].name ? data.node.template[n].display_name
: data.node.template[n].display_name} : data.node.template[n].name}
</TableCell> </TableCell>
<TableCell> <TableCell className="p-0 text-center text-gray-900 text-xs max-w-[140px]"
>
{data.node.template[n].value {data.node.template[n].value
? data.node.template[n].value ? data.node.template[n].value
: "-"} : "-"}
</TableCell> </TableCell>
<TableCell> <TableCell className="p-0 text-right">
<div className="flex items-center space-x-2"> <div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={data.node.template[n].advanced} enabled={!data.node.template[n].advanced}
setEnabled={(e) => changeAdvanced(data.node.template[n])} setEnabled={(e) => changeAdvanced(data.node.template[n])}
disabled={false} /> disabled={false} />
</div> </div>