[Lens] Implement deep linking and embedding by flash1293 · Pull Request #84416 · elastic/kibana

flash1293 · 2020-11-26T14:23:14Z

This PR explores ways to implement deep linking and embedding in Lens.

It includes a small example application which embedds a config inlined in the consuming app with two buttons to randomly change the color of the chart and another one to take the current configuration and make it editable in Lens.

Every state can easily made editable by the user
Everything possible with Lens can be accessed this way
Works with saved objects and inline configs

To test:

run yarn start --run-examples
Install logs sample data and make sure the logs index pattern is the default one
Go to /app/embedded_lens_example

Consumer side

This PR adds two things to the lens start contract:

EmbeddableComponent: React.ComponentType<LensProps> A component usable in your application which takes either a persisted state of a Lens visualization (technically it's the embeddable input, but there's very little difference) or a saved object id of a Lens visualization. The component loads the Lens bundle and uses the Lens embeddable implementation to render the visualization very similar to how it's working in a dashboard. If the input changes, the visualization is rendered again.
navigateToPrefilledEditor: (input: LensEmbeddableInput) => void Takes a Lens embeddable input (again persisted state or saved object id) and navigates to Lens with this state preloaded

LensProps['attributes'] is properly typed for the individual state shapes, so it's possible to statically check consumers of this API.

x-pack/examples/embedded_lens_example/public/app.tsx contains the example plugin using these APIs

Internals

x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_component.tsx and x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_component_loader.tsx provide a very thin wrapper around the embeddable acting as a lazy-loading mini embeddable container, passing through the input via props.

navigateToPrefilledEditor simply uses EmbeddableStateTransfer to kick off the navigation like the edit action on dashboard does.

Normally the attributes of the Lens embeddable input are typed very loose, this PR makes them specific for all existing visualizations:

  attributes:
    | LensAttributes<'lnsXY', XYState>
    | LensAttributes<'lnsPie', PieVisualizationState>
    | LensAttributes<'lnsDatatable', DatatableVisualizationState>
    | LensAttributes<'lnsMetric', MetricState>;

Once we make it possible to register visualizations from outside of the Lens plugin, we can use an approach similar to UI actions to extend a central interface containing all existing pairs to keep this level of type-safety.

Problems

Exposes the internal types - if we treat changes here as breaking change, we would be severly limited in adding/changing stuff in the state. For the beginning pne option would be to explicitly mention this in the docs and mark this API as experimental so consumers are aware the integration can break easily. As it's a single CI build I don't think we will have problems with Kibana-internal integrations this way. Another option would be to introduce a compatibility layer for this which maintains BWC for a major version if that's necessary, but I would wait with that until it actually becomes a problem
Completely re-initalizes the state on each change - the way the code to turn a document into an expression is set up right now, it does the init routine of the datasource on every change. This can be improved by keeping the initialized state around in the embeddable so we don't have to initialize from scratch on every small change.
Right now the state transfer moving the state into the Lens app requires an "originatingAppId" - in this PR it's set to empty string which doesn't work correctly everywhere. This can be solved cleanly by making originatingAppId optional

Extensions

It would be cool to have a bunch of helper functions to construct the Lens state to make it simpler to use

flash1293 · 2020-11-30T07:14:47Z

@elasticmachine merge upstream

flash1293 · 2020-12-08T16:12:06Z

@elasticmachine merge upstream

legrego · 2020-12-09T16:05:41Z

x-pack/examples/embedded_lens_example/kibana.json

