1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../tf-graph-loader/tf-graph-loader.html">
<link rel="import" href="../tf-graph-board/tf-graph-board.html">
<link rel="import" href="../tf-graph/tf-graph-controls.html">
<link rel="import" href="../tf-dashboard-common/warning-style.html">
<!--
tf-graph-dashboard displays a graph from a TensorFlow run.
It has simple behavior: Creates a url-generator and run-generator
to talk to the backend, and then passes the runsWithGraph (list of runs with
associated graphs) along with the url generator into tf-graph-board for display.
If there are multiple runs with graphs, the first run's graph is shown
by default. The user can select a different run from a dropdown menu.
-->
<dom-module id="tf-graph-dashboard">
<template>
<div id="plumbing">
<tf-url-generator
out-runs-url="{{_runsUrl}}"
out-graph-url-generator="{{_graphUrlGen}}"
id="urlGenerator"
></tf-url-generator>
<tf-run-generator
id="runGenerator"
url="[[_runsUrl]]"
out-runs-with-graph="{{_runsWithGraph}}"
/></tf-run-generator>
</div>
<template is="dom-if" if="[[_datasetsEmpty(_datasets)]]">
<div class="warning">
<p>
No graph definition files were found.
</p>
<p>
To store a graph, create a
<code>tf.python.training.summary_io.SummaryWriter</code>
and pass the graph either via the constructor, or by calling its
<code>add_graph()</code> method.
</p>
</div>
</template>
<template is="dom-if" if="[[!_datasetsEmpty(_datasets)]]">
<tf-dashboard-layout>
<div class="sidebar">
<tf-graph-controls id="controls"
color-by-params="[[_colorByParams]]"
has-stats="[[_hasStats]]"
color-by="{{_colorBy}}",
datasets="[[_datasets]]",
selected-dataset="{{_selectedDataset}}"
selected-file="{{_selectedFile}}"
></tf-graph-controls>
<tf-graph-loader id="loader"
datasets="[[_datasets]]",
selected-dataset="[[_selectedDataset]]"
selected-file="[[_selectedFile]]"
out-graph-hierarchy="{{_graphHierarchy}}"
out-graph="{{_graph}}"
out-graph-name="{{_graphName}}"
has-stats="{{_hasStats}}"
progress="{{_progress}}"
></tf-graph-loader>
</div>
<div class="center">
<tf-graph-board id="graphboard"
graph-hierarchy="[[_graphHierarchy]]"
graph="[[_graph]]"
has-stats="[[_hasStats]]"
graph-name="[[_graphName]]"
progress="[[_progress]]"
color-by="[[_colorBy]]"
color-by-params="{{_colorByParams}}">
</tf-graph-board>
</div>
</template>
<style>
:host /deep/ {
font-family: 'Roboto', sans-serif;
}
.center {
height: 100%;
}
</style>
<style include="warning-style"></style>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'tf-graph-dashboard',
properties: {
_runsWithGraph: Array,
_datasets: {
type: Object,
computed: '_getDatasets(_runsWithGraph, _graphUrlGen)'
}
},
_getDatasets: function(runsWithGraph, graphUrlGen) {
return _.map(runsWithGraph, function(runName) {
return {
name: runName,
path: graphUrlGen(runName)
};
});
},
_datasetsEmpty: function(datasets) {
return !datasets || !datasets.length;
}
});
})();
</script>
|
