From 994696c28af846786983ad745a9dfea4ca937e30 Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Thu, 21 Jul 2022 02:28:00 +0200
Subject: [PATCH] More welcome page and recommendation system integrations

---
 frontend/src/components/Appsearch.jsx         | 21 ++++---
 .../src/components/DetectionFramework.jsx     | 63 ++++++++++++++-----
 frontend/src/components/Workflowsearch.jsx    |  2 +-
 frontend/src/views/LoginPage.jsx              |  5 +-
 4 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Appsearch.jsx b/frontend/src/components/Appsearch.jsx
index 430382fe..ec77d93e 100644
--- a/frontend/src/components/Appsearch.jsx
+++ b/frontend/src/components/Appsearch.jsx
@@ -14,6 +14,9 @@ import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button,
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const WorkflowSearch = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits }  = props
+
+  const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
+
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
 	const theme = useTheme();
@@ -164,15 +167,17 @@ const WorkflowSearch = props => {
 						}} onMouseOut={() => {
 							setMouseHoverIndex(-1)
 						}} onClick={() => {
-							setNewSelectedApp(data)
-							//if (data.objectID !== data.objectID) {
-							//}
+							if (setNewSelectedApp !== undefined) {
+								setNewSelectedApp(data)
+							}
 
-							//ReactGA.event({
-							//	category: "app_search",
-							//	action: `app_${parsedname}_${data.id}_click`,
-							//	label: "",
-							//})
+							if (isCloud) {
+								ReactGA.event({
+									category: "app_search",
+									action: `app_${parsedname}_${data.id}_personalize_click`,
+									label: "",
+								})
+							}
 						}}>
 							<div style={{display: "flex"}}>
 								<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 30, minWidth: 30, minHeight: 30, maxHeight: 30, display: "block", }} />