+  "requiredPlugins": [
+    "lens",
+    "data",
+    "developerExamples"


Hey @flash1293! For this example plugin, can we add a dependency on features to illustrate that you'll need to grant access to the lens saved object type in order to properly embed when security is enabled?

I'm happy to help draft this change if you'd like help with it

@legrego Happy to include this - but I'm not sure how it should look like.

This example is not working with saved objects directly, but it does link into the Lens editor. So I guess the right integration would be to check whether there there are at least visualize read permissions via ui capabilities and otherwise disable the button, right?

This example is not working with saved objects directly, but it does link into the Lens editor. So I guess the right integration would be to check whether there there are at least visualize read permissions via ui capabilities and otherwise disable the button, right?

Ah, so this doesn't allow you to view existing visualizations, or save new ones? If that's the case, then you shouldn't need any capabilities checks

As discussed offline, I will introduce a third method on the contract which can be used by consumers to determine whether it's possible to link to Lens or not.

flash1293 · 2020-12-22T14:53:55Z

Jenkins, test this

elasticmachine · 2020-12-23T13:57:38Z

Pinging @elastic/kibana-app (Team:KibanaApp)

flash1293 · 2021-01-04T09:34:00Z

@elasticmachine merge upstream

wylieconlon

I'm going to do a second pass on this, but left some questions for you.

wylieconlon · 2021-01-06T00:02:17Z

x-pack/examples/embedded_lens_example/public/app.tsx

+                        to: 'now',
+                      },
+                      attributes: getLensAttributes(
+                        props.core.uiSettings.get('defaultIndex'),


So I ran into this by coincidence, but the @timestamp field isn't available on the ecommerce data, which causes the example to crash. Maybe the example should be tied to a specific index like logs?

Good point, I fixed this by reading the index pattern and using the default time field

wylieconlon · 2021-01-06T00:09:49Z

x-pack/examples/embedded_lens_example/public/app.tsx

+                <EuiButton
+                  isDisabled={!props.plugins.lens.canUseEditor()}
+                  onClick={() => {
+                    props.plugins.lens.navigateToPrefilledEditor({


I was testing the behavior here and I think we do need to specify the originatingApp to get reasonable behavior here. I tested Lens by value vs what happens in the Lens pre-filled editor, and the breadcrumb navigation seem wrong here:

Lens by value:

This PR:

I didn't set a title in the example app, fixed this

wylieconlon · 2021-01-06T00:14:14Z

x-pack/plugins/lens/public/plugin.ts

+            valueInput: input,
+          },
+        });
+      },


I think that this pre-filled editor logic is not quite right. First of all the breadcrumbs are not set. Second of all: are we expecting that users will return to the app they came from, or that the saved Lens visualization will get added to a dashboard? Right now it suggests adding to a dashboard.

Yes, this was intended. It's possible to have a channel back to the app (using the originating app parameter), but that's much more complex to implement correctly because the app has to somehow persist the current state, then restore it.

IMHO this is a separate feature we can work on separately once it becomes relevant - I think the flow "solution app -> Lens -> dashboard" is what makes sense here (because solution apps don't want to provide a way to persist/load custom Lens visualizations).

This is similar to how the metrics explorer integration with TSVB works right now.

wylieconlon · 2021-01-06T00:16:12Z

x-pack/examples/embedded_lens_example/public/app.tsx

+  EuiTitle,
+} from '@elastic/eui';
+import { CoreStart } from 'kibana/public';
+import { TypedLensByValueInput } from '../../../plugins/lens/public';


Are we expecting that other plugins will start depending on Lens in the plugin system?

Yes, exactly - as they are creating Lens-specific configuration, this seems like a good way to represent it on the type level

wylieconlon · 2021-01-06T00:17:22Z

x-pack/examples/embedded_lens_example/public/app.tsx

+        name: 'indexpattern-datasource-layer-layer1',
+        type: 'index-pattern',
+      },
+    ],


I'm a bit worried about the references parameter of our saved object. Seems easy for an app to provide the wrong information.

I thought about a builder function of some sort abstracting away these things, but didn't want to overdo it for the first experimental release.

Do you have something simple in mind we could add here? IMHO we can wait for consumers to see in which direction we should drive this API.

I was also expecting some kind of builder, but I agree that we should iterate on it. For now I'm assuming that users will copy+paste the JSON from a saved object.

kibanamachine · 2021-01-11T16:42:14Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 8b02b39

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	463	464	+1

Async chunks

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

id	before	after	diff
`lens`	1.0MB	1.0MB	+1.9KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`lens`	54.3KB	54.0KB	-257.0B

History

💚 Build #96953 succeeded cf1fd9f
💚 Build #96562 succeeded 8ae66be
💚 Build #96129 succeeded f9bbdb2
💔 Build #96013 failed 0f32e4b
💔 Build #95970 failed e8d6df9

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

