[Maps] EUI Visual Refresh Integration by cqliu1 · Pull Request #204434 · elastic/kibana

cqliu1 · 2024-12-16T16:06:06Z

Summary

Related to #203132.
Closes #204591.

This replaces all references to euiThemeVars in favor of the useEuiTheme hook in maps.

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

elasticmachine · 2024-12-18T05:33:16Z

Pinging @elastic/kibana-presentation (Team:Presentation)

nreese · 2024-12-18T14:45:14Z

x-pack/plugins/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx

circleStyle is defined in props but never used in props.

nreese

I am not sure about the direction where EUI themes are only available in a react component. There are times when we need access to EUI themes outside of a react component. For example, to get hex codes to pass to map-libre. I think we need to loop in @elastic/kibana-design and have a discussion about their plans to deprecate euiThemeVars as this will not work for maps and external libraries like maplibre.

nreese · 2024-12-18T14:45:18Z

x-pack/plugins/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx

How about removing circleStyle const here

Fyi, we realized that there are usages where a non-react way to get theme tokens are still required.
We'll not deprecate it completely, but we deprecate it for react components where euiTheme should be used.

nreese · 2024-12-18T14:45:34Z

x-pack/plugins/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx

Then use circleStyle from props here.

nreese · 2024-12-18T14:47:23Z

x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx

Now that MasksByFieldOrigin is a react component, how about moving it into a separate file?

nreese · 2024-12-18T14:48:23Z

x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx

Looks like euiTheme is unused

nreese · 2024-12-18T14:55:45Z

x-pack/plugins/maps/public/classes/styles/vector/style_util.ts

'textSubdued' is not going to work. This value is passed to maplibre for rendering and must be a hex value. For example, this is what a map looks like with a value of 'textSubdued'. The reason being is that OTHER_CATEGORY_DEFAULT_COLOR_TOKEN is used to create a maplibre expression. The expression is invalid with a value of 'textSubdued' so maplibre does not include the expression and all styling is lost.

When instead, it should look like this

ryankeairns · 2024-12-18T18:05:19Z

I am not sure about the direction where EUI themes are only available in a react component. There are times when we need access to EUI themes outside of a react component. For example, to get hex codes to pass to map-libre. I think we need to loop in @elastic/kibana-design and have a discussion about their plans to deprecate euiThemeVars as this will not work for maps and external libraries like maplibre.

This should loop in @elastic/eui-team

cqliu1 · 2025-01-17T22:20:12Z

x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts

@nreese Is it okay if we just hard code this color hex for the default other category color? It looks fine in both light and dark mode, and otherwise the user can change the color if they're not happy with it. Then we can avoid the huge refactor necessary to access euiTheme from parts of maps that aren't in React.

Using a static value is ok. How about using #cad3e2, its the current value for euiThemeVars.euiColorLightShade. #516381 is very dark with dark themed tiles.

Sure thing, here's how #cad3e2 looks in light and dark mode

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate' Fix jest tests BROKEN Switch to euiThemeGetColor [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' Remove vector layer changes Remove console log Undo default map changes [CI] Auto-commit changed files from 'node scripts/yarn_deduplicate' fix tsconfig Remove vector layer changes Fix types [CI] Auto-commit changed files from 'node scripts/yarn_deduplicate' Fix tests Change other category swatches Change category swatches

nreese · 2025-01-22T17:54:26Z

