[Lens] Implement deep linking and embedding

x-pack/examples/embedded_lens_example/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/consistent-type-definitions": 0
+  }
+}

x-pack/examples/embedded_lens_example/README.md

@@ -0,0 +1,5 @@
+# Embedded Lens examples
+
+To run this example plugin, use the command `yarn start --run-examples`.
+
+TODO

x-pack/examples/embedded_lens_example/kibana.json

@@ -0,0 +1,15 @@
+{
+  "id": "embeddedLensExample",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["embedded_lens_example"],
+  "server": false,
+  "ui": true,
+  "requiredPlugins": [
+    "lens",
+    "data",
+    "developerExamples"
+  ],
+  "optionalPlugins": [],
+  "requiredBundles": []
+}

x-pack/examples/embedded_lens_example/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "embedded_lens_example",
+  "version": "1.0.0",
+  "main": "target/examples/embedded_lens_example",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../../scripts/kbn.js",
+    "build": "rm -rf './target' && ../../../node_modules/.bin/tsc"
+  }
+}

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

@@ -0,0 +1,151 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiButton,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+} from '@elastic/eui';
+import { CoreStart } from 'kibana/public';
+import { TypedLensByValueInput } from '../../../plugins/lens/public';
+import { StartDependencies } from './plugin';
+
+// Generate a Lens state based on some app-specific input parameters.
+// `TypedLensByValueInput` can be used for type-safety - it uses the same interfaces as Lens-internal code.
+function getLensAttributes(
+  defaultIndex: string,
+  color: string
+): TypedLensByValueInput['attributes'] {
+  return {
+    visualizationType: 'lnsXY',
+    title: '',
+    references: [
+      {
+        id: defaultIndex,
+        name: 'indexpattern-datasource-current-indexpattern',
+        type: 'index-pattern',
+      },
+      {
+        id: defaultIndex,
+        name: 'indexpattern-datasource-layer-layer1',
+        type: 'index-pattern',
+      },
+    ],
+    state: {
+      datasourceStates: {
+        indexpattern: {
+          layers: {
+            layer1: {
+              columnOrder: ['col1', 'col2'],
+              columns: {
+                col2: {
+                  dataType: 'number',
+                  isBucketed: false,
+                  label: 'Count of records',
+                  operationType: 'count',
+                  scale: 'ratio',
+                  sourceField: 'Records',
+                },
+                col1: {
+                  dataType: 'date',
+                  isBucketed: true,
+                  label: '@timestamp',
+                  operationType: 'date_histogram',
+                  params: { interval: 'auto' },
+                  scale: 'interval',
+                  sourceField: '@timestamp',
+                },
+              },
+            },
+          },
+        },
+      },
+      filters: [],
+      query: { language: 'kuery', query: '' },
+      visualization: {
+        axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true },
+        fittingFunction: 'None',
+        gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true },
+        layers: [
+          {
+            accessors: ['col2'],
+            layerId: 'layer1',
+            seriesType: 'bar_stacked',
+            xAccessor: 'col1',
+            yConfig: [{ forAccessor: 'col2', color }],
+          },
+        ],
+        legend: { isVisible: true, position: 'right' },
+        preferredSeriesType: 'bar_stacked',
+        tickLabelsVisibilitySettings: { x: true, yLeft: true, yRight: true },
+        valueLabels: 'hide',
+      },
+    },
+  };
+}
+
+export const App = (props: { core: CoreStart; plugins: StartDependencies }) => {
+  const [color, setColor] = useState('green');
+  const LensComponent = props.plugins.lens.EmbeddableComponent;
+  return (
+    <EuiPage>
+      <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
+        <EuiPageHeader>
+          <EuiPageHeaderSection>
+            <EuiTitle size="l">
+              <h1>Embedded Lens vis</h1>
+            </EuiTitle>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
+        <EuiPageContent>
+          <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
+            <EuiButton
+              onClick={() => {
+                // eslint-disable-next-line no-bitwise
+                const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
+                setColor(newColor);
+              }}
+            >
+              Change color
+            </EuiButton>
+            <EuiButton
+              onClick={() => {
+                props.plugins.lens.navigateToPrefilledEditor({
+                  id: '',
+                  timeRange: {
+                    from: 'now-5d',
+                    to: 'now',
+                  },
+                  attributes: getLensAttributes(props.core.uiSettings.get('defaultIndex'), color),
+                });
+                // eslint-disable-next-line no-bitwise
+                const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
+                setColor(newColor);
+              }}
+            >
+              Edit
+            </EuiButton>
+            <LensComponent
+              id=""
+              style={{ height: 500 }}
+              timeRange={{
+                from: 'now-5d',
+                to: 'now',
+              }}
+              attributes={getLensAttributes(props.core.uiSettings.get('defaultIndex'), color)}
+            />
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};

x-pack/examples/embedded_lens_example/public/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EmbeddedLensExamplePlugin } from './plugin';
+
+export const plugin = () => new EmbeddedLensExamplePlugin();

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { CoreSetup, AppMountParameters } from 'kibana/public';
+import { StartDependencies } from './plugin';
+
+export const mount = (coreSetup: CoreSetup<StartDependencies>) => async ({
+  element,
+}: AppMountParameters) => {
+  const [core, plugins] = await coreSetup.getStartServices();
+  const { App } = await import('./app');
+
+  const deps = {
+    core,
+    plugins,
+  };
+  const reactElement = <App {...deps} />;
+  render(reactElement, element);
+  return () => unmountComponentAtNode(element);
+};

