Received: from malur.postgresql.org ([217.196.149.56]) by arkaria.postgresql.org with esmtp (Exim 4.84_2) (envelope-from ) id 1d5Db6-0006gq-2Z for pgadmin-hackers@arkaria.postgresql.org; Mon, 01 May 2017 15:50:48 +0000 Received: from localhost ([127.0.0.1] helo=postgresql.org) by malur.postgresql.org with smtp (Exim 4.84_2) (envelope-from ) id 1d5Db5-0001Ct-LI for pgadmin-hackers@arkaria.postgresql.org; Mon, 01 May 2017 15:50:47 +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 1d5Db4-00019P-Ml for pgadmin-hackers@postgresql.org; Mon, 01 May 2017 15:50:47 +0000 Received: from mail-ua0-x229.google.com ([2607:f8b0:400c:c08::229]) by makus.postgresql.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_CBC_SHA1:256) (Exim 4.84_2) (envelope-from ) id 1d5Db1-0004GO-8T for pgadmin-hackers@postgresql.org; Mon, 01 May 2017 15:50:45 +0000 Received: by mail-ua0-x229.google.com with SMTP id 110so68350526uas.3 for ; Mon, 01 May 2017 08:50:42 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=pivotal-io.20150623.gappssmtp.com; s=20150623; h=mime-version:in-reply-to:references:from:date:message-id:subject:to :cc; bh=5nVH6hze1XqdPb/vflsptAcEq5DmNUGc1RDliQuUmG8=; b=cHY/MQLsWfy24l6PX/AsahLxZh5rA2Zxfb12N6q0ywqR8usIS97zitMIoFwklUtDOa X/Dv+l3V0Rp9jnIt9kTk0dfryZMSTQq0rGYYmNZo6E4ychll9IhB3hx1SE+QmjkGaA0a UNjLQzElIzI1srw/7T1Y+5xwwYqa9l3pGtOzLSIds2/4xjz2Di4zsrCXgS2Nfr5ecYSH FF+Xmd+sB4NZwRu1NHixenhMNOaq4gVAtW2lS4UbtKMDFpq6omTW3/Jofz7stcNqdspH WJl6rm+7DqjOKNRLwU4Sk8sRB4WKwvos33jY6RceVgzYq9fuCDqzuzIHIHiyViroZyYT ZQHw== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20161025; h=x-gm-message-state:mime-version:in-reply-to:references:from:date :message-id:subject:to:cc; bh=5nVH6hze1XqdPb/vflsptAcEq5DmNUGc1RDliQuUmG8=; b=JS+bt7+H9JEZuXYgyq7TkWFUktBXc+XjtJcWm2/LQRmY3sqMS7WpJHnnP/rBApbDeb y+susJUlr6RwdC/WB6Sj0lU0elCgXDYCwSt51VLbNiFrmcKz/Uq0OHW8XElvOtsmHeFy 8wSq7EyLZp4mK7Yu2f3TrfTQ2w88VyJ8Xj2MkxD11hP30qaR/+e+cvK7HpktyGqH/v4P vfOSu/YS3xMWRcdeEeGYym7gCQsxk7N3vijwD+q4s/FLUYOvg8bPz+e71YP81RGQqErW eYckhpmJoZ+f68mNlC4UQpn8QKj1kGeV4ltuLgyJiJzFkvHLTX36p+nNnu0NH3KyG5nS YAIw== X-Gm-Message-State: AN3rC/5VwnYL/VcakGSZXNGHyTn810M5Yh7q12C56JOU6pmQlPdHvtdZ GKRQ8AP9gXzkgioqLg276wtgM47PvkfE X-Received: by 10.176.23.227 with SMTP id p35mr4957650uaf.155.1493653841522; Mon, 01 May 2017 08:50:41 -0700 (PDT) MIME-Version: 1.0 Received: by 10.103.10.199 with HTTP; Mon, 1 May 2017 08:50:41 -0700 (PDT) In-Reply-To: References: From: Joao Pedro De Almeida Pereira Date: Mon, 1 May 2017 11:50:41 -0400 Message-ID: Subject: Re: Pains and thoughts about refactoring the Tree Menu using React To: Ashesh Vashi Cc: pgadmin-hackers , Matthew Kleiman Content-Type: multipart/alternative; boundary=f403043ef890a45857054e786253 X-Pg-Spam-Score: -1.9 (-) 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 --f403043ef890a45857054e786253 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: quoted-printable > > > Apart from them, we also need to understand, how the tree traversal will > work. > How would you traverse through a particular node, and expand all its > parent? In the PoC that we sent with React Tree email we added a service that as a function called buildURL, that would map into the GenerateURLAdaptor, and this function will create the URL to retrieve the child nodes of a specific node. Once we have retrieved those child nodes from the backend api, we would simply add the new nodes as children in the tree. Joao & Matt On Fri, Apr 28, 2017 at 5:51 AM, Ashesh Vashi wrote: > On Sat, Apr 22, 2017 at 12:17 AM, Joao Pedro De Almeida Pereira < > jdealmeidapereira@pivotal.io> wrote: > >> Hi Hackers, >> >> After a conversation with Dave we believe that we need to provide more >> context on our pains and what we propose as a first step for implementin= g >> the Tree Menu using React. >> >> The pain: >> >> Here is a quick description of what we think we understand and where we >> got stuck while doing our refactor. >> >> If you look at the above image, both the NodeJS and CollectionJS classes >> are templates. Our goal was to extract those from being templates so tha= t >> we could test them. We started with the generate_url function. The issue= we >> ran into was that the generate_url function is inherited by CollectionJS >> from NodeJS but then over writes some of the functionality that it >> inherits. In order to have one function that our react component would >> delegate to, we have to consolidate these two class methods. This turned >> out to be a non-trivial refactor due to the lack of tests/documentation. >> >> Our proposal: >> >> >> This diagram represents what we believe can be our first approach to >> updating the tree. We can create a very basic tree that only does tree >> stuff (Open Node, Close Nodes) and then delegates to other adapters to >> execute all the business logic functionality (Generate URLs to get the >> node, Right Click menu, =E2=80=A6) >> > We will loose the current extendible architecture of by creating fix > number of adapters, instead - we should generates events like right now, > let the modules/extensions decide - what to do. > > There are many operations are dependents on the tree events. > e.g. > - Before open > When server node is being opened, 'beforeopen' event checks if server is > connected, or not. > If not try to connect it, otherwise it does not let it open it > > - Added > Dependent modules libraries are loaded, when a particular type of node is > added. > i.e. When the first database node is added in the tree, it loads all the > schema level, and other javascript modules. > > - Selected > When any of the node is added, it shows properties of the selected, chang= e > the dashboard context (if necessary). > > Current tree generates many events. > beforeload, beforeappend, added, appended, loaded, init, beforeselect, > selected, beforefocus, focused, focus, blurred, beforetoggle, beforeopen, > openned, toggled, etc. > > We generate 'pgadmin-browser:tree' events on a pgBrowser.Events objects t= o > be used by different modules. > At the moment, 'pgadmin-browser:tree:selected' is widely used by > different modules. > i.e. SQL, dependents, dependencies, properties, Dashboard, etc. > > If you want to see the complete list of events generated, you can use the > following patch. > > *diff --git a/web/pgadmin/browser/static/js/datamodel.js > b/web/pgadmin/browser/static/js/datamodel.js* > *index 5b1c3a7..575c78d 100644* > *--- a/web/pgadmin/browser/static/js/datamodel.js* > *+++ b/web/pgadmin/browser/static/js/datamodel.js* > *@@ -1149,5 +1149,10 @@ function(_, pgAdmin, $, Backbone) {* > > * pgBrowser.Events =3D _.extend({}, Backbone.Events);* > > *+ pgBrowser.Events.on(* > *+ 'pgadmin-browser:tree', function() {* > *+ console.log(arguments[0]);* > *+ });* > *+* > * return pgBrowser;* > * });* > > Apart from them, we also need to understand, how the tree traversal will > work. > How would you traverse through a particular node, and expand all its > parent? > > >> Asks: >> >> - >> >> Are there any more operation that currently are being triggered by >> the tree? If so we need to add them to the Adapter List. >> >> Please see my above comments. > >> >> - >> >> Because we lack the context and knowledge of the current tree >> implementation, we need your help to extract these methods from the p= laces >> they are currently in. We believe that a good place to start would be >> writing tests for and implementing the generation of URLs used to fet= ch the >> child nodes. >> >> Attached you can find an example of the JavaScript tests that we have >> been writing that can be applied to this extracted method. >> > You may want to start from here: > https://www.pgadmin.org/docs4/dev/code_snippets.html#nodeview > > Every tree node is inherited from this class, you can start looking at th= e > DatabaseView, and DatabaseModule class. > > -- Thanks, Ashesh > >> >> Thanks >> >> Rob, Oliver & Joao >> >> > --f403043ef890a45857054e786253 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable

