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

Optimized nodeToolbar and EditNodeModal

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-15 23:49:12 -03:00
commit 31588c4e42
2 changed files with 26 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,6 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "../../components/ui/table"; } from "../../components/ui/table";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
@ -42,22 +41,15 @@ const EditNodeModal = forwardRef(
) => { ) => {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [nodeValue, setNodeValue] = useState(null); const [nodeValue, setNodeValue] = useState(null);
const { types } = useContext(typesContext);
const { setTabsState, tabId } = useContext(TabsContext); const { setTabsState, tabId } = useContext(TabsContext);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const { closePopUp } = useContext(PopUpContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
false; false;
function changeAdvanced(node) { function changeAdvanced(n) {
Object.keys(data.node.template).map((n, i) => {
if (n === node.name) {
data.node.template[n].advanced = !data.node.template[n].advanced; data.node.template[n].advanced = !data.node.template[n].advanced;
}
return n;
});
setNodeValue(!nodeValue); setNodeValue(!nodeValue);
} }
@ -75,15 +67,8 @@ const EditNodeModal = forwardRef(
}); });
}; };
const setOpen = (x: boolean) => {
if (!x) {
closePopUp();
}
if (nodeLength > 0) setModalOpen(x);
};
return ( return (
<BaseModal size="large-h-full" open={modalOpen} setOpen={setOpen}> <BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger> <BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header description={data.node?.description}> <BaseModal.Header description={data.node?.description}>
<span className="pr-2">{data.type}</span> <span className="pr-2">{data.type}</span>
@ -279,9 +264,7 @@ const EditNodeModal = forwardRef(
<div className="items-center text-center"> <div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={!data.node.template[n].advanced} enabled={!data.node.template[n].advanced}
setEnabled={(e) => setEnabled={(e) => changeAdvanced(n)}
changeAdvanced(data.node.template[n])
}
disabled={disabled} disabled={disabled}
size="small" size="small"
/> />

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

@ -6,24 +6,24 @@ import { TabsContext } from "../../../../contexts/tabsContext";
import EditNodeModal from "../../../../modals/EditNodeModal"; import EditNodeModal from "../../../../modals/EditNodeModal";
import { classNames } from "../../../../utils"; import { classNames } from "../../../../utils";
const NodeToolbarComponent = (props) => { export default function NodeToolbarComponent({ data, deleteNode }) {
const [nodeLength, setNodeLength] = useState( const [nodeLength, setNodeLength] = useState(
Object.keys(props.data.node.template).filter( Object.keys(data.node.template).filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
props.data.node.template[t].show && data.node.template[t].show &&
(props.data.node.template[t].type === "str" || (data.node.template[t].type === "str" ||
props.data.node.template[t].type === "bool" || data.node.template[t].type === "bool" ||
props.data.node.template[t].type === "float" || data.node.template[t].type === "float" ||
props.data.node.template[t].type === "code" || data.node.template[t].type === "code" ||
props.data.node.template[t].type === "prompt" || data.node.template[t].type === "prompt" ||
props.data.node.template[t].type === "file" || data.node.template[t].type === "file" ||
props.data.node.template[t].type === "Any" || data.node.template[t].type === "Any" ||
props.data.node.template[t].type === "int") data.node.template[t].type === "int")
).length ).length
); );
const { setLastCopiedSelection, paste } = useContext(TabsContext); const { paste } = useContext(TabsContext);
const reactFlowInstance = useReactFlow(); const reactFlowInstance = useReactFlow();
return ( return (
<> <>
@ -33,7 +33,7 @@ const NodeToolbarComponent = (props) => {
<button <button
className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
onClick={() => { onClick={() => {
props.deleteNode(props.data.id); deleteNode(data.id);
}} }}
> >
<Trash2 className="h-4 w-4"></Trash2> <Trash2 className="h-4 w-4"></Trash2>
@ -49,14 +49,14 @@ const NodeToolbarComponent = (props) => {
event.preventDefault(); event.preventDefault();
paste( paste(
{ {
nodes: [reactFlowInstance.getNode(props.data.id)], nodes: [reactFlowInstance.getNode(data.id)],
edges: [], edges: [],
}, },
{ {
x: 50, x: 50,
y: 10, y: 10,
paneX: reactFlowInstance.getNode(props.data.id).position.x, paneX: reactFlowInstance.getNode(data.id).position.x,
paneY: reactFlowInstance.getNode(props.data.id).position.y, paneY: reactFlowInstance.getNode(data.id).position.y,
} }
); );
}} }}
@ -67,25 +67,23 @@ const NodeToolbarComponent = (props) => {
<ShadTooltip <ShadTooltip
content={ content={
props.data.node.documentation === "" data.node.documentation === "" ? "Coming Soon" : "Documentation"
? "Coming Soon"
: "Documentation"
} }
side="top" side="top"
> >
<a <a
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(props.data.node.documentation === "" (data.node.documentation === ""
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground")
)} )}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href={props.data.node.documentation} href={data.node.documentation}
// deactivate link if no documentation is provided // deactivate link if no documentation is provided
onClick={(event) => { onClick={(event) => {
if (props.data.node.documentation === "") { if (data.node.documentation === "") {
event.preventDefault(); event.preventDefault();
} }
}} }}
@ -95,7 +93,7 @@ const NodeToolbarComponent = (props) => {
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Edit" side="top"> <ShadTooltip content="Edit" side="top">
<EditNodeModal data={props.data} nodeLength={nodeLength}> <EditNodeModal data={data} nodeLength={nodeLength}>
<div <div
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
@ -112,6 +110,4 @@ const NodeToolbarComponent = (props) => {
</div> </div>
</> </>
); );
}; }
export default NodeToolbarComponent;