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

refactor: Add more types

Browse source
This commit is contained in:
Igor Carvalho 2023-07-26 22:59:55 -03:00
commit 7804ca9eaf
20 changed files with 138 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/package-lock.json generated
View file

@ -143,10 +143,9 @@
}
},
"node_modules/@babel/compat-data": {
"version": "7.22.6",
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
"integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
"version": "7.22.9",
"license": "MIT",
"engines": {
"node": ">=6.9.0"
@ -2614,6 +2613,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/axios": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",
"integrity": "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==",
"deprecated": "This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!",
"dependencies": {
"axios": "*"
}
},
"node_modules/@types/cacheable-request": {
"version": "6.0.3",
"dev": true,

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

@ -28,6 +28,7 @@ import {
getRandomKeyByssmm,
groupByFamily,
} from "../../../../utils/utils";
import { NodeDataType } from "../../../../types/flow";
export default function ParameterComponent({
left,
@ -43,7 +44,7 @@ export default function ParameterComponent({
optionalHandle = null,
info = "",
}: ParameterComponentType): JSX.Element {
const ref = useRef(null);
const ref = useRef<HTMLDivElement>(null);
const refHtml = useRef(null);
const refNumberComponents = useRef(0);
const infoHtml = useRef(null);
@ -69,7 +70,7 @@ export default function ParameterComponent({
const { data: myData } = useContext(typesContext);
const handleOnNewValue = (newValue: any) => {
const handleOnNewValue = (newValue: string | string[] | boolean): void => {
let newData = cloneDeep(data);
newData.node.template[name].value = newValue;
setData(newData);
@ -220,9 +221,9 @@ export default function ParameterComponent({
{left === true &&
type === "str" &&
!data.node.template[name].options ? (
!data.node?.template[name].options ? (
<div className="mt-2 w-full">
{data.node.template[name].list ? (
{data.node?.template[name].list ? (
<InputListComponent
disabled={disabled}
value={
@ -233,7 +234,7 @@ export default function ParameterComponent({
}
onChange={handleOnNewValue}
/>
) : data.node.template[name].multiline ? (
) : data.node?.template[name].multiline ? (
<TextAreaComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
@ -242,8 +243,8 @@ export default function ParameterComponent({
) : (
<InputComponent
disabled={disabled}
password={data.node.template[name].password ?? false}
value={data.node.template[name].value ?? ""}
password={data.node?.template[name].password ?? false}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
)}
@ -252,7 +253,7 @@ export default function ParameterComponent({
<div className="mt-2 w-full">
<ToggleShadComponent
disabled={disabled}
enabled={data.node.template[name].value}
enabled={data.node?.template[name].value}
setEnabled={(t) => {
handleOnNewValue(t);
}}
@ -263,13 +264,13 @@ export default function ParameterComponent({
<div className="mt-2 w-full">
<FloatComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
) : left === true &&
type === "str" &&
data.node.template[name].options ? (
data.node?.template[name].options ? (
<div className="mt-2 w-full">
<Dropdown
options={data.node.template[name].options}
@ -285,7 +286,7 @@ export default function ParameterComponent({
}}
nodeClass={data.node}
disabled={disabled}
value={data.node.template[name].value ?? ""}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
@ -293,10 +294,10 @@ export default function ParameterComponent({
<div className="mt-2 w-full">
<InputFileComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
fileTypes={data.node.template[name].fileTypes}
suffixes={data.node.template[name].suffixes}
fileTypes={data.node?.template[name].fileTypes}
suffixes={data.node?.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].file_path = t;
save();
@ -307,7 +308,7 @@ export default function ParameterComponent({
<div className="mt-2 w-full">
<IntComponent
disabled={disabled}
value={data.node.template[name].value ?? ""}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>
@ -320,7 +321,7 @@ export default function ParameterComponent({
}}
nodeClass={data.node}
disabled={disabled}
value={data.node.template[name].value ?? ""}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
/>
</div>

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

@ -104,9 +104,9 @@ export default function GenericNode({
iconColor={`${nodeColors[types[data.type]]}`}
/>
<div className="generic-node-tooltip-div">
<ShadTooltip content={data.node.display_name}>
<ShadTooltip content={data.node?.display_name}>
<div className="generic-node-tooltip-div text-primary">
{data.node.display_name}
{data.node?.display_name}
</div>
</ShadTooltip>
</div>
@ -171,7 +171,7 @@ export default function GenericNode({
</div>
<div className="generic-node-desc">
<div className="generic-node-desc-text">{data.node.description}</div>
<div className="generic-node-desc-text">{data.node?.description}</div>
<>
{Object.keys(data.node.template)
@ -184,35 +184,35 @@ export default function GenericNode({
data={data}
setData={setData}
color={
nodeColors[types[data.node.template[t].type]] ??
nodeColors[data.node.template[t].type] ??
nodeColors[types[data.node?.template[t].type]] ??
nodeColors[data.node?.template[t].type] ??
nodeColors.unknown
}
title={
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
? toTitleCase(data.node.template[t].name)
: toTitleCase(t)
}
info={data.node.template[t].info}
info={data.node?.template[t].info}
name={t}
tooltipTitle={
data.node.template[t].input_types?.join("\n") ??
data.node.template[t].type
data.node?.template[t].input_types?.join("\n") ??
data.node?.template[t].type
}
required={data.node.template[t].required}
required={data.node?.template[t].required}
id={
(data.node.template[t].input_types?.join(";") ??
data.node.template[t].type) +
(data.node?.template[t].input_types?.join(";") ??
data.node?.template[t].type) +
"|" +
t +
"|" +
data.id
}
left={true}
type={data.node.template[t].type}
optionalHandle={data.node.template[t].input_types}
type={data.node?.template[t].type}
optionalHandle={data.node?.template[t].input_types}
/>
) : (
<></>
@ -232,13 +232,13 @@ export default function GenericNode({
setData={setData}
color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={
data.node.output_types && data.node.output_types.length > 0
data.node?.output_types && data.node.output_types.length > 0
? data.node.output_types.join("|")
: data.type
}
tooltipTitle={data.node.base_classes.join("\n")}
tooltipTitle={data.node?.base_classes.join("\n")}
id={[data.type, data.id, ...data.node.base_classes].join("|")}
type={data.node.base_classes.join("|")}
type={data.node?.base_classes.join("|")}
left={false}
/>
</>

1
src/frontend/src/components/CrashErrorComponent/index.tsx
View file

@ -2,6 +2,7 @@ export default function CrashErrorComponent({
error,
resetErrorBoundary,
}): JSX.Element {
console.log({error, resetErrorBoundary})
return (
<div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
<div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">

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

@ -28,12 +28,12 @@ export const EditFlowSettings: React.FC<InputProps> = ({
};
const [desc, setDesc] = useState(
flows.find((f) => f.id === tabId).description
flows.find((f) => f.id === tabId)?.description
);
const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
flows.find((f) => f.id === tabId).description = event.target.value;
setDesc(flows.find((f) => f.id === tabId).description);
setDesc(flows.find((f) => f.id === tabId)?.description);
setDescription(event.target.value);
};

8
src/frontend/src/components/cardComponent/index.tsx
View file

@ -10,18 +10,14 @@ import {
CardHeader,
CardTitle,
} from "../ui/card";
import { cardComponentPropsType } from "../../types/components";
export const CardComponent = ({
flow,
id,
onDelete,
button,
}: {
flow: FlowType;
id: string;
onDelete?: () => void;
button?: JSX.Element;
}): JSX.Element => {
}: cardComponentPropsType): JSX.Element => {
const { removeFlow } = useContext(TabsContext);
return (

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

@ -103,7 +103,7 @@ export default function CodeTabsComponent({
function openAccordions() {
let accordionsToOpen = [];
tweaks.tweak.current.forEach((el) => {
tweaks?.tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key);
@ -193,9 +193,9 @@ export default function CodeTabsComponent({
: "overflow-hidden"
)}
>
{data.map((t: any, index) => (
{data?.map((t: any, index) => (
<div className="px-3" key={index}>
{tweaks.tweaksList.current.includes(t["data"]["id"]) && (
{tweaks?.tweaksList.current.includes(t["data"]["id"]) && (
<AccordionComponent
trigger={t["data"]["id"]}
open={openAccordion}
@ -647,7 +647,7 @@ export default function CodeTabsComponent({
</AccordionComponent>
)}
{tweaks.tweaksList.current.length === 0 && (
{tweaks?.tweaksList.current.length === 0 && (
<>
<div className="pt-3">
No tweaks are available for this flow.

2
src/frontend/src/components/ui/rename-label.tsx
View file

@ -23,7 +23,7 @@ export default function RenameLabel(props) {
});
if (inputRef.current) {
setTimeout(() => {
inputRef.current.focus();
inputRef.current?.focus();
}, 100);
}
}

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

@ -53,7 +53,7 @@ const EditNodeModal = forwardRef(
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
false;
function changeAdvanced(n) {
function changeAdvanced(n: string): void {
setMyData((old) => {
let newData = cloneDeep(old);
newData.node.template[n].advanced = !newData.node.template[n].advanced;
@ -61,7 +61,7 @@ const EditNodeModal = forwardRef(
});
}
const handleOnNewValue = (newValue: any, name) => {
const handleOnNewValue = (newValue: string | string[] | boolean, name: string) => {
setMyData((old) => {
let newData = cloneDeep(old);
newData.node.template[name].value = newValue;
@ -115,7 +115,7 @@ const EditNodeModal = forwardRef(
.filter(
(t) =>
t.charAt(0) !== "_" &&
myData.node.template[t].show &&
myData.node?.template[t].show &&
(myData.node.template[t].type === "str" ||
myData.node.template[t].type === "bool" ||
myData.node.template[t].type === "float" ||
@ -127,12 +127,12 @@ const EditNodeModal = forwardRef(
.map((n, i) => (
<TableRow key={i} className="h-10">
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
{myData.node.template[n].name
{myData.node?.template[n].name
? myData.node.template[n].name
: myData.node.template[n].display_name}
: myData.node?.template[n].display_name}
</TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{myData.node.template[n].type === "str" &&
{myData.node?.template[n].type === "str" &&
!myData.node.template[n].options ? (
<div className="mx-auto">
{myData.node.template[n].list ? (
@ -177,7 +177,7 @@ const EditNodeModal = forwardRef(
/>
)}
</div>
) : myData.node.template[n].type === "bool" ? (
) : myData.node?.template[n].type === "bool" ? (
<div className="ml-auto">
{" "}
<ToggleShadComponent
@ -189,7 +189,7 @@ const EditNodeModal = forwardRef(
size="small"
/>
</div>
) : myData.node.template[n].type === "float" ? (
) : myData.node?.template[n].type === "float" ? (
<div className="mx-auto">
<FloatComponent
disabled={disabled}
@ -200,7 +200,7 @@ const EditNodeModal = forwardRef(
}}
/>
</div>
) : myData.node.template[n].type === "str" &&
) : myData.node?.template[n].type === "str" &&
myData.node.template[n].options ? (
<div className="mx-auto">
<Dropdown
@ -214,7 +214,7 @@ const EditNodeModal = forwardRef(
}
></Dropdown>
</div>
) : myData.node.template[n].type === "int" ? (
) : myData.node?.template[n].type === "int" ? (
<div className="mx-auto">
<IntComponent
disabled={disabled}
@ -225,7 +225,7 @@ const EditNodeModal = forwardRef(
}}
/>
</div>
) : myData.node.template[n].type === "file" ? (
) : myData.node?.template[n].type === "file" ? (
<div className="mx-auto">
<InputFileComponent
editNode={true}
@ -243,7 +243,7 @@ const EditNodeModal = forwardRef(
}}
></InputFileComponent>
</div>
) : myData.node.template[n].type === "prompt" ? (
) : myData.node?.template[n].type === "prompt" ? (
<div className="mx-auto">
<PromptAreaComponent
field_name={n}
@ -259,7 +259,7 @@ const EditNodeModal = forwardRef(
}}
/>
</div>
) : myData.node.template[n].type === "code" ? (
) : myData.node?.template[n].type === "code" ? (
<div className="mx-auto">
<CodeAreaComponent
disabled={disabled}
@ -270,7 +270,7 @@ const EditNodeModal = forwardRef(
}}
/>
</div>
) : myData.node.template[n].type === "Any" ? (
) : myData.node?.template[n].type === "Any" ? (
"-"
) : (
<div className="hidden"></div>
@ -279,7 +279,7 @@ const EditNodeModal = forwardRef(
<TableCell className="p-0 text-right">
<div className="items-center text-center">
<ToggleShadComponent
enabled={!myData.node.template[n].advanced}
enabled={!myData.node?.template[n].advanced}
setEnabled={(e) => changeAdvanced(n)}
disabled={disabled}
size="small"

6
src/frontend/src/modals/baseModal/index.tsx
View file

@ -9,7 +9,7 @@ import {
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { headerConstType } from "../../types/components";
import { modalHeaderType } from "../../types/components";
type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string };
@ -23,10 +23,10 @@ const Trigger: React.FC<ContentProps> = ({ children }) => {
return <>{children}</>;
};
const Header: React.FC<{ children: ReactNode; description: string }> = ({
const Header: React.FC<{ children: ReactNode; description: string | null }> = ({
children,
description,
}: headerConstType): JSX.Element => {
}: modalHeaderType): JSX.Element => {
return (
<DialogHeader>
<DialogTitle className="flex items-center">{children}</DialogTitle>

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

@ -12,9 +12,9 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref): JSX.Elemen
const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
useContext(TabsContext);
const [checked, setChecked] = useState(false);
const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
const [name, setName] = useState(flows.find((f) => f.id === tabId)?.name);
const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description
flows.find((f) => f.id === tabId)?.description
);
const [open, setOpen] = useState(false);
return (

18
src/frontend/src/modals/formModal/index.tsx
View file

@ -46,7 +46,7 @@ export default function FormModal({
const handleKeys = formKeysData.handle_keys;
const keyToUse = Object.keys(inputKeys).find(
(k) => !handleKeys.some((j) => j === k) && inputKeys[k] === ""
(k) => !handleKeys?.some((j) => j === k) && inputKeys[k] === ""
);
return inputKeys[keyToUse];
@ -311,7 +311,7 @@ export default function FormModal({
async function sendAll(data: sendAllProps): Promise<void> {
try {
if (ws) {
ws.current.send(JSON.stringify(data));
ws.current?.send(JSON.stringify(data));
}
} catch (error) {
setErrorData({
@ -349,7 +349,7 @@ export default function FormModal({
tabsState[flow.id].formKeysData.template
);
sendAll({
...reactFlowInstance.toObject(),
...reactFlowInstance?.toObject(),
inputs: inputs,
chatHistory,
name: flow.name,
@ -370,7 +370,7 @@ export default function FormModal({
}
function clearChat(): void {
setChatHistory([]);
ws.current.send(JSON.stringify({ clear_history: true }));
ws.current?.send(JSON.stringify({ clear_history: true }));
if (lockChat) setLockChat(false);
}
@ -451,7 +451,7 @@ export default function FormModal({
size="small"
disabled={tabsState[
id.current
].formKeysData.handle_keys.some((t) => t === i)}
].formKeysData.handle_keys?.some((t) => t === i)}
/>
</div>
</div>
@ -460,7 +460,7 @@ export default function FormModal({
keyValue={i}
>
<div className="file-component-tab-column">
{tabsState[id.current].formKeysData.handle_keys.some(
{tabsState[id.current].formKeysData.handle_keys?.some(
(t) => t === i
) && (
<div className="font-normal text-muted-foreground ">
@ -489,7 +489,7 @@ export default function FormModal({
</div>
)
)}
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
{tabsState[id.current].formKeysData.memory_keys?.map((i, k) => (
<div className="file-component-accordion-div" key={k}>
<AccordionComponent
trigger={
@ -512,7 +512,7 @@ export default function FormModal({
size="small"
disabled={tabsState[
id.current
].formKeysData.handle_keys.some((t) => t === i)}
].formKeysData.handle_keys?.some((t) => t === i)}
/>
</div>
</div>
@ -521,7 +521,7 @@ export default function FormModal({
keyValue={i}
>
<div className="file-component-tab-column">
{tabsState[id.current].formKeysData.handle_keys.some(
{tabsState[id.current].formKeysData.handle_keys?.some(
(t) => t === i
) && (
<div className="font-normal text-muted-foreground ">

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

@ -120,7 +120,7 @@ export default function GenericModal({
: "code-nohighlight";
}
function validatePrompt(closeModal: boolean) {
function validatePrompt(closeModal: boolean): void {
postValidatePrompt(field_name, inputValue, nodeClass)
.then((apiReturn) => {
if (apiReturn.data) {

11
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -6,6 +6,7 @@ import ReactFlow, {
Controls,
Edge,
EdgeChange,
Node,
NodeChange,
NodeDragHandler,
OnEdgesDelete,
@ -78,7 +79,7 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
lastCopiedSelection
) {
event.preventDefault();
let bounds = reactFlowWrapper.current.getBoundingClientRect();
let bounds = reactFlowWrapper.current?.getBoundingClientRect();
paste(lastCopiedSelection, {
x: position.x - bounds.left,
y: position.y - bounds.top,
@ -185,10 +186,10 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
...params,
style: { stroke: "#555" },
className:
(params.targetHandle.split("|")[0] === "Text"
(params.targetHandle?.split("|")[0] === "Text"
? "stroke-foreground "
: "stroke-foreground ") + " stroke-connection",
animated: params.targetHandle.split("|")[0] === "Text",
animated: params.targetHandle?.split("|")[0] === "Text",
},
eds
)
@ -234,7 +235,7 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
// Get the current bounds of the ReactFlow wrapper element
const reactflowBounds =
reactFlowWrapper.current.getBoundingClientRect();
reactFlowWrapper.current?.getBoundingClientRect();
// Extract the data from the drag event and parse it as a JSON object
let data: { type: string; node?: APIClassType } = JSON.parse(
@ -243,7 +244,7 @@ export default function Page({ flow }: { flow: FlowType }): JSX.Element {
// If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
// Calculate the position where the node should be created
const position = reactFlowInstance.project({
const position = reactFlowInstance?.project({
x: event.clientX - reactflowBounds.left,
y: event.clientY - reactflowBounds.top,
});

14
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -12,7 +12,7 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }: node
Object.keys(data.node.template).filter(
(t) =>
t.charAt(0) !== "_" &&
data.node.template[t].show &&
data.node?.template[t].show &&
(data.node.template[t].type === "str" ||
data.node.template[t].type === "bool" ||
data.node.template[t].type === "float" ||
@ -56,8 +56,8 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }: node
{
x: 50,
y: 10,
paneX: reactFlowInstance.getNode(data.id).position.x,
paneY: reactFlowInstance.getNode(data.id).position.y,
paneX: reactFlowInstance.getNode(data.id)?.position.x,
paneY: reactFlowInstance.getNode(data.id)?.position.y,
}
);
}}
@ -68,23 +68,23 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }: node
<ShadTooltip
content={
data.node.documentation === "" ? "Coming Soon" : "Documentation"
data.node?.documentation === "" ? "Coming Soon" : "Documentation"
}
side="top"
>
<a
className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(data.node.documentation === ""
(data.node?.documentation === ""
? " text-muted-foreground"
: " text-foreground")
)}
target="_blank"
rel="noopener noreferrer"
href={data.node.documentation}
href={data.node?.documentation}
// deactivate link if no documentation is provided
onClick={(event) => {
if (data.node.documentation === "") {
if (data.node?.documentation === "") {
event.preventDefault();
}
}}

4
src/frontend/src/types/alerts/index.ts
View file

@ -1,12 +1,12 @@
export type ErrorAlertType = {
title: string;
list: Array<string>;
list: Array<string> | undefined;
id: string;
removeAlert: (id: string) => void;
};
export type NoticeAlertType = {
title: string;
link: string;
link: string | undefined;
id: string;
removeAlert: (id: string) => void;
};

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

@ -3,6 +3,7 @@ import { APIClassType, APITemplateType } from "../api";
import { FlowStyleType, FlowType, NodeDataType } from "../flow/index";
import { typesContextType } from "../typesContext";
import { ChatMessageType } from "../chat";
import { ReactFlowJsonObject } from "reactflow";
export type InputComponentType = {
value: string;
@ -16,7 +17,7 @@ export type InputComponentType = {
export type ToggleComponentType = {
enabled: boolean;
setEnabled: (state: boolean) => void;
disabled: boolean;
disabled: boolean | undefined;
size: "small" | "medium" | "large";
};
export type DropDownComponentType = {
@ -34,12 +35,12 @@ export type ParameterComponentType = {
id: string;
color: string;
left: boolean;
type: string;
type: string | undefined;
required?: boolean;
name?: string;
tooltipTitle: string;
tooltipTitle: string | undefined;
dataContext?: typesContextType;
optionalHandle?: Array<String>;
optionalHandle?: Array<String> | null;
info?: string;
};
export type InputListComponentType = {
@ -238,7 +239,7 @@ export type chatTriggerPropType = {
};
export type headerFlowsType = {
data: object;
data: ReactFlowJsonObject;
description: string;
id: string;
name: string;
@ -288,7 +289,7 @@ export type fileCardPropsType = {
export type nodeToolbarPropsType = {
data: NodeDataType;
deleteNode: (idx: string) => void;
setData: (newState: {}) => void;
setData: (newState: NodeDataType) => void;
};
export type parsedDataType = {
@ -309,16 +310,16 @@ export type iconsType = {
[key: string]: React.ElementType;
};
export type headerConstType = {
export type modalHeaderType = {
children: ReactNode;
description: string;
description: string | null;
};
export type codeAreaModalPropsType = {
setValue: (value: string) => void;
value: string;
nodeClass: APIClassType;
setNodeClass: (Class: APIClassType) => void;
nodeClass: APIClassType | undefined;
setNodeClass: (Class: APIClassType) => void | undefined;
children: ReactNode;
};
@ -361,3 +362,14 @@ export type FlowSettingsPropsType = {
open: boolean;
setOpen: (open: boolean) => void;
};
export type groupDataType = {
[char: string]: string;
}
export type cardComponentPropsType = {
flow: FlowType;
id: string;
onDelete?: () => void;
button?: JSX.Element;
};

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

@ -24,8 +24,8 @@ export function cleanEdges({
if (targetHandle) {
const field = targetHandle.split("|")[1];
const id =
(targetNode.data.node.template[field]?.input_types?.join(";") ??
targetNode.data.node.template[field]?.type) +
(targetNode.data.node?.template[field]?.input_types?.join(";") ??
targetNode.data.node?.template[field]?.type) +
"|" +
field +
"|" +
@ -38,7 +38,7 @@ export function cleanEdges({
const id = [
sourceNode.data.type,
sourceNode.data.id,
...sourceNode.data.node.base_classes,
...sourceNode.data.node?.base_classes,
].join("|");
if (id !== sourceHandle) {
newEdges = newEdges.filter((e) => e.id !== edge.id);
@ -55,19 +55,19 @@ export function isValidConnection(
) {
if (
targetHandle
.split("|")[0]
?.split("|")[0]
.split(";")
.some((n) => n === sourceHandle.split("|")[0]) ||
.some((n) => n === sourceHandle?.split("|")[0]) ||
sourceHandle
.split("|")
?.split("|")
.slice(2)
.some((t) =>
targetHandle
.split("|")[0]
?.split("|")[0]
.split(";")
.some((n) => n === t)
) ||
targetHandle.split("|")[0] === "str"
targetHandle?.split("|")[0] === "str"
) {
let targetNode = reactFlowInstance?.getNode(target)?.data?.node;
if (!targetNode) {
@ -79,11 +79,11 @@ export function isValidConnection(
return true;
}
} else if (
(!targetNode.template[targetHandle.split("|")[1]].list &&
(!targetNode.template[targetHandle?.split("|")[1]].list &&
!reactFlowInstance
.getEdges()
.find((e) => e.targetHandle === targetHandle)) ||
targetNode.template[targetHandle.split("|")[1]].list
targetNode.template[targetHandle?.split("|")[1]].list
) {
return true;
}
@ -195,7 +195,7 @@ export function validateNode(
.getEdges()
.some(
(e) =>
e.targetHandle.split("|")[1] === t &&
e.targetHandle?.split("|")[1] === t &&
e.targetHandle.split("|")[2] === n.id
)
? [

9
src/frontend/src/utils/utils.ts
View file

@ -3,13 +3,14 @@ import { twMerge } from "tailwind-merge";
import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
import {
IVarHighlightType,
groupDataType,
groupedObjType,
tweakType,
} from "../types/components";
import { FlowType } from "../types/flow";
import { TabsState } from "../types/tabs";
import { buildTweaks } from "./reactflowUtils";
import { APIClassType } from "../types/api";
import { APIClassType, APIObjectType, APITemplateType } from "../types/api";
export function classNames(...classes: Array<string>): string {
return classes.filter(Boolean).join(" ");
@ -93,7 +94,7 @@ export function checkUpperWords(str: string): string {
export const isWrappedWithClass = (event: any, className: string | undefined) =>
event.target.closest(`.${className}`);
export function groupByFamily(data: APIClassType, baseClasses: string, left: boolean, type: string): groupedObjType[] {
export function groupByFamily(data: groupDataType, baseClasses: string, left: boolean, type: string): groupedObjType[] {
let parentOutput: string;
let arrOfParent: string[] = [];
let arrOfType: { family: string; type: string; component: string }[] = [];
@ -198,7 +199,7 @@ export function groupByFamily(data: APIClassType, baseClasses: string, left: boo
groupedArray.forEach((object, index, self) => {
const findObj = arrOfLength.find((x) => x.type === object.family);
if (object.component.length === findObj.length) {
if (object.component.length === findObj?.length) {
self[index]["type"] = "";
} else {
self[index]["type"] = object.component.join(", ");
@ -209,7 +210,6 @@ export function groupByFamily(data: APIClassType, baseClasses: string, left: boo
}
export function buildInputs(tabsState: TabsState, id: string): string {
console.log(tabsState)
return tabsState &&
tabsState[id] &&
tabsState[id].formKeysData &&
@ -352,7 +352,6 @@ export function getCurlCode(
tweak?: any[],
tabsState?: TabsState
): string {
console.log(tweak)
const flowId = flow.id;
const tweaks = buildTweaks(flow);
const inputs = buildInputs(tabsState, flow.id);

2
src/frontend/tsconfig.json
View file

@ -6,7 +6,7 @@
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",