Create Dynamic Grid Block

[johbaxter]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

Title

Create Dynamic Grid Block

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Refactor GridBlock to use MUI DataGrid

• Add new grid-dynamic-frame data grid block

• Revise AskCSVTemplate; add VisualizeCSVTemplate

• Enhance UploadBlock; add menu tooltip & admin override

---

Changes walkthrough 📝

	Relevant files
Formatting	1 files ContainerBlock.tsx Tidy formatting in box shadow builder                                        +7/-8
Enhancement	11 files GridBlock.tsx Replace table with MUI DataGrid and features                          +274/-252 ColorByValue.tsx Update imports for new GridBlock and icons                              +4/-5      GridDynamicFrameBlock.tsx Add new dynamic data grid block component                                +251/-0  UploadBlock.tsx Add debounced onChange callback after upload                          +6/-5      DynamicGridMenu.tsx Create settings UI for dynamic grid headers                            +44/-0    AppTemplates.tsx Insert VisualizeCSVTemplate into default list                        +3/-1      AskCSVTemplate.tsx Update AskCSVTemplate layout with dynamic grid                      +75/-28  VisualizeCSVTemplate.tsx Introduce new CSV visualization app template                          +428/-0  default-menu.ts Add Dynamic Data Grid menu entry with note                              +32/-1    AddBlocksMenuCard.tsx Show tooltip for recentChanges in cards                                    +15/-1    MembersTable.tsx Support admin override in user permissions                              +53/-38
Miscellaneous	1 files GridBlockDuplicate.tsx Remove deprecated duplicate grid implementation                    +0/-441
Configuration changes	5 files config.tsx Point grid-block render to new GridBlock                                  +2/-2      config.tsx Register grid-dynamic-frame block configuration                    +60/-0    index.ts Export dynamic grid block module                                                  +2/-0      index.ts Export VisualizeCSVTemplate in templates index                      +1/-0      menu-types.ts Add recentChanges property to menu items                                  +5/-0
Code cleanup	1 files Workspace.tsx Remove unused model filtering effect                                          +0/-30
Additional files	4 files index.ts +11/-1    index.ts +1/-0      index.ts +1/-0      index.ts +2/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Hook Dependencies The useEffect that syncs frame headers to block columns references setData and frameHeaders, but they are not included in the dependency array. This can lead to stale closures or missed updates when those values change. /** * Anytime our Frame Headers, we need to sync our column block data with our source of truth ^ */ useEffect(() => { if (data.columns.length === 0 && !frameHeaders.isLoading) { // If no columns are defined, fetch the frame headers if (frameHeaders.data.list.length > 0) { syncBlockDataColumns(frameHeaders); } } }, [frameHeaders.data.list]); Invalid Comparator Handling The evaluate function parses cell values with parseFloat without guarding against non-numeric inputs. If parsing fails, NaN comparisons will always return false and may misapply color rules. Consider validating or defaulting values before comparison. const a = typeof cellValue === "number" ? cellValue : parseFloat(cellValue); const b = typeof target === "number" ? target : parseFloat(target); switch (comparator) { case "==": return a == b; case "!=": return a != b; case ">": return a > b; case "<": return a < b; case ">=": return a >= b; case "<=": return a <= b; default: return false; } Leftover Debug Code A console.log and a // TODO: NEEDS FIX ^ comment remain after overriding userDetails for adminMode. Remove or resolve this before merge to avoid noise and potential logic issues. // Update userDetails to AUTHOR if ADMIN const getMembers = useAPI(getMembersApi); const userDetails = !adminMode ? useAPI(getUserDataApi) : { data: { permission: 'OWNER', }, status: 'SUCCESS', };

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Memoize debounced callback The debounced callback is recreated on every render, losing pending invocations. Memoize the debounced function so its internal timer persists across renders. libs/renderer/src/components/block-defaults/upload-block/UploadBlock.tsx [51-53] -const debouncedCallback = debounced(() => { +const debouncedCallback = useMemo( + () => debounced(() => { listeners.onChange(); -}, 200); + }, 200), + [listeners.onChange] +); Suggestion importance[1-10]: 6 __ Why: Memoizing debouncedCallback with useMemo prevents its timer from resetting every render, ensuring pending invocations aren’t lost and improving performance.	Low
General	Fix toolbar slot conditional The toolbar slot expects a component or undefined, but passing a boolean or empty string breaks MUI slot loading. Use a conditional expression that yields GridToolbar only when a title exists, otherwise undefined. libs/renderer/src/components/block-defaults/grid-block/GridBlock.tsx [437-438] slots={{ - toolbar: titleSettings.chartTitle && GridToolbar, + toolbar: titleSettings.chartTitle ? GridToolbar : undefined, }} Suggestion importance[1-10]: 6 __ Why: Using titleSettings.chartTitle && GridToolbar can yield an empty string rather than undefined, which may break MUI slot loading; the ternary ensures a component or undefined.	Low
	Add missing effect dependencies The effect only tracks frameHeaders.data.list and ignores data.columns, which can cause stale checks or missed updates. Include data.columns.length and syncBlockDataColumns in the dependency array for correctness. libs/renderer/src/components/block-defaults/grid-block/GridBlock.tsx [154-161] useEffect(() => { if (data.columns.length === 0 && !frameHeaders.isLoading) { if (frameHeaders.data.list.length > 0) { syncBlockDataColumns(frameHeaders); } } -}, [frameHeaders.data.list]); +}, [frameHeaders.data.list, data.columns.length, syncBlockDataColumns]); Suggestion importance[1-10]: 4 __ Why: Including data.columns.length and syncBlockDataColumns in the effect’s dependency array aligns with React’s recommendations and prevents stale reads or missed updates.	Low

[github-actions]

@CodiumAI-Agent /update_changelog