Apart from them= , we also need to understand, how the=C2=A0tree=C2=A0traversal will work.
How would you trave= rse through a particular node, and expand all its parent?
=
=C2=A0In the PoC that we sent with React Tree email=C2=A0we added a service that as a f= unction called buildURL, that wo= uld map into the GenerateURLAdaptor, and this function will create the URL to retrieve the child nodes of a= specific node. Once we have retrieved those child nodes from the backend a= pi, we would simply add the new nodes as children in the tree.
Joao & Matt


On Fri, Apr 28, 2017 at 5:51 AM, Ashe= sh Vashi <ashesh.vashi@enterprisedb.com> wrote:<= br>
On Sat, Apr 22, 2017 at 12:1= 7 AM, Joao Pedro De Almeida Pereira <jdealmeidapereira@pivotal.= io> wrote:

Hi Hackers,


After a conversation with Dave we believe that we need to provide mor= e context on our pains and what we propose as a first step for implementing= the Tree Menu using React.


The pain:

Here is a quick description of w= hat we think we understand and where we got stuck while doing our refactor.=


Our proposal:

=


This diagram represents what w= e believe can be our first approach to updating the tree. We can create a v= ery basic tree that only does tree stuff (Open Node, Close Nodes) and then = delegates to other adapters to execute all the business logic functionality= (Generate URLs to get the node, Right Click menu, =E2=80=A6)

