Re: Custom layers in PgAdmin IV Mapview

Hi,

On Tue, Sep 18, 2018 at 1:32 PM Aditya Toshniwal <
aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:

> Hi,
>
>
> On Tue, Sep 18, 2018 at 12:43 AM Atle Frenvik Sveen <atle(at)frenviksveen(dot)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.

>
>> 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(at)frenviksveen(dot)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(at)frenviksveen(dot)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(at)frenviksveen(dot)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(at)frenviksveen(dot)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(at)frenviksveen(dot)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(at)frenviksveen(dot)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(at)pgadmin(dot)org>
>> > > > wrote:
>> > > > > > > >
>> > > > > > > > > Hi
>> > > > > > > > >
>> > > > > > > > > On Thu, Sep 13, 2018 at 2:50 PM, Atle Frenvik Sveen <
>> > > > > > > atle(at)frenviksveen(dot)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://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"