qiita_pet/static/js/networkVue.js
/**
   *
   * This function gets called by Vue once the HTML template is ready in the
   * actual DOM. We can use it as an "init" function.
   *
   **/
This function gets called by Vue once the HTML template is ready in the
actual DOM. We can use it as an "init" function.
This function gets called by Vue once the HTML template is ready in the actual DOM . We can use it as an " init " function .
mounted() {
    let vm = this;
    vm.new_job_info = null;
    vm.initialPoll = false;
    vm.countdownPoll = 15;
    $('#countdown-span').html(vm.countdownPoll);
    vm.colorScheme = {
      'success': {border: '#00cc00', background: '#7FE57F', highlight: {border: '#00cc00', background: '#a5eda5'}, 'color': '#333333', 'shape': 'ellipse'},
      'running': {border: '#b28500', background: '#ffbf00', highlight: {border: '#b28500', background: '#ffdc73'}, 'color': '#333333', 'shape': 'ellipse'},
      'error': {border: '#ff3333', background: '#ff5b5b', highlight: {border: '#ff3333', background: '#ff8484'}, 'color': '#333333', 'shape': 'ellipse'},
      'in_construction': {border: '#634a00', background: '#e59400', highlight: {border: '#634a00', background: '#efbe66'}, 'color': '#333333', 'shape': 'ellipse'},
      'queued': {border: '#4f5b66', background: '#a7adba', highlight: {border: '#4f5b66', background: '#c0c5ce'}, 'color': '#333333', 'shape': 'ellipse'},
      'waiting': {border: '#4f5b66', background: '#a7adba', highlight: {border: '#4f5b66', background: '#c0c5ce'}, 'color': '#333333', 'shape': 'ellipse'},
      'artifact': {border: '#BBBBBB', background: '#FFFFFF', highlight: {border: '#999999', background: '#FFFFFF'}, 'color': '#333333', 'shape': 'round-triangle'},
      'type': {border: '#BBBBBB', background: '#CCCCCC', highlight: {border: '#999999', background: '#DDDDDD'}, 'color': '#333333', 'shape': 'round-triangle'},
      'deleting': {border: '#ff3333', background: '#ff6347', highlight: {border: '#ff3333', background: '#ff6347'}, 'color': '#333333', 'shape': 'round-triangle'},
      'outdated': {border: '#666666', background: '#666666', highlight: {border: '#000000', background: '#666666'}, 'color': '#ffffff', 'shape': 'round-triangle'},
      'deprecated': {border: '#000000', background: '#000000', highlight: {border: '#000000', background: '#333333'}, 'color': '#ffffff', 'shape': 'vee'}
    };
    show_loading('processing-network-div');
    $("#processing-network-instructions-div").hide();
    $('#run-btn').on('click', function() {
      $('#run-btn').attr('disabled', true);
      this.innerHTML = 'Submitting!';
      vm.runWorkflow();
    });
    $('#run-btn-div').hide();
    $('#refresh-now-link').on('click', function () {
      vm.countdownPoll = 15;
      vm.update_job_status();
    });
    var circle_statuses = [];
    var circle_types = [];
    for (var circle_name in vm.colorScheme) {
      var text = '<td style="padding: 5px; color:' + vm.colorScheme[circle_name]['color'] +
        '; background-color:' + vm.colorScheme[circle_name]['background'] +
        ';"><small>' + circle_name + '</small></td>';
      if (circle_name === 'artifact' || circle_name === 'type' || circle_name === 'deprecated' || circle_name === 'outdated'){
        circle_types.push(text);
      } else {
        circle_statuses.push(text);
      }
    }
    var full_text = '<table style="border-spacing: 3px;border-collapse: separate;">' +
      '<tr>' +
        '<td><small>Job status (circles):</small></td>' +
        '<td>' + circle_statuses.join('') + '</td>' +
        '<td rowspan="2" width="20px">&nbsp;</td>' +
        '<td rowspan="2">&nbsp;&nbsp;&nbsp;</td>' +
        '<td rowspan="2" align="center" id="add-default-workflow">' +
            '<a class="btn btn-success form-control" id="add-default-workflow-btn"><span class="glyphicon glyphicon-flash"></span> Add Default Workflow</a>' +
             "<br/><br/><a href='https://qiita.ucsd.edu/workflows/' target='_blank'> "+
                '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">' +
                    '<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 ' +
                        '1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 ' +
                        '13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"></path>' +
                    '<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"></path>' +
                '</svg>' +
             " Important note about Default Workflow</a>" +
        '</td>' +
      '</tr>' +
      '<tr>' +
        '<td><small>Artifact status (triangles):</small>' +
        '<td>' + circle_types.join('') + '</td>' +
      '</tr>' +
    '</table>';
    $('#circle-explanation').html(full_text);
    $('#add-default-workflow-btn').on('click', function () {
      $('#add-default-workflow').attr('disabled', true);
      document.getElementById('add-default-workflow-btn').innerHTML = 'Submitting!';
      $.post(vm.portal + '/study/process/workflow/default/', {prep_id: vm.elementId}, function(data) {
        if (data['msg_error'] !== null){
          $('#add-default-workflow-btn').attr('disabled', false);
          bootstrapAlert('Error generating workflow: ' + data['msg_error'].replace("\n", "<br/>"));
        } else {
          vm.updateGraph();
        }
      });
      document.getElementById('add-default-workflow-btn').innerHTML = ' Add Default Workflow';
    });
    vm.updateGraph();
    vm.interval = setInterval(function() {
      vm.countdownPoll -= 1;
      $('#countdown-span').html(vm.countdownPoll);
      if (vm.countdownPoll === 0) {
        vm.countdownPoll = 15;
        if (vm.initialPoll) {
          vm.updateGraph();
        }
        vm.update_job_status();
      }
    }, 1000);
  }
