update UI (kubeflow#255)

Signed-off-by: YujiOshima <yuji.oshima0x3fd@gmail.com>
lkpdn · Nov 20, 2018 · 63dc070 · 63dc070
1 parent e5e2dcd
commit 63dc070
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -91,9 +91,9 @@ In the Study config file, we define the feasible space of parameters and configu
 
 ## Web UI
 
-Katib provides a Web UI based on ModelDB(https://github.com/mitdbg/modeldb). The ingress setting is defined in [`manifests/modeldb/frontend/ingress.yaml`](manifests/modeldb/frontend/ingress.yaml).
-
-![katib-demo](https://user-images.githubusercontent.com/10014831/38241910-64fb0646-376e-11e8-8b98-c26e577f3935.gif)
+Katib provides a Web UI.
+You can visualize general trend of Hyper parameter space and each training history.
+![katibui](https://user-images.githubusercontent.com/10014831/48778081-a4388b80-ed17-11e8-938b-fc59a5d2e574.gif)
 
 ## CLI Documentation
 

diff --git a/cmd/ui/template/index.html b/cmd/ui/template/index.html
@@ -2,17 +2,30 @@
 <div class="container-fluid bg-active">
 <h1>Study List</h1>
     <div class="card-columns">
-        {{- with .StudyOverviews}}
-        {{- range .}}
-        <a href="/katib/{{.Id}}" class="card bg-secondary mb-3" style="max-width: 20rem;" >
-            <div class="card-header rounded">Study ID: {{.Id}}</div>
+        {{- range $k,$v := .StudySummarys}}
+        <div class="card text-white bg-secondary" >
             <div class="card-body rounded">
-                <h4 class="card-title">{{.Name}}</h4>
-                        <p class="card-text">Owner: {{.Owner}}
-                        </p>
+                <h4 class="card-title">{{$k}}</h4>
+                <p class="card-text"> 
+                <table class="table table-hover">
+                  <thead>
+                      <tr>
+                          <th scope="col">StudyID</th>
+                          <th scope="col">Owner</th>
+                      </tr>
+                  </thead>
+                  <tbody>
+                      {{- range $v}}
+                      <tr class="table-secondary">
+                          <td><a href="/katib/{{.StudyId}}">{{.StudyId}}</a></td>
+                          <td>{{.Owner}}</td>
+                      </tr>
+                      {{- end}}
+                  </tbody>
+                </table>
+                </p>
             </div>
-        </a>
-        {{- end}}
+        </div>
         {{- end}}
     </div>
 </div>

diff --git a/cmd/ui/template/parallelcood.js b/cmd/ui/template/parallelcood.js
@@ -92,10 +92,7 @@ ctx.globalAlpha = 0.15;
 ctx.lineWidth = 1.5;
 ctx.scale(devicePixelRatio, devicePixelRatio);
 
-var output = d3.select("#paracood")
-    .append("table")
-    .attr("class", "table table-hover")
-    .attr("id", "study-result")
+var output = d3.select("#result-table")
 
 var axes = svg.selectAll(".axis")
     .data(dimensions)
@@ -196,6 +193,9 @@ d3.csv("./{{.IDList.StudyId}}/csv", function(error, data) {
       .append("a")
       .attr("href", function(d) { return "/katib/{{.IDList.StudyId}}/"+d.key+"/"+d.value;})
       .text(function(d) { return d.value;});
+  jQuery(function($){
+        $("#result-table").DataTable();
+  });
   function project(d) {
     return dimensions.map(function(p,i) {
       // check if data element has property and contains a value
@@ -303,28 +303,24 @@ d3.csv("./{{.IDList.StudyId}}/csv", function(error, data) {
     ctx.clearRect(0,0,width,height);
     ctx.globalAlpha = d3.min([0.85/Math.pow(selected.length,0.3),1]);
     render(selected);
-
-    output.select("tbody").remove()
-    output.append("tbody")
-        .selectAll("tr")
-        .data(selected)
-        .enter()
-        .append("tr")
-        .selectAll("td")
-        .data(function(row) { return d3.entries(row); })
-        .enter()
-        .append("td")
-        .text(function(d) { 
-          if (d.key == "WorkerID" || d.key == "TrialID"){
-              return "";
-          } else {
-              return d.value;
-          }
-        })
-        .filter(function(d){ return d.key == "WorkerID" || d.key == "TrialID"}) 
-        .append("a")
-        .attr("href", function(d) { return "/katib/{{.IDList.StudyId}}/"+d.key+"/"+d.value;})
-        .text(function(d) { return d.value;});
+    var resultTable = $("#result-table").DataTable();
+    resultTable.rows().every( function () {
+        this.remove().draw();
+    });
+    var labels = d3.keys(data[0]);
+    var newtable = [];
+    for (var s in selected){
+        var l = [];
+        for (i in labels){
+            if (labels[i] == "WorkerID" || labels[i] == "TrialID"){
+                l.push("<a href=\"/katib/{{.IDList.StudyId}}/"+ labels[i] +"/"+selected[s][labels[i]]+"\">"+selected[s][labels[i]]+"</a>");
+            } else {
+                l.push(selected[s][labels[i]]);
+            }
+        }
+        newtable.push(l);
+    }
+    resultTable.rows.add(newtable).draw();
   }
 });
 

diff --git a/cmd/ui/template/study.html b/cmd/ui/template/study.html
@@ -2,6 +2,8 @@
 <link rel="stylesheet" href="/static/css/parallelcood.css"></link>
 <link rel="stylesheet" href="/static/css/profile.css"></link>
 <link rel="stylesheet" href="/static/css/loader.css"></link>
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
+<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
 <div class="container-fluid m-3">
     <h1>Study Info</h1>
     <ul class="nav nav-tabs">
@@ -129,8 +131,12 @@ <h4 class="card-title">Feasible Space</h4>
                     <div class="col-md-5">
                     </div>
                     <div class="container-fluid bg-active" id="paracood">
-                    {{ template "parallelcood" . }}
                     </div>
+                    <div class="container-fluid bg-active">
+                        <table id="result-table" class="table table-hover">
+                        </table>
+                    </div>
+                    {{ template "parallelcood" . }}
                 </div>
             </div>
         </div>

diff --git a/cmd/ui/template/trial.html b/cmd/ui/template/trial.html
@@ -6,10 +6,10 @@ <h1>Trial ID: {{.IDList.TrialId}}</h1>
             <h2>Parameter Set</h2>
             <table class="table table-hover">
                   <thead>
-                          <tr>
-                              <th scope="col">Name</th>
-                              <th scope="col">Value</th>
-                          </tr>
+                      <tr>
+                          <th scope="col">Name</th>
+                          <th scope="col">Value</th>
+                      </tr>
                   </thead>
                   <tbody>
                       {{- range .Trial.ParameterSet}}

diff --git a/cmd/ui/template/worker.html b/cmd/ui/template/worker.html
@@ -6,7 +6,7 @@
 <div class="container-fluid mr-3 ml-3">
     <h1>Worker ID: {{.IDList.WorkerId}}</h1>
     <div class="float-right">
-        <a class="btn btn-outline-info" href="/katib/{{.IDList.StudyId}}/csv" download="Worker-{{.IDList.WorkerId}}.csv" target="_blank"><i class="fa fa-download"></i>CSV Download</a>
+        <a class="btn btn-outline-info" href="/katib/{{.IDList.StudyId}}/WorkerID/{{.IDList.WorkerId}}/csv" download="Worker-{{.IDList.WorkerId}}.csv" target="_blank"><i class="fa fa-download"></i>CSV Download</a>
     </div>
     <button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="collapse" data-target="#param">
         TrialID {{.IDList.TrialId}}

diff --git a/pkg/ui/ui.go b/pkg/ui/ui.go
@@ -67,13 +67,26 @@ func (k *KatibUIHandler) Index(w http.ResponseWriter, r *http.Request) {
 		log.Printf("Get Study list failed %v", err)
 		return
 	}
+	type StudyNameStack struct {
+		StudyId string
+		Owner   string
+	}
 	type StudyListView struct {
-		IDList         *IDList
-		StudyOverviews []*api.StudyOverview
+		IDList        *IDList
+		StudySummarys map[string][]*StudyNameStack
+	}
+	slv := &StudyListView{
+		IDList:        &IDList{},
+		StudySummarys: make(map[string][]*StudyNameStack),
 	}
-	slv := StudyListView{
-		IDList:         &IDList{},
-		StudyOverviews: gslrep.StudyOverviews,
+	for _, so := range gslrep.StudyOverviews {
+		if _, ok := slv.StudySummarys[so.Name]; !ok {
+			slv.StudySummarys[so.Name] = []*StudyNameStack{}
+		}
+		slv.StudySummarys[so.Name] = append(slv.StudySummarys[so.Name], &StudyNameStack{
+			StudyId: so.Id,
+			Owner:   so.Owner,
+		})
 	}
 	t, err := template.ParseFiles("/template/layout.html", "/template/index.html", "/template/breadcrumb.html")
 	if err != nil {