Re: Custom layers in PgAdmin IV Mapview

Hi,

On Tue, Sep 18, 2018 at 2:25 PM Atle Frenvik Sveen <atle(at)frenviksveen(dot)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(at)frenviksveen(dot)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(dot)toshniwal(at)enterprisedb(dot)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(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.
> > >
> >
> > 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(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://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"