[SPIKE] echarts camera scroll + React Axis Component Sync

[tihuan]

1. As a user, I want to be able to smoothly scroll through the heatmap visualization without any performance issue

2. As a user, I want to see the row and column labels in the heatmap remain aligned with the data points as I scroll through the visualization.

3. Potentially contribute to echarts by taking over this PR to add mousepad panning, which I assume we need

4. Share the spike result with Single Cell and the heatmap group in Slack #sci-heatmap

[dsadgat]

@masoudmanson have you started work on this?

[masoudmanson]

@dsadgat I'll start on this ticket this week during the sprint.

[cathystoli]

3 story point for the remaining work that is completing the demo that uses that includes the single cell react axis

cc @tihuan and @dsadgat

[masoudmanson]

Demo and Feature Implementation

• Synchronizing a custom x-axis component with Apache ECharts.
• Implementing highlight feature for user interaction.
• Enabling highlighting of single items, rows, columns, or combinations.
• Providing live demo at https://apache-echarts-camera-scroll.vercel.app/

The task involves synchronizing a custom x-axis component with Apache ECharts and implementing a highlight feature. Users will be able to highlight individual items, entire rows, entire columns, or combinations of rows and columns. A live demo showcasing these features is available at the provided link.

@tihuan @dsadgat

[tihuan]

Wow this is incredible 🤩 👏 !! Thanks so much for the amazing demo, Masoud!

Also really appreciate you taking the time to go above and beyond to not only test the camera effect, but also highlighting in items, row, column, and cross, as well as producing such a polished interactive demo 🙏

You're amazing!

Looks like camera effect is a go 🚀

[tihuan]

@masoudmanson could you help document your findings on learnings and limitations of this approach, and what areas we might need to spend more time on optimizing please?

For example, the 1500x1500 example is still interactive for scrolling and highlighting, but not as smooth as 1000x1000 or lower. Do you have any ideas on what could be causing the slow down in performance, so we can look out for those?

Originally our assumption was that since camera effect renders a fixed size of items in the window, the interactive performance should be constant regardless of the actual matrix size, but that doesn't seem to be exactly the case. Just wondering if you discovered areas we need to investigate more later 😄

Thanks again!