Add: test graphviz

bun/graphviz.js

@@ -0,0 +1,25 @@
+
+// bun add @hpcc-js/wasm
+import { Graphviz } from "@hpcc-js/wasm/graphviz"
+
+const graphviz = await Graphviz.load()
+
+const possible_layouts = [
+    'circo', 'dot', 'fdp', 'sfdp', 'neato', 'osage', 'patchwork', 'twopi' // , 'nop', 'nop2'
+]
+
+const graphviz_roots = document.querySelectorAll('.graphviz-root.loading')
+for (const graphviz_root of graphviz_roots) {
+    const graphviz_source = graphviz_root.textContent
+    let layout = graphviz_root.getAttribute('data-layout')
+    if (!possible_layouts.includes(layout)) {
+        // randomly choose a layout
+        layout = possible_layouts[Math.floor(Math.random() * possible_layouts.length)]
+        console.debug('randomly choose a layout:', layout)
+    }
+
+    graphviz_root.innerHTML = ''
+    const graphviz_svg = graphviz.layout(graphviz_source, 'svg', layout)
+    graphviz_root.innerHTML = graphviz_svg
+    graphviz_root.classList.remove('loading')
+}

bun/penrose.js

@@ -31,6 +31,6 @@ for (const penrose_root of penrose_roots) {
     }
 
     penrose_root.innerHTML = ''
-    const dia = await Penrose.diagram(trio, penrose_root, async () => undefined)
+    const dia = await Penrose.interactiveDiagram(trio, penrose_root, async () => undefined)
     penrose_root.classList.remove('loading')
 }

bun/uts-ondemand.js

@@ -6,60 +6,24 @@ const load_script = (src) => {
     document.head.appendChild(script)
 }
 
