Dynamically adjust the column widths (#926)

Instead of assuming each column has the width of the text `88:88:88`, we
now determine the largest string per column (based on unicode scalar
values) and adjust the column width accordingly. There is still a fixed
minimum width based on the string `88:88`, which ensures that the
columns don't switch sizes too often, especially if you start with empty
splits. We could've also chosen `8:88:88`, which would ensure there's no
column size change as you approach the hour mark. However, this would
increase the size of delta columns unnecessarily. So it's a little bit
of a trade-off.
This commit is contained in:
Christopher Serr
2024-06-09 18:05:53 +02:00
committed by GitHub
parent 97c741c5db
commit ba45f1759c
3 changed files with 13 additions and 8 deletions
+11 -6
View File
@@ -91,12 +91,17 @@ export class TimerView extends React.Component<Props, State> {
>
<Layout
getState={() => {
this.props.eventSink.updateLayoutState(
this.props.layout,
this.props.layoutState,
this.props.layoutUrlCache.imageCache,
);
this.props.layoutUrlCache.collect();
// The drag upload above causes the layout to be
// dropped. We need to wait for it to be replaced
// with the new layout.
if (this.props.layout.ptr !== 0) {
this.props.eventSink.updateLayoutState(
this.props.layout,
this.props.layoutState,
this.props.layoutUrlCache.imageCache,
);
this.props.layoutUrlCache.collect();
}
return this.props.layoutState;
}}
layoutUrlCache={this.props.layoutUrlCache}
+1 -1
View File
@@ -158,7 +158,7 @@ describe("Layout Rendering Tests", function () {
testRendering("default", "default", "________8AADVVVVAAAAAAAAAAAA____________AAAAAAAAAAAA____VVVVAAAA____AAAAVVVVAAAAAADgAAD_________");
testRendering("default", "pmw3", "b_gAb9-HV8AG__AHV_AG7kAGX-AGV-AOX8APX_gOX-AP28AO_-APX-APXeAOUQAOX-AOX_gP_-AfAAAAAADgAAD_q97_____");
testRendering("splits_two_rows", "celeste", "b4AAYAAH________bwAA4AAHb-AA4AAHb-AAYAAHbwAA____bwAAYAAH_9VV____b_AAYAAH__wA____b_AAYAAPb8AAYAAP");
testRendering("splits_with_labels", "celeste", "AAAAAABMAADnAADnAABH________WAAHfwAHfwAHTwAHVVVVAAAA0gAH_wAH_wAH3wAH_________IAP34AP34AP38APAAAA");
testRendering("splits_with_labels", "celeste", "AAAAAAA8AAA3AAA3AAA3________WAAHfwAHfwAHTwAHVVVVAAAA0gAH_wAH_wAH3wAH_________IAP34AP34AP38APAAAA");
testRendering("title_centered_no_game_icon", "celeste", "________MzMzADAAADwAADwA________VX1VADwAAAAAAAAA____ABkAAP8DAP8DAP8DAP8D________V_1XAGAAAAAAAAAA");
testRendering("title_centered_with_game_icon", "celeste", "________AiIiQDAAYDwAYDwA________YDwAYDwAYAAAYAAAd393YBkAYL8DYP8DYP8DYP8D________d_1XYGAAAAAAAAAA");
testRendering("title_left_no_attempt_count", "celeste", "________MzMz4AAA8AAA-AAA_________VVV-AAAAAAAAAAA____GQAA_wAA_wAA_wAA_wAA________f_1XIAAAAAAAAAAA");