Dot.js workerPort error

sle7en · December 16, 2021, 9:26pm

I’m getting the error below with the attached .dot file, yet graphviz playground .dot renderer/editor displays it without a hickup.

dot.js:99 Uncaught undefined
(anonymous) @ dot.js:99
(anonymous) @ dot.js:63
_workerPort.onmessage @ dot.js:33

I have the following libraries in my <head> section;

<!-- Fetch D3 Library -->
<script src="https://d3js.org/d3.v6.min.js"></script>

<!-- Fetch WASM -->
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.min.js"></script>
<script>
    var hpccWasm = window["@hpcc-js/wasm"];
</script>

<!-- Fetch D3-Graphviz -->
<script src="https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.js"></script>

Would anyone have a clue as to why? TIA

eminsoy_familyTree.dot (9.6 KB)

mark · December 16, 2021, 9:44pm

Hmm, hard to say with a stack trace with no names. Could you try replacing all “.min.js” in your HTML with “.js” to get the unminified version? That might have a more useful stack trace with more names.

schmoo2k · December 17, 2021, 6:49am

The DOT is rendering fine here: Graphviz Quick Test / Gordon Smith / Observable (observablehq.com) which is basically using the same wasm file you are using.

The error you are getting is being emitted from “dot.js” is that your file?

sle7en · December 17, 2021, 8:49am

The error you are getting is being emitted from “dot.js” is that your file?

dot.js is coming from d3-graphviz

schmoo2k · December 17, 2021, 9:04am

I suspect you just have some version mis matches - try this:

<!DOCTYPE html>
<meta charset="utf-8" />
<body>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="https://unpkg.com/@hpcc-js/wasm@1.4.1/dist/index.min.js"></script>
  <script src="https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.js"></script>
  <div
    id="graph"
    style="text-align: center; width: 400px; height: 400px;"
  ></div>
  <script>
    d3.select("#graph").graphviz().renderDot("digraph  {a -> b}");
  </script>
</body>

sle7en · December 17, 2021, 9:13am

I ran it with no minified js and the result is the same unfortunately.

<!-- Fetch D3 Library -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Fetch WASM -->
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js" type="javascript/worker"></script>
<script>
    var hpccWasm = window["@hpcc-js/wasm"];
</script>

<!-- Fetch D3-Graphviz -->
<script src="https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.js"></script>

I remember graphviz 4.0.0 requiring D3.v6 but not sure about wasm so I just grabbed the latest but earlier I did also ran it with @magjac’s example. And his example still runs with the configuration I have… but I’ll give your (@schmoo2k) recommendation a try.

schmoo2k · December 17, 2021, 9:28am

FWIW you can see it working here: dazzling-cherry-2bief - CodeSandbox
(For some reason you need to hit the little refresh button just above the preview…)

sle7en · December 17, 2021, 9:35am

Yea nope, same error… weird. @magjac’s example still runs fine though. I’m using jekyll by the way and this is the process of how I feed my graph into d3-graphviz;

{% capture eminsoy_familyTree %}
{% include /charts/eminsoy_familyTree.dot %}
{% endcapture %}

<script type="text/javascript">
d3.select("#eminsoy_familyTreeDiv").graphviz().renderDot('{{- eminsoy_familyTree | strip_newlines -}}');
</script>

Stripping new lines with the liquid filter shouldn’t have an adverse effect right? Could it have anything to do with the javascript/worker & application/javascript for d3-graphviz? Just spitballing at this point…

schmoo2k · December 17, 2021, 9:50am

Not sure I follow your process, but the following html works fine:

<!DOCTYPE html>
<meta charset="utf-8" />

