[Geoserver-devel] Modest code complete for CSS styling

Hi,
in my spare time I am playing with writing a large-ish set of CSS styles for a basemap and found
that I’m really missing code completion.

So I looked into what code mirror has to offer, and adding support for our custom
variant of CSS is not hard and works reasonably well (for modest ambitions), .e.g:

Inline image 1

Inline image 2

Inline image 3

Let me qualify “modest” ambitions:

  • There is no CQL autocomplete support
  • The list of values for a given property is not context sensitive, it just gives you all possible values for all possible propeties
  • The few function like values (url, symbol, color-map-entry) just complete as “keyword(” and you have to add the rest manually

Of course it can be improved with some time and JS skills, but I believe even this small contribution is a big improvement compared to no completion at all.
Pull request here (I’ll add a ticket and fix the commit before merging of course):

https://github.com/geoserver/geoserver/pull/2283

I checked how this plays with other languages, and it seems it’s not interfering, you just get no completion on CTRL-SPACE.
Then, I looked at adding support for other languages too and … well… what I’ve found seem to require a lot of effort, at
least for SLD.

XML completion is available, but one needs to define a schema-like data structure in JSON, and then setup
some specific codemirror initialization [1]. There is a tool [2] to generate such description from a XSD, I gave it a very
quick check and for SLD 1.0 it generates a 200+KB json file… but then, we’d have to generate another for SLD 1.1 too,
and figure out which schema to give the editor (not sure one can do both at the same time, the sld namespace is shared among
SLD 1.0 and 1.1, but maybe with some hand-tweaking and some runtime inconsistency it might be doable).

Soo… to get there one would need some extensions to StyleHandler, CodeMirrorEditor, maybe some figuring out of the
right SLD version on the fly (since we just say “SLD”) and then inject the right large json blob into the editor.
That seems to be way too much work for spare time :-p

Oh, I also checked potential YSLD compatibility, yaml code highlighting is available in the latest version of CodeMirror
(we’d may have to upgrade, 5.11 we’re using currently does not have it) but there is no hinting support for completion.
Mapbox styling wise, there is javascript highlight, and some javascript completion support, but I don’t see a quick way
to add completion towards a specific schema. See 3 for an example.

Anyways, two questions:

  • Do you see any issue merging CSS completion support?
  • Anyone interested in taking over support for completion in other languages?

Cheers
Andrea

[1]: If interested, see the source of this example, in particular, the “tags” variable https://codemirror.net/demo/xmlcomplete.html
[2]: http://q42jaap.github.io/xsd2codemirror/

···

==
GeoServer Professional Services from the experts! Visit
http://goo.gl/it488V for more information.

Ing. Andrea Aime

@geowolf
Technical Lead

GeoSolutions S.A.S.
Via di Montramito 3/A
55054 Massarosa (LU)
phone: +39 0584 962313

fax: +39 0584 1660272
mob: +39 339 8844549

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy’s New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.


That looks great Andrea, we did something similar for YSLD for one of our products - using a REST api to access the function list. I would be happy to port that over if you think you could make use of it.

(attachments)

image.png
image.png
Selezione_233.png

···

On 25 April 2017 at 06:04, Andrea Aime <andrea.aime@anonymised.com> wrote:

Hi,
in my spare time I am playing with writing a large-ish set of CSS styles for a basemap and found
that I’m really missing code completion.

So I looked into what code mirror has to offer, and adding support for our custom
variant of CSS is not hard and works reasonably well (for modest ambitions), .e.g:

Inline image 1

Inline image 2

Inline image 3

Let me qualify “modest” ambitions:

  • There is no CQL autocomplete support
  • The list of values for a given property is not context sensitive, it just gives you all possible values for all possible propeties
  • The few function like values (url, symbol, color-map-entry) just complete as “keyword(” and you have to add the rest manually

Of course it can be improved with some time and JS skills, but I believe even this small contribution is a big improvement compared to no completion at all.
Pull request here (I’ll add a ticket and fix the commit before merging of course):

https://github.com/geoserver/geoserver/pull/2283

I checked how this plays with other languages, and it seems it’s not interfering, you just get no completion on CTRL-SPACE.
Then, I looked at adding support for other languages too and … well… what I’ve found seem to require a lot of effort, at
least for SLD.

XML completion is available, but one needs to define a schema-like data structure in JSON, and then setup
some specific codemirror initialization [1]. There is a tool [2] to generate such description from a XSD, I gave it a very
quick check and for SLD 1.0 it generates a 200+KB json file… but then, we’d have to generate another for SLD 1.1 too,
and figure out which schema to give the editor (not sure one can do both at the same time, the sld namespace is shared among
SLD 1.0 and 1.1, but maybe with some hand-tweaking and some runtime inconsistency it might be doable).

Soo… to get there one would need some extensions to StyleHandler, CodeMirrorEditor, maybe some figuring out of the
right SLD version on the fly (since we just say “SLD”) and then inject the right large json blob into the editor.
That seems to be way too much work for spare time :-p

Oh, I also checked potential YSLD compatibility, yaml code highlighting is available in the latest version of CodeMirror
(we’d may have to upgrade, 5.11 we’re using currently does not have it) but there is no hinting support for completion.
Mapbox styling wise, there is javascript highlight, and some javascript completion support, but I don’t see a quick way
to add completion towards a specific schema. See 3 for an example.

Anyways, two questions:

  • Do you see any issue merging CSS completion support?
  • Anyone interested in taking over support for completion in other languages?

Cheers
Andrea

[1]: If interested, see the source of this example, in particular, the “tags” variable https://codemirror.net/demo/xmlcomplete.html
[2]: http://q42jaap.github.io/xsd2codemirror/

==
GeoServer Professional Services from the experts! Visit
http://goo.gl/it488V for more information.

Ing. Andrea Aime

@geowolf
Technical Lead

GeoSolutions S.A.S.
Via di Montramito 3/A
55054 Massarosa (LU)
phone: +39 0584 962313

fax: +39 0584 1660272
mob: +39 339 8844549

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy’s New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.



Check out the vibrant tech community on one of the world’s most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot


Geoserver-devel mailing list
Geoserver-devel@anonymised.com.366…sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-devel


Jody Garnett

On Wed, Apr 26, 2017 at 3:07 AM, Jody Garnett <jody.garnett@anonymised.com>
wrote:

That looks great Andrea, we did something similar for YSLD for one of our
products - using a REST api to access the function list. I would be happy
to port that over if you think you could make use of it.

Hi Jody,
I don't think I'll have use for that, that approach makes sense for a
stand-alone javascript application but little so for a UI like
the GeoServer one, where the UI contents are server side generated anyways.
In any case, that would be useful for a CQL completion, but as said, I have
not figured out how to make that work (I may have incentive later down the
road, for now I'm a happy camper with the current "dump" completion
support).

Cheers
Andrea

--

GeoServer Professional Services from the experts! Visit
http://goo.gl/it488V for more information.

Ing. Andrea Aime
@geowolf
Technical Lead

GeoSolutions S.A.S.
Via di Montramito 3/A
55054 Massarosa (LU)
phone: +39 0584 962313
fax: +39 0584 1660272
mob: +39 339 8844549

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

*AVVERTENZE AI SENSI DEL D.Lgs. 196/2003*

Le informazioni contenute in questo messaggio di posta elettronica e/o
nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il
loro utilizzo è consentito esclusivamente al destinatario del messaggio,
per le finalità indicate nel messaggio stesso. Qualora riceviate questo
messaggio senza esserne il destinatario, Vi preghiamo cortesemente di
darcene notizia via e-mail e di procedere alla distruzione del messaggio
stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso,
divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od
utilizzarlo per finalità diverse, costituisce comportamento contrario ai
principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for
the attention and use of the named addressee(s) and may be confidential or
proprietary in nature or covered by the provisions of privacy act
(Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection
Code).Any use not in accord with its purpose, any disclosure, reproduction,
copying, distribution, or either dissemination, either whole or partial, is
strictly forbidden except previous formal approval of the named
addressee(s). If you are not the intended recipient, please contact
immediately the sender by telephone, fax or e-mail and delete the
information in this message that has been received in error. The sender
does not give any warranty or accept liability as the content, accuracy or
completeness of sent messages and accepts no responsibility for changes
made after they were sent or for other risks which arise as a result of
e-mail transmission, viruses, etc.

-------------------------------------------------------

Adding Code completion to the style editor is an excellent improvement, and CSS completion looks like a good start.

I’ve got some fairly in-depth YSLD code completion implementation for angular-codemirror that I will be able to port over to GeoServer at some point: https://github.com/boundlessgeo/composer/blob/master/app/components/editor/styleeditor/ysldhinter.js

Torben

(attachments)

image.png
image.png
Selezione_233.png

···

On Tue, Apr 25, 2017 at 6:04 AM, Andrea Aime <andrea.aime@anonymised.com.1268…> wrote:

Hi,
in my spare time I am playing with writing a large-ish set of CSS styles for a basemap and found
that I’m really missing code completion.

So I looked into what code mirror has to offer, and adding support for our custom
variant of CSS is not hard and works reasonably well (for modest ambitions), .e.g:

Inline image 1

Inline image 2

Inline image 3

Let me qualify “modest” ambitions:

  • There is no CQL autocomplete support
  • The list of values for a given property is not context sensitive, it just gives you all possible values for all possible propeties
  • The few function like values (url, symbol, color-map-entry) just complete as “keyword(” and you have to add the rest manually

Of course it can be improved with some time and JS skills, but I believe even this small contribution is a big improvement compared to no completion at all.
Pull request here (I’ll add a ticket and fix the commit before merging of course):

https://github.com/geoserver/geoserver/pull/2283

I checked how this plays with other languages, and it seems it’s not interfering, you just get no completion on CTRL-SPACE.
Then, I looked at adding support for other languages too and … well… what I’ve found seem to require a lot of effort, at
least for SLD.

XML completion is available, but one needs to define a schema-like data structure in JSON, and then setup
some specific codemirror initialization [1]. There is a tool [2] to generate such description from a XSD, I gave it a very
quick check and for SLD 1.0 it generates a 200+KB json file… but then, we’d have to generate another for SLD 1.1 too,
and figure out which schema to give the editor (not sure one can do both at the same time, the sld namespace is shared among
SLD 1.0 and 1.1, but maybe with some hand-tweaking and some runtime inconsistency it might be doable).

Soo… to get there one would need some extensions to StyleHandler, CodeMirrorEditor, maybe some figuring out of the
right SLD version on the fly (since we just say “SLD”) and then inject the right large json blob into the editor.
That seems to be way too much work for spare time :-p

Oh, I also checked potential YSLD compatibility, yaml code highlighting is available in the latest version of CodeMirror
(we’d may have to upgrade, 5.11 we’re using currently does not have it) but there is no hinting support for completion.
Mapbox styling wise, there is javascript highlight, and some javascript completion support, but I don’t see a quick way
to add completion towards a specific schema. See 3 for an example.

Anyways, two questions:

  • Do you see any issue merging CSS completion support?
  • Anyone interested in taking over support for completion in other languages?

Cheers
Andrea

[1]: If interested, see the source of this example, in particular, the “tags” variable https://codemirror.net/demo/xmlcomplete.html
[2]: http://q42jaap.github.io/xsd2codemirror/

==
GeoServer Professional Services from the experts! Visit
http://goo.gl/it488V for more information.

Ing. Andrea Aime

@geowolf
Technical Lead

GeoSolutions S.A.S.
Via di Montramito 3/A
55054 Massarosa (LU)
phone: +39 0584 962313

fax: +39 0584 1660272
mob: +39 339 8844549

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy’s New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.



Check out the vibrant tech community on one of the world’s most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot


Geoserver-devel mailing list
Geoserver-devel@anonymised.com.366…sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-devel