x-pack/platform/plugins/shared/maps/public/react_embeddable/map_react_embeddable.tsx

        );

        useEffect(() => {
+          mapSettings$.next({


Re-setting backgroundColor removes user selected background color.

To view problem

create a new map

remove baselayer

add EMS boundaries world country layer.

Clicking "settings" in map top nave and provide a background color.

add map to dashboard, save dashboard.

re-open dashboard. Notice how custom background color is removed.

Oh yeah I'll remove this bit of code. I opted to make the default background color transparent instead of having to pass an EUI color into the default map settings object, which also fixes the white flash that you see on some maps in dark mode.

nreese · 2025-01-23T15:38:30Z

x-pack/platform/plugins/shared/maps/public/react_embeddable/map_react_embeddable.tsx

    return {
      api,
      Component: () => {
+        const { euiTheme } = useEuiTheme();


euiTheme can be removed since its no longer used.

…-fix'

elasticmachine · 2025-01-23T18:43:47Z

💚 Build Succeeded

Buildkite Build
Commit: 2b5d710

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`maps`	1276	1277	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`maps`	3.1MB	3.1MB	+273.0B

History

💔 Build #269773 failed 15c5969
💔 Build #269492 failed 3692a98
💔 Build #269387 failed b008104
💔 Build #268995 failed 0f99425b01cafa5b4daf2ff2aabdfce46274c43c
💔 Build #268945 failed 2c5d82919659399e00c1f302e6142bdeced9ca82
💔 Build #268251 failed 68456a6733479b61b7a92e87c8fb058f151b0cb6

nreese

kibana-presentation changes LGTM. Thanks for removing euiThemes from maps
code review, tested in chrome

andreadelrio

LGTM

kibanamachine · 2025-01-23T22:41:55Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12939436185

kibanamachine · 2025-01-23T22:47:10Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

cqliu1 changed the title ~~[Maps][Borealis] Replace euiThemeVars usage~~ [Maps] EUI Visual Refresh Dec 17, 2024

cqliu1 mentioned this pull request Dec 17, 2024

[Dashboard] EUI Visual Refresh Integration #204442

Merged

9 tasks

cqliu1 changed the title ~~[Maps] EUI Visual Refresh~~ [Maps] EUI Visual Refresh Integration Dec 17, 2024

cqliu1 marked this pull request as ready for review December 18, 2024 05:20

cqliu1 requested a review from a team as a code owner December 18, 2024 05:20

cqliu1 added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// v9.0.0 Feature:Maps EUI Visual Refresh labels Dec 18, 2024

cqliu1 added release_note:skip Skip the PR/issue when compiling release notes backport:version Backport to applied version labels labels Dec 18, 2024

nreese self-requested a review December 18, 2024 14:39

nreese reviewed Dec 18, 2024

View reviewed changes

cqliu1 force-pushed the borealis/maps/replace-euiThemeVars branch 2 times, most recently from 3a25a3c to 0c4e9a4 Compare January 6, 2025 19:52

cqliu1 added backport:skip This PR does not require backporting and removed backport:version Backport to applied version labels labels Jan 7, 2025

cqliu1 force-pushed the borealis/maps/replace-euiThemeVars branch from 61f662d to 59afe56 Compare January 8, 2025 22:26

cqliu1 force-pushed the borealis/maps/replace-euiThemeVars branch from 189fe21 to 51ebf31 Compare January 17, 2025 01:23

cqliu1 requested review from a team as code owners January 17, 2025 19:03

cqliu1 removed request for a team, gergoabraham, hop-dev and parkiino January 17, 2025 20:28

cqliu1 commented Jan 17, 2025

View reviewed changes

cqliu1 requested review from a team as code owners January 21, 2025 16:27

cqliu1 added 6 commits January 22, 2025 09:13

Revert changes

ff61b73

Revert other category color type changes

06ecd90

Fix dynamic color property test

697ea65

Move import

ff3f7dd

Change default other category color

b008104

nreese reviewed Jan 22, 2025

View reviewed changes

Remove background color update in useEffect

3692a98

nreese reviewed Jan 23, 2025

View reviewed changes

cqliu1 and others added 2 commits January 23, 2025 08:45

Remove euiTheme

15c5969

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

2b5d710

…-fix'

nreese approved these changes Jan 23, 2025

View reviewed changes

andreadelrio approved these changes Jan 23, 2025

View reviewed changes

kibanamachine mentioned this pull request Jan 23, 2025

[8.x] [Maps] EUI Visual Refresh Integration (#204434) #208130

Merged

This was referenced Jan 24, 2025

[ResponseOps][MW] Fix bug when creating repeating Maintenance Window #207084

Merged

[SKA] Move orphan README #208167

Merged

Conversation

cqliu1 commented Dec 16, 2024 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Identify risks

Uh oh!

elasticmachine commented Dec 18, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nreese left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nreese Dec 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented Dec 18, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jan 23, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

nreese left a comment

Choose a reason for hiding this comment

Uh oh!

andreadelrio left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jan 23, 2025

Uh oh!

kibanamachine commented Jan 23, 2025

💚 All backports created successfully

Questions ?

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

cqliu1 commented Dec 16, 2024 •

edited by kibanamachine

Loading

nreese left a comment •

edited

Loading

nreese Dec 18, 2024 •

edited

Loading