/
index.js
82 lines (74 loc) · 2.68 KB
/
index.js
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
import React from 'react';
import $ from 'jquery';
import Dygraph from 'dygraphs';
export default class Model extends React.Component {
static propTypes = {
model: React.PropTypes.object.isRequired,
metrics: React.PropTypes.array.isRequired
}
constructor(props) {
super(props);
this.graphs = {};
}
componentDidMount() {
this.graphs = this.props.metrics.reduce((graphsMap, metricName) => {
graphsMap[metricName] = new Dygraph(
$(this.refs.container).find('.graph-' + metricName)[0],
this.props.model.metricTimeseries[metricName],
{
drawPoints: true,
valueRange: [0, 5],
labels: ['batch', metricName]
}
);
return graphsMap;
}, {});
}
render() {
const model = this.props.model;
this.updateGraph(model);
return <div className='model-container' ref='container'>
<div className='model-name'>Model: <b>{model.model.id}</b></div>
<div className='row'>
{
this.props.metrics.map((metricName) => (
<div className={'graph-' + metricName + '-container graph-container col-md-6'} key={metricName}>
<div className='graph-title panel-label'>{metricName}</div>
<div className={'graph-' + metricName}></div>
</div>
))
}
<div className='config-display col-md-6'>
<div className='panel-label'>
Training Config
</div>
<div>
<pre>
{
JSON.stringify(model.trainConfig, null, 4)
}
</pre>
</div>
</div>
<div className='config-display col-md-6'>
<div className='panel-label'>
Keras Config
</div>
<div>
<pre>
{
JSON.stringify(model.kerasConfig, null, 4)
}
</pre>
</div>
</div>
</div>
</div>;
}
updateGraph(model) {
return this.props.metrics.map((metricName) => (
this.graphs[metricName] &&
this.graphs[metricName].updateOptions({ 'file': model.metricTimeseries[metricName] })
));
}
}