wylieconlon

Okay I think you're right that we can iterate on this, but this seems like a useful first step. Tested and LGTM.

wylieconlon · 2021-01-11T23:53:53Z

x-pack/examples/embedded_lens_example/public/app.tsx

+        name: 'indexpattern-datasource-layer-layer1',
+        type: 'index-pattern',
+      },
+    ],


I was also expecting some kind of builder, but I agree that we should iterate on it. For now I'm assuming that users will copy+paste the JSON from a saved object.

implement deep linking and embedding

e9a70a9

flash1293 added the Feature:Lens label Nov 26, 2020

kibanamachine and others added 2 commits November 30, 2020 02:14

Merge branch 'master' into lens/lens-component

ba48fdc

Merge remote-tracking branch 'upstream/master' into lens/lens-component

dffdd6d

Merge branch 'master' into lens/lens-component

9345fca

legrego reviewed Dec 9, 2020

View reviewed changes

This was referenced Dec 15, 2020

[Lens] Expose experimental types and component for embeddability #85927

Closed

[Meta][Lens] Integration with Kibana #57712

Closed

flash1293 added 3 commits December 22, 2020 14:03

Merge remote-tracking branch 'upstream/master' into lens/lens-component

a86082e

fix imports

06ac9dd

remove custom lens component, use embeddable renderer an clean up

e8d6df9

flash1293 added 4 commits December 22, 2020 17:41

fix imports

e2a9e9b

adjust test

793f8ed

fix stuff

0f32e4b

make sure just types are exported

f9bbdb2

flash1293 marked this pull request as ready for review December 23, 2020 13:57

flash1293 requested a review from a team December 23, 2020 13:57

flash1293 added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.12.0 v8.0.0 labels Dec 23, 2020

flash1293 added the release_note:skip Skip the PR/issue when compiling release notes label Dec 23, 2020

kibanamachine and others added 3 commits January 4, 2021 04:34

Merge branch 'master' into lens/lens-component

8ae66be

Merge remote-tracking branch 'upstream/master' into lens/lens-component

0d4b99e

add permission method and some documentation

cf1fd9f

wylieconlon reviewed Jan 6, 2021

View reviewed changes

flash1293 added 2 commits January 11, 2021 15:08

Merge remote-tracking branch 'upstream/master' into lens/lens-component

d9397ec

round some edges in example

8b02b39

wylieconlon approved these changes Jan 12, 2021

View reviewed changes

flash1293 merged commit 94b02d9 into elastic:master Jan 12, 2021

flash1293 added a commit to flash1293/kibana that referenced this pull request Jan 12, 2021

[Lens] Implement deep linking and embedding (elastic#84416)

c29fc41

flash1293 mentioned this pull request Jan 12, 2021

[7.x] [Lens] Implement deep linking and embedding (#84416) #87978

Merged

flash1293 added a commit that referenced this pull request Jan 12, 2021

[Lens] Implement deep linking and embedding (#84416) (#87978)

5ce8a5d

nreese mentioned this pull request Jan 19, 2021

[Maps] Map react component #88703

Closed

flash1293 mentioned this pull request Jan 29, 2021

[Lens] Deep Link into a prefilled editor #59845

Closed

nreese mentioned this pull request Mar 2, 2023

[lens] embeddable has 2 subscriptions listening to input changes and calling onContainerStateChanged #152599

Closed

Conversation

flash1293 commented Nov 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Consumer side

Internals

Problems

Extensions

Uh oh!

flash1293 commented Nov 30, 2020

Uh oh!

flash1293 commented Dec 8, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flash1293 Dec 22, 2020 • 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!

flash1293 commented Dec 22, 2020

Uh oh!

elasticmachine commented Dec 23, 2020

Uh oh!

flash1293 commented Jan 4, 2021

Uh oh!

wylieconlon left a comment

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!

flash1293 Jan 11, 2021 • 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!

kibanamachine commented Jan 11, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

wylieconlon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

flash1293 commented Nov 26, 2020 •

edited

Loading

flash1293 Dec 22, 2020 •

edited

Loading

flash1293 Jan 11, 2021 •

edited

Loading