3 replies

Convex schema/functions design advice for dashboard app

We're building a dashboard-focused web app and need Convex schema/function design advice for handling frequent layout updates efficiently.

Our data model:
- Users create multiple dashboards (~30 per user)
- Each dashboard contains multiple widgets that can be:
- Dragged and resized (x, y, width, height positions)
- Configured with ~10 settings parameters each
- Added/removed dynamically
- Users frequently switch between dashboards (querying full dashboard state)
- Users regularly move/resize widgets (mutating widget's position data)
- Users regularly configure widgets' settings parameters (mutating widget's settings config data)

Some constraints:
- Grid libraries like React Grid Layout provide the entire layout state on each change (not diffs)
- Moving one widget often repositions others automatically
- Users expect snappy drag/resize without lag
- Switching between dashboards should feel fast

Schema options we're considering:

Option A: Normalized

- users
- dashboards (id, name, userId)  
- widgetInstances (id, dashboardId, x, y, width, height, widgetType, settings)

- users
- dashboards (id, name, userId)  
- widgetInstances (id, dashboardId, x, y, width, height, widgetType, settings)

Option B: Hybrid

- users
- dashboards (id, name, userId, layout: [{widgetId, x, y, w, h}])
- widgetInstances (id, dashboardId, widgetType, settings)

- users
- dashboards (id, name, userId, layout: [{widgetId, x, y, w, h}])
- widgetInstances (id, dashboardId, widgetType, settings)

Option C: Document-centric

- users  
- dashboards (id, name, userId, state: {layout: [...], configs: {...}})

- users  
- dashboards (id, name, userId, state: {layout: [...], configs: {...}})

Option D: Something else?

I'm looking for any advice or best practices on how to design our schema and queries/mutations to make sure we properly take advantage of Convex's strengths, performance, layout engine constraints while ensuring cost efficiency, performance.

Thank you.

Convex schema/functions design advice for dashboard app

- users
- dashboards (id, name, userId)  
- widgetInstances (id, dashboardId, x, y, width, height, widgetType, settings)

- users
- dashboards (id, name, userId)  
- widgetInstances (id, dashboardId, x, y, width, height, widgetType, settings)

Option B: Hybrid

- users
- dashboards (id, name, userId, layout: [{widgetId, x, y, w, h}])
- widgetInstances (id, dashboardId, widgetType, settings)

- users
- dashboards (id, name, userId, layout: [{widgetId, x, y, w, h}])
- widgetInstances (id, dashboardId, widgetType, settings)

Option C: Document-centric

- users  
- dashboards (id, name, userId, state: {layout: [...], configs: {...}})

- users  
- dashboards (id, name, userId, state: {layout: [...], configs: {...}})

Convex schema/functions design advice for dashboard app

Similar Threads

Convex schema/functions design advice for dashboard app

Similar Threads

Similar Threads

Similar Threads