Added human visuals to app framework

frontend/src/App.jsx

@@ -84,6 +84,7 @@ const App = (message, props) => {
     !window.location.pathname.startsWith("/login") &&
     !window.location.pathname.startsWith("/docs") &&
     !window.location.pathname.startsWith("/detectionframework") &&
+    !window.location.pathname.startsWith("/appframework") &&
     !window.location.pathname.startsWith("/adminsetup") &&
     !window.location.pathname.startsWith("/usecases")
   ) {
@@ -405,6 +406,21 @@ const App = (message, props) => {
         	    />
         	  }
         	/>
+        	<Route
+        	  exact
+        	  path="/app"
+        	  element={
+        	    <FrameworkWrapper
+								selectedOption={"Draw"}
+								showOptions={false}
+
+        	      isLoaded={isLoaded}
+        	      isLoggedIn={isLoggedIn}
+        	      globalUrl={globalUrl}
+        	      {...props}
+        	    />
+        	  }
+        	/>
         	<Route
         	  exact
         	  path="/usecases"

frontend/src/components/DetectionFramework.jsx

@@ -831,9 +831,23 @@ const Framework = (props) => {
 		setDefaultSearch(data.label.charAt(0).toUpperCase()+(data.label.substring(1)).toLowerCase())
 	}
 
+  const onEdgeAdded = (event) => {
+		//event.target.data("human", false)
+	}
+
   const onEdgeSelect = (event) => {
+		console.log(event)
+
+		if (event.target.data("human") === undefined) {
+			event.target.data("human", true)
+		} else if (event.target.data("human") === true) {
+      event.target.remove()
+			return
+			//event.target.data("human", false)
+		}
+
 		console.log("Edge selected!", event.target.data())
-		//event.target.remove()
+		event.target.unselect()
 	}
 
 	if (graphDone && cyDone === false) {
@@ -842,6 +856,8 @@ const Framework = (props) => {
 
     cy.fit(null, 200);
     cy.on("select", "edge", (e) => onEdgeSelect(e));
+    cy.on("add", "edge", (e) => onEdgeAdded(e));
+
 		cy.on("select", "node", (e) => {
 			onNodeSelect(e)
 		})