Adding jump functionality. Addresses #780

sandialabs · Nov 14, 2017 · 63ddd13 · 63ddd13
1 parent 474c265
commit 63ddd13
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/web-server/plugins/slycat-parameter-image/css/ui.css b/web-server/plugins/slycat-parameter-image/css/ui.css
@@ -437,10 +437,13 @@ rights in this software.
   padding: 3px 4px;
 }
 .frame-button.pin-button {
-  padding: 4px 4px;
+  padding: 4px 22px 4px 4px;
 }
 .frame-button.resize-handle {
-  padding: 4px 3px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 2px 3px;
 }
 .frame-button.resize-handle:hover {
   cursor: nwse-resize;

diff --git a/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js b/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js
@@ -1112,7 +1112,7 @@ define("slycat-parameter-image-scatterplot", ["slycat-server-root", "d3", "URI",
       }
     }
 
-    var  add_resize_handle = function(fh) {
+    var add_resize_handle = function(fh) {
       fh.append("i")
         .attr("class", "resize-handle frame-button fa fa-expand fa-rotate-90")
         .attr("aria-hidden", "true")
@@ -1151,6 +1151,7 @@ define("slycat-parameter-image-scatterplot", ["slycat-server-root", "d3", "URI",
     var add_jump_button = function(fh, index) {
       var container = fh.append("span")
         .attr("class", "jump-button frame-button")
+        .on("click", handlers["jump"]);
         ;
 
       container.append("span")
@@ -1162,13 +1163,13 @@ define("slycat-parameter-image-scatterplot", ["slycat-server-root", "d3", "URI",
 
       container.append("i")
         .attr('class', 'table-button jump-button frame-button fa fa-table')
-        .attr('title', 'Jump to row in table')
+        .attr('title', 'Jump to row ' + index + ' in table')
         .attr("aria-hidden", "true")
         ;
 
       container.append("i")
         .attr('class', 'arrow-button jump-button frame-button fa fa-arrow-right')
-        .attr('title', 'Jump to row in table')
+        .attr('title', 'Jump to row ' + index + ' in table')
         .attr("aria-hidden", "true")
         ;
     };
@@ -1349,7 +1350,8 @@ define("slycat-parameter-image-scatterplot", ["slycat-server-root", "d3", "URI",
         var frame;
         self.state = "resizing";
         frame = d3.select(this.closest(".image-frame"));
-        d3.selectAll([frame, d3.select("#scatterplot").node()]).classed("", true);
+        // Add resizing class to scatterplot to use CSS to keep cursor as arrow while resizing
+        d3.select("#scatterplot").classed("resizing", true);
 
         if (frame.classed("hover-image")) {
           self.opening_image = null;
@@ -1423,7 +1425,8 @@ define("slycat-parameter-image-scatterplot", ["slycat-server-root", "d3", "URI",
         video_sync_time_changed(self);
       }),
       jump: (function(){
-
+        var index = d3.select(d3.event.target.closest(".image-frame")).attr("data-index");
+        self.element.trigger("jump_to_simulation", index);
       }),
     }
 
@@ -1632,6 +1635,8 @@ define("slycat-parameter-image-scatterplot", ["slycat-server-root", "d3", "URI",
 
         container.appendChild(viewer);
         ko.applyBindings({}, container);
+
+        $(window).trigger('resize');
       }
       else {
         // We don't support this file type, so just create a download link
@@ -1671,7 +1676,7 @@ define("slycat-parameter-image-scatterplot", ["slycat-server-root", "d3", "URI",
       self._adjust_leader_line(frame_html);
 
       // Create a resize handle
-      add_resize_handle(footer);
+      add_resize_handle(frame_html);
 
       // Create a pin button ...
       add_pin_button(footer);

diff --git a/web-server/plugins/slycat-parameter-image/js/parameter-image-table.js b/web-server/plugins/slycat-parameter-image/js/parameter-image-table.js
@@ -370,6 +370,10 @@ $.widget("parameter_image.table",
       self.data.invalidate();
       self.grid.invalidate();
     }
+    else if(key == "jump_to_simulation")
+    {
+      self.grid.scrollRowToTop(value);
+    }
   },
 
   _set_selected_x: function()

diff --git a/web-server/plugins/slycat-parameter-image/js/ui.js b/web-server/plugins/slycat-parameter-image/js/ui.js
@@ -673,6 +673,14 @@ function setup_scatterplot()
       $("#controls").controls("option", "video-sync-time", video_sync_time);
       video_sync_time_changed(video_sync_time);
     });
+
+    // Jumping to simulation ...
+    $("#scatterplot").bind("jump_to_simulation", function(event, index)
+    {
+      // Alerts the table
+      $("#table").table("option", "jump_to_simulation", parseInt(index));
+      video_sync_time_changed(video_sync_time);
+    });
   }
 }