When I try to laod this in vscode webview I cannot fine the value "@hpcc-js/wasm"

[colombod]

I am trying to use you library in an extension for .NET Interactive notebook.
But when executing the code:

loadHpccWasm_ce83f9987ab8408ab9e5f83540f06609 = () => {
    let container = document.getElementById('ce83f9987ab8408ab9e5f83540f06609');
    const dot = `graph ethane {
    C_0 -- H_0 [type=s];
    C_0 -- H_1 [type=s];
    C_0 -- H_2 [type=s];
    C_0 -- C_1 [type=s];
    C_1 -- H_3 [type=s];
    C_1 -- H_4 [type=s];
    C_1 -- H_5 [type=s];
}`;
            
    let hpccWasm = window['@hpcc-js/wasm'];
    hpccWasm.graphviz.layout(dot, "svg", "dot").then(svg => { container.innerHTML = svg; });
}

if (window["@hpcc-js/wasm"]) {
    loadHpccWasm_ce83f9987ab8408ab9e5f83540f06609();
    } else {
    let hpccWasm_script = document.createElement('script');
    hpccWasm_script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist/index.min.js');
    hpccWasm_script.setAttribute('type', 'text/javascript');
    hpccWasm_script.setAttribute('defer', 'true');
    hpccWasm_script.onload = () => { loadHpccWasm_ce83f9987ab8408ab9e5f83540f06609(); };
    document.getElementsByTagName('head')[0].appendChild(hpccWasm_script);
}

I get this output

the js code is downlaoded but can't invoke api to make this work.

this is the PR I am working on colombod/dotnet-interactive-extension-lab#15.

Anyone can help?

[GordonSmith]

It looks like it should work and does work here: https://jsfiddle.net/schmoo2k/rz20s47w/2/

[colombod]

That code doesn't work if the library is loaded via require in a vscode notebook. I would be happy to show a repro if you have time

[GordonSmith]

Sure - but I am not familiar with the c# thunking that is going on. If its a VS Code NB then you should have a "render" item?

[GordonSmith]

FWIW - I use an "OJS" renderer for my notebooks. OJS lets you write ObservableHQ scripts, which in turn let you leverage any of the visualizations from https://observablehq.com/ (which in turn can also include @hpcc-js/wasm...)

[colombod]

this is the html produced by the notebook formatter

<div >

<div id="4f073f25e6574395959dacd7efe741f9" style="height:600px; width:100%"></div>

<script type="text/javascript">



loadHpcc_4f073f25e6574395959dacd7efe741f9 = () => {
 
        (require.config({ 'paths': { 'context': '1.14.1', 'hpcc' : 'https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist/index.min', 'urlArgs': 'cacheBuster=ca62db6b1ffc4de9bf5994092dd06b78' }}) || require)(['hpcc'], (hpcc) => {

            let container = document.getElementById('4f073f25e6574395959dacd7efe741f9');
            let dot = `graph ethane {
    C_0 -- H_0 [type=s];
    C_0 -- H_1 [type=s];
    C_0 -- H_2 [type=s];
    C_0 -- C_1 [type=s];
    C_1 -- H_3 [type=s];
    C_1 -- H_4 [type=s];
    C_1 -- H_5 [type=s];
}`;
            hpcc.graphviz.layout(dot, "svg", "dot").then(svg => { container.innerHTML = svg; });
        },
        (error) => {
            console.log(error);
        });
}
// ensure `require` is available globally
if ((typeof(require) !==  typeof(Function)) || (typeof(require.config) !== typeof(Function))) {
    let require_script = document.createElement('script');
    require_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js');
    require_script.setAttribute('type', 'text/javascript');
    
    
    require_script.onload = function() {
        loadHpcc_4f073f25e6574395959dacd7efe741f9();
    };

    document.getElementsByTagName('head')[0].appendChild(require_script);
}
else {
    loadHpcc_4f073f25e6574395959dacd7efe741f9();
}

</script>

</div>

[colombod]

that snippet in js fiddle gives the same error I get in notebooks

[GordonSmith]

Its using AMD loading, you just need to add one line hpcc.wasmFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist");:

loadHpcc_4f073f25e6574395959dacd7efe741f9 = () => {

  (require.config({
    'paths': {
      'context': '1.14.1',
      'hpcc': 'https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist/index.min',
      'urlArgs': 'cacheBuster=ca62db6b1ffc4de9bf5994092dd06b78'
    }
  }) || require)(['hpcc'], (hpcc) => {

		hpcc.wasmFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist");
      let container = document.getElementById('4f073f25e6574395959dacd7efe741f9');
      let dot = `graph ethane {
    C_0 -- H_0 [type=s];
    C_0 -- H_1 [type=s];
    C_0 -- H_2 [type=s];
    C_0 -- C_1 [type=s];
    C_1 -- H_3 [type=s];
    C_1 -- H_4 [type=s];
    C_1 -- H_5 [type=s];
}`;
      hpcc.graphviz.layout(dot, "svg", "dot").then(svg => {
        container.innerHTML = svg;
      });
    },
    (error) => {
      console.log(error);
    });
}
// ensure `require` is available globally
if ((typeof(require) !== typeof(Function)) || (typeof(require.config) !== typeof(Function))) {
  let require_script = document.createElement('script');
  require_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js');
  require_script.setAttribute('type', 'text/javascript');


  require_script.onload = function() {
    loadHpcc_4f073f25e6574395959dacd7efe741f9();
  };

  document.getElementsByTagName('head')[0].appendChild(require_script);
} else {
  loadHpcc_4f073f25e6574395959dacd7efe741f9();
}

[GordonSmith]

https://jsfiddle.net/schmoo2k/h4r8qa0k/6/

[colombod]

You are a star. Will update asap and let you know. Happy to show you a demo, users will love access to this api!

[colombod]

It works now!

not sure what I am doing wrong to setup the rendering viewport, would like to take all space

<script type="text/javascript" defer="">

loadHpcc_a159ee8657364a2abac31570bb077b86 = () => {
 
        (require.config({ 'paths': { 'context': '1.14.1', 'hpcc' : 'https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist/index.min', 'urlArgs': 'cacheBuster=e1a9ec35ac044ff9ab8b804a65d077c2' }}) || require)(['hpcc'], (hpcc) => {

            let container = document.getElementById('a159ee8657364a2abac31570bb077b86');
            let dot = `graph {    
    bgcolor= transparent;
    node [color=white] 
    a -- b[color=red,penwidth=3.0];
    b -- c;
    c -- d[color=red,penwidth=3.0];
    d -- e;
    e -- f;
    a -- d;
    b -- d[color=red,penwidth=3.0];
    c -- f[color=red,penwidth=3.0];
}`;
            hpcc.wasmFolder(`https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist`);
            hpcc.graphviz.layout(dot, "svg", "dot").then(svg => { container.innerHTML = svg; });
        },
        (error) => {
            console.log(error);
        });
}
// ensure `require` is available globally
if ((typeof(require) !==  typeof(Function)) || (typeof(require.config) !== typeof(Function))) {
    let require_script = document.createElement('script');
    require_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js');
    require_script.setAttribute('type', 'text/javascript');
    
    
    require_script.onload = function() {
        loadHpcc_a159ee8657364a2abac31570bb077b86();
    };

    document.getElementsByTagName('head')[0].appendChild(require_script);
}
else {
    loadHpcc_a159ee8657364a2abac31570bb077b86();
}

</script>

the div containing it is

<div id="a159ee8657364a2abac31570bb077b86" style="height:600px; width:400px">

but the svg element inside is

[GordonSmith]

For GraphViz layout questions I suggest you ask them here: https://forum.graphviz.org/ as they know the tool inside out!

When rendering I tend to add d3 pan and zoom support to the svg output: https://jsfiddle.net/schmoo2k/h4r8qa0k/50/

You can then drag and zoom in/out (with the mouse wheel)