diff --git a/frontend/src/components/ShuffleCodeEditor1.jsx b/frontend/src/components/ShuffleCodeEditor1.jsx index 51b15530..2bbc5587 100644 --- a/frontend/src/components/ShuffleCodeEditor1.jsx +++ b/frontend/src/components/ShuffleCodeEditor1.jsx @@ -18,7 +18,7 @@ import { Collapse, } from '@mui/material'; import { Context } from '../context/ContextApi.jsx'; -import {getTheme} from '../theme.jsx'; +import { getTheme } from '../theme.jsx'; import Checkbox from '@mui/material/Checkbox'; import { isMobile } from "react-device-detect" import { NestedMenuItem } from "mui-nested-menu" @@ -27,7 +27,7 @@ import { SetJsonDotnotation } from "../views/AngularWorkflow.jsx"; import Draggable from "react-draggable"; import { - Storage as StorageIcon, + Storage as StorageIcon, FullscreenExit as FullscreenExitIcon, Extension as ExtensionIcon, Apps as AppsIcon, @@ -46,7 +46,7 @@ import { DragIndicator as DragIndicatorIcon, RestartAlt as RestartAltIcon, ArrowForward as ArrowForwardIcon, - KeyboardReturn as KeyboardReturnIcon, + KeyboardReturn as KeyboardReturnIcon, FormatIndentIncrease as FormatIndentIncreaseIcon, Fullscreen as FullscreenIcon, } from '@mui/icons-material'; @@ -153,7 +153,7 @@ const CodeEditor = (props) => { if (!content || typeof content !== 'string' || content.trim().length === 0) { return content; } - + try { // Check if content looks like JSON (starts with { or [) const trimmedContent = content.trim(); @@ -165,7 +165,7 @@ const CodeEditor = (props) => { return IndentJsonLikeString(content, 2); } } - + // Return original content if it doesn't look like JSON return content; } catch (error) { @@ -179,7 +179,7 @@ const CodeEditor = (props) => { const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata); // const {codelang, setcodelang} = props - const {themeMode, supportEmail} = useContext(Context) + const { themeMode, supportEmail } = useContext(Context) const theme = getTheme(themeMode) const [validation, setValidation] = React.useState(false); @@ -370,9 +370,9 @@ const CodeEditor = (props) => { setMainVariables(tmpVariables) } - const handleKeyDown = (event) => { - if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { - event.preventDefault() + const handleKeyDown = (event) => { + if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { + event.preventDefault() const tryItButton = document.getElementById("try-it-button") if (tryItButton !== undefined && tryItButton !== null) { tryItButton.click() @@ -382,7 +382,7 @@ const CodeEditor = (props) => { // Remove the original useEffect for actionlist since we'll update on action/trigger changes useEffect(() => { - document.addEventListener("keydown", handleKeyDown) + document.addEventListener("keydown", handleKeyDown) updateAvailableVariables(actionlist) }, []) @@ -972,7 +972,11 @@ const CodeEditor = (props) => { // Resolve the child paths/variables first, // So that "$a.b.c" is handled before "$a.b" and then "$a" // Replace "$parent.child" before "$parent" so "$parent.child" doesn't become "parentValue.child" (which can't be matched later). - found.sort((a, b) => b.length - a.length) + console.log("FOUND PROD BEFORE SORT:", found) + found.sort((a, b) => { + return Number(b.length) - Number(a.length) + }) + console.log("FOUND PROD AFTER SORT:", found) //console.log("FOUND: ", found) try { @@ -983,19 +987,19 @@ const CodeEditor = (props) => { var valuefound = false - // First check if it's a workflow variable - if (actionlist !== undefined && actionlist.length > 0) { - const workflowVar = actionlist?.find(item => - item.type === "workflow_variable" && + // First check if it's a workflow variable + if (actionlist !== undefined && actionlist.length > 0) { + const workflowVar = actionlist?.find(item => + item.type === "workflow_variable" && `$${item.autocomplete.toLowerCase()}` === fixedVariable.toLowerCase() ) - + if (workflowVar && workflowVar.example) { valuefound = true try { // Try to parse the example value if it's stored as a JSON string - if (typeof workflowVar.example === "string" && - (workflowVar.example.startsWith("[") || workflowVar.example.startsWith("{"))) { + if (typeof workflowVar.example === "string" && + (workflowVar.example.startsWith("[") || workflowVar.example.startsWith("{"))) { const parsedExample = JSON.parse(workflowVar.example) input = input.replace(found[i], JSON.stringify(parsedExample), -1) } else { @@ -1029,7 +1033,7 @@ const CodeEditor = (props) => { foundlocation = j break } - + // FIXME: There is something wrong here with: // $variable.# // vs @@ -1069,7 +1073,7 @@ const CodeEditor = (props) => { const replacedSlice = input.slice(foundlocation, input.length).replace(fixedVariable, newvalue, 1) input = input.slice(0, foundlocation) + replacedSlice } - } + } } catch (e) { console.log("Replace error: ", e) } @@ -1082,26 +1086,26 @@ const CodeEditor = (props) => { var shouldbreak = false for (var k = 0; k < actionlist.length; k++) { var parsedPaths = [] - - // Handle both workflow variables and regular actions - if (actionlist[k].type === "workflow_variable") { - // Try to parse the value if it's a string that could be JSON - if (typeof actionlist[k].value === "string") { - try { - const parsedValue = JSON.parse(actionlist[k].value) - if (typeof parsedValue === "object") { - parsedPaths = GetParsedPaths(parsedValue, ""); - } - } catch (e) { - // Not valid JSON, use the value directly - parsedPaths = GetParsedPaths(actionlist[k].value, ""); + + // Handle both workflow variables and regular actions + if (actionlist[k].type === "workflow_variable") { + // Try to parse the value if it's a string that could be JSON + if (typeof actionlist[k].value === "string") { + try { + const parsedValue = JSON.parse(actionlist[k].value) + if (typeof parsedValue === "object") { + parsedPaths = GetParsedPaths(parsedValue, ""); } - } else if (typeof actionlist[k].value === "object") { + } catch (e) { + // Not valid JSON, use the value directly parsedPaths = GetParsedPaths(actionlist[k].value, ""); } - } else if (typeof actionlist[k].example === "object") { - parsedPaths = GetParsedPaths(actionlist[k].example, ""); - } + } else if (typeof actionlist[k].value === "object") { + parsedPaths = GetParsedPaths(actionlist[k].value, ""); + } + } else if (typeof actionlist[k].example === "object") { + parsedPaths = GetParsedPaths(actionlist[k].example, ""); + } for (var key in parsedPaths) { const fullpath = "$" + actionlist[k].autocomplete.toLowerCase() + parsedPaths[key].autocomplete.toLowerCase() @@ -1115,22 +1119,22 @@ const CodeEditor = (props) => { var new_input = "" try { - const sourceData = actionlist[k].type === "workflow_variable" ? - (() => { - // Try to parse the value if it's a JSON string - if (typeof actionlist[k].value === "string") { - try { - return JSON.parse(actionlist[k].value); - } catch (e) { - // If parsing fails, return the original string value - return actionlist[k].value; + const sourceData = actionlist[k].type === "workflow_variable" ? + (() => { + // Try to parse the value if it's a JSON string + if (typeof actionlist[k].value === "string") { + try { + return JSON.parse(actionlist[k].value); + } catch (e) { + // If parsing fails, return the original string value + return actionlist[k].value; + } } - } - return actionlist[k].value; - })() : - actionlist[k].example; - - new_input = FindJsonPath(fullpath, sourceData) + return actionlist[k].value; + })() : + actionlist[k].example; + + new_input = FindJsonPath(fullpath, sourceData) } catch (e) { console.log("ERR IN INPUT: ", e) } @@ -1437,85 +1441,85 @@ const CodeEditor = (props) => { return ( { - e.preventDefault() - // Check if inside div.ace_content - if (e.srcElement.className === "ace_content") { - // Input on the correct line. Each line is: - // Show some tooltip at mouse cursor that shows "Insert Action" + style={{ + position: "absolute", + zIndex: 15000, + }} + onDrag={(e) => { + e.preventDefault() + // Check if inside div.ace_content + if (e.srcElement.className === "ace_content") { + // Input on the correct line. Each line is: + // Show some tooltip at mouse cursor that shows "Insert Action" - // Append the text to the DOM - } else { - //console.log("PAGEX: ", e.pageX, e.pageY) - //console.log("OffsetX: ", e.offsetX, e.offsetY) - //console.log("E: ", e) - } + // Append the text to the DOM + } else { + //console.log("PAGEX: ", e.pageX, e.pageY) + //console.log("OffsetX: ", e.offsetX, e.offsetY) + //console.log("E: ", e) + } - if (!dragging) { - setDragging(true) - } - }} - onStop={(e) => { - if (e.srcElement.className === "ace_content") { - console.log("DRAG STOP IN CONTENT!", e.srcElement.className) + if (!dragging) { + setDragging(true) + } + }} + onStop={(e) => { + if (e.srcElement.className === "ace_content") { + console.log("DRAG STOP IN CONTENT!", e.srcElement.className) - const usedposition = e.offsetY - if (usedposition === undefined || usedposition === null) { - toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`) - return - } + const usedposition = e.offsetY + if (usedposition === undefined || usedposition === null) { + toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`) + return + } - if (usedposition === 0) { - usedposition = 1 - } + if (usedposition === 0) { + usedposition = 1 + } - const lineheight = 15 - const codedatasplit = localcodedata.split('\n') - if (codedatasplit === undefined || codedatasplit === null || codedatasplit.length === 0) { - return - } + const lineheight = 15 + const codedatasplit = localcodedata.split('\n') + if (codedatasplit === undefined || codedatasplit === null || codedatasplit.length === 0) { + return + } - // Int - const lineposition = parseInt(usedposition/lineheight) + // Int + const lineposition = parseInt(usedposition / lineheight) - // Find the correct line - if (lineposition > codedatasplit.length) { - codedatasplit[codedatasplit.length-1] += value - } else { - codedatasplit[lineposition] += value - } + // Find the correct line + if (lineposition > codedatasplit.length) { + codedatasplit[codedatasplit.length - 1] += value + } else { + codedatasplit[lineposition] += value + } - //e.srcElement.layerY - setlocalcodedata(codedatasplit.join('\n')) - } + //e.srcElement.layerY + setlocalcodedata(codedatasplit.join('\n')) + } - setDragging(false) - }} - dragging={dragging} - position={{ - x: 0, - y: 0, - }} - onMouseHover={() => { - setHovering(true) - }} - onMouseLeave={() => { - setHovering(false) - }} + setDragging(false) + }} + dragging={dragging} + position={{ + x: 0, + y: 0, + }} + onMouseHover={() => { + setHovering(true) + }} + onMouseLeave={() => { + setHovering(false) + }} > -
{value} @@ -1525,56 +1529,56 @@ const CodeEditor = (props) => { } const IndentJsonLikeString = (input, indentSize = 2) => { - const indent = ' '.repeat(indentSize); - let level = 0; - let inString = false; - let escapeNext = false; - let result = ''; + const indent = ' '.repeat(indentSize); + let level = 0; + let inString = false; + let escapeNext = false; + let result = ''; - for (let i = 0; i < input.length; i++) { - let char = input[i]; + for (let i = 0; i < input.length; i++) { + let char = input[i]; - if (escapeNext) { - result += char; - escapeNext = false; - continue; + if (escapeNext) { + result += char; + escapeNext = false; + continue; + } + + if (char === '\\') { + escapeNext = true; + result += char; + continue; + } + + if (char === '"') { + inString = !inString; + result += char; + continue; + } + + if (!inString) { + if (char === '{' || char === '[') { + result += char + '\n' + indent.repeat(++level); + continue; + } else if (char === '}' || char === ']') { + result += '\n' + indent.repeat(--level) + char; + continue; + } else if (char === ',') { + result += char + '\n' + indent.repeat(level); + continue; + } else if (char === ':') { + result += ': '; + continue; + } else if (char === ' ' || char === '\t' || char === '\n' || char === '\r') { + // Skip whitespace characters when not in string + continue; + } + } + + result += char; } - if (char === '\\') { - escapeNext = true; - result += char; - continue; - } - - if (char === '"') { - inString = !inString; - result += char; - continue; - } - - if (!inString) { - if (char === '{' || char === '[') { - result += char + '\n' + indent.repeat(++level); - continue; - } else if (char === '}' || char === ']') { - result += '\n' + indent.repeat(--level) + char; - continue; - } else if (char === ',') { - result += char + '\n' + indent.repeat(level); - continue; - } else if (char === ':') { - result += ': '; - continue; - } else if (char === ' ' || char === '\t' || char === '\n' || char === '\r') { - // Skip whitespace characters when not in string - continue; - } - } - - result += char; - } - - return result; + return result; } @@ -1585,16 +1589,16 @@ const CodeEditor = (props) => { return ( -
+
{ setExpanded(!expanded) }}> - + {innerdata?.name}
@@ -1622,8 +1626,8 @@ const CodeEditor = (props) => { aria-labelledby="draggable-dialog-title" // disableBackdropClick={true} disableEnforceFocus={true} - style={{ - pointerEvents: "none", + style={{ + pointerEvents: "none", zIndex: activeDialog === "codeeditor" ? 1200 : 1100, }} hideBackdrop={true} @@ -1673,7 +1677,7 @@ const CodeEditor = (props) => { : null} - {fullScreenModeEnabled ? null : + {fullScreenModeEnabled ? null : {
- {sourceDataOpen ? + {sourceDataOpen ?
Source Data @@ -1781,7 +1785,7 @@ const CodeEditor = (props) => { }; const handleActionHover = (inside, actionId) => { - }; + }; const handleMouseover = () => { if (innerdata.type === "Execution Argument") { @@ -1802,20 +1806,20 @@ const CodeEditor = (props) => { var parsedPaths = []; if (innerdata.type === "workflow_variable") { // Try to parse the value if it's a string that could be JSON - if (typeof innerdata.value === "string") { + if (typeof innerdata.value === "string") { try { - const parsedValue = JSON.parse(innerdata.value) - if (typeof parsedValue === "object") { - parsedPaths = GetParsedPaths(parsedValue, ""); - } + const parsedValue = JSON.parse(innerdata.value) + if (typeof parsedValue === "object") { + parsedPaths = GetParsedPaths(parsedValue, ""); + } } catch (e) { - // Not valid JSON, use the value directly - parsedPaths = GetParsedPaths(innerdata.value, ""); + // Not valid JSON, use the value directly + parsedPaths = GetParsedPaths(innerdata.value, ""); } - } else if (typeof innerdata.value === "object") { + } else if (typeof innerdata.value === "object") { parsedPaths = GetParsedPaths(innerdata.value, ""); - } - } else if (typeof innerdata.example === "object") { + } + } else if (typeof innerdata.example === "object") { parsedPaths = GetParsedPaths(innerdata.example, ""); } @@ -1830,7 +1834,7 @@ const CodeEditor = (props) => { ) })}
- : null} + : null}
{isFileEditor ? @@ -1858,7 +1862,7 @@ const CodeEditor = (props) => { height: 50, width: 50, right: 25, - top: 90, + top: 90, zIndex: 5000, }} disabled={localcodedata === undefined || localcodedata === null || localcodedata.length === 0} @@ -1902,7 +1906,7 @@ const CodeEditor = (props) => { {isFileEditor || isWorkflowEditor ? null :
- {userdata !== undefined && userdata !== null && userdata.support === true ? + {userdata !== undefined && userdata !== null && userdata.support === true ? - : null} + : null}
} -
{ onDrop={(e) => { console.log("DROP: ", e) }} - > + > {(availableVariables !== undefined && availableVariables !== null && availableVariables.length > 0) || isFileEditor || isWorkflowEditor ? ( { backgroundColor: "rgba(40,40,40,1)", zIndex: activeDialog === "codeeditor" ? 1200 : 1100, - + }} onLoad={(editor) => { highlight_variables(localcodedata) @@ -2465,12 +2469,12 @@ const CodeEditor = (props) => {
{isFileEditor || isWorkflowEditor ? null : -
@@ -2486,59 +2490,59 @@ const CodeEditor = (props) => { }} >
- {actionId === null && triggerId === null ? -
- {`Condition ${selectedEdge?.conditions?.findIndex(cond => cond.condition.id === conditionId) + 1 || "0"}`} - {/* Source node image */} - {selectedEdge?.source ? - Source - : null - } + {actionId === null && triggerId === null ? +
+ {`Condition ${selectedEdge?.conditions?.findIndex(cond => cond.condition.id === conditionId) + 1 || "0"}`} + {/* Source node image */} + {selectedEdge?.source ? + Source + : null + } - {/* Add arrow icon */} - { - selectedEdge && Object.keys(selectedEdge).length > 0 ? - 0 ? + : null - } + } - {/* Destination node image */} - {selectedEdge?.target ? - Destination - : null - } -
- : - - {selectedAction.name === "execute_python" || selectedAction.name === "execute_bash" ? - "Code to run" : - triggerId ? + {/* Destination node image */} + {selectedEdge?.target ? + Destination + : null + } +
+ : + + {selectedAction.name === "execute_python" || selectedAction.name === "execute_bash" ? + "Code to run" : + triggerId ? `Output: ${triggerName?.replaceAll("_", " ").slice(0, 1).toUpperCase() + triggerName?.replaceAll("_", " ").slice(1)} (${triggerField})` : `Output: ${appName?.replaceAll("_", " ").slice(0, 1).toUpperCase() + appName?.replaceAll("_", " ").slice(1)} (${fieldName})` } @@ -2570,7 +2574,7 @@ const CodeEditor = (props) => { backdropFilter: "blur(8px)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)", transition: "all 0.2s ease", - paddingRight: 20, + paddingRight: 20, color: "#FF8544", borderRadius: theme.palette?.borderRadius, "&:hover": { @@ -2592,18 +2596,18 @@ const CodeEditor = (props) => { - {selectedAction === undefined ? Try it : selectedAction.name === "execute_python" ? "Run Python Code" : selectedAction.name === "execute_bash" ? "Run Bash" : "Try it"} - - Ctrl + - + {selectedAction === undefined ? Try it : selectedAction.name === "execute_python" ? "Run Python Code" : selectedAction.name === "execute_bash" ? "Run Bash" : "Try it"} + + Ctrl + + } @@ -2713,7 +2717,7 @@ const CodeEditor = (props) => { Output is based on the last VALID run of the node(s) you are referencing. Refresh the page to get updated Variable values.  {selectedAction?.name === "execute_python" ? "For Python: exit() to stop a python script ANYWHERE." - : null} + : null} No test output yet. @@ -2735,7 +2739,7 @@ const CodeEditor = (props) => {
-
+