Merge pull request #115 from delphi-hub/feature/dragAndDropEdges

Feature/drag and drop edges

Author: janniclas

app/controllers/ApiRouter.scala

@@ -43,6 +43,6 @@ class ApiRouter @Inject()(irController: InstanceRegistryController, sysControlle
     case POST(p"/pauseInstance" ? q"instanceID=$instanceID") => irController.handleRequest(action="/pause", instanceID)
     case POST(p"/resumeInstance" ? q"instanceID=$instanceID") => irController.handleRequest(action="/resume", instanceID)
     case POST(p"/deleteInstance" ? q"instanceID=$instanceID") => irController.handleRequest(action="/delete", instanceID)
-
+    case POST(p"/reconnectInstance" ? q"from=$from"& q"to=$to") => irController.reconnect(from.toInt, to.toInt)
   }
 }

app/controllers/InstanceRegistryController.scala

@@ -146,6 +146,21 @@ class InstanceRegistryController @Inject()(implicit system: ActorSystem, mat: Ma
       }(myExecutionContext)
   }
 
+  def reconnect(from: Int, to: Int): Action[AnyContent] = Action.async { request =>
+
+    ws.url(instanceRegistryUri + "/instances/" + from + "/assignInstance"
+    )
+      .withHttpHeaders(("Authorization", s"Bearer ${AuthProvider.generateJwt()}"))
+      .post(Json.obj("AssignedInstanceId" -> to))
+      .map { response =>
+        response.status match {
+          case 200 =>
+            Ok(response.body)
+          case x =>
+            new Status(x)
+        }
+      }(myExecutionContext)
+  }
   /**
     * This function is for handling an POST request for adding an instance to the Scala web server
     * (E.g. .../instances/deploy

client/package-lock.json

@@ -25,6 +25,7 @@
     "bootstrap": "^4.3.1",
     "core-js": "^2.6.4",
     "cytoscape": "^3.4.1",
+    "cytoscape-edgehandles": "^3.5.0",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "jquery": "^3.3.1",

client/package.json

@@ -35,7 +35,8 @@ import {
   PAUSE_INSTANCE,
   RESUME_INSTANCE,
   DELETE_INSTANCE,
-  INSTANCE_NETWORK
+  INSTANCE_NETWORK,
+  RECONNECT
 } from '../variables';
 
 
@@ -69,6 +70,19 @@ export class ApiService {
     return this.get<Array<Instance>>(INSTANCE_NETWORK);
   }
 
+  public postReconnect(from: number, to: number) {
+
+    let queryParam = new HttpParams({ encoder: new CustomHttpUrlEncodingCodec() });
+
+    if (from === null || to === undefined) {
+      throw new Error('Parameter to or from not given');
+    } else {
+      queryParam = queryParam.set('from', <any>from);
+      queryParam = queryParam.set('to', <any>to);
+    }
+
+    return this.commonConf(RECONNECT, queryParam);
+  }
   /**
    * Find number of running instances
    * How many instances per type are running

client/src/app/api/api/api.service.ts

@@ -29,6 +29,7 @@ export const STOP_INSTANCE = 'api/stopInstance';
 export const PAUSE_INSTANCE = 'api/pauseInstance';
 export const RESUME_INSTANCE = 'api/resumeInstance';
 export const DELETE_INSTANCE = 'api/deleteInstance';
+export const RECONNECT = 'api/reconnectInstance';
 export const COLLECTION_FORMATS = {
     'csv': ',',
     'tsv': '   ',

client/src/app/api/variables.ts

@@ -0,0 +1,106 @@
+export class GraphConfig {
+
+
+     public readonly layout = {
+      name: 'circle',
+
+      fit: true, // whether to fit the viewport to the graph
+      padding: 30, // the padding on fit
+      boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+      avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space
+      nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
+      spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
+      radius: undefined, // the radius of the circle
+      startAngle: 3 / 2 * Math.PI, // where nodes start in radians
+      sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
+      clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
+      sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
+      animate: false, // whether to transition the node positions
+      animationDuration: 500, // duration of animation in ms if enabled
+      animationEasing: undefined, // easing of animation if enabled
+      animateFilter: function ( node, i ) { return true; },
+      ready: undefined, // callback on layoutready
+      stop: undefined, // callback on layoutstop
+      transform: function (node, position ) { return position; }
+    };
+
+    public readonly cytoscapeConfig = {
+        container: null, // container to render in
+        elements: [ // list of graph elements to start with
+        ],
+        layout: this.layout,
+        style: [{
+          selector: 'node[name][image]',
+          style: {
+            label: 'data(name)',
+            'background-image': 'data(image)',
+            'width': '70%',
+            'height': '70%',
+            'background-opacity': 0,
+            'background-fit': 'contain',
+            'background-clip': 'none',
+          }
+        },      {
+          selector: '.eh-handle',
+          style: {
+            'background-image': '../../../assets/images/EdgeConnector.png',
+            'width': '60%',
+            'height': '60%',
+            'background-opacity': 0,
+            'border-width': 12, // makes the handle easier to hit
+            'background-fit': 'contain',
+            'background-clip': 'none',
+            'border-opacity': 0
+          }
+        },
+        {
+          selector: '.eh-hover',
+          style: {
+            'background-color': 'red'
+          }
+        }]
+    };
+
+    public readonly edgeDragConfig = {
+      preview: true, // whether to show added edges preview before releasing selection
+      hoverDelay: 150, // time spent hovering over a target node before it is considered selected
+      handleNodes: 'node[type != "ElasticSearch"]', // selector/filter function for whether edges can be made from a given node
+      snap: false, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
+      snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
+      snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
+      noEdgeEventsInDraw: false, // set events:no to edges during draws, prevents mouseouts on compounds
+      disableBrowserGestures: true,
+      handlePosition: function( node ) {
+        return 'middle top'; // sets the position of the handle in the format of "X-AXIS Y-AXIS" such as "left top", "middle top"
+      },
+      handleInDrawMode: false, // whether to show the handle in draw mode
+      edgeType: function( sourceNode, targetNode ) {
+        // can return 'flat' for flat edges between nodes or 'node' for intermediate node between them
+        // returning null/undefined means an edge can't be added between the two nodes
+        return 'flat';
+      },
+      loopAllowed: function( node ) {
+        // for the specified node, return whether edges from itself to itself are allowed
+        return false;
+      },
+      nodeLoopOffset: -50, // offset for edgeType: 'node' loops
+      nodeParams: function( sourceNode, targetNode ) {
+        // for edges between the specified source and target
+        // return element object to be passed to cy.add() for intermediary node
+        return {};
+      },
+      edgeParams: function( sourceNode, targetNode, i ) {
+        // for edges between the specified source and target
+        // return element object to be passed to cy.add() for edge
+        // NB: i indicates edge index in case of edgeType: 'node'
+        return {};
+      },
+      ghostEdgeParams: function() {
+        // return element object to be passed to cy.add() for the ghost edge
+        // (default classes are always added for you)
+        return {};
+      }
+    };
+
+    constructor() {}
+}

client/src/app/dashboard/graph-view/GraphConfig.ts

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Reconnect Components</h1>
+<div mat-dialog-content>
+  <p>Do you really want to disconnect {{data.nameOne}} from {{data.nameTwo}} and connect it to {{data.nameThree}}?</p>
+</div>
+<div mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="false">No Thanks</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
+</div>

client/src/app/dashboard/graph-view/connect-dialog/connect-dialog.component.css

@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConnectDialogComponent } from './connect-dialog.component';
+import { MaterialModule } from 'src/app/material-module/material.module';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+describe('ConnectDialogComponent', () => {
+  let component: ConnectDialogComponent;
+  let fixture: ComponentFixture<ConnectDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConnectDialogComponent ],
+      imports: [MaterialModule],
+      providers: [ {
+        provide: MAT_DIALOG_DATA,
+        useValue: {}
+      }]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConnectDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/dashboard/graph-view/connect-dialog/connect-dialog.component.html

@@ -0,0 +1,16 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-connect-dialog',
+  templateUrl: './connect-dialog.component.html',
+  styleUrls: ['./connect-dialog.component.css']
+})
+export class ConnectDialogComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {nameOne: string, nameTwo: string, nameThree: string}) { }
+
+  ngOnInit() {
+  }
+
+}

client/src/app/dashboard/graph-view/connect-dialog/connect-dialog.component.spec.ts

@@ -3,15 +3,21 @@ import {CommonModule} from '@angular/common';
 import {GraphViewComponent} from './graph-view/graph-view.component';
 import {GraphViewService} from './graph-view.service';
 import {ModelModule} from '../../model/model.module';
+import { ConnectDialogComponent } from './connect-dialog/connect-dialog.component';
+import { MaterialModule } from 'src/app/material-module/material.module';
 
 @NgModule({
-  declarations: [GraphViewComponent],
+  declarations: [GraphViewComponent, ConnectDialogComponent],
   imports: [
     CommonModule,
+    MaterialModule,
     ModelModule
   ],
   exports: [GraphViewComponent],
-  providers: [GraphViewService]
+  providers: [GraphViewService],
+  entryComponents: [
+    ConnectDialogComponent
+  ]
 })
 export class GraphViewModule {
 }