From 36d1ac03383dc7742cffcf058185e83d5fda91cf Mon Sep 17 00:00:00 2001 From: Corey Robertson Date: Tue, 2 Mar 2021 16:54:30 -0500 Subject: [PATCH 1/2] wip --- .../renderers/embeddable/embeddable.tsx | 54 ++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx index e9050d313fbaf..2b696bc1fb855 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx @@ -27,6 +27,8 @@ const embeddablesRegistry: { [key: string]: IEmbeddable; } = {}; +const embeddablesLoading = {}; + const renderEmbeddableFactory = (core: CoreStart, plugins: StartDeps) => { const I18nContext = core.i18n.Context; @@ -57,7 +59,10 @@ export const embeddableRendererFactory = ( render: async (domNode, { input, embeddableType }, handlers) => { const uniqueId = handlers.getElementId(); - if (!embeddablesRegistry[uniqueId]) { + const isLoaded = embeddablesRegistry[uniqueId] !== undefined; + const isLoading = embeddablesLoading[uniqueId] !== undefined; + + if (!isLoaded && !isLoading) { const factory = Array.from(plugins.embeddable.getEmbeddableFactories()).find( (embeddableFactory) => embeddableFactory.type === embeddableType ) as EmbeddableFactory; @@ -67,6 +72,50 @@ export const embeddableRendererFactory = ( throw new EmbeddableFactoryNotFoundError(embeddableType); } + const createPromise = factory + .createFromSavedObject(input.id, input) + .then(async (embeddableObject) => { + const palettes = await plugins.charts.palettes.getPalettes(); + + embeddablesRegistry[uniqueId] = embeddableObject; + ReactDOM.unmountComponentAtNode(domNode); + + const subscription = embeddableObject.getInput$().subscribe(function (updatedInput) { + const updatedExpression = embeddableInputToExpression( + updatedInput, + embeddableType, + palettes + ); + + if (updatedExpression) { + handlers.onEmbeddableInputChange(updatedExpression); + } + }); + + ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () => + handlers.done() + ); + + handlers.onResize(() => { + ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () => + handlers.done() + ); + }); + + handlers.onDestroy(() => { + subscription.unsubscribe(); + handlers.onEmbeddableDestroyed(); + + delete embeddablesRegistry[uniqueId]; + + return ReactDOM.unmountComponentAtNode(domNode); + }); + + delete embeddablesLoading[uniqueId]; + }); + + embeddablesLoading[uniqueId] = createPromise; + /* const embeddableObject = await factory.createFromSavedObject(input.id, input); const palettes = await plugins.charts.palettes.getPalettes(); @@ -104,6 +153,9 @@ export const embeddableRendererFactory = ( return ReactDOM.unmountComponentAtNode(domNode); }); + */ + } else if (isLoading) { + // Just ignore this input for now } else { embeddablesRegistry[uniqueId].updateInput(input); embeddablesRegistry[uniqueId].reload(); From cc624e9a84e0189d264817cf58f286d08e9a64ad Mon Sep 17 00:00:00 2001 From: Corey Robertson Date: Wed, 3 Mar 2021 13:21:19 -0500 Subject: [PATCH 2/2] WIP --- .../renderers/embeddable/embeddable.tsx | 68 ++++--------------- 1 file changed, 14 insertions(+), 54 deletions(-) diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx index 2b696bc1fb855..73e839433c25e 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx @@ -24,11 +24,9 @@ import { CANVAS_EMBEDDABLE_CLASSNAME } from '../../../common/lib'; const { embeddable: strings } = RendererStrings; const embeddablesRegistry: { - [key: string]: IEmbeddable; + [key: string]: IEmbeddable | Promise; } = {}; -const embeddablesLoading = {}; - const renderEmbeddableFactory = (core: CoreStart, plugins: StartDeps) => { const I18nContext = core.i18n.Context; @@ -59,10 +57,7 @@ export const embeddableRendererFactory = ( render: async (domNode, { input, embeddableType }, handlers) => { const uniqueId = handlers.getElementId(); - const isLoaded = embeddablesRegistry[uniqueId] !== undefined; - const isLoading = embeddablesLoading[uniqueId] !== undefined; - - if (!isLoaded && !isLoading) { + if (!embeddablesRegistry[uniqueId]) { const factory = Array.from(plugins.embeddable.getEmbeddableFactories()).find( (embeddableFactory) => embeddableFactory.type === embeddableType ) as EmbeddableFactory; @@ -72,51 +67,15 @@ export const embeddableRendererFactory = ( throw new EmbeddableFactoryNotFoundError(embeddableType); } - const createPromise = factory + const embeddablePromise = factory .createFromSavedObject(input.id, input) - .then(async (embeddableObject) => { - const palettes = await plugins.charts.palettes.getPalettes(); - - embeddablesRegistry[uniqueId] = embeddableObject; - ReactDOM.unmountComponentAtNode(domNode); - - const subscription = embeddableObject.getInput$().subscribe(function (updatedInput) { - const updatedExpression = embeddableInputToExpression( - updatedInput, - embeddableType, - palettes - ); - - if (updatedExpression) { - handlers.onEmbeddableInputChange(updatedExpression); - } - }); - - ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () => - handlers.done() - ); - - handlers.onResize(() => { - ReactDOM.render(renderEmbeddable(embeddableObject, domNode), domNode, () => - handlers.done() - ); - }); - - handlers.onDestroy(() => { - subscription.unsubscribe(); - handlers.onEmbeddableDestroyed(); - - delete embeddablesRegistry[uniqueId]; - - return ReactDOM.unmountComponentAtNode(domNode); - }); - - delete embeddablesLoading[uniqueId]; + .then((embeddable) => { + embeddablesRegistry[uniqueId] = embeddable; + return embeddable; }); + embeddablesRegistry[uniqueId] = embeddablePromise; - embeddablesLoading[uniqueId] = createPromise; - /* - const embeddableObject = await factory.createFromSavedObject(input.id, input); + const embeddableObject = await (async () => embeddablePromise)(); const palettes = await plugins.charts.palettes.getPalettes(); @@ -153,12 +112,13 @@ export const embeddableRendererFactory = ( return ReactDOM.unmountComponentAtNode(domNode); }); - */ - } else if (isLoading) { - // Just ignore this input for now } else { - embeddablesRegistry[uniqueId].updateInput(input); - embeddablesRegistry[uniqueId].reload(); + const embeddable = embeddablesRegistry[uniqueId]; + + if ('updateInput' in embeddable) { + embeddable.updateInput(input); + embeddable.reload(); + } } }, });