Fixed most of the new MUI problems. Missing /admin and other button disabled issues

backend/go-app/README.md

@@ -0,0 +1,20 @@
+# Run
+go run main.go walkoff.go docker.go
+
+## Modify
+- Make sure it's connected with the latest version of the shuffle-shared library, which is used to get resources from Shuffle
+
+## Database
+- The database is Opensearch and can be modified with the SHUFFLE_OPENSEARCH_URL environment variable. See .env in the root directory for more. This requires Opensearch to be running (typically started from docker-compose.yml)
+```
+docker-compose up -d
+docker stop shuffle-backend
+docker stop shuffle-frontend
+docker stop shuffle-orborus
+```
+
+## Caching
+- To handle caching, it by default runs it in memory of the application itself. If you want to offload this, it can be done using the SHUFFLE_MEMCACHED environment variable, connecting to a memcached instance. 
+```
+docker run --name shuffle-cache -p 11211:11211 -d memcached -m 1024
+```

backend/go-app/main.go

@@ -1064,7 +1064,6 @@ func handleInfo(resp http.ResponseWriter, request *http.Request) {
 		}
 
 		org, err := shuffle.GetOrg(ctx, item)
-		_ = err
 		if len(org.Id) > 0 {
 			userOrgs = append(userOrgs, shuffle.OrgMini{
 				Id:         org.Id,
@@ -1073,7 +1072,7 @@ func handleInfo(resp http.ResponseWriter, request *http.Request) {
 				Image:      org.Image,
 			})
 		} else {
-			log.Printf("[WARNING] Failed to get org %s for user %s", item, userInfo.Username)
+			log.Printf("[WARNING] Failed to get org %s (%s) for user %s. Error: %#v", org.Name, item, userInfo.Username, err)
 		}
 	}
 

frontend/package.json

