From 79fa13132837ec743e44a67d2e73f9371e6a6fd1 Mon Sep 17 00:00:00 2001 From: Adwoa Konadu Appiah Date: Wed, 13 Nov 2024 13:22:45 +0000 Subject: [PATCH] #585 remove whitespaces --- .../src/components/graph/Graph.tsx | 157 +++++++++--------- 1 file changed, 82 insertions(+), 75 deletions(-) diff --git a/calm-visualizer/src/components/graph/Graph.tsx b/calm-visualizer/src/components/graph/Graph.tsx index 82852531..6329ce17 100644 --- a/calm-visualizer/src/components/graph/Graph.tsx +++ b/calm-visualizer/src/components/graph/Graph.tsx @@ -11,106 +11,113 @@ interface Props { } function createConnectsRelationship(instance: BrowserJsPlumbInstance, relationship: CALMConnectsRelationship) { - const r = relationship["relationship-type"]["connects"]; - instance.connect({ - source: document.getElementById(r.source.node)!, - target: document.getElementById(r.destination.node)!, - anchor: "Continuous", - connector: { - type:"Straight", - options: { - "stub": 25 - } - }, - endpoint: { - type: "Blank", - options: {} - }, - overlays: [ - { type:"Arrow", options:{location:1}} - ] - }); + const r = relationship["relationship-type"]["connects"]; + instance.connect({ + source: document.getElementById(r.source.node)!, + target: document.getElementById(r.destination.node)!, + anchor: "Continuous", + connector: { + type: "Straight", + options: { + "stub": 25 + } + }, + endpoint: { + type: "Blank", + options: {} + }, + overlays: [ + { type: "Arrow", options: { location: 1 } } + ] + }); } function createInteractsRelationship(instance: BrowserJsPlumbInstance, relationship: CALMInteractsRelationship) { - const r = relationship["relationship-type"]["interacts"]; - r.nodes.forEach(node => { - instance.connect({ - source: document.getElementById(r.actor)!, - target: document.getElementById(node)!, - anchor: "Continuous", - connector: { - type:"Straight", - options: { - "stub": 25 - } - }, - endpoint: { - type: "Blank", - options: { - } - }, - overlays:[ - { type:"Arrow", options:{location:1}} - ] - }); - }) + const r = relationship["relationship-type"]["interacts"]; + r.nodes.forEach(node => { + instance.connect({ + source: document.getElementById(r.actor)!, + target: document.getElementById(node)!, + anchor: "Continuous", + connector: { + type: "Straight", + options: { + "stub": 25 + } + }, + endpoint: { + type: "Blank", + options: { + } + }, + overlays: [ + { type: "Arrow", options: { location: 1 } } + ] + }); + }) } -function getUniqueCALMContainers(relationships : CALMRelationship[]){ - const deployedInContainers : string[] = relationships.filter(relationship => 'deployed-in' in relationship["relationship-type"]).map(r=>r as CALMDeployedInRelationship).map(r=> r["relationship-type"]["deployed-in"].container); - const composedOfContainers : string[] = relationships.filter(relationship => 'composed-of' in relationship["relationship-type"]).map(r=>r as CALMComposedOfRelationship).map(r=> r ["relationship-type"]["composed-of"].container); +function getUniqueCALMContainers(relationships: CALMRelationship[]) { + const deployedInContainers: string[] = relationships.filter(relationship => 'deployed-in' in relationship["relationship-type"]) + .map(r => r as CALMDeployedInRelationship) + .map(r => r["relationship-type"]["deployed-in"].container); + + const composedOfContainers: string[] = relationships.filter(relationship => 'composed-of' in relationship["relationship-type"]) + .map(r => r as CALMComposedOfRelationship) + .map(r => r["relationship-type"]["composed-of"].container); + const containers = [...deployedInContainers, ...composedOfContainers] return Array.from(new Set(containers)); } -function createGroups({instance, containers}:{instance: BrowserJsPlumbInstance, containers: string[]}){ - containers.forEach(container =>{ +function createGroups(instance: BrowserJsPlumbInstance, containers: string[]) { + containers.forEach(container => { instance.addGroup({ el: document.getElementById(container)!, id: container, - anchor:"Continuous", - endpoint:{ type:"Dot", options:{ radius:3 } }, - dropOverride:true - }) + anchor: "Continuous", + endpoint: { type: "Dot", options: { radius: 3 } }, + dropOverride: true + }) }) } -function createDeployedInRelationship( instance: BrowserJsPlumbInstance , relationship: CALMDeployedInRelationship ) { - const container = relationship["relationship-type"]["deployed-in"].container - const nodes = relationship["relationship-type"]["deployed-in"].nodes - if ( instance.getGroup(container).id === container){ - nodes.forEach(node => { - instance.addToGroup(container, document.getElementById(node)!) - }) - } +function createDeployedInRelationship(instance: BrowserJsPlumbInstance, relationship: CALMDeployedInRelationship) { + const container = relationship["relationship-type"]["deployed-in"].container + const nodes = relationship["relationship-type"]["deployed-in"].nodes + if (instance.getGroup(container).id === container) { + nodes.forEach(node => { + instance.addToGroup(container, document.getElementById(node)!) + }) + } } -function createComposedOfRelationship( instance: BrowserJsPlumbInstance , relationship: CALMComposedOfRelationship ) { - const container = relationship["relationship-type"]["composed-of"].container - const nodes = relationship["relationship-type"]["composed-of"].nodes - if ( instance.getGroup(container).id === container){ - nodes.forEach(node => { - instance.addToGroup(container, document.getElementById(node)!) - }) - } - +function createComposedOfRelationship(instance: BrowserJsPlumbInstance, relationship: CALMComposedOfRelationship) { + const container = relationship["relationship-type"]["composed-of"].container + const nodes = relationship["relationship-type"]["composed-of"].nodes + if (instance.getGroup(container).id === container) { + nodes.forEach(node => { + instance.addToGroup(container, document.getElementById(node)!) + }) + } } function createGraphRelationship(instance: BrowserJsPlumbInstance, relationships: CALMRelationship[]) { - const deployedInandComposedOfRelationships = relationships.filter(relationship => 'deployed-in' in relationship["relationship-type"] || 'composed-of' in relationship["relationship-type"]); + const deployedInandComposedOfRelationships = relationships.filter(relationship => 'deployed-in' in relationship["relationship-type"] + || 'composed-of' in relationship["relationship-type"]); + const containers = getUniqueCALMContainers(deployedInandComposedOfRelationships); - createGroups({instance, containers}) - - relationships.forEach(relationship =>{ + createGroups(instance, containers) + + relationships.forEach(relationship => { if ("connects" in relationship["relationship-type"]) { createConnectsRelationship(instance, relationship as CALMConnectsRelationship); } else if ("interacts" in relationship["relationship-type"]) { createInteractsRelationship(instance, relationship as CALMInteractsRelationship); } else if ("deployed-in" in relationship["relationship-type"]) { createDeployedInRelationship(instance, relationship as CALMDeployedInRelationship) - }else{ + } else { createComposedOfRelationship(instance, relationship as CALMComposedOfRelationship) } }) @@ -118,7 +125,7 @@ function createGraphRelationship(instance: BrowserJsPlumbInstance, relationships function Graph({ instance, nodes, relationships }: Props) { useEffect(() => { - createGraphRelationship(instance, relationships); + createGraphRelationship(instance, relationships); nodes.forEach(node => { instance.manage(document.getElementById(node["unique-id"])!); @@ -129,14 +136,14 @@ function Graph({ instance, nodes, relationships }: Props) { <> { nodes.map(node => { - return
{node.name}
[{node["node-type"]}]