Scroll execution list if over 500 pixels. Fixes #2044 (#2045)

src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js

@@ -267,7 +267,8 @@ define([
         this.$execHeader = $('<div>', {class: 'execution-header panel-header'});
         this.$execCntr.append(this.$execHeader);
 
-        this.$execBody = $('<table>', {class: 'table'});
+        this.$execBody = $('<div>', {class: 'execution-body'});
+        this.$execList = $('<table>', {class: 'table'});
         var thead = $('<thead>'),
             tr = $('<tr>'),
             td = $('<td>');
@@ -280,12 +281,13 @@ define([
         tr.append(td);
         tr.append($('<td>'));
         thead.append(tr);
-        this.$execBody.append(thead);
+        this.$execList.append(thead);
 
         // Create the table header
         this.$execContent = $('<tbody>');
-        this.$execBody.append(this.$execContent);
+        this.$execList.append(this.$execContent);
 
+        this.$execBody.append(this.$execList);
         this.$execCntr.append(this.$execBody);
 
         this.$execHeader.on('click', this.toggleExecutionTab.bind(this));

src/visualizers/widgets/PipelineEditor/styles/PipelineEditorWidget.css

@@ -1,27 +1,21 @@
 /**
- * This file is for any css that you may want for this visualizer.
- *
- * Ideally, you would use the scss file also provided in this directory 
- * and then generate this file automatically from that. However, you can 
- * simply write css if you prefer
+ * This file is for any scss that you may want for this visualizer.
  */
-
 .pipeline-editor {
   outline: none; }
-
-.pipeline-editor .execution-container {
-  bottom: 0;
-  left: 0.75em;
-  position: absolute;
-  min-width: 25em;
-  margin-bottom: 0;
-  text-align: center;
-}
-
-.pipeline-editor .execution-header {
-  font-size: 1.2em;
-  padding-top: 0.25em;
-  padding-bottom: 0.25em;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-}
+  .pipeline-editor .execution-container {
+    bottom: 0;
+    left: 0.75em;
+    position: absolute;
+    min-width: 25em;
+    margin-bottom: 0;
+    text-align: center; }
+  .pipeline-editor .execution-header {
+    font-size: 1.2em;
+    padding-top: 0.25em;
+    padding-bottom: 0.25em;
+    padding-left: 0.75em;
+    padding-right: 0.75em; }
+  .pipeline-editor .execution-body {
+    overflow: auto;
+    max-height: 500px; }

src/visualizers/widgets/PipelineEditor/styles/PipelineEditorWidget.scss

@@ -4,4 +4,26 @@
 
 .pipeline-editor {
   outline: none;
+
+  .execution-container {
+    bottom: 0;
+    left: 0.75em;
+    position: absolute;
+    min-width: 25em;
+    margin-bottom: 0;
+    text-align: center;
+  }
+
+  .execution-header {
+    font-size: 1.2em;
+    padding-top: 0.25em;
+    padding-bottom: 0.25em;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+  }
+
+  .execution-body {
+    overflow: auto;
+    max-height: 500px;
+  }
 }