search

ScottishCovidResponse / rampvis-ui

This is a React based RAMP VIS visualisation interface. This client uses the REST API: https://github.com/ScottishCovidResponse/rampvis-api
BSD 2-Clause "Simplified" License
7 stars 6 forks source link

Country List on Time Series Tool not rendering although state changes #140

Closed tunagonen closed 2 years ago

tunagonen commented 2 years ago

Hey everyone, I commited a prototype to select multiple time-series from the results of the search and list them at the bottom as an interactive list. The state of the list is stored in timeSeriesBag in the index.tsx file (line 63). When the user presses the search button, the api sends a post request and creates d3 plots (line 91). I decided to pass state and state update function to alignmentplot.js function in order to add on-click events to divs for updating state. After clicking to a graph, I can see the state is updated succesfully but there is no re-render. When I change any inputs on the front-end triggering a react-based event listener though the list is rendered with correct values. (change country name, date,similarity measure). Did anyone had similar issues on react-d3 events?

saifulkhan commented 2 years ago

There is a problem with how you are updating the state. Fixed with some additional code-readability-related refactoring of the index.tsx. Please test: https://github.com/ScottishCovidResponse/rampvis-ui/commit/d9d7428af7aa50c8920a0dbea52471f91a9850a9

ErikRZH commented 2 years ago

Changing line 132 of alignmentplot.js to from setTimeSeriesBag(temp_arr) to setTimeSeriesBag([...temp_arr]) (in the version @tunagonen shared) also makes it update correctly. As it then is passed a new array rather than the old array, which makes it re-render.