The default display of react grid layout when no options or some options defined should load and display without overlapping elements. We want to tackle this for a range of cases including:
Plot
Configuration in plot-sample-config.js to test the use case
Only 1 plot
gudmap-todate-bar-1-plot
1 plot and 1 global user control
heatmap-global
1 plot with 3 local user controls
gudmap-todate-bar-swapped-global
3 plots
gudmap-todate-bar-3-plot
2 plots with local user controls and a global user control
How do we want to handle the case where grid config/layout is not defined in config file?
In such instances, our current approach involves using a default grid configuration and layout internally. This default configuration arranges all controls and plots in a vertical stack, one after the other.
How do we want to handle spacing and sizing when they might contradict each other?
For example, grid_layout_config might have a width, each layout in the layout [] has a width (w in the configuration), and each plot might have a width defined (plotly.layout.width in the configuration).
what should we do if plotly.layout.width > layout[0].w?
should the plot width be ignored?
should it be drawn as is and have the plot overflow the parent container?
what should we do if plotly.layout.width < layout[0].w?
should the plot width be kept as it?
should it be stretched to fill up the whole react grid item container?
How do we wanna handle the case where only one breakpoint/layout/cols value is provided in config file?
For example, cols: 12, breakpoint: {lg: 1000}layout: lg: [{ source_uid: 'consortium', x: 0, y: 0, w: 2, h: 1, static: true, }], then
what should be supplied to the ResponsiveReactGridLayout?
breakpoint, layout: If only one breakpoint and layout is provided the ResponsiveGridLayout will apply the same for all screen sizes. So it will be 'one for all' screen layout.
cols: If cols is just a number, internally it should be supplied to all the breakpoints defined.
How do we wanna handle the case where no breakpoints parameter is provided in config file?
In this scenario, our code should automatically apply default breakpoints, while maintaining the user-provided layout across all of them. The same principle also applies to the cols value, where the same cols value will be assigned to all the default breakpoints.
NOTE: Currently, setting the customized control width for larger screens without a defined layout appears somewhat complex with the current defaults set for grid layout. As per the discussion, it has been determined to be of lower priority.
gudmap-todate-bar-1-plotheatmap-globalgudmap-todate-bar-swapped-globalgudmap-todate-bar-3-plotgudmap-todate-bar-globalThe following is from a comment in issue #161
How do we want to handle the case where grid config/layout is not defined in config file?
How do we want to handle spacing and sizing when they might contradict each other?
For example,
grid_layout_configmight have awidth, eachlayoutin thelayout []has a width (win the configuration), and each plot might have a width defined (plotly.layout.widthin the configuration).plotly.layout.width > layout[0].w?plotly.layout.width < layout[0].w?How do we wanna handle the case where only one breakpoint/layout/cols value is provided in config file?
cols: 12,breakpoint: {lg: 1000}layout: lg: [{ source_uid: 'consortium', x: 0, y: 0, w: 2, h: 1, static: true, }], thenHow do we wanna handle the case where no
breakpointsparameter is provided in config file?colsvalue, where the samecolsvalue will be assigned to all the default breakpoints.NOTE: Currently, setting the customized control width for larger screens without a defined layout appears somewhat complex with the current defaults set for grid layout. As per the discussion, it has been determined to be of lower priority.