ui: Speed up thread state track a little
Change-Id: Ic6800bd0990c9bd37c7debfa6aad7ec7cee6c3bb
diff --git a/ui/src/frontend/colorizer.ts b/ui/src/frontend/colorizer.ts
index 5fa6681..f4c5780 100644
--- a/ui/src/frontend/colorizer.ts
+++ b/ui/src/frontend/colorizer.ts
@@ -63,21 +63,40 @@
return (128 + (32 * cpu)) % 256;
}
-export function colorForState(state: string): Color {
+const DARK_GREEN: Color = {
+ c: 'dark green',
+ h: 120,
+ s: 44,
+ l: 34
+};
+const LIME_GREEN: Color = {
+ c: 'lime green',
+ h: 75,
+ s: 55,
+ l: 47
+};
+const LIGHT_GREY: Color = {
+ c: 'light grey',
+ h: 0,
+ s: 0,
+ l: 87
+};
+
+export function colorForState(state: string): Readonly<Color> {
switch (state) {
case 'Running':
case 'Busy':
- return {c: 'dark green', h: 120, s: 44, l: 34};
+ return DARK_GREEN;
case 'Runnable':
case 'R':
case 'R+':
- return {c: 'lime green', h: 75, s: 55, l: 47};
+ return LIME_GREEN;
default:
- return {c: 'light grey', h: 0, s: 0, l: 87};
+ return LIGHT_GREY;
}
}
-export function colorForTid(tid: number) {
+export function colorForTid(tid: number): Color {
const colorIdx = hash(tid.toString(), MD_PALETTE.length);
return Object.assign({}, MD_PALETTE[colorIdx]);
}
diff --git a/ui/src/tracks/thread_state/frontend.ts b/ui/src/tracks/thread_state/frontend.ts
index e14aab6..cae38f2 100644
--- a/ui/src/tracks/thread_state/frontend.ts
+++ b/ui/src/tracks/thread_state/frontend.ts
@@ -54,6 +54,11 @@
if (data === undefined) return; // Can't possibly draw anything.
+ const shouldGroupBusyStates = groupBusyStates(data.resolution);
+
+ ctx.textAlign = 'center';
+ ctx.font = '10px Roboto Condensed';
+
for (let i = 0; i < data.starts.length; i++) {
const tStart = data.starts[i];
const tEnd = data.ends[i];
@@ -69,18 +74,16 @@
const color = colorForState(state);
ctx.fillStyle = `hsl(${color.h},${color.s}%,${color.l}%)`;
let rectWidth = rectEnd - rectStart;
- if (groupBusyStates(data.resolution) && rectWidth < 1) {
+ if (shouldGroupBusyStates && rectWidth < 1) {
rectWidth = 1;
}
ctx.fillRect(rectStart, MARGIN_TOP, rectWidth, RECT_HEIGHT);
- // Don't render text when we have less than 5px to play with.
- if (rectWidth < 5) continue;
- ctx.textAlign = 'center';
+ // Don't render text when we have less than 10px to play with.
+ if (rectWidth < 10) continue;
const title = cropText(translateState(state), charWidth, rectWidth);
const rectXCenter = rectStart + rectWidth / 2;
ctx.fillStyle = color.l < 80 ? '#fff' : '#404040';
- ctx.font = '10px Roboto Condensed';
ctx.fillText(title, rectXCenter, MARGIN_TOP + RECT_HEIGHT / 2 + 3);
}
}