cytoscape -aurelia test

app.html

<template>
  <div id="tools">
    <button click.delegate="generate()">Generate</button>
    <textarea value.bind="textArea"></textarea>
  </div>
  <div style="width:100%;height:100%" id="cy"></div>
</template>

app.js

import {inject} from 'aurelia-framework'
import {Cytoscape} from './cytoscape'

@inject(Cytoscape)
export class App {
  
  textArea = "";
  generate(){
    
    var cables = [
      {tag:"cable1", tagFrom:"light_01", tagTo:"light_02", type:"BFOU-2x4mm2", areaFrom:"LV Room", areaTo:"Office_1"},
      {tag:"cable2", tagFrom:"light_02", tagTo:"light_03", type:"BFOU-2x2.5mm2", areaFrom:"Office_1", areaTo:"Office_1"},
      {tag:"cable3", tagFrom:"light_03", tagTo:"light_04", type:"BFOU-2x2.5mm2", areaFrom:"Office_1", areaTo:"Office_2"},
      {tag:"cable4", tagFrom:"light_04", tagTo:"light_05", type:"BFOU-2x2.5mm2", areaFrom:"Office_2", areaTo:"Office_2"},
      {tag:"cable5", tagFrom:"light_05", tagTo:"light_06", type:"BFOU-2x2.5mm2", areaFrom:"Office_2", areaTo:"Office_3"},
      {tag:"cable6", tagFrom:"light_06", tagTo:"light_07", type:"BFOU-2x2.5mm2", areaFrom:"Office_3", areaTo:"Office_3"},
      {tag:"cable7", tagFrom:"light_07", tagTo:"light_08", type:"BFOU-2x2.5mm2", areaFrom:"Office_3", areaTo:"Office_3"},
      {tag:"cable9", tagFrom:"light_07", tagTo:"light_010", type:"BFOU-2x2.5mm2", areaFrom:"Office_3", areaTo:"Office_4"},
      {tag:"cable8", tagFrom:"light_08", tagTo:"light_09", type:"BFOU-2x2.5mm2", areaFrom:"Office_4", areaTo:"Office_4"}
    ]
    
    
    if(this.textArea !== ""){
      cables = [];
      let lines = this.textArea.split('\n');
      lines.forEach((line)=>{
        let columns = line.split("\t");
        debugger
        switch(columns.length){
          case 3:
            cables.push({tag:columns[0], tagFrom:columns[1], tagTo:columns[2], type:"NA", areaFrom:"NA", areaTo:"NA"});
            break;
          case 4:
            cables.push({tag:columns[0], tagFrom:columns[1], tagTo:columns[2], type:columns[3], areaFrom:"NA", areaTo:"NA"});  
            break;
          case 5:
            cables.push({tag:columns[0], tagFrom:columns[1], tagTo:columns[2], type:columns[3], areaFrom:columns[4], areaTo:"NA"});
            break;    
          case 6:
            cables.push({tag:columns[0], tagFrom:columns[1], tagTo:columns[2], type:columns[3], areaFrom:columns[4], areaTo:columns[5]}); 
            break;     
          default:
        }
      })
    }
  
    console.log(cables)
    this.cytoscape.generate(cables)
  }
  
  constructor(cytoscape){
    this.cytoscape = cytoscape;
  }

}

cytoscape.js

export class Cytoscape{
  
  
  /********************************************
   *  call to generate
   * ******************************************/
  generate(cables){
    this.createCY();
    this.addStyle();
    this.createData(cables)
    this.setLayout();
  }
  
  
  
