github.com/mweagle/Sparta@v1.15.0/resources/describe/sparta.js (about)

     1  var SERVICE_NAME = 'TBD'
     2  var cytoscapeView = null
     3  
     4  function showView (newElementID) {
     5    $('#view-container').children().hide()
     6    $('#navBarItems').children().removeClass('active')
     7    // Set the tab active, the view active
     8    viewID = '#' + newElementID + '-view'
     9    tabID = '#' + newElementID + '-tab'
    10    $(viewID).show()
    11    $(tabID).addClass('active')
    12  }
    13  
    14  $(document).ready(function () {
    15    var cloudformationTemplate = null
    16    try {
    17      cloudformationTemplate = JSON.parse(CLOUDFORMATION_TEMPLATE_RAW)
    18    } catch (e) {
    19      console.log('Failed to parse template: ' + e.toString())
    20      cloudformationTemplate = {
    21        ERROR: e.toString()
    22      }
    23    }
    24    var jsonString = JSON.stringify(cloudformationTemplate, null, 4)
    25    $('#rawTemplateContent').text(jsonString)
    26    hljs.initHighlightingOnLoad()
    27    $('pre code').each(function (i, block) {
    28      hljs.highlightBlock(block)
    29    })
    30  
    31    try {
    32      // Show the cytoscape view
    33      cytoscapeView = window.cytoscapeView = cytoscape({
    34        container: $('#cytoscapeDIVTarget'),
    35        elements: CYTOSCAPE_DATA,
    36        style: [{
    37          selector: 'node',
    38          style: {
    39            shape: 'round-rectangle',
    40            content: 'data(label)',
    41            'background-image': 'data(image)',
    42            'background-width': '100%',
    43            'background-height': '100%',
    44            'background-opacity': '0'
    45          }
    46        },
    47        {
    48            selector: 'edge',
    49            style: {
    50              content: 'data(label)',
    51              width: 3,
    52              'curve-style': 'taxi',
    53              'mid-target-arrow-shape': 'triangle',
    54              'target-arrow-shape' : 'triangle',
    55              'line-dash-pattern' : [9, 3],
    56              'line-fill' : 'linear-gradient',
    57              'line-gradient-stop-colors' : 'gainsboro slategray black',
    58              'target-arrow-color' : 'black'
    59            }
    60          },
    61          {
    62            selector: 'label',
    63            style: {
    64              'font-family' : '"Open Sans", Avenir, sans-serif',
    65              'font-weight' : 'data(labelWeight)'
    66            },
    67          }
    68        ],
    69        layout: {
    70          name: 'breadthfirst'
    71        }
    72      })
    73    } catch (err) {
    74      console.log('Failed to initialize topology view: ' + err)
    75    }
    76    var layoutSelectorIDs = [
    77      '#layout-breadthfirst',
    78      '#layout-dagre',
    79      '#layout-cose',
    80      '#layout-grid',
    81      '#layout-circle',
    82      '#layout-concentric'
    83    ]
    84    layoutSelectorIDs.forEach(function (eachElement) {
    85      $(eachElement).click(function (event) {
    86        event.preventDefault()
    87        var layoutType = eachElement.split('-').pop()
    88        console.log('Layout type: ' + layoutType)
    89        cytoscapeView
    90          .makeLayout({
    91            name: layoutType
    92          })
    93          .run()
    94      })
    95    })
    96    showView('lambda')
    97  })