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

Adjust on changing components on edit mode

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-14 21:19:27 -03:00
commit 1a9ed4d94b
9 changed files with 77 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -39,6 +39,7 @@ export default function ParameterComponent({
}: ParameterComponentType) {
const ref = useRef(null);
const refHtml = useRef(null);
const refData = useRef(null);
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
const { closePopUp } = useContext(PopUpContext);
@ -59,57 +60,57 @@ export default function ParameterComponent({
);
useEffect(() => {
}, [closePopUp, data.node.template]);
const { reactFlowInstance } = useContext(typesContext);
let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
const [myData, setMyData] = useState(useContext(typesContext).data);
useEffect(() => {
const groupedObj = groupByFamily(myData, tooltipTitle);
refHtml.current = groupedObj.map((item, i) => (
<span
key={i}
className={classNames(
i > 0 ? "items-center flex mt-3" : "items-center flex"
)}
>
<div
className="h-5 w-5"
style={{
color: nodeColors[item.family],
}}
const groupedObj = groupByFamily(myData, tooltipTitle);
refHtml.current = groupedObj.map((item, i) => (
<span
key={i}
className={classNames(
i > 0 ? "items-center flex mt-3" : "items-center flex"
)}
>
{React.createElement(nodeIcons[item.family])}
</div>
<span className="ps-2 text-gray-950">
{nodeNames[item.family] ?? ""}{" "}
<span className={classNames(left ? "hidden" : "")}>
{" "}
-&nbsp;
{item.type.split(", ").length > 2
? item.type.split(", ").map((el, i) => (
<>
<span key={i}>
{i == item.type.split(", ").length - 1
? el
: (el += `, `)}
</span>
{i % 2 == 0 && i > 0 && <br></br>}
</>
))
: item.type}
<div
className="h-5 w-5"
style={{
color: nodeColors[item.family],
}}
>
{React.createElement(nodeIcons[item.family])}
</div>
<span className="ps-2 text-gray-950">
{nodeNames[item.family] ?? ""}{" "}
<span className={classNames(left ? "hidden" : "")}>
{" "}
-&nbsp;
{item.type.split(", ").length > 2
? item.type.split(", ").map((el, i) => (
<>
<span key={i}>
{i == item.type.split(", ").length - 1
? el
: (el += `, `)}
</span>
{i % 2 == 0 && i > 0 && <br></br>}
</>
))
: item.type}
</span>
</span>
</span>
</span>
));
));
}, [tooltipTitle]);
return (
<div
<>
<div
ref={ref}
className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
>
@ -234,6 +235,7 @@ export default function ParameterComponent({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
/>
) : left === true && type === "file" ? (
@ -276,5 +278,7 @@ export default function ParameterComponent({
)}
</>
</div>
</>
);
}

8
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -59,11 +59,6 @@ export default function GenericNode({
}
}, []);
useEffect(() => {
console.log(data.node.template);
}, [closePopUp, data.node.template]);
const validateNode = useCallback(
debounce(async () => {
try {
@ -106,6 +101,9 @@ export default function GenericNode({
return;
}
useEffect(() => {
}, [closePopUp, data.node.template]);
return (
<>
<NodeToolbar>

5
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -20,6 +20,11 @@ export default function CodeAreaComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={

5
src/frontend/src/components/floatComponent/index.tsx
View file

@ -23,6 +23,11 @@ export default function FloatComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={

23
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -24,6 +24,7 @@ import { alertContext } from "../../../../contexts/alertContext";
import { Link } from "react-router-dom";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import { Button } from "../../../ui/button";
export const MenuBar = ({ flows, tabId }) => {
const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@ -46,23 +47,17 @@ export const MenuBar = ({ flows, tabId }) => {
<Link to="/">
<ChevronLeft className="w-5" />
</Link>
<div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 bg-background gap-0.5">
{/* <RenameLabel
value={current_flow.name}
setValue={(value) => {
if (value !== "") {
let newFlow = _.cloneDeep(current_flow);
newFlow.name = value;
updateFlow(newFlow);
}
}}
rename={rename}
setRename={setRename}
/> */}
<div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
<DropdownMenu>
<DropdownMenuTrigger className="px-1 gap-2 flex items-center">
<DropdownMenuTrigger >
<Button
className="gap-2 flex items-center"
variant="primary"
>
{current_flow.name}
<ChevronDown className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-44">
<DropdownMenuLabel>Edit</DropdownMenuLabel>

5
src/frontend/src/components/intComponent/index.tsx
View file

@ -21,6 +21,11 @@ export default function IntComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={

7
src/frontend/src/components/promptComponent/index.tsx
View file

@ -1,8 +1,6 @@
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal";
import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal";
import { TypeModal } from "../../utils";
@ -22,6 +20,11 @@ export default function PromptAreaComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={

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

@ -76,7 +76,7 @@ export default function ExtraSidebar() {
}
return (
<div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r">
<div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r w-[200px]">
<div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
<ShadTooltip delayDuration={1000} content="Import" side="top">
<button
@ -127,7 +127,7 @@ export default function ExtraSidebar() {
</ShadTooltip>
</div>
<Separator />
<div className="relative mt-2 flex items-center mb-2 mx-2">
<div className="relative mt-2 flex items-center mb-2 mx-auto">
<input
type="text"
name="search"

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

@ -6,6 +6,7 @@ import {
SVGProps,
} from "react";
import { NodeDataType } from "../flow/index";
import { typesContextType } from "../typesContext";
export type InputComponentType = {
value: string;
disabled?: boolean;
@ -38,6 +39,7 @@ export type ParameterComponentType = {
required?: boolean;
name?: string;
tooltipTitle: string;
dataContext?: typesContextType;
};
export type InputListComponentType = {
value: string[];