@@ -4,30 +4,25 @@
   "version": "1.3.0",
   "private": true,
   "dependencies": {
-    "@codemirror/commands": "^6.2.2",
+    "@codemirror/commands": "^6.2.4",
     "@emotion/is-prop-valid": "^1.1.1",
-    "@emotion/react": "^11.7.0",
+    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/styled": "^11.11.0",
     "@lezer/highlight": "^1.1.3",
-    "@metamask/detect-provider": "^1.2.0",
     "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.2.3",
+    "@mui/material": "^5.14.0",
     "@mui/styles": "^5.14.0",
     "@mui/x-data-grid": "^5.17.11",
-    "@uiw/codemirror-themes": "^4.19.9",
+    "@uiw/codemirror-themes": "^4.21.7",
-    "@uiw/react-codemirror": "^3.2.1",
+    "@uiw/react-codemirror": "^4.21.7",
     "@use-it/interval": "^1.0.0",
     "algoliasearch": "^4.13.1",
+    "calculate-size": "^1.1.1",
     "class-transformer": "^0.4.0",
     "create-react-app": "^5.0.1",
     "cytoscape": "^3.15.1",
-    "cytoscape-clipboard": "^2.2.1",
-    "cytoscape-cxtmenu": "^3.1.1",
     "cytoscape-edgehandles": "^3.6.0",
-    "cytoscape-grid-guide": "~2.3.3",
     "cytoscape-node-html-label": "^1.1.5",
-    "cytoscape-panzoom": "^2.5.2",
-    "cytoscape-undo-redo": "^1.3.2",
     "d3": "^7.1.1",
     "dotenv": "^6.1.0",
     "downshift": "^3.3.5",
@@ -51,43 +46,41 @@
     "mui-nested-menu": "^3.2.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
-    "react-alert": "^5.5.0",
+    "react-alert": "^7.0.3",
     "react-alert-template-basic": "^1.0.0",
     "react-alice-carousel": "^2.6.4",
     "react-avatar-editor": "^11.1.0",
     "react-beforeunload": "^2.2.1",
     "react-chartjs-2": "^2.11.1",
     "react-cookie": "^4.0.1",
-    "react-cytoscapejs": "^1.2.0",
+    "react-cytoscapejs": "^2.0.0",
-    "react-device-detect": "^1.9.10",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-draggable": "^3.3.2",
     "react-driftjs": "^1.2.2",
-    "react-dropzone": "^10.1.10",
+    "react-dropzone": "^14.2.3",
     "react-ga4": "^2.0.0",
     "react-iframe": "^1.8.0",
     "react-instantsearch-dom": "^6.28.0",
     "react-json-pretty": "^2.2.0",
-    "react-json-view": "^1.19.1",
+    "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.7",
     "react-markdown-github": "^3.3.1",
     "react-powerhooks": "0.0.7",
-    "react-router": "6.2.1",
+    "react-router": "^6.14.1",
-    "react-router-dom": "6.2.1",
+    "react-router-dom": "^6.14.1",
     "react-scripts": "^5.0.1",
-    "react-shepherd": "^3.3.6",
+    "reaviz": "^14.9.4",
-    "reactstrap": "^7.1.0",
-    "reaviz": "^12.1.0",
     "search-insights": "^2.2.1",
     "shellwords": "^0.1.1",
     "simplebar": "^4.2.3",
     "styled-components": "^4.4.0",
     "yaml": "^1.7.2",
     "yamljs": "^0.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "^0.13.1"
   },
   "scripts": {
-    "start": "HTTPS=false&&PORT=3000 react-scripts --openssl-legacy-provider start",
+    "start": "HTTPS=false&&PORT=3000 GENERATE_SOURCEMAP=false react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

frontend/src/App.jsx

@@ -30,6 +30,7 @@ import SettingsPage from "./views/SettingsPage";
 import KeepAlive from "./views/KeepAlive.jsx";
 
 import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from '@mui/material/CssBaseline';
 
 import UpdateAuthentication from "./views/UpdateAuthentication.jsx";
 import FrameworkWrapper from "./views/FrameworkWrapper.jsx";
@@ -38,7 +39,6 @@ import AlertTemplate from "./components/AlertTemplate";
 import { useAlert, positions, Provider } from "react-alert";
 import { isMobile } from "react-device-detect";
 
-import detectEthereumProvider from "@metamask/detect-provider";
 import Drift from "react-driftjs";
 
 // Production - backend proxy forwarding in nginx
@@ -143,120 +143,6 @@ const App = (message, props) => {
         }
 
         // Handling Ethereum update
-				{/*
-        detectEthereumProvider().then((provider) => {
-          if (
-            provider &&
-            userInfo.eth_info !== undefined &&
-            userInfo.eth_info !== null
-          ) {
-            if (
-              userInfo.eth_info.account !== undefined &&
-              userInfo.eth_info.account !== null &&
-              userInfo.eth_info.account.length === 0
-            ) {
-              userInfo.eth_info = {};
-              var method = "eth_requestAccounts";
-              var params = [];
-              provider
-                .request({
-                  method: method,
-                  params,
-                })
-                .then((result) => {
-                  if (
-                    result !== undefined &&
-                    result !== null &&
-                    result.length > 0
-                  ) {
-                    userInfo.eth_info.account = result[0];
-
-                    // Getting and setting balance for the current user
-                    method = "eth_getBalance";
-                    params = [userInfo.eth_info.account, "latest"];
-                    provider
-                      .request({
-                        method: method,
-                        params,
-                      })
-                      .then((result) => {
-                        if (
-                          result !== undefined &&
-                          result !== null &&
-                          result.length > 0
-                        ) {
-                          userInfo.parsed_balance =
-                            result / 1000000000000000000;
-                        } else {
-                          alert.error("Couldn't find balance: ", result);
-                        }
-                        // The result varies by RPC method.
-                        // For example, this method will return a transaction hash hexadecimal string on success.
-                      })
-                      .catch((error) => {
-                        // If the request fails, the Promise will reject with an error.
-                        alert.error(
-                          "Failed getting info from ethereum API: " + error
-                        );
-                      });
-                  } else {
-                    alert.error("Couldn't find any user: ", result);
-                  }
-                })
-                .catch((error) => {
-                  // If the request fails, the Promise will reject with an error.
-                  alert.error(
-                    "Failed getting info from ethereum API: " + error
-                  );
-                });
-            }
-
-            // Register hooks here
-            provider.on("message", (event) => {
-              alert.info("Message from MetaMask: ", event);
-            });
-
-            provider.on("chainChanged", (chainId) => {
-              console.log("Changed chain to: ", chainId);
-
-              method = "eth_getBalance";
-              params = [userInfo.eth_info.account, "latest"];
-              provider
-                .request({
-                  method: method,
-                  params,
-                })
-                .then((result) => {
-                  console.log("Got result: ", result);
-                  if (result !== undefined && result !== null) {
-                    userInfo.eth_info.balance = result;
-                    userInfo.eth_info.parsed_balance =
-                      result / 1000000000000000000;
-                    console.log("INFO: ", userInfo);
-                    setUserData(userInfo);
-                  } else {
-                    alert.error("Couldn't find balance: ", result);
-                  }
-                })
-                .catch((error) => {
-                  // If the request fails, the Promise will reject with an error.
-                  alert.error(
-                    "Failed getting info from ethereum API: " + error
-                  );
-                });
-            });
-          }
-        });
-
-        if (
-          userInfo.eth_info !== undefined &&
-          userInfo.eth_info.balance !== undefined
-        ) {
-          //console.log(userInfo.eth_info.balance)
-          userInfo.eth_info.parsed_balance =
-            userInfo.eth_info.balance / 1000000000000000000;
-        }
-				*/}
 
         //console.log("USER: ", userInfo)
         setUserData(userInfo);
@@ -668,6 +554,7 @@ const App = (message, props) => {
 
   return (
     <ThemeProvider theme={theme}>
+	  <CssBaseline />
       <CookiesProvider>
         <BrowserRouter>
           <Provider template={AlertTemplate} {...options}>

frontend/src/components/ConfigureWorkflow.jsx

@@ -14,7 +14,7 @@ import {
   List,
   ListItem,
   ListItemText,
-  Fade,
+  Collapse,
 } from "@mui/material";
 import { 
 	FavoriteBorder as FavoriteBorderIcon,

frontend/src/components/Dropzone.jsx

@@ -56,7 +56,11 @@ const Dropzone = ({ children, style, onDrop }) => {
   };
 
   useEffect(() => {
-    if (!dropzoneRef.current) return;
+    if (dropzoneRef === null || dropzoneRef === undefined || dropzoneRef.current === null || dropzoneRef.current === undefined) {
+	  	return
+	}
+
+	// Check if event listene exists for dropzoneRef.current
 
     dropzoneRef.current.addEventListener("dragover", handleDragOver);
     dropzoneRef.current.addEventListener("dragenter", handleDragEnter);
@@ -64,6 +68,10 @@ const Dropzone = ({ children, style, onDrop }) => {
     dropzoneRef.current.addEventListener("drop", handleDrop);
 
     return () => {
+		if (dropzoneRef.current === null || dropzoneRef.current === undefined) {
+			return
+		}
+
       dropzoneRef.current.removeEventListener("dragover", handleDragOver);
       dropzoneRef.current.removeEventListener("dragenter", handleDragEnter);
       dropzoneRef.current.removeEventListener("dragleave", handleDragLeave);

frontend/src/components/Header.jsx

@@ -688,7 +688,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 										{/*
 										<PolymerIcon style={{marginRight: "5px"}} />
 										*/}
-										<span style={{marginTop: 0, marginRight: 8, }}>Workflows</span>
+										<Typography style={{marginTop: 0, marginRight: 8, }}>Workflows</Typography>
 									</div> 
 								</Link>
       	 			</ListItem>
@@ -698,7 +698,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<AppsIcon style={{marginRight: "5px"}} />
 											*/}
-											<span style={{marginTop: 0, marginRight: 5,  }}>Apps</span>
+											<Typography style={{marginTop: 0, marginRight: 5,  }}>Apps</Typography>
 										</div>
 								</Link>
       	 			</ListItem>
@@ -715,7 +715,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<DescriptionIcon style={{marginRight: "5px"}} />
 											*/}
-											<span style={{marginTop: 0,}}>Docs</span>
+											<Typography style={{marginTop: 0,}}>Docs</Typography>
 										</div>
 								</Link>
       	 			</ListItem>

frontend/src/components/Oauth2Auth.jsx

@@ -36,7 +36,7 @@ import {
   Breadcrumbs,
   CircularProgress,
   Switch,
-  Fade,
+  Collapse,
 } from "@mui/material";
 import { 
 	LockOpen as LockOpenIcon,

frontend/src/components/OrgHeader.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import theme from '../theme.jsx';
 import { makeStyles } from "@mui/styles";
-import { useTheme } from "@material-ui/core/styles";
 
 import Tooltip from "@material-ui/core/Tooltip";
 import Grid from "@material-ui/core/Grid";

frontend/src/components/ParsedAction.jsx

@@ -43,7 +43,7 @@ import {
   Breadcrumbs,
   CircularProgress,
   Switch,
-  Fade,
+  Collapse,
 	Autocomplete 
 } from "@mui/material";
 

frontend/src/components/Searchfield.jsx

@@ -206,11 +206,12 @@ const SearchField = props => {
 							const avatar = baseImage
 
 							var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
+
 							parsedUrl += `?queryID=${hit.__queryID}`
 
 							// <a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
 							return (
-								<Link key={hit.objectID} to={{ pathname: parsedUrl }} rel="noopener noreferrer" style={{textDecoration: "none", color: "white",}} onClick={(event) => {
+								<Link key={hit.objectID} to={parsedUrl} rel="noopener noreferrer" style={{textDecoration: "none", color: "white",}} onClick={(event) => {
 									//console.log("CLICK")
 									setSearchOpen(true)
 
@@ -402,7 +403,7 @@ const SearchField = props => {
 							parsedUrl += `?queryID=${hit.__queryID}`
 
 							return (
-								<Link key={hit.objectID} to={{ pathname: parsedUrl }} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
+								<Link key={hit.objectID} to={parsedUrl} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
 									console.log("CLICK")
 									setSearchOpen(true)
 
@@ -558,7 +559,8 @@ const SearchField = props => {
 						if (parsedUrl.includes("/apps/")) {
 							const extraHash = hit.url_hash === undefined ? "" : `#${hit.url_hash}`
 
-							parsedUrl = `/apps/${hit.filename}?tab=docs&queryID=${hit.__queryID}${extraHash}`
+							parsedUrl = `/apps/${hit.filename}`
+							parsedUrl += `?tab=docs&queryID=${hit.__queryID}${extraHash}`
 						}
 
 						return (

frontend/src/components/ShuffleCodeEditor.jsx

@@ -46,10 +46,10 @@ import ReactJson from "react-json-view";
 import PaperComponent from "../components/PaperComponent.jsx";
 
 import CodeMirror from '@uiw/react-codemirror';
-import 'codemirror/keymap/sublime';
+//import 'codemirror/keymap/sublime';
-import 'codemirror/addon/selection/mark-selection.js'
+//import 'codemirror/addon/selection/mark-selection.js'
-import 'codemirror/theme/gruvbox-dark.css';
+//import 'codemirror/theme/gruvbox-dark.css';
-import 'codemirror/theme/duotone-light.css';
+//import 'codemirror/theme/duotone-light.css';
 import {indentWithTab} from "@codemirror/commands"
 import { padding, textAlign } from '@mui/system';
 import data from '../frameworkStyle.jsx';

frontend/src/components/WelcomeForm2.jsx

@@ -16,7 +16,7 @@ import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import theme from '../theme.jsx';
 import {
 	Button,
-  	Fade,
+  	Collapse,
 		IconButton,
     FormGroup,
     FormControl,
@@ -506,7 +506,7 @@ const WelcomeForm = (props) => {
         switch (step) {
             case 0:
                 return (
-									<Fade in={true}>
+									<Collapse in={true}>
                     <Grid container spacing={1} style={{margin: "auto", maxWidth: 500, minWidth: 500, minHeight: sizing, maxHeight: sizing, }}>
 											{/*isCloud ? null :
 												<Typography variant="body1" style={{marginLeft: 8, marginTop: 10, marginRight: 30, }} color="textSecondary">
@@ -587,11 +587,11 @@ const WelcomeForm = (props) => {
                             </FormControl>
                         </Grid>
                     </Grid>
-									</Fade>
+									</Collapse>
                 )
             case 1:
                 return (
-									<Fade in={true}>
+									<Collapse in={true}>
                     <div style={{minHeight: sizing, maxHeight: sizing, marginTop: 20, maxWidth: 500, }}>
 												<Typography variant="body1" style={{marginLeft: 8, marginTop: 50, marginRight: 30, marginBottom: 0, }} color="textSecondary">
 													Apps for each category are shown based on your activity and can be changed by clicking their icon. We will help you connect them later.
@@ -684,11 +684,11 @@ const WelcomeForm = (props) => {
                         </Grid>
 												*/}
 											</div>
-									</Fade>
+									</Collapse>
                 )
             case 2:
                 return (
-									<Fade in={true}>
+									<Collapse in={true}>
                     <div style={{marginTop: 0, maxWidth: 700, minWidth: 700, margin: "auto", minHeight: sizing, maxHeight: sizing, }}>
 												<Typography variant="body1" style={{marginTop: 15, marginBottom: 0, maxWidth: 500, margin: "auto", marginBottom: 15, }} color="textSecondary">
 													These are some of our Workflow templates, used to start new Workflows. Use the right and left buttons to find <a href="/usecases" target="_blank" rel="norefferer" style={{color: "#f86a3e", textDecoration: "none", }}>new Usecases</a>, and click the orange button to build it.
@@ -755,7 +755,7 @@ const WelcomeForm = (props) => {
        										</div>
 												</div>
 										</div>
-									</Fade>
+									</Collapse>
                 )
             default:
                 return "unknown step"

frontend/src/defaultCytoscapeStyle.js

@@ -1,432 +0,0 @@
-const data = [
-  {
-    selector: "node",
-    css: {
-      label: "data(label)",
-      "text-valign": "center",
-      "font-family":
-        "Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif",
-      "font-weight": "lighter",
-      "margin-right": "10px",
-      "font-size": "18px",
-      width: "80px",
-      height: "80px",
-      color: "white",
-      padding: "10px",
-      margin: "5px",
-      "border-width": "1px",
-      "text-margin-x": "10px",
-      "z-index": 5001,
-    },
-  },
-  {
-    selector: "edge",
-    css: {
-      "target-arrow-shape": "triangle",
-      "target-arrow-color": "grey",
-      "curve-style": "unbundled-bezier",
-      label: "data(label)",
-      "text-margin-y": "-15px",
-      width: "5px",
-      color: "white",
-      "line-fill": "linear-gradient",
-      "line-gradient-stop-positions": ["0.0", "100"],
-      "line-gradient-stop-colors": ["grey", "grey"],
-      "z-index": 5001,
-    },
-  },
-  {
-    selector: `node[type="ACTION"]`,
-    css: {
-      shape: "roundrectangle",
-      "background-color": "#213243",
-      "border-color": "#81c784",
-      "background-width": "100%",
-      "background-height": "100%",
-      "border-radius": "5px",
-      "z-index": 5001,
-    },
-  },
-  {
-    selector: `node[type="COMMENT"]`,
-    css: {
-      shape: "roundrectangle",
-      color: "data(color)",
-      width: "data(width)",
-      height: "data(height)",
-      padding: "0px",
-      margin: "0px",
-      "background-color": "data(backgroundcolor)",
-      "background-image": "data(backgroundimage)",
-      "border-color": "#ffffff",
-      "text-margin-x": "0px",
-      "z-index": 4999,
-      "border-radius": "5px",
-      "background-opacity": "0.5",
-			"text-wrap": "wrap",
-    },
-  },
-  {
-    selector: `node[app_name="Shuffle Tools"]`,
-    css: {
-      width: "30px",
-      height: "30px",
-      "z-index": 5000,
-      "font-size": "0px",
-      "background-width": "75%",
-      "background-height": "75%",
-      "background-color": "data(iconBackground)",
-      "background-fill": "data(fillstyle)",
-      "background-gradient-direction": "to-right",
-      "background-gradient-stop-colors": "data(fillGradient)",
-    },
-  },
-  {
-    selector: `node[app_name="Testing"]`,
-    css: {
-      width: "30px",
-      height: "30px",
-      "z-index": 5000,
-      "font-size": "0px",
-    },
-  },
-  {
-    selector: `node[?small_image]`,
-    css: {
-      "background-image": "data(small_image)",
-      "text-halign": "right",
-    },
-  },
-  {
-    selector: `node[?large_image]`,
-    css: {
-      "background-image": "data(large_image)",
-      "text-halign": "right",
-    },
-  },
-  {
-    selector: `node[type="CONDITION"]`,
-    css: {
-      shape: "diamond",
-      "border-color": "##FFEB3B",
-      padding: "30px",
-    },
-  },
-  {
-    selector: `node[type="eventAction"]`,
-    css: {
-      "background-color": "#edbd21",
-    },
-  },
-  {
-    selector: `node[type="TRIGGER"]`,
-    css: {
-      shape: "octagon",
-      "border-radius": "5px",
-      "border-color": "orange",
-      "background-color": "#213243",
-      "background-width": "100%",
-      "background-height": "100%",
-    },
-  },
-  {
-    selector: `node[status="running"]`,
-    css: {
-      "border-color": "#81c784",
-    },
-  },
-  {
-    selector: `node[status="stopped"]`,
-    css: {
-      "border-color": "orange",
-    },
-  },
-  {
-    selector: 'node[type="mq"]',
-    css: {
-      "background-color": "#edbd21",
-    },
-  },
-  {
-    selector: "node[?isButton]",
-    css: {
-      shape: "ellipse",
-      width: "15px",
-      height: "15px",
-      "z-index": "5002",
-      "font-size": "0px",
-      border: "1px solid rgba(255,255,255,0.9)",
-      "background-image": "data(icon)",
-      "background-color": "data(iconBackground)",
-    },
-  },
-  {
-    selector: "node[?isSuggestion]",
-    css: {
-      shape: "ellipse",
-      width: "50px",
-      height: "50px",
-      "z-index": "5002",
-      "font-size": "0px",
-      border: "1px solid rgba(255,255,255,0.9)",
-      "background-image": "data(large_image)",
-      "background-color": "data(iconBackground)",
-      label: "data(label)",
-    },
-  },
-  {
-    selector: "node[?canConnect]",
-    css: {
-      "border-color": "#f86a3e",
-      "border-width": "10px",
-      "z-index": "5002",
-      "background-color": "#f86a3e",
-    },
-  },
-  {
-    selector: "node[?isDescriptor]",
-    css: {
-      shape: "ellipse",
-      "border-color": "#80deea",
-      width: "5px",
-      height: "5px",
-      "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: {
-      shape: "ellipse",
-      "border-color": "#80deea",
-      width: "80px",
-      height: "80px",
-      "font-size": "18px",
-      "background-width": "100%",
-      "background-height": "100%",
-    },
-  },
-  {
-    selector: "node[!is_valid]",
-    css: {
-      "border-color": "red",
-      "border-width": "10px",
-    },
-  },
-  {
-    selector: ":selected",
-    css: {
-      "background-color": "#77b0d0",
-      "border-color": "#77b0d0",
-      "border-width": "20px",
-    },
-  },
-  {
-    selector: ".skipped-highlight",
-    css: {
-      "background-color": "grey",
-      "border-color": "grey",
-      "border-width": "8px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
-    },
-  },
-  {
-    selector: ".success-highlight",
-    css: {
-      "background-color": "#41dcab",
-      "border-color": "#41dcab",
-      "border-width": "5px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
-    },
-  },
-  {
-    selector: ".hover-highlight",
-    css: {
-      "background-color": "#5f9265",
-      "border-color": "#5f9265",
-      "border-width": "5px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
-    },
-  },
-  {
-    selector: ".failure-highlight",
-    css: {
-      "background-color": "#8e3530",
-      "border-color": "#8e3530",
-      "border-width": "5px",
-      "transition-property": "background-color",
-      "transition-duration": "0.5s",
-    },
-  },
-  {
-    selector: ".not-executing-highlight",
-    css: {
-      "background-color": "grey",
-      "border-color": "grey",
-      "border-width": "5px",
-      "transition-property": "#ffef47",
-      "transition-duration": "0.25s",
-    },
-  },
-  {
-    selector: ".executing-highlight",
-    css: {
-      "background-color": "#ffef47",
-      "border-color": "#ffef47",
-      "border-width": "8px",
-      "transition-property": "border-width",
-      "transition-duration": "0.25s",
-    },
-  },
-  {
-    selector: ".awaiting-data-highlight",
-    css: {
-      "background-color": "#f4ad42",
-      "border-color": "#f4ad42",
-      "border-width": "5px",
-      "transition-property": "border-color",
-      "transition-duration": "0.5s",
-    },
-  },
-  {
-    selector: ".shuffle-hover-highlight",
-    css: {
-      "background-color": "#f85a3e",
-      "border-color": "#f85a3e",
-      "border-width": "12px",
-      "transition-property": "border-width",
-      "transition-duration": "0.25s",
-      label: "data(label)",
-      "font-size": "18px",
-      color: "white",
-    },
-  },
-  {
-    selector: "$node > node",
-    css: {
-      "padding-top": "10px",
-      "padding-left": "10px",
-      "padding-bottom": "10px",
-      "padding-right": "10px",
-    },
-  },
-  {
-    selector: "edge.executing-highlight",
-    css: {
-      width: "5px",
-      "target-arrow-color": "#ffef47",
-      "line-color": "#ffef47",
-      "transition-property": "line-color, width",
-      "transition-duration": "0.25s",
-    },
-  },
-  {
-    selector: `edge[?decorator]`,
-    css: {
-      width: "1px",
-      "line-style": "dashed",
-      "line-fill": "linear-gradient",
-      "target-arrow-color": "#f34079",
-      "line-gradient-stop-positions": ["0.0", "100"],
-      "line-gradient-stop-colors": ["#f86a3e", "#f34079"],
-    },
-  },
-  {
-    selector: "edge.success-highlight",
-    css: {
-      width: "5px",
-      "target-arrow-color": "#41dcab",
-      "line-color": "#41dcab",
-      "transition-property": "line-color, width",
-      "transition-duration": "0.5s",
-      "line-fill": "linear-gradient",
-      "line-gradient-stop-positions": ["0.0", "100"],
-      "line-gradient-stop-colors": ["#41dcab", "#41dcab"],
-    },
-  },
-  {
-    selector: ".eh-handle",
-    style: {
-      "background-color": "#337ab7",
-      width: "1px",
-      height: "1px",
-      shape: "circle",
-      "border-width": "1px",
-      "border-color": "black",
-    },
-  },
-  {
-    selector: ".eh-source",
-    style: {
-      "border-width": "3",
-      "border-color": "#337ab7",
-    },
-  },
-  {
-    selector: ".eh-target",
-    style: {
-      "border-width": "3",
-      "border-color": "#337ab7",
-    },
-  },
-  {
-    selector: ".eh-preview, .eh-ghost-edge",
-    style: {
-      "background-color": "#337ab7",
-      "line-color": "#337ab7",
-      "target-arrow-color": "#337ab7",
-      "source-arrow-color": "#337ab7",
-    },
-  },
-  {
-    selector: "edge:selected",
-    css: {
-      "target-arrow-color": "#f85a3e",
-    },
-  },
-  {
-    selector: `edge[?source_workflow]`,
-    css: {
-      "background-opacity": "1",
-      "font-size": "0px",
-    },
-  },
-  {
-    selector: `node[?source_workflow]`,
-    css: {
-      "background-opacity": "0",
-      "font-size": "0px",
-    },
-  },
-	{
-		selector: "node:selected",
-		css: {
-			"border-color": "#f86a3e",
-			"border-width": "7px",
-		},
-	},
-];
-
-//{
-//	selector: 'edge[?hasErrors]',
-//	css: {
-//		'target-arrow-color': '#991818',
-//		'line-color': '#991818',
-//		'line-style': 'dashed',
-//		"line-fill": "linear-gradient",
-//		"line-gradient-stop-positions": ["0.0", "100"],
-//		"line-gradient-stop-colors": ["#991818", "#991818"],
-//	},
-//},
-
-export default data;

frontend/src/theme.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { createTheme } from "@mui/material/styles";
+import { createTheme, adaptV4Theme } from "@mui/material/styles";
 
-const theme = createTheme({
+const theme = createTheme(adaptV4Theme({
   palette: {
     primary: {
       main: "#F86743",
@@ -71,34 +71,20 @@ const theme = createTheme({
       },
     },
     MuiCssBaseline: {
-      '@global': {
+		MuiCssBaseline: {
-				/*
+		  styleOverrides: `
-          scrollbarColor: "#6b6b6b #2b2b2b",
+			@font-face {
-          "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
+			  font-family: 'roboto';
-            backgroundColor: "#2b2b2b",
+			  font-style: normal;
-          },
+			  font-display: swap;
-          "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
+			  font-weight: 400;
-            borderRadius: 8,
+			  src: local('roboto'), local('roboto'), format('truetype');
-            backgroundColor: "#6b6b6b",
+			  unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
-            minHeight: 24,
-            border: "3px solid #2b2b2b",
-          },
-          "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
-            backgroundColor: "#959595",
-          },
-          "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
-            backgroundColor: "#959595",
-          },
-          "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
-            backgroundColor: "#959595",
-          },
-          "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
-            backgroundColor: "#2b2b2b",
-          },
-				*/	
 			}
+		  `,
 		},
 	},
-});
+  },
+}));
 
 export default theme;

frontend/src/views/Admin.jsx

@@ -2343,22 +2343,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
           </div>
         ) : (
           <div>
-						{/*
-						<Tooltip
-              title={"Go to Organization document"}
-              style={{}}
-              aria-label={"Organization doc"}
-            >
-              <IconButton
-                style={{ top: -10, right: 50, position: "absolute" }}
-                onClick={() => {
-									console.log("Should go to icon")
-                }}
-              >
-                <FileCopyIcon style={{ color: "rgba(255,255,255,0.8)" }} />
-              </IconButton>
-            </Tooltip>
-						*/}
 
 						{userdata.support === true ? 
 							<span style={{display: "flex", top: -10, right: 50, position: "absolute"}}>
@@ -2407,6 +2391,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
               style={{}}
               aria-label={"Copy orgid"}
             >
+			<div>
               <IconButton
                 style={{ top: -10, right: 0, position: "absolute" }}
                 onClick={() => {
@@ -2436,6 +2421,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
               >
                 <FileCopyIcon style={{ color: "rgba(255,255,255,0.8)" }} />
               </IconButton>
+			</div>
             </Tooltip>
 						{selectedOrganization.defaults !== undefined && selectedOrganization.defaults.documentation_reference !== undefined && selectedOrganization.defaults.documentation_reference !== null && selectedOrganization.defaults.documentation_reference.includes("http") ?
 							<Tooltip
@@ -2443,6 +2429,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                 style={{ top: -10, right: 50, position: "absolute" }}
 								aria-label={"Open org docs"}
 							>
+								<div>
 								<a href={selectedOrganization.defaults.documentation_reference} target="_blank" style={{ textDecoration: "none", }} rel="noopener noreferrer">
 									<IconButton
                 		style={{ top: -10, right: 50, position: "absolute" }}
@@ -2450,6 +2437,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 										<DescriptionIcon style={{ color: "rgba(255,255,255,0.8)" }} />
 									</IconButton>
 								</a>
+								</div>
 							</Tooltip>
 						: null}
             {selectedOrganization.name.length > 0 ? (
@@ -2764,8 +2752,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
             		        };
 
             		        return (
-            		          <Zoom key={index}>
+            		          <Zoom in={true} key={index}>
+							  	<div>
             		            	<GridItem data={griditem} />
+							  	</div>
             		          </Zoom>
             		        );
             		      })}
@@ -3107,6 +3097,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                             style={{}}
                             aria-label={"Copy APIkey"}
                           >
+						  	<div>
                             <IconButton
                               style={{}}
                               onClick={() => {
@@ -3143,6 +3134,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                                 style={{ color: "rgba(255,255,255,0.8)" }}
                               />
                             </IconButton>
+						  	</div>
                           </Tooltip>
                         )
                       }
@@ -3715,6 +3707,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                           title="Set in EVERY workflow"
                           placement="top"
                         >
+							<div>
 							  <IconButton
 								style={{ marginRight: 10 }}
 								disabled={data.defined === false}
@@ -3726,6 +3719,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 								  color={data.defined ? "primary" : "secondary"}
 								/>
 							  </IconButton>
+						  </div>
                         </Tooltip>
                       ) : (
                         <Tooltip
@@ -3733,6 +3727,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                           title="Must edit before you can set in all workflows"
                           placement="top"
                         >
+						<div>
                           <IconButton
                             style={{ marginRight: 10 }}
                             onClick={() => {}}
@@ -3741,6 +3736,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                               color={data.defined ? "primary" : "secondary"}
                             />
                           </IconButton>
+						</div>
                         </Tooltip>
                       )}
                       <IconButton
@@ -3952,6 +3948,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 														style={{}}
 														aria-label={"Copy orborus command"}
 													>
+														<div>
 														<IconButton
 															style={{}}
 															disabled={environment.Type === "cloud"}
@@ -3988,6 +3985,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 														>
 															<FileCopyIcon disabled={environment.Type === "cloud"} style={{ color: environment.Type === "cloud" ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.8)" }} />
 														</IconButton>
+														</div>
 													</Tooltip>
 												}
                   	  />

frontend/src/views/AngularWorkflow.jsx

@@ -51,7 +51,7 @@ import {
   IconButton,
   Menu,
   Input,
-  Fade,
+  Collapse,
   FormGroup,
   FormControlLabel,
   Typography,
@@ -119,14 +119,14 @@ import {
 
 import * as cytoscape from "cytoscape";
 import * as edgehandles from "cytoscape-edgehandles";
-import * as clipboard from "cytoscape-clipboard";
+//import * as clipboard from "cytoscape-clipboard";
+//import undoRedo from "cytoscape-undo-redo";
+//import cxtmenu from "cytoscape-cxtmenu";
 import CytoscapeComponent from "react-cytoscapejs";
-import undoRedo from "cytoscape-undo-redo";
 
 import Draggable from "react-draggable";
 
 import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
-import cxtmenu from "cytoscape-cxtmenu";
 
 import { validateJson, GetIconInfo } from "./Workflows.jsx";
 import { GetParsedPaths } from "./Apps.jsx";
@@ -232,9 +232,9 @@ const inputColor = "#383B40";
 
 // http://apps.cytoscape.org/apps/yfileslayoutalgorithms
 cytoscape.use(edgehandles);
-cytoscape.use(clipboard);
+//cytoscape.use(clipboard);
-cytoscape.use(undoRedo);
+//cytoscape.use(undoRedo);
-cytoscape.use(cxtmenu);
+//cytoscape.use(cxtmenu);
 
 // Adds specific text to items
 //import popper from 'cytoscape-popper';
@@ -12880,11 +12880,11 @@ const AngularWorkflow = (defaultprops) => {
           {defaultReturn}
         </SwipeableDrawer>
         :
-        <Fade in={true} style={{ transitionDelay: `$0ms` }}>
+        <Collapse in={true} style={{ transitionDelay: `$0ms` }}>
           <div id="rightside_actions" style={rightsidebarStyle}>
             {defaultReturn}
           </div>
-        </Fade>
+        </Collapse>
     );
 
     //return null;
@@ -14960,7 +14960,7 @@ const AngularWorkflow = (defaultprops) => {
             </Typography>
           </div>
         ) : (
-          <Fade in={true} timeout={1000} style={{ transitionDelay: `${150}ms` }}>
+          <Collapse in={true} timeout={1000} style={{ transitionDelay: `${150}ms` }}>
             <CytoscapeComponent
               elements={elements}
               minZoom={0.35}
@@ -14983,7 +14983,7 @@ const AngularWorkflow = (defaultprops) => {
                 setCy(incy);
               }}
             />
-          </Fade>
+          </Collapse>
         )}
       </div>
       {executionModal}

frontend/src/views/Apps.jsx

@@ -1902,9 +1902,9 @@ const Apps = (props) => {
 
                     return (
 						<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
-												<span>
+							<div>
 								<AppPaper app={app} />
-												</span>
+							</div>
 						</Zoom>
 					)
                   })}

frontend/src/views/Dashboard.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useInterval } from "react-powerhooks";
 import AppFramework from "../components/AppFramework.jsx";
-import { makeStyles, useTheme } from "@mui/styles";
+import { makeStyles, } from "@mui/styles";
 // nodejs library that concatenates classes
 import classNames from "classnames";
 import theme from '../theme.jsx';

frontend/src/views/DashboardViews.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useInterval } from "react-powerhooks";
-import { makeStyles, useTheme } from "@mui/styles";
+import { makeStyles, } from "@mui/styles";
 // nodejs library that concatenates classes
 import classNames from "classnames";
 import theme from '../theme.jsx';

frontend/src/views/SettingsPage.jsx

@@ -12,8 +12,6 @@ import {
 } from "@mui/material";
 import { useAlert } from "react-alert";
 
-import detectEthereumProvider from "@metamask/detect-provider";
-
 const Settings = (props) => {
   const { globalUrl, isLoaded, userdata, setUserData } = props;
   const alert = useAlert();
@@ -814,65 +812,6 @@ const Settings = (props) => {
 						) : null}
           </div>
           <div style={{ flex: 1, marginTop: 20 }}>
-          {/*userdata !== undefined &&
-            userdata.eth_info !== undefined &&
-            userdata.eth_info.account !== undefined &&
-            userdata.eth_info.account.length > 0 ? (
-              <div style={{ width: "100%", textAlign: "left" }}>
-                <Typography variant="body2">Network: TBD</Typography>
-                <Typography variant="body2">
-                  Address: {userdata.eth_info.account}
-                </Typography>
-                {loadedWorkflowCollections.length > 0 ? (
-                  <Typography variant="body2">
-                    Collections:&nbsp;
-                    {loadedWorkflowCollections.map((data, index) => {
-                      var collectionname = data.toLowerCase();
-                      collectionname = collectionname.replaceAll("#", "");
-                      collectionname = collectionname.replaceAll(" ", "-");
-
-                      return (
-                        <span key={index}>
-                          <a
-                            rel="noopener noreferrer"
-                            target="_blank"
-                            href={`https://opensea.io/collection/${collectionname}`}
-                            style={{ textDecoration: "none", color: "#f85a3e" }}
-                          >
-                            {data}
-                          </a>
-                          &nbsp;
-                        </span>
-                      );
-                    })}
-                  </Typography>
-                ) : null}
-                <Button
-                  style={{ height: 40, marginTop: 10 }}
-                  variant="contained"
-                  color="primary"
-                  fullWidth={true}
-                  onClick={() => {
-                    //handleEthereumTokenCreation()
-                    loadWorkflowOwnership();
-                  }}
-                >
-                  Validate ownership
-                </Button>
-              </div>
-            ) : (
-              <Button
-                style={{ height: 40, marginTop: 10 }}
-                variant="outlined"
-                color="primary"
-                fullWidth={true}
-                onClick={() => {
-                  handleEthereumConnection();
-                }}
-              >
-                Authenticate Metamask Wallet
-              </Button>
-            )*/}
           </div>
         </div>
 
@@ -986,137 +925,6 @@ const Settings = (props) => {
 		//saveWorkflow(workflow);
 	}
 
-  const handleEthereumTokenCreation = async () => {
-    const provider = await detectEthereumProvider();
-    if (!provider) {
-      console.log("Please install MetaMask!");
-      alert.error(
-        "Please download the MetaMask browser extension to authenticate fully!"
-      );
-      return;
-    }
-
-    if (!provider.isMetaMask) {
-      alert.error("Only MetaMask is supported as of now.");
-      return;
-    }
-
-    if (!provider.isConnected()) {
-      alert.error("Metamask is not connected.");
-      return;
-    }
-
-    console.log("Should make a token");
-  };
-
-  const handleEthereumConnection = async () => {
-    const provider = await detectEthereumProvider();
-    if (!provider) {
-      console.log("Please install MetaMask!");
-      alert.error(
-        "Please download the MetaMask browser extension to authenticate fully!"
-      );
-      return;
-    }
-
-    if (!provider.isMetaMask) {
-      alert.error("Only MetaMask is supported as of now.");
-      return;
-    }
-
-    // Find the ethereum network
-    // Get the users' account(s)
-    //alert.info("Connecting to MetaMask")
-    //console.log("Connected: ", provider.isConnected())
-
-    if (!provider.isConnected()) {
-      alert.error("Metamask is not connected.");
-      return;
-    }
-
-    provider.on("message", (event) => {
-      alert.info("Ethereum message: ", event);
-    });
-
-    /*
-		params: [
-			{
-				from: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',
-				to: '0xd46e8dd67c5d32be8058bb8eb970870f07244567',
-				gas: '0x76c0', // 30400
-				gasPrice: '0x9184e72a000', // 10000000000000
-				value: '0x9184e72a', // 2441406250
-				data:
-					'0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675',
-			},
-		]
-		*/
-
-    // https://docs.metamask.io/guide/rpc-api.html
-    // Gets accounts - requires previous permissions
-    //const method = "eth_accounts"
-    //const params = []
-    //
-    // Asks for permission, and gets the accounts
-    var method = "eth_requestAccounts";
-    var params = [];
-    provider
-      .request({
-        method: method,
-        params,
-      })
-      .then((result) => {
-        if (result !== undefined && result !== null && result.length > 0) {
-          userdata.eth_info.account = result[0];
-
-          // Getting and setting balance for the current user
-          method = "eth_getBalance";
-          params = [userdata.eth_info.account, "latest"];
-          provider
-            .request({
-              method: method,
-              params,
-            })
-            .then((result) => {
-              if (
-                result !== undefined &&
-                result !== null &&
-                result.length > 0
-              ) {
-                userdata.eth_info.balance = result;
-                userdata.eth_info.parsed_balance = result / 1000000000000000000;
-                console.log(userdata.eth_info);
-                setUserData(userdata.eth_info);
-
-                // Updating
-                //if (userdata.eth_info !== userdata.userdata.eth_info) {
-                //}
-
-                setUser(userdata.id, "eth_info", userdata.eth_info);
-                userdata.userdata.eth_info = userdata.eth_info;
-              } else {
-                alert.error("Couldn't find balance: ", result);
-              }
-              // The result varies by RPC method.
-              // For example, this method will return a transaction hash hexadecimal string on success.
-            })
-            .catch((error) => {
-              // If the request fails, the Promise will reject with an error.
-              //setEthInfo(userdata.eth_info)
-              alert.error("Failed getting info from ethereum API: " + error);
-            });
-        } else {
-          alert.error("Couldn't find any user: ", result);
-        }
-      })
-      .catch((error) => {
-        // If the request fails, the Promise will reject with an error.
-        alert.error("Failed getting info from ethereum API: " + error);
-      });
-
-    // Gets the users' balance in WEI (one quintilionth ETH)
-  };
-
   const loadedCheck =
     isLoaded && !firstrequest ? (
       <div style={bodyDivStyle}>{landingpageData}</div>

frontend/src/views/Welcome.jsx

@@ -11,7 +11,7 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import { 
 	Grid, 
 	Container,
-  Fade,
+  Collapse,
 	Typography, 
 	Paper,
 	Button,
@@ -417,7 +417,7 @@ const Welcome = (props) => {
 										<Typography variant="h6" style={{textAlign: "center", marginBottom: 25, }}>
 											App Framework
 										</Typography>
-										<Fade>
+										<Collapse>
 												<AppFramework
 													inputUsecase={inputUsecase}
 													frameworkData={frameworkData}
@@ -435,13 +435,13 @@ const Welcome = (props) => {
 													inputUsecases={usecases}
 													setInputUsecases={setUsecases}
 												/>
-										</Fade>
+										</Collapse>
 									</div>
 								}
 							</Grid>
 						</div>
 						: 
-						<Fade in={true}>
+						<Collapse in={true}>
 							<div style={{maxWidth: 700, margin: "auto", marginTop: 50, }}>
 								{/*
 							<div style={{display:"flex"}}>
@@ -537,7 +537,7 @@ const Welcome = (props) => {
 									</Typography>
 								</div>
 							</div>
-						</Fade>
+						</Collapse>
 					}
 			</div>
    ) 

frontend/src/views/Workflows.jsx

@@ -8,7 +8,7 @@ import { Navigate } from "react-router-dom";
 
 import SecurityFramework from '../components/SecurityFramework.jsx';
 import EditWorkflow from "../components/EditWorkflow.jsx" 
-import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
+//import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
 import Priority from "../components/Priority.jsx";
 
 import { isMobile } from "react-device-detect" 
@@ -3459,10 +3459,11 @@ const Workflows = (props) => {
 									return returnData 
 								}
 
+				/*<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>*/
                 return (
-									<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
+					<span>
 						{returnData}
-									</Zoom>
+					</span>
               );
             })}
             </div>
@@ -3499,13 +3500,11 @@ const Workflows = (props) => {
 						/>
 					: null}
 
+					{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
 					<div style={{marginTop: 15, marginBottom: 50, }}>
 						{view === "grid" ? (
 							<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
-								<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
 								<NewWorkflowPaper />
-								</Zoom>
-
 								{filteredWorkflows.map((data, index) => {
 									// Shouldn't be a part of this list
 									if (data.public === true) {
@@ -3522,12 +3521,11 @@ const Workflows = (props) => {
 										)
 									}
 
+									/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/
 									return (
-										<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
 										<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
 											<WorkflowPaper key={index} data={data} />
 										</Grid>
-										</Zoom>
 									)
 								})}
 							</Grid>

functions/onprem/orborus/build.sh

@@ -1,5 +1,5 @@
 NAME=shuffle-orborus
-VERSION=1.2.1
+VERSION=1.2.2
 
 echo "Running docker build with $NAME:$VERSION"
 #docker rmi frikky/shuffle:$NAME --force

functions/onprem/worker/build.sh

@@ -1,5 +1,5 @@
 NAME=shuffle-worker
-VERSION=1.2.0
+VERSION=1.2.1
 
 echo "Running docker build with $NAME:$VERSION"
 #CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o worker.bin .