ing

src/app/pages/home/home-page.component.html

@@ -1,8 +1,8 @@
-<div class="home-start">
+<div *ngIf="showIntro" class="home-start">
     <div class="start-button" (click)="discoverHost($event)">
         <svg version="1.1" viewBox="0 0 200 210">
             <path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
-    c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
+        c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
         </svg>
     </div>
     <div class="home-description">
@@ -11,7 +11,13 @@
         <b>를 이용해 주셔서 감사합니다.</b>
         <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
     </div>
+
 </div>
+
+<div *ngIf="!showIntro" #discoveryTarget class="vis-container">
+
+</div>
+
 <!-- <div class="ui-fluid">
     <div class="ui-g">
         <div class="ui-g-12">

src/app/pages/home/home-page.component.scss

@@ -40,4 +40,22 @@
     transform: translateY(2px);
     transition: 0.1s;
   }
+}
+
+.vis-container {
+  //  position: absolute;
+  //  top:78px;
+  //  left:0px;
+  //  bottom: 0px;
+  //  width: 100%;
+  //  margin: 0;
+  height: 100vh;
+  margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 400px;
+  //text-align: center;
 }

src/app/pages/home/home-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
 
 import { Observable, Subscription, of } from 'rxjs';
 import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
@@ -11,6 +11,7 @@ import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
 import { Address } from '../../../commons/component/nic-dropdown.component';
 import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
 
+const vis = require('vis');
 
 @Component({
   selector: 'app-pages-home',
@@ -18,13 +19,21 @@ import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
   styleUrls: ['./home-page.component.scss'],
 })
 export class HomePageComponent implements OnInit, OnDestroy {
+  private discoveryTargetRef: ElementRef;
+
+  @ViewChild('discoveryTarget') set discoveryTarget(content: ElementRef) {
+    this.discoveryTargetRef = content;
+  }
 
   blockedPanel = false;
 
   blockedDocument = false;
   addresses: Address[];
 
+  showIntro = true;
+
   constructor(
+    private changeDetector: ChangeDetectorRef,
     private probeService: ProbeService,
   ) {
   }
@@ -45,31 +54,59 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   discoverHost(dfd: string) {
-    const zone: Zone = {
-      network: '192.168.1.0/24',
-      iface: 'enp3s0',
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      address: '192.168.1.101',
-      mac: '44:8a:5b:f1:f1:f3',
+    // const zone: Zone = {
+    //   network: '192.168.1.0/24',
+    //   iface: 'enp3s0',
+    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+    //   address: '192.168.1.101',
+    //   mac: '44:8a:5b:f1:f1:f3',
+    // };
+
+    // const discoverHost: DiscoverHost = {
+    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+    //   firstScanRange: '192.168.1.1',
+    //   lastScanRange: '192.168.1.254',
+    //   discoveryConfig: {
+    //   },
+    //   discoverPort: {
+    //     firstScanRange: 1,
+    //     lastScanRange: 65535,
+    //     includeTCP: true,
+    //     includeUDP: true,
+    //     discoverService: {
+    //     }
+    //   }
+    // };
+
+    // this.probeService.send('DiscoveryService.DiscoverHost', requesterID, zone, discoverHost);
+    this.showIntro = false;
+    this.changeDetector.detectChanges();
+
+    const nodes = [
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+    ];
+    const edges = [
+      { from: 1, to: 2 },
+      { from: 1, to: 3 },
+      { from: 2, to: 3 },
+    ];
+
+    const data = {
+      nodes: nodes,
+      edges: edges,
     };
 
-    const discoverHost: DiscoverHost = {
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      firstScanRange: '192.168.1.1',
-      lastScanRange: '192.168.1.254',
-      discoveryConfig: {
-      },
-      discoverPort: {
-        firstScanRange: 1,
-        lastScanRange: 65535,
-        includeTCP: true,
-        includeUDP: true,
-        discoverService: {
-        }
-      }
+    const options = {
+      width: '100%',
+      height: '100%'
     };
 
-    this.probeService.send('DiscoveryService.DiscoverHost', requesterID, zone, discoverHost);
+    const network = new vis.Network(this.discoveryTargetRef.nativeElement, data, options);
+
+
+
   }
 
   /**