improve frontend (#60)

* improve frontend Signed-off-by: YujiOshima <[email protected]> * add sample config for TFBoard ingress host Signed-off-by: YujiOshima <[email protected]>
kubeflow · Apr 20, 2018 · dd6c87e · dd6c87e
1 parent 637a4be
commit dd6c87e
Show file tree

Hide file tree

Showing 11 changed files with 356 additions and 170 deletions.
diff --git a/manager/main.go b/manager/main.go
@@ -33,6 +33,7 @@ const (
 )
 
 var workerType = flag.String("w", "kubernetes", "Worker Type")
+var ingressHost = flag.String("i", "kube-cluster.example.net", "Ingress host for TensorBoard visualize")
 var dbIf kdb.VizierDBInterface
 
 type studyCh struct {
@@ -148,7 +149,7 @@ func (s *server) trialIteration(conf *pb.StudyConfig, studyID string, sCh studyC
 						return err
 					}
 					for _, t := range r.Trials {
-						err = tbif.SpawnTensorBoard(studyID, t.TrialId, namespace, conf.Mount)
+						err = tbif.SpawnTensorBoard(studyID, t.TrialId, conf.Name, namespace, conf.Mount, ingressHost)
 						if err != nil {
 							log.Printf("SpawnTB failed %v", err)
 							return err

diff --git a/manager/modelstore/modeldb.go b/manager/modelstore/modeldb.go
@@ -82,6 +82,11 @@ func (m *ModelDB) SaveModel(in *api.SaveModelRequest) error {
 	hs := make([]*modeldb.HyperParameter, len(in.Model.Parameters))
 	for i := range in.Model.Parameters {
 		hs[i] = &modeldb.HyperParameter{Name: in.Model.Parameters[i].Name, Value: in.Model.Parameters[i].Value}
+		if in.Model.Parameters[i].ParameterType == api.ParameterType_CATEGORICAL {
+			hs[i].Type = "String"
+		} else {
+			hs[i].Type = "Number"
+		}
 	}
 
 	dpath := "Unset"

diff --git a/manager/visualise/tensorboard/tensorboardIF.go b/manager/visualise/tensorboard/tensorboardIF.go
@@ -21,7 +21,7 @@ func initk8sCl() (*kubernetes.Clientset, error) {
 	return kubernetes.NewForConfig(config)
 }
 
-func SpawnTensorBoard(sid string, tid string, namespace string, mount *api.MountConf) error {
+func SpawnTensorBoard(sid string, tid string, studyname string, namespace string, mount *api.MountConf, inhost *string) error {
 	if mount == nil {
 		return nil
 	}
@@ -57,7 +57,7 @@ func SpawnTensorBoard(sid string, tid string, namespace string, mount *api.Mount
 	dep.Spec.Template.ObjectMeta.Labels["TrialID"] = tid
 	dep.Spec.Template.ObjectMeta.Labels["StudyID"] = sid
 	dep.Spec.Template.Spec.Containers[0].Args = append(dep.Spec.Template.Spec.Containers[0].Args, "--logdir="+mount.Path+"/logs/"+sid+"_"+tid)
-	dep.Spec.Template.Spec.Containers[0].Args = append(dep.Spec.Template.Spec.Containers[0].Args, "--path_prefix=/tensorboard/"+sid+"/"+tid)
+	dep.Spec.Template.Spec.Containers[0].Args = append(dep.Spec.Template.Spec.Containers[0].Args, "--path_prefix=/tensorboard/"+studyname+"/"+tid)
 	dep.Spec.Template.Spec.Volumes = append(dep.Spec.Template.Spec.Volumes, apiv1.Volume{
 		Name: "pvc-mount-point",
 		VolumeSource: apiv1.VolumeSource{
@@ -80,7 +80,8 @@ func SpawnTensorBoard(sid string, tid string, namespace string, mount *api.Mount
 	svc.Spec.Selector["StudyID"] = sid
 
 	ing.ObjectMeta.Name = tname
-	ing.Spec.Rules[0].IngressRuleValue.HTTP.Paths[0].Path = "/tensorboard/" + sid + "/" + tid
+	ing.Spec.Rules[0].Host = *inhost
+	ing.Spec.Rules[0].IngressRuleValue.HTTP.Paths[0].Path = "/tensorboard/" + studyname + "/" + tid
 	ing.Spec.Rules[0].IngressRuleValue.HTTP.Paths[0].Backend.ServiceName = tname
 
 	kcl, _ := initk8sCl()

diff --git a/manifests/vizier/core/deployment.yaml b/manifests/vizier/core/deployment.yaml
@@ -22,6 +22,8 @@ spec:
         args:
           - "-w"
           - "dlk"
+          - "-i"
+          - "k-cluster.example.net"
         ports:
         - name: api
           containerPort: 6789

diff --git a/modeldb/frontend/public/css/models.css b/modeldb/frontend/public/css/models.css
@@ -964,35 +964,86 @@ li.json-kv.ui-draggable-dragging {
   border: 1px solid #D9E0E8;
 }
 
-svg {
+.ExpPara {
+  position:relative
+}
+.parcoords {
+  display: block;
+}
+
+.parcoords svg,
+.parcoords canvas {
   font: 10px sans-serif;
+  position: absolute;
 }
 
-.background path {
+.parcoords canvas {
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+.axis .title {
+  font-size: 10px;
+  transform: rotate(-21deg) translate(-5px,-6px);
+  fill: #222;
+}
+
+.axis line,
+.axis path {
   fill: none;
-  stroke: #ddd;
-  shape-rendering: crispEdges;
+  stroke: #ccc;
+  stroke-width: 1px;
+}
+
+.axis .tick text {
+  fill: #222;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.axis.manufac_name .tick text,
+.axis.food_group .tick text {
+  opacity: 1;
 }
 
-.foreground path {
+.axis:hover line,
+.axis:hover path,
+.axis.active line,
+.axis.active path {
   fill: none;
-  stroke: steelblue;
+  stroke: #222;
+  stroke-width: 1px;
+}
+
+.axis:hover .title {
+  font-weight: bold;
+}
+
+.axis:hover .tick text {
+  opacity: 1;
+}
+
+.axis.active .title {
+  font-weight: bold;
+}
+
+.axis.active .tick text {
+  opacity: 1;
+  font-weight: bold;
 }
 
 .brush .extent {
   fill-opacity: .3;
   stroke: #fff;
-  shape-rendering: crispEdges;
+  stroke-width: 1px;
 }
 
-.axis line,
-.axis path {
-  fill: none;
-  stroke: #000;
-  shape-rendering: crispEdges;
-}
-
-.axis text {
-  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
-  cursor: move;
+pre {
+  width: 100%;
+  height: 300px;
+  margin: 6px 12px;
+  tab-size: 40;
+  font-size: 10px;
+  overflow: auto;
+  line-height: 14px;
 }
diff --git a/modeldb/frontend/public/js/lib/d3.v5.min.js b/modeldb/frontend/public/js/lib/d3.v5.min.js
diff --git a/modeldb/frontend/public/js/model.js b/modeldb/frontend/public/js/model.js
@@ -16,8 +16,8 @@ $(function() {
         projectId.append($('<div class="kv">Project ID: ' + model["Project ID"] + '</div>'));
         $('.model-section.model-ids').append(projectId);
 
-        var tfblink = $('<a href="/tensorboard/' + model["Study ID"] + '/'+ model["Trial ID"] + '/" target="_blank"></a>');
-        tfblink.append($('<div class="kv">Trial ID: ' + model["Trial ID"] + '</div>'));
+        var tfblink = $('<a href="/tensorboard/' + model["Spec Tag"].split(":")[0] + '/'+ model["Spec Tag"].split(":")[1] + '/" target="_blank"></a>');
+        tfblink.append($('<div class="kv">Trial ID: ' + model["Spec Tag"].split(":")[1] + '</div>'));
         $('.model-section.model-ids').append(tfblink);
 
         // update link in breadcrumb to point to project models
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,8 @@ spec: @@
             args:
               - "-w"
               - "dlk"
+              - "-i"
+              - "k-cluster.example.net"
             ports:
             - name: api
               containerPort: 6789
@@ Expand Down @@