Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Maps] add text halo color and width style properties #53827

Merged
merged 14 commits into from
Jan 13, 2020
Merged

[Maps] add text halo color and width style properties #53827

merged 14 commits into from
Jan 13, 2020

Conversation

nreese
Copy link
Contributor

@nreese nreese commented Dec 27, 2019

This PR adds labelBorderColor and labelBorderWidth style properties allowing users to style text halo color and text halo width.

Screen Shot 2019-12-27 at 11 20 16 AM

@nreese nreese added release_note:enhancement [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v8.0.0 v7.6.0 labels Dec 27, 2019
@nreese nreese requested a review from a team as a code owner December 27, 2019 18:21
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-gis (Team:Geo)

@jsanz
Copy link
Member

jsanz commented Dec 27, 2019

Works nicely to me, tested in Chromium and Firefox.

I found a small issue but probably not related to this change but with #52957: if you have a text field set up and then you add or remove a tooltip field the label field setting is removed. I'll create a new issue for this.

@kibanamachine
Copy link
Contributor

💔 Build Failed

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

thomasneirynck
thomasneirynck reviewed Jan 6, 2020
View reviewed changes
Copy link
Contributor

@thomasneirynck thomasneirynck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Fun to see that adding new features basically requires no changes to existing code.

Main comment is around how we should define halo-width. I'm not sure if 0-100 pixels works for that, since it's range is dependent on the label-size. Consider re-interpreting that as 0-100%. (this has some additional issues, that you can't have fixed halo-widths when label-size is dynamic).

x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js Show resolved Hide resolved
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js Outdated Show resolved Hide resolved
x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js Show resolved Hide resolved
@nreese nreese requested a review from thomasneirynck January 7, 2020 16:32
@nreese
Copy link
Contributor Author

nreese commented Jan 7, 2020

@thomasneirynck Nice suggestion to simplify label border width to just small/medium/large and then derive the value from label size. That really simplifies the UI.

@nreese
Copy link
Contributor Author

nreese commented Jan 7, 2020 •
edited
Loading

@thomasneirynck @jsanz I need a second set of eyes on a map box expression. The expression below from

kibana/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/label_border_size_property.js

Line 39 in 0cb97cc

mbMap.setPaintProperty(mbLayerId, 'text-halo-width', [
is not working as intended. The expression is supposed to pull the label size from geojson properties but instead, the coalesce function is just returning the 0. Any ideas why? It looks right to me.

const labelSizeKey = this._labelSizeProperty.getComputedFieldName();
mbMap.setPaintProperty(mbLayerId, 'text-halo-width', [
        'max',
        ['*', ['coalesce', ['get', labelSizeKey], 0], widthRatio],
        1,
      ]);

@nreese
Copy link
Contributor Author

nreese commented Jan 10, 2020

@jsanz thanks for the help with the map box expression. Everything is working now and this PR is ready for re-review

@nreese
Copy link
Contributor Author

nreese commented Jan 10, 2020

@elasticmachine merge upstream

@nreese
Copy link
Contributor Author

nreese commented Jan 13, 2020

@elasticmachine merge upstream

thomasneirynck
thomasneirynck approved these changes Jan 13, 2020
View reviewed changes
Copy link
Contributor

@thomasneirynck thomasneirynck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like the none-small-medium-large. It's a nice simplification.

jsanz
jsanz approved these changes Jan 13, 2020
View reviewed changes
Copy link
Member

@jsanz jsanz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as expected on my setup, tested in both Chromium 78/79 and Firefox 71 (Linux). 👍

@nreese
Copy link
Contributor Author

nreese commented Jan 13, 2020

retest

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@nreese nreese merged commit e9e44ec into elastic:master Jan 13, 2020
nreese added a commit to nreese/kibana that referenced this pull request Jan 13, 2020
@nreese @elasticmachine
[Maps] add text halo color and width style properties (elastic#53827)
1953411 
* [Maps] add text halo color and width style properties

* fix jest test

* update for new editor UI

* add removed styling

* get halo size from label size

* fix label border size with dynamic label size

* clean up

* fix jest test

* fix jest test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
@nreese nreese mentioned this pull request Jan 13, 2020
Merged
nreese added a commit that referenced this pull request Jan 14, 2020
@nreese @elasticmachine
[Maps] add text halo color and width style properties (#53827) (#54657)
a90e9fd 
* [Maps] add text halo color and width style properties

* fix jest test

* update for new editor UI

* add removed styling

* get halo size from label size

* fix label border size with dynamic label size

* clean up

* fix jest test

* fix jest test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jan 14, 2020
@gmmorris
Merge remote-tracking branch 'upstream/master'
af07e54 
* upstream/master: (26 commits)
  Take page offset into account too (elastic#54567)
  [APM] Support error.{log,exception}.stacktrace.classname (elastic#54577)
  Np migration tsvb route validation (elastic#51850)
  [ML] MML calculator enhancements for multi-metric job wizard  (elastic#54573)
  [SIEM] Fix Inspect query 'request timestamp' value changes when curso… (elastic#54223)
  Fix chromeless NP apps not using full page width (elastic#54550)
  Remove extraneous public import to prevent failing Kibana startup (elastic#54676)
  [Uptime] Temporarily skip flakey tests (elastic#54675)
  Skip failing uptime tests
  Create UI for alerting and actions plugin (elastic#48959)
  [dev/build/sass] build stylesheets for disabled plugins too (elastic#54654)
  [SIEM] Use bulk actions API when updating or deleting rules (elastic#54521)
  Support "Deprecated" label in advanced settings (elastic#54539)
  [Maps] add text halo color and width style properties (elastic#53827)
  Service Map Data API at Runtime (elastic#54027)
  [SIEM] Detection Engine Create Rule Design Review #1 (elastic#54442)
  Skip flaky test
  [Canvas] Enable Embeddable maps (elastic#53971)
  [SIEM][Detection Engine] Increases the number or rules you can view on a single page (elastic#54628)
  uiSettings - use validation field for image field maxSize (elastic#54522)
  ...
jkelastic pushed a commit to jkelastic/kibana that referenced this pull request Jan 17, 2020
@nreese @elasticmachine @jkelastic
[Maps] add text halo color and width style properties (elastic#53827)
03738a9 
* [Maps] add text halo color and width style properties

* fix jest test

* update for new editor UI

* add removed styling

* get halo size from label size

* fix label border size with dynamic label size

* clean up

* fix jest test

* fix jest test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thomasneirynck thomasneirynck thomasneirynck approved these changes

@jsanz jsanz jsanz approved these changes

Assignees
No one assigned
Labels
[Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation release_note:enhancement v7.6.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@nreese @elasticmachine @jsanz @kibanamachine @thomasneirynck