GSoC 18' Update 2: Drag & Resize

Prssanna Desai
Jun 1, 2018 · 2 min read

For seven days out of the last two weeks, I could not dedicate much time to GSoC because I was traveling (and that’s why this post is late).

I started by implementing resizable and draggable windows for the Data Explorer. Before this change, the explorer dialog was of a fixed size so regardless of the complexity of the query, the size of the Dialog remained the same. This made the results less readable.

The implementation was inspired by: http://gijgo.com/dialog/example/bootstrap-modal-resizable

Phabricator: T194624

Check out the Resizable and Draggable dialog in action!

Issues I faced:
The dialog would get dragged out of window initially and this wasn’t desirable. While resizing and dragging, background text would occasionally be selected. I fixed this by setting the user-select CSS property to none.

The process of resizing the window was not smooth, but I finally resolved the issue by hiding content while resizing, setting position to absolute dynamically.


What’s next?
Multiple Explorer Dialogs
In the current state of the Explorer Dialog, it is only possible to view the results query by query. I will write a feature which will make it possible to view and compare the results of more than one query at once. On clicking the explorer dialog button, a new dialog will open at the same position. Dragging and resizing it will allow the user to view the query results side by side.

Improvements to Draggability and Resizability features
I will continue to make adjustments to these features as per community feedback.

Thanks for reading, see you around! :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade