yashsinghcodes
681 lines
19 KiB
React
681 lines
19 KiB
React
import React, { useMemo, useState, useEffect, useContext, memo } from "react";
|
||
import { toast } from 'react-toastify';
|
||
import { getTheme } from "../theme.jsx";
|
||
import { Context } from "../context/ContextApi.jsx";
|
||
import ReactJson from "react-json-view-ssr";
|
||
import { GetIconInfo, collapseField, } from "../views/Workflows2.jsx";
|
||
import defaultCytoscapeStyle from "../defaultCytoscapeStyle.jsx";
|
||
import { v4 as uuidv4, } from "uuid";
|
||
|
||
import {
|
||
Typography,
|
||
Tooltip,
|
||
IconButton,
|
||
} from "@mui/material";
|
||
|
||
import {
|
||
Refresh as RefreshIcon,
|
||
} from "@mui/icons-material";
|
||
|
||
import cytoscape from "cytoscape";
|
||
import CytoscapeComponent from "react-cytoscapejs";
|
||
|
||
//import spread from "cytoscape-spread";
|
||
import BubbleSets from 'cytoscape-bubblesets';
|
||
import coseBilkent from 'cytoscape-cose-bilkent';
|
||
|
||
cytoscape.use(coseBilkent)
|
||
cytoscape.use(BubbleSets)
|
||
const svgSize = 24;
|
||
|
||
|
||
// Uses correlations between locations to build a graph around relationships
|
||
// In the background, this is stored in the datastore_ngram index
|
||
const CorrelationGraph = (props) => {
|
||
const { globalUrl, userdata, datastoreData, } = props;
|
||
|
||
const {themeMode, supportEmail, brandColor} = useContext(Context)
|
||
const theme = getTheme(themeMode, brandColor)
|
||
|
||
const [relations, setRelations] = useState(null);
|
||
const [cy, setCy] = React.useState();
|
||
const [correlations, setCorrelations] = useState([])
|
||
const [visualisedData, setVisualisedData] = useState(undefined)
|
||
const [selectedData, setselectedData] = useState(undefined)
|
||
const [startNode, setStartNode] = useState(undefined)
|
||
const [bb, setBb] = useState(undefined)
|
||
const [handledKeys, setHandledKeys] = useState([])
|
||
|
||
const cystyle = useMemo(() => defaultCytoscapeStyle(theme), [themeMode]);
|
||
const spreadLayout = {
|
||
name: 'cose-bilkent',
|
||
nodeRepulsion: 12500,
|
||
idealEdgeLength: 200,
|
||
gravity: 0.40,
|
||
numIter: 10000,
|
||
animationDuration: 500,
|
||
fit: true,
|
||
|
||
animate: true,
|
||
}
|
||
|
||
const loadCorrelations = (datastoreData) => {
|
||
const searchData = {
|
||
"type": "datastore",
|
||
"key": datastoreData?.key,
|
||
|
||
"category": datastoreData?.category,
|
||
}
|
||
|
||
if (datastoreData?.category === undefined || datastoreData?.category === null || datastoreData?.category.length < 1) {
|
||
console.log("No category for datastore item, cannot load correlations.")
|
||
return
|
||
}
|
||
|
||
const checkKey = `${datastoreData?.category}|${datastoreData?.key}`
|
||
if (handledKeys.includes(checkKey) === true) {
|
||
//toast.warn("Correlations for this datastore item have already been loaded.")
|
||
return
|
||
}
|
||
setHandledKeys([...handledKeys, checkKey])
|
||
|
||
const url = `${globalUrl}/api/v2/correlations`
|
||
fetch(url, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Accept: "application/json",
|
||
},
|
||
credentials: "include",
|
||
body: JSON.stringify(searchData),
|
||
})
|
||
.then((response) => {
|
||
if (response.status !== 200) {
|
||
console.log("Status not 200 for workflows :O!");
|
||
return;
|
||
}
|
||
|
||
return response.json();
|
||
})
|
||
.then((responseJson) => {
|
||
if (responseJson?.success === false) {
|
||
toast.warn("Failed to load correlations. Please try again or contact support@shuffler if this persists.")
|
||
} else {
|
||
if (responseJson.length === 0) {
|
||
toast.warn("No correlations found for this datastore item.")
|
||
return
|
||
}
|
||
|
||
const parsedInfo = {
|
||
parentKey: datastoreData?.key,
|
||
parentId: datastoreData?.id,
|
||
relations: responseJson,
|
||
}
|
||
|
||
setCorrelations(parsedInfo)
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
toast(error.toString());
|
||
});
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (cy === undefined) {
|
||
return
|
||
}
|
||
|
||
if (correlations === undefined || correlations === null || correlations?.relations === undefined) {
|
||
console.log("No correlations to load into graph: ", correlations)
|
||
return
|
||
}
|
||
|
||
var startX = 250
|
||
var startY = 400
|
||
var added = false
|
||
//var xyIncrement = 125
|
||
for (var key in correlations?.relations) {
|
||
var parentValue = correlations?.relations[key]
|
||
|
||
if (parentValue?.ref === undefined || parentValue?.ref === null || parentValue?.ref?.length < 2) {
|
||
console.log("Skipping correlation with no ref: ", value)
|
||
continue
|
||
}
|
||
|
||
parentValue.id = `node_${parentValue.key}`
|
||
const foundnode = cy.getElementById(parentValue.id)
|
||
if (foundnode !== undefined && foundnode !== null && foundnode.length > 0) {
|
||
console.log("Parent node already exists, skipping: ", parentValue)
|
||
continue
|
||
}
|
||
|
||
parentValue.type = "COMMENT"
|
||
parentValue.height = 40
|
||
|
||
//parentValue.width = 200
|
||
parentValue.width = Math.max(125, Math.min(300, parentValue.key.length * 10))
|
||
|
||
parentValue.is_valid = true
|
||
parentValue.color = "white"
|
||
parentValue.label = parentValue.key
|
||
parentValue.clusters = [parentValue.id, correlations.parentId]
|
||
|
||
const parentNodeData = {
|
||
group: "nodes",
|
||
data: parentValue,
|
||
position: {
|
||
x: startX,
|
||
y: startY,
|
||
},
|
||
}
|
||
|
||
cy.add(parentNodeData)
|
||
|
||
const newRootId = uuidv4()
|
||
cy.add({
|
||
group: "edges",
|
||
data: {
|
||
id: newRootId,
|
||
source: correlations?.parentId,
|
||
target: parentValue.id,
|
||
correlation: true,
|
||
},
|
||
})
|
||
|
||
added = true
|
||
for (var relKey in parentValue?.ref) {
|
||
var refKey = parentValue?.ref[relKey]
|
||
|
||
|
||
//const foundnode = cy.getElementById(`node_${key}`)
|
||
//if (foundnode !== undefined && foundnode !== null && foundnode.length > 0) {
|
||
// continue
|
||
//}
|
||
const original = refKey
|
||
var category = ""
|
||
if (refKey.includes("|")) {
|
||
const splitRef = refKey.split("|")
|
||
category = splitRef[0]
|
||
|
||
// Add the rest of them to key
|
||
refKey = splitRef.slice(1).join("|")
|
||
}
|
||
|
||
var value = {
|
||
"key": refKey,
|
||
"category": category,
|
||
"relation": parentValue?.key,
|
||
|
||
"ref": original,
|
||
}
|
||
|
||
value.id = `node_${value.ref}`
|
||
const foundnode = cy.getElementById(value.id)
|
||
if (foundnode !== undefined && foundnode !== null && foundnode.length > 0) {
|
||
// Check if the node points to this one?
|
||
console.log("Child node already exists, skipping: ", value.id, value)
|
||
|
||
// Verify if an edge exists
|
||
const sourceExistingEdgeId = `edge_${parentValue.id}_${value.id}`
|
||
const sourceCheck = cy.getElementById(sourceExistingEdgeId)
|
||
if (sourceCheck === undefined || sourceCheck === null || sourceCheck.length < 1) {
|
||
const destinationExistingEdgeId = `edge_${value.id}_${parentValue.id}`
|
||
const destCheck = cy.getElementById(destinationExistingEdgeId)
|
||
if (destCheck === undefined || destCheck === null || destCheck.length < 1) {
|
||
// Get source and child - make sure their clusters align
|
||
const sourceNode = cy.getElementById(parentValue.id)
|
||
if (sourceNode === undefined || sourceNode === null || sourceNode.length < 1) {
|
||
}
|
||
|
||
cy.add({
|
||
group: "edges",
|
||
data: {
|
||
id: sourceExistingEdgeId,
|
||
source: parentValue.id,
|
||
target: value.id,
|
||
|
||
correlation: true,
|
||
},
|
||
})
|
||
}
|
||
} else {
|
||
//console.log("Edge already exists between parent and child: ", existingEdgeId)
|
||
}
|
||
|
||
continue
|
||
}
|
||
|
||
value.height = 40
|
||
value.width = 40
|
||
value.clusters = [value.id, parentValue.id]
|
||
|
||
const iconInfo = GetIconInfo({
|
||
"app_name": category,
|
||
"name": category,
|
||
})
|
||
|
||
//console.log("Iconinfo: ", category, iconInfo)
|
||
if (iconInfo?.originalIcon === undefined || iconInfo?.originalIcon === null || iconInfo?.originalIcon.length < 2) {
|
||
value.type = "CORRELATION"
|
||
|
||
// Get text length from value.key
|
||
//value.width = Math.max(125, Math.min(300, value.key.length * 10))
|
||
value.backgroundcolor = randomColor()
|
||
} else {
|
||
|
||
value.type = "CORRELATION"
|
||
const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" 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);
|
||
value.large_image = svgpin_Url
|
||
if (iconInfo.icon === undefined || iconInfo.icon === null || iconInfo.icon.length < 1) {
|
||
console.log("Handle iconInfo.originalIcon instead")
|
||
}
|
||
|
||
value.fillGradient = iconInfo.fillGradient
|
||
value.fillstyle = "solid"
|
||
value.app_name = "Shuffle Tools"
|
||
|
||
if (
|
||
value.fillGradient !== undefined &&
|
||
value.fillGradient !== null &&
|
||
value.fillGradient.length > 0
|
||
) {
|
||
value.fillstyle = "linear-gradient";
|
||
} else {
|
||
value.iconBackground = iconInfo.iconBackgroundColor;
|
||
}
|
||
|
||
}
|
||
|
||
value.is_valid = true
|
||
value.color = "white"
|
||
//value.backgroundcolor = "blue"
|
||
value.label = value.key
|
||
if (value.category !== undefined && value.category !== null && value.category.length > 0) {
|
||
value.label = `${value.category}: ${value.key}`
|
||
}
|
||
|
||
const nodeData = {
|
||
group: "nodes",
|
||
data: value,
|
||
position: {
|
||
x: startX,
|
||
y: startY,
|
||
},
|
||
}
|
||
|
||
cy.add(nodeData)
|
||
|
||
const newChildRootId = `edge_${parentValue.id}_${value.id}`
|
||
cy.add({
|
||
group: "edges",
|
||
data: {
|
||
id: newChildRootId,
|
||
source: parentValue.id,
|
||
target: value.id,
|
||
|
||
correlation: true,
|
||
},
|
||
})
|
||
|
||
added = true
|
||
}
|
||
}
|
||
|
||
setTimeout(() => {
|
||
if (added === false) {
|
||
return
|
||
}
|
||
|
||
cy.ready(() => {
|
||
/*
|
||
var layout = cy.makeLayout({
|
||
name: 'circle',
|
||
radius: 300,
|
||
avoidOverlap: false,
|
||
startAngle: 3.14,
|
||
sweep: undefined,
|
||
clockwise: true,
|
||
|
||
animate: true,
|
||
})
|
||
*/
|
||
|
||
var layout = cy.makeLayout(spreadLayout)
|
||
layout.run()
|
||
})
|
||
}, 500)
|
||
|
||
}, [correlations])
|
||
|
||
useEffect(() => {
|
||
var removeFields = ["type", "height", "width", "is_valid", "color", "label", "backgroundcolor", "success", "encrypted", "public_authorization", "suborg_distribution", "revision_id", "large_image", "fillstyle", "app_name", "fillGradient", ]
|
||
if (visualisedData !== undefined) {
|
||
var cleanedData = JSON.parse(JSON.stringify(visualisedData))
|
||
for (var i = 0; i < removeFields.length; i++) {
|
||
delete cleanedData[removeFields[i]]
|
||
}
|
||
|
||
setVisualisedData(cleanedData)
|
||
}
|
||
|
||
if (selectedData !== undefined) {
|
||
var cleanedData2 = JSON.parse(JSON.stringify(selectedData))
|
||
for (var j = 0; j < removeFields.length; j++) {
|
||
delete cleanedData2[removeFields[j]]
|
||
}
|
||
|
||
setselectedData(cleanedData2)
|
||
}
|
||
|
||
}, [visualisedData, selectedData])
|
||
|
||
const onNodeHover = (event) => {
|
||
const nodedata = JSON.parse(JSON.stringify(event.target.data()))
|
||
if (nodedata === undefined || nodedata === null) {
|
||
console.log("No node data on hover")
|
||
return
|
||
}
|
||
|
||
const cytoscapeElement = document.getElementById("cytoscape_view")
|
||
if (cytoscapeElement !== undefined && cytoscapeElement !== null) {
|
||
if (nodedata?.category === undefined || nodedata?.category === null || nodedata?.category.length < 1) {
|
||
// Means it is a value
|
||
} else {
|
||
cytoscapeElement.style.cursor = "pointer"
|
||
}
|
||
}
|
||
|
||
// Only do it 1/20 times as it's super fast anyway
|
||
// This is due to state management within events being weird
|
||
if (Math.random() < 0.95) {
|
||
setVisualisedData(nodedata)
|
||
}
|
||
|
||
if (bb === undefined || bb === null) {
|
||
console.log("BB undefined (2)")
|
||
return
|
||
}
|
||
|
||
if (nodedata?.clusters === undefined || nodedata?.clusters === null) {
|
||
toast.warn("No cluster data for this node.")
|
||
return
|
||
}
|
||
|
||
for (var clusterKey in nodedata?.clusters) {
|
||
const cluster = nodedata?.clusters[clusterKey]
|
||
|
||
var nodesInCluster = cy.nodes().filter((node) => {
|
||
const nodeData = node.data()
|
||
|
||
// Check if it is an incoming or outgoing one
|
||
if (nodeData?.clusters === undefined || nodeData?.clusters === null) {
|
||
return false
|
||
}
|
||
|
||
return nodeData?.clusters.includes(cluster)
|
||
})
|
||
|
||
const edgesInCluster = cy.edges().filter((edge) => {
|
||
const sourceNode = edge.source()
|
||
const targetNode = edge.target()
|
||
|
||
const sourceData = sourceNode.data()
|
||
const targetData = targetNode.data()
|
||
if (sourceData?.clusters === undefined || sourceData?.clusters === null) {
|
||
return false
|
||
}
|
||
|
||
if (targetData?.clusters === undefined || targetData?.clusters === null) {
|
||
return false
|
||
}
|
||
|
||
return sourceData?.clusters.includes(cluster) && targetData?.clusters.includes(cluster)
|
||
})
|
||
|
||
bb.addPath(nodesInCluster, edgesInCluster, null)
|
||
}
|
||
|
||
const incomingNodes = event.target.incomers('node')
|
||
bb.addPath(incomingNodes)
|
||
const outgoingNodes = event.target.outgoers('node')
|
||
bb.addPath(outgoingNodes)
|
||
}
|
||
|
||
const onNodeHoverOut = (event) => {
|
||
const nodedata = event.target.data();
|
||
|
||
const cytoscapeElement = document.getElementById("cytoscape_view")
|
||
if (cytoscapeElement !== undefined && cytoscapeElement !== null) {
|
||
cytoscapeElement.style.cursor = "default"
|
||
}
|
||
|
||
setVisualisedData(undefined)
|
||
|
||
if (bb === undefined || bb === null) {
|
||
console.log("BB undefined")
|
||
return
|
||
}
|
||
|
||
const activePaths = bb.getPaths()
|
||
for (var pathKey in activePaths) {
|
||
bb.removePath(activePaths[pathKey])
|
||
}
|
||
}
|
||
|
||
const onNodeSelect = (event) => {
|
||
const nodedata = event.target.data();
|
||
if (nodedata === undefined || nodedata === null) {
|
||
return
|
||
}
|
||
|
||
setselectedData(nodedata)
|
||
|
||
loadCorrelations(nodedata)
|
||
}
|
||
|
||
const onUnselect = (event) => {
|
||
const nodedata = event.target.data();
|
||
if (nodedata === undefined || nodedata === null) {
|
||
return
|
||
}
|
||
|
||
setselectedData(undefined)
|
||
}
|
||
|
||
const randomColor = () => {
|
||
// Generate RGB values in a pleasant range (not too dark or oversaturated)
|
||
const r = 80 + Math.floor(Math.random() * 150); // 80–230
|
||
const g = 80 + Math.floor(Math.random() * 150);
|
||
const b = 80 + Math.floor(Math.random() * 150);
|
||
|
||
// Slightly mix towards neutral gray to make tones modern and less primary
|
||
const mix = 0.3;
|
||
const gray = (r + g + b) / 3;
|
||
const rr = Math.floor(r * (1 - mix) + gray * mix);
|
||
const gg = Math.floor(g * (1 - mix) + gray * mix);
|
||
const bb = Math.floor(b * (1 - mix) + gray * mix);
|
||
|
||
return `rgb(${rr}, ${gg}, ${bb})`;
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (cy === undefined) {
|
||
console.log("No cy instance (yet)")
|
||
return
|
||
}
|
||
|
||
// If cytoscape has nodes, skip
|
||
const existingNodes = cy.nodes()
|
||
if (existingNodes !== undefined && existingNodes !== null && existingNodes.length > 0) {
|
||
return
|
||
}
|
||
|
||
if (datastoreData === undefined || datastoreData === null) {
|
||
console.log("No data for correlation graph (2): ", datastoreData)
|
||
return
|
||
}
|
||
|
||
var parsedData = JSON.parse(JSON.stringify(datastoreData))
|
||
|
||
parsedData.id = `node_${datastoreData?.category}|${datastoreData?.key}`
|
||
parsedData.large_image = "/images/singul_green.png"
|
||
parsedData.type = "ACTION"
|
||
parsedData.height = 125
|
||
parsedData.width = 125
|
||
parsedData.color = "white"
|
||
parsedData.label = `start - ${parsedData?.category}: ${parsedData?.key}`
|
||
parsedData.clusters = [parsedData.id]
|
||
parsedData.is_valid = true
|
||
|
||
// Default node
|
||
cy.add({
|
||
group: "nodes",
|
||
data: parsedData,
|
||
position: {
|
||
x: 500,
|
||
y: 500,
|
||
},
|
||
})
|
||
|
||
loadCorrelations(parsedData)
|
||
setStartNode(parsedData)
|
||
|
||
const bubbleSets = cy.bubbleSets({
|
||
zIndex: 4,
|
||
throttle: 10,
|
||
interactive: true,
|
||
|
||
style: {
|
||
"fill": randomColor(),
|
||
},
|
||
})
|
||
|
||
setBb(bubbleSets)
|
||
}, [cy])
|
||
|
||
useEffect(() => {
|
||
if (bb === undefined || bb === null) {
|
||
return
|
||
}
|
||
|
||
cy.on("mouseover", "node", (e) => onNodeHover(e))
|
||
cy.on("mouseout", "node", (e) => onNodeHoverOut(e))
|
||
cy.on("select", "node", (e) => onNodeSelect(e))
|
||
cy.on("unselect", "node", (e) => onUnselect(e))
|
||
}, [bb])
|
||
|
||
if (datastoreData === undefined || datastoreData === null) {
|
||
console.log("No data for correlation graph: ", datastoreData)
|
||
return null
|
||
}
|
||
|
||
const getRelation = (startNode, targetNode) => {
|
||
if (startNode?.id === targetNode?.id) {
|
||
return 0
|
||
}
|
||
|
||
const foundStartnode = cy.getElementById(startNode?.id)
|
||
if (foundStartnode === undefined || foundStartnode === null || foundStartnode.length < 1) {
|
||
return 0
|
||
}
|
||
|
||
const foundTargetnode = cy.getElementById(targetNode?.id)
|
||
if (foundTargetnode === undefined || foundTargetnode === null || foundTargetnode.length < 1) {
|
||
return 0
|
||
}
|
||
|
||
// Check range between them
|
||
const dijkstra = cy.elements().dijkstra(foundStartnode, (edge) => 1, false);
|
||
const distance = dijkstra.distanceTo(foundTargetnode);
|
||
if (distance === Infinity) {
|
||
return -1
|
||
}
|
||
|
||
if (distance <= 0) {
|
||
return 0
|
||
}
|
||
|
||
// Divide by 2 due to skipping "values" -> focus on keys containing them
|
||
return distance/2
|
||
}
|
||
|
||
const foundValue = visualisedData !== undefined ? visualisedData : selectedData !== undefined ? selectedData : undefined
|
||
const hoverName = foundValue !== undefined && foundValue?.key !== undefined ? foundValue?.key : ""
|
||
const hoverCategory = foundValue !== undefined && foundValue?.category !== undefined ? foundValue?.category : ""
|
||
const jumpsFromStart = hoverCategory === "" ? 0 : getRelation(startNode, foundValue)
|
||
|
||
return (
|
||
<div style={{position: "relative", width: "95%", height: "95%", margin: "16px 16px 32px 32px", }}>
|
||
<Tooltip title="Re-shuffle graph" placement="top">
|
||
<IconButton
|
||
variant="outlined"
|
||
color="secondary"
|
||
style={{position: "absolute", top: 8, left: 8, zIndex: 1000, backgroundColor: theme.palette.surfaceColor, }}
|
||
onClick={() => {
|
||
if (cy === undefined || cy === null) {
|
||
return
|
||
}
|
||
|
||
cy.ready(() => {
|
||
var layout = cy.makeLayout(spreadLayout)
|
||
layout.run()
|
||
})
|
||
}}
|
||
>
|
||
<RefreshIcon />
|
||
</IconButton>
|
||
</Tooltip>
|
||
|
||
{visualisedData === undefined && selectedData === undefined ? null :
|
||
<div style={{position: "fixed", top: 100, right: 100, zIndex: 1000, maxWidth: 400, minWidth: 400, backgroundColor: theme.palette.surfaceColor, padding: "16px 16px 16px 16px", borderRadius: theme.palette.borderRadius, boxShadow: theme.palette.boxShadow, }}>
|
||
<Typography variant="h6" style={{}}>
|
||
{hoverCategory}{hoverCategory === "" ? "" : ":"} {hoverName}
|
||
</Typography>
|
||
{hoverCategory !== "" ?
|
||
<Typography variant="body1" color="textSecondary" style={{marginBottom: 8, }}>
|
||
Degrees from start: {jumpsFromStart}
|
||
</Typography>
|
||
: null}
|
||
<div style={{marginTop: 8, }} />
|
||
<ReactJson
|
||
src={visualisedData !== undefined ? visualisedData : selectedData}
|
||
theme={theme.palette.jsonTheme}
|
||
style={theme.palette.reactJsonStyle}
|
||
//shouldCollapse={(jsonField) => {
|
||
// return collapseField(jsonField)
|
||
//}}
|
||
iconStyle={theme.palette.jsonIconStyle}
|
||
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
|
||
displayArrayKey={false}
|
||
displayDataTypes={false}
|
||
name={false}
|
||
/>
|
||
</div>
|
||
}
|
||
|
||
<CytoscapeComponent
|
||
elements={[]}
|
||
minZoom={0.1}
|
||
maxZoom={2.0}
|
||
wheelSensitivity={0.25}
|
||
id="cytoscape_view"
|
||
style={{
|
||
width: 900,
|
||
height: 700,
|
||
backgroundColor: theme.palette.surfaceColor,
|
||
|
||
borderRadius: theme.palette.borderRadius,
|
||
border: "1px solid rgba(255,255,255,0.1)",
|
||
}}
|
||
stylesheet={cystyle}
|
||
cy={(incy) => {
|
||
setCy(incy)
|
||
}}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CorrelationGraph
|