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

fix(parameterComponent): add readonly prop to CodeAreaComponent and PromptAreaComponent based on dynamic property in template

Browse source 
fix(GenericNode): remove console.log statement
fix(codeAreaComponent): add readonly prop to CodeAreaModal
fix(codeTabsComponent): add readonly prop to CodeAreaComponent and PromptAreaComponent
fix(promptComponent): add readonly prop to GenericModal
fix(EditNodeModal): add readonly prop to CodeAreaComponent
fix(codeAreaModal): add readonly prop to AceEditor in CodeAreaModal
fix(genericModal): add readonly prop to Textarea in GenericModal
fix(reactflowUtils): remove unnecessary code in updateGroupNodeTemplate function
This commit is contained in:
anovazzi1 2023-09-14 22:31:21 -03:00
commit be1ee757a4
11 changed files with 23 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/backend/langflow/template/frontend_node/prompts.py
View file

@ -43,6 +43,7 @@ class PromptFrontendNode(FrontendNode):
# All prompt fields should be password=False
field.password = False
field.dynamic = True
class PromptTemplateNode(FrontendNode):

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

@ -299,6 +299,7 @@ export default function ParameterComponent({
) : left === true && type === "code" ? (
<div className="mt-2 w-full">
<CodeAreaComponent
readonly={data.node?.flow && data.node.template[name].dynamic?true:false}
dynamic={data.node?.template[name].dynamic ?? false}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
@ -334,6 +335,7 @@ export default function ParameterComponent({
) : left === true && type === "prompt" ? (
<div className="mt-2 w-full">
<PromptAreaComponent
readonly={data.node?.flow && data.node.template[name].dynamic?true:false}
field_name={name}
setNodeClass={(nodeClass) => {
data.node = nodeClass;

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

@ -74,6 +74,7 @@ export default function GenericNode({
setValidationStatus(null);
}
}, [sseData, data.id]);
console.log(data.node)
return (
<>

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

@ -12,6 +12,7 @@ export default function CodeAreaComponent({
nodeClass,
dynamic,
setNodeClass,
readonly=false
}: CodeAreaComponentType) {
const [myValue, setMyValue] = useState(
typeof value == "string" ? value : JSON.stringify(value)
@ -30,6 +31,7 @@ export default function CodeAreaComponent({
return (
<div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<CodeAreaModal
readonly={readonly}
dynamic={dynamic}
value={myValue}
nodeClass={nodeClass}

2
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -633,6 +633,7 @@ export default function CodeTabsComponent({
>
<div className="mx-auto">
<PromptAreaComponent
readonly={node.data.node?.flow && node.data.node.template[templateField].dynamic? true : false}
editNode={true}
disabled={false}
value={
@ -688,6 +689,7 @@ export default function CodeTabsComponent({
>
<div className="mx-auto">
<CodeAreaComponent
readonly={node.data.node?.flow && node.data.node.template[templateField].dynamic? true : false}
disabled={false}
editNode={true}
value={

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

@ -14,6 +14,7 @@ export default function PromptAreaComponent({
onChange,
disabled,
editNode = false,
readonly=false
}: TextAreaComponentType): JSX.Element {
useEffect(() => {
if (disabled) {
@ -22,7 +23,7 @@ export default function PromptAreaComponent({
}, [disabled]);
useEffect(() => {
if (value !== "" && !editNode) {
if (value !== "" && !editNode && !readonly) {
postValidatePrompt(field_name!, value, nodeClass!).then((apiReturn) => {
if (apiReturn.data) {
setNodeClass!(apiReturn.data.frontend_node);
@ -35,6 +36,7 @@ export default function PromptAreaComponent({
return (
<div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<GenericModal
readonly={readonly}
type={TypeModal.PROMPT}
value={value}
buttonText="Check & Save"

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

@ -297,6 +297,7 @@ const EditNodeModal = forwardRef(
"prompt" ? (
<div className="mx-auto">
<PromptAreaComponent
readonly={myData.node?.flow && myData.node.template[templateParam].dynamic? true : false}
field_name={templateParam}
editNode={true}
disabled={disabled}
@ -317,6 +318,7 @@ const EditNodeModal = forwardRef(
"code" ? (
<div className="mx-auto">
<CodeAreaComponent
readonly={myData.node?.flow && myData.node.template[templateParam].dynamic? true : false}
dynamic={
data.node!.template[templateParam]
.dynamic ?? false

4
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -23,6 +23,7 @@ export default function CodeAreaModal({
setNodeClass,
children,
dynamic,
readonly=false
}: codeAreaModalPropsType): JSX.Element {
const [code, setCode] = useState(value);
const { dark } = useContext(darkContext);
@ -147,6 +148,7 @@ export default function CodeAreaModal({
<div className="flex h-full w-full flex-col transition-all">
<div className="h-full w-full">
<AceEditor
readOnly={readonly}
value={code}
mode="python"
height={height ?? "100%"}
@ -181,7 +183,7 @@ export default function CodeAreaModal({
</div>
</div>
<div className="flex h-fit w-full justify-end">
<Button className="mt-3" onClick={handleClick} type="submit">
<Button disabled={readonly} className="mt-3" onClick={handleClick} type="submit">
Check & Save
</Button>
</div>

7
src/frontend/src/modals/genericModal/index.tsx
View file

@ -34,6 +34,7 @@ export default function GenericModal({
nodeClass,
setNodeClass,
children,
readonly=false,
}: genericModalPropsType): JSX.Element {
const [myButtonText] = useState(buttonText);
const [myModalTitle] = useState(modalTitle);
@ -194,7 +195,7 @@ export default function GenericModal({
"flex h-full w-full"
)}
>
{type === TypeModal.PROMPT && isEdit ? (
{type === TypeModal.PROMPT && isEdit && !readonly ? (
<Textarea
ref={divRefPrompt}
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
@ -212,7 +213,7 @@ export default function GenericModal({
handleKeyDown(e, inputValue, "");
}}
/>
) : type === TypeModal.PROMPT && !isEdit ? (
) : type === TypeModal.PROMPT && (!isEdit || readonly) ? (
<TextAreaContentView />
) : type !== TypeModal.PROMPT ? (
<Textarea
@ -227,6 +228,7 @@ export default function GenericModal({
onKeyDown={(e) => {
handleKeyDown(e, value, "");
}}
readOnly={readonly}
/>
) : (
<></>
@ -283,6 +285,7 @@ export default function GenericModal({
)}
</div>
<Button
disabled={readonly}
onClick={() => {
switch (myModalType) {
case TypeModal.TEXT:

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

@ -65,6 +65,7 @@ export type TextAreaComponentType = {
onChange: (value: string[] | string) => void;
value: string;
editNode?: boolean;
readonly?: boolean;
};
export type CodeAreaComponentType = {
@ -75,6 +76,7 @@ export type CodeAreaComponentType = {
nodeClass?: APIClassType;
setNodeClass?: (value: APIClassType) => void;
dynamic?: boolean;
readonly?: boolean;
};
export type FileComponentType = {

3
src/frontend/src/utils/reactflowUtils.ts
View file

@ -533,9 +533,6 @@ function updateGroupNodeTemplate(template: APITemplateType) {
!input_types
) {
template[key].advanced = true;
if (template[key].dynamic) {
template[key].readonly = true;
}
}
});
return template;