#164: Added a bunch more magic autocompletes based on basic synonyms and previous results

frontend/src/components/ParsedAction.jsx

@@ -622,7 +622,7 @@ const ParsedAction = (props) => {
 						}
 
 						if (selectedApp.generated && data.name === "headers") {
-							console.log("HEADER: ", data)
+							//console.log("HEADER: ", data)
 							//if (data.value.length === 0) {
 
 							//}
@@ -942,10 +942,9 @@ const ParsedAction = (props) => {
 									}}
 									open={!!menuPosition}
 									style={{
-										border: `2px solid #f85a3e`, 
 										color: "white", 
 										marginTop: 2,
-										maxHeight: 400, 
+										maxHeight: 650, 
 									}}
 								>
 								{actionlist.map(innerdata => {
@@ -1024,7 +1023,7 @@ const ParsedAction = (props) => {
 													</div>
 												}
 												parentMenuOpen={!!menuPosition}
-												style={{backgroundColor: theme.palette.inputColor, color: "white", minWidth: 250, maxWidth: 250, maxHeight: 400, scrollX: "", }}
+												style={{backgroundColor: theme.palette.inputColor, color: "white", minWidth: 250, maxWidth: 250, maxHeight: 650, scrollX: "", }}
 												//PaperProps={{
 												//	style: {
 												//		maxHeight: 400, 
@@ -1040,7 +1039,7 @@ const ParsedAction = (props) => {
 													// FIXME: Should be recursive in here
 													const icon = pathdata.type === "value" ? <VpnKeyIcon style={iconStyle} /> : pathdata.type === "list" ? <FormatListNumberedIcon style={iconStyle} /> : <ExpandMoreIcon style={iconStyle} /> 
 													return (
-														<MenuItem key={pathdata.name} style={{backgroundColor: theme.palette.inputColor, color: "white", minWidth: 250, }} value={pathdata} onMouseOver={() => {console.log("HOVER: ", pathdata)}}
+														<MenuItem key={pathdata.name} style={{backgroundColor: theme.palette.inputColor, color: "white", minWidth: 250, maxWidth: 250, }} value={pathdata} onMouseOver={() => {console.log("HOVER: ", pathdata)}}
 															onClick={() => {
 																handleItemClick([innerdata, pathdata])
 															}}
@@ -1189,7 +1188,7 @@ const ParsedAction = (props) => {
 										onClick={() => setShowAutocomplete(true)}
 										fullWidth
 										open={showAutocomplete}
-										style={{border: `2px solid #f85a3e`, color: "white", height: 50, marginTop: 2, borderRadius: theme.palette.borderRadius,}}
+										style={{color: "white", height: 50, marginTop: 2, borderRadius: theme.palette.borderRadius,}}
 										onChange={(e) => {
 											if (selectedActionParameters[count].value[selectedActionParameters[count].value.length-1] === ".") {
 												e.target.value.autocomplete = e.target.value.autocomplete.slice(1, e.target.value.autocomplete.length)
@@ -1240,6 +1239,7 @@ const ParsedAction = (props) => {
 	//	return <Popper {...props} className={classes.root} placement="bottom" />
 	//}
 
+	const baselabel = selectedAction.label
 	return ( 
 		<div style={appApiViewStyle} id="parsed_action_view">
 			{hideExtraTypes === true ? null : 
@@ -1339,6 +1339,21 @@ const ParsedAction = (props) => {
 					color="primary"
 					placeholder={selectedAction.label}
 					onChange={selectedNameChange}
+					onBlur={(e) => {
+						const name = e.target.value
+						console.log("CHANGED FROM2: ", baselabel)
+						console.log("CHANGED TO: ", name)
+						for (var key in workflow.actions) {
+							for (var subkey in workflow.actions[key].parameters) {
+								const param = workflow.actions[key].parameters[subkey]
+								if (param.value.includes(baselabel)) {
+									//if (param.value.toLowerCase().includes(baselabel)) {
+									console.log("FOUND: ", param)
+									workflow.actions[key].parameters[subkey].value.replaceAll(baselabel, e.target.value)
+								}
+							}
+						}
+					}}
 				/>
 				</span>
 			}

frontend/src/defaultCytoscapeStyle.js

@@ -131,7 +131,7 @@ const data = [{
 				'height': '15px',
 				'z-index': '5002',
 				'font-size': '0px',
-				'border': '1px solid black',
+				'border': '1px solid rgba(255,255,255,0.9)',
 				'background-image': 'data(icon)',
 				'background-color': 'data(iconBackground)',
 			},

frontend/src/views/AngularWorkflow.jsx

@@ -1749,7 +1749,7 @@ const AngularWorkflow = (props) => {
 		if (data.isButton) {
 			//console.log("BUTTON CLICKED: ", data)
 			if (data.buttonType === "delete") {
-				console.log("DELETE!")
+				//console.log("DELETE!")
 				const parentNode = cy.getElementById(data.attachedTo)
 				if (parentNode !== null && parentNode !== undefined) {
 					parentNode.remove()
@@ -2007,6 +2007,247 @@ const AngularWorkflow = (props) => {
 		})
 	}
 
+	const GetExampleResult = (item) => {
+		var exampledata = item.example === undefined ? "" : item.example
+		if (workflowExecutions.length > 0) {
+			// Look for the ID
+			const found = false
+			for (var key in workflowExecutions) {
+				if (workflowExecutions[key].results === undefined || workflowExecutions[key].results === null) {
+					continue
+				}
+
+				var foundResult = {"result": ""}
+				if (item.id === "exec") {
+					//console.log("EXEC: ", workflowExecutions[key].execution_argument)
+					if (workflowExecutions[key].execution_argument !== undefined && workflowExecutions[key].execution_argument !== null && workflowExecutions[key].execution_argument.length > 0) {
+						foundResult.result = workflowExecutions[key].execution_argument
+					} else {
+						continue
+					}
+				} else {
+					foundResult = workflowExecutions[key].results.find(result => result.action.id === item.id)
+					if (foundResult === undefined) {
+						continue
+					}
+				}
+
+				foundResult.result = foundResult.result.trim()
+				foundResult.result = foundResult.result.split(" None").join(" \"None\"")
+				foundResult.result = foundResult.result.split(" False").join(" false")
+				foundResult.result = foundResult.result.split(" True").join(" true")
+
+				var jsonvalid = true
+				try {
+					const tmp = String(JSON.parse(foundResult.result))
+					if (!foundResult.result.includes("{") && !foundResult.result.includes("[")) {
+						jsonvalid = false
+					}
+				} catch (e) {
+					try {
+						foundResult.result = foundResult.result.split("\'").join("\"")
+						const tmp = String(JSON.parse(foundResult.result))
+						if (!foundResult.result.includes("{") && !foundResult.result.includes("[")) {
+							jsonvalid = false
+						}
+					} catch (e) {
+						jsonvalid = false
+					}
+				}
+
+				// Finds the FIRST json only
+				if (jsonvalid) {
+					//console.log("VALID!")
+					exampledata = JSON.parse(foundResult.result)
+					break
+				} else {
+					//console.log("INVALID: ", foundResult.result)
+				}
+			}
+		}
+
+		//console.log("EXAMPLE: ", exampledata)
+		return exampledata
+	}
+
+	const GetParamMatch = (paramname, exampledata, basekey) => {
+		const splitkey = "."
+		//console.log(typeof(exampledata))
+		//console.log("MATCHING WITH: ", exampledata)
+		if (typeof(exampledata) !== "object") {
+			return ""
+		}
+
+		// Basically just a stupid if-else :)
+		const synonyms = {
+			"id": ["id", "ref", "sourceref", "reference", "sourcereference", "alert id", "case id", "incident id", "service id",],
+			"title": ["title", "name", "message"],
+			"description": ["description", "explanation", "story", "details",],
+			"email": ["mail", "email", "sender", "receiver", "recipient"],
+			"data": ["data", "ip", "domain", "url", "hash", "md5", "sha2", "sha256", "value", "item",],
+		}
+
+		// 1. Find the right synonym
+		// 2. 
+		var selectedsynonyms = [paramname]
+		for (const [key, value] of Object.entries(synonyms)) {
+			if (key === paramname || value.includes(paramname)) {
+				if (!value.includes(key)) {
+					value.push(key.toLowerCase())
+				}
+
+				selectedsynonyms = value
+				break	
+			}
+		}
+		//console.log("SELECTED: ", selectedsynonyms)
+
+		//console.log("SYNONYMS FOR ", paramname, selectedsynonyms)
+		var toreturn = ""
+
+		for (const [key, value] of Object.entries(exampledata)) {
+			// Check if loop or JSON
+			const extra = basekey.length > 0 ? splitkey : ""
+			const basekeyname = `${basekey.slice(1, basekey.length).split(".").join(splitkey)}${extra}${key}`
+
+			// Handle direct loop!
+			//if (!isNaN(key) && basekey === "") {
+			//	//console.log("Handling direct loop: ", key, value)
+			//	//parsedValues.push({"type": "object", "name": "Node", "autocomplete": `${basekey}`})
+			//	//parsedValues.push({"type": "list", "name": `${splitkey}list`, "autocomplete": `${basekey}.#`})
+			//	//for (var subkey in returnValues) {
+			//	//	parsedValues.push(returnValues[subkey])
+			//	//}
+
+			//	toreturn = GetParsedPaths(paramname, value, `${basekey}.#`)
+			//	console.log("LIST, TORETURN: ", value, toreturn)
+			//	if (toreturn.length > 0) {
+			//		break
+			//	}
+			//}
+
+			//console.log("KEY: ", key, "VALUE: ", value, "BASEKEY: ", basekeyname)
+			if (typeof(value) === 'object') {
+				if (Array.isArray(value)) {
+					//console.log("LIST!!: ", value, key)
+					var selectedkey = ""
+					if (isNaN(key)) {
+						selectedkey = `.${key}`
+					}
+
+					for (var subitem in value) {
+						toreturn = GetParamMatch(paramname, value[subitem], `${basekey}${selectedkey}.#`)
+						if (toreturn.length > 0) {
+							break
+						}
+					}
+
+					if (toreturn.length > 0) {
+						break
+					}
+				} else {
+					var selectedkey = ""
+					if (isNaN(key)) {
+						selectedkey = `.${key}`
+					}
+
+					toreturn = GetParamMatch(paramname, value, `${basekey}${selectedkey}`)
+					//console.log("OBJECT: ", value, toreturn, key)
+					if (toreturn.length > 0) {
+						break
+					}
+				}
+				//console.log("VALUE IS OBJECT: ", key, value)
+			} else {
+				//console.log("SINGLE ITEM: ", key)
+				if (selectedsynonyms.includes(key.toLowerCase())) {
+					//parsedValues.push({"type": "value", "name": basekeyname, "autocomplete": `${basekey}.${key}`, "value": value,})
+					//console.log("STRING: ", key, value)
+					toreturn = `${basekey}.${key}`
+					//toreturn = basekeyname
+					break
+				}
+			}
+		}
+
+		return toreturn
+	}
+
+	// Takes an action as input, then runs through and updates the relevant fields
+	// based on previous actions' 
+	const RunAutocompleter = (dstdata) => {
+		// **PS: The right action should already be set here**
+		// 1. Check execution argument
+		// 2. Check parents in order
+		var exampledata = GetExampleResult({"id": "exec", "name": "exec",})
+		//console.log("EXAMPLE RETURN: ", exampledata)
+		var parentlabel = "exec"
+		for (var paramkey in dstdata.parameters) {
+			const param = dstdata.parameters[paramkey]
+			// Skip authentication params
+			if (param.configuration) {
+				continue
+			}
+
+			const paramname = param.name.toLowerCase().trim().replaceAll("_", " ")
+			//console.log("PARAM: ", param)
+			//console.log("PARAMNAME: ", paramname)
+
+			const foundresult = GetParamMatch(paramname, exampledata, "")
+			if (foundresult.length > 0) {
+				//console.log("FOUND: ", paramname, foundresult)
+
+				if (dstdata.parameters[paramkey].value.length === 0) {
+					dstdata.parameters[paramkey].value = `$${parentlabel}${foundresult}`
+				} else {
+					//console.log("Skipping ", dstdata.parameters[paramkey], " because it already has a value")
+				}
+			}
+		}
+		
+		var parents = getParents(dstdata)
+		console.log("PARENTS: ", parents)
+		if (parents.length > 1) {
+			for (var key in parents) {
+				const item = parents[key]
+				if (item.label === "Execution Argument") {
+					continue
+				}
+
+				parentlabel = item.label.toLowerCase().trim().replaceAll(" ", "_")
+				exampledata = GetExampleResult(item)
+				for (var paramkey in dstdata.parameters) {
+					const param = dstdata.parameters[paramkey]
+					// Skip authentication params
+					if (param.configuration) {
+						continue
+					}
+
+					const paramname = param.name.toLowerCase().trim().replaceAll("_", " ")
+					//console.log("PARAM: ", param)
+					//console.log("PARAMNAME: ", paramname)
+
+					const foundresult = GetParamMatch(paramname, exampledata, "")
+					if (foundresult.length > 0) {
+						//console.log("FOUND: ", paramname, foundresult)
+
+						if (dstdata.parameters[paramkey].value.length === 0) {
+							dstdata.parameters[paramkey].value = `$${parentlabel}${foundresult}`
+						} else {
+							//console.log("Skipping ", dstdata.parameters[paramkey], " because it already has a value")
+						}
+					}
+				}
+				// Check agains every param 
+			}
+		}
+
+		return dstdata
+	}
+
+	//const FixNameUpdater = (sourcenode) => {
+	//}
+
 	// Checks for errors in edges when they're added 
 	const onEdgeAdded = (event) => {
 		setLastSaved(false)
@@ -2021,6 +2262,7 @@ const AngularWorkflow = (props) => {
 			}
 		}
 
+
 		targetnode = -1
 		var sourcenode = workflow.triggers.findIndex(data => data.id === edge.source)
 		console.log("SOURCENODE: ", sourcenode)
@@ -2057,6 +2299,7 @@ const AngularWorkflow = (props) => {
 			} 
 		}
 
+
 		//console.log(workflow.branches)
 
 		// Check if: 
@@ -2120,6 +2363,19 @@ const AngularWorkflow = (props) => {
 			}
 		}
 
+
+		// 1. Guess what the next node's action should be
+		// 2. Get result from previous nodes (if any)
+		// 3. TRY to automatically map them in based on synonyms
+		const newsource = cy.getElementById(edge.source)
+		const newdst = cy.getElementById(edge.target)
+		if (newsource !== undefined && newsource !== null && newdst !== undefined && newdst !== null) {
+			//const srcdata = newsource.data()
+			//console.log("EDGE: ", edge)
+			const dstdata = RunAutocompleter(newdst.data())
+			console.log("DST: ", dstdata)
+		}
+
 		var newbranch = { 
 			"source_id": edge.source,
 			"destination_id": edge.target,
@@ -2426,6 +2682,9 @@ const AngularWorkflow = (props) => {
 	    switch( event.keyCode ) {
 	    case 27:
 					console.log("ESCAPE")
+					if (configureWorkflowModalOpen === true) {
+						setConfigureWorkflowModalOpen(false)
+					}
 	        break;
 			case 46:
 				//removeNode()		
@@ -2730,6 +2989,8 @@ const AngularWorkflow = (props) => {
 		})
 	}
 
+	const buttonColor = "rgba(255,255,255,0.9)"
+	const buttonBackgroundColor = "#1f2023"
 	const addCopyButton = (event) => {
 		var parentNode = cy.$('#' + event.target.data("id"));
 		if (parentNode.data('isButton') || parentNode.data('buttonId'))
@@ -2744,9 +3005,10 @@ const AngularWorkflow = (props) => {
 
 		const iconInfo = {
 			"icon": "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z",
-			"iconColor": "black",
-			"iconBackgroundColor": "white",
+			"iconColor": buttonColor,
+			"iconBackgroundColor": buttonBackgroundColor,
 		}
+
 		const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
 		const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin)
 
@@ -2783,8 +3045,8 @@ const AngularWorkflow = (props) => {
 
 		const iconInfo = {
 			"icon": "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
-			"iconColor": "black",
-			"iconBackgroundColor": "white",
+			"iconColor": buttonColor,
+			"iconBackgroundColor": buttonBackgroundColor,
 		}
 		const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
 		const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin)
@@ -2811,6 +3073,10 @@ const AngularWorkflow = (props) => {
 	const onNodeHover = (event) => {
 		//console.log("TAR: ", event.target)
 		const nodedata = event.target.data()
+		if (nodedata.finished === false) {
+			return
+		}
+
 		var parentNode = cy.$('#' + event.target.data("id"));
 		if (parentNode.data('isButton') || parentNode.data('buttonId'))
 			return
@@ -3687,8 +3953,8 @@ const AngularWorkflow = (props) => {
 	}
 
 	const handleDragStop = (e, app) => {
-		console.log("STOP!: ", e)
-		console.log("APP!: ", parsedApp)
+		//console.log("STOP!: ", e)
+		//console.log("APP!: ", parsedApp)
 		//const onNodeAdded = (event) => {
 		//const node = event.target
 		//const nodedata = event.target.data()
@@ -3798,19 +4064,16 @@ const AngularWorkflow = (props) => {
 				currentnode[0].renderedPosition("x", e.pageX-cycontainer.offsetLeft)
 				currentnode[0].renderedPosition("y", e.pageY-cycontainer.offsetTop)
 			} else {
-				console.log("IN NEW NODE!")
 				if (workflow.public) {
 					console.log("workflow is public - not adding")
 					return
 				}
 
-				console.log("IN NEW NODE2!")
 				if (app.actions === undefined || app.actions === null || app.actions.length === 0) {
 					alert.error("App "+app.name+" currently has no actions to perform. Please go to https://shuffler.io/apps to edit it.")
 					return
 				}
 
-				console.log("IN NEW NODE3!")
 				newNodeId = uuid.v4()
 				const actionType = "ACTION"
 				const actionLabel = getNextActionName(app.name)
@@ -3867,7 +4130,6 @@ const AngularWorkflow = (props) => {
 					}
 				}
 
-				console.log("IN NEW NODE4: !", nodeToBeAdded)
 				parsedApp = nodeToBeAdded
 				cy.add(nodeToBeAdded)
 				return
@@ -4046,40 +4308,45 @@ const AngularWorkflow = (props) => {
 		}
 
 		// Does this one find the wrong one?
-		selectedAction.name = newaction.name
-		selectedAction.parameters = JSON.parse(JSON.stringify(newaction.parameters))
-		selectedAction.errors = []
-		selectedAction.isValid = true
-		selectedAction.is_valid = true
+		var newSelectedAction = selectedAction
+		newSelectedAction.name = newaction.name
+		newSelectedAction.parameters = JSON.parse(JSON.stringify(newaction.parameters))
+		newSelectedAction.errors = []
+		newSelectedAction.isValid = true
+		newSelectedAction.is_valid = true
 
-		if (selectedAction.app_name === "Shuffle Tools") {
-			const iconInfo = GetIconInfo(selectedAction)
+		if (newSelectedAction.app_name === "Shuffle Tools") {
+			const iconInfo = GetIconInfo(newSelectedAction)
 			console.log("ICONINFO: ", iconInfo)
 			const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
 			const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin)
-			selectedAction.large_image = svgpin_Url
-			selectedAction.fillGradient = iconInfo.fillGradient
-			selectedAction.fillstyle = "solid"
-			if (selectedAction.fillGradient !== undefined && selectedAction.fillGradient !== null && selectedAction.fillGradient.length > 0) {
-				selectedAction.fillstyle = 'linear-gradient'
-				console.log("GRADIENT!: ", selectedAction)
+			newSelectedAction.large_image = svgpin_Url
+			newSelectedAction.fillGradient = iconInfo.fillGradient
+			newSelectedAction.fillstyle = "solid"
+			if (newSelectedAction.fillGradient !== undefined && newSelectedAction.fillGradient !== null && newSelectedAction.fillGradient.length > 0) {
+				newSelectedAction.fillstyle = 'linear-gradient'
+				console.log("GRADIENT!: ", newSelectedAction)
 				//action.fillstyle = 
 				//'background-fill': 'data(fillstyle)',
 			} else {
-				selectedAction.iconBackground = iconInfo.iconBackgroundColor
+				newSelectedAction.iconBackground = iconInfo.iconBackgroundColor
 			}
 
-			const foundnode = cy.getElementById(selectedAction.id)
+			const foundnode = cy.getElementById(newSelectedAction.id)
 			if (foundnode !== null && foundnode !== undefined) {
 				console.log("UPDATING NODE!")
-				foundnode.data(selectedAction)
+				foundnode.data(newSelectedAction)
 			}
 		}
 
-		console.log("ACTION: ", selectedAction)
+		// Takes an action as input, then runs through and updates the relevant fields
+		// based on previous actions' 
+		newSelectedAction = RunAutocompleter(newSelectedAction)
+
+		console.log("ACTION: ", newSelectedAction)
 
 		if (newaction.returns.example !== undefined && newaction.returns.example !== null && newaction.returns.example.length > 0) {
-			selectedAction.example = newaction.returns.example 
+			newSelectedAction.example = newaction.returns.example 
 		}
 
 		// FIXME - this is broken sometimes lol
@@ -4089,7 +4356,7 @@ const AngularWorkflow = (props) => {
 		//} 
 		//setSelectedActionEnvironment(env)
 		
-		setSelectedAction(selectedAction)
+		setSelectedAction(newSelectedAction)
 		setUpdate(Math.random())
 
 		// FIXME - should change icon-node (descriptor) as well 

frontend/src/views/Apps.jsx

@@ -29,7 +29,7 @@ export const FixName = (name) => {
 
 // Parses JSON data into keys that can be used everywhere :)
 export const GetParsedPaths = (inputdata, basekey) => {
-	const splitkey = " > "
+	const splitkey = "."
 	var parsedValues = []
 	if (inputdata === undefined || inputdata === null) {
 		return parsedValues
@@ -47,8 +47,8 @@ export const GetParsedPaths = (inputdata, basekey) => {
 		// Handle direct loop!
 		if (!isNaN(key) && basekey === "") {
 			console.log("Handling direct loop.")
-			parsedValues.push({"type": "object", "name": "Node", "autocomplete": `${basekey}`})
-			parsedValues.push({"type": "list", "name": `${splitkey}list`, "autocomplete": `${basekey}.#`})
+			parsedValues.push({"type": "object", "name": "Node", "autocomplete": `${basekey}`.toLowerCase()})
+			parsedValues.push({"type": "list", "name": `${splitkey}list`, "autocomplete": `${basekey}.#`.toLowerCase()})
 			const returnValues = GetParsedPaths(value, `${basekey}.#`)
 			for (var subkey in returnValues) {
 				parsedValues.push(returnValues[subkey])
@@ -61,8 +61,8 @@ export const GetParsedPaths = (inputdata, basekey) => {
 		if (typeof(value) === 'object') {
 			if (Array.isArray(value)) {
 				// Check if each item is object
-				parsedValues.push({"type": "object", "name": basekeyname, "autocomplete": `${basekey}.${key}`})
-				parsedValues.push({"type": "list", "name": `${basekeyname}${splitkey}list`, "autocomplete": `${basekey}.${key}.#`})
+				parsedValues.push({"type": "object", "name": basekeyname, "autocomplete": `${basekey}.${key}`.toLowerCase()})
+				parsedValues.push({"type": "list", "name": `${basekeyname}${splitkey}list`, "autocomplete": `${basekey}.${key}.#`.toLowerCase()})
 
 				// Only check the first. This would be probably be dumb otherwise.
 				for (var subkey in value) {
@@ -79,14 +79,14 @@ export const GetParsedPaths = (inputdata, basekey) => {
 				}
 				//console.log(key+" is array")
 			} else {
-				parsedValues.push({"type": "object", "name": basekeyname, "autocomplete": `${basekey}.${key}`})
+				parsedValues.push({"type": "object", "name": basekeyname, "autocomplete": `${basekey}.${key}`.toLowerCase()})
 				const returnValues = GetParsedPaths(value, `${basekey}.${key}`)
 				for (var subkey in returnValues) {
 					parsedValues.push(returnValues[subkey])
 				}
 			}
 		} else {
-			parsedValues.push({"type": "value", "name": basekeyname, "autocomplete": `${basekey}.${key}`, "value": value,})
+			parsedValues.push({"type": "value", "name": basekeyname, "autocomplete": `${basekey}.${key}`.toLowerCase(), "value": value,})
 		}
 	}
 

frontend/src/views/Workflows.jsx

@@ -3,7 +3,7 @@ import { useInterval } from 'react-powerhooks';
 import { makeStyles } from '@material-ui/core/styles';
 
 import {Avatar, Grid, Paper, Tooltip, Divider, Button, TextField, FormControl, IconButton, Menu, MenuItem, FormControlLabel, Chip, Switch, Typography, Zoom, CircularProgress, Dialog, DialogTitle, DialogActions, DialogContent} from '@material-ui/core';
-import {Compare as CompareIcon, Maximize as MaximizeIcon, Minimize as MinimizeIcon, AddCircle as AddCircleIcon, Toc as TocIcon, Send as SendIcon, Search as SearchIcon, FileCopy as FileCopyIcon, Delete as DeleteIcon, BubbleChart as BubbleChartIcon, Restore as RestoreIcon, Cached as CachedIcon, GetApp as GetAppIcon, Apps as AppsIcon, Edit as EditIcon, MoreVert as MoreVertIcon, PlayArrow as PlayArrowIcon, Add as AddIcon, Publish as PublishIcon, CloudUpload as CloudUploadIcon, CloudDownload as CloudDownloadIcon} from '@material-ui/icons';
+import {Close as CloseIcon, Compare as CompareIcon, Maximize as MaximizeIcon, Minimize as MinimizeIcon, AddCircle as AddCircleIcon, Toc as TocIcon, Send as SendIcon, Search as SearchIcon, FileCopy as FileCopyIcon, Delete as DeleteIcon, BubbleChart as BubbleChartIcon, Restore as RestoreIcon, Cached as CachedIcon, GetApp as GetAppIcon, Apps as AppsIcon, Edit as EditIcon, MoreVert as MoreVertIcon, PlayArrow as PlayArrowIcon, Add as AddIcon, Publish as PublishIcon, CloudUpload as CloudUploadIcon, CloudDownload as CloudDownloadIcon} from '@material-ui/icons';
 //import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
 
 //https://next.material-ui.com/components/material-icons/
@@ -78,6 +78,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 
+// Takes an action in Shuffle and 
 // Returns information about the icon, the color etc to be used
 // This can be used for actions of all types
 export const GetIconInfo = (action) => {
@@ -95,10 +96,11 @@ export const GetIconInfo = (action) => {
 		{"key": "send", "values": ["send", "dispatch", "mail", "forward", "post", "submit", "mark", "set"]},
 		{"key": "repeat", "values": ["repeat", "retry", "pause",]},
 		{"key": "execute", "values": ["execute", "run", "play", "raise",]},
-		{"key": "extract", "values": ["extract", "unpack", "decompress"]},
+		{"key": "extract", "values": ["extract", "unpack", "decompress", "open"]},
 		{"key": "inflate", "values": ["inflate", "pack", "compress",]},
 		{"key": "edit", "values": ["update", "create", "edit", "put", "patch", "change", "replace", "conver", "map", "format", "escape"]},
 		{"key": "compare", "values": ["compare", "convert", "to", "filter", "translate", "parse"]},
+		{"key": "close", "values": ["close", "stop", "cancel",]},
 	]
 
 	var selectedKey = ""
@@ -205,6 +207,13 @@ export const GetIconInfo = (action) => {
 			"originalIcon": <DeleteIcon />,
 			"fillGradient": ["#03030e", "#205d66"]
 		},
+		"close": {
+			"icon": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+			"iconColor": "white",
+			"iconBackgroundColor": "#03030e",
+			"originalIcon": <CloseIcon />,
+			"fillGradient": ["#03030e", "#205d66"]
+		},
 		"send": {
 			"icon": "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z",
 			"iconColor": "white",