Skip to content

Commit c1d0b12

Browse files
atsai-jumptradingatsai-jumptrading
committed
chore: simplify unused sankey properties, construct less dates
1 parent 353d8ed commit c1d0b12

File tree

11 files changed

+147
-152
lines changed

11 files changed

+147
-152
lines changed

‎src/app.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,10 @@
5555
background: rgba(0, 0, 0, 0.54);
5656
backdrop-filter: blur(2px);
5757
}
58+
59+
.sankey-label {
60+
pointer-events: none;
61+
white-space: pre-line;
62+
font-size: 14px;
63+
font-family: Inter Tight;
64+
}

‎src/colors.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export const epochSliderProgressColor = "#142D53";
160160
export const epochSkippedSlotColor = "#FF5353";
161161

162162
// sankey
163-
export const sankeyStartEndNodeColor = "#494D73";
163+
export const sankeyStartEndNodeColor = "#525463";
164164
export const sankeyIncomingLinkColor = "#23639E";
165165
export const sankeyDroppedLinkColor = "#5C5555";
166166
export const sankeyRetainedLinkColor = "#452909";

‎src/features/Overview/ShredsProgression/atoms.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export function createLiveShredsAtoms() {
153153

154154
if (!prev || !slotRange) return prev;
155155

156-
const now = new Date().getTime();
156+
const now = Date.now();
157157

158158
if (isStartup) {
159159
// During startup, we only show event dots, not spans. Delete slots without events in chart view

‎src/features/Overview/ShredsProgression/shredsProgressionPlugin.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ export function shredsProgressionPlugin(
7070
}
7171

7272
// Offset to convert shred event delta to chart x value
73-
const delayedNow = new Date().getTime() - delayMs;
73+
const delayedNow = Date.now() - delayMs;
74+
7475
const tsXValueOffset = delayedNow - liveShreds.referenceTs;
7576

7677
const minSlot = isOnStartupScreen

‎src/features/Overview/SlotPerformance/SlotSankey/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -484,20 +484,27 @@ function SlotSankey({ slot }: { slot?: number }) {
484484
isInteractive={false}
485485
nodeThickness={0}
486486
nodeSpacing={getNodeSpacing(height)}
487-
nodeBorderWidth={1}
487+
nodeBorderWidth={0}
488488
sort="input"
489-
nodeBorderRadius={3}
489+
nodeBorderRadius={0}
490490
linkOpacity={1}
491491
enableLinkGradient
492492
labelPosition="outside"
493493
labelPadding={16}
494+
animate={false}
495+
nodeTooltip={NullComponent}
496+
linkTooltip={NullComponent}
494497
/>
495498
);
496499
}}
497500
</AutoSizer>
498501
);
499502
}
500503

