Re: Custom layers in PgAdmin IV Mapview - Mailing list pgadmin-hackers
From | Atle Frenvik Sveen |
---|---|
Subject | Re: Custom layers in PgAdmin IV Mapview |
Date | |
Msg-id | 1537265343.1220865.1511919040.12455551@webmail.messagingengine.com Whole thread Raw |
In response to | Re: Custom layers in PgAdmin IV Mapview (Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>) |
Responses |
Re: Custom layers in PgAdmin IV Mapview
|
List | pgadmin-hackers |
Hello again! I think I've accomplished this task now, see last screenshot and attached patch. I hope I did this patch right? git checkout master git fetch upstream git merge upstream/master git checkout mapviewer_custom_layers_3646 git merge master mapviewer_custom_layers_3646 git format-patch master --stdout > RM3645.patch The OrderedList preferences type seems to work fine, and the layout works okay by my standards. - You are able to edit existing entries (but elements that are marked required but not filled in are reverted) - You are able to add a new entry (but all required elements must be filled before it's saved) - Elements can be deleted (I was thinking about disallowing the "default" entries, but not sure if this makes sense) - Elements can be re-ordered (first in list is default) The maviewer seems to pick up the preferences just fine, and the default preferences are entered as best as I could (mainlyreplicating the hard-coded layers). Some improvement-points I guess: - You can add several new elements without filling them in (though they won't be saved) - No validation of wether the TileUrl is valid (but this is a difficult task, not worth it?) - Possibly better explaination (but for me, who knows this, it's difficult to improve on) - I was not able to re-use code everywhere I wanted, so some duplication - I was not quite sure about code-style, so feel free to comment on that. - This seemes pretty hard to write sane tests for, so I skipped that part. -- Atle Frenvik Sveen atle@frenviksveen.net 45278689 atlefren.net On Tue, Sep 18, 2018, at 11:03, Aditya Toshniwal wrote: > Hi, > > On Tue, Sep 18, 2018 at 2:25 PM Atle Frenvik Sveen <atle@frenviksveen.net> > wrote: > > > Thanks for the suggestion! It seems that the style was indeed loaded, it > > just did not do what I expected it to do :/ > > > > But, when using the module/static/css/module.css file-approach, I guess > > web\pgadmin\preferences\static\css\preferences.css is the right path for > > css related to the preferences-tab then? > > > Specific to preferences, yes. > > > > > Or is there anywhere css related to code in > > pgadmin4\web\pgadmin\static\js\backform.pgadmin.js should go? > > > If it is related to backform, you can put it in > pgadmin/static/scss/_backform.overrides.scss. > > > > > Running make bundle does run yarn webpacker under the covers, doesn't it? > > I have yarn webpacker:watch running in the background here, so that should > > accomplish the same thing I guess. > > > yarn run webpacker:watch will do. > > > > > -a > > > > -- > > Atle Frenvik Sveen > > atle@frenviksveen.net > > 45278689 > > atlefren.net > > > > On Tue, Sep 18, 2018, at 10:31, Dave Page wrote: > > > On Tue, Sep 18, 2018 at 9:06 AM, Aditya Toshniwal < > > > aditya.toshniwal@enterprisedb.com> wrote: > > > > > > > Hi, > > > > > > > > On Tue, Sep 18, 2018 at 1:32 PM Aditya Toshniwal <aditya.toshniwal@ > > > > enterprisedb.com> wrote: > > > > > > > >> Hi, > > > >> > > > >> > > > >> On Tue, Sep 18, 2018 at 12:43 AM Atle Frenvik Sveen < > > > >> atle@frenviksveen.net> wrote: > > > >> > > > >>> Hi again! > > > >>> > > > >>> I started digging around in the code used to display the Grid in the > > > >>> table dialogue, this worked a lot better. Now most things works as > > > >>> expected, although I decided to re-write the Grid-using code rather > > than > > > >>> re-use the existing code, as that seems rather tightly coupled with > > the > > > >>> table use-case. > > > >>> > > > >>> This implementation fixed the focus-issues (as the change is > > triggered > > > >>> onBlur, not onChange. > > > >>> > > > >>> However, I seem to have hit some more css-wizardry-issues: > > > >>> > > > >>> 1. The header isn't exactly pretty > > > >>> 2. I would like to align the down button on the first row with the > > other > > > >>> down-buttons, but I am not able to use any custom css? Is there some > > > >>> command I have to run in order to transpile the scss? > > > >>> > > > >> Where are you putting your CSS classes ? Put your CSS classes in > > > > module/static/css/module.css file. If you are using scss then > > > > module/static/scss/_module.scss. Webpacker will pick your code to > > > > transpile and bundle. > > > > > > > > > > Running "make bundle" might also be helpful. > > > > > > > > > > > > > >>> The issue regarding validation still stands, but I think I have some > > > >>> ideas regarding this. > > > >>> > > > >>> And, still waiting for feedback on refreshing the preferences in the > > > >>> mapViewer-code. > > > >>> > > > >>> -a > > > >>> > > > >>> -- > > > >>> Atle Frenvik Sveen > > > >>> atle@frenviksveen.net > > > >>> 45278689 > > > >>> atlefren.net > > > >>> > > > >>> On Mon, Sep 17, 2018, at 16:12, Atle Frenvik Sveen wrote: > > > >>> > On Mon, Sep 17, 2018, at 16:05, Dave Page wrote: > > > >>> > > Hi > > > >>> > > > > > >>> > > On Mon, Sep 17, 2018 at 2:52 PM, Atle Frenvik Sveen < > > > >>> atle@frenviksveen.net> > > > >>> > > wrote: > > > >>> > > > > > >>> > > > Hello again! > > > >>> > > > > > > >>> > > > I've managed to get closer to resolving this task (see attached > > > >>> image for > > > >>> > > > the current state of the work and https://github.com/atlefren/ > > > >>> > > > pgadmin4/tree/mapviewer_custom_layers_3646 for code), but I > > still > > > >>> have > > > >>> > > > some questions. Please let me know if this list isn't the > > > >>> appropriate place. > > > >>> > > > > > > >>> > > > 0. Sorry for breaking the build by introducing a new node > > version > > > >>> > > > > > > >>> > > > > > >>> > > Hahaha. No problem. It's all good now. > > > >>> > > > > > >>> > > > > > >>> > > > > > > >>> > > > 1. The GeometryViewer now uses > > browser.get_preferences_for_module > > > >>> to get > > > >>> > > > the available layers at initialization. A bit of testing > > suggests > > > >>> that this > > > >>> > > > initialization is perfromed each time the map window is > > re-opened. > > > >>> Is this > > > >>> > > > correct? Or should I listen to some kind of "preferences > > > >>> updated"-event? > > > >>> > > > > > > >>> > > > >> The browser.get_preferences_for_module functions will give you > > > >> preferences from the cache. So it is totally fine if you call this > > function > > > >> every time. The cache is updated on preferences update. > > > >> > > > >>> > > > 2. I've made a new backform-component called > > > >>> "OrderedListControl", which > > > >>> > > > builds a table based on the fields-attribute, in the same > > manner > > > >>> as the > > > >>> > > > KeyCodeControl. The control now supports: > > > >>> > > > > > > >>> > > > - editing existing elements > > > >>> > > > - Deleting elements > > > >>> > > > - add a new element > > > >>> > > > - moving existing elements up or down in the list > > > >>> > > > > > > >>> > > > However, I have some challenges: > > > >>> > > > > > > >>> > > > 1. Each time I type in a new value, the render-cycle triggers > > and > > > >>> the > > > >>> > > > Input looses focus. Any ideas here? My Backbone-skills was last > > > >>> used 4 > > > >>> > > > years ago, and React has kinda made me forget this stuff. > > > >>> > > > 2. I consider some of the fields optional and some required, > > but > > > >>> could not > > > >>> > > > find a setting to set the required fields required. Any > > > >>> suggestions? > > > >>> > > > > > > >>> > > > > > >>> > > I'll leave those for Kanchan/Aditya to comment on, as they know > > that > > > >>> code > > > >>> > > far better than I do. > > > >>> > > > > > >>> > > > > > >>> > > > > > > >>> > > > In addition, Design and CSS is not my strong areas, and there > > are > > > >>> a couple > > > >>> > > > of things I struggle with: > > > >>> > > > > > > >>> > > > 1. I've used buttons for delete and move. This is not pretty, > > but > > > >>> it > > > >>> > > > works. > > > >>> > > > > > > >>> > > > > > >>> > > Yeah, that'll need some work. > > > >>> > > > > > >>> > > > > > >>> > > > 2. The last row of the table is always empty and is used for > > > >>> adding a new > > > >>> > > > row. Does this make sense? > > > >>> > > > > > >>> > > > > > >>> > > Yes, but it doesn't really follow our normal design. I'd suggest > > > >>> using a > > > >>> > > grid - for example, the same as we use for adding > > > >>> listing/adding/removing > > > >>> > > columns on the Table dialogue. That's a standard design pattern > > that > > > >>> we've > > > >>> > > used in many places. The Action buttons can then just be > > FontAwesome > > > >>> icons > > > >>> > > for up/down/remove. > > > >>> > > > > >>> > Ah, this makes sense. This will (hopefully) resolve some of the > > issues > > > >>> > related to required fields (and hopefully focus as well). I'll give > > > >>> this > > > >>> > a try (if I can manage to find the relevant code, any pointers > > > >>> > appreciated!). > > > >>> > > > > >>> > -a > > > >>> > > > > >>> > > > > >>> > > > > > >>> > > > ` > > > >>> > > > 3. Since several of the fields are large the table looks really > > > >>> cramped > > > >>> > > > (and unreadable). In my view, the empty space below the label > > > >>> could be > > > >>> > > > used, but I am not sure how I can fix this. > > > >>> > > > > > > >>> > > > > > >>> > > CSS magic, but I'm not sure either (ancient C++ guy here!) > > > >>> > > > > > >>> > > > > > >>> > > > > > > >>> > > > Thanks for your replies. > > > >>> > > > > > > >>> > > > -a > > > >>> > > > > > > >>> > > > -- > > > >>> > > > Atle Frenvik Sveen > > > >>> > > > atle@frenviksveen.net > > > >>> > > > 45278689 > > > >>> > > > atlefren.net > > > >>> > > > > > > >>> > > > On Fri, Sep 14, 2018, at 11:43, Atle Frenvik Sveen wrote: > > > >>> > > > > Thanks! > > > >>> > > > > > > > >>> > > > > > > > >>> > > > > Another question: > > > >>> > > > > > > > >>> > > > > I had issues running make install-node using node 10.x. The > > > >>> issue was > > > >>> > > > > related to an old version of the leveldown package > > > >>> > > > > (https://github.com/Level/leveldown/issues/455). > > > >>> > > > > > > > >>> > > > > The dependency on leveldown was introduced by the > > > >>> hard-source-webpack- > > > >>> > > > > plugin, which was required at version 0.4.9. Upgrading > > > >>> hard-source- > > > >>> > > > > webpack-plugin to latest (0.12.0) seems to have solved this > > > >>> problem. > > > >>> > > > > > > > >>> > > > > Are these kinds of fixes something that should be submitted > > > >>> separately, > > > >>> > > > > or can they be included in the final patch? > > > >>> > > > > > > > >>> > > > > -a > > > >>> > > > > > > > >>> > > > > -- > > > >>> > > > > Atle Frenvik Sveen > > > >>> > > > > atle@frenviksveen.net > > > >>> > > > > 45278689 > > > >>> > > > > atlefren.net > > > >>> > > > > > > > >>> > > > > On Fri, Sep 14, 2018, at 09:48, Dave Page wrote: > > > >>> > > > > > Hi > > > >>> > > > > > > > > >>> > > > > > On Fri, Sep 14, 2018 at 8:44 AM, Atle Frenvik Sveen < > > > >>> > > > atle@frenviksveen.net> > > > >>> > > > > > wrote: > > > >>> > > > > > > > > >>> > > > > > > Dave, Khushboo: > > > >>> > > > > > > > > > >>> > > > > > > Thanks for your replies. I've created an issue here: > > > >>> > > > > > > https://redmine.postgresql.org/issues/3646 > > > >>> > > > > > > > > > >>> > > > > > > Please feel free to comment and suggest changes. > > > >>> > > > > > > > > > >>> > > > > > > Thank you both for your input! > > > >>> > > > > > > > > > >>> > > > > > > I guess I will spend some time getting to know this > > > >>> code-base, and > > > >>> > > > when > > > >>> > > > > > > time comes I think I will need some guidance on the > > process > > > >>> of > > > >>> > > > sending > > > >>> > > > > > > patches etc (as this is not something I am familiar > > with). > > > >>> > > > > > > > > > >>> > > > > > > I see that there is an .editorconfig and and > > .eslintrc.js in > > > >>> the > > > >>> > > > repo, > > > >>> > > > > > > along with a .pycodestyle. I've never heard of > > .pycodestyle, > > > >>> but I am > > > >>> > > > > > > familiar with PEP8. Any pointers on this? > > > >>> > > > > > > > > > >>> > > > > > > > > >>> > > > > > You can run "make check-pep8" and it will check that all > > the > > > >>> Python > > > >>> > > > code > > > >>> > > > > > conforms. > > > >>> > > > > > > > > >>> > > > > > > > > >>> > > > > > > > > > >>> > > > > > > -a > > > >>> > > > > > > > > > >>> > > > > > > > > > >>> > > > > > > > > > >>> > > > > > > -- > > > >>> > > > > > > Atle Frenvik Sveen > > > >>> > > > > > > atle@frenviksveen.net > > > >>> > > > > > > 45278689 > > > >>> > > > > > > atlefren.net > > > >>> > > > > > > > > > >>> > > > > > > On Fri, Sep 14, 2018, at 05:24, Khushboo Vashi wrote: > > > >>> > > > > > > > On Thu, Sep 13, 2018 at 8:10 PM, Dave Page < > > > >>> dpage@pgadmin.org> > > > >>> > > > wrote: > > > >>> > > > > > > > > > > >>> > > > > > > > > Hi > > > >>> > > > > > > > > > > > >>> > > > > > > > > On Thu, Sep 13, 2018 at 2:50 PM, Atle Frenvik Sveen < > > > >>> > > > > > > atle@frenviksveen.net > > > >>> > > > > > > > > > wrote: > > > >>> > > > > > > > > > > > >>> > > > > > > > >> Hi list! > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> The new Mapview is great, but when you give people > > > >>> something > > > >>> > > > they > > > >>> > > > > > > always > > > >>> > > > > > > > >> want more, and so do I. > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> I want to be able to add custom background layers > > to the > > > >>> > > > existing > > > >>> > > > > > > list of > > > >>> > > > > > > > >> layers. > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> I'm thinking that the list of layers should be > > > >>> configurable > > > >>> > > > from the > > > >>> > > > > > > > >> Preferences -> Sql editor menu (or somewhere in the > > > >>> Preferences) > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> Then again, given that I know both Js, Leaflet, > > > >>> Backbone, and > > > >>> > > > > > > > >> Python/Flask I guess I should contribute the changes > > > >>> myself > > > >>> > > > rather > > > >>> > > > > > > then > > > >>> > > > > > > > >> waiting for someone else to do this. > > > >>> > > > > > > > >> > > > >>> > > > > > > > > > > > >>> > > > > > > > > Cool :-) > > > >>> > > > > > > > > > > > >>> > > > > > > > > > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> However, I have some questions before I jump right > > on > > > >>> this task: > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> First some organizational: > > > >>> > > > > > > > >> 1. If I add this, is this something that is > > welcomed by > > > >>> the > > > >>> > > > project? > > > >>> > > > > > > > >> > > > >>> > > > > > > > > > > > >>> > > > > > > > > Yes! > > > >>> > > > > > > > > > > > >>> > > > > > > > > > > > >>> > > > > > > > >> 2. How do I register a task on > > > >>> https://redmine.postgresql.org > > > >>> > > > > > > > >> /projects/pgadmin4/issues > > > >>> > > > > > > > >> > > > >>> > > > > > > > > > > > >>> > > > > > > > > Assuming you have a user account on there, there's a > > > >>> "New Issue" > > > >>> > > > button > > > >>> > > > > > > > > towards the top right. > > > >>> > > > > > > > > > > > >>> > > > > > > > > > > > >>> > > > > > > > >> 3. Is it ok to clone the GitHub mirror and submit a > > PR > > > >>> there? > > > >>> > > > > > > > >> > > > >>> > > > > > > > > > > > >>> > > > > > > > > You're welcome to work in a GitHub mirror of course, > > but > > > >>> please > > > >>> > > > send > > > >>> > > > > > > > > patches here - we won't see GitHub PRs as our primary > > > >>> repo is > > > >>> > > > > > > > > git.postgresql.org. > > > >>> > > > > > > > > > > > >>> > > > > > > > > > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> Then some tech-related questions: > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> 1. It seems like window.top.pgAdmin.Browser. > > > >>> > > > > > > get_preferences_for_module > > > >>> > > > > > > > >> is used for getting preferences from js, and that > > the > > > >>> > > > > > > PreferencesModule > > > >>> > > > > > > > >> python class is responsible for managing > > preferences. > > > >>> But where > > > >>> > > > are > > > >>> > > > > > > the > > > >>> > > > > > > > >> default preferences listed? > > > >>> > > > > > > > >> > > > >>> > > > > > > > > > > > >>> > > > > > > > > You'll find register_preferences functions in some of > > > >>> the Python > > > >>> > > > > > > modules > > > >>> > > > > > > > > (e.g. web/pgadmin/dashboard/__init__.py). They tend > > to > > > >>> have a > > > >>> > > > bunch of > > > >>> > > > > > > > > calls in them that look like this: > > > >>> > > > > > > > > > > > >>> > > > > > > > > self.session_stats_refresh = > > self.dashboard_preference. > > > >>> register( > > > >>> > > > > > > > > 'dashboards', 'session_stats_refresh', > > > >>> > > > > > > > > gettext("Session statistics refresh rate"), > > > >>> 'integer', > > > >>> > > > > > > > > 1, min_val=1, max_val=999999, > > > >>> > > > > > > > > category_label=gettext('Graphs'), > > > >>> > > > > > > > > help_str=gettext('The number of seconds between > > graph > > > >>> > > > samples.') > > > >>> > > > > > > > > ) > > > >>> > > > > > > > > > > > >>> > > > > > > > > In this case, the 1 on the beginning of the fourth > > line > > > >>> is the > > > >>> > > > default > > > >>> > > > > > > > > value. > > > >>> > > > > > > > > > > > >>> > > > > > > > > > > > >>> > > > > > > > >> 2. Does the preferences code currently handle > > editing a > > > >>> list of > > > >>> > > > > > > elements? > > > >>> > > > > > > > >> I'm thinking that the preferences pane for map > > layers > > > >>> should be > > > >>> > > > > > > something > > > >>> > > > > > > > >> like this. > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> name | url > > > >>> > > > > > > > >> | > > > >>> > > > > > > > >> ----------|------------------- > > > >>> ------------------------------ > > > >>> > > > > > > ----------------| > > > >>> > > > > > > > >> ------ > > > >>> > > > > > > > >> streets | https://{s}.tile. > > > >>> openstreetmap.org/{z}/{x}/{y}.png > > <http://openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D.png> > > > >>> <http://tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D.png> > > > >>> > > > > > > > >> < > > http://tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D. > > > >>> png> | > > > >>> > > > > > > [remove] > > > >>> > > > > > > > >> [] | [] > > > >>> > > > > > > > >> | [add] > > > >>> > > > > > > > >> > > > >>> > > > > > > > >> 2.1 If it does, where in the code can I find it? > > > >>> > > > > > > > >> 2.2 It it doesn't, where in the code can I add it > > and > > > >>> > > > > > > > >> 3. In either case of 2: how do I specify how a > > > >>> preference > > > >>> > > > object for a > > > >>> > > > > > > > >> module look like? > > > >>> > > > > > > > >> > > > >>> > > > > > > > > > > > >>> > > > > > > > > I don't believe it does at the moment. Khushboo, am I > > > >>> missing > > > >>> > > > > > > something? > > > >>> > > > > > > > > > > > >>> > > > > > > > > Yes, right, currently we don't have it. > > > >>> > > > > > > > > > > >>> > > > > > > > You can register the module wise preferences with the > > > >>> > > > > > > register_preferences > > > >>> > > > > > > > function mentioned by Dave above. > > > >>> > > > > > > > At the client side, we create the preferences cache and > > > >>> use the > > > >>> > > > cache in > > > >>> > > > > > > > the other JS modules as and when required. Please refer > > > >>> > > > > > > > pgadmin/browser/static/js/preferences.js file which is > > > >>> being used > > > >>> > > > to get > > > >>> > > > > > > > the cached preferences. You will find the different > > > >>> functions to > > > >>> > > > get the > > > >>> > > > > > > > specific preference here. > > > >>> > > > > > > > > > > >>> > > > > > > > The Preferences class is in > > web/pgadmin/utils/preferences. > > > >>> py. > > > >>> > > > > > > > > > > > >>> > > > > > > > > -- > > > >>> > > > > > > > > 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 > > > >>> > > > > > > > >>> > > > > > > >>> > > > > > >>> > > > > > >>> > > > > > >>> > > -- > > > >>> > > Dave Page > > > >>> > > Blog: http://pgsnake.blogspot.com > > > >>> > > Twitter: @pgsnake > > > >>> > > > > > >>> > > EnterpriseDB UK: http://www.enterprisedb.com > > > >>> > > The Enterprise PostgreSQL Company > > > >>> > > > > >>> > > > >> > > > >> > > > >> -- > > > >> Thanks and Regards, > > > >> Aditya Toshniwal > > > >> Software Engineer | EnterpriseDB Software Solutions | Pune > > > >> "Don't Complain about Heat, Plant a tree" > > > >> > > > > > > > > > > > > -- > > > > Thanks and Regards, > > > > Aditya Toshniwal > > > > Software Engineer | EnterpriseDB Software Solutions | Pune > > > > "Don't Complain about Heat, Plant a tree" > > > > > > > > > > > > > > > > -- > > > Dave Page > > > Blog: http://pgsnake.blogspot.com > > > Twitter: @pgsnake > > > > > > EnterpriseDB UK: http://www.enterprisedb.com > > > The Enterprise PostgreSQL Company > > > > > -- > Thanks and Regards, > Aditya Toshniwal > Software Engineer | EnterpriseDB Software Solutions | Pune > "Don't Complain about Heat, Plant a tree"
Attachment
pgadmin-hackers by date: