Skip to content

Commit 9389c94

Browse files
ArneTRArneTR
authored
GMT color via own commit hash (#634)
* GMT can now sort via own commit hash * Clicking now shows proper fixed place menu
1 parent 7167f87 commit 9389c94

File tree

3 files changed

+33
-18
lines changed

3 files changed

+33
-18
lines changed

‎api/api_helpers.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ def get_timeline_query(uri, filename, machine_id, branch, metrics, phase, start_
163163
query = f"""
164164
SELECT
165165
r.id, r.name, r.created_at, p.metric, p.detail_name, p.phase,
166-
p.value, p.unit, r.commit_hash, r.commit_timestamp,
166+
p.value, p.unit, r.commit_hash, r.commit_timestamp, r.gmt_hash,
167167
row_number() OVER () AS row_num
168168
FROM runs as r
169169
LEFT JOIN phase_stats as p ON

‎frontend/js/timeline.js

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ function* colorIterator() {
3939
}
4040
}
4141

42-
const generateColoredValues = (values) => {
42+
const generateColoredValues = (values, key) => {
4343
const color_iterator = colorIterator()
44-
let last_commit_hash = null
44+
let last_hash = null
4545
let color = null;
4646
return values.map((value) => {
47-
if(last_commit_hash != value.commit_hash) {
48-
last_commit_hash = value.commit_hash
47+
if(last_hash != value[key]) {
48+
last_hash = value[key]
4949
color = color_iterator.next().value
5050
}
5151
return {value: value.value, itemStyle: {color: color}}
@@ -159,15 +159,15 @@ const loadCharts = async () => {
159159
let prun_id = null
160160

161161
phase_stats_data.forEach( (data) => {
162-
let [run_id, run_name, created_at, metric_name, detail_name, phase, value, unit, commit_hash, commit_timestamp] = data
162+
let [run_id, run_name, created_at, metric_name, detail_name, phase, value, unit, commit_hash, commit_timestamp, gmt_hash] = data
163163

164164

165165
if (series[`${metric_name} - ${detail_name}`] == undefined) {
166166
series[`${metric_name} - ${detail_name}`] = {labels: [], values: [], notes: [], unit: unit, metric_name: metric_name, detail_name: detail_name}
167167
}
168168

169169
series[`${metric_name} - ${detail_name}`].labels.push(commit_timestamp)
170-
series[`${metric_name} - ${detail_name}`].values.push({value: value, commit_hash: commit_hash})
170+
series[`${metric_name} - ${detail_name}`].values.push({value: value, commit_hash: commit_hash, gmt_hash: gmt_hash})
171171
series[`${metric_name} - ${detail_name}`].notes.push({
172172
run_name: run_name,
173173
created_at: created_at,
@@ -176,6 +176,7 @@ const loadCharts = async () => {
176176
phase: phase,
177177
run_id: run_id,
178178
prun_id: prun_id,
179+
gmt_hash: gmt_hash,
179180
})
180181

181182
prun_id = run_id
@@ -203,7 +204,7 @@ const loadCharts = async () => {
203204

204205
const chart_instance = echarts.init(element);
205206

206-
const my_values = generateColoredValues(series[my_series].values);
207+
const my_values = generateColoredValues(series[my_series].values, $('.radio-coloring:checked').val());
207208

208209
let data_series = [{
209210
name: my_series,
@@ -221,28 +222,25 @@ const loadCharts = async () => {
221222
let options = getLineBarChartOptions([], series[my_series].labels, data_series, 'Time', series[my_series].unit, 'category', null, false, null, true, false, true);
222223

223224
options.tooltip = {
224-
trigger: 'item',
225+
triggerOn: 'click',
225226
formatter: function (params, ticket, callback) {
226227
if(series[params.seriesName]?.notes == null) return; // no notes for the MovingAverage
227228
return `<strong>${series[params.seriesName].notes[params.dataIndex].run_name}</strong><br>
229+
run_id: <a href="/stats.html?id=${series[params.seriesName].notes[params.dataIndex].run_id}" target="_blank">${series[params.seriesName].notes[params.dataIndex].run_id}</a><br>
228230
date: ${series[params.seriesName].notes[params.dataIndex].created_at}<br>
229231
metric_name: ${params.seriesName}<br>
230232
phase: ${series[params.seriesName].notes[params.dataIndex].phase}<br>
231233
value: ${numberFormatter.format(series[params.seriesName].values[params.dataIndex].value)}<br>
232234
commit_timestamp: ${series[params.seriesName].notes[params.dataIndex].commit_timestamp}<br>
233-
commit_hash: ${series[params.seriesName].notes[params.dataIndex].commit_hash}<br>
235+
commit_hash: <a href="${$("#uri").text()}/commit/${series[params.seriesName].notes[params.dataIndex].commit_hash}" target="_blank">${series[params.seriesName].notes[params.dataIndex].commit_hash}</a><br>
236+
gmt_hash: <a href="https://github.com/green-coding-berlin/green-metrics-tool/commit/${series[params.seriesName].notes[params.dataIndex].gmt_hash}" target="_blank">${series[params.seriesName].notes[params.dataIndex].gmt_hash}</a><br>
237+
234238
<br>
235-
<i>Click to diff measurement with previous</i>
239+
👉 <a href="/compare.html?ids=${series[params.seriesName].notes[params.dataIndex].run_id},${series[params.seriesName].notes[params.dataIndex].prun_id}" target="_blank">Diff with previous run</a>
236240
`;
237241
}
238242
};
239243

240-
chart_instance.on('click', function (params) {
241-
if(params.componentType != 'series') return; // no notes for the MovingAverage
242-
window.open(`/compare.html?ids=${series[params.seriesName].notes[params.dataIndex].run_id},${series[params.seriesName].notes[params.dataIndex].prun_id}`, '_blank');
243-
244-
});
245-
246244
options.dataZoom = {
247245
show: false,
248246
start: 0,

‎frontend/timeline.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<link rel="stylesheet" type="text/css" href="/css/green-coding.css">
3838
<style type="text/css">
3939
.hide-for-single-stats { display: none !important; }
40+
.statistics-chart div { pointer-events: all !important }
4041
</style>
4142
</head>
4243
<body class="preload">
@@ -195,6 +196,21 @@ <h4>What is Timeline View?</h4>
195196
<i class="info circle icon"></i> Will not affect badge
196197
</div>
197198
</div>
199+
<div class="inline fields">
200+
<label>Coloring:</label>
201+
<div class="field">
202+
<div class="ui radio checkbox">
203+
<input class="radio-coloring" id="coloring-commit_hash" type="radio" name="coloring" value="commit_hash" checked>
204+
<label for="coloring-commit_hash">Software commit hash</label>
205+
</div>
206+
</div>
207+
<div class="field">
208+
<div class="ui radio checkbox">
209+
<input class="radio-coloring" id="coloring-gmt_hash" type="radio" name="coloring" value="gmt_hash">
210+
<label for="coloring-gmt_hash">GMT commit hash</label>
211+
</div>
212+
</div>
213+
</div>
198214
<div class="three fields">
199215
<div class="field">
200216
<label>Start date</label>
@@ -233,7 +249,8 @@ <h4>What is Timeline View?</h4>
233249
<div class="header">
234250
Graph Info
235251
</div>
236-
<p>Graphs show every measurement as a bar. We color the bars according to the commit timestamp and change the color for every new commit. After some time the color repeats ...</p>
252+
<p>Graphs show every measurement as a bar. We color the bars according to the commit timestamp and change the color for every new commit (You can also change to color by the GMT tool hash). After some time the color repeats ...</p>
253+
<p>To show details click on the bars! A new menu will appear.</p>
237254
</div>
238255
</div>
239256
<div class="ui two cards" id="api-loader">

0 commit comments

Comments
 (0)