Re: PATCH: graphical explain

From: Sanket Mehta <sanket(dot)mehta(at)enterprisedb(dot)com>
To: Dave Page <dpage(at)pgadmin(dot)org>
Cc: pgadmin-hackers <pgadmin-hackers(at)postgresql(dot)org>
Subject: Re: PATCH: graphical explain
Date: 2016-04-19 09:59:59
Message-ID: CA+yw=mN5bt-rCwj=n_DM8zsDptFMAEfXTevqbwF+4xFMCf9aCA@mail.gmail.com
Views: Raw Message | Whole Thread | Download mbox | Resend email
Thread:
Lists: pgadmin-hackers

Hi,

On Mon, Apr 18, 2016 at 5:38 PM, Dave Page <dpage(at)pgadmin(dot)org> wrote:

>
>
> On Monday, April 18, 2016, Sanket Mehta <sanket(dot)mehta(at)enterprisedb(dot)com>
> wrote:
>
>> Hi Dave,
>>
>> Regarding your second comment,
>> Almost all the libraries that I have checked uses Jquery UI which is
>> quite heavy.
>> Please share your comments about using these libraries.
>>
>
> What have you found?
>
Below are the libraries I have checked out which uses JQUERY UI.

- https://github.com/princejwesley/minimap/blob/master/src/minimap.js

- https://github.com/samcroft/mini-map (alpha release only)

-
http://www.jqueryscript.net/text/Sublime-Text-Like-Web-Page-Minimap-Plugin-For-jQuery.html

-
http://www.jqueryscript.net/other/jQuery-Plugin-To-Create-A-Flexible-Web-Page-Minimap-minimap-js.html

- https://github.com/goldenapples/jquery.minimap

- https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-minimap/ (not
free)

- http://codepen.io/billdwhite/pen/lCAdi (depends upon d3 library)

- http://blog.urvatechlabs.com/minimap-jquery-plugin/

- http://jsfiddle.net/ARTsinn/gbSSw/

- http://jsfiddle.net/danimt/ARVWA/ (depends upon L library)

- http://atom-minimap.github.io/minimap/

- http://js-tutorial.com/minimap-a-preview-of-the-full-web-page-1334

Some of them uses or depends upon different libraries (mentioned besides
the link)

>
>>
>>
>> Meanwhile currently I have implemented zoom in/out functionality in
>> graphical explain.
>> I have added two buttons on left top corner of panel (see the attached
>> screen shot),
>> which you can use to zoom in/out the graph.
>>
>> Please do review it and let me know your comments about them.
>>
>
> I have tested the code, so no screenshots necessary :-).
>
> The problem with the zoom is that it doesn't give you any visual
> indicators that there is something on the canvas. With a big plan, it'll
> just look blank, unless the user starts scrolling/zooming. The viewport
> will give instant hints to the user that there's a big plan there, albeit
> out of view, and allow them to very easily navigate it.
>
>
>>
>> Regards,
>> Sanket Mehta
>> Sr Software engineer
>> Enterprisedb
>>
>> On Wed, Apr 13, 2016 at 2:23 PM, Dave Page <dpage(at)pgadmin(dot)org> wrote:
>>
>>> Hi,
>>>
>>> A couple of comments following a quick test:
>>>
>>> 1) Some of the horizontal lines are not actually horizontal - they
>>> noticeably drop down. Please see the attached screenshot.
>>>
>>> 2) I thought we were going to use a "viewport" to allow the user to
>>> navigate through the diagram? I was thinking of displaying a thumbnail
>>> with viewport in the top-left, with the main view being synchronised
>>> to the viewport position/zoom level - for example, look at the 2D Zoom
>>> example on http://www.ajax-zoom.com/. Something like Croppie might
>>> help: http://foliotek.github.io/Croppie/ (as ajax-zoom is not free).
>>>
>>> On Tue, Apr 12, 2016 at 11:36 AM, Sanket Mehta
>>> <sanket(dot)mehta(at)enterprisedb(dot)com> wrote:
>>> > Hi,
>>> >
>>> > Please do ignore previous patch as it contains trailing whitespaces.
>>> > PFA the revised patch after resolving this issue.
>>> >
>>> >
>>> >
>>> > Regards,
>>> > Sanket Mehta
>>> > Sr Software engineer
>>> > Enterprisedb
>>> >
>>> > On Mon, Apr 11, 2016 at 10:04 PM, Sanket Mehta
>>> > <sanket(dot)mehta(at)enterprisedb(dot)com> wrote:
>>> >>
>>> >> Hi,
>>> >>
>>> >> PFA the patch for graphical explain feature.
>>> >>
>>> >> It consists of explain.js, __init__.py and demo_explain.html,
>>> snap_svg.js
>>> >> and snap_svg-min.js file.
>>> >>
>>> >> Currently I have placed hard coded JSON data in demo_explain.html
>>> file to
>>> >> display graphical output; which will be replace by actual output user
>>> get
>>> >> from server in JSON format.
>>> >>
>>> >> Use below URL to access graphical output:
>>> >>
>>> >> http://localhost:5050/misc/explain where 5050 is the port your web
>>> server
>>> >> is running on
>>> >>
>>> >> To test the patch, user can replace plan data (stored in 'data'
>>> variable)
>>> >> in demo_explain.html with other valid plan data in JSON format and
>>> run the
>>> >> above URL.
>>> >>
>>> >> Please review the patch and provide comments for the same.
>>> >>
>>> >> TODO: Integration of graphical explain into sql editor
>>> >>
>>> >>
>>> >> Regards,
>>> >> Sanket Mehta
>>> >> Sr Software engineer
>>> >> Enterprisedb
>>> >
>>> >
>>> >
>>> >
>>> > --
>>> > Sent via pgadmin-hackers mailing list (pgadmin-hackers(at)postgresql(dot)org)
>>> > To make changes to your subscription:
>>> > http://www.postgresql.org/mailpref/pgadmin-hackers
>>> >
>>>
>>>
>>>
>>> --
>>> Dave Page
>>> Blog: http://pgsnake.blogspot.com
>>> Twitter: @pgsnake
>>>
>>> EnterpriseDB UK: http://www.enterprisedb.com
>>> The Enterprise PostgreSQL Company
>>>
>>
>>
>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
>

In response to

Responses

Browse pgadmin-hackers by date

  From Date Subject
Next Message Ashesh Vashi 2016-04-19 18:18:58 pgAdmin 4 commit: Added missing dependent javascript 'jquery.aciFragmen
Previous Message Neel Patel 2016-04-19 06:29:57 Re: [pgAdmin4][Debugger]: Initial Patch