mounted ( ) { let vm = this ; vm . new_job_info = null ; vm . initialPoll = false ; vm . countdownPoll = 15 ; $ ( '#countdown-span' ) . html ( vm . countdownPoll ) ; vm . colorScheme = { 'success' : { border : '#00cc00' , background : '#7FE57F' , highlight : { border : '#00cc00' , background : '#a5eda5' } , 'color' : '#333333' , 'shape' : 'ellipse' } , 'running' : { border : '#b28500' , background : '#ffbf00' , highlight : { border : '#b28500' , background : '#ffdc73' } , 'color' : '#333333' , 'shape' : 'ellipse' } , 'error' : { border : '#ff3333' , background : '#ff5b5b' , highlight : { border : '#ff3333' , background : '#ff8484' } , 'color' : '#333333' , 'shape' : 'ellipse' } , 'in_construction' : { border : '#634a00' , background : '#e59400' , highlight : { border : '#634a00' , background : '#efbe66' } , 'color' : '#333333' , 'shape' : 'ellipse' } , 'queued' : { border : '#4f5b66' , background : '#a7adba' , highlight : { border : '#4f5b66' , background : '#c0c5ce' } , 'color' : '#333333' , 'shape' : 'ellipse' } , 'waiting' : { border : '#4f5b66' , background : '#a7adba' , highlight : { border : '#4f5b66' , background : '#c0c5ce' } , 'color' : '#333333' , 'shape' : 'ellipse' } , 'artifact' : { border : '#BBBBBB' , background : '#FFFFFF' , highlight : { border : '#999999' , background : '#FFFFFF' } , 'color' : '#333333' , 'shape' : 'round-triangle' } , 'type' : { border : '#BBBBBB' , background : '#CCCCCC' , highlight : { border : '#999999' , background : '#DDDDDD' } , 'color' : '#333333' , 'shape' : 'round-triangle' } , 'deleting' : { border : '#ff3333' , background : '#ff6347' , highlight : { border : '#ff3333' , background : '#ff6347' } , 'color' : '#333333' , 'shape' : 'round-triangle' } , 'outdated' : { border : '#666666' , background : '#666666' , highlight : { border : '#000000' , background : '#666666' } , 'color' : '#ffffff' , 'shape' : 'round-triangle' } , 'deprecated' : { border : '#000000' , background : '#000000' , highlight : { border : '#000000' , background : '#333333' } , 'color' : '#ffffff' , 'shape' : 'vee' } } ; show_loading ( 'processing-network-div' ) ; $ ( "#processing-network-instructions-div" ) . hide ( ) ; $ ( '#run-btn' ) . on ( 'click' , function ( ) { $ ( '#run-btn' ) . attr ( 'disabled' , true ) ; this . innerHTML = 'Submitting!' ; vm . runWorkflow ( ) ; } ) ; $ ( '#run-btn-div' ) . hide ( ) ; $ ( '#refresh-now-link' ) . on ( 'click' , function ( ) { vm . countdownPoll = 15 ; vm . update_job_status ( ) ; } ) ; var circle_statuses = [ ] ; var circle_types = [ ] ; for ( var circle_name in vm . colorScheme ) { var text = '<td style="padding: 5px; color:' + vm . colorScheme [ circle_name ] [ 'color' ] + '; background-color:' + vm . colorScheme [ circle_name ] [ 'background' ] + ';"><small>' + circle_name + '</small></td>' ; if ( circle_name === 'artifact' || circle_name === 'type' || circle_name === 'deprecated' || circle_name === 'outdated' ) { circle_types . push ( text ) ; } else { circle_statuses . push ( text ) ; } } var full_text = '<table style="border-spacing: 3px;border-collapse: separate;">' + '<tr>' + '<td><small>Job status (circles):</small></td>' + '<td>' + circle_statuses . join ( '' ) + '</td>' + '<td rowspan="2" width="20px">&nbsp;</td>' + '<td rowspan="2">&nbsp;&nbsp;&nbsp;</td>' + '<td rowspan="2" align="center" id="add-default-workflow">' + '<a class="btn btn-success form-control" id="add-default-workflow-btn"><span class="glyphicon glyphicon-flash"></span> Add Default Workflow</a>' + "<br/><br/><a href='https://qiita.ucsd.edu/workflows/' target='_blank'> " + '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">' + '<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 ' + '1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 ' + '13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"></path>' + '<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"></path>' + '</svg>' + " Important note about Default Workflow</a>" + '</td>' + '</tr>' + '<tr>' + '<td><small>Artifact status (triangles):</small>' + '<td>' + circle_types . join ( '' ) + '</td>' + '</tr>' + '</table>' ; $ ( '#circle-explanation' ) . html ( full_text ) ; $ ( '#add-default-workflow-btn' ) . on ( 'click' , function ( ) { $ ( '#add-default-workflow' ) . attr ( 'disabled' , true ) ; document . getElementById ( 'add-default-workflow-btn' ) . innerHTML = 'Submitting!' ; $ . post ( vm . portal + '/study/process/workflow/default/' , { prep_id : vm . elementId } , function ( data ) { if ( data [ 'msg_error' ] !== null ) { $ ( '#add-default-workflow-btn' ) . attr ( 'disabled' , false ) ; bootstrapAlert ( 'Error generating workflow: ' + data [ 'msg_error' ] . replace ( "\n" , "<br/>" ) ) ; } else { vm . updateGraph ( ) ; } } ) ; document . getElementById ( 'add-default-workflow-btn' ) . innerHTML = ' Add Default Workflow' ; } ) ; vm . updateGraph ( ) ; vm . interval = setInterval ( function ( ) { vm . countdownPoll -= 1 ; $ ( '#countdown-span' ) . html ( vm . countdownPoll ) ; if ( vm . countdownPoll === 0 ) { vm . countdownPoll = 15 ; if ( vm . initialPoll ) { vm . updateGraph ( ) ; } vm . update_job_status ( ) ; } } , 1000 ) ; }
This function gets called by Vue once the HTML template is ready in the
 actual DOM.
This function gets called by Vue once the HTML template is ready in the actual DOM .
// This initialPoll is used ONLY if the graph doesn't exist yet // This variable is used to show the update countdown on the interface // the current wait time is 15 sec // This call to udpate graph will take care of updating the jobs // if the graph is not available // Reset the counter for every 15 seconds // Check for the initial poll - it only happens if a graph doesn't exist yet // Update the status of the jobs