Be able to 'embed' the visualization in your own web page

[bjdmeest]

So a button that does something like below

<script src="example.com/dataflow-visualization/v1.1.2/index.js"></script>
<script>
{ [the JSON configuration] }
</script>
<div id="myviz-randomid123"></div>
<script>
DataFlowVisualization.init('myviz-randomid123')
</script>

[TiboStr]

@bjdmeest
This will be node.js, right? Then how am I going to access my React code?

[TiboStr]

I imagine this should be a js file in the static folder, so it can be accessed like https://knowledgeonwebscale.github.io/dataflow-visualization/static/js/<name-of-file>?

[bjdmeest]

Nono, embed in HTML :). You probably want to link to a released static JS file indeed

[TiboStr]

DataFlowVisualization.init('myviz-randomid123')

This code uses the imported script, right?

Don't you imagine that script is written with node.js?

And I think the js script will have the link https://knowledgeonwebscale.github.io/dataflow-visualization/static/js/<name-of-file>

[bjdmeest]

It will be written in plain JavaScript, otherwise it won't work in the browser, or am I missing something?

https://knowledgeonwebscale.github.io/dataflow-visualization/static/js/<name-of-file> --> no, because then it relies on the latest version, you don't want previously exported embed code to break with a new version, so you need to link to a specifically released asset, eg https://github.com/KNowledgeOnWebScale/dataflow-visualization/releases/download/v1.0.2/embed.js

[TiboStr]

It will be written in plain JavaScript, otherwise it won't work in the browser, or am I missing something?

Indeed! But how am i going to import stuff from my js files that reside in a React app?

[TiboStr]

Imagine I have a file releasedScript.js that is plain JavaScript. And that file needs a function from a file that resides in the React environment, e.g. test.js.

I don't think I can access the function from test.js.

Maybe this gif makes things a bit more clear:

(think about all the stuff I would need from configParser or schemaValidation)

[TiboStr]

And if that problem is fixed, I also need to get the ReactFlow library working in plain js. But perhaps this guide would help with that: https://sdk.gooddata.com/gooddata-ui/docs/4.1.1/ht_use_react_components_with_vanilla_js.html.

[bjdmeest]

You can probably see that as a second app without all the editing functionality but only the visualization that loads the config from, e.g. a global object. You'll probably want multiple builds, see eg https://www.labnol.org/code/react-multiple-entry-points-210512, and then you'll have in your second build a setup kind of like at https://sdk.gooddata.com/gooddata-ui/docs/4.1.1/ht_use_react_components_with_vanilla_js.html

[TiboStr]

https://knowledgeonwebscale.github.io/dataflow-visualization/static/js/<name-of-file> --> no, because then it relies on the latest version, you don't want previously exported embed code to break with a new version, so you need to link to a specifically released asset, eg https://github.com/KNowledgeOnWebScale/dataflow-visualization/releases/download/v1.0.2/embed.js

How do I link to a specially released version?

Something like this does not work:
https://github.com/KNowledgeOnWebScale/dataflow-visualization/releases/download/v0.1.0/src/index.js

(or is this link wrong?)

This does work (but it is not a link to a release, it is a link to the version on the main branch):
https://raw.githubusercontent.com/KNowledgeOnWebScale/dataflow-visualization/main/src/index.js

[bjdmeest]

Ah yeah, you'll probably need something like https://raw.githubusercontent.com/KNowledgeOnWebScale/dataflow-visualization/v0.1.0/src/index.js (so you use a tagged version instead of just 'main')

[TiboStr]

You can probably see that as a second app (...)

Wouldn't I just need to have another React component instead of a second build? That React component takes the config as a parameter. That React component is then only used by that script you link to in the <src>. And then with magic, a flow will appear.

[bjdmeest]

also fine, but you need to create a built JS file, and for that I gave pointer I found after 2 min of googling, you can probably come up with something better :)

[bjdmeest]

This is partially fixed with the iframe method, and is related to #101