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

align inputs

Browse source
This commit is contained in:
anovazzi1 2023-04-13 00:36:05 -03:00
commit e97a128988
2 changed files with 76 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
View file

@ -10,18 +10,27 @@ import IntComponent from "../../../../components/intComponent";
import InputFileComponent from "../../../../components/inputFileComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent";
import { classNames } from "../../../../utils";
export default function ModalField({ data, title, required, id, name, type }) {
const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false
);
const display =
type === "str" ||
type === "int" ||
type === "prompt" ||
type === "bool" ||
type === "float" ||
type === "file" ||
type === "code";
return (
<div className="flex my-3 flex-row w-full whitespace-nowrap items-center">
<span className="mx-2">{title}</span>
<div className={classNames("flex flex-row w-full items-center justify-between",display?"":"hidden")}>
{display && <span className="mx-2">{title}</span>}
{type === "str" && !data.node.template[name].options ? (
<div className="w-full">
<div className="w-1/2">
{data.node.template[name].list ? (
<InputListComponent
disabled={false}
@ -71,7 +80,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
/>
</div>
) : type === "float" ? (
<div className="w-full">
<div className="w-1/2">
<FloatComponent
disabled={false}
value={data.node.template[name].value ?? ""}
@ -82,7 +91,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
/>
</div>
) : type === "str" && data.node.template[name].options ? (
<div className="w-full">
<div className="w-1/2">
<Dropdown
options={data.node.template[name].options}
onSelect={(newValue) => (data.node.template[name].value = newValue)}
@ -90,7 +99,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
></Dropdown>
</div>
) : type === "int" ? (
<div className="w-full">
<div className="w-1/2">
<IntComponent
disabled={false}
value={data.node.template[name].value ?? ""}
@ -101,45 +110,45 @@ export default function ModalField({ data, title, required, id, name, type }) {
/>
</div>
) : type === "file" ? (
<div className="w-full">
<InputFileComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].content = t;
save();
}}
></InputFileComponent>
<div className="w-1/2">
<InputFileComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].content = t;
save();
}}
></InputFileComponent>
</div>
) : type === "prompt" ? (
<div className="w-full">
<PromptAreaComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
<div className="w-1/2">
<PromptAreaComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
</div>
) : type === "code" ? (
<div className="w-full">
<CodeAreaComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
<div className="w-1/2">
<CodeAreaComponent
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
</div>
) : (
<div>{type}</div>
<div className="hidden"></div>
)}
</div>
);

59
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -85,39 +85,36 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
</div>
<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<div>
{/* str, code, bool, float, int,prompt, file, */}
<div className="overflow-hidden px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<div className="flex flex-col h-full gap-5">
{Object.keys(data.node.template)
.filter((t) => t.charAt(0) !== "_")
.map((t: string, idx) => (
<div key={idx}>
{
<ModalField
data={data}
title={
data.node.template[t].display_name
? data.node.template[t].display_name
: data.node.template[t].name
? snakeToNormalCase(
data.node.template[t].name
)
: snakeToNormalCase(t)
}
required={data.node.template[t].required}
id={
data.node.template[t].type +
"|" +
t +
"|" +
data.id
}
name={t}
type={data.node.template[t].type}
/>
}
</div>
))}
.map((t: string, idx) => {
return (
<ModalField
data={data}
title={
data.node.template[t].display_name
? data.node.template[t].display_name
: data.node.template[t].name
? snakeToNormalCase(
data.node.template[t].name
)
: snakeToNormalCase(t)
}
required={data.node.template[t].required}
id={
data.node.template[t].type +
"|" +
t +
"|" +
data.id
}
name={t}
type={data.node.template[t].type}
/>
);
})}
</div>
</div>
</div>