Merge pull request #199 from pynbody/webserver-ui-fixes

Fix hitches in improved web server interface

Author: apontzen

tangos/__init__.py

@@ -20,4 +20,4 @@
 from .core import *
 from .query import *
 
-__version__ = '1.6.0'
+__version__ = '1.6.1'

tangos/web/static/css/stylesheet.css

@@ -124,6 +124,7 @@ th {
 
 #imgbox {
     overflow: scroll;
+    height: 100%;
 }
 
 #imgbox::-webkit-scrollbar {
@@ -185,6 +186,8 @@ span.step_unavailable a {
     max-width: 80vw;
     padding: 1em;
     box-shadow: -10px 0 10px white;
+    display: flex;
+    flex-direction: column;
 }
 
 
@@ -424,6 +427,9 @@ a.delete::before {
     background-repeat: no-repeat;
 }
 
+a.download-link {
+    white-space: nowrap;
+}
 
 label.x-plot-radio::before {
     content: " ";
@@ -465,4 +471,5 @@ input {
     border-right: 2px solid rgba(187, 68, 0, 0.2);
     cursor: ew-resize;
     z-index: 0;
+    flex-grow: 1;
 }

tangos/web/static/halo_view.js

@@ -203,9 +203,11 @@ function updateDownloadButtons () {
   if ($('#image_form').values().type === 'tree') {
     $('#download-merger-tree').show()
     $('#download-csv-link').hide()
+    $('#options-images').hide()
   } else {
     $('#download-csv-link').show()
     $('#download-merger-tree').hide()
+    $('#options-images').show()
   }
 }
 
@@ -333,6 +335,10 @@ function expandFixedRows() {
   });
 }
 
+function updateImageBoxSize() {
+  if(!isDisplayingTree()) fetchPlot(true);
+}
+
 $(function () {
 
   prePageUpdate(function () {
@@ -366,8 +372,11 @@ $(function () {
       {handles: 'w', minWidth: 200, containment: 'document',
       stop: function(event, ui) {
         $('#imgbox_container').css('left',''); // otherwise jqueryui leaves it with a fixed left edge, breaking window resizing
-        if(!isDisplayingTree()) fetchPlot(true); // update for new size of image box
-      }});
+        updateImageBoxSize();
+      }}
+  );
+
+  $(window).resize(updateImageBoxSize);
 
 
 

tangos/web/templates/halo_view.jinja2

@@ -89,24 +89,25 @@
             <input name="type" value="tree" type="radio" id="type-tree"><label for="type-tree">Merger tree</label>;
             or plot for: <input name="type" value="gather" type="radio" id="type-gather"><label for="type-gather">This timestep</label>
             <input name="type" value="cascade" type="radio" id="type-cascade" checked><label for="type-cascade">This halo</label><br/>
-            <input name="logx" type="checkbox" id="logx"/><label for="logx">log x</label>
-            <input name="logy" type="checkbox" id="logy"/><label for="logy">log y</label>
-            <label for="image_format">Image format</label>
-            <select id="image_format">
-                <option value='svg' selected>SVG</option>
-                <option value='png'>PNG</option>
-                <option value='pdf'>PDF</option>
-            </select>
-            <input name="logimage" type="checkbox" id="logimage"/><label for="logimage">log images</label>.
-            <input type="checkbox" name="use_range" id="use_range" onclick="rangeDisplay()"/><label for="use_range">Use range</label>
-            <p id="vmin-vmax-range">
-                <label for="vmin">Vmin</label>
-                <input name="vmin" type="range" id="vmin" min="0", vmax="100" value="0" onchange="fetchPlot()">
-                <label for="vmax">Vmax</label>
-                <input name="vmax" type="range" id="vmax" min="0", vmax="100" value="100" onchange="fetchPlot()">
-            </p>
-            <span class="download-area-csv"><a href="#" id="download-csv-link">&#x25BC; Download CSV</a></span>
-            <span class="download-area-tree"><a href="#" id="download-merger-tree">&#x25BC; Download Merger Tree</a></span>
+            <span id="options-images">
+                <select id="image_format">
+                    <option value='svg' selected>SVG</option>
+                    <option value='png'>PNG</option>
+                    <option value='pdf'>PDF</option>
+                </select>
+                <input name="logx" type="checkbox" id="logx"/><label for="logx">log x</label>
+                <input name="logy" type="checkbox" id="logy"/><label for="logy">log y</label>
+                <input name="logimage" type="checkbox" id="logimage"/><label for="logimage">log images</label>.
+                <input type="checkbox" name="use_range" id="use_range" onclick="rangeDisplay()"/><label for="use_range">Use range</label>
+                <p id="vmin-vmax-range">
+                    <label for="vmin">Vmin</label>
+                    <input name="vmin" type="range" id="vmin" min="0", vmax="100" value="0" onchange="fetchPlot()">
+                    <label for="vmax">Vmax</label>
+                    <input name="vmax" type="range" id="vmax" min="0", vmax="100" value="100" onchange="fetchPlot()">
+                </p>
+            </span>
+            <a href="#" id="download-csv-link" class="download-link">&#x25BC; Download CSV</a>
+            <a href="#" id="download-merger-tree" class="download-link">&#x25BC; Download Merger Tree</a>
         </form>
         </div>
         <div id="imgbox"></div>