Png #77930

streamich · 2020-09-18T16:40:56Z

WIP

Notes:

navigator.clipboard available only on HTTPS or localhost. This can be detected, hide the action in that case.
Show user a notification on successful copy-to-clipboard.
Show error when something goes wrong.
Think about fallback or how to integrate this with "Download PNG". Notification message could contain:
- Message saying that it was copied.
- Preview of the chart.
- "Download" button to download the PNG.

Summary

Summarize your PR. If it involves visual changes include a screenshot or gif.

Checklist

Delete any items that are not applicable to this PR.

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
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

kibanamachine · 2020-09-18T16:59:11Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: ff94abf
Pipeline Steps (look for red circles / failed steps)
Interpreting CI Failures

Failed CI Steps

Check Types

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
embeddable	93	+1	92

page load bundle size

id	value	diff	baseline
embeddable	433.0KB	+2.4KB	430.6KB
lens	1.1MB	+3.1KB	1.1MB
uiActions	268.4KB	+384.0B	268.1KB
total		+5.9KB

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

flash1293 · 2020-09-21T07:36:46Z

@streamich The description still says WIP, but the PR isn't in draft mode - is this ready to review? Also, is there an issue for this feature for more context?

Dosant · 2020-09-21T10:06:02Z

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

@@ -207,6 +209,9 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
        embeddable: this,
      });
    }
+    if (isLensControlsEvent(event)) {
+      this.chartControls = event.data;


A bit weird seeing events pipeline used for this.
Maybe it is possible to forward a ref to controls instead ?

Curious, why do you think it is weird?

My take on this, not sure how much subjective is this, so curious about other's opinions:

I wouldn't expect that to get access to an api, I have to use an event system. Yes it works and can't be implemented as is, but getting it via reference to a child component seems like more common pattern to me?

I think using events for this is abusing them for things that there are not meant to handle:

Events: notifying about changes or interactions in a system and passing meta information about the change

Not events: exposing imperative handlers to underlying APIs.

i agree this is weird ..... i would expect event.data to be serializable ....

why do we need to do this, why doesn't chart handle this internally ?

... getting it via reference to a child component seems like more common pattern to me?

It is effectively a function reference, like:

<input ref={ref => {}} />

Functional references are better than named or object references.

i agree this is weird ..... i would expect event.data to be serializable ....

I'm not sure why you find it weird, it is a common pattern. If event.data had to be serializable, then we would need to use something else, but I'm not aware of this requirement.

why do we need to do this, why doesn't chart handle this internally ?

I'm not sure what you mean. We need to expose a way for embeddable to create a .png from a chart. The chart handles the part it needs to handle, the embeddable handles its part.

ppisljar · 2020-09-21T14:58:30Z

x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx

+        return toBlob(snapshot.blobOrDataUrl);
+      },
+    };
+    onControls(controls);


just call controls.toPngBlob() here ?

You can, but that would generate a PNG of every chart on the dashboard at the moment they initially mount, not something you want.

ehh ? onControls calls handlers.event() which in turn generates the png ... so instead of doing handlers.event generate the png.

in my code .png is generated only when user clicks "Copy PNG" action in UI

onControls calls handlers.event() which in turn generates the png ...

hadlers.event() does not generate anything, it just stores the controls object in embeddable, and then embeddable can use those controls when it needs to, i.e. when user clicks "Copy PNG" in UI.

ppisljar · 2020-09-21T14:58:35Z

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

@@ -207,6 +209,9 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
        embeddable: this,
      });
    }
+    if (isLensControlsEvent(event)) {
+      this.chartControls = event.data;


i agree this is weird ..... i would expect event.data to be serializable ....

why do we need to do this, why doesn't chart handle this internally ?

streamich · 2020-09-22T08:20:17Z

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

@@ -233,4 +238,10 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
      }
    }
  }
+
+  async toPngBlob() {


Use something like:

getExportFunctions(): {toPngBlob?: () => Promise<Blob>; toHtml?: () => Promise<string>}

streamich · 2020-09-22T08:33:46Z

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

@@ -535,6 +536,10 @@ export interface LensBrushEvent {
  name: 'brush';
  data: TriggerContext<typeof SELECT_RANGE_TRIGGER>['data'];
 }
+export interface LensControlsEvent {


Move this to expressions plugin.

streamich · 2020-09-22T08:48:36Z

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

+export function isLensControlsEvent(event: ExpressionRendererEvent): event is LensControlsEvent {
+  return event.name === 'controls';
+}


Remove this function or move it to expressions plugin.

elasticmachine · 2022-03-10T10:19:15Z

Pinging @elastic/kibana-app-services (Team:AppServicesUx)

streamich added 3 commits September 18, 2020 15:26

feat: 🎸 set up "Copy PNG" action

ce05809

feat: 🎸 implement toPngBlob() for Lens embeddable

5e1ccd9

feat: 🎸 copy image blob to clipboard

ff94abf

streamich requested a review from a team September 18, 2020 16:40

streamich requested a review from a team as a code owner September 18, 2020 16:40

botelastic bot added the Feature:Embedding Embedding content via iFrame label Sep 18, 2020

tsullivan self-requested a review September 18, 2020 17:49

Dosant reviewed Sep 21, 2020

View reviewed changes

ppisljar reviewed Sep 21, 2020

View reviewed changes

streamich closed this Sep 21, 2020

streamich commented Sep 22, 2020

View reviewed changes

streamich mentioned this pull request Feb 24, 2021

[Meta] Dashboard panel Share-to #60433

Closed

12 tasks

vadimkibana added the Team:AppServicesUx label Mar 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Png #77930

Png #77930

streamich commented Sep 18, 2020 •

edited

Loading

kibanamachine commented Sep 18, 2020 •

edited

Loading

flash1293 commented Sep 21, 2020 •

edited

Loading

Dosant Sep 21, 2020

streamich Sep 21, 2020

Dosant Sep 21, 2020

ppisljar Sep 21, 2020

streamich Sep 21, 2020 •

edited

Loading

ppisljar Sep 21, 2020

streamich Sep 21, 2020

ppisljar Sep 21, 2020

streamich Sep 21, 2020 •

edited

Loading

ppisljar Sep 21, 2020

streamich Sep 22, 2020 •

edited

Loading

streamich Sep 22, 2020

streamich Sep 22, 2020

elasticmachine commented Mar 10, 2022

Png #77930

Png #77930

Conversation

streamich commented Sep 18, 2020 • edited Loading

Summary

Checklist

For maintainers

kibanamachine commented Sep 18, 2020 • edited Loading

💔 Build Failed

Failed CI Steps

Build metrics

@kbn/optimizer bundle module count

page load bundle size

flash1293 commented Sep 21, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

streamich Sep 21, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

streamich Sep 21, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

streamich Sep 22, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Mar 10, 2022

streamich commented Sep 18, 2020 •

edited

Loading

kibanamachine commented Sep 18, 2020 •

edited

Loading

flash1293 commented Sep 21, 2020 •

edited

Loading

streamich Sep 21, 2020 •

edited

Loading

streamich Sep 21, 2020 •

edited

Loading

streamich Sep 22, 2020 •

edited

Loading