Initial implementation

package.json

@@ -50,6 +50,8 @@
     "@angular/platform-browser-dynamic": "^8.2.8",
     "@angular/router": "^8.2.8",
     "angular-persistence": "^1.0.1",
+    "angular-resizable-element": "^3.2.6",
+    "angular2-draggable": "^2.3.2",
     "angular2-hotkeys": "^2.1.5",
     "angular2-indexeddb": "^1.2.3",
     "bootstrap": "4.3.1",

src/app/app.module.ts

@@ -242,6 +242,7 @@ import { StartCaptureOnStartedLinkActionComponent } from './components/project-m
 import { LockActionComponent } from './components/project-map/context-menu/actions/lock-action/lock-action.component';
 import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component';
 import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component';
+import { ResizableModule } from 'angular-resizable-element';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -425,6 +426,7 @@ if (environment.production) {
     NgxElectronModule,
     FileUploadModule,
     MatSidenavModule,
+    ResizableModule,
     MATERIAL_IMPORTS
   ],
   providers: [

src/app/components/topology-summary/topology-summary.component.html

@@ -1,4 +1,13 @@
-<div class="summaryWrapper" *ngIf="projectsStatistics">
+<div 
+    (mousedown)="dragWidget(event)" 
+    class="summaryWrapper" 
+    *ngIf="projectsStatistics" 
+    [ngStyle]="style"
+    mwlResizable
+    [validateResize]="validate"
+    [resizeEdges]="{ right: true, left: true}"
+    [enableGhostResize]="true"
+    (resizeEnd)="onResizeEnd($event)">
     <div class="summaryHeader">
         <button class="titleButton" [ngClass]="{ marked: isTopologyVisible }" (click)="toogleTopologyVisibility(true)" mat-button>Map topology</button>
         <button class="titleButton" [ngClass]="{ marked: !isTopologyVisible }" (click)=toogleTopologyVisibility(false) mat-button>Servers</button>

src/app/components/topology-summary/topology-summary.component.ts

@@ -9,6 +9,7 @@ import { ProjectStatistics } from '../../models/project-statistics';
 import { Compute } from '../../models/compute';
 import { ComputeService } from '../../services/compute.service';
 import { LinksDataSource } from '../../cartography/datasources/links-datasource';
+import { ResizeEvent } from 'angular-resizable-element';
 
 
 @Component({
@@ -22,6 +23,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
 
     @Output() closeTopologySummary = new EventEmitter<boolean>();
 
+    public style: object = {};
     private subscriptions: Subscription[] = [];
     projectsStatistics: ProjectStatistics;
     nodes: Node[] = [];
@@ -63,6 +65,33 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         });
     }
 
+    validate(event: ResizeEvent): boolean {
+        const MIN_DIMENSIONS_PX: number = 50;
+        if (
+            event.rectangle.width &&
+            event.rectangle.height &&
+            (event.rectangle.width < MIN_DIMENSIONS_PX ||
+            event.rectangle.height < MIN_DIMENSIONS_PX)
+        ) {
+            return false;
+        }
+        return true;
+    }
+
+    onResizeEnd(event: ResizeEvent): void {
+        this.style = {
+            position: 'fixed',
+            left: `${event.rectangle.left}px`,
+            top: `${event.rectangle.top}px`,
+            width: `${event.rectangle.width}px`,
+            height: `${event.rectangle.height}px`
+        };
+    }
+
+    dragWidget(event) {
+        console.log(event);
+    }
+
     toogleTopologyVisibility(value: boolean) {
         this.isTopologyVisible = value;
     }

yarn.lock

@@ -1066,6 +1066,20 @@ angular-persistence@^1.0.1:
   resolved "https://registry.npmjs.org/angular-persistence/-/angular-persistence-1.0.1.tgz#79ffe7317f1f7aed88e69f07705f0ac32ccdb9da"
   integrity sha1-ef/nMX8feu2I5p8HcF8KwyzNudo=
 
+angular-resizable-element@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.2.6.tgz#1df9b14853691e00b99c74492e729b7a35cf70a0"
+  integrity sha512-8vp5w4YFIrZ2M8EmGpIt/yMwLBjkUJe7aPLPxDDQhi5HQWF0HLJ6lb4tXgEzW572roxNnHFg105EM6XGAMZDIg==
+  dependencies:
+    tslib "^1.9.0"
+
+angular2-draggable@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/angular2-draggable/-/angular2-draggable-2.3.2.tgz#54ca569a6b3aa9ca1a8a4d663d3eee3024c48af3"
+  integrity sha512-rw2O/icgVang8uSVIU7nmm59f1DceSAUQkOuSGYnKbv/h8EbhJ9099sCjh/I5LymZBza1XPKeFZofIvhekdE+A==
+  dependencies:
+    tslib "^1.9.0"
+
 angular2-hotkeys@^2.1.5:
   version "2.1.5"
   resolved "https://registry.npmjs.org/angular2-hotkeys/-/angular2-hotkeys-2.1.5.tgz#d4d5df7cecd231d556089832609283f37674fdea"