use tabs for reports

dream/platform/static/css/demo-new.css

@@ -361,7 +361,7 @@ border: 1px solid black;
 }
 
 #debug_json textarea {
-  width:100%;
+  width:95%;
 }
 
 .ep {

dream/platform/static/index.html

@@ -66,30 +66,50 @@
       <div id="shift_spreadsheet" style="display: none; overflow: scroll"></div>
     </div>
     <div class="twelve columns">
+
       <div id="result_zone">
         <h1>Results</h1>
-        <ul id="result_list"></ul></div>
-      <div id="graph_zone">
-        <div>Stations Utilization</div>
-        <div id="graph"></div>
-      </div>
-      <div id="exit_stat"></div>
-      <div id="queue_stat">
-        <div>Queues Statistics</div>
-        <div id="queue_stat_graph"></div>
+        <ul id="result_list"></ul>
       </div>
-      <div id="job_gantt" style='width:1320px; height:800px;'></div>
-      <div id="job_schedule_spreadsheet" style="display: none; overflow: scroll;"></div>
 
-      <div id="debug_json" style="display: none">
-        <div class="six columns alpha">
-          <div>Input</div>
-          <textarea rows="20" cols="47" id="json_output"></textarea>
+      <div id="reports" style="display:none;">
+        <ul>
+          <li><a href="#graph_zone">Stations Utilization</a></li>
+          <li><a href="#exit_stat">Exit Statistics</a></li>
+          <li><a href="#queue_stat">Queue Statistics</a></li>
+          <li><a href="#job_gantt">Job Gantt</a></li>
+          <li><a href="#job_schedule_spreadsheet">Job Schedule</a></li>
+          <li><a href="#debug_json">Debug Json</a></li>
+        </ul>
+        <div id="graph_zone">
+          <h1>Stations Utilization</h1>
+          <div id="graph"></div>
         </div>
-        <div class="six columns alpha">
-          <div>Result</div>
+
+        <div id="exit_stat">
+          <h1>Exit Statistics</h1>
+          <div></div>
+        </div>
+
+        <div id="queue_stat">
+          <h1>Queues Statistics</h1>
+          <div id="queue_stat_graph"></div>
+        </div>
+
+        <div id="job_gantt" style='width:1320px; height:800px;'></div>
+        <div id="job_schedule_spreadsheet" style="overflow: scroll;"></div>
+
+        <div id="debug_json">
+          <h1>Json Used</h1>
+          <table><tr><td>
+          <h4>Input</h4>
+          <textarea rows="20" cols="47" id="json_output"></textarea>
+          </td><td>
+          <h4>Output</h4>
           <textarea rows="20" cols="47" id="json_result"></textarea>
+          </td></tr></table>
         </div>
+
       </div>
     </div>
 

dream/platform/static/src/dream.js

@@ -273,20 +273,53 @@
     };
 
     that.displayResult = function (idx) {
+      var active_tab = $("#reports").data("ui-tabs") ?
+        $("#reports").tabs("option", "active") : 0;
+      var result = JSON.parse($("#json_result").val())[idx]['result'];
+
       $('li.result').removeClass('active');
       $($('li.result')[idx]).addClass('active');
-      var result = JSON.parse($("#json_result").val())[idx]['result'];
+      if ($("#reports").data("ui-tabs")) {
+        $("#reports").tabs("destroy"); 
+      }
+
+      function showReport(report_id) {
+        $("li > a[href='#" + report_id  + "']").parent().show();
+      }
+      function hideReport(report_id) {
+        $("li > a[href='#" + report_id  + "']").parent().hide();
+      }
+
+      // XXX : use same name and make it a loop
       if (configuration['Dream-Configuration'].gui.debug_json){
-        $("#debug_json").show();
+        showReport("debug_json")
+      } else {
+        hideReport("debug_json")
       }
       if (configuration['Dream-Configuration'].gui.station_utilisation_graph){
-        $("#graph_zone").show();
+        showReport("graph_zone")
+      } else {
+        hideReport("graph_zone")
       }
       if (configuration['Dream-Configuration'].gui.job_schedule_spreadsheet){
-        $("#job_schedule_spreadsheet").show();
+        showReport("job_schedule_spreadsheet")
+      } else {
+        hideReport("job_schedule_spreadsheet")
       }
       if (configuration['Dream-Configuration'].gui.job_gantt){
-        $("#job_gantt").show();
+        showReport("job_gantt")
+      } else {
+        hideReport("job_gantt")
+      }
+      if (configuration['Dream-Configuration'].gui.exit_stat){
+        showReport("exit_stat")
+      } else {
+        hideReport("exit_stat")
+      }
+      if (configuration['Dream-Configuration'].gui.queue_stat){
+        showReport("queue_stat")
+      } else {
+        hideReport("queue_stat")
       }
 
       // temporary hack
@@ -519,7 +552,7 @@
       }
 
       if (configuration['Dream-Configuration'].gui.queue_stat){
-        var queue_stat = $("#queue_stat").show();
+        var queue_stat = $("#queue_stat");
         var series = [];
         $.each(result.elementList, function(idx, el){
           if (el._class == 'Dream.Queue'){
@@ -531,7 +564,7 @@
       }
 
       if (configuration['Dream-Configuration'].gui.exit_stat){
-        var exit_stat = $("#exit_stat").show().text("Exit Metrics");
+        var exit_stat = $("#exit_stat").find('div').empty();
         $.each(result.elementList, function(idx, el){
           if (el._class == 'Dream.Exit'){
             var text = exit_stat.html() + "<table><tr><th colspan='2'>" + (
@@ -663,6 +696,10 @@
           //$('#gantt_grid').width(1000);
         }
       }
+      // make the tabs full width
+      $("#reports li").width((100/$("#reports li:visible").length) - 1 +'%');
+
+      $("#reports").show().tabs({ active: active_tab });
     };
     return that;
   };

dream/platform/static/src/dream_launcher.js

@@ -65,11 +65,11 @@
 
     var loadData = function (data) {
       dream_instance.clearAll();
-      $('#graph_zone').hide();
-      $('#job_schedule_spreadsheet').hide();
+      $('#reports').hide();
+      $('#result_zone').hide();
+
       $('#shift_spreadsheet').hide();
-      $("#job_gantt").hide();
-      $("#queue_stat").hide();
+      $("#debug_json").hide();
       $("#wip_part_spreadsheet").hide();
 
       if (configuration['Dream-Configuration'].gui.wip_part_spreadsheet){
@@ -163,6 +163,7 @@
           function (data) {
             $("#loading_spinner").hide();
             $("#run_simulation").button('enable');
+            $("#reports").show();
             $("#result_zone").show();
             $('#result_list').empty();
             if (data['success']) {
@@ -178,11 +179,8 @@
               });
               dream_instance.displayResult(0);
             } else {
-              $("#result_zone").hide();
-              $("#graph_zone").hide();
-              $("#job_schedule_spreadsheet").hide();
-              $("#job_gantt").hide();
-              $("#json_result").effect('shake', 50).val(data['error']);
+              $("#reports").hide();
+              $("#json_result").show().effect('shake', 50).val(data['error']);
             }
           });
         e.preventDefault();
@@ -258,11 +256,8 @@
     $(window).resize(function () {
       dream_instance.redraw();
     });
-    $("#result_zone").hide();
-    $("#graph_zone").hide();
     $("#job_schedule_spreadsheet").hide();
     $("#shift_spreadsheet").hide();
-    $("#job_gantt").hide();
        }
     });
   });