Fixed code editor and small ui changes in workflow ui

frontend/src/components/ParsedAction.jsx

@@ -117,7 +117,7 @@ const openApiFieldDesc = "Generated by OpenAPI body example";
 const ParsedAction = (props) => {
   const {
     workflow,
-		files,
+	files,
     setWorkflow,
     setAction,
     setSelectedAction,
@@ -456,14 +456,33 @@ const ParsedAction = (props) => {
 
         if (workflow.execution_variables !== null && workflow.execution_variables !== undefined && workflow.execution_variables.length > 0) {
           for (let [key,keyval] in Object.entries(workflow.execution_variables)) {
-            const item = workflow.execution_variables[key];
+            const item = workflow.execution_variables[key]
+
+			var exampleoutput = ""
+			for (let execkey in workflowExecutions) {
+				const exec = workflowExecutions[execkey]
+				if (exec["execution_variables"] === undefined || exec["execution_variables"] === null) {
+					continue
+				}
+
+				const foundExec = exec.execution_variables.find((exvar) => exvar.name === item.name)
+				if (!foundExec) {
+					continue
+				}
+
+				if (foundExec.value !== undefined && foundExec.value !== null && foundExec.value.length > 0) {
+					exampleoutput = foundExec.value
+					break
+				}
+			}
+
             actionlist.push({
               type: "execution_variable",
               name: item.name,
               value: item.value,
               id: item.id,
               autocomplete: `${item.name.split(" ").join("_")}`,
-              example: "",
+              example: exampleoutput,
             });
           }
         }
@@ -2711,11 +2730,39 @@ const ParsedAction = (props) => {
 		)
 	}
 
-  //const CustomPopper = function (props) {
+  const sortByCategoryLabel = (a, b) => {
-  //	const classes = useStyles()
+	  const aHasCategoryLabel = a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0
-  //	return <Popper {...props} className={classes.root} placement="bottom" />
+	  const bHasCategoryLabel = b.category_label !== undefined && b.category_label !== null && b.category_label.length > 0
-  //}
+
-  //console.log("env: ", selectedActionEnvironment)
+	  // Sort by existence and length of "category_label"
+	  if (aHasCategoryLabel && !bHasCategoryLabel) {
+		return -1
+	  } else if (!aHasCategoryLabel && bHasCategoryLabel) {
+		return 1
+	  } else {
+		return 0
+	  }
+  }
+
+	// Function to deduplicate based on the "name" field
+	const deduplicateByName = (array) => {
+	  const uniqueNames = {};
+	  return array.filter(item => {
+		if (!item.hasOwnProperty('name') || !item.name.length) {
+		  return true
+		}
+		if (!uniqueNames[item.name]) {
+		  uniqueNames[item.name] = true
+		  return true
+		}
+		return false
+	  })
+	}
+
+  // Gets the most important actions first
+  const renderedActionOptions = deduplicateByName((selectedApp.actions === undefined || selectedApp.actions === null ? [] : selectedApp.actions.filter((a) => a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(selectedApp.actions, "label"))).sort(sortByCategoryLabel))
+
+
 	
   var baselabel = selectedAction.label;
   return (
@@ -2743,7 +2790,7 @@ const ParsedAction = (props) => {
                   onClick={() => {
                     if (workflowExecutions.length > 0) {
                       // Look for the ID
-                      const found = false;
+                      var found = false;
                       for (let [key,keyval] in Object.entries(workflowExecutions)) {
                         if (workflowExecutions[key].results === undefined || workflowExecutions[key].results === null) {
                           continue;
@@ -2758,7 +2805,6 @@ const ParsedAction = (props) => {
                         }
 
 						const oldstartnode = cy.getElementById(selectedAction.id);
-						console.log("FOUND NODe: ", oldstartnode)
 						if (oldstartnode !== undefined && oldstartnode !== null) {
 							const foundname = oldstartnode.data("label")
 							if (foundname !== undefined && foundname !== null) {
@@ -2769,10 +2815,16 @@ const ParsedAction = (props) => {
                         setSelectedResult(foundResult);
                         if (setCodeModalOpen !== undefined) {
                           setCodeModalOpen(true);
+                      	
+						  found = true
                         }
 
                         break;
                       }
+
+					  if (!found) {
+						  toast("No result for this action yet. Please run the workflow first.")
+					  }
                     }
                   }}
                 >
@@ -2804,6 +2856,7 @@ const ParsedAction = (props) => {
                     <DescriptionIcon style={{ color: "rgba(255,255,255,0.7)" }} />
                   </Tooltip>
                 </IconButton>
+		  		{/*
                 <IconButton
                   style={{
                     marginTop: "auto",
@@ -2829,6 +2882,7 @@ const ParsedAction = (props) => {
                     </Tooltip>
                   </a>
                 </IconButton>
+				*/}
 								{/*
                 <IconButton
                   style={{
@@ -2865,6 +2919,7 @@ const ParsedAction = (props) => {
                   </Tooltip>
                 </IconButton>
 								*/}
+		  		{/*
                 <IconButton
                   style={{
                     marginTop: "auto",
@@ -2886,6 +2941,7 @@ const ParsedAction = (props) => {
 					</a>
                   </Tooltip>
                 </IconButton>
+				*/}
                 <IconButton
                   style={{
                     marginTop: "auto",
@@ -2906,7 +2962,7 @@ const ParsedAction = (props) => {
                 >
                   <Tooltip
                     color="primary"
-                    title={"Autocomplete fields. Will show a popup so that you can query how you would like to fill it in"}
+                    title={"Autocomplete fields. Uses the name of the current action, the fields and previous actions' results"}
                     placement="top"
                   >
 		  			{autoCompleting ? 
@@ -3560,6 +3616,8 @@ const ParsedAction = (props) => {
 				return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
 			}}
 			renderGroup={(params) => {
+				//return null
+
 				return (
 					<li key={params.key}>
 						<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
@@ -3567,7 +3625,7 @@ const ParsedAction = (props) => {
 					</li>
 				)	
 			}}
-            options={selectedApp.actions === undefined || selectedApp.actions === null ? [] : selectedApp.actions.filter((a) => a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(selectedApp.actions, "label"))}
+            options={renderedActionOptions}
             ListboxProps={{
               style: {
                 backgroundColor: theme.palette.surfaceColor,

frontend/src/components/ShuffleCodeEditor1.jsx

@@ -676,6 +676,8 @@ const CodeEditor = (props) => {
 				for (var i = 0; i < found.length; i++) {
 					try {
 						const fixedVariable = fixVariable(found[i])
+
+						// Finding if the value is in the list at all, and does initial replacement
 						var valuefound = false
 						for (var j = 0; j < actionlist.length; j++) {
 							if(fixedVariable.slice(1,).toLowerCase() !== actionlist[j].autocomplete.toLowerCase()){
@@ -697,12 +699,13 @@ const CodeEditor = (props) => {
 							} catch (e) { 
 								input = input.replace(found[i], actionlist[j].example, -1)
 							}
+
+						}
+						
+						//console.log("INPUT: ", fixedVariable, valuefound, input)
+						if (!valuefound) {
+							//console.log("Couldn't find value "+fixedVariable)
 						}
-
-
-						//if (!valuefound) {
-						//	console.log("Couldn't find value "+fixedVariable)
-						//}
 
 						if (!valuefound && availableVariables.includes(fixedVariable)) {
 							var shouldbreak = false
@@ -729,8 +732,6 @@ const CodeEditor = (props) => {
 										console.log("ERR IN INPUT: ", e)
 									}
 
-									//console.log("Got output for: ", fullpath, new_input, actionlist[k].example, typeof new_input)
-
 									if (typeof new_input === "object") {
 										new_input = JSON.stringify(new_input)
 									} else {
@@ -752,10 +753,6 @@ const CodeEditor = (props) => {
 									input = input.replace(fixedVariable, new_input, -1)
 									input = input.replace(found[i], new_input, -1)
 
-									//} catch (e) {
-									//	input = input.replace(found[i], actionlist[k].example)
-									//}
-
 									shouldbreak = true 
 									break
 								}
@@ -1498,7 +1495,6 @@ const CodeEditor = (props) => {
 								backgroundColor: "rgba(40,40,40,1)",
                             }}
 							onLoad={(editor) => {
-								console.log("LOAD: ", editor)
 								highlight_variables(localcodedata)
 							}}
                             onCursorChange={(cursorPosition, editor, value) => {
@@ -1591,7 +1587,7 @@ const CodeEditor = (props) => {
 												minheight: 450, 
 												overflow: "auto",
 												minWidth: 450, 
-												maxWidth: 450, 
+												maxWidth: "100%", 
 											}}
 											collapsed={false}
 											enableClipboard={(copy) => {

frontend/src/defaultCytoscapeStyle.jsx

@@ -34,6 +34,20 @@ const data = [
       "z-index": 5001,
     },
   },
+  {
+    selector: `node[buttonType="ACTIONSUGGESTION"]`,
+    css: {
+      label: "data(label)",
+      shape: "roundrectangle",
+	  "height": "16px",
+	  "width": "120px",
+      "background-color": "#212121",
+      "border-color": "#81c784",
+      "z-index": 10000,
+	  "border-radius": "10px",
+	  "text-margin-x": "0px",
+    },
+  },
   {
     selector: `node[type="ACTION"]`,
     css: {
@@ -120,7 +134,7 @@ const data = [
   {
     selector: `node[type="TRIGGER"]`,
     css: {
-      shape: "octagon",
+      shape: "round-octagon",
       "border-radius": "5px",
       "border-color": "orange",
       "background-color": "#213243",

frontend/src/views/Dashboard.jsx

@@ -903,7 +903,6 @@ const UsecaseListComponent = (props) => {
 																		isLoggedIn={isLoggedIn}
 																		appFramework={frameworkData}
 																		userdata={userdata}
-
 																		globalUrl={globalUrl}
 																		img1={inputUsecase.srcimg}
 																		srcapp={inputUsecase.srcapp}
@@ -911,7 +910,6 @@ const UsecaseListComponent = (props) => {
 																		dstapp={inputUsecase.dstapp}
 																		title={inputUsecase.name}
 																		description={inputUsecase.description}
-
 																		apps={apps}
 																		getAppFramework={getFramework}
 																		//appSetupDone={appSetupDone}