The LineChart component is not reactive
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Slst2020
	Dec 16 2021, 9:11 AM

Description

The charts on the Crawler History page do not automatically update after a crawler run unless the page is reloaded. The chart legends are also not reactive to changes in language.

The reactiveProp mixin is supposed to make the chart reactive to changes in the underlying dataset but this is not the case. Could this have something to do with how the crawler data is retrieved from the Vuex store in the CrawlerHistory view?

Details

	Subject	Repo	Branch	Lines +/-
	toolhub: Bump container version to 2022-03-15-002555-production	operations/deployment-charts	master	+1 -1
	ui: Fix Locale Selection Bug in CrawlerHistory.vue	wikimedia/toolhub	main	+24 -26

Customize query in gerrit

Related Objects

Mentioned In: T296283: Changing languages does not always change the language across the whole page

Event Timeline

Slst2020 created this task.Dec 16 2021, 9:11 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 16 2021, 9:11 AM

Slst2020 renamed this task from The LinerChart component is not reactive to The LineChart component is not reactive.Dec 16 2021, 9:11 AM

Slst2020 mentioned this in T296283: Changing languages does not always change the language across the whole page .

I'm not sure I understand the reactivity failure yet. By "do not automatically update after a crawler run" are you expecting that all clients are notified when a new run has been processed by the backend server?

I'm fairly sure that leaving the /crawler-history view for another (like /) and then returning to /crawler-history refreshes the client's information on the first page of crawler run information, but if that is not happening for some reason I think that is a bug that we should look into.

I talked with @Slst2020 and she explained that the issue is that the legend, titles, and dates shown on the charts do not change when the locale is switched--until the page is reloaded.

I did a bit of snooping around and figured out why this is happening.
In crawlerHistory view, fillChartsData is responsible for setting the data to be used by the chart (including the string of the current locale) and this is called only once, when crawlerHistory from the store changes.

watch_crawler_history.PNG (183×698 px, 16 KB)

This means that when the locale changes, fillChartsData is not called so there is no way to update crawledUrlsChartData and totalToolsChartData with the string of the new locale. One way to solve this is to watch '$i18n.locale' and trigger fillChartsData when it changes. My preferred solution is to do away with fillChartsData completely and make crawledUrlsChartData and totalToolsChartData computed properties.

Raymond_Ndibe claimed this task.Jan 13 2022, 12:56 AM

Raymond_Ndibe moved this task from Research needed to Groomed/Ready on the Toolhub board.

Raymond_Ndibe added a project: User-Raymond_Ndibe.

Change 753598 had a related patch set uploaded (by Raymond Ndibe; author: Raymond Ndibe):

[wikimedia/toolhub@main] ui: Fix Locale Selection Bug in CrawlerHistory.vue

https://gerrit.wikimedia.org/r/753598

gerritbot added a project: Patch-For-Review.Jan 13 2022, 1:14 AM

Raymond_Ndibe moved this task from Groomed/Ready to Review on the Toolhub board.Jan 13 2022, 1:24 AM

Raymond_Ndibe moved this task from Backlog to In Review on the User-Raymond_Ndibe board.

Change 753598 merged by jenkins-bot:

[wikimedia/toolhub@main] ui: Fix Locale Selection Bug in CrawlerHistory.vue

https://gerrit.wikimedia.org/r/753598

Maintenance_bot removed a project: Patch-For-Review.Jan 14 2022, 2:10 PM

Raymond_Ndibe closed this task as Resolved.Jan 17 2022, 6:00 PM

Change 770638 had a related patch set uploaded (by BryanDavis; author: Bryan Davis):

[operations/deployment-charts@master] toolhub: Bump container version to 2022-03-15-002555-production

https://gerrit.wikimedia.org/r/770638

gerritbot added a project: Patch-For-Review.Mar 15 2022, 12:34 AM

Change 770638 merged by jenkins-bot: