Refactor/fix chart label overflow

[Creylay]

Summary

Improved data visualization readability across multiple tabs by addressing label overlap issues. In the Correlations tab, replaced the bar chart with an interactive heatmap that displays the full correlation matrix with color-coded cells, inline values, and intelligent scaling. In the Overview tab, enhanced the "Missing Values" bar chart with increased bottom margin and optimized label spacing to ensure all column names display without truncation.

Problems Addressed:

1. Correlation bar chart made it difficult to correlate column pairs due to overlapping text
2. Missing Values chart didn't show all column names on the X-axis due to insufficient space

Solutions:

1. Implemented Plotly heatmap with symmetric matrix visualization for clear correlation analysis
2. Optimized chart margins and label handling in bar chart for complete visibility

---

Type of Change

Check all that apply like this [x]:

• Frontend change
• UI/UX Enhancement
• Backend change
• CI / Workflow change
• Build / Packaging change
• Bug fix
• Documentation

---

Changes (by file)

• DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx:

  • Replaced recharts BarChart with Plotly heatmap visualization for correlation matrix
  • Implemented symmetric correlation matrix calculation for all column pairs
  • Added color scale: red (negative) → white (neutral) → green (positive)
  • Enabled inline cell values displayed as correlation coefficients (0.XXX format)
  • Implemented dynamic chart height based on number of columns (min 400px, scales with data)
  • Added intelligent left margin calculation based on maximum column name length (max 300px)
  • Enhanced hover tooltips showing "Column1 — Column2, r = X.XXX" format
  • Added visual color bar legend showing correlation scale
  • Simplified strong correlations extraction using matrix data structure

• DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx:

  • Increased bottom margin in Missing Values bar chart from 120px to 150px to accommodate longer column names
  • Optimized X-axis label font size and spacing for better readability
  • Maintained -45° angle rotation but with increased horizontal space
  • Ensured all column names display without truncation using interval={0}