Fix visualization chart not expanded after legend toggle

[wanglam]

Description

This PR fixes an issue where the chart was not expanding after hiding the legend. The root cause was that the VisLegend component was using vis.getUiState() as the uiState in the vis_controller, which was different from the uiState in the VisualizationChart component. According to the code in visualization_chart, it was using this.props.uiState. Therefore, changes to vis.legendOpen were not triggering a re-render in VisualizationChart.

To resolve this issue, I added a uiState synchronization logic in src/plugins/visualizations/public/expressions/visualization_renderer.tsx. This logic compares the visState in vis and calls setState to ensure that the two uiState instances are the same. As a result, the chart will be resized correctly.

Issues Resolved

#9143

Testing the changes

1. Import "Sample web logs" sample data
2. Create a new dashboard with "(Line) Avg bytes over time"
3. Update a close time range like "15 seconds ago", the chart will become no results like screenshot below
   
4. Update time range to very early like "15 years ago"
5. Click "Toggle legend" on the bottom left, the chart should expanded after legend hide
   

Changelog

• fix: Visualization chart not expanded after legend toggle

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 61.05%. Comparing base (e1b12ab) to head (337ef1c).
Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9170      +/-   ##
==========================================
+ Coverage   61.01%   61.05%   +0.03%     
==========================================
  Files        3813     3813              
  Lines       91401    91403       +2     
  Branches    14443    14444       +1     
==========================================
+ Hits        55772    55805      +33     
+ Misses      32067    32028      -39     
- Partials     3562     3570       +8     

Flag	Coverage Δ
Linux_1	29.13% <100.00%> (+0.04%)	⬆️
Linux_2	56.45% <ø> (ø)
Linux_3	38.03% <0.00%> (-0.01%)	⬇️
Linux_4	29.03% <ø> (ø)
Windows_1	29.14% <100.00%> (+0.04%)	⬆️
Windows_2	56.40% <ø> (ø)
Windows_3	38.03% <0.00%> (-0.01%)	⬇️
Windows_4	29.03% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ashwin-pc]

Nice! Thanks :)

[AMoo-Miki]

I am concerned that handlers.uiState has a type of any while vis.setUiState is expecting PersistedState.

[wanglam]

You're right, but I think it's not a big issue. According the implementation in the Visualization component, the uiState has already been assigned to the vis object. The vis.uiState always be an empty since vis object recreated in every render. To address this any concern, how about add a type assertment in the compare condition. Refactor code like below:

if (uiState instanceof PersistedState && vis.getUiState() !== uiState) {
      vis.setUiState(uiState);
}

[SuZhou-Joe]

Nit: Should we do a deep compare?

[wanglam]

vis.getUiState() should always be an empty object in this place. Since we construct a new ExpVis object above. The uiState of this object should be empty too.