x-pack/examples/embedded_lens_example/public/plugin.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Plugin, CoreSetup, AppNavLinkStatus } from '../../../../src/core/public';
+import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
+import { LensPublicStart } from '../../../plugins/lens/public';
+import { DeveloperExamplesSetup } from '../../../../examples/developer_examples/public';
+import { mount } from './mount';
+
+export interface SetupDependencies {
+  developerExamples: DeveloperExamplesSetup;
+}
+
+export interface StartDependencies {
+  data: DataPublicPluginStart;
+  lens: LensPublicStart;
+}
+
+export class EmbeddedLensExamplePlugin
+  implements Plugin<void, void, SetupDependencies, StartDependencies> {
+  public setup(core: CoreSetup<StartDependencies>, { developerExamples }: SetupDependencies) {
+    core.application.register({
+      id: 'embedded_lens_example',
+      title: 'Embedded Lens example',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      mount: mount(core),
+    });
+
+    developerExamples.register({
+      appId: 'embedded_lens_example',
+      title: 'Embedded Lens',
+      description: 'Examples of how to use Lens in other apps.',
+      links: [
+        {
+          label: 'README',
+          href:
+            'https://github.com/elastic/kibana/tree/master/x-pack/examples/embedded_lens_example',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
+  }
+
+  public start() {}
+
+  public stop() {}
+}

x-pack/examples/embedded_lens_example/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*"
+  ],
+  "exclude": [],
+  "references": [
+    { "path": "../../../src/core/tsconfig.json" },
+    { "path": "../../../src/plugins/kibana_utils/tsconfig.json" },
+    { "path": "../../../src/plugins/kibana_react/tsconfig.json" },
+    { "path": "../../../src/plugins/share/tsconfig.json" }
+  ]
+}

x-pack/plugins/lens/public/app_plugin/types.ts

@@ -38,7 +38,7 @@ import {
   EmbeddableStateTransfer,
 } from '../../../../../src/plugins/embeddable/public';
 import { TableInspectorAdapter } from '../editor_frame_service/types';
-import { EditorFrameInstance } from '..';
+import { EditorFrameInstance } from '../types';
 
 export interface LensAppState {
   isLoading: boolean;

x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx

@@ -214,8 +214,6 @@ describe('embeddable', () => {
       searchSessionId: 'searchSessionId',
     });
 
-    expect(expressionRenderer).toHaveBeenCalledTimes(1);
-
     await new Promise((resolve) => setTimeout(resolve, 0));
 
     expect(expressionRenderer).toHaveBeenCalledTimes(2);

x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx

@@ -57,17 +57,18 @@ interface LensBaseEmbeddableInput extends EmbeddableInput {
   filters?: Filter[];
   query?: Query;
   timeRange?: TimeRange;
+  palette?: PaletteOutput;
+  renderMode?: RenderMode;
+  style?: React.CSSProperties;
+  className?: string;
 }
 
 export type LensByValueInput = {
   attributes: LensSavedObjectAttributes;
 } & LensBaseEmbeddableInput;
 
 export type LensByReferenceInput = SavedObjectEmbeddableInput & LensBaseEmbeddableInput;
-export type LensEmbeddableInput = (LensByValueInput | LensByReferenceInput) & {
-  palette?: PaletteOutput;
-  renderMode?: RenderMode;
-};
+export type LensEmbeddableInput = LensByValueInput | LensByReferenceInput;
 
 export interface LensEmbeddableOutput extends EmbeddableOutput {
   indexPatterns?: IIndexPattern[];
@@ -159,6 +160,37 @@ export class Embeddable
       .subscribe((input) => {
         this.reload();
       });
+
+    // Re-initialize the visualization if either the attributes or the saved object id changes
+    input$
+      .pipe(
+        distinctUntilChanged((a, b) =>
+          isEqual(
+            ['attributes' in a && a.attributes, 'savedObjectId' in a && a.savedObjectId],
+            ['attributes' in b && b.attributes, 'savedObjectId' in b && b.savedObjectId]
+          )
+        ),
+        skip(1)
+      )
+      .subscribe(async (input) => {
+        await this.initializeSavedVis(input);
+        this.reload();
+      });
+
+    // Update search context and reload on changes related to search
+    input$
+      .pipe(
+        distinctUntilChanged((a, b) =>
+          isEqual(
+            [a.filters, a.query, a.timeRange, a.searchSessionId],
+            [b.filters, b.query, b.timeRange, b.searchSessionId]
+          )
+        ),
+        skip(1)
+      )
+      .subscribe(async (input) => {
+        this.onContainerStateChanged(input);
+      });
   }
 
   public supportedTriggers() {
@@ -262,6 +294,8 @@ export class Embeddable
         renderMode={input.renderMode}
         syncColors={input.syncColors}
         hasCompatibleActions={this.hasCompatibleActions}
+        className={input.className}
+        style={input.style}
       />,
       domNode
     );