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

🐛 fix(parameterComponent): import KeypairListComponent from correct path to fix compilation error

Browse source 
✨ feat(parameterComponent): add support for editing key-value pairs in the parameter component
🐛 fix(genericIconComponent): fix stroke width prop name to strokeWidth to fix SVG rendering issue
🐛 fix(keypairListComponent): import GenericModal from correct path to fix compilation error
✨ feat(keypairListComponent): add support for editing key-value pairs in the keypair list component
🐛 fix(editNodeModal): import KeypairListComponent from correct path to fix compilation error
✨ feat(editNodeModal): add support for editing key-value pairs in the edit node modal
🐛 fix(types): change value type in KeyPairListComponent to any to allow for any key-value pair
This commit is contained in:
Cristhian Zanforlin Lousa 2023-08-30 16:37:53 -03:00
commit 35322e7d55
5 changed files with 114 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import InputComponent from "../../../../components/inputComponent";
import InputFileComponent from "../../../../components/inputFileComponent";
import InputListComponent from "../../../../components/inputListComponent";
import IntComponent from "../../../../components/intComponent";
import KeypairListComponent from "../../../../components/keypairListComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
@ -31,7 +32,6 @@ import {
nodeNames,
} from "../../../../utils/styleUtils";
import { classNames, groupByFamily } from "../../../../utils/utils";
import KeypairListComponent from "../../../../components/keypairListComponent";
export default function ParameterComponent({
left,
@ -94,21 +94,44 @@ export default function ParameterComponent({
renderTooltips();
};
const [arrayOfObjects, setArrayOfObjects] = useState([
{ key1: "value1", key2: "value2" },
{ key3: "value3", key4: "value4" },
{ key5: "value5", key6: "value6" },
])
const [dict, setDict] = useState({
key1: "value1",
key2: "value2",
key3: "value3",
key4: "value4",
key5: "value5",
key6: "value6",
} as {});
const [dictArr, setDictArr] = useState([]);
useEffect(() => {
convertToArray(dict);
}, [dict]);
const handleOnNewValueTest = (newValue): void => {
let newData = cloneDeep(arrayOfObjects);
newData = newValue;
setArrayOfObjects(newData);
const convertToArray = (singleObject) => {
let arrConverted: any = [];
for (const key in singleObject) {
if (singleObject.hasOwnProperty(key)) {
const newObj = {};
newObj[key] = singleObject[key];
arrConverted.push(newObj);
}
}
setDictArr(arrConverted);
};
const convertToDict = (newValue): void => {
const flattenedObject = {};
for (const obj of newValue) {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
flattenedObject[key] = obj[key];
}
}
}
let newData = cloneDeep(flattenedObject);
setDict(newData);
};
useEffect(() => {
if (name === "openai_api_base") console.log(info);
@ -225,6 +248,15 @@ export default function ParameterComponent({
type === "int") &&
!optionalHandle ? (
<></>
) : left === true && type === "str" ? (
<div className="mt-2 w-full">
<KeypairListComponent
disabled={disabled}
editNode={false}
value={dictArr}
onChange={convertToDict}
/>
</div>
) : (
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
@ -358,20 +390,7 @@ export default function ParameterComponent({
onChange={handleOnNewValue}
/>
</div>
)
: left === true && type === "keypair" ? (
<div className="mt-2 w-full">
<KeypairListComponent
disabled={disabled}
editNode={false}
value={
arrayOfObjects
}
onChange={handleOnNewValueTest}
/>
</div>
)
: (
) : (
<></>
)}
</>

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

@ -11,7 +11,7 @@ export default function IconComponent({
<TargetIcon
className={className}
style={{ color: iconColor }}
stroke-width={1.5}
strokeWidth={1.5}
/>
);
}

34
src/frontend/src/components/keypairListComponent/index.tsx
View file

@ -2,6 +2,8 @@ import { useEffect } from "react";
import { KeyPairListComponent } from "../../types/components";
import _ from "lodash";
import { TypeModal } from "../../constants/enums";
import GenericModal from "../../modals/genericModal";
import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input";
@ -26,10 +28,10 @@ export default function KeypairListComponent({
onChange(newInputList);
};
const handleChangeValue = (event, idx) => {
const handleChangeValue = (newValue, idx) => {
const newInputList = _.cloneDeep(value);
const key = Object.keys(newInputList[idx])[0];
newInputList[idx][key] = event.target.value;
newInputList[idx][key] = newValue;
onChange(newInputList);
};
@ -58,20 +60,24 @@ export default function KeypairListComponent({
}
}}
/>
<Input
disabled={disabled}
type="text"
<GenericModal
type={TypeModal.TEXT}
value={obj[key]}
className={editNode ? "input-edit-node" : ""}
placeholder="Type value..."
onChange={(event) => handleChangeValue(event, index)}
onKeyDown={(e) => {
if (e.ctrlKey && e.key === "Backspace") {
e.preventDefault();
e.stopPropagation();
}
buttonText="Save"
modalTitle="Edit Value"
setValue={(value: string) => {
handleChangeValue(value, index);
}}
/>
>
<Input
disabled={true}
type="text"
value={obj[key]}
className={editNode ? "input-edit-node cursor-pointer" : "cursor-pointer"}
placeholder="Click to input a value..."
/>
</GenericModal>
{index === value.length - 1 ? (
<button
onClick={() => {

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

@ -79,16 +79,43 @@ const EditNodeModal = forwardRef(
setMyData(data); // reset data to what it is on node when opening modal
}, [modalOpen]);
const [arrayOfObjects, setArrayOfObjects] = useState([
{ key1: "value1", key2: "value2" },
{ key3: "value3", key4: "value4" },
{ key5: "value5", key6: "value6" },
]);
const [dict, setDict] = useState({
key1: "value1",
key2: "value2",
key3: "value3",
key4: "value4",
key5: "value5",
key6: "value6",
} as {});
const [dictArr, setDictArr] = useState([]);
const handleOnNewValueTest = (newValue): void => {
let newData = cloneDeep(arrayOfObjects);
newData = newValue;
setArrayOfObjects(newData);
useEffect(() => {
convertToArray(dict);
}, [dict]);
const convertToArray = (singleObject) => {
let arrConverted: any = [];
for (const key in singleObject) {
if (singleObject.hasOwnProperty(key)) {
const newObj = {};
newObj[key] = singleObject[key];
arrConverted.push(newObj);
}
}
setDictArr(arrConverted);
};
const convertToDict = (newValue): void => {
const flattenedObject = {};
for (const obj of newValue) {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
flattenedObject[key] = obj[key];
}
}
}
let newData = cloneDeep(flattenedObject);
setDict(newData);
};
return (
@ -112,7 +139,7 @@ const EditNodeModal = forwardRef(
className={classNames(
"edit-node-modal-box",
nodeLength > limitScrollFieldsModal ||
nodeLength > arrayOfObjects.length
nodeLength > dictArr.length
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden"
)}
@ -180,6 +207,16 @@ const EditNodeModal = forwardRef(
handleOnNewValue(value, templateParam);
}}
/>
) : myData.node?.template[templateParam]
.type === "str" ? (
<div className="mt-2 w-full">
<KeypairListComponent
disabled={disabled}
editNode={true}
value={dictArr}
onChange={convertToDict}
/>
</div>
) : myData.node.template[templateParam]
.multiline ? (
<TextAreaComponent
@ -350,16 +387,6 @@ const EditNodeModal = forwardRef(
}}
/>
</div>
) : myData.node?.template[templateParam].type ===
"keypair" ? (
<div className="mt-2 w-full">
<KeypairListComponent
disabled={disabled}
value={arrayOfObjects}
onChange={handleOnNewValueTest}
editNode={true}
/>
</div>
) : myData.node?.template[templateParam].type ===
"Any" ? (
"-"

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

@ -55,7 +55,7 @@ export type InputListComponentType = {
};
export type KeyPairListComponent = {
value: any[];
value: any;
onChange: (value: string[]) => void;
disabled: boolean;
editNode?: boolean;