feat(Vis Libraries): Use new libraries

components/network/index.ts

@@ -1,26 +1,41 @@
-import * as Vis from 'vis';
+import {
+  ClusterOptions,
+  Data,
+  DataSet,
+  Edge,
+  EdgeOptions,
+  FitOptions,
+  MoveToOptions,
+  Network,
+  NetworkEvents,
+  NodeOptions,
+  OpenClusterOptions,
+  Options,
+  SelectionOptions
+} from 'vis-network';
 
 import { VisDataSetOptions, VisDataSetQueueOptions, VisId } from '../timeline/index';
-
 export { VisId } from '../timeline/index';
-export type VisNetworkEvents = Vis.NetworkEvents;
-export type VisMoveToOptions = Vis.MoveToOptions;
-
-export interface VisClusterOptions extends Vis.ClusterOptions { }
-export interface VisOpenClusterOptions extends Vis.OpenClusterOptions { }
-export interface VisNetworkData extends Vis.Data { }
-export interface VisNode extends Vis.Node { title?: string; }
-export interface VisEdge extends Vis.Edge { }
-export interface VisNodeSelectionOptions extends Vis.DataSelectionOptions<VisNode> { }
-export interface VisEdgeSelectionOptions extends Vis.DataSelectionOptions<VisEdge> { }
-export interface VisFitOptions extends Vis.FitOptions { }
-export interface VisNetworkOptions extends Vis.Options { }
-export interface VisEdgeOptions extends Vis.EdgeOptions { }
-export class VisNetwork extends Vis.Network { }
-export interface VisNodeOptions extends Vis.NodeOptions { }
-export interface VisPosition extends Vis.Position { }
-
-export class VisNodes extends Vis.DataSet<VisNode> {
+
+export type VisNetworkEvents = NetworkEvents;
+export type VisMoveToOptions = MoveToOptions;
+
+export interface VisClusterOptions extends ClusterOptions {}
+export interface VisOpenClusterOptions extends OpenClusterOptions {}
+export interface VisNetworkData extends Data {}
+export interface VisNode extends Node {
+}
+export interface VisEdge extends Edge {}
+export interface VisNodeSelectionOptions extends SelectionOptions<VisNode> {}
+export interface VisEdgeSelectionOptions extends SelectionOptions<VisEdge> {}
+export interface VisFitOptions extends FitOptions {}
+export interface VisNetworkOptions extends Options {}
+export interface VisEdgeOptions extends EdgeOptions {}
+export class VisNetwork extends Network {}
+export interface VisNodeOptions extends NodeOptions {}
+export interface VisPosition extends Position {}
+
+export class VisNodes extends DataSet<VisNode> {
   public constructor(data?: VisNode[], options?: VisDataSetOptions) {
     super(data, options);
   }
@@ -102,7 +117,7 @@ export class VisNodes extends Vis.DataSet<VisNode> {
   }
 }
 
-export class VisEdges extends Vis.DataSet<VisEdge> {
+export class VisEdges extends DataSet<VisEdge, 'id'> {
   public constructor(data?: VisEdge[], options?: VisDataSetOptions) {
     super(data, options);
   }

components/network/vis-network.service.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import * as vis from "vis";
+import { BoundingBox, IdType, Position } from 'vis-network';
 import { VisMoveToOptions } from '..';
 import {
   VisClusterOptions,
@@ -11,7 +11,7 @@ import {
   VisNetworkEvents,
   VisNetworkOptions,
   VisNodeOptions,
-  VisOpenClusterOptions,
+  VisOpenClusterOptions
 } from './index';
 
 /**
@@ -22,7 +22,6 @@ import {
  */
 @Injectable()
 export class VisNetworkService {
-
   /**
    * Fired when the user clicks the mouse or taps on a touchscreen device.
    *
@@ -308,11 +307,7 @@ export class VisNetworkService {
    *
    * @memberOf VisNetworkService
    */
-  public create(
-    visNetwork: string,
-    container: HTMLElement,
-    data: VisNetworkData,
-    options?: VisNetworkOptions): void {
+  public create(visNetwork: string, container: HTMLElement, data: VisNetworkData, options?: VisNetworkOptions): void {
     if (this.networks[visNetwork]) {
       throw new Error(`Network with id ${visNetwork} already exists.`);
     }
@@ -483,8 +478,11 @@ export class VisNetworkService {
    *
    * @memberOf VisNetworkService
    */
-  public setSelection(visNetwork: string, selection: { nodes: VisId[], edges: VisId[] },
-    options: { unselectAll?: boolean, highlightEdges?: boolean } = {}): void {
+  public setSelection(
+    visNetwork: string,
+    selection: { nodes: VisId[]; edges: VisId[] },
+    options: { unselectAll?: boolean; highlightEdges?: boolean } = {}
+  ): void {
     if (this.networks[visNetwork]) {
       this.networks[visNetwork].setSelection(selection, options);
     } else {
@@ -501,7 +499,7 @@ export class VisNetworkService {
    *
    * @memberOf VisNetworkService
    */
-  public getSelection(visNetwork: string): { nodes: VisId[], edges: VisId[] } {
+  public getSelection(visNetwork: string): { nodes: VisId[]; edges: VisId[] } {
     if (this.networks[visNetwork]) {
       return this.networks[visNetwork].getSelection();
     }
@@ -946,7 +944,7 @@ export class VisNetworkService {
    *
    * @memberOf VisNetworkService
    */
-  public canvasToDOM(visNetwork: string, position: vis.Position) {
+  public canvasToDOM(visNetwork: string, position: Position) {
     return this.networks[visNetwork].canvasToDOM(position);
   }
 
@@ -961,7 +959,7 @@ export class VisNetworkService {
    *
    * @memberOf VisNetworkService
    */
-  public DOMtoCanvas(visNetwork: string, position: vis.Position) {
+  public DOMtoCanvas(visNetwork: string, position: Position) {
     return this.networks[visNetwork].DOMtoCanvas(position);
   }
 
@@ -976,49 +974,49 @@ export class VisNetworkService {
    *
    * @memberOf VisNetworkService
    */
-  public getNodeAt(visNetwork: string, position: vis.Position) {
+  public getNodeAt(visNetwork: string, position: Position) {
     return this.networks[visNetwork].getNodeAt(position);
   }
 
   /**
- * This function looks up the edge at the given DOM coordinates on the canvas.
- * Input and output are in the form of {x:Number,y:Number}.
- * The DOM values are relative to the network container -> DOM not Canvas coords.
- *
- * @param {string} visNetwork The network name/identifier.
- * @param {Position} position The DOM position.
- * @returns {VisId} edgeId The associated edge id.
- *
- * @memberOf VisNetworkService
- */
-  public getEdgeAt(visNetwork: string, position: vis.Position) {
+   * This function looks up the edge at the given DOM coordinates on the canvas.
+   * Input and output are in the form of {x:Number,y:Number}.
+   * The DOM values are relative to the network container -> DOM not Canvas coords.
+   *
+   * @param {string} visNetwork The network name/identifier.
+   * @param {Position} position The DOM position.
+   * @returns {VisId} edgeId The associated edge id.
+   *
+   * @memberOf VisNetworkService
+   */
+  public getEdgeAt(visNetwork: string, position: Position) {
     return this.networks[visNetwork].getEdgeAt(position);
   }
 
   /**
-* This function looks up the edges for a given nodeId.
-* The DOM values are relative to the network container -> DOM not Canvas coords.
-*
-* @param {string} visNetwork The network name/identifier.
-* @param {VisId} nodeId The associated node id.
-* @returns {VisId[]} Return array of edge ids
-*
-* @memberOf VisNetworkService
-*/
-  public getConnectedEdges(visNetwork: string, nodeId: vis.IdType) {
+   * This function looks up the edges for a given nodeId.
+   * The DOM values are relative to the network container -> DOM not Canvas coords.
+   *
+   * @param {string} visNetwork The network name/identifier.
+   * @param {VisId} nodeId The associated node id.
+   * @returns {VisId[]} Return array of edge ids
+   *
+   * @memberOf VisNetworkService
+   */
+  public getConnectedEdges(visNetwork: string, nodeId: IdType) {
     return this.networks[visNetwork].getConnectedEdges(nodeId);
   }
 
   /**
- * Returns an array of nodeIds of the all the nodes that are directly connected to this node.
- * If you supply an edgeId, vis will first match the id to nodes.
- * If no match is found, it will search in the edgelist and return an array: [fromId, toId].
- *
- * @param {string} visNetwork The network name/identifier.
- * @param nodeOrEdgeId a node or edge id
- * @returns {VisId[]} Return array of node ids
- */
-  public getConnectedNodes(visNetwork: string, nodeOrEdgeId: vis.IdType) {
+   * Returns an array of nodeIds of the all the nodes that are directly connected to this node.
+   * If you supply an edgeId, vis will first match the id to nodes.
+   * If no match is found, it will search in the edgelist and return an array: [fromId, toId].
+   *
+   * @param {string} visNetwork The network name/identifier.
+   * @param nodeOrEdgeId a node or edge id
+   * @returns {VisId[]} Return array of node ids
+   */
+  public getConnectedNodes(visNetwork: string, nodeOrEdgeId: IdType) {
     return this.networks[visNetwork].getConnectedNodes(nodeOrEdgeId);
   }
 
@@ -1036,7 +1034,7 @@ export class VisNetworkService {
    * Returns the positions of the nodes.
    * @param {string} visNetwork The network name/identifier.
    */
-  public getBoundingBox(visNetwork: string,nodeId: vis.IdType): vis.BoundingBox {
+  public getBoundingBox(visNetwork: string, nodeId: IdType): BoundingBox {
     return this.networks[visNetwork].getBoundingBox(nodeId);
   }
 

components/timeline/index.ts

@@ -1,11 +1,25 @@
-import * as Vis from 'vis';
-
-export type VisId = Vis.IdType;
-export interface VisTimelineItem extends Vis.DataItem { }
-export interface VisTimelineGroup extends Vis.DataGroup { }
-export interface VisDataSetOptions extends Vis.DataSetOptions { }
-export interface VisTimelineOptions extends Vis.TimelineOptions { }
-export class VisTimelineItems extends Vis.DataSet<VisTimelineItem> {
+import {
+  DataGroup,
+  DataItem,
+  DataSelectionOptions,
+  DataSet,
+  DataSetOptions,
+  DataSetQueueOptions,
+  DateType,
+  IdType,
+  Timeline,
+  TimelineAnimationOptions,
+  TimelineEventPropertiesResult,
+  TimelineEvents,
+  TimelineOptions
+} from 'vis-timeline';
+
+export type VisId = IdType;
+export interface VisTimelineItem extends DataItem {}
+export interface VisTimelineGroup extends DataGroup {}
+export interface VisDataSetOptions extends DataSetOptions {}
+export interface VisTimelineOptions extends TimelineOptions {}
+export class VisTimelineItems extends DataSet<VisTimelineItem> {
   public constructor(data?: VisTimelineItem[], options?: VisDataSetOptions) {
     super(data, options);
   }
@@ -86,7 +100,7 @@ export class VisTimelineItems extends Vis.DataSet<VisTimelineItem> {
     return super.update(data, senderId);
   }
 }
-export class VisTimelineGroups extends Vis.DataSet<VisTimelineGroup> {
+export class VisTimelineGroups extends DataSet<VisTimelineGroup> {
   public constructor(data?: VisTimelineGroup[], options?: VisDataSetOptions) {
     super(data, options);
   }
@@ -168,15 +182,15 @@ export class VisTimelineGroups extends Vis.DataSet<VisTimelineGroup> {
   }
 }
 
-export interface VisDataSetQueueOptions extends Vis.DataSetQueueOptions { }
-export interface VisItemSelectionOptions extends Vis.DataSelectionOptions<VisTimelineItem> { }
-export interface VisGroupSelectionOptions extends Vis.DataSelectionOptions<VisTimelineGroup> { }
-export type VisDate = Vis.DateType;
-export type VisTimelineEvents = Vis.TimelineEvents;
-export interface VisTimelineAnimationOptions extends Vis.TimelineAnimationOptions { }
-export interface VisTimelineEventPropertiesResult extends Vis.TimelineEventPropertiesResult { }
+export interface VisDataSetQueueOptions extends DataSetQueueOptions {}
+export interface VisItemSelectionOptions extends DataSelectionOptions<VisTimelineItem> {}
+export interface VisGroupSelectionOptions extends DataSelectionOptions<VisTimelineGroup> {}
+export type VisDate = DateType;
+export type VisTimelineEvents = TimelineEvents;
+export interface VisTimelineAnimationOptions extends TimelineAnimationOptions {}
+export interface VisTimelineEventPropertiesResult extends TimelineEventPropertiesResult {}
 
-export class VisTimeline extends Vis.Timeline { }
+export class VisTimeline extends Timeline {}
 
 export * from './vis-timeline.service';
 export * from './vis-timeline.directive';

components/timeline/vis-timeline.service.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core';
+import { Event } from 'vis-timeline';
 import {
   VisDate,
   VisId,
@@ -8,7 +9,7 @@ import {
   VisTimelineEvents,
   VisTimelineGroups,
   VisTimelineItems,
-  VisTimelineOptions,
+  VisTimelineOptions
 } from './index';
 
 /**
@@ -146,11 +147,7 @@ export class VisTimelineService {
    *
    * @memberOf VisTimelineService
    */
-  public createWithItems(
-    visTimeline: string,
-    container: HTMLElement,
-    items: VisTimelineItems,
-    options?: VisTimelineOptions): void {
+  public createWithItems(visTimeline: string, container: HTMLElement, items: VisTimelineItems, options?: VisTimelineOptions): void {
     if (this.timelines[visTimeline]) {
       throw new Error(this.alreadyExistsError(visTimeline));
     }
@@ -176,7 +173,8 @@ export class VisTimelineService {
     container: HTMLElement,
     items: VisTimelineItems,
     groups: VisTimelineGroups,
-    options?: VisTimelineOptions): void {
+    options?: VisTimelineOptions
+  ): void {
     if (this.timelines[visTimeline]) {
       throw new Error(this.alreadyExistsError(visTimeline));
     }
@@ -331,7 +329,7 @@ export class VisTimelineService {
    *
    * @memberOf VisTimelineService
    */
-  public getItemRange(visTimeline: string): { min: Date, max: Date } {
+  public getItemRange(visTimeline: string): { min: Date; max: Date } {
     if (this.timelines[visTimeline]) {
       return this.timelines[visTimeline].getItemRange();
     } else {