504+
function NullComponent() {
505+
return null;
506+
}
507+
501508
function getNodeSpacing(height: number) {
502509
if (height < 275) {
503510
return 32;

‎src/sankey/SankeyLabels.tsx‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { useSprings, animated } from "@react-spring/web";
2-
import { useTheme } from "@nivo/core";
31
import type {
42
DefaultLink,
53
DefaultNode,
@@ -20,7 +18,6 @@ import {
2018
successfulSlotNodes,
2119
failedSlotNodes,
2220
} from "../features/Overview/SlotPerformance/SlotSankey/consts";
23-
import { useCustomMotionConfig } from "./useCustomMotionConfig";
2421
import {
2522
failureColor,
2623
nonVoteColor,
@@ -65,7 +62,7 @@ export const SankeyLabels = <N extends DefaultNode, L extends DefaultLink>({
6562
labelPadding,
6663
labelOrientation,
6764
}: SankeyLabelsProps<N, L>) => {
68-
const theme = useTheme();
65+
// const theme = useTheme();
6966

7067
const labelRotation = labelOrientation === "vertical" ? -90 : 0;
7168
const labels = nodes
@@ -138,22 +135,21 @@ export const SankeyLabels = <N extends DefaultNode, L extends DefaultLink>({
138135
};
139136
});
140137

141-
const { animate, config: springConfig } = useCustomMotionConfig();
142-
const springs = useSprings(
143-
labels.length,
144-
labels.map((label) => {
145-
return {
146-
transform: `translate(${label.x}, ${label.y}) rotate(${labelRotation})`,
147-
config: springConfig,
148-
immediate: !animate,
149-
};
150-
}),
151-
);
138+
// const { animate, config: springConfig } = useCustomMotionConfig();
139+
// const springs = useSprings(
140+
// labels.length,
141+
// labels.map((label) => {
142+
// return {
143+
// transform: `translate(${label.x}, ${label.y}) rotate(${labelRotation})`,
144+
// config: springConfig,
145+
// immediate: !animate,
146+
// };
147+
// }),
148+
// );
152149

153150
return (
154151
<>
155-
{springs.map((animatedProps, index) => {
156-
const label = labels[index];
152+
{labels.map((label) => {
157153
const [labelFill, valueFill] = getLabelFill(
158154
label.label as SlotNode,
159155
label.value,
@@ -167,18 +163,12 @@ export const SankeyLabels = <N extends DefaultNode, L extends DefaultLink>({
167163
value={label.value}
168164
key={label.id}
169165
>
170-
<animated.text
166+
<text
171167
key={label.id}
172168
dominantBaseline="central"
173169
textAnchor={label.textAnchor}
174-
transform={animatedProps.transform}
175-
style={{
176-
...theme.labels.text,
177-
pointerEvents: "none",
178-
whiteSpace: "pre-line",
179-
fontSize: "14px",
180-
fontFamily: "Inter Tight",
181-
}}
170+
transform={`translate(${label.x}, ${label.y}) rotate(${labelRotation})`}
171+
className="sankey-label"
182172
>
183173
{getLabelParts(labelText).map((part, i) => {
184174
return (
@@ -196,7 +186,7 @@ export const SankeyLabels = <N extends DefaultNode, L extends DefaultLink>({
196186
{label.value?.toLocaleString()}
197187
{getSuffix()}
198188
</tspan>
199-
</animated.text>
189+
</text>
200190
</ShowNode>
201191
);
202192
})}

‎src/sankey/SankeyLinks.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ export const SankeyLinks = <N extends DefaultNode, L extends DefaultLink>({
4444
onClick,
4545
tooltip,
4646
}: SankeyLinksProps<N, L>) => {
47-
const getOpacity = (link: SankeyLinkDatum<N, L>) => {
48-
if (!currentNode && !currentLink) return linkOpacity;
49-
if (isCurrentLink(link)) return linkHoverOpacity;
50-
return linkHoverOthersOpacity;
51-
};
47+
// const getOpacity = (link: SankeyLinkDatum<N, L>) => {
48+
// if (!currentNode && !currentLink) return linkOpacity;
49+
// if (isCurrentLink(link)) return linkHoverOpacity;
50+
// return linkHoverOthersOpacity;
51+
// };
5252

5353
const getLinkPath = useMemo(
5454
() =>
@@ -65,7 +65,8 @@ export const SankeyLinks = <N extends DefaultNode, L extends DefaultLink>({
6565
layout={layout}
6666
path={getLinkPath(link, linkContract)}
6767
color={link.color}
68-
opacity={getOpacity(link)}
68+
// opacity={getOpacity(link)}
69+
opacity={1}
6970
blendMode={linkBlendMode}
7071
enableGradient={enableLinkGradient}
7172
setCurrent={setCurrentLink}

‎src/sankey/SankeyLinksItem.tsx‎

Lines changed: 40 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import type { MouseEvent } from "react";
2-
import { createElement, useCallback } from "react";
3-
import { useSpring, animated } from "@react-spring/web";
4-
import { useAnimatedPath } from "@nivo/core";
5-
import { useTooltip } from "@nivo/tooltip";
61
import { SankeyLinkGradient } from "./SankeyLinkGradient";
72
import type {
83
DefaultLink,
@@ -19,7 +14,6 @@ import {
1914
failedSlotNodes,
2015
} from "../features/Overview/SlotPerformance/SlotSankey/consts";
2116
import { useShowNode } from "./useShowNode";
22-
import { useCustomMotionConfig } from "./useCustomMotionConfig";
2317
import {
2418
failureColor,
2519
sankeyDroppedLinkColor,
@@ -56,43 +50,43 @@ export const SankeyLinksItem = <N extends DefaultNode, L extends DefaultLink>({
5650
onClick,
5751
}: SankeyLinksItemProps<N, L>) => {
5852
const linkId = `${link.source.id}.${link.target.id}.${link.index}`;
59-
const { animate, config: springConfig } = useCustomMotionConfig();
60-
const animatedPath = useAnimatedPath(path);
61-
const animatedProps = useSpring({
62-
color,
63-
opacity,
64-
config: springConfig,
65-
immediate: !animate,
66-
});
53+
// const { animate, config: springConfig } = useCustomMotionConfig();
54+
// const animatedPath = useAnimatedPath(path);
55+
// const animatedProps = useSpring({
56+
// color,
57+
// opacity,
58+
// config: springConfig,
59+
// immediate: !animate,
60+
// });
6761

68-
const { showTooltipFromEvent, hideTooltip } = useTooltip();
62+
// const { showTooltipFromEvent, hideTooltip } = useTooltip();
6963

70-
const handleMouseEnter = useCallback(
71-
(event: MouseEvent<SVGPathElement>) => {
72-
setCurrent(link);
73-
showTooltipFromEvent(createElement(tooltip, { link }), event, "left");
74-
},
75-
[setCurrent, link, showTooltipFromEvent, tooltip],
76-
);
64+
// const handleMouseEnter = useCallback(
65+
// (event: MouseEvent<SVGPathElement>) => {
66+
// setCurrent(link);
67+
// showTooltipFromEvent(createElement(tooltip, { link }), event, "left");
68+
// },
69+
// [setCurrent, link, showTooltipFromEvent, tooltip],
70+
// );
7771

78-
const handleMouseMove = useCallback(
79-
(event: MouseEvent<SVGPathElement>) => {
80-
showTooltipFromEvent(createElement(tooltip, { link }), event, "left");
81-
},
82-
[showTooltipFromEvent, link, tooltip],
83-
);
72+
// const handleMouseMove = useCallback(
73+
// (event: MouseEvent<SVGPathElement>) => {
74+
// showTooltipFromEvent(createElement(tooltip, { link }), event, "left");
75+
// },
76+
// [showTooltipFromEvent, link, tooltip],
77+
// );
8478

85-
const handleMouseLeave = useCallback(() => {
86-
setCurrent(null);
87-
hideTooltip();
88-
}, [setCurrent, hideTooltip]);
79+
// const handleMouseLeave = useCallback(() => {
80+
// setCurrent(null);
81+
// hideTooltip();
82+
// }, [setCurrent, hideTooltip]);
8983

90-
const handleClick = useCallback(
91-
(event: MouseEvent<SVGPathElement>) => {
92-
onClick?.(link, event);
93-
},
94-
[onClick, link],
95-
);
84+
// const handleClick = useCallback(
85+
// (event: MouseEvent<SVGPathElement>) => {
86+
// onClick?.(link, event);
87+
// },
88+
// [onClick, link],
89+
// );
9690
let linkColor;
9791
if (incomingSlotNodes.includes(link.source.id as SlotNode)) {
9892
linkColor = sankeyIncomingLinkColor;
@@ -125,19 +119,16 @@ export const SankeyLinksItem = <N extends DefaultNode, L extends DefaultLink>({
125119
endColor={link.endColor || link.target.color}
126120
/>
127121
)}
128-
<animated.path
122+
<path
129123
fill={
130-
linkColor ??
131-
(enableGradient
132-
? `url("#${encodeURI(linkId)}")`
133-
: animatedProps.color)
124+
linkColor ?? (enableGradient ? `url("#${encodeURI(linkId)}")` : color)
134125
}
135-
d={animatedPath}
136-
fillOpacity={animatedProps.opacity}
137-
onMouseEnter={isInteractive ? handleMouseEnter : undefined}
138-
onMouseMove={isInteractive ? handleMouseMove : undefined}
139-
onMouseLeave={isInteractive ? handleMouseLeave : undefined}
140-
onClick={isInteractive ? handleClick : undefined}
126+
d={path}
127+
// fillOpacity={animatedProps.opacity}
128+
// onMouseEnter={isInteractive ? handleMouseEnter : undefined}
129+
// onMouseMove={isInteractive ? handleMouseMove : undefined}
130+
// onMouseLeave={isInteractive ? handleMouseLeave : undefined}
131+
// onClick={isInteractive ? handleClick : undefined}
141132
/>
142133
</>
143134
);

‎src/sankey/SankeyNodes.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@ export const SankeyNodes = <N extends DefaultNode, L extends DefaultLink>({
4040
onClick,
4141
tooltip,
4242
}: SankeyNodesProps<N, L>) => {
43-
const getOpacity = (node: SankeyNodeDatum<N, L>) => {
44-
if (!currentNode && !currentLink) return nodeOpacity;
45-
if (isCurrentNode(node)) return nodeHoverOpacity;
46-
return nodeHoverOthersOpacity;
47-
};
43+
// const getOpacity = (node: SankeyNodeDatum<N, L>) => {
44+
// if (!currentNode && !currentLink) return nodeOpacity;
45+
// if (isCurrentNode(node)) return nodeHoverOpacity;
46+
// return nodeHoverOthersOpacity;
47+
// };
4848

4949
return (
5050
<>
@@ -57,7 +57,7 @@ export const SankeyNodes = <N extends DefaultNode, L extends DefaultLink>({
5757
width={node.width}
5858
height={node.height}
5959
color={node.color}
60-
opacity={getOpacity(node)}
60+
opacity={1}
6161
borderWidth={borderWidth}
6262
borderColor={getBorderColor(node)}
6363
borderRadius={borderRadius}

0 commit comments

Comments
 (0)