{
+ data.node = nodeClass;
+ }}
+ nodeClass={data.node}
disabled={disabled}
editNode={true}
value={myData.node.template[n].value ?? ""}
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 15c0984eac..f2f566e808 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -160,6 +160,11 @@ export default function ModalField({
) : type === "code" ? (
{
+ data.node = nodeClass;
+ }}
+ nodeClass={data.node}
disabled={false}
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 45f9353db8..4b20c8688d 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -112,8 +112,9 @@ function BaseModal({
{ContentChild}
-
- {ContentFooter}
+ {ContentFooter && (
+ {ContentFooter}
+ )}
);
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 39b373107c..6b36bac642 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -3,14 +3,16 @@ import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight";
-import { ReactNode, useContext, useState } from "react";
+// import "ace-builds/webpack-resolver";
+import { ReactNode, useContext, useEffect, useState } from "react";
import AceEditor from "react-ace";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
-import { postValidateCode } from "../../controllers/API";
+import { typesContext } from "../../contexts/typesContext";
+import { postCustomComponent, postValidateCode } from "../../controllers/API";
import { APIClassType } from "../../types/api";
import BaseModal from "../baseModal";
@@ -20,18 +22,34 @@ export default function CodeAreaModal({
nodeClass,
setNodeClass,
children,
+ dynamic,
}: {
setValue: (value: string) => void;
value: string;
- nodeClass: APIClassType;
+ nodeClass?: APIClassType;
children: ReactNode;
- setNodeClass: (Class: APIClassType) => void;
+ setNodeClass?: (Class: APIClassType) => void;
+ dynamic?: boolean;
}) {
const [code, setCode] = useState(value);
const { dark } = useContext(darkContext);
+ const { reactFlowInstance } = useContext(typesContext);
+ const [height, setHeight] = useState(null);
const { setErrorData, setSuccessData } = useContext(alertContext);
+ const [error, setError] = useState<{
+ detail: { error: string; traceback: string };
+ }>(null);
- function handleClick() {
+ useEffect(() => {
+ // if nodeClass.template has more fields other than code and dynamic is true
+ // do not run handleClick
+ if (dynamic && Object.keys(nodeClass.template).length > 2) {
+ return;
+ }
+ processCode();
+ }, []);
+
+ function processNonDynamicField() {
postValidateCode(code)
.then((apiReturn) => {
if (apiReturn.data) {
@@ -41,8 +59,9 @@ export default function CodeAreaModal({
setSuccessData({
title: "Code is ready to run",
});
- setValue(code);
setOpen(false);
+ setValue(code);
+ // setValue(code);
} else {
if (funcErrors.length !== 0) {
setErrorData({
@@ -70,6 +89,50 @@ export default function CodeAreaModal({
});
}
+ function processDynamicField() {
+ postCustomComponent(code, nodeClass)
+ .then((apiReturn) => {
+ const { data } = apiReturn;
+ if (data) {
+ setNodeClass(data);
+ setValue(code);
+ setError({ detail: { error: undefined, traceback: undefined } });
+ setOpen(false);
+ }
+ })
+ .catch((err) => {
+ setError(err.response.data);
+ });
+ }
+
+ function processCode() {
+ if (!dynamic) {
+ processNonDynamicField();
+ } else {
+ processDynamicField();
+ }
+ }
+
+ function handleClick() {
+ processCode();
+ }
+
+ useEffect(() => {
+ // Function to be executed after the state changes
+ const delayedFunction = setTimeout(() => {
+ if (error?.detail.error !== undefined) {
+ //trigger to update the height, does not really apply any height
+ setHeight("90%");
+ }
+ //600 to happen after the transition of 500ms
+ }, 600);
+
+ // Cleanup function to clear the timeout if the component unmounts or the state changes again
+ return () => {
+ clearTimeout(delayedFunction);
+ };
+ }, [error, setHeight]);
+
const [open, setOpen] = useState(false);
return (
@@ -89,6 +152,7 @@ export default function CodeAreaModal({
{
setCode(value);
}}
- className="h-full w-full rounded-lg border-[1px] border-border custom-scroll"
+ className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
/>
+
+
+
+ {error?.detail?.error}
+
+
+
+ {error?.detail?.traceback}
+
+
+
+