7777 }
7878 } ;
7979
80- /**
81- * Draws the aritfact + job graph in the `analysis-network-div`
82- *
83- */
84- function populate_grap_div ( ) {
85- // Put the loading gif in the div
86- show_loading ( '{% raw qiita_config.portal_dir %}' , 'analysis-network-div' ) ;
87- // Retrieve the information for the graph
88- $ . get ( "{% raw qiita_config.portal_dir %}/analysis/description/graph/" , { analysis_id : { { analysis_id} } } , function ( data ) {
89- var nodes = [ ] ;
90- var edges = [ ] ;
91- // Format edge list data
92- for ( var i = 0 ; i < data . edges . length ; i ++ ) {
93- edges . push ( { from : data . edges [ i ] [ 0 ] , to : data . edges [ i ] [ 1 ] , arrows :'to' } ) ;
94- }
95- // Format node list data
96- for ( var i = 0 ; i < data . nodes . length ; i ++ ) {
97- nodes . push ( { id : data . nodes [ i ] [ 1 ] , label : data . nodes [ i ] [ 2 ] , group : data . nodes [ i ] [ 0 ] } ) ;
80+ $ ( document ) . ready ( function ( ) {
81+ // Create the new VUE component that is going to hold the artifact + job graph
82+ Vue . component ( 'analysis-graph' , {
83+ template : '<div class="col-md-12 graph" style="width:90%" id="analysis-network-div">' ,
84+ props : [ 'nodes' , 'edges' ]
85+ } ) ;
86+
87+ new Vue ( {
88+ el : "#analysis-graph-vue" ,
89+ data : {
90+ nodes : [ ] ,
91+ edges : [ ]
92+ } ,
93+ methods : {
94+ update_graph : function ( ) {
95+ let vm = this ;
96+ $ . get ( "{% raw qiita_config.portal_dir %}/analysis/description/" + { { analysis_id} } + "/graph/" , function ( data ) {
97+ // If there are no nodes in the graph, it means that we are waiting
98+ // for the jobs to generate the initial set of artifacts. Update
99+ // the job list
100+ if ( data . nodes . length == 0 ) {
101+ vm . update_jobs ( ) ;
102+ }
103+ else {
104+ // The initial set of artifacts has been created! Format the graph
105+ // data in a way that Vis.Network likes it
106+ // Format edge list data
107+ for ( var i = 0 ; i < data . edges . length ; i ++ ) {
108+ vm . edges . push ( { from : data . edges [ i ] [ 0 ] , to : data . edges [ i ] [ 1 ] , arrows :'to' } ) ;
109+ }
110+ // Format node list data
111+ for ( var i = 0 ; i < data . nodes . length ; i ++ ) {
112+ vm . nodes . push ( { id : data . nodes [ i ] [ 1 ] , label : data . nodes [ i ] [ 2 ] , group : data . nodes [ i ] [ 0 ] } ) ;
113+ }
114+ draw_processing_graph ( vm . nodes , vm . edges , 'analysis-network-div' , populateContentArtifact , populateContentJob ) ;
115+ // At this point we can show the graph and hide the job list
116+ $ ( "#analysis-network-div" ) . show ( ) ;
117+ $ ( "#analysis-job-div" ) . hide ( ) ;
118+ }
119+ } )
120+ . fail ( function ( object , status , error_msg ) {
121+ // Show an error message if something wrong happen, rather than
122+ // leaving the spinning wheel of death in there.
123+ $ ( "#analysis-network-div" ) . html ( "Error loading graph: " + status + " " + error_msg ) ;
124+ $ ( "#analysis-network-div" ) . show ( ) ;
125+ $ ( "#analysis-job-div" ) . hide ( ) ;
126+ }
127+ ) ;
128+ } ,
129+ update_jobs : function ( ) {
130+ let vm = this ;
131+ $ . get ( "{% raw qiita_config.portal_dir %}/analysis/description/" + { { analysis_id} } + "/jobs/" , function ( data ) {
132+ $ ( "#analysis-job-div" ) . html ( "" ) ;
133+ $ ( "#analysis-job-div" ) . append ( "<p>Hang tight, we are generating the initial set of files for your analysis: </p>" ) ;
134+ for ( var jobid in data ) {
135+ var contents = "<b> Job: " + jobid + "</b> Status: " + data [ jobid ] [ 'status' ] ;
136+ // Only show step if error if they actually have a useful message
137+ if ( data [ jobid ] [ 'step' ] ) {
138+ contents = contents + " Step: " + data [ jobid ] [ 'step' ] + "</br>" ;
139+ }
140+ if ( data [ jobid ] [ 'error' ] ) {
141+ contents = contents + " Error: " + data [ jobid ] [ 'error' ] + "</br>" ;
142+ }
143+ $ ( "#analysis-job-div" ) . append ( contents ) ;
144+ }
145+ } )
146+ . fail ( function ( object , status , error_msg ) {
147+ $ ( "#analysis-job-div" ) . html ( "Error loading job information: " + status + " " + error_msg ) ;
148+ }
149+ ) ;
150+ }
151+ } ,
152+ mounted ( ) {
153+ let vm = this ;
154+ show_loading ( '{% raw qiita_config.portal_dir %}' , 'analysis-network-div' ) ;
155+ $ ( "#analysis-network-div" ) . hide ( ) ;
156+ // This call to udpate graph will take care of updating the jobs
157+ // if the graph is not available
158+ vm . update_graph ( ) ;
159+ setInterval ( function ( ) {
160+ // Only update if the graph has not been generated yet
161+ if ( vm . nodes . length == 0 ) {
162+ vm . update_graph ( ) ;
163+ }
164+ } , 5000 ) ;
98165 }
99- draw_processing_graph ( nodes , edges , 'analysis-network-div' , populateContentArtifact , populateContentJob ) ;
100166 } )
101- . fail ( function ( object , status , error_msg ) {
102- $ ( "#analysis-network-div" ) . html ( "Error loading graph: " + status + " " + error_msg ) ;
103- }
104- ) ;
105- }
106-
107- $ ( document ) . ready ( function ( ) {
108- populate_grap_div ( ) ;
109167 } ) ;
110-
111168</ script >
112169< style >
113170.graph {
@@ -131,8 +188,11 @@ <h4><a class="btn btn-info" id="show-hide-network-btn" onclick="toggle_network_g
131188 < b > (Click nodes for more information, blue are jobs)</ b >
132189 </ div >
133190</ div >
191+ < div class ='row ' id ="analysis-graph-vue ">
192+ < analysis-graph > </ analysis-graph >
193+ </ div >
134194< div class ='row '>
135- < div class ='col-md-12 graph ' style ='width:90% ' id ='analysis-network -div '>
195+ < div class ='col-md-12 ' style ='width:90% ' id ='analysis-job -div '>
136196 </ div >
137197</ div >
138198< div class ='row '>
0 commit comments