Added action identifier icons

frontend/src/App.jsx

@@ -125,7 +125,6 @@ const App = (message, props) => {
 			<Route exact path="/docs" render={props => { window.location.pathname = "/docs/about" }} />
 			<Route exact path="/introduction" render={props => <Introduction isLoaded={isLoaded} globalUrl={globalUrl} {...props} />} />
 			<Route exact path="/introduction/:key" render={props => <Introduction isLoaded={isLoaded} globalUrl={globalUrl} {...props} />} />
-			<Route exact path="/myview" render={props => <MyView cookies={cookies} removeCookie={removeCookie} isLoaded={isLoaded} isLoggedIn={isLoggedIn} globalUrl={globalUrl} cookies={cookies} userdata={userdata} {...props} />} />
 			<Route exact path="/" render={props => <LoginPage isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} />
 		</div>
 

frontend/src/components/ParsedAction.jsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useLayoutEffect} from 'react';
 
 import { GetParsedPaths } from "../views/Apps.jsx";
+import { GetIconInfo } from "../views/Workflows.jsx";
 import { sortByKey } from "../views/AngularWorkflow.jsx";
 import { useTheme } from '@material-ui/core/styles';
 import NestedMenuItem from "material-ui-nested-menu-item";
@@ -1406,6 +1407,10 @@ const ParsedAction = (props) => {
 							if (data.label !== undefined && data.label !== null && data.label.length > 0) {
 								newActionname = data.label
 							}
+
+							const iconInfo = GetIconInfo({"name": data.name})
+							const useIcon = iconInfo.originalIcon
+
 							// ROFL FIXME - loop
 							newActionname = newActionname.replaceAll("_", " ")
 							newActionname = newActionname.replaceAll("_", " ")
@@ -1413,10 +1418,10 @@ const ParsedAction = (props) => {
 							newActionname = newActionname.replaceAll("_", " ")
 							newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1)
 							return (
-							<MenuItem key={data.name} style={{maxWidth: 400, overflowX: "hidden", backgroundColor: theme.palette.inputColor, color: "white"}} value={data.name}>
-								{newActionname}
-
-							</MenuItem>
+								<MenuItem key={data.name} style={{maxWidth: 400, overflowX: "hidden", backgroundColor: theme.palette.inputColor, color: "white", display: "flex",}} value={data.name}>
+									<span style={{marginRight: 10, marginTop: "auto", marginBottom: "auto",}}>{useIcon}</span> 
+									<span style={{marginTop: "auto", marginBottom: "auto",}} >{newActionname}</span>
+								</MenuItem>
 							)
 						})}
 					</Select>

frontend/src/defaultCytoscapeStyle.js

@@ -117,6 +117,35 @@ const data = [{
 				'background-color': '#edbd21',
 			},
 		},
