Added possibility of editing app framework anywhere

frontend/src/components/DetectionFramework.jsx

@@ -518,7 +518,7 @@ export const usecases = {
 }
 
 const Framework = (props) => {
-  const {globalUrl, isLoaded, showOptions, selectedOption, rolling, frameworkData, } = props;
+  const {globalUrl, isLoaded, showOptions, selectedOption, rolling, frameworkData, size } = props;
 	const [cy, setCy] = React.useState()
 	const [edgesStarted, setEdgesStarted] = React.useState(false)
 	const [graphDone, setGraphDone] = React.useState(false)
@@ -528,6 +528,7 @@ const Framework = (props) => {
 	const [newSelectedApp, setNewSelectedApp] = React.useState({})
 	const [defaultSearch, setDefaultSearch] = React.useState("")
 	const [animationStarted, setAnimationStarted] = React.useState(false)
+	const scale = size === undefined ? 1 : size > 5 ? 3 : size
 
   const alert = useAlert()
 
@@ -584,11 +585,10 @@ const Framework = (props) => {
 
 		const foundelement = cy.getElementById(discoveryData.id)
 		if (foundelement !== undefined && foundelement !== null) {
-			//console.log("element: ", foundelement)
 			foundelement.data("large_image", newSelectedApp.image_url)
 			foundelement.data("text_margin_y", "60px")
 			foundelement.data("margin_x", "0px")
-			foundelement.data("margin_y", "50x")
+			foundelement.data("margin_y", "50px")
 			foundelement.data("width", "85px")
 			foundelement.data("height", "85px")
 		}
@@ -602,6 +602,7 @@ const Framework = (props) => {
     window.location.host === "shuffler.io";
 
   const imgSize = 50;
+	var parsedFrameworkData = frameworkData 
 
 	if (frameworkData !== undefined) {
 		if (frameworkData.cases !== undefined) {
@@ -622,28 +623,27 @@ const Framework = (props) => {
 		if (frameworkData.network !== undefined) {
 			frameworkData.Network = frameworkData.network
 		}
+		if (frameworkData.iam !== undefined) {
+			frameworkData.IAM = frameworkData.iam
+		}
 		if (frameworkData.edr !== undefined) {
 			frameworkData["EDR & AV"] = frameworkData.edr
 		}
-	}
 
-	const parsedFrameworkData = frameworkData 
+		parsedFrameworkData = frameworkData 
-	/*
+	} else { 
-	=== undefined ? 
+		console.log("No frameworkdata: ")
-		{
+		parsedFrameworkData = {
-			"Cases": {},
+			"Cases": 	{},  
-			"IAM": {},
+			"SIEM": 	{},
-			"SIEM": {},
 			"Assets": {},
-			"Intel": {},
+			"IAM": {},
-			"Comms": {},
+			"Intel": 	{},
+			"Comms": 	{},
 			"Network": {},
 			"EDR & AV": {},
 		}
-		: 
+	}
-		frameworkData 
-	*/
-
 
 	// 0 = automated, 1 = manual
 	const [usecaseType, setUsecaseType] = React.useState(0)
@@ -735,6 +735,8 @@ const Framework = (props) => {
       	"border-width": "7px",
 			}
 
+			/*
+			// Animation
 			for (var i = 0; i < 10; i++) {
 				foundelement.animate(
 					{
@@ -754,6 +756,7 @@ const Framework = (props) => {
 					}
 				)
 			}
+			*/
 		}
 	}
 
@@ -871,22 +874,26 @@ const Framework = (props) => {
 
 	if (cy !== undefined && cy.elements().length === 0 && parsedFrameworkData !== undefined) {
 		//'background-image': 'data(small_image)',
-		const shiftradius = 115
+		const shiftradius = 115*scale
-		const baselocationX = 285
+		const baselocationX = 285*scale
-		const baselocationY = 50 
+		const baselocationY = 50*scale
-		const shiftmodifier = 3
+		const shiftmodifier = 3*scale
 
-		const svgSize = 40 
+		const svgSize = `${40*scale}px`
 
 		console.log("Framework: ", parsedFrameworkData)
-		const defaultSize = "85px"
+		const fontSize = `${12*scale}px`
-		const iconSize = "45px"
+		const defaultSize = `${85*scale}px`
-		const textMarginDefault = "14px"
+		const iconSize = `${45*scale}px`
-		const textMarginImage = "60px"
+		const textMarginDefault = `${14*scale}px`
+		const textMarginImage = `${60*scale}px`
 		const nodes = [
 			{
 					group: "nodes",
 					data: {
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
+						font_size: fontSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -894,8 +901,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData.Cases.description === undefined ? "" : parsedFrameworkData.Cases.description,
 						app_id: parsedFrameworkData.Cases.id === undefined ? "" : parsedFrameworkData.Cases.id,
 						text_margin_y: parsedFrameworkData.Cases.large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData.Cases.large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData.Cases.large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData.Cases.large_image === undefined ? '19px' : "50x",
+						margin_y: parsedFrameworkData.Cases.large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData.Cases.large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData.Cases.large_image === undefined ? iconSize : defaultSize,
 						large_image: parsedFrameworkData.Cases.large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -913,6 +920,9 @@ const Framework = (props) => {
 			{
 					group: "nodes",
 					data: {
+						font_size: fontSize,
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -920,8 +930,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData.IAM.description === undefined ? "" : parsedFrameworkData.IAM.description,
 						app_id: parsedFrameworkData.IAM.id === undefined ? "" : parsedFrameworkData.IAM.id,
 						text_margin_y: parsedFrameworkData.IAM.large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData.IAM.large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData.IAM.large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData.IAM.large_image === undefined ? '19px' : "0px",
+						margin_y: parsedFrameworkData.IAM.large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData.IAM.large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData.IAM.large_image === undefined ? iconSize : defaultSize,
 						large_image: parsedFrameworkData.IAM.large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -939,6 +949,9 @@ const Framework = (props) => {
 			{
 					group: "nodes",
 					data: {
+						font_size: fontSize,
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -946,8 +959,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData.Assets.description === undefined ? "" : parsedFrameworkData.Assets.description,
 						app_id: parsedFrameworkData.Assets.id === undefined ? "" : parsedFrameworkData.Assets.id,
 						text_margin_y: parsedFrameworkData.Assets.large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData.Assets.large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData.Assets.large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData.Assets.large_image === undefined ? '19px' : "0px",
+						margin_y: parsedFrameworkData.Assets.large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData.Assets.large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData.Assets.large_image === undefined ? iconSize : defaultSize,
 						large_image: parsedFrameworkData.Assets.large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -965,6 +978,9 @@ const Framework = (props) => {
 			{
 					group: "nodes",
 					data: {
+						font_size: fontSize,
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -972,8 +988,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData.Intel.description === undefined ? "" : parsedFrameworkData.Intel.description,
 						app_id: parsedFrameworkData.Intel.id === undefined ? "" : parsedFrameworkData.Intel.id,
 						text_margin_y: parsedFrameworkData.Intel.large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData.Intel.large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData.Intel.large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData.Intel.large_image === undefined ? '19px' : "0px",
+						margin_y: parsedFrameworkData.Intel.large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData.Intel.large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData.Intel.large_image === undefined ? iconSize : defaultSize,
 						large_image: parsedFrameworkData.Intel.large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -991,6 +1007,9 @@ const Framework = (props) => {
 			{
 					group: "nodes",
 					data: {
+						font_size: fontSize,
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -998,8 +1017,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData.Comms.description === undefined ? "" : parsedFrameworkData.Comms.description,
 						app_id: parsedFrameworkData.Comms.id === undefined ? "" : parsedFrameworkData.Comms.id,
 						text_margin_y: parsedFrameworkData.Comms.large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData.Comms.large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData.Comms.large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData.Comms.large_image === undefined ? '19px' : "0px",
+						margin_y: parsedFrameworkData.Comms.large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData.Comms.large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData.Comms.large_image === undefined ? iconSize : defaultSize,
 						large_image: parsedFrameworkData.Comms.large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -1017,6 +1036,9 @@ const Framework = (props) => {
 			{
 					group: "nodes",
 					data: {
+						font_size: fontSize,
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -1024,8 +1046,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData["EDR & AV"].description === undefined ? "" : parsedFrameworkData["EDR & AV"].description,
 						app_id: parsedFrameworkData["EDR & AV"].id === undefined ? "" : parsedFrameworkData["EDR & AV"].id,
 						text_margin_y: parsedFrameworkData["EDR & AV"].large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData["EDR & AV"].large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData["EDR & AV"].large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData["EDR & AV"].large_image === undefined ? '19px' : "0px",
+						margin_y: parsedFrameworkData["EDR & AV"].large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData["EDR & AV"].large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData["EDR & AV"].large_image === undefined ? iconSize : defaultSize,
 						large_image: parsedFrameworkData["EDR & AV"].large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -1043,6 +1065,9 @@ const Framework = (props) => {
 			{
 					group: "nodes",
 					data: {
+						font_size: fontSize,
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -1050,8 +1075,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData.Network.description === undefined ? "" : parsedFrameworkData.Network.description,
 						app_id: parsedFrameworkData.Network.id === undefined ? "" : parsedFrameworkData.Network.id,
 						text_margin_y: parsedFrameworkData.Network.large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData.Network.large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData.Network.large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData.Network.large_image === undefined ? '19px' : "0px",
+						margin_y: parsedFrameworkData.Network.large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData.Network.large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData.Network.large_image === undefined ? iconSize : defaultSize,
 						large_image:  parsedFrameworkData.Network.large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -1069,6 +1094,9 @@ const Framework = (props) => {
 			{
 					group: "nodes",
 					data: {
+						font_size: fontSize,
+						boxwidth: defaultSize,
+						boxheight: defaultSize,
 						is_valid: true,
 						isValid: true,
 						errors: [],
@@ -1076,8 +1104,8 @@ const Framework = (props) => {
 						description: parsedFrameworkData.SIEM.description === undefined ? "" : parsedFrameworkData.SIEM.description,
 						app_id: parsedFrameworkData.SIEM.id === undefined ? "" : parsedFrameworkData.SIEM.id,
 						text_margin_y: parsedFrameworkData.SIEM.large_image === undefined ? textMarginDefault : textMarginImage,
-						margin_x: parsedFrameworkData.SIEM.large_image === undefined ? '32px' : "0px",
+						margin_x: parsedFrameworkData.SIEM.large_image === undefined ? `${32*scale}px` : "0px",
-						margin_y: parsedFrameworkData.SIEM.large_image === undefined ? '19px' : "0px",
+						margin_y: parsedFrameworkData.SIEM.large_image === undefined ? `${19*scale}px` : `0px`,
 						width: parsedFrameworkData.SIEM.large_image === undefined ? iconSize : defaultSize,
 						height: parsedFrameworkData.SIEM.large_image === undefined ? iconSize : defaultSize,
 						large_image: parsedFrameworkData.SIEM.large_image === undefined ? encodeURI(`data:image/svg+xml;utf-8,<svg fill="rgb(248,90,62)" width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -1098,6 +1126,9 @@ const Framework = (props) => {
 		nodes.push({
 				group: "nodes",
 				data: {
+					font_size: fontSize,
+					width: defaultSize,
+					height: defaultSize,
 					id: "SHUFFLE",
 					is_valid: true,
 					isValid: true,
@@ -1526,7 +1557,7 @@ const Framework = (props) => {
 				elements={elements} 
 				minZoom={0.35}
 				maxZoom={2.00}
-				style={{width: 560, height: 560, backgroundColor: "transparent", margin: "auto",}} 
+				style={{width: 560*scale, height: 560*scale, backgroundColor: "transparent", margin: "auto",}} 
 				stylesheet={frameworkStyle}
 				boxSelectionEnabled={false}
 				panningEnabled={false}

frontend/src/frameworkStyle.jsx

@@ -5,10 +5,8 @@ const data = [{
 				'text-valign': 'center',
 				'font-family': 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif',
 				'font-weight': 'lighter',
-				'font-size': '12px',
+				'font-size': 'data(font_size)',
 				'text-algin': 'center',
-				'width': '85px',
-				'height': '85px',
 				'border-width': '3px',
 				'border-color': '#8a8a8a',
 				'color': '#f85a3e',
@@ -16,11 +14,13 @@ const data = [{
 				'text-margin-y': 'data(text_margin_y)',
 				'background-color': '#27292d',
 				'background-image': 'data(large_image)',
-				'background-width': 'data(width)',
-				'background-height': 'data(height)',
 				'background-position-x': 'data(margin_x)',
 				'background-position-y': 'data(margin_y)',
 				'background-clip': "node",
+				'background-width': 'data(width)',
+				'background-height': 'data(width)',
+				'width': 'data(boxwidth)',
+				'height': 'data(boxheight)',
 			}
 		},
 		{
@@ -65,10 +65,10 @@ const data = [{
 			selector: `node[?middle_node]`,
 			css: {
 				'background-image': '/images/Shuffle_logo.png',
-				'height': '105px',
+				'height': 'data(width)',
-				'width': '105px',
+				'width': 'data(height)',
-				'background-width': '105px',
+				'background-width': 'data(width)',
-				'background-height': '105px',
+				'background-height': 'data(height)',
 				'background-position-x': '0px',
 				'background-position-y': '0px',
 				'border-width': '2px',

frontend/src/views/Dashboard.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useInterval } from "react-powerhooks";
+import DetectionFramework from "../components/DetectionFramework.jsx";
 // nodejs library that concatenates classes
 import classNames from "classnames";
 import theme from '../theme';
@@ -52,7 +53,7 @@ import {
 	TreeMapRect,
 } from 'reaviz';
 
-const UsecaseListComponent = ({keys, isCloud}) => {
+const UsecaseListComponent = ({keys, isCloud, globalUrl}) => {
 	const [expandedIndex, setExpandedIndex] = useState(-1);
 	const [expandedItem, setExpandedItem] = useState(-1);
 	if (keys === undefined || keys === null || keys.length === 0) {
@@ -230,17 +231,37 @@ const UsecaseListComponent = ({keys, isCloud}) => {
           									</Tooltip>
 													</div>
 													<div style={{marginTop: 25, display: "flex", minHeight: 400, maxHeight: 400, }}>
-														<img
+														{/*
-															alt={subcase.name}
+															<img
-															src={"/images/detectionframework.png"}
+																alt={subcase.name}
-															style={{
+																src={"/images/detectionframework.png"}
-																flex: 1,
+																style={{
+																	flex: 1,
+																	height: 400,
+																	width: 400, 
+																	borderRadius: theme.palette.borderRadius,
+																	border: "1px solid rgba(255,255,255,0.3)",
+																}}
+															/>
+														*/}
+
+														<div style={{
 																height: 400, 
 																width: 400, 
 																borderRadius: theme.palette.borderRadius,
 																border: "1px solid rgba(255,255,255,0.3)",
-															}}
+															}}>
-														/>
+															<DetectionFramework 
+																frameworkData={undefined}
+																selectedOption={"Draw"}
+																showOptions={false}
+																isLoaded={true}
+																isLoggedIn={true}
+																globalUrl={globalUrl}
+																size={0.7}
+															/>
+														</div>
+
 														<div style={{flex: 1, marginLeft: 10, textAlign: "center",}}>
 															<Typography variant="h6">
 																Your workflow{subcase.matches.length === 1 ? "" : "s"} ({subcase.matches.length})
@@ -249,7 +270,7 @@ const UsecaseListComponent = ({keys, isCloud}) => {
 																<Grid container xs={3} style={{maxWidth: 325, margin: "auto", marginTop: 10, itemAlign: "center", }}>
 																	{subcase.matches.map((workflow, workflowindex) => {
 																		return (
-																			<Grid index={workflowindex} xs={12}>
+																			<Grid key={workflowindex} item index={workflowindex} xs={12}>
 																				<WorkflowPaper key={workflowindex} data={workflow} />
 																			</Grid>
 																		)
@@ -877,7 +898,7 @@ const Dashboard = (props) => {
 				</div>
 			: null}
 
-			<UsecaseListComponent keys={selectedUsecases} isCloud={isCloud} />
+			<UsecaseListComponent keys={selectedUsecases} isCloud={isCloud} globalUrl={globalUrl} />
 
 			{treeKeys.length > 0 ? 
 				<TreeChart keys={treeKeys} />