search

CityofToronto / bdit_king_pilot_dashboard

Dashboard for King St Pilot
GNU General Public License v3.0
4 stars 2 forks source link

Global Control Only Updates First Component #117

Closed rcyyu closed 6 years ago

rcyyu commented 6 years ago

Currently there are four Streetcar Speed Tables in the public dashboard. Each of these tables have their own unique id and are all created on separate instances. Clicking the radio buttons next to them should update all tables to have the same data with respect to the select options on the radio buttons. However, changing the radio button options only updates the first table that was create and none of the proceeding ones. In addition, changing the order of the callback functions has no effect on which table is updated, it is always the table which was created first.

Possible causes:

radumas commented 6 years ago

:point_up: That commit created a minimum python example of two Streetcar Speeds Tables with a radio button to change the month. The visualisations can be initialised with different data. As you can see from the print output to the console, the callback to the second one is firing and filtering the correct data. But the visualisation isn't updating. There must be some issue on the React side but I'm puzzled what.

The next step I would recommend is recreating the above example in node.js/JSX/whatever: Javascript without the Dash. If the same issue is present: then something's up with the update function in React. If not, then it's a Dash bug and we should report it.

rcyyu commented 6 years ago

Same issue persists with the Javascript without Dash, so it is likely to be a problem with the React.

rcyyu commented 6 years ago

Fixed. Each element of StreetcarSpeed's had the same id/class. The function updateGraphics of each component would select these elements. Selection only changes the first one it finds which causes all compnents updateGraphics to select the first component's elements. To solve this, give a unique id for each element in a component. This can be done easily by appending id to an element's class name or id since id has to be unique for each component.