diff --git a/frontend/src/components/DetectionFramework.jsx b/frontend/src/components/DetectionFramework.jsx
index c05726ce..f8293dc7 100644
--- a/frontend/src/components/DetectionFramework.jsx
+++ b/frontend/src/components/DetectionFramework.jsx
@@ -529,25 +529,40 @@ const Framework = (props) => {
 	const [newSelectedApp, setNewSelectedApp] = React.useState({})
 	const [defaultSearch, setDefaultSearch] = React.useState("")
 	const [animationStarted, setAnimationStarted] = React.useState(false)
+	const [paperTitle, setPaperTitle] = React.useState("")
 	const scale = size === undefined ? 1 : size > 5 ? 3 : size
 
   const alert = useAlert()
 
 	useEffect(() => {
-		console.log("DISCWRAP CHANG: ", discoveryWrapper)
-
+		//console.log("DISCWRAP CHANG: ", discoveryWrapper)
 		if (discoveryWrapper === undefined || discoveryWrapper.id === "SHUFFLE" || discoveryWrapper.id === undefined || cy === undefined) {
+			setDiscoveryData({})
+
+			if (cy !== undefined) {
+				cy.nodes().unselect()
+			}
+
 			return
 		}
+			
 
 		// Find the node and click it?
-		const nodes = cy.nodes().jsons()
-		for (var key in nodes) {
-			const node = nodes[key]
-			console.log("NOD: ", node)
+		setTimeout(() => {
+			const nodes = cy.nodes().jsons()
+			for (var key in nodes) {
+				const node = nodes[key]
+				//console.log("NOD: ", node.data, discoveryWrapper.id)
+				if (node.data.id === discoveryWrapper.id) {
+					const tmpnode = cy.getElementById(node.data.id)
+					if (tmpnode !== undefined) {
+						tmpnode.select()
+					}
 
-      //cy.getElementById(node.data.id).click();
-		}
+					setPaperTitle(discoveryWrapper.id)
+				}
+			}
+		}, 50,)
 		//setDiscoveryData(discoveryWrapper)
 	}, [discoveryWrapper])
 
@@ -640,6 +655,11 @@ const Framework = (props) => {
 			return
 		}
 
+		if (paperTitle.length > 0) {
+			setDiscoveryWrapper({})
+			setSelectionOpen(false)
+		}
+
 		const submitValue = {
 			"type": discoveryData.id,
 			"name": newSelectedApp.name,
@@ -1498,7 +1518,15 @@ const Framework = (props) => {
 
   		{
 				Object.getOwnPropertyNames(discoveryData).length > 0 ? 
-					<Paper style={{width: 250, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: 50, left: 50, }}>
+					<Paper style={{width: 275, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: 50, left: 50, }}>
+						{paperTitle.length > 0 ? 
+							<span>
+								<Typography variant="h6" style={{textAlign: "center"}}>
+									{paperTitle}
+								</Typography>
+								<Divider style={{marginTop: 5, marginBottom: 5 }} />
+							</span>
+						: null}
 						<Tooltip
 							title="Close window"
 							placement="top"
@@ -1513,6 +1541,7 @@ const Framework = (props) => {
 									e.preventDefault();
 									setDiscoveryData({})
 									setDefaultSearch("")
+									setPaperTitle("")
 								}}
 							>
 								<CloseIcon style={{ color: "white", height: 15, width: 15, }} />
@@ -1586,7 +1615,7 @@ const Framework = (props) => {
 						<div>
 							{discoveryData !== undefined && discoveryData.name !== undefined && discoveryData.name !== null && discoveryData.name.length > 0 ? 
 								<span>
-									<Typography variant="body2" color="textSecondary" style={{marginTop: 10, marginBottom: 10, }}>
+									<Typography variant="body2" color="textSecondary" style={{marginTop: 10, marginBottom: 10, maxHeight: 75, overflowY: "auto", overflowX: "hidden", }}>
 										{discoveryData.description}
 									</Typography>
 									{/*isCloud && defaultSearch !== undefined && defaultSearch.length > 0 ? 
@@ -1622,13 +1651,13 @@ const Framework = (props) => {
 							}
 						</div>
 						<div style={{marginTop: 10}}>
-						{selectionOpen ? 
-							<AppSearch
-								defaultSearch={defaultSearch}
-								newSelectedApp={newSelectedApp}
-								setNewSelectedApp={setNewSelectedApp}
-							/>
-						: null}
+							{selectionOpen ? 
+								<AppSearch
+									defaultSearch={defaultSearch}
+									newSelectedApp={newSelectedApp}
+									setNewSelectedApp={setNewSelectedApp}
+								/>
+							: null}
 						</div>
 					</Paper>
 					: null
diff --git a/frontend/src/components/Workflowsearch.jsx b/frontend/src/components/Workflowsearch.jsx
index 3c26db69..53e8abdd 100644
--- a/frontend/src/components/Workflowsearch.jsx
+++ b/frontend/src/components/Workflowsearch.jsx
@@ -98,7 +98,7 @@ const WorkflowSearch = props => {
 					type="search"
 					color="primary"
 					defaultValue={defaultSearch}
-					placeholder={`Find ${defaultSearch} Apps...`}
+					placeholder={`Find ${defaultSearch} Workflows...`}
 					id="shuffle_workflow_search_field"
 					onChange={(event) => {
 						refine(event.currentTarget.value)
diff --git a/frontend/src/views/LoginPage.jsx b/frontend/src/views/LoginPage.jsx
index 0e6c6b51..405f0aa4 100644
--- a/frontend/src/views/LoginPage.jsx
+++ b/frontend/src/views/LoginPage.jsx
@@ -185,8 +185,11 @@ const LoginDialog = (props) => {
               }
 
               setIsLoggedIn(true);
+							if (!responseJson.tutorials.includes("welcome")) {
+								console.log("RUN Welcome!!")
+								window.location.pathname = "/welcome" 
+							}
 
-              //navigate("/workflows")
 							window.location.href = "/workflows"
             }
           })