Unable to remove series from graph view
Categories
(Tree Management :: Perfherder, defect, P1)
Tracking
(Not tracked)
People
(Reporter: davehunt, Assigned: igoldan)
Details
(Whiteboard: fix-close-legends-from-top)
When viewing a graph view with a large number of series, I am unable to remove more than a few of these series. If I start from the bottom and work up it seems fine, but removing them from the top ends up getting into a weird state.
Steps to reproduce:
- Open a graph view with many series, such as this one.
- Click the 'x' to remove the top series from the graph.
- Repeat step 2
Expected result:
One by one all series should be removed from the graph view until there are none remaining.
Actual result:
The first four series appear to be removed as expected, but the colours of the remaining series become limted to two colours. When attempting to remove the 5th series, all of the data from the first 4 series reappears on the graph.
|
||
Updated•4 years ago
|
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 1•3 years ago
•
|
||
The link from step #1 is faulty. Out of the 4 signatures provided as query params, following 2 are identical:
<hostname>/perfherder/graphs?highlightAlerts=1&highlightChangelogData=0&series=mozilla-central,1937041,1,10&series=mozilla-central,1934609,1,10&series=mozilla-central,1982120,1,10&series=mozilla-central,1934609,1,10&timerange=31536000
What actually happens?
After parsing the query params, the frontend uses them as unique keys for some of its components. So we get 2 components with identical keys, which confuses ReactJs & causes such weird behavior.
As a general rule: ReactJs mandates all components that act like list items have unique identifiers in the form of the key attribute, so they can be properly managed.
With that said, I'm not sure about the ideal solution. Some options:
- silently sanitize query params by eliminating duplicate series
- pop up a warning notification, informing the user about the faulty URL
Thoughts?
|
|
Assignee | |
Updated•3 years ago
|
|
Reporter | |
Comment 2•3 years ago
|
||
(In reply to Ionuț Goldan [:igoldan] from comment #1)
The link from step #1 is faulty. Out of the 4 signatures provided as query params, following 2 are identical:
<hostname>/perfherder/graphs?highlightAlerts=1&highlightChangelogData=0&series=mozilla-central,1937041,1,10&series=mozilla-central,1934609,1,10&series=mozilla-central,1982120,1,10&series=mozilla-central,1934609,1,10&timerange=31536000
What actually happens?
After parsing the query params, the frontend uses them as unique keys for some of its components. So we get 2 components with identical keys, which confuses ReactJs & causes such weird behavior.
As a general rule: ReactJs mandates all components that act like list items have unique identifiers in the form of thekeyattribute, so they can be properly managed.With that said, I'm not sure about the ideal solution. Some options:
- silently sanitize query params by eliminating duplicate series
- pop up a warning notification, informing the user about the faulty URL
Thoughts?
Of these options, I think I prefer #1 however the real issue here is that I somehow was served a link with duplicate series. As this was opened over a year ago I doubt we'll be able to identify the source of the problem, though my best guess would be that it's from arewefastyet.com. I'm going to close this as INCOMPLETE, and we can reopen if we see this again.
Description
•