#173: adding custom legend labels for the task data table

wrench-project · Sep 2, 2020 · b8fcc53 · b8fcc53
1 parent 76e751e
commit b8fcc53
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/tools/wrench/dashboard/scripts/graph-sections/simulation-details.js b/tools/wrench/dashboard/scripts/graph-sections/simulation-details.js
@@ -11,68 +11,68 @@ function populateWorkflowTaskDataTable(data, tableID = null, label = null) {
     const tdClass = "task-details-td";
 
     let labels = label ? label : {
-        read: {display: true, label: 'Read Input'},
-        compute: {display: true, label: 'Computation'},
-        write: {display: true, label: 'Write Output'},
+        read: {display: true, label: "Read Input"},
+        compute: {display: true, label: "Computation"},
+        write: {display: true, label: "Write Output"},
     };
 
-    let table_structure = `
+    let tableContents = `
         <table class="task-details-table" id='${tableId}'>
             <colgroup>
                 <col span="1"></col>`;
 
     if (labels.read.display) {
-        table_structure += '<col span="3" class="read-col"></col>';
+        tableContents += `<col span="3" class="read-col"></col>`;
     }
     if (labels.compute.display) {
-        table_structure += '<col span="3" class="compute-col"></col>';
+        tableContents += `<col span="3" class="compute-col"></col>`;
     }
     if (labels.write.display) {
-        table_structure += '<col span="3" class="write-col"></col>';
+        tableContents += `<col span="3" class="write-col"></col>`;
     }
 
-    table_structure += `
+    tableContents += `
                 <col span="1"></col>
             </colgroup>
             <thead class="${tableId}">
                 <tr>
                     <td></td>`;
 
     if (labels.read.display) {
-        table_structure += '<td colspan="3" class="text-center ${tdClass}">' + labels.read.label + '</td>';
+        tableContents += `<td colspan="3" class="text-center ${tdClass}">` + labels.read.label + `</td>`;
     }
     if (labels.compute.display) {
-        table_structure += '<td colspan="3" class="text-center ${tdClass}">' + labels.compute.label + '</td>';
+        tableContents += `<td colspan="3" class="text-center ${tdClass}">` + labels.compute.label + `</td>`;
     }
     if (labels.write.display) {
-        table_structure += '<td colspan="3" class="text-center ${tdClass}">' + labels.write.label + '</td>';
+        tableContents += `<td colspan="3" class="text-center ${tdClass}">` + labels.write.label + `</td>`;
     }
 
-    table_structure += `                  
+    tableContents += `                  
                     <td></td>
                 </tr>
                 <tr>
                     <th scope="col" class="task-details-table-header">TaskID</th>`;
 
     if (labels.read.display) {
-        table_structure += `
+        tableContents += `
             <th scope="col" class="task-details-table-header">Start Time</th>
             <th scope="col" class="task-details-table-header">End Time</th>
             <th scope="col" class="task-details-table-header">Duration</th>`;
     }
     if (labels.compute.display) {
-        table_structure += `
+        tableContents += `
             <th scope="col" class="task-details-table-header">Start Time</th>
             <th scope="col" class="task-details-table-header">End Time</th>
             <th scope="col" class="task-details-table-header">Duration</th>`;
     }
     if (labels.write.display) {
-        table_structure += `
+        tableContents += `
             <th scope="col" class="task-details-table-header">Start Time</th>
             <th scope="col" class="task-details-table-header">End Time</th>
             <th scope="col" class="task-details-table-header">Duration</th>`;
     }
-    table_structure += `        
+    tableContents += `        
                     <th scope="col" class="task-details-table-header">Task Duration</th>
                 </tr>
             </thead>
@@ -81,7 +81,7 @@ function populateWorkflowTaskDataTable(data, tableID = null, label = null) {
             </tbody>
         </table >`;
 
-    document.getElementById(tableId).innerHTML = table_structure;
+    document.getElementById(tableId).innerHTML = tableContents;
 
     d3.select(`#${tableId}`).style('display', 'block');