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

Add RefreshButton component to parameterComponent

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-04 09:55:48 -03:00
commit 40ee964859
2 changed files with 50 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent"; import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { Button } from "../../../../components/ui/button"; import { Button } from "../../../../components/ui/button";
import { RefreshButton } from "../../../../components/ui/refreshButton";
import { import {
INPUT_HANDLER_HOVER, INPUT_HANDLER_HOVER,
LANGFLOW_SUPPORTED_TYPES, LANGFLOW_SUPPORTED_TYPES,
@ -68,6 +69,7 @@ export default function ParameterComponent({
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
const [isLoading, setIsLoading] = useState(false);
const flow = currentFlow?.data?.nodes ?? null; const flow = currentFlow?.data?.nodes ?? null;
@ -420,14 +422,11 @@ export default function ParameterComponent({
/> />
</div> </div>
{data.node?.template[name].refresh && ( {data.node?.template[name].refresh && (
<button <RefreshButton
className="extra-side-bar-buttons ml-2 mt-1 w-1/6" name={name}
onClick={() => { data={data}
handleUpdateValues(name, data); handleUpdateValues={handleUpdateValues}
}} />
>
<IconComponent name="RefreshCcw" />
</button>
)} )}
</div> </div>
)} )}
@ -466,14 +465,11 @@ export default function ParameterComponent({
/> />
</div> </div>
{data.node?.template[name].refresh && ( {data.node?.template[name].refresh && (
<button <RefreshButton
className="extra-side-bar-buttons ml-2 mt-1 w-1/6" name={name}
onClick={() => { data={data}
handleUpdateValues(name, data); handleUpdateValues={handleUpdateValues}
}} />
>
<IconComponent name="RefreshCcw" />
</button>
)} )}
</div> </div>
) : left === true && type === "code" ? ( ) : left === true && type === "code" ? (

38
src/frontend/src/components/ui/refreshButton.tsx Normal file
View file

@ -0,0 +1,38 @@
import { useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import { NodeDataType } from "../../types/flow";
import { cn } from "../../utils/utils";
function RefreshButton({
name,
data,
handleUpdateValues,
}: {
name: string;
data: NodeDataType;
handleUpdateValues: (name: string, data: NodeDataType) => void;
}) {
const [isLoading, setIsLoading] = useState(false);
const handleClick = () => {
setIsLoading(true);
console.log("refreshing");
handleUpdateValues(name, data);
setInterval(() => {
setIsLoading(false);
}, 500);
};
return (
<button
className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
onClick={handleClick}
>
<IconComponent
name={isLoading ? "Loader2" : "RefreshCcw"}
className={cn("h-4 w-4", isLoading ? "animate-spin" : "animate-wiggle")}
/>
</button>
);
}
export { RefreshButton };