topology-viewer2 v0.0.20

Topology Report

It is a React component for the Topology Report. It is transpiled with Babel and bundled with Rollup. It can be published to a NPM registry (public or private) which can then be imported by React or Angular applications. It requires BootStrap 4 to work properly.

To install dependencies: npm install

To run tests: npm test

To build: npm run build

This builds the component in the build directory.

To publish to a npm registry: npm publish

To install it from npm after publishing: npm install topology-viewer2

Integration with Angular

1. Create an Angular component wrapper.

import {TopologyViewer} from 'topology-viewer2/build';
...

export class TopologyViewerComponent implements AfterViewInit {

    @Input()
    public content = '';

    constructor(private router: Router, private hostRef: ElementRef) {
      this.onComputerTableClick=this.onComputerTableClick.bind(this)
      this.onInstrumentTableClick=this.onInstrumentTableClick.bind(this)
    }

    ngAfterViewInit(): void {
      this.render();
    }

    onComputerTableClick(name:string) : void {
      this.router.navigate(['computer-details', name]);
    }

    onInstrumentTableClick(name:string) : void {
      this.router.navigate(['instrument-details', name]);
    }

    private render(): void {
      const hostElement = this.hostRef.nativeElement;
      const tvElement = React.createElement(TopologyViewer, {
          handleComputerTableClick : this.onComputerTableClick,
          handleInstrumentTableClick : this.onInstrumentTableClick
        }, this.content)    
      ReactDOM.render(tvElement, hostElement)  
  }

}

2. Create ComputerDetailsComponent:

import {ComputerDetails} from 'topology-viewer2/build';
...
export class ComputerDetailsComponent implements AfterViewInit, OnInit {

    name : string

    @Input()
    public content = '';

    constructor(private router: Router, private route: ActivatedRoute, private hostRef: ElementRef) {
      this.onNodeClick=this.onNodeClick.bind(this)
    }

    ngOnInit() {
      this.name = this.route.snapshot.paramMap.get('name')
    }

    ngAfterViewInit(): void {      
      this.render();
    }

    onNodeClick(name:string) : void {
      this.router.navigate(['instrument-details', name]);
    }

    private render(): void {
      const hostElement = this.hostRef.nativeElement;
      const computerDetails = React.createElement(ComputerDetails,  
        {match:{params:{name:this.name}}, 
        handleNodeClick:this.onNodeClick}, 
        this.content)     
      ReactDOM.render(computerDetails, hostElement)  
  }

3. Create InstrumentDetailsComponent in a similar manner.
4. Add routes to the RoutingModule that route 'computer-details' to ComputerDetailsComponent and 'instrument-details' to InstrumentDetailsCoomponent. (Adjust the paths accordingly.)