Received: from malur.postgresql.org ([217.196.149.56]) by arkaria.postgresql.org with esmtp (Exim 4.84_2) (envelope-from ) id 1asSSH-00023V-KG for pgadmin-hackers@arkaria.postgresql.org; Tue, 19 Apr 2016 10:00:25 +0000 Received: from localhost ([127.0.0.1] helo=postgresql.org) by malur.postgresql.org with smtp (Exim 4.84_2) (envelope-from ) id 1asSSG-0001wK-Ci for pgadmin-hackers@arkaria.postgresql.org; Tue, 19 Apr 2016 10:00:24 +0000 Received: from makus.postgresql.org ([2001:4800:1501:1::229]) by malur.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA384:256) (Exim 4.84_2) (envelope-from ) id 1asSS2-0001fJ-HL for pgadmin-hackers@postgresql.org; Tue, 19 Apr 2016 10:00:10 +0000 Received: from mail-vk0-x230.google.com ([2607:f8b0:400c:c05::230]) by makus.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA1:256) (Exim 4.84_2) (envelope-from ) id 1asSRt-0004oz-Jc for pgadmin-hackers@postgresql.org; Tue, 19 Apr 2016 10:00:09 +0000 Received: by mail-vk0-x230.google.com with SMTP id n62so12851385vkb.0 for ; Tue, 19 Apr 2016 03:00:01 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=enterprisedb-com.20150623.gappssmtp.com; s=20150623; h=mime-version:in-reply-to:references:date:message-id:subject:from:to :cc; bh=l3JeD70IJsqrnxhL11Y1Ws8a21R9U3+OF9DwaPu2qlA=; b=XqiBEoMo9VgK1q7AkUldVgQe2lVmUKkOadrB0Mx4NF+tRBvYj5eqqlTiZ6g/S0Ov3c 3YU85bSvsdivsPg7C/XtuG/oi1kUmjeGTyBOyq3y54Nx9OpqCixrjtDhToMAX5j0bHG+ DX9m8Nro9Rr7B/Wpyha2lWuBlbBnYLwf2EvsM1Nu+u89QW3Nm5A9WLOF8lyM95WfTh0Z YmPnP5xxI+x6A9Ezp5so2LB3yxjVmhqftnMZXhTLkjCeoAigeLRpZEwqYWfEEefwgWeD Adk5KxKaHiPZ2gzxoLcdhEPLbQqLGGhC4ewjkNM8RDWUkBlfTlubqCm+rNTqbGVk824p 7mGw== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20130820; h=x-gm-message-state:mime-version:in-reply-to:references:date :message-id:subject:from:to:cc; bh=l3JeD70IJsqrnxhL11Y1Ws8a21R9U3+OF9DwaPu2qlA=; b=GAWOZWEgGcByl4p+/fuYHsrNv+IswwJcKVxWblZgII91ACBwzGl0zKSuGl3jV9Amez /sw31rV3sn6xnaqcZQ6yEoas33hMrW+nV+lNBxKXl7ikNdOCh5G1Gl/8MkpvmhYXTPCj TjEM7f5hXRBlZz03Pe4kR0PnIGdDGwAhERsdqrf9eo0DTYFDVwEa7lM68BBb/1Gs7QWj YZINaCn7Uox/vnt2WpiKb4qzT5mp84mrFF7r7mbDjmuoZcUBwxVAc1eifElRTNNGg0uF TEIITuOMyD914MAFqniiobNTsqv6vtuBpWiZ9CJR1FV4MUSbpphVzpWyE8T2VxQ8DYG6 vfJg== X-Gm-Message-State: AOPr4FVm8ROIwQ9ICp5ySkuHYEGoNnMGbzkt9vJatmGMPibxHODJTDwNLU2Kr5tSJY5IpYta8XGUOopIb5svU5G+ MIME-Version: 1.0 X-Received: by 10.176.1.79 with SMTP id 73mr1041128uak.50.1461059999894; Tue, 19 Apr 2016 02:59:59 -0700 (PDT) Received: by 10.31.164.75 with HTTP; Tue, 19 Apr 2016 02:59:59 -0700 (PDT) In-Reply-To: References: Date: Tue, 19 Apr 2016 15:29:59 +0530 Message-ID: Subject: Re: PATCH: graphical explain From: Sanket Mehta To: Dave Page Cc: pgadmin-hackers Content-Type: multipart/alternative; boundary=001a1141482c4a27bb0530d38a2f X-Pg-Spam-Score: -2.6 (--) List-Archive: List-Help: List-ID: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: X-Mailing-List: pgadmin-hackers Precedence: bulk Sender: pgadmin-hackers-owner@postgresql.org --001a1141482c4a27bb0530d38a2f Content-Type: text/plain; charset=UTF-8 Hi, On Mon, Apr 18, 2016 at 5:38 PM, Dave Page wrote: > > > On Monday, April 18, 2016, Sanket Mehta > 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 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 >>> 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 >>> > 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@postgresql.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 > > --001a1141482c4a27bb0530d38a2f Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable
Hi,

On Mon, Apr 18, 2016 at 5:38 PM, Dave Page <dpage@pgadmin.org&g= t; wrote:


On Monday, Ap= ril 18, 2016, Sanket Mehta <sanket.mehta@enterprisedb.com> wrote:
Hi Dave,

Regarding your se= cond comment,=C2=A0
Almost all the libraries that I have checked = uses Jquery UI which is quite heavy.
Please share your comments a= bout using these libraries.

<= div>What have you found?
Below are the libraries I h= ave checked out which uses JQUERY UI.



=C2=A0-=C2=A0<= a href=3D"https://github.com/goldenapples/jquery.minimap">https://github.co= m/goldenapples/jquery.minimap


=C2=A0-=C2=A0http://codepen.io/billdwhite/pen/lCAdi (depends upon = d3 library)


<= div>
=C2=A0-=C2=A0http://jsfiddle.net/danimt/ARVWA/ (depends upon L library)



Some of them uses or depends upon dif= ferent libraries (mentioned besides the link)

=C2=A0


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.

Ple= ase do review it and let me know your comments about them.

I have tested the code, so no screenshot= s necessary :-).

The problem with the zoom is that= it doesn't give you any visual indicators that there is something on t= he canvas. With a big plan, it'll just look blank, unless the user star= ts 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 e= asily navigate it.
=C2=A0
=

Regards,
Sanket Mehta
Sr Software engineer
Enterprisedb

On Wed, Apr 13, 2016 at 2:23 PM, Dave Page <= span dir=3D"ltr"><dpage@pgadmin.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.mehta@enterprisedb.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.mehta@enterprisedb.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 u= ser 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@postgresql.o= rg)
> To make changes to your subscription:
> http://www.postgresql.org/mailpref/pgadmin-ha= ckers
>



--
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


--001a1141482c4a27bb0530d38a2f--