feat: Add expanded view for canvas elements graph, table, view

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Summary by CodeRabbit

• New Features

  • Tables, graphs, and views get an expand button to open full-screen modal views with consistent titles for improved visibility.
  • Modals support Escape key and backdrop click to close.

• Style

  • Hover and positioning updates for the expand control improve discoverability and interaction when previewing content.
  • Expanded containers now use full-width/height layouts with proper scrolling for large content.

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

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[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 a portal-based ExpandModal and integrates it into DataTableElement, GraphElement, and ViewElement; each element gains local expansion state, an expand button, extracted render helpers, and styles for expanded containers and expandButton.

Changes

Cohort / File(s)	Summary
ExpandModal (New Component) src/dashboard/Data/CustomDashboard/elements/ExpandModal.react.js, src/dashboard/Data/CustomDashboard/elements/ExpandModal.scss	New modal component rendered via a DOM portal. Handles Escape key, backdrop click, body-scroll locking, lifecycle cleanup, and provides header/close UI and animations.
DataTableElement src/dashboard/Data/CustomDashboard/elements/DataTableElement.react.js, src/dashboard/Data/CustomDashboard/elements/DataTableElement.scss	Adds isExpanded state, expand button that opens ExpandModal, extracts table rendering into renderTable, uses title helper; SCSS: refreshButton → expandButton, adds expandedTableContainer.
GraphElement src/dashboard/Data/CustomDashboard/elements/GraphElement.react.js, src/dashboard/Data/CustomDashboard/elements/GraphElement.scss	Adds isExpanded state and expand button, extracts renderGraph helper, conditionally wraps graph in ExpandModal when expanded; SCSS: refreshButton → expandButton, adds expandedGraphContainer.
ViewElement src/dashboard/Data/CustomDashboard/elements/ViewElement.react.js, src/dashboard/Data/CustomDashboard/elements/ViewElement.scss	Adds isExpanded state, title helper, renderTable extraction, expand button with ExpandModal for expanded table view; SCSS: refreshButton → expandButton, adds expandedTableContainer.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Element as Dashboard Element
    participant Modal as ExpandModal
    participant Body as Document Body

    User->>Element: Click expand button
    Element->>Element: set isExpanded = true
    Element->>Modal: render(title, children, onClose)
    Modal->>Body: create portal container (append to body)
    Modal->>Body: disable body scroll (overflow = hidden)
    Modal->>Modal: attach Escape key listener

    User->>Modal: Click close / press Escape / click backdrop
    Modal->>Element: call onClose()
    Element->>Element: set isExpanded = false
    Modal->>Modal: remove key listener
    Modal->>Body: restore body scroll
    Modal->>Body: remove portal container

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: Add custom dashboard canvas with graphs and data tables #3126: Directly modifies the same CustomDashboard element components that this PR extends; likely prior changes to these elements.
• feat: Add more customization options for graphs in canvas #3134: Touches GraphElement.react.js and GraphPanel rendering that overlap with this PR's GraphElement changes.
• feat: Allow adding View elements to canvas #3133: Introduces/changes ViewElement which this PR further modifies to add expansion and renderTable refactor.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete; it only includes boilerplate text without filling in the required 'Issue', 'Approach', and 'Tasks' sections from the template.	Complete the description by filling in the 'Closes' issue link, describing the approach/changes, and checking off completed tasks from the checklist.
Linked Issues check	⚠️ Warning	The PR description does not include a link to the related GitHub issue; the 'Closes' field was not filled out as required by the template.	Add the issue number or URL in the 'Closes' field of the PR description to properly link the issue.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding expanded view functionality to canvas elements (graph, table, and view components).
Out of Scope Changes check	✅ Passed	The changes are focused on adding expand functionality to three canvas elements; styling updates and new modal component align with the stated objectives.
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: 1

🤖 Fix all issues with AI agents

In `@src/dashboard/Data/CustomDashboard/elements/ExpandModal.react.js`:
- Around line 28-41: The effect currently sets document.body.style.overflow =
'hidden' and restores it to '' which can clobber a non-empty original value;
modify the useEffect in ExpandModal.react.js to capture the current body
overflow into a local variable (e.g., const previousOverflow =
document.body.style.overflow) before setting it to 'hidden', and then on cleanup
restore document.body.style.overflow = previousOverflow; keep the existing
removal of the keydown listener (handleKeyDown) and container cleanup as-is.

🧹 Nitpick comments (2)

src/dashboard/Data/CustomDashboard/elements/GraphElement.scss (1)

26-74: Consider extracting shared button styles to reduce duplication.

.expandButton and .refreshButton share nearly identical styling (display, alignment, sizing, background, border, cursor, border-radius, opacity, transition, z-index, and hover behavior). The only differences are margin-left: auto on expand and margin-left: -6px on refresh.

Proposed refactor using a shared base

+%headerButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  opacity: 0;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  position: relative;
+  z-index: 10;
+
+  :global(.canvasElementWrapper):hover & {
+    opacity: 1;
+  }
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
+
 .expandButton {
+  `@extend` %headerButton;
   margin-left: auto;
-  display: flex;
-  align-items: center;
-  ...
 }

 .refreshButton {
+  `@extend` %headerButton;
   margin-left: -6px;
-  display: flex;
-  align-items: center;
-  ...
 }

src/dashboard/Data/CustomDashboard/elements/DataTableElement.scss (1)

34-82: Same duplication pattern as GraphElement.scss.

The .expandButton and .refreshButton classes have near-identical styles. Consider applying the same shared base pattern suggested for GraphElement.scss to maintain consistency and reduce duplication across both files.

[parseplatformorg]

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