Set experiment config to be expandable (prototype)

chovanecm · May 4, 2017 · 15a2569 · 15a2569
1 parent c15050d
commit 15a2569
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/sacredboard/static/scripts/runs/dictionaryBrowser.html b/sacredboard/static/scripts/runs/dictionaryBrowser.html
@@ -1,3 +1,4 @@
 <table class="table table-condensed" data-bind="foreach: {data: dict.getChildren(), as: 'entry'}">
-    <tr><td data-bind="text: entry.getDisplayName()"></td><td data-bind="text: entry.getDisplayValue()"></td></tr>
+    <tr data-bind="click: entry.toggleCollapse"><td data-bind="text: entry.getDisplayName()"></td><td data-bind="text: entry.getDisplayValue()"></td></tr>
+    <tr data-bind="visible: !entry.contentCollapsed()"><td colspan="2"><dictionary-browser params="value: entry.content"></dictionary-browser></td></tr>
 </table>
diff --git a/sacredboard/static/scripts/runs/dictionaryBrowser.js b/sacredboard/static/scripts/runs/dictionaryBrowser.js
@@ -3,11 +3,18 @@ define(["knockout", "jquery", "escapeHtml", "text!runs/dictionaryBrowser.html"],
     function (ko, $, escapeHtml, htmlTemplate) {
         ko.components.register("dictionary-browser", {
             viewModel: function (params) {
-                this.dict = new DictEntry("", params.value);
                 this.escape = escapeHtml;
+                this.dict = new DictEntry("", params.value);
 
                 function DictEntry(name, value) {
                     var self = this;
+                    this.value = value;
+                    this.contentCollapsed = ko.observable(true);
+                    this.toggleCollapse = function () {
+                        if (self.hasChildren()) {
+                            self.contentCollapsed(!self.contentCollapsed());
+                        }
+                    };
                     this.hasChildren = function () {
                         return typeof value == "object";
                     };
@@ -27,12 +34,15 @@ define(["knockout", "jquery", "escapeHtml", "text!runs/dictionaryBrowser.html"],
                     };
                     this.getDisplayValue = function () {
                         if (value instanceof Array) {
-                            return value.join(", ");
+                            return "[" + value.join(", ") + "]";
                         } else {
                             return value.toString();
                         }
                     };
+
+                    this.content = value;
                 }
+                DictEntry.prototype.EMPTY = "";
             },
             template: htmlTemplate
         });