Skip to content

Commit 9f6d55c

Browse files
ch1boch1bo
committed
Unify message coloring between graph and pie charts
1 parent e349e36 commit 9f6d55c

File tree

6 files changed

+70
-38
lines changed

6 files changed

+70
-38
lines changed

‎ui/src/components/Graph/hooks/useHandlers.ts‎

Lines changed: 28 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useSimContext } from "@/contexts/SimContext/context";
22
import { EMessageType } from "@/contexts/SimContext/types";
3+
import { ELinkColor, EMessageColor, ENodeColor } from "@/utils/colors";
34
import { useCallback } from "react";
45

56
export const useHandlers = () => {
@@ -53,10 +54,10 @@ export const useHandlers = () => {
5354
context.beginPath();
5455
context.moveTo(nodeStart.fx, nodeStart.fy);
5556
context.lineTo(nodeEnd.fx, nodeEnd.fy);
56-
context.strokeStyle = "#ddd";
57+
context.strokeStyle = ELinkColor.LINK_DEFAULT;
5758

5859
if (link.source === currentNode || link.target === currentNode) {
59-
context.strokeStyle = "black";
60+
context.strokeStyle = ELinkColor.LINK_SELECTED;
6061
}
6162

6263
context.lineWidth = Math.min((0.2 / canvasScale) * 6, 0.2);
@@ -84,28 +85,30 @@ export const useHandlers = () => {
8485
}
8586

8687
if (currentNode === node.id.toString()) {
87-
context.fillStyle = "blue";
88+
context.fillStyle = ENodeColor.SELECTED;
8889
} else {
8990
// Color based on last activity
9091
const nodeStats = aggregatedData.nodes.get(node.id.toString());
9192
const lastActivity = nodeStats?.lastActivity;
9293

9394
// Check if activity is recent (within timeout)
94-
const activityIsRecent = lastActivity &&
95-
(currentTime - lastActivity.time) <= ACTIVITY_TIMEOUT;
95+
const activityIsRecent =
96+
lastActivity && currentTime - lastActivity.time <= ACTIVITY_TIMEOUT;
9697

9798
if (activityIsRecent) {
9899
if (lastActivity.type === EMessageType.EB) {
99-
context.fillStyle = "#9333ea"; // Purple for EB-related activity
100+
context.fillStyle = EMessageColor.EB;
100101
} else if (lastActivity.type === EMessageType.RB) {
101-
context.fillStyle = "#87ceeb"; // Light blue for RB-related activity
102+
context.fillStyle = EMessageColor.RB;
102103
} else {
103-
context.fillStyle = node.data.stake ? "#DC53DE" : "blue"; // Default colors
104+
context.fillStyle = node.data.stake
105+
? ENodeColor.STAKE_NODE
106+
: ENodeColor.SELECTED;
104107
}
105108
} else if (!node.data.stake) {
106-
context.fillStyle = "gray";
109+
context.fillStyle = ENodeColor.INACTIVE;
107110
} else {
108-
context.fillStyle = "#DC53DE"; // Stake node default
111+
context.fillStyle = ENodeColor.STAKE_NODE;
109112
}
110113
}
111114

@@ -127,33 +130,24 @@ export const useHandlers = () => {
127130
const y =
128131
senderNode.fy + (recipientNode.fy - senderNode.fy) * message.progress;
129132

130-
// Draw colored rectangle based on message type
133+
// Draw colored rectangle based on message type (consistent with pie chart colors)
131134
const rectSize = Math.min((0.8 / canvasScale) * 6, 0.8);
132-
133-
if (message.type === EMessageType.EB) {
134-
context.fillStyle = "#9333ea"; // Purple for EB messages
135-
context.strokeStyle = "#7c3aed";
136-
} else if (message.type === EMessageType.RB) {
137-
context.fillStyle = "#87ceeb"; // Light blue for RB messages
138-
context.strokeStyle = "#5f9ea0";
139-
} else if (message.type === EMessageType.TX) {
140-
context.fillStyle = "#90ee90"; // Light green for transaction messages
141-
context.strokeStyle = "#6bc46b";
142-
} else {
143-
context.fillStyle = "#666"; // Gray for other message types
144-
context.strokeStyle = "#444";
135+
136+
switch (message.type) {
137+
case EMessageType.TX:
138+
context.fillStyle = EMessageColor.TX;
139+
break;
140+
case EMessageType.EB:
141+
context.fillStyle = EMessageColor.EB;
142+
break;
143+
case EMessageType.Votes:
144+
context.fillStyle = EMessageColor.VOTES;
145+
break;
146+
case EMessageType.RB:
147+
context.fillStyle = EMessageColor.RB;
148+
break;
145149
}
146-
147150
context.fillRect(x - rectSize / 2, y - rectSize / 2, rectSize, rectSize);
148-
149-
// Add a slight border for visibility
150-
context.lineWidth = Math.min((0.1 / canvasScale) * 6, 0.1);
151-
context.strokeRect(
152-
x - rectSize / 2,
153-
y - rectSize / 2,
154-
rectSize,
155-
rectSize,
156-
);
157151
});
158152

159153
context.restore();

‎ui/src/components/Graph/modules/NodeStats.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useSimContext } from "@/contexts/SimContext/context";
22
import { EMessageType } from "@/contexts/SimContext/types";
33
import { printBytes } from "@/utils";
4+
import { EMessageColor } from "@/utils/colors";
45
import { FC, useMemo } from "react";
56
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
67

@@ -43,10 +44,10 @@ export const NodeStats: FC = () => {
4344
}, [currentNode, topography.links]);
4445