  /********************************************
   *  creates the cy element
   * ******************************************/
  createCY(){
    this.cy = cytoscape({
      container: document.getElementById('cy')
    });

  }
  
  
  /********************************************
   *  creates the data nodes/edges
   * ******************************************/
  createData(cables){
    
    //this is not very good atm, but works..
    
    let addedEq = new Set();
    let nodes = [];
    let edges = [];
    let tags = [];
    let parent = "NA"
    
    //loop the cable tags
    cables.forEach((cable)=>{
      
      //check if equipment in tag from is added as node
      if(!addedEq.has(cable.tagFrom)){
        addedEq.add(cable.tagFrom)
        
        
        //find out if we have parent "room number"
        parent = cable.areaFrom || "NA";

        //if we havent added that from before then lets add it
        if(!addedEq.has(parent)){
          nodes.push({ 
            data: { 
              id: parent
            }
          })
        }
        
        //create main node with parent
        nodes.push({ 
          data: { 
            id: cable.tagFrom,
            parent: parent
          }
        })
      }
      
      //check if equipment is added as node
      if(!addedEq.has(cable.tagTo)){
        addedEq.add(cable.tagTo)
        
        //find out if we have parent "room number"
        parent = parent = cable.areaTo || "NA";

        //if we havent added that from before then lets add it
        if(!addedEq.has(parent)){
          nodes.push({ 
            data: { 
              id: parent
            }
          })
        }
        
        //create main node with parent
        nodes.push({
          data:{
            id: cable.tagTo,
            parent: parent
          }
        })
      }
      
      //create edge
      edges.push({
        data:{
          id: cable.tag +'\n'+cable.type , 
          source: cable.tagFrom, 
          target: cable.tagTo
        }
      })
  
  })
  
  //set edges and nodes to cytoscape
  this.cy.add({
    nodes: nodes,
    edges: edges
  })
    
    
  }
  
  
  /********************************************
   *  adds the style
   * ******************************************/
  addStyle(){
     this.cy.style()
      .resetToDefault()
      .selector('node')
        .css({
          'content': 'data(id)',
          'text-valign': 'center',
          'text-halign': 'center',
          'shape': 'rectangle',
          'width':"200",
          'height':"25"
        })
      .selector('$node > node')
        .css({
          'padding-top': '10px',
          'padding-left': '10px',
          'padding-bottom': '10px',
          'padding-right': '10px',
          'text-valign': 'center',
          'text-halign': 'left',
          'background-color': 'white'
        })
      .selector('edge')
        .css({
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier'
        })
      .selector('edge')
        .css({
          'label': 'data(id)',
          'width': 3,
          'line-color': '#ccc',
          //'edge-text-rotation': 'autorotate',
          'text-wrap': 'wrap'
        })
      .selector('selected')
        .css({
           'background-color': 'black',
          'line-color': 'black',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black'
          })
  }
  
  
  /********************************************
   *  sets the layout
   * ******************************************/
  setLayout(){
    this.cy.layout(this.dagreLayout)
  }
  
  
  /********************************************
   *  1 extra layout not in cytoscape by default
   * ******************************************/
  dagreLayout = {
    name: 'dagre',
    // dagre algo options, uses default value on undefined
    nodeSep: 50,//undefined, // the separation between adjacent nodes in the same rank
    edgeSep: 50,//undefined, // the separation between adjacent edges in the same rank
    rankSep: 65,//undefined, // the separation between adjacent nodes in the same rank
    rankDir: 'tb',//undefined, // 'TB' for top to bottom flow, 'LR' for left to right
    minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
    edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges
  
    // general layout options
    fit: true, // whether to fit to viewport
    padding: 20, // fit padding
    animate: false, // whether to transition the node positions
    animationDuration: 500, // duration of animation in ms if enabled
    animationEasing: undefined, // easing of animation if enabled
    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    ready: function(){}, // on layoutready
    stop: function(){} // on layoutstop
  };
  
  
  /********************************************
   *  1 extra layout not in cytoscape by default
   * ******************************************/
  cosebilkentLayout = {
    name: 'cose-bilkent',
    // Called on `layoutready`
    ready: function () {
    },
    // Called on `layoutstop`
    stop: function () {
    },
    // Whether to fit the network view after when done
    fit: true,
    // Padding on fit
    padding: 10,
    // Whether to enable incremental mode
    randomize: true,
    // Node repulsion (non overlapping) multiplier
    nodeRepulsion: 4500,
    // Ideal edge (non nested) length
    idealEdgeLength: 200,
    // Divisor to compute edge forces
    edgeElasticity: 0.45,//0.45,
    // Nesting factor (multiplier) to compute ideal edge length for nested edges
    nestingFactor: 0.1,
    // Gravity force (constant)
    gravity: 0.9,
    // Maximum number of iterations to perform
    numIter: 2500,
    // For enabling tiling
    tile: true,
    // Type of layout animation. The option set is {'during', 'end', false}
    animate: 'end',
    // Represents the amount of the vertical space to put between the zero degree members during the tiling operation(can also be a function)
    tilingPaddingVertical: 100,
    // Represents the amount of the horizontal space to put between the zero degree members during the tiling operation(can also be a function)
    tilingPaddingHorizontal: 100,
    // Gravity range (constant) for compounds
    gravityRangeCompound: 1.5,
    // Gravity force (constant) for compounds
    gravityCompound: 1.0,
    // Gravity range (constant)
    gravityRange: 3.8
  };
  
  
  
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.0/cytoscape.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.3.6/cytoscape-cose-bilkent.js"></script>
    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.3.0/cytoscape-dagre.js"></script>
    <style>
      html, body {
        height:100%;
        width:100%;
      }
        #cy {
          height: 100%;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        
        #tools{
           position: absolute;
           z-index:100;
        }
    </style>
  </head>
  
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.7/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.7/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-v-grid');

  aurelia.start().then(a => a.setRoot());
}