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 InputFileComponent from "../../../../components/inputFileComponent";
import PromptAreaComponent from "../../../../components/promptComponent"; import PromptAreaComponent from "../../../../components/promptComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent";
import { classNames } from "../../../../utils";
export default function ModalField({ data, title, required, id, name, type }) { export default function ModalField({ data, title, required, id, name, type }) {
const { save } = useContext(TabsContext); const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState( const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false data.node.template[name]?.value ?? false
); );
const display =
type === "str" ||
type === "int" ||
type === "prompt" ||
type === "bool" ||
type === "float" ||
type === "file" ||
type === "code";
return ( return (
<div className="flex my-3 flex-row w-full whitespace-nowrap items-center"> <div className={classNames("flex flex-row w-full items-center justify-between",display?"":"hidden")}>
<span className="mx-2">{title}</span> {display && <span className="mx-2">{title}</span>}
{type === "str" && !data.node.template[name].options ? ( {type === "str" && !data.node.template[name].options ? (
<div className="w-full"> <div className="w-1/2">
{data.node.template[name].list ? ( {data.node.template[name].list ? (
<InputListComponent <InputListComponent
disabled={false} disabled={false}
@ -71,7 +80,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
/> />
</div> </div>
) : type === "float" ? ( ) : type === "float" ? (
<div className="w-full"> <div className="w-1/2">
<FloatComponent <FloatComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
@ -82,7 +91,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
/> />
</div> </div>
) : type === "str" && data.node.template[name].options ? ( ) : type === "str" && data.node.template[name].options ? (
<div className="w-full"> <div className="w-1/2">
<Dropdown <Dropdown
options={data.node.template[name].options} options={data.node.template[name].options}
onSelect={(newValue) => (data.node.template[name].value = newValue)} onSelect={(newValue) => (data.node.template[name].value = newValue)}
@ -90,7 +99,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
></Dropdown> ></Dropdown>
</div> </div>
) : type === "int" ? ( ) : type === "int" ? (
<div className="w-full"> <div className="w-1/2">
<IntComponent <IntComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
@ -101,45 +110,45 @@ export default function ModalField({ data, title, required, id, name, type }) {
/> />
</div> </div>
) : type === "file" ? ( ) : type === "file" ? (
<div className="w-full"> <div className="w-1/2">
<InputFileComponent <InputFileComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
}} }}
fileTypes={data.node.template[name].fileTypes} fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes} suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => { onFileChange={(t: string) => {
data.node.template[name].content = t; data.node.template[name].content = t;
save(); save();
}} }}
></InputFileComponent> ></InputFileComponent>
</div> </div>
) : type === "prompt" ? ( ) : type === "prompt" ? (
<div className="w-full"> <div className="w-1/2">
<PromptAreaComponent <PromptAreaComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
</div> </div>
) : type === "code" ? ( ) : type === "code" ? (
<div className="w-full"> <div className="w-1/2">
<CodeAreaComponent <CodeAreaComponent
disabled={false} disabled={false}
value={data.node.template[name].value ?? ""} value={data.node.template[name].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[name].value = t; data.node.template[name].value = t;
save(); save();
}} }}
/> />
</div> </div>
) : ( ) : (
<div>{type}</div> <div className="hidden"></div>
)} )}
</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>
<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="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="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 className="overflow-hidden px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
<div> <div className="flex flex-col h-full gap-5">
{/* str, code, bool, float, int,prompt, file, */}
{Object.keys(data.node.template) {Object.keys(data.node.template)
.filter((t) => t.charAt(0) !== "_") .filter((t) => t.charAt(0) !== "_")
.map((t: string, idx) => ( .map((t: string, idx) => {
<div key={idx}> return (
{ <ModalField
<ModalField data={data}
data={data} title={
title={ data.node.template[t].display_name
data.node.template[t].display_name ? data.node.template[t].display_name
? data.node.template[t].display_name : data.node.template[t].name
: data.node.template[t].name ? snakeToNormalCase(
? snakeToNormalCase( data.node.template[t].name
data.node.template[t].name )
) : snakeToNormalCase(t)
: snakeToNormalCase(t) }
} required={data.node.template[t].required}
required={data.node.template[t].required} id={
id={ data.node.template[t].type +
data.node.template[t].type + "|" +
"|" + t +
t + "|" +
"|" + data.id
data.id }
} name={t}
name={t} type={data.node.template[t].type}
type={data.node.template[t].type} />
/> );
} })}
</div>
))}
</div> </div>
</div> </div>
</div> </div>