Skip to content

Commit e15e819

Browse files
KobzolKobzol
committed
Do not pre-format deltas
1 parent 329e45d commit e15e819

File tree

2 files changed

+129
-114
lines changed

2 files changed

+129
-114
lines changed

‎site/frontend/src/pages/detailed-query/page.vue

Lines changed: 106 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<script setup lang="ts">
2-
import {ref, onMounted, Ref, computed} from "vue";
1+
<script setup lang="tsx">
2+
import {h, ref, Ref, computed} from "vue";
33
import {getUrlParams, changeUrl} from "../../utils/navigation";
44
import {postMsgpack} from "../../utils/requests";
55
import {SELF_PROFILE_DATA_URL} from "../../urls";
@@ -11,6 +11,7 @@ import {
1111
createDownloadLinksData,
1212
createTableData,
1313
createArtifactData,
14+
DeltaData,
1415
} from "./utils";
1516
1617
const loading = ref(true);
@@ -54,71 +55,83 @@ const tableData = computed(() => {
5455
aValue = a.timeSeconds;
5556
bValue = b.timeSeconds;
5657
// Use percentage change as secondary sort for equal absolute values
57-
aSecondary = a.timeDelta.hasData ? Math.abs(a.timeDelta.percentage) : 0;
58-
bSecondary = b.timeDelta.hasData ? Math.abs(b.timeDelta.percentage) : 0;
58+
aSecondary =
59+
a.timeDelta !== null ? Math.abs(a.timeDelta.percentage) : 0;
60+
bSecondary =
61+
b.timeDelta !== null ? Math.abs(b.timeDelta.percentage) : 0;
5962
break;
6063
case "executions": // Executions
6164
aValue = a.executions;
6265
bValue = b.executions;
6366
// Use percentage change as secondary sort for equal absolute values
64-
aSecondary = a.executionsDelta.hasData
65-
? Math.abs(a.executionsDelta.percentage)
66-
: 0;
67-
bSecondary = b.executionsDelta.hasData
68-
? Math.abs(b.executionsDelta.percentage)
69-
: 0;
67+
aSecondary =
68+
a.executionsDelta !== null
69+
? Math.abs(a.executionsDelta.percentage)
70+
: 0;
71+
bSecondary =
72+
b.executionsDelta !== null
73+
? Math.abs(b.executionsDelta.percentage)
74+
: 0;
7075
break;
7176
case "incrementalLoading": // Incremental loading (s)
7277
aValue = a.incrementalLoading;
7378
bValue = b.incrementalLoading;
7479
// Use percentage change as secondary sort for equal absolute values
75-
aSecondary = a.incrementalLoadingDelta.hasData
76-
? Math.abs(a.incrementalLoadingDelta.percentage)
77-
: 0;
78-
bSecondary = b.incrementalLoadingDelta.hasData
79-
? Math.abs(b.incrementalLoadingDelta.percentage)
80-
: 0;
80+
aSecondary =
81+
a.incrementalLoadingDelta !== null
82+
? Math.abs(a.incrementalLoadingDelta.percentage)
83+
: 0;
84+
bSecondary =
85+
b.incrementalLoadingDelta !== null
86+
? Math.abs(b.incrementalLoadingDelta.percentage)
87+
: 0;
8188
break;
8289
case "timePercent": // Time (%)
8390
aValue = a.timePercent.value;
8491
bValue = b.timePercent.value;
8592
break;
8693
case "timeDelta": // Time delta
87-
aValue = a.timeDelta.hasData ? a.timeDelta.value : -Infinity;
88-
bValue = b.timeDelta.hasData ? b.timeDelta.value : -Infinity;
94+
aValue = a.timeDelta !== null ? a.timeDelta.delta : -Infinity;
95+
bValue = b.timeDelta !== null ? b.timeDelta.delta : -Infinity;
8996
// Use percentage as secondary sort for equal delta values
90-
aSecondary = a.timeDelta.hasData ? Math.abs(a.timeDelta.percentage) : 0;
91-
bSecondary = b.timeDelta.hasData ? Math.abs(b.timeDelta.percentage) : 0;
97+
aSecondary =
98+
a.timeDelta !== null ? Math.abs(a.timeDelta.percentage) : 0;
99+
bSecondary =
100+
b.timeDelta !== null ? Math.abs(b.timeDelta.percentage) : 0;
92101
break;
93102
case "executionsDelta": // Executions delta
94-
aValue = a.executionsDelta.hasData
95-
? a.executionsDelta.value
96-
: -Infinity;
97-
bValue = b.executionsDelta.hasData
98-
? b.executionsDelta.value
99-
: -Infinity;
103+
aValue =
104+
a.executionsDelta !== null ? a.executionsDelta.delta : -Infinity;
105+
bValue =
106+
b.executionsDelta !== null ? b.executionsDelta.delta : -Infinity;
100107
// Use percentage as secondary sort for equal delta values
101-
aSecondary = a.executionsDelta.hasData
102-
? Math.abs(a.executionsDelta.percentage)
103-
: 0;
104-
bSecondary = b.executionsDelta.hasData
105-
? Math.abs(b.executionsDelta.percentage)
106-
: 0;
108+
aSecondary =
109+
a.executionsDelta !== null
110+
? Math.abs(a.executionsDelta.percentage)
111+
: 0;
112+
bSecondary =
113+
b.executionsDelta !== null
114+
? Math.abs(b.executionsDelta.percentage)
115+
: 0;
107116
break;
108117
case "incrementalLoadingDelta": // Incremental loading delta
109-
aValue = a.incrementalLoadingDelta.hasData
110-
? a.incrementalLoadingDelta.value
111-
: -Infinity;
112-
bValue = b.incrementalLoadingDelta.hasData
113-
? b.incrementalLoadingDelta.value
114-
: -Infinity;
118+
aValue =
119+
a.incrementalLoadingDelta !== null
120+
? a.incrementalLoadingDelta.delta
121+
: -Infinity;
122+
bValue =
123+
b.incrementalLoadingDelta !== null
124+
? b.incrementalLoadingDelta.delta
125+
: -Infinity;
115126
// Use percentage as secondary sort for equal delta values
116-
aSecondary = a.incrementalLoadingDelta.hasData
117-
? Math.abs(a.incrementalLoadingDelta.percentage)
118-
: 0;
119-
bSecondary = b.incrementalLoadingDelta.hasData
120-
? Math.abs(b.incrementalLoadingDelta.percentage)
121-
: 0;
127+
aSecondary =
128+
a.incrementalLoadingDelta !== null
129+
? Math.abs(a.incrementalLoadingDelta.percentage)
130+
: 0;
131+
bSecondary =
132+
b.incrementalLoadingDelta !== null
133+
? Math.abs(b.incrementalLoadingDelta.percentage)
134+
: 0;
122135
break;
123136
default:
124137
aValue = a.label;
@@ -237,6 +250,46 @@ function getSortAttributes(columnName: string) {
237250
onMounted(async () => {
238251
await loadData();
239252
});
253+
function DeltaComponent({delta}: {delta: DeltaData | null}) {
254+
if (delta === null) {
255+
return <span>-</span>;
256+
}
257+
258+
let {from, percentage, isIntegral} = delta;
259+
const to = from + delta.delta;
260+
261+
let classes: string;
262+
if (percentage > 1) {
263+
classes = "positive";
264+
} else if (percentage < -1) {
265+
classes = "negative";
266+
} else {
267+
classes = "neutral";
268+
}
269+
if (Math.abs(delta.delta) <= 0.05) {
270+
classes = "neutral";
271+
}
272+
let text: string;
273+
if (isIntegral) {
274+
text = delta.delta.toString();
275+
} else {
276+
text = delta.delta.toFixed(3);
277+
}
278+
if (percentage != Infinity && percentage != -Infinity) {
279+
text += `(${percentage.toFixed(1)}%)`.padStart(10, " ");
280+
} else {
281+
text += `-`.padStart(10, " ");
282+
}
283+
284+
const title = `${from.toFixed(3)} to ${to.toFixed(3)} ≈ ${delta.delta.toFixed(
285+
3
286+
)}`;
287+
return (
288+
<span class={classes} title={title}>
289+
{text}
290+
</span>
291+
);
292+
}
240293
</script>
241294

242295
<template>
@@ -438,14 +491,17 @@ onMounted(async () => {
438491
{{ row.timePercent.formatted }}
439492
</td>
440493
<td>{{ row.timeSeconds.toFixed(3) }}</td>
441-
<td class="delta" v-html="row.timeDelta.formatted"></td>
494+
<td class="delta">
495+
<DeltaComponent :delta="row.timeDelta" />
496+
</td>
442497
<td>{{ row.executions }}</td>
443-
<td class="delta" v-html="row.executionsDelta.formatted"></td>
498+
<td class="delta">
499+
<DeltaComponent :delta="row.executionsDelta" />
500+
</td>
444501
<td class="incr">{{ row.incrementalLoading.toFixed(3) }}</td>
445-
<td
446-
class="incr delta"
447-
v-html="row.incrementalLoadingDelta.formatted"
448-
></td>
502+
<td class="incr delta">
503+
<DeltaComponent :delta="row.incrementalLoadingDelta" />
504+
</td>
449505
</tr>
450506
</tbody>
451507
</table>

‎site/frontend/src/pages/detailed-query/utils.ts

Lines changed: 23 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,7 @@ export function toSeconds(time: number): number {
4141
return time / 1000000000;
4242
}
4343

44-
export function fmtDelta(
45-
to: number,
46-
delta: number,
47-
isIntegralDelta: boolean
48-
): string {
49-
return fmtDeltaWithData(to, delta, isIntegralDelta).formatted;
50-
}
51-
52-
export function fmtDeltaWithData(
44+
export function createDelta(
5345
to: number,
5446
delta: number,
5547
isIntegralDelta: boolean
@@ -59,37 +51,12 @@ export function fmtDeltaWithData(
5951
if (from == to) {
6052
pct = 0;
6153
}
62-
let classes;
63-
if (pct > 1) {
64-
classes = "positive";
65-
} else if (pct < -1) {
66-
classes = "negative";
67-
} else {
68-
classes = "neutral";
69-
}
70-
if (Math.abs(delta) <= 0.05) {
71-
classes = "neutral";
72-
}
73-
let text;
74-
if (isIntegralDelta) {
75-
text = delta.toString();
76-
} else {
77-
text = delta.toFixed(3);
78-
}
79-
if (pct != Infinity && pct != -Infinity) {
80-
text += `(${pct.toFixed(1)}%)`.padStart(10, " ");
81-
} else {
82-
text += `-`.padStart(10, " ");
83-
}
84-
const formatted = `<span class="${classes}" title="${from.toFixed(
85-
3
86-
)} to ${to.toFixed(3)} ≈ ${delta.toFixed(3)}">${text}</span>`;
8754

8855
return {
89-
value: delta,
56+
delta,
57+
from,
9058
percentage: pct,
91-
formatted,
92-
hasData: true,
59+
isIntegral: isIntegralDelta,
9360
};
9461
}
9562

@@ -247,23 +214,23 @@ export function createDownloadLinksData(selector: Selector | null): {
247214
return {baseLinks, newLinks, diffLink, localCommands};
248215
}
249216

250-
interface DeltaData {
251-
value: number;
217+
export interface DeltaData {
218+
from: number;
219+
delta: number;
252220
percentage: number;
253-
formatted: string;
254-
hasData: boolean;
221+
isIntegral: boolean;
255222
}
256223

257224
interface TableRowData {
258225
isTotal: boolean;
259226
label: string;
260227
timePercent: {value: number; formatted: string; title: string};
261228
timeSeconds: number;
262-
timeDelta: DeltaData;
229+
timeDelta: DeltaData | null;
263230
executions: number;
264-
executionsDelta: DeltaData;
231+
executionsDelta: DeltaData | null;
265232
incrementalLoading: number;
266-
incrementalLoadingDelta: DeltaData;
233+
incrementalLoadingDelta: DeltaData | null;
267234
}
268235

269236
export function createTableData(
@@ -294,28 +261,24 @@ export function createTableData(
294261
},
295262
timeSeconds: toSeconds(totals.self_time),
296263
timeDelta: totalsDelta
297-
? fmtDeltaWithData(
264+
? createDelta(
298265
toSeconds(totals.self_time),
299266
toSeconds(totalsDelta.self_time),
300267
false
301268
)
302-
: {value: 0, percentage: 0, formatted: "-", hasData: false},
269+
: null,
303270
executions: totals.invocation_count,
304271
executionsDelta: totalsDelta
305-
? fmtDeltaWithData(
306-
totals.invocation_count,
307-
totalsDelta.invocation_count,
308-
true
309-
)
310-
: {value: 0, percentage: 0, formatted: "-", hasData: false},
272+
? createDelta(totals.invocation_count, totalsDelta.invocation_count, true)
273+
: null,
311274
incrementalLoading: toSeconds(totals.incremental_load_time),
312275
incrementalLoadingDelta: totalsDelta
313-
? fmtDeltaWithData(
276+
? createDelta(
314277
toSeconds(totals.incremental_load_time),
315278
toSeconds(totalsDelta.incremental_load_time),
316279
false
317280
)
318-
: {value: 0, percentage: 0, formatted: "-", hasData: false},
281+
: null,
319282
});
320283

321284
// Add query data rows
@@ -338,28 +301,24 @@ export function createTableData(
338301
},
339302
timeSeconds: toSeconds(query.self_time),
340303
timeDelta: queryDelta
341-
? fmtDeltaWithData(
304+
? createDelta(
342305
toSeconds(query.self_time),
343306
toSeconds(queryDelta.self_time),
344307
false
345308
)
346-
: {value: 0, percentage: 0, formatted: "-", hasData: false},
309+
: null,
347310
executions: query.invocation_count,
348311
executionsDelta: queryDelta
349-
? fmtDeltaWithData(
350-
query.invocation_count,
351-
queryDelta.invocation_count,
352-
true
353-
)
354-
: {value: 0, percentage: 0, formatted: "-", hasData: false},
312+
? createDelta(query.invocation_count, queryDelta.invocation_count, true)
313+
: null,
355314
incrementalLoading: toSeconds(query.incremental_load_time),
356315
incrementalLoadingDelta: queryDelta
357-
? fmtDeltaWithData(
316+
? createDelta(
358317
toSeconds(query.incremental_load_time),
359318
toSeconds(queryDelta.incremental_load_time),
360319
false
361320
)
362-
: {value: 0, percentage: 0, formatted: "-", hasData: false},
321+
: null,
363322
});
364323
});
365324

0 commit comments

Comments
 (0)