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

fix: remove redundant memoization from parameter render components to fix input cursor position (#5347)

Browse source 
✨ (parameterRenderComponent/index.tsx): Refactor ParameterRenderComponent to improve code readability and maintainability. Remove unnecessary memoization and useCallback hooks, simplify component rendering logic, and optimize component structure.
This commit is contained in:
Cristhian Zanforlin Lousa 2024-12-19 15:19:18 -03:00 • committed by GitHub
commit fa46786f47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 59 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

155
src/frontend/src/components/core/parameterRenderComponent/index.tsx
View file

@ -1,13 +1,10 @@
import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value"; import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value";
import { TEXT_FIELD_TYPES } from "@/constants/constants";
import { APIClassType, InputFieldType } from "@/types/api";
import { memo, useCallback, useMemo } from "react";
import { InputProps } from "./types";
// Import components
import TableNodeComponent from "@/components/core/parameterRenderComponent/components/TableNodeComponent"; import TableNodeComponent from "@/components/core/parameterRenderComponent/components/TableNodeComponent";
import CodeAreaComponent from "@/components/core/parameterRenderComponent/components/codeAreaComponent"; import CodeAreaComponent from "@/components/core/parameterRenderComponent/components/codeAreaComponent";
import SliderComponent from "@/components/core/parameterRenderComponent/components/sliderComponent"; import SliderComponent from "@/components/core/parameterRenderComponent/components/sliderComponent";
import { TEXT_FIELD_TYPES } from "@/constants/constants";
import { APIClassType, InputFieldType } from "@/types/api";
import { useMemo } from "react";
import DictComponent from "./components/dictComponent"; import DictComponent from "./components/dictComponent";
import { EmptyParameterComponent } from "./components/emptyParameterComponent"; import { EmptyParameterComponent } from "./components/emptyParameterComponent";
import FloatComponent from "./components/floatComponent"; import FloatComponent from "./components/floatComponent";
@ -21,38 +18,9 @@ import PromptAreaComponent from "./components/promptComponent";
import { RefreshParameterComponent } from "./components/refreshParameterComponent"; import { RefreshParameterComponent } from "./components/refreshParameterComponent";
import { StrRenderComponent } from "./components/strRenderComponent"; import { StrRenderComponent } from "./components/strRenderComponent";
import ToggleShadComponent from "./components/toggleShadComponent"; import ToggleShadComponent from "./components/toggleShadComponent";
import { InputProps } from "./types";
const MemoizedTableNode = memo(TableNodeComponent); export function ParameterRenderComponent({
const MemoizedCodeArea = memo(CodeAreaComponent);
const MemoizedSlider = memo(SliderComponent);
const MemoizedDict = memo(DictComponent);
const MemoizedEmpty = memo(EmptyParameterComponent);
const MemoizedFloat = memo(FloatComponent);
const MemoizedInputFile = memo(InputFileComponent);
const MemoizedInputList = memo(InputListComponent);
const MemoizedInt = memo(IntComponent);
const MemoizedKeypairList = memo(KeypairListComponent);
const MemoizedLink = memo(LinkComponent);
const MemoizedMultiselect = memo(MultiselectComponent);
const MemoizedPromptArea = memo(PromptAreaComponent);
const MemoizedStrRender = memo(StrRenderComponent);
const MemoizedToggleShad = memo(ToggleShadComponent);
interface ParameterRenderProps {
handleOnNewValue: handleOnNewValueType;
name: string;
nodeId: string;
templateData: Partial<InputFieldType>;
templateValue: any;
editNode: boolean;
handleNodeClass: (value: any, code?: string, type?: string) => void;
nodeClass: APIClassType;
disabled: boolean;
placeholder?: string;
isToolMode?: boolean;
}
export const ParameterRenderComponent = memo(function ParameterRenderComponent({
handleOnNewValue, handleOnNewValue,
name, name,
nodeId, nodeId,
@ -64,20 +32,28 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
disabled, disabled,
placeholder, placeholder,
isToolMode, isToolMode,
}: ParameterRenderProps) { }: {
const id = useMemo( handleOnNewValue: handleOnNewValueType;
() => name: string;
( nodeId: string;
templateData.type + templateData: Partial<InputFieldType>;
"_" + templateValue: any;
(editNode ? "edit_" : "") + editNode: boolean;
templateData.name handleNodeClass: (value: any, code?: string, type?: string) => void;
).toLowerCase(), nodeClass: APIClassType;
[templateData.type, templateData.name, editNode], disabled: boolean;
); placeholder?: string;
isToolMode?: boolean;
}) {
const id = (
templateData.type +
"_" +
(editNode ? "edit_" : "") +
templateData.name
).toLowerCase();
const baseInputProps = useMemo( const renderComponent = (): React.ReactElement<InputProps> => {
() => ({ const baseInputProps: InputProps = {
id, id,
value: templateValue, value: templateValue,
editNode, editNode,
@ -88,27 +64,12 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
readonly: templateData.readonly, readonly: templateData.readonly,
placeholder, placeholder,
isToolMode, isToolMode,
}), };
[
id,
templateValue,
editNode,
handleOnNewValue,
disabled,
nodeClass,
handleNodeClass,
templateData.readonly,
placeholder,
isToolMode,
],
);
const renderComponent = useCallback((): React.ReactElement<InputProps> => {
if (TEXT_FIELD_TYPES.includes(templateData.type ?? "")) { if (TEXT_FIELD_TYPES.includes(templateData.type ?? "")) {
if (templateData.list) { if (templateData.list) {
if (!templateData.options) { if (!templateData.options) {
return ( return (
<MemoizedInputList <InputListComponent
{...baseInputProps} {...baseInputProps}
componentName={name} componentName={name}
id={`inputlist_${id}`} id={`inputlist_${id}`}
@ -117,7 +78,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
} }
if (!!templateData.options) { if (!!templateData.options) {
return ( return (
<MemoizedMultiselect <MultiselectComponent
{...baseInputProps} {...baseInputProps}
combobox={templateData.combobox} combobox={templateData.combobox}
options={ options={
@ -131,7 +92,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
} }
} }
return ( return (
<MemoizedStrRender <StrRenderComponent
{...baseInputProps} {...baseInputProps}
templateData={templateData} templateData={templateData}
name={name} name={name}
@ -140,11 +101,10 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
/> />
); );
} }
switch (templateData.type) { switch (templateData.type) {
case "NestedDict": case "NestedDict":
return ( return (
<MemoizedDict <DictComponent
name={name ?? ""} name={name ?? ""}
{...baseInputProps} {...baseInputProps}
id={`dict_${id}`} id={`dict_${id}`}
@ -152,7 +112,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "dict": case "dict":
return ( return (
<MemoizedKeypairList <KeypairListComponent
{...baseInputProps} {...baseInputProps}
isList={templateData.list ?? false} isList={templateData.list ?? false}
id={`keypair_${id}`} id={`keypair_${id}`}
@ -160,7 +120,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "bool": case "bool":
return ( return (
<MemoizedToggleShad <ToggleShadComponent
size="medium" size="medium"
{...baseInputProps} {...baseInputProps}
id={`toggle_${id}`} id={`toggle_${id}`}
@ -168,7 +128,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "link": case "link":
return ( return (
<MemoizedLink <LinkComponent
{...baseInputProps} {...baseInputProps}
icon={templateData.icon} icon={templateData.icon}
text={templateData.text} text={templateData.text}
@ -177,7 +137,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "float": case "float":
return ( return (
<MemoizedFloat <FloatComponent
{...baseInputProps} {...baseInputProps}
id={`float_${id}`} id={`float_${id}`}
rangeSpec={templateData.range_spec} rangeSpec={templateData.range_spec}
@ -185,7 +145,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "int": case "int":
return ( return (
<MemoizedInt <IntComponent
{...baseInputProps} {...baseInputProps}
rangeSpec={templateData.range_spec} rangeSpec={templateData.range_spec}
id={`int_${id}`} id={`int_${id}`}
@ -193,7 +153,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "file": case "file":
return ( return (
<MemoizedInputFile <InputFileComponent
{...baseInputProps} {...baseInputProps}
fileTypes={templateData.fileTypes} fileTypes={templateData.fileTypes}
id={`inputfile_${id}`} id={`inputfile_${id}`}
@ -201,7 +161,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "prompt": case "prompt":
return ( return (
<MemoizedPromptArea <PromptAreaComponent
{...baseInputProps} {...baseInputProps}
readonly={!!nodeClass.flow} readonly={!!nodeClass.flow}
field_name={name} field_name={name}
@ -209,10 +169,10 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
/> />
); );
case "code": case "code":
return <MemoizedCodeArea {...baseInputProps} id={`codearea_${id}`} />; return <CodeAreaComponent {...baseInputProps} id={`codearea_${id}`} />;
case "table": case "table":
return ( return (
<MemoizedTableNode <TableNodeComponent
{...baseInputProps} {...baseInputProps}
description={templateData.info || "Add or edit data"} description={templateData.info || "Add or edit data"}
columns={templateData?.table_schema?.columns} columns={templateData?.table_schema?.columns}
@ -224,7 +184,7 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
); );
case "slider": case "slider":
return ( return (
<MemoizedSlider <SliderComponent
{...baseInputProps} {...baseInputProps}
value={templateValue} value={templateValue}
rangeSpec={templateData.range_spec} rangeSpec={templateData.range_spec}
@ -239,21 +199,24 @@ export const ParameterRenderComponent = memo(function ParameterRenderComponent({
/> />
); );
default: default:
return <MemoizedEmpty {...baseInputProps} />; return <EmptyParameterComponent {...baseInputProps} />;
} }
}, [templateData, baseInputProps, name, id, nodeClass.flow]); };
return ( return useMemo(
<RefreshParameterComponent () => (
templateData={templateData} <RefreshParameterComponent
disabled={disabled} templateData={templateData}
nodeId={nodeId} disabled={disabled}
editNode={editNode} nodeId={nodeId}
nodeClass={nodeClass} editNode={editNode}
handleNodeClass={handleNodeClass} nodeClass={nodeClass}
name={name} handleNodeClass={handleNodeClass}
> name={name}
{useMemo(() => renderComponent(), [renderComponent])} >
</RefreshParameterComponent> {renderComponent()}
</RefreshParameterComponent>
),
[templateData, disabled, nodeId, editNode, nodeClass, name, templateValue],
); );
}); }