+		{
+			selector: 'node[?isButton]',
+			css: {
+				'shape': 'ellipse',
+				'border-color': '#80deea',
+				'width': '30px',
+				'height': '30px',
+				'z-index': '5002',
+				'font-size': '0px',
+			},
+		},
+		{
+			selector: 'node[?isDescriptor]',
+			css: {
+				'shape': 'ellipse',
+				'border-color': '#80deea',
+				'width': '12px',
+				'height': '12px',
+				'z-index': '5002',
+				'font-size': '10px',
+				'text-valign': 'center',
+				'text-halign': 'center',
+				'border': '1px solid black',
+				'margin-right': '0px',
+				'text-margin-x': '0px',
+				'background-color': 'data(imageColor)',
+				'background-image': 'data(image)',
+			},
+		},
 		{
 			selector: 'node[?isStartNode]',
 			css: {

frontend/src/views/AngularWorkflow.jsx

@@ -24,7 +24,7 @@ import cxtmenu from 'cytoscape-cxtmenu';
 
 import { w3cwebsocket as W3CWebSocket } from "websocket";
 import { useAlert } from "react-alert";
-import { validateJson } from "./Workflows.jsx";
+import { validateJson, GetIconInfo } from "./Workflows.jsx";
 import { GetParsedPaths } from "./Apps.jsx";
 import ConfigureWorkflow from '../components/ConfigureWorkflow.jsx';
 import ParsedAction from '../components/ParsedAction.jsx';
@@ -1299,6 +1299,7 @@ const AngularWorkflow = (props) => {
 		y: 0,
 	}
 
+	var hiddenNodes = []
 	const onNodeDragStop = (event, selectedAction) => {
 		const nodedata = event.target.data()
 
@@ -1306,8 +1307,8 @@ const AngularWorkflow = (props) => {
 			return
 		}
 
-		console.log("DRAGGED NODE: ", nodedata)
-		console.log("TARGET NODE: ", selectedAction)
+		//console.log("DRAGGED NODE: ", nodedata)
+		//console.log("TARGET NODE: ", selectedAction)
 		if (styledElements.length === 1) {
 			console.log("Should reset location and autofill: ", styledElements, selectedAction)
 			//event.target.position = originalLocation
@@ -1343,6 +1344,54 @@ const AngularWorkflow = (props) => {
 			}
 		}
 
+		const skipnames = []
+		if (nodedata.app_name !== undefined && ((
+			nodedata.app_name !== "Shuffle Tools" &&
+			nodedata.app_name !== "Testing" &&
+			nodedata.app_name !== "Shuffle Workflow" &&
+			nodedata.app_name !== "User Input" &&
+			nodedata.app_name !== "Schedule" &&
+			nodedata.app_name !== "Email") || nodedata.isStartNode) 
+		) {
+			const allNodes = cy.nodes().jsons()
+			var found = false
+			for (var key in allNodes) {
+				const currentNode = allNodes[key]
+				if (currentNode.data.attachedTo === nodedata.id && currentNode.data.isDescriptor) {
+					found = true 
+					console.log("FOUND THE NODE!")
+					break
+				}
+			}
+
+			// Readding the icon after moving the node
+			if (!found) {
+				const iconInfo = GetIconInfo(nodedata)
+				const svg_pin = `<svg width="24" height="24" viewBox="0 0 24 24" 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)
+
+				const offset = nodedata.isStartNode ? 36 : 44
+				const decoratorNode = {
+					position: {
+						x: nodedata.position.x+offset,
+						y: nodedata.position.y+offset,
+					},
+					locked: true,
+					data: {
+						"isDescriptor": true,
+						"isValid": true,
+						"is_valid": true,
+						"label": "",
+						"image": svgpin_Url,
+						"imageColor": iconInfo.iconBackgroundColor,
+						"attachedTo": nodedata.id,
+					},
+				}
+
+				cy.add(decoratorNode)
+			}
+		}
+
 		originalLocation = {
 			x: 0,
 			y: 0,
@@ -1355,7 +1404,7 @@ const AngularWorkflow = (props) => {
 		//}
 
 		const nodedata = event.target.data()
-		console.log("Dragging node!!")
+		//console.log("Dragging node!!")
 		if (nodedata.app_name == "Shuffle Tools" || nodedata.app_name == "Testing") {
 			//console.log("NODE: ", 
 			//selector: `node[app_name="Shuffle Tools"]`,
@@ -1366,12 +1415,24 @@ const AngularWorkflow = (props) => {
 			// 3. If it is, then hide text
 		}
 
+		if (nodedata.app_id !== undefined) {
+			//console.log("Trying to remove friendly nodes")
+			const allNodes = cy.nodes().jsons()
+			//console.log("NOT UNDEFINED IN HOVEROUT!", allNodes)
+			for (var key in allNodes) {
+				const currentNode = allNodes[key]
+				if (currentNode.data.attachedTo === nodedata.id) {
+					cy.getElementById(currentNode.data.id).remove()
+				}
+			}
+		}
+
 		if (nodedata.id === selectedAction.id) {
 			return
 		}
 
 		if (originalLocation.x === 0 && originalLocation.y === 0 && nodedata.position !== undefined) {
-			console.log("Updating location!: ", nodedata) 
+			//console.log("Updating location!: ", nodedata) 
 			originalLocation.x = nodedata.position.x 
 			originalLocation.y = nodedata.position.y
 		}
@@ -2045,7 +2106,7 @@ const AngularWorkflow = (props) => {
 		const nodedata = event.target.data()
 		if (nodedata.app_name !== undefined) {
 			const allNodes = cy.nodes().jsons()
-			console.log("NOT UNDEFINED IN HOVEROUT!", allNodes)
+			//console.log("NOT UNDEFINED IN HOVEROUT!", allNodes)
 			for (var key in allNodes) {
 				const currentNode = allNodes[key]
 				if (currentNode.data.isButton && currentNode.data.attachedTo !== nodedata.id) {
@@ -2074,7 +2135,7 @@ const AngularWorkflow = (props) => {
 	}
 
 	const onNodeHover = (event) => {
-		console.log("TAR: ", event.target)
+		//console.log("TAR: ", event.target)
 
 		//var parentNode = cy.$('#' + event.target.data("id"));
 		//if (parentNode.data('isButton') || parentNode.data('buttonId'))
@@ -2168,7 +2229,6 @@ const AngularWorkflow = (props) => {
 		}
 	}
 
-
 	const setupGraph = () => {
 		const actions = workflow.actions.map(action => {
 			const node = {}
@@ -2187,11 +2247,41 @@ const AngularWorkflow = (props) => {
 
 			node.data.example = example
 
-			//node.data.is_valid = false
-
 			return node;
 		})
 
+		const decoratorNodes = workflow.actions.map(action => {
+			if (!action.isStartNode) {
+				if (action.app_name === "Testing" || action.app_name === "Shuffle Tools") {
+					return null
+				}
+			}
+
+			const iconInfo = GetIconInfo(action)
+			const svg_pin = `<svg width="24" height="24" viewBox="0 0 24 24" 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)
+
+			const offset = action.isStartNode ? 36 : 44
+			const decoratorNode = {
+				position: {
+					x: action.position.x+offset,
+					y: action.position.y+offset,
+				},
+				locked: true,
+				data: {
+					"isDescriptor": true,
+					"isValid": true,
+					"is_valid": true,
+					"label": "",
+					"image": svgpin_Url,
+					"imageColor": iconInfo.iconBackgroundColor,
+					"attachedTo": action.id,
+				},
+			}
+			return decoratorNode
+			return null
+		})
+
 		const triggers = workflow.triggers.map(trigger => {
 			const node = {}
 			node.position = trigger.position
@@ -2204,7 +2294,9 @@ const AngularWorkflow = (props) => {
 		})
 
 		// FIXME - tmp branch update
-		var insertedNodes = [].concat(actions, triggers)
+		var insertedNodes = [].concat(actions, triggers, decoratorNodes)
+		insertedNodes = insertedNodes.filter(node => node !== null)
+
 		var edges = workflow.branches.map((branch, index) => {
 			//workflow.branches[index].conditions = [{
 

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 {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 {Compare as CompareIcon, Maximize as MaximizeIcon, Minimize as MinimizeIcon, 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';
 
 import {DataGrid, GridToolbarContainer, GridDensitySelector, GridToolbar} from '@material-ui/data-grid';
@@ -75,6 +75,127 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
+
+// Returns information about the icon, the color etc to be used
+// This can be used for actions of all types
+export const GetIconInfo = (action) => {
+	// Finds the icon based on the action. Should be verbs.
+	const iconList = [
+		{"key": "download", "values": ["get", "download"]},
+		{"key": "search", "values": ["search", "find"]},
+		{"key": "delete", "values": ["delete", "remove"]},
+		{"key": "send", "values": ["send", "dispatch", "mail", "forward", "post"]},
+		{"key": "list", "values": ["list"]},
+		{"key": "repeat", "values": ["repeat", "retry"]},
+		{"key": "execute", "values": ["execute", "run", "play"]},
+		{"key": "extract", "values": ["extract", "unpack", "decompress"]},
+		{"key": "inflate", "values": ["inflate", "pack", "compress",]},
+		{"key": "edit", "values": ["update", "edit", "put", "patch", "change", "parse", "translate", "replace", "filter", "conver", "map"]},
+		{"key": "compare", "values": ["compare", "convert", "to"]},
+	]
+
+	var selectedKey = ""
+	if (action.name === undefined || action.name === null) {
+	} else {
+		const actionname = action.name.toLowerCase()
+		for (var key in iconList) {
+			const found = iconList[key].values.find(value => actionname.includes(value))
+			if (found !== null && found !== undefined) {
+				//console.log("FOUND: ", found)
+				selectedKey = iconList[key].key
+				break
+			}
+		}
+	}
+		
+	//console.log("KEY!!: ", selectedKey)
+
+	const parsedIcons = {
+		"repeat": {
+			"icon": "M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <CachedIcon />,
+		},
+		"edit": {
+			"icon": "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <EditIcon />,
+		},
+		"compare": {
+			"icon": "M10 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v2h2V1h-2v2zm0 15H5l5-6v6zm9-15h-5v2h5v13l-5-6v9h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <CompareIcon />,
+		},
+		"extract": {
+			"icon": "M3 3h18v2H3z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <MaximizeIcon />,
+		},
+		"inflate": {
+			"icon": "M6 19h12v2H6z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <MinimizeIcon />,
+		},
+		"list": {
+			"icon": "M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <TocIcon />,
+		},
+		"execute": {
+			"icon": "M8 5v14l11-7z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <PlayArrowIcon />,
+		},
+		"delete": {
+			"icon": "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <DeleteIcon />,
+		},
+		"send": {
+			"icon": "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <SendIcon />,
+		},
+		"download": {
+			"icon": "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
+			"iconColor": "white",
+			"iconBackgroundColor": "orange",
+			"originalIcon": <GetAppIcon />,
+		},
+		"search": {
+			"icon": "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
+			"iconColor": "white",
+			"iconBackgroundColor": "green",
+			"originalIcon": <SearchIcon />,
+		}
+	}
+
+	const selectedItem = parsedIcons[selectedKey]
+	if (selectedItem === undefined || selectedItem === null) {
+		return {
+			"icon": "",
+			"iconColor": "",
+			"iconBackground": "black",
+			"originalIcon": "",
+		}
+	}
+
+	if (parsedIcons[selectedKey].icon === "") {
+		console.log(`MISSING PATH FOR ${selectedKey} (find in scope): `, parsedIcons[selectedKey].originalIcon.type.type)
+	}
+
+	return selectedItem
+}
+
 //const activeWorkflowStyle = {backgroundColor: "#FFF5EE"}
 //const notificationStyle = {backgroundColor: "#E5F9FF"}
 //const activeWorkflowStyle = {backgroundColor: "#3d3f43"}