-document.addEventListener('DOMContentLoaded', async () => {
-    const markdownit_tags = document.querySelectorAll('.markdownit')
-
-    if (markdownit_tags.length !== 0) {
-        load_script('markdownit.js')
-    }
-
-    const typst_tags = document.querySelectorAll('.typst-root')
-
-    if (typst_tags.length !== 0) {
-        load_script('typst.js')
-    }
-
-    const pikchr_tags = document.querySelectorAll('.pikchr-root')
-
-    if (pikchr_tags.length !== 0) {
-        load_script('pikchr.js')
-    }
-
-    const code_tags = document.querySelectorAll('article code.highlight')
-
-    if (code_tags.length !== 0) {
-        load_script('shiki.js')
-    }
-
-    const embeded_shaders = document.querySelectorAll('.embeded-shader')
+const register = (selector, script) => {
+    const tags = document.querySelectorAll(selector)
 
-    if (embeded_shaders.length !== 0) {
-        load_script('shader.js')
+    if (tags.length !== 0) {
+        load_script(script)
     }
+}
 
-    const embeded_shadertoys = document.querySelectorAll('.embeded-shadertoy')
-
-    if (embeded_shadertoys.length !== 0) {
-        load_script('shadertoy.js')
-    }
-
-    const embeded_usegpus = document.querySelectorAll('.usegpu')
-
-    if (embeded_usegpus.length !== 0) {
-        load_script('usegpu.js')
-    }
-
-    const embeded_wgputoys = document.querySelectorAll('.wgputoy')
-
-    if (embeded_wgputoys.length !== 0) {
-        load_script('wgputoy.js')
-    }
-
-    // load_script('uwal.js');
-
-    // load_script('hello-egglog.js');
-
-    // load_script('hello-ginac.js');
+document.addEventListener('DOMContentLoaded', async () => {
+    register('.markdownit', 'markdownit.js')
+    register('.typst-root', 'typst.js')
+    register('.pikchr-root', 'pikchr.js')
+    register('article code.highlight', 'shiki.js')
+    register('.embeded-shader', 'shader.js')
+    register('.embeded-shadertoy', 'shadertoy.js')
+    register('.usegpu', 'usegpu.js')
+    register('.wgputoy', 'wgputoy.js')
+    register('.graphviz-root', 'graphviz.js')
 
     const hostname = window.location.hostname
 

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@hpcc-js/wasm": "^2.22.1",
     "@myriaddreamin/typst-ts-renderer": "^0.5.0-rc7",
     "@myriaddreamin/typst-ts-web-compiler": "^0.5.0-rc7",
     "@myriaddreamin/typst.ts": "^0.5.0-rc7",

trees/macros.tree

@@ -575,6 +575,10 @@ so the text size almost matches the size output by native forester code. This do
   \<html:div>[class]{pikchr-root loading}{\body}
 }
 
+\def\graphviz[layout][body]{
+  \<html:div>[class]{graphviz-root loading}[data-layout]{\layout}{\body}
+}
+
 % \def\cref[addr]{\<html:span>[class]{cref}{[\addr](\addr)}} % this is not required as XSLT can handle local links with or without taxons like cleveref automatically
 
 % Some Math symbols that are common in all topics
@@ -584,4 +588,4 @@ so the text size almost matches the size output by native forester code. This do
 \def\NN{\mathbb N}
 \def\QQ{\mathbb Q}
 \def\RR{\mathbb R}
-\def\ZZ{\mathbb Z}
+\def\ZZ{\mathbb Z}

trees/uts-001L.tree

@@ -0,0 +1,127 @@
+\import{macros}
+% clifford hopf spin tt ag math draft tech exp notes
+\tag{tech}
+\tag{exp}
+
+\note{test graphviz}{
+\p{Adapted from \link{https://utensil.github.io/lean-ga/blueprint/dep_graph_section_1.html}:
+}
+
+\graphviz{dot}\verb>>>|
+
+strict digraph "" {	graph [bgcolor=transparent];	node [label="\N",		penwidth=1.8	];	edge [arrowhead=vee];	QuadraticForm	[color=green,		fillcolor="#B0ECA3",		label=QuadraticForm,		shape=box,		style=filled];	LinearMap	[color=green,		fillcolor="#B0ECA3",		label=LinearMap,		shape=box,		style=filled];	Dual	[color=green,		fillcolor="#B0ECA3",		label=Dual,		shape=box,		style=filled];	LinearMap -> Dual	[style=dashed];	TensorAlgebra	[color=green,		fillcolor="#B0ECA3",		label=TensorAlgebra,		shape=box,		style=filled];	LinearMap -> TensorAlgebra	[style=dashed];	Group	[color=green,		fillcolor="#B0ECA3",		label=Group,		shape=box,		style=filled];	Ring	[color=green,		fillcolor="#B0ECA3",		label=Ring,		shape=box,		style=filled];	Group -> Ring	[style=dashed];	Module	[color=green,		fillcolor="#B0ECA3",		label=Module,		shape=box,		style=filled];	Ring -> Module	[style=dashed];	DivisionRing	[color=green,		fillcolor="#B0ECA3",		label=DivisionRing,		shape=box,		style=filled];	Ring -> DivisionRing	[style=dashed];	RingHom	[color=green,		fillcolor="#B0ECA3",		label=RingHom,		shape=box,		style=filled];	Ring -> RingHom	[style=dashed];	Module -> LinearMap	[style=dashed];	VectorSpace	[color=green,		fillcolor="#B0ECA3",		label=VectorSpace,		shape=box,		style=filled];	Module -> VectorSpace	[style=dashed];	Algebra	[color=green,		fillcolor="#B0ECA3",		label=Algebra,		shape=box,		style=filled];	Module -> Algebra	[style=dashed];	RingQuot	[color=green,		fillcolor="#B0ECA3",		label=RingQuot,		shape=box,		style=filled];	Module -> RingQuot	[style=dashed];	BilinForm	[color=green,		fillcolor="#B0ECA3",		label=BilinForm,		shape=box,		style=filled];	Module -> BilinForm	[style=dashed];	FreeAlgebra	[color=green,		fillcolor="#B0ECA3",		label=FreeAlgebra,		shape=box,		style=filled];	Algebra -> FreeAlgebra	[style=dashed];	RingQuot -> FreeAlgebra	[style=dashed];	BilinForm -> QuadraticForm	[style=dashed];	DivisionRing -> VectorSpace	[style=dashed];	RingHom -> LinearMap	[style=dashed];	RingHom -> Algebra	[style=dashed];	RingHom -> RingQuot	[style=dashed];	AlgHom	[color=green,		fillcolor="#B0ECA3",		label=AlgHom,		shape=box,		style=filled];	RingHom -> AlgHom	[style=dashed];	FreeAlgebra -> TensorAlgebra	[style=dashed];	Monoid	[color=green,		fillcolor="#B0ECA3",		label=Monoid,		shape=box,		style=filled];	Monoid -> Ring	[style=dashed];}
+
+>>>
+
+\p{Adapted from \link{https://viz-js.com/}:
+}
+
+\graphviz{dot}\verb>>>|
+digraph {
+  graph [rankdir=LR];
+  node [shape=record];
+  0 [label="0 | [• S, $]\n[S → • a S b, $]\n[S → •, $]"];
+  1 [label="1 | [S •, $]"];
+  2 [label="2 | [S → a • S b, $]\n[S → • a S b, b]\n[S → •, b]"];
+  3 [label="3 | [S → a S • b, $]"];
+  4 [label="4 | [S → a • S b, b]\n[S → • a S b, b]\n[S → •, b]"];
+  5 [label="5 | [S → a S b •, $]"];
+  6 [label="6 | [S → a S • b, b]"];
+  7 [label="7 | [S → a S b •, b]"];
+  0 -> 1 [label=S];
+  0 -> 2 [label=a];
+  2 -> 3 [label=S];
+  2 -> 4 [label=a];
+  3 -> 5 [label=b];
+  4 -> 6 [label=S];
+  4 -> 4 [label=a];
+  6 -> 7 [label=b];
+}
+>>>
+
+\p{Adapted from \link{https://renenyffenegger.ch/notes/tools/Graphviz/examples/edge-crossing}:
+}
+\graphviz{dot}\verb>>>|
+digraph G {
+
+  node [shape=plaintext fontname="Arial"];
+
+  0  -> 1  [arrowhead=none];
+  1  -> 2  [arrowhead=none];
+  2  -> 7  [arrowhead=none];
+  7  -> 8  [arrowhead=none];
+  8  -> 9  [arrowhead=none];
+  8  -> 10 [arrowhead=none];
+  9  -> 10 [color="#aaaaaa" constraint=false];
+  10 -> 11 [arrowhead=none];
+  10 -> 12 [arrowhead=none];
+  11 -> 12 [color="#aaaaaa" constraint=false];
+  7  -> 13 [arrowhead=none];
+  8  -> 13 [color="#aaaaaa" constraint=false];
+  13 -> 14 [arrowhead=none];
+  7  -> 15 [arrowhead=none];
+  13 -> 15 [color="#aaaaaa" constraint=false];
+  15 -> 16 [arrowhead=none];
+  15 -> 17 [arrowhead=none];
+  16 -> 17 [color="#aaaaaa" constraint=false];
+  2  -> 3  [arrowhead=none];
+  7  -> 3  [color="#aaaaaa" constraint=false];
+  3  -> 4  [arrowhead=none];
+  2  -> 5  [arrowhead=none];
+  3  -> 5  [color="#aaaaaa" constraint=false];
+  5  -> 6  [arrowhead=none];
+  2  -> 18 [arrowhead=none];
+  5  -> 18 [color="#aaaaaa" constraint=false];
+  18 -> 19 [arrowhead=none];
+  19 -> 20 [arrowhead=none];
+  19 -> 21 [arrowhead=none];
+  20 -> 21 [color="#aaaaaa" constraint=false];
+  18 -> 22 [arrowhead=none];
+  19 -> 22 [color="#aaaaaa" constraint=false];
+}
+>>>
+
+\p{The same, but randomly choose a layout from one of 'circo', 'dot', 'fdp', 'sfdp', 'neato', 'osage', 'patchwork', 'twopi':
+}
+
+\graphviz{random}\verb>>>|
+digraph G {
+
+  node [shape=plaintext fontname="Arial"];
+
+  0  -> 1  [arrowhead=none];
+  1  -> 2  [arrowhead=none];
+  2  -> 7  [arrowhead=none];
+  7  -> 8  [arrowhead=none];
+  8  -> 9  [arrowhead=none];
+  8  -> 10 [arrowhead=none];
+  9  -> 10 [color="#aaaaaa" constraint=false];
+  10 -> 11 [arrowhead=none];
+  10 -> 12 [arrowhead=none];
+  11 -> 12 [color="#aaaaaa" constraint=false];
+  7  -> 13 [arrowhead=none];
+  8  -> 13 [color="#aaaaaa" constraint=false];
+  13 -> 14 [arrowhead=none];
+  7  -> 15 [arrowhead=none];
+  13 -> 15 [color="#aaaaaa" constraint=false];
+  15 -> 16 [arrowhead=none];
+  15 -> 17 [arrowhead=none];
+  16 -> 17 [color="#aaaaaa" constraint=false];
+  2  -> 3  [arrowhead=none];
+  7  -> 3  [color="#aaaaaa" constraint=false];
+  3  -> 4  [arrowhead=none];
+  2  -> 5  [arrowhead=none];
+  3  -> 5  [color="#aaaaaa" constraint=false];
+  5  -> 6  [arrowhead=none];
+  2  -> 18 [arrowhead=none];
+  5  -> 18 [color="#aaaaaa" constraint=false];
+  18 -> 19 [arrowhead=none];
+  19 -> 20 [arrowhead=none];
+  19 -> 21 [arrowhead=none];
+  20 -> 21 [color="#aaaaaa" constraint=false];
+  18 -> 22 [arrowhead=none];
+  19 -> 22 [color="#aaaaaa" constraint=false];
+}
+>>>
+
+}