Skip to content

Commit 3861bc1

Browse files
atsai-jumptradingatsai-jumptrading
committed
fix: fix uplot x scale keys
1 parent 8fb96ab commit 3861bc1

File tree

13 files changed

+101
-78
lines changed

13 files changed

+101
-78
lines changed

‎src/features/Overview/SlotPerformance/ComputeUnitsCard/CuChart.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ import { timeScaleDragPlugin } from "../TransactionBarsCard/scaleDragPlugin";
1010
import { cuRefAreaPlugin } from "./cuRefAreaPlugin";
1111
import { startLinePlugin } from "./startLinePlugin";
1212
import {
13-
bankScaleKey,
13+
bankCountScaleKey,
1414
computeUnitsScaleKey,
1515
lamportsScaleKey,
16-
xScaleKey,
16+
banksXScaleKey,
1717
} from "./consts";
1818
import {
1919
cuChartTooltipDataAtom,
@@ -176,12 +176,12 @@ export default function CuChart({
176176
drawOrder: ["axes", "series"] as uPlot.DrawOrderKey[],
177177
cursor: {
178178
sync: {
179-
key: xScaleKey,
179+
key: banksXScaleKey,
180180
},
181181
points: { show: false },
182182
},
183183
scales: {
184-
[xScaleKey]: {
184+
[banksXScaleKey]: {
185185
time: false,
186186
},
187187
[computeUnitsScaleKey]: {
@@ -197,7 +197,7 @@ export default function CuChart({
197197
];
198198
},
199199
},
200-
[bankScaleKey]: {
200+
[bankCountScaleKey]: {
201201
range: [0, maxBankCount + 1],
202202
},
203203
[lamportsScaleKey]: {
@@ -322,14 +322,16 @@ export default function CuChart({
322322
},
323323
],
324324
series: [
325-
{},
325+
{
326+
scale: banksXScaleKey,
327+
},
326328
{
327329
label: "Active Bank",
328330
stroke: "rgba(117, 77, 18, 1)",
329331
paths,
330332
points: { show: false },
331333
width: 2 / devicePixelRatio,
332-
scale: bankScaleKey,
334+
scale: bankCountScaleKey,
333335
},
334336
{
335337
label: "Compute Units",

‎src/features/Overview/SlotPerformance/ComputeUnitsCard/CuChartActions.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Button, Flex, IconButton, Separator } from "@radix-ui/themes";
22
import { ZoomInIcon, ZoomOutIcon, ResetIcon } from "@radix-ui/react-icons";
33
import styles from "./cuChartActions.module.css";
4-
import { xScaleKey } from "./consts";
4+
import { banksXScaleKey } from "./consts";
55
import { useAtomValue } from "jotai";
66
import { isFullXRangeAtom } from "./atoms";
77

@@ -20,14 +20,14 @@ export default function CuChartActions({ onUplot }: CuChartActionsProps) {
2020
variant="soft"
2121
onClick={() =>
2222
onUplot((u) => {
23-
const min = u.scales[xScaleKey].min ?? 0;
24-
const max = u.scales[xScaleKey].max ?? 0;
23+
const min = u.scales[banksXScaleKey].min ?? 0;
24+
const max = u.scales[banksXScaleKey].max ?? 0;
2525
const range = max - min;
2626
if (range <= 0) return;
2727

2828
const zoomDiff = range * 0.2;
2929

30-
u.setScale(xScaleKey, {
30+
u.setScale(banksXScaleKey, {
3131
min: min + zoomDiff,
3232
max: max - zoomDiff,
3333
});
@@ -43,14 +43,14 @@ export default function CuChartActions({ onUplot }: CuChartActionsProps) {
4343
onUplot((u) => {
4444
const scaleMin = u.data[0][0];
4545
const scaleMax = u.data[0].at(-1) ?? scaleMin;
46-
const min = u.scales[xScaleKey].min ?? 0;
47-
const max = u.scales[xScaleKey].max ?? 0;
46+
const min = u.scales[banksXScaleKey].min ?? 0;
47+
const max = u.scales[banksXScaleKey].max ?? 0;
4848
const range = max - min;
4949
if (range <= 0) return;
5050

5151
const zoomDiff = range * 0.2;
5252

53-
u.setScale(xScaleKey, {
53+
u.setScale(banksXScaleKey, {
5454
min: Math.max(min - zoomDiff, scaleMin),
5555
max: Math.min(max + zoomDiff, scaleMax),
5656
});
@@ -65,7 +65,7 @@ export default function CuChartActions({ onUplot }: CuChartActionsProps) {
6565
variant="soft"
6666
onClick={() =>
6767
onUplot((u) =>
68-
u.setScale(xScaleKey, {
68+
u.setScale(banksXScaleKey, {
6969
min: u.data[0][0],
7070
max: u.data[0].at(-1) ?? 0,
7171
}),

‎src/features/Overview/SlotPerformance/ComputeUnitsCard/consts.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const bankScaleKey = "banks";
1+
export const bankCountScaleKey = "banks";
22
export const lamportsScaleKey = "lamports";
33
export const computeUnitsScaleKey = "computeUnits";
4-
export const xScaleKey = "banksXScale";
4+
export const banksXScaleKey = "banksXScale";

‎src/features/Overview/SlotPerformance/ComputeUnitsCard/cuIsFullXRangePlugin.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { getDefaultStore } from "jotai";
22
import type uPlot from "uplot";
33
import { isFullXRangeAtom } from "./atoms";
4+
import { banksXScaleKey } from "./consts";
45

56
const store = getDefaultStore();
67

@@ -10,13 +11,14 @@ export function cuIsFullXRangePlugin(): uPlot.Plugin {
1011
return {
1112
hooks: {
1213
ready(u) {
13-
xMin = u.scales.x.min ?? 0;
14-
xMax = u.scales.x.max ?? 0;
14+
xMin = u.scales[banksXScaleKey].min ?? 0;
15+
xMax = u.scales[banksXScaleKey].max ?? 0;
1516
},
1617
setScale(u) {
1718
store.set(
1819
isFullXRangeAtom,
19-
u.scales.x.min === xMin && u.scales.x.max === xMax,
20+
u.scales[banksXScaleKey].min === xMin &&
21+
u.scales[banksXScaleKey].max === xMax,
2022
);
2123
},
2224
},

‎src/features/Overview/SlotPerformance/ComputeUnitsCard/cuRefAreaPlugin.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import uPlot from "uplot";
22
import type { SlotTransactions } from "../../../../api/types";
33
import type { RefObject } from "react";
4-
import { computeUnitsScaleKey, xScaleKey } from "./consts";
4+
import { computeUnitsScaleKey, banksXScaleKey } from "./consts";
55
import { round } from "lodash";
66
import { getDefaultStore } from "jotai";
77
import { showChartProjectionsAtom } from "./atoms";
@@ -330,7 +330,7 @@ export function cuRefAreaPlugin({
330330
const refLines = onlyMaxCu
331331
? []
332332
: getRefLinesWithinScales(
333-
u.scales[xScaleKey],
333+
u.scales[banksXScaleKey],
334334
u.scales[computeUnitsScaleKey],
335335
slotTransactions,
336336
refLineMaxComputeUnits,
@@ -340,8 +340,11 @@ export function cuRefAreaPlugin({
340340
// Adding a max CU line unrelated to bank count
341341
refLines.unshift({
342342
line: [
343-
{ x: u.scales[xScaleKey].min ?? 0, y: maxComputeUnits },
344-
{ x: u.scales[xScaleKey].max ?? 450_000_000, y: maxComputeUnits },
343+
{ x: u.scales[banksXScaleKey].min ?? 0, y: maxComputeUnits },
344+
{
345+
x: u.scales[banksXScaleKey].max ?? 450_000_000,
346+
y: maxComputeUnits,
347+
},
345348
],
346349
bankCount: 0,
347350
});
@@ -358,11 +361,11 @@ export function cuRefAreaPlugin({
358361
// draw lines and labels
359362
for (let i = 0; i < refLines.length; i++) {
360363
const { line, bankCount } = refLines[i];
361-
const x0 = Math.round(u.valToPos(line[0].x, xScaleKey, true));
364+
const x0 = Math.round(u.valToPos(line[0].x, banksXScaleKey, true));
362365
const y0 = Math.round(
363366
u.valToPos(line[0].y, computeUnitsScaleKey, true),
364367
);
365-
const x1 = Math.round(u.valToPos(line[1].x, xScaleKey, true));
368+
const x1 = Math.round(u.valToPos(line[1].x, banksXScaleKey, true));
366369
const y1 = Math.round(
367370
u.valToPos(line[1].y, computeUnitsScaleKey, true),
368371
);
@@ -474,7 +477,8 @@ export function cuRefAreaPlugin({
474477
u.scales[computeUnitsScaleKey].max ??
475478
0 - (u.scales[computeUnitsScaleKey].min ?? 0);
476479
const midTs =
477-
u.scales[xScaleKey].max ?? 0 - (u.scales[xScaleKey].min ?? 0);
480+
u.scales[banksXScaleKey].max ??
481+
0 - (u.scales[banksXScaleKey].min ?? 0);
478482
// scale shown is between reference lines
479483
const tEnd = Number(
480484
slotTransactions.target_end_timestamp_nanos -

‎src/features/Overview/SlotPerformance/ComputeUnitsCard/startLinePlugin.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { xScaleKey } from "./consts";
1+
import { banksXScaleKey } from "./consts";
22
import { startLineColor } from "../../../../colors";
33
import { getDefaultStore } from "jotai";
44
import { ScheduleStrategyEnum } from "../../../../api/entities";
@@ -33,8 +33,8 @@ export function startLinePlugin(): uPlot.Plugin {
3333
return;
3434
}
3535

36-
const xScale = u.scales[xScaleKey];
37-
const x = Math.round(u.valToPos(lineNs, xScaleKey, true));
36+
const xScale = u.scales[banksXScaleKey];
37+
const x = Math.round(u.valToPos(lineNs, banksXScaleKey, true));
3838

3939
// no line if out of bounds
4040
if (
@@ -61,7 +61,9 @@ export function startLinePlugin(): uPlot.Plugin {
6161
ctx.restore();
6262

6363
if (iconEl) {
64-
const infoIconX = Math.round(u.valToPos(lineNs, xScaleKey, false));
64+
const infoIconX = Math.round(
65+
u.valToPos(lineNs, banksXScaleKey, false),
66+
);
6567

6668
const anchor = {
6769
left: infoIconX + u.over.offsetLeft - iconSize / 2,

‎src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/SearchCommand.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useDebounce } from "use-debounce";
99
import { getUplotId } from "../chartUtils";
1010
import { txnBarsUplotActionAtom } from "../uplotAtoms";
1111
import { useAtomValue, useSetAtom } from "jotai";
12-
import { xScaleKey } from "../../ComputeUnitsCard/consts";
12+
import { banksXScaleKey } from "../../ComputeUnitsCard/consts";
1313
import { highlightTxnIdx } from "../txnBarsPlugin";
1414
import {
1515
ChevronUpIcon,
@@ -127,7 +127,7 @@ export default function SearchCommand({
127127
setInputValue("");
128128
setDInputValue("");
129129
uplotAction((u, _bankIdx) => {
130-
u.setScale(xScaleKey, {
130+
u.setScale(banksXScaleKey, {
131131
min: u.data[0][0],
132132
max: u.data[0][u.data[0].length - 1],
133133
});
@@ -309,7 +309,7 @@ export default function SearchCommand({
309309
return;
310310
}
311311

312-
const scale = u.scales[xScaleKey];
312+
const scale = u.scales[banksXScaleKey];
313313
const scaleMin = scale.min ?? -Infinity;
314314
const scaleMax = scale.max ?? Infinity;
315315
const currentScaleRange = scaleMax - scaleMin;
@@ -360,7 +360,7 @@ export default function SearchCommand({
360360
min = max - desiredScaleRangeMax;
361361
}
362362

363-
u.setScale(xScaleKey, { min, max });
363+
u.setScale(banksXScaleKey, { min, max });
364364
}
365365

366366
highlightTxnIdx(txnIdx);

‎src/features/Overview/SlotPerformance/TransactionBarsCard/ChartControls/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import {
4848
chartBufferMs,
4949
getMaxTsWithBuffer,
5050
} from "../../../../../transactionUtils";
51-
import { xScaleKey } from "../../ComputeUnitsCard/consts";
51+
import { banksXScaleKey } from "../../ComputeUnitsCard/consts";
5252
import { tooltipTxnIdxAtom, tooltipTxnStateAtom } from "../chartTooltipAtoms";
5353
import SearchCommand from "./SearchCommand";
5454
import {
@@ -735,7 +735,7 @@ function ArrivalControl({ transactions }: WithTransactionsProps) {
735735
setRangeValue(value);
736736

737737
uplotAction((u) => {
738-
const left = u.valToPos(value[changedValueIdx], xScaleKey);
738+
const left = u.valToPos(value[changedValueIdx], banksXScaleKey);
739739
u.setCursor({ left, top: 0 });
740740
});
741741

‎src/features/Overview/SlotPerformance/TransactionBarsCard/txnBarsPlugin.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
txnIdxSidx,
2424
getCuIncomeRankingRatios,
2525
} from "./txnBarsPluginUtils";
26-
import { xScaleKey } from "../ComputeUnitsCard/consts";
26+
import { banksXScaleKey } from "../ComputeUnitsCard/consts";
2727

2828
const laneWidth = 1;
2929
const laneDistr = SPACE_BETWEEN;
@@ -484,8 +484,11 @@ export function txnBarsPlugin(
484484
// To avoid excess drawing when zoomed, avoid drawing boxes past bbox
485485
if (rgt >= u.bbox.left && lft <= u.bbox.left + u.bbox.width) {
486486
const scaleDiff =
487-
u.scales.x.min != null && u.scales.x.max != null
488-
? 400_000_000 / (u.scales.x.max - u.scales.x.min)
487+
u.scales[banksXScaleKey].min != null &&
488+
u.scales[banksXScaleKey].max != null
489+
? 400_000_000 /
490+
(u.scales[banksXScaleKey].max -
491+
u.scales[banksXScaleKey].min)
489492
: undefined;
490493
putBox(
491494
u.data,
@@ -624,9 +627,9 @@ export function txnBarsPlugin(
624627
},
625628
setCursor: (u: uPlot) => {
626629
if (mode === 1) {
627-
const val = u.posToVal(u.cursor.left ?? 0, xScaleKey);
630+
const val = u.posToVal(u.cursor.left ?? 0, banksXScaleKey);
628631
if (legendTimeValueEl)
629-
legendTimeValueEl.textContent = u.scales.x.time
632+
legendTimeValueEl.textContent = u.scales[banksXScaleKey].time
630633
? fmtDate(new Date(val * 1e3))
631634
: val.toFixed(2);
632635
}
@@ -636,7 +639,7 @@ export function txnBarsPlugin(
636639
uPlot.assign(opts, {
637640
cursor: {
638641
sync: {
639-
key: xScaleKey,
642+
key: banksXScaleKey,
640643
// setSeries: true,
641644
// scales: [xScaleKey],
642645
// match: [matchScaleKeys, matchScaleKeys, matchScaleKeys],
@@ -695,7 +698,7 @@ export function txnBarsPlugin(
695698
},
696699
},
697700
scales: {
698-
[xScaleKey]: {
701+
[banksXScaleKey]: {
699702
range(u: { data: number[][] }, min: number, max: number) {
700703
if (mode === 2) {
701704
const colWid = u.data[0][1] - u.data[0][0];

0 commit comments

Comments
 (0)