More flexible widgets grid (allow finer control over height/width)

[advance512]

User should be able to control widget's placement, width and height

Current implementation

Currently editing a dashboard works as follow:

1. When adding a widget you select its width: regular (half width) or double (full width). Height is set based on the content.
2. When opening the "Edit Dashboard" dialog, you can rearrange the order of the widgets.

Issues with the current approach:

• You can't change widget size after placing it.
• You can't change widget's height.
• You can't control widget's width beyond the current two options.

Solution

To solve this we want to have a flexible (but still responsive) grid that the user can freely place and move widgets on.

• Each visualization will define minimum width and height sizes (derived from the visualization type). This will be the default sizes for the widget when placed on the grid, but the user will be able to resize it to be larger (but not smaller) afterwards.
• Once entering dashboard "edit mode", the user will be able to move around and resize the widgets in place instead of a dedicated UI.
• We should probably change other behaviors in the UI (move add widget to be part of the edit mode, change dashboard title editing to be in place, etc), but we will leave it to second iteration after the grid behavior is implemented.

Technical Notes

• We currently use angular-gridster to allow moving around the widgets in the Edit Dashboard dialog. Maybe we can use it for the grid or a similar library.
• Currently the widget knows nothing about its placement, but only its size (width). The dashboard has a layout property, which is an array of arrays of widgets ids (each item in the array is a row/array of widgets). This is error prone and makes layout changes harder. If possible, it will be better if each widget retains its own placement information.
• The API to update a widget currently supports only updating a textbox widget. We will need to extend it to support all widget types.

[arikfr]

Related: #158

[arikfr]

More flexible dashboard grid (control height, more width options)

[pdfforge]

This is open for some time now, any plans on implementing this? We would love it!

[arikfr]

As this feature is going to be implemented soon, I've updated the details. Feel free to comment.

[kravets-levko]

@arikfr Arik, I need your help with this issue. I implemented dashboard using angular-gridster, it works and looks nice, but I cannot save positions of widgets. I decided to use option property of widget to store size/position, but seems that it's not saved into database. I tried to look into backend code, but as far as I understand - it should just work, I didn't notice any special processing of options - it's just JSON-encoded/decoded and stored to DB. Do you have any idea what may be wrong?

P.S. I already pushed my code - so you can take a look if needed.

[arikfr]

@kravets-levko cool! will take a look now. It's the dashboard-editor branch?

[kravets-levko]

@arikfr Yes. Thanks! I need to implement some minor things before it will be ready, but it would not make any sense while it's not saving data

[arikfr]

@kravets-levko the WidgetResource.post handler was written to handle only text box widget updates, so it ignores all other fields. You can add the following line:

widget.options = json.dumps(widget_properties['options'])

Below this line:

redash/redash/handlers/widgets.py

Line 84 in 41ec4c8

widget.text = widget_properties['text']

.

When I did it, it still didn't work as expected, but I did see that it stores the values, so the issue is probably elsewhere.

If you open a pull request from your branch, I'll be able to commit this change (and future needed backend changes) directly to your branch.

[arikfr]

I now realize that you're using demo.redash.io to test this. I will update it to have this change as well.

(Update: done)

[kravets-levko]

@arikfr I created PR, but don't merge it for now - I'll ping you when it will be ready. Another thing that I need to ask you - about defaults. Currently I set dashboard to have 3 columns (we can set any, it's up to you), and default dimensions for widgets are initialized from width/height (does not exist currently). As I understand, we should make some changes to backend so it will return default dimensions for widgets. So I'd like to talk about it, if it's possible.

[kravets-levko]

BTW - will you update demo.redash.io now or after merging my PR?

[arikfr]

I updated demo.redash.io only with the API change.

I will answer the rest of the questions in the PR, to avoid spamming all the people subscribed to this issue :)