4546
const data = [
46-
{ name: "Transactions", ...getCounts(EMessageType.TX), color: "#26de81" },
47-
{ name: "Endorser Blocks", ...getCounts(EMessageType.EB), color: "#4b7bec" },
48-
{ name: "Votes", ...getCounts(EMessageType.Votes), color: "#2d98da" },
49-
{ name: "Blocks", ...getCounts(EMessageType.RB), color: "#fc5c65" },
47+
{ name: "Transactions", ...getCounts(EMessageType.TX), color: EMessageColor.TX },
48+
{ name: "Endorser Blocks", ...getCounts(EMessageType.EB), color: EMessageColor.EB },
49+
{ name: "Votes", ...getCounts(EMessageType.Votes), color: EMessageColor.VOTES },
50+
{ name: "Blocks", ...getCounts(EMessageType.RB), color: EMessageColor.RB },
5051
];
5152

5253
return (

‎ui/src/contexts/SimContext/context.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const defaultAggregatedData: ISimulationAggregatedDataState = {
1919
total: 0,
2020
byType: {},
2121
},
22+
lastAggregatedTime: 0,
2223
};
2324

2425
export const defaultState: ISimContextState = {

‎ui/src/contexts/SimContext/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export interface ISimulationAggregatedDataState {
6060
total: number;
6161
byType: Record<string, number>;
6262
};
63+
lastAggregatedTime: number; // Timestamp up to which aggregation was last computed
6364
}
6465

6566
export interface IGraphContextState {

‎ui/src/utils/colors.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Centralized color constants for Leios visualization
2+
// These colors are used consistently across pie charts, network animations, and node activities
3+
4+
export enum EMessageColor {
5+
TX = "#26de81",
6+
EB = "#4b7bec",
7+
VOTES = "#2d98da",
8+
RB = "#fc5c65",
9+
}
10+
11+
export enum ENodeColor {
12+
// Node colors
13+
SELECTED = "blue",
14+
STAKE_NODE = "#DC53DE",
15+
INACTIVE = "gray",
16+
}
17+
18+
export enum ELinkColor {
19+
LINK_DEFAULT = "#ddd",
20+
LINK_SELECTED = "black",
21+
}

‎ui/src/utils/timelineAggregation.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,7 @@ export const computeAggregatedDataAtTime = (
158158
total: 0,
159159
byType: {},
160160
},
161+
lastAggregatedTime: targetTime,
161162
};
162163

163164
// Process timeline events up to target time with early termination
@@ -413,6 +414,19 @@ export const computeAggregatedDataAtTime = (
413414
sentStats.bytes += msgBytes;
414415
stats.bytesSent += msgBytes;
415416
}
417+
418+
// Create vote animation with topology latency
419+
createMessageAnimation(
420+
result,
421+
EMessageType.Votes,
422+
message.id,
423+
message.sender,
424+
message.recipient,
425+
event.time_s,
426+
targetTime,
427+
0.2, // fallback travel time for votes
428+
topology,
429+
);
416430
break;
417431
}
418432

0 commit comments

Comments
 (0)