We will loose the current extendible arc= hitecture of by creating fix number of adapters, instead - we should genera= tes events like right now, let the modules/extensions decide - what to do.<= /div>

There are many operations are dependents on the tr= ee events.
e.g.
- Before open
When server nod= e is being opened, 'beforeopen' event checks if server is connected= , or not.
If not try to connect it, otherwise it does not let it = open it

- Added
Dependent modules librar= ies are loaded, when a particular type of node is added.
i.e. Whe= n the first database node is added in the tree, it loads all the schema lev= el, and other javascript modules.

- Selected
=
When any of the node is added, it shows properties of the selected, ch= ange the dashboard context (if necessary).

Current= tree generates many events.
beforeload, beforeappend, added= , appended, loaded, init, beforeselect, selected, beforefocus, focused, foc= us, blurred,=C2=A0beforetoggle,=C2=A0beforeopen, openned, toggled, etc= .

We generate 'pgadmin-browser:tree'= events on a pgBrowser.Events objects to be used by different modules.
At the moment, 'pgadmin-browser:tree:selected' is widely= used by different modules.
i.e. SQL, dependents, dependencies, p= roperties, Dashboard, etc.

If you want to see the = complete list of events generated, you can use the following patch.

diff --git a/web/pgadmin/browser/static/js/datamodel.js b/web/pga= dmin/browser/static/js/datamodel.js
index 5b1c3a7..575c78d 100644
--- a/web/pgadmin/browser/static/js/datamodel.js
+++ b/web/pgadmi= n/browser/static/js/datamodel.js
@@ -1149,5 +1149,10 @@ function(_,= pgAdmin, $, Backbone) {

=C2=A0 =C2=A0 =C2=A0pgBrowser.Events = =3D _.extend({}, Backbone.Events);

+ =C2=A0 =C2=A0pgBrowser.Even= ts.on(
+ =C2=A0 =C2=A0 =C2=A0'pgadmin-browser:tree', function() = {
+ =C2=A0 =C2=A0 =C2=A0 =C2=A0console.log(arguments[0]);
+ =C2=A0 = =C2=A0 =C2=A0});
+
=C2=A0 =C2=A0 =C2=A0return pgBrowser;
=C2=A0});= =C2=A0

Apart from them, we also n= eed to understand, how the tree traversal will work.
How would yo= u traverse through a particular node, and expand all its parent?


Asks:

  • Are there any mor= e operation that currently are being triggered by the tree? If so we need t= o add them to the Adapter List.

Please see my above comments.=C2=A0

  • Because w= e lack the context and knowledge of the current tree implementation, we nee= d your help to extract these methods from the places they are currently in.= We believe that a good place to start would be writing tests for and imple= menting the generation of URLs used to fetch the child nodes.

Attached you can find an exampl= e of the JavaScript tests that we have been writing that can be applied to = this extracted method.


= Every tree node is inherited from this class, you can start looking at the = DatabaseView, and DatabaseModule class.

-- Thanks,= Ashesh


Thanks

Rob, Oliver & Joao




--f403043ef890a45857054e786253--