<body>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="https://unpkg.com/@hpcc-js/wasm@1.4.1/dist/index.min.js"></script>
    <script src="https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.js"></script>
    <div id="graph" style="text-align: center; width: 400px; height: 400px;"></div>
    <script>
        d3.select("#graph").graphviz().renderDot(`
		digraph {
  edge [dir=none];
  node [shape=box; color=gainsboro; style=filled];
  graph [rankdir="TB";
         center=true;
         bgcolor=transparent;
         concentrate=true;
         /*outputMode="nodesfirst";*/
         /*clusterrank=local;*/
         /*sep="+10,10";*/
         mclimit=0.1;
         /*sep="+10,10";*/
         /*overlap=false;*/
         ranksep=1;
         nodesep=0.5;];
  
  aa00 -> {"Ahmet" "Şaban" "Mustafa"};

  "Şaban" -> aa10 -> "Emin";
  {rank=same; "Emin" -> aa20 -> "Sultan"};

  aa20 -> aa25 -> {"Bahri" "Derviş" "Çakala" "Hasret" "Seyehat" "Yusuf" "Ziya"};
  subgraph cluster_0 {rank=same; color=transparent; "Yusuf" -> aa30 -> "Hanife" [constraint=false]};

  aa30 -> aa35 -> {"Hacer" "Muzaffer" "Münire" "Nigar" "Rahim" "Rasim"};
  {rank=same; "Hacer" -> aa40 -> "Nevzat"};
  {rank=same; "Muzaffer" -> ba40 -> "Münevver"};
  {rank=same; "Nigar" -> ca40 -> "Idris"};
  {rank=same; "Rahim" -> da40 -> "Fadime"};
  {rank=same; "Rasim" -> ea40 -> "Aslı"};

  aa40 -> aa45 -> {"Servet" "Hayriye"};
  ba40 -> ba45 -> {"Fahamettin" "Hisamettin" "Miyase" "Naime" "Süreyya"};
  {rank=same; "Fahamettin" -> ba50 -> "Necibe"};
  {rank=same; "Hisamettin" -> bb50 -> "Feride"};
  {rank=same; "Miyase" -> bc50 -> "Hesabali"};
  {rank=same; "Naime" -> bd50 -> "Ismail"};
  subgraph cluster_1 {rank=same; color=transparent; "Süreyya" -> be50 -> "Naciye" [constraint=false]};
  ca40 -> ca45 -> {"Alişan" "Fadime2" "Münevver2" "Osman" "Remziye" "Sundus"};
  da40 -> da45 -> {"Naci" "Nermin" "Şayibe" "Tahsin" "Tarık"};
  ea40 -> ea45 -> {"Çiğdem" "Erşan" "Gülden" "Gülçen" "Hacer2" "Mihriban" "Mübeccel" "Nurdem" "Uğur"};

  ba50 -> ba55 -> {"Münevver3" "Selçuk"};
  {rank=same; "Münevver3" -> aa60 -> "Mustafa2"};
  {rank=same; "Selçuk" -> ab60 -> "Nur"};
  bb50 -> bb55 -> {"Ayla" "Münire2" "Seyhun" "Yusuf2"};
  subgraph cluster_2 {rank=same; color=transparent; "Seyhun" -> ba60 -> "Emine" [constraint=false]};
  subgraph cluster_3 {rank=same; color=transparent; "Yusuf2" -> bb60 -> "Aliye" [constraint=false]};
  bc50 -> bc55 -> {"Ergin" "Ilter"};
  subgraph cluster_4 {rank=same; color=transparent;"Ergin" -> ca60 -> "Münire2" [constraint=false]};
  subgraph cluster_5 {rank=same; color=transparent; "Ilter" -> cb60 -> "Leyla" [constraint=false]};
  be50 -> be55 -> {"Gökhan" "Hakan"};
  {rank=same; "Gökhan" -> da60 -> "Irem"};
  {rank=same; "Hakan" -> db60 -> "Gülberk"};

  aa60 -> aa65 -> {"Can" "Özdal"};
  {rank=same; "Can" -> aa70 -> "Lauren"};
  {rank=same; "Özdal" -> ab70 -> "Béné"};
  ab60 -> ab65 -> {"Elvin"};
  {rank=same; "Elvin" -> ba70 -> "Ömer"};
  ba60 -> ba65 -> {"Ekin"};
  bb60 -> bb65 -> {"Tuğra"};
  subgraph cluster_6 {rank=same; color=transparent; "Tuğra" -> ca70 -> "Pınar2" [constraint=false]};
  ca60 -> ca65 -> {"Cem" "Pınar"};
  {rank=same; "Pınar" -> da70 -> "Özgür"};
  cb60 -> cb65 -> {"Burcu" "Gözde"};
  da60 -> da65 -> {"Arhan" "Arın"};
  db60 -> db65 -> {"Berkhan"};

  aa70 -> aa75 -> {"Claire Alara" "Declan Alp"};
  ab70 -> ab75 -> {"Joseph Can"};
  ba70 -> ba75 -> {"Ali" "Can2"};
  ca70 -> ca75 -> {"Elis"};
  da70 -> da75 -> {"Mert"};

  
  // jenerasyon 1
  aa00 [shape=point];
  "Ahmet" [shape=box, regular=0, color="cornflowerblue"];
  "Şaban" [shape=box, regular=0, color="cornflowerblue"];
  "Mustafa" [shape=box, regular=0, color="cornflowerblue"];
  aa10 [shape=point];

  // jenerasyon 2
  "Emin" [shape=box, regular=0, color="cornflowerblue"]; "Sultan" [shape=egg, regular=0, color="pink"]; aa20 [shape=point]; aa25 [shape=point];

  // jenerasyon 3
  "Bahri" [shape=box, regular=0, color="cornflowerblue"];
  "Derviş" [shape=box, regular=0, color="cornflowerblue"];
  "Çakala" [shape=box, regular=0, color="cornflowerblue"];
  "Hasret" [shape=box, regular=0, color="cornflowerblue"];
  "Seyehat" [shape=egg, regular=0, color="pink"];
  "Yusuf" [shape=box, regular=0, color="cornflowerblue"]; "Hanife" [shape=egg, regular=0, color="pink"]; aa30 [shape=point]; aa35 [shape=point];
  "Ziya" [shape=box, regular=0, color="cornflowerblue"];

  // jenerasyon 4
  "Hacer" [shape=egg, regular=0, color="pink"]; "Nevzat" [shape=box, regular=0, color="cornflowerblue"]; aa40 [shape=point]; aa45 [shape=point];
  "Muzaffer" [shape=box, regular=0, color="cornflowerblue"]; "Münevver" [shape=egg, regular=0, color="pink"]; ba40 [shape=point]; ba45 [shape=point];
  "Münire" [shape=egg, regular=0, color="pink"];
  "Nigar" [shape=egg, regular=0, color="pink"]; "Idris" [shape=box, regular=0, color="cornflowerblue"]; ca40 [shape=point]; ca45 [shape=point];
  "Rahim" [shape=box, regular=0, color="cornflowerblue"]; "Fadime" [shape=egg, regular=0, color="pink"]; da40 [shape=point]; da45 [shape=point];
  "Rasim" [shape=box, regular=0, color="cornflowerblue"]; "Aslı" [shape=egg, regular=0, color="pink"]; ea40 [shape=point]; ea45 [shape=point];

  // jenerasyon 5
  "Servet" [shape=box, regular=0, color="cornflowerblue"];
  "Hayriye" [shape=egg, regular=0, color="pink"];
  "Fahamettin" [shape=box, regular=0, color="cornflowerblue"]; "Necibe" [shape=egg, regular=0, color="pink"]; ba50 [shape=point]; ba55 [shape=point];
  "Hisamettin" [shape=box, regular=0, color="cornflowerblue"]; "Feride" [shape=egg, regular=0, color="pink"]; bb50 [shape=point]; bb55 [shape=point];
  "Miyase" [shape=egg, regular=0, color="pink"]; "Hesabali" [shape=box, regular=0, color="cornflowerblue"]; bc50 [shape=point]; bc55 [shape=point];
  "Naime" [shape=egg, regular=0, color="pink"]; "Ismail" [shape=box, regular=0, color="cornflowerblue"]; bd50 [shape=point];
  "Süreyya" [shape=box, regular=0, color="cornflowerblue"]; "Naciye" [shape=egg, regular=0, color="pink"]; be50 [shape=point]; be55 [shape=point];
  "Alişan" [shape=box, regular=0, color="cornflowerblue"];
  "Fadime2" [shape=egg, regular=0, color="pink", label="Fadime"];
  "Münevver2" [shape=egg, regular=0, color="pink", label="Münevver"];
  "Osman" [shape=box, regular=0, color="cornflowerblue"];
  "Remziye" [shape=egg, regular=0, color="pink"];
  "Sundus" [shape=egg, regular=0, color="pink"];
  "Naci" [shape=box, regular=0, color="cornflowerblue"];
  "Nermin" [shape=egg, regular=0, color="pink"];
  "Şayibe" [shape=egg, regular=0, color="pink"];
  "Tahsin" [shape=box, regular=0, color="cornflowerblue"];
  "Tarık" [shape=box, regular=0, color="cornflowerblue"];
  "Çiğdem" [shape=egg, regular=0, color="pink"];
  "Erşan" [shape=box, regular=0, color="cornflowerblue"];
  "Gülden" [shape=egg, regular=0, color="pink"];
  "Gülçen" [shape=egg, regular=0, color="pink"];
  "Hacer2" [shape=egg, regular=0, color="pink", label="Hacer"];
  "Mihriban" [shape=egg, regular=0, color="pink"];
  "Mübeccel" [shape=egg, regular=0, color="pink"];
  "Nurdem" [shape=egg, regular=0, color="pink"];
  "Uğur" [shape=box, regular=0, color="cornflowerblue"];

  // jenerasyon 6
  "Münevver3" [shape=egg, regular=0, color="pink", label="Münevver"]; "Mustafa2" [shape=box, regular=0, color="cornflowerblue", label="Mustafa"]; aa60 [shape=point]; aa65 [shape=point];
  "Selçuk" [shape=box, regular=0, color="cornflowerblue"]; "Nur" [shape=egg, regular=0, color="pink"]; ab60 [shape=point]; ab65 [shape=point];
  "Ayla" [shape=egg, regular=0, color="pink"];
  "Seyhun" [shape=box, regular=0, color="cornflowerblue"]; "Emine" [shape=egg, regular=0, color="pink"]; ba60 [shape=point]; ba65 [shape=point];
  "Yusuf2" [shape=box, regular=0, color="cornflowerblue", label="Yusuf"]; "Aliye" [shape=egg, regular=0, color="pink"]; bb60 [shape=point]; bb65 [shape=point];
  "Ergin" [shape=box, regular=0, color="cornflowerblue"]; "Münire2" [shape=egg, regular=0, color="pink", label="Münire"]; ca60 [shape=point]; ca65 [shape=point];
  "Ilter" [shape=box, regular=0, color="cornflowerblue"]; "Leyla" [shape=egg, regular=0, color="pink"] cb60 [shape=point]; cb65 [shape=point];
  "Gökhan" [shape=box, regular=0, color="cornflowerblue"]; "Irem" [shape=egg, regular=0, color="pink"]; da60 [shape=point]; da65 [shape=point];
  "Hakan" [shape=box, regular=0, color="cornflowerblue"]; "Gülberk" [shape=egg, regular=0, color="pink"]; db60 [shape=point]; db65 [shape=point];

  //jenerasyon 7
  "Can" [shape=box, regular=0, color="cornflowerblue"]; "Lauren" [shape=egg, regular=0, color="pink"]; aa70 [shape=point]; aa75 [shape=point];
  "Özdal" [shape=box, regular=0, color="cornflowerblue"]; "Béné" [shape=egg, regular=0, color="pink"]; ab70 [shape=point]; ab75 [shape=point];
  "Elvin" [shape=egg, regular=0, color="pink"]; "Ömer" [shape=box, regular=0, color="cornflowerblue"]; ba70 [shape=point]; ba75 [shape=point];
  "Ekin" [shape=egg, regular=0, color="pink"];
  "Tuğra" [shape=box, regular=0, color="cornflowerblue"]; "Pınar2" [shape=egg, regular=0, color="pink", label="Pınar"]; ca70 [shape=point]; ca75 [shape=point];
  "Cem" [shape=box, regular=0, color="cornflowerblue"];
  "Pınar" [shape=egg, regular=0, color="pink"]; "Özgür" [shape=box, regular=0, color="cornflowerblue"]; da70 [shape=point]; da75 [shape=point];
  "Burcu" [shape=egg, regular=0, color="pink"];
  "Gözde" [shape=egg, regular=0, color="pink"];
  "Arhan" [shape=box, regular=0, color="cornflowerblue"];
  "Arın" [shape=box, regular=0, color="cornflowerblue"];
  "Berkhan" [shape=box, regular=0, color="cornflowerblue"];

  // jenerasyon 8
  "Claire Alara" [shape=egg, regular=0, color="pink"];
  "Declan Alp" [shape=box, regular=0, color="cornflowerblue"];
  "Joseph Can" [shape=box, regular=0, color="cornflowerblue"];
  "Ali" [shape=box, regular=0, color="cornflowerblue"];
  "Can2" [shape=box, regular=0, color="cornflowerblue", label="Can"];
  "Elis" [shape=egg, regular=0, color="pink"];
  "Mert" [shape=box, regular=0, color="cornflowerblue"];
}		
		`);
    </script>
</body>

schmoo2k · December 17, 2021, 9:54am

Actually to be fair that example works with your orig code as well!
I suspect your not escaping the dot file correctly?

Try:

d3.select("#eminsoy_familyTreeDiv").graphviz().renderDot(`{{- eminsoy_familyTree -}}`);

Note the subtle change of quotes to ` which means you shouldn’t need to strip the \n out.

sle7en · December 17, 2021, 11:08am

Wow success, thank you! This subtlety, I bet is biting my behind in many other places… well thank you sincerely… this was fun?!? not so, but now I need to find a way to contain this svg in the div. Thanks!
I will post a link, once I deploy the website…

Topic		Replies	Views
@hpcc-js/wasm: "ReferenceError: navigator is not defined" Dev	11	3461	April 1, 2021
symbol lookup error Help	7	4283	June 13, 2022
V4.0.0 issue/question Dev	2	1054	June 4, 2022
Get Graphviz version from @hpcc-js/wasm synchronously? Help	2	640	February 6, 2022
Wasm build of 8.1.0 Graphviz	8	579	September 6, 2023

Dot.js workerPort error

Related topics