forgottener opened a new issue, #13370: URL: https://github.com/apache/skywalking/issues/13370
### Search before asking - [x] I had searched in the [issues](https://github.com/apache/skywalking/issues?q=is%3Aissue) and found no similar issues. ### Apache SkyWalking Component UI (apache/skywalking-booster-ui) ### What happened In the trace list view, the color of each service node in the D3 graph is determined by the index of the service in a deduplicated list generated from the graph's internal data (`this.list = Array.from(new Set(this.row.map(i => i.serviceCode))`) in `d3-trace-list.ts`). However, the service labels above the graph use a separate deduplicated list generated from the component's props (`Array.from(new Set(props.data.map(i => i.serviceCode))`) in `List.vue`). If the order of services in these two lists is different, the same service may be assigned different colors in the graph and in the label, causing a mismatch. ### What you expected to happen The color of each service should be consistent between the graph nodes and the service labels. The same service should always have the same color in both places. <img width="564" height="453" alt="Image" src="https://github.com/user-attachments/assets/224c34d4-77c5-44f1-acfa-4e4de3cc5832"; /> ### How to reproduce 1. Open the trace list view for a trace that contains multiple services. 2. If the order of services in the deduplicated list from row (used by the D3 graph) differs from the order in the deduplicated list from props.data (used by the labels), the color mapping will be inconsistent. 3. You may observe that the color of a service node in the graph does not match the color of its corresponding label. ### Anything else _No response_ ### Are you willing to submit a pull request to fix on your own? - [ ] Yes I am willing to submit a pull request on my own! ### Code of Conduct - [x] I agree to follow this project's [Code of Conduct](https://www.apache.org/foundation/policies/conduct) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
