feat: Add more customization options for graphs in canvas

[mtrezza]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Summary by CodeRabbit

• New Features

  • Custom graph titles in the configuration dialog.
  • New toggles to show/hide legend and axis labels for graphs.
  • Graph elements now render a dedicated header with title and optional refresh control; panels can hide their internal header/footer.

• Style

  • Reduced chart min-height and adjusted container background/overflow for improved layout and scrolling.
  • Added header and container styles for clearer visual hierarchy.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds header/footer visibility props to GraphPanel, moves title/refresh into a separate header in GraphElement, introduces title/legend/axis-label controls in GraphConfigDialog, adjusts related DOM structure and styles, and updates GraphPanel styling and container layout.

Changes

Cohort / File(s)	Change Summary
GraphPanel visibility & rendering src/components/GraphPanel/GraphPanel.react.js	Added hideHeader and hideFooter props (default false); conditional rendering to omit header/footer when set.
GraphPanel styling src/components/GraphPanel/GraphPanel.scss	Removed container background color; reduced .chartContainer min-height from 300px to 100px.
Data browser wrapper DataBrowser DOM src/dashboard/Data/Browser/DataBrowser.react.js, src/dashboard/Data/Browser/Databrowser.scss	Wrapped GraphPanel in a .graphPanelContainer div and added matching .graphPanelContainer styles (height:100%, overflow:auto, background-color: #fefafb).
Graph config dialog UI src/dashboard/Data/CustomDashboard/elements/GraphConfigDialog.react.js	Added local state for title, toggles for showLegend and showAxisLabels, new inputs bound to state, and extended onSave payload to include title, showLegend, showAxisLabels.
Dashboard Graph element & layout src/dashboard/Data/CustomDashboard/elements/GraphElement.react.js, src/dashboard/Data/CustomDashboard/elements/GraphElement.scss	Compute/display title outside GraphPanel; add refresh button; pass hideHeader: true and hideFooter: true to GraphPanel; clone/modify graphConfig to surface showLegend/showAxisLabels; add header/container styles and overflow handling.
Misc / manifest package.json	Manifest touched (details in diff).

Sequence Diagram(s)

(omitted — changes are UI/composition and do not introduce a new multi-component sequential flow meeting diagram criteria)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• feat: Add customizable styles for line and bar series in data browser graph #3131 — Also modifies src/components/GraphPanel/GraphPanel.react.js (adds dataset styling / secondaryYAxisType), touching the same GraphPanel surface.
• feat: Add customizable Y-axis titles for data browser graphs #3130 — Extends graphConfig-driven chart options and axis title behavior, related to the new showAxisLabels/showLegend fields.
• feat: Add storing data browser graphs to support multiple graphs per class #3113 — Changes GraphPanel header rendering and graph-selection header, overlapping header/footer composition adjustments.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete. While the checklist boxes are marked, the required 'Issue Description' and 'Approach' sections are empty, lacking explanation of the problem solved and implementation details.	Complete the 'Issue Description' section with details about the issue being solved, and fill in the 'Approach' section describing how the customization options were implemented.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add more customization options for graphs in canvas' clearly and specifically summarizes the main change: adding hideHeader, hideFooter, title, showLegend, and showAxisLabels customization options to GraphPanel and GraphElement components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/dashboard/Data/CustomDashboard/elements/GraphConfigDialog.react.js (1)

64-79: Trim title before saving to avoid whitespace-only titles.
A whitespace-only string is currently truthy and will be saved as-is. Consider normalizing before the fallback.

💡 Proposed fix

  const handleSave = () => {
    if (!className || !graphId || !selectedGraph) {
      return;
    }

    const selectedFilter = filtersForClass.find(f => f.id === filterId);
+   const normalizedTitle = title.trim();

    onSave({
-      title: title || selectedGraph?.title || 'Graph',
+      title: normalizedTitle || selectedGraph?.title || 'Graph',
      className,
      graphId,
      graphConfig: selectedGraph,
      filterId: filterId || null,
      filterConfig: selectedFilter ? [selectedFilter] : null,
      limit: parseInt(limit, 10) || 1000,
    });
  };

🤖 Fix all issues with AI agents

In `@src/dashboard/Data/Browser/DataBrowser.react.js`:
- Around line 2202-2215: The wrapper div containing GraphPanel is mis-indented;
adjust the indentation so the opening div, its GraphPanel props block, and the
closing div align to the expected 16-space indentation used in this file (locate
the <div className={styles.graphPanelContainer}> and the nested <GraphPanel ...
/> in DataBrowser.react.js) — reformat the block so each line of the GraphPanel
JSX and the surrounding div share the same indentation level to satisfy the
linter/formatter.

In `@src/dashboard/Data/CustomDashboard/elements/GraphElement.react.js`:
- Around line 30-58: The refresh button in GraphElement (the button rendered
when onRefresh is provided, using className refreshButton and Icon name
"refresh-solid") lacks an accessible label; update the button element to include
an aria-label (e.g., "Refresh graph") and optionally a title attribute with the
same text, and ensure the Icon is marked decorative (aria-hidden="true") so
screen readers use the button's aria-label rather than the icon.

[parseplatformorg]

🎉 This change has been released in version 8.3.0-alpha.18