From 005951d6f98255932fa10afe8543087262498d09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20S=C3=A1nchez=20Ram=C3=ADrez?=
 <sergio.sanchez.ramirez+git@bsc.es>
Date: Tue, 24 Sep 2024 00:00:13 -0400
Subject: [PATCH 1/3] Init visualization in VSCode with ECharts

---
 src/Tenet.jl         |  2 ++
 src/Visualization.jl | 68 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/Visualization.jl

diff --git a/src/Tenet.jl b/src/Tenet.jl
index 46e13c92..a4a4e4cf 100644
--- a/src/Tenet.jl
+++ b/src/Tenet.jl
@@ -46,6 +46,8 @@ export PEPS, pPEPS, PEPO, pPEPO
 
 export evolve!, expect, overlap
 
+include("Visualization.jl")
+
 # reexports from EinExprs
 export einexpr, inds
 
diff --git a/src/Visualization.jl b/src/Visualization.jl
new file mode 100644
index 00000000..88c324a9
--- /dev/null
+++ b/src/Visualization.jl
@@ -0,0 +1,68 @@
+using Pkg.Artifacts
+
+# const echarts = read(joinpath(artifact"echarts", "node_modules", "echarts", "dist", "echarts.js"), String)
+const echarts_url = "https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"
+
+Base.show(io::IO, ::MIME"text/html", tn::AbstractTensorNetwork) = show(io, MIME"juliavscode/html", tn)
+function Base.show(io::IO, ::MIME"juliavscode/html", @nospecialize(tn::AbstractTensorNetwork))
+    tn = transform(tn, Tenet.HyperFlatten)
+    appid = gensym("tenet-graph")
+    tensormap = IdDict([tensor => i for (i, tensor) in enumerate(tensors(tn))])
+
+    nodes = collect(values(tensormap))
+
+    return print(
+        io,
+        """
+            <script type="text/javascript" src="$echarts_url"></script>
+            <div id="$appid" style="width: 600px; height: 600px;"></div>
+            <script>
+                var chart = echarts.init(document.getElementById('$appid'));
+
+                option = {
+                    series: [
+                        {
+                            type: 'graph',
+                            layout: 'force',
+                            animation: false,
+                            left: '0%',
+                            top: '0%',
+                            width: '100%',
+                            height: '100%',
+                            draggable: true,
+                            force: {
+                                // initLayout: 'circular'
+                                gravity: 0.1,
+                                repulsion: 100,
+                                edgeLength: 3
+                            },
+                            data: $nodes,
+                            edges: [$(join(
+                                map(inds(tn; set=:inner)) do i
+                                    a,b = tensors(tn; intersects=i)
+                                    return "{ source: $(tensormap[a]), target: $(tensormap[b]), name: '$i' }"
+                                end
+                            , ','))],
+                            edgeLabel: {
+                                show: false,
+                                formatter: function (params) {
+                                    return params.data.name;
+                                }
+                            },
+                            emphasis: {
+                                edgeLabel: {
+                                    show: true
+                                },
+                                lineStyle: {
+                                    width: 3
+                                },
+                            },
+                        }
+                    ]
+                };
+
+                option && chart.setOption(option);
+            </script>
+        """,
+    )
+end

From 55a50705f127580ca14310a24e11a4b7d6c2e068 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20S=C3=A1nchez=20Ram=C3=ADrez?=
 <15837247+mofeing@users.noreply.github.com>
Date: Tue, 24 Sep 2024 00:22:56 -0400
Subject: [PATCH 2/3] Remove Pkg.Artifacts for now

---
 src/Visualization.jl | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Visualization.jl b/src/Visualization.jl
index 88c324a9..691aba87 100644
--- a/src/Visualization.jl
+++ b/src/Visualization.jl
@@ -1,5 +1,3 @@
-using Pkg.Artifacts
-
 # const echarts = read(joinpath(artifact"echarts", "node_modules", "echarts", "dist", "echarts.js"), String)
 const echarts_url = "https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"
 

From 99d7833aa062591ee8ea6e0bceff34100d6c26e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20S=C3=A1nchez=20Ram=C3=ADrez?=
 <sergio.sanchez.ramirez+git@bsc.es>
Date: Tue, 24 Sep 2024 23:12:56 -0400
Subject: [PATCH 3/3] Locally provide `echarts.js` library

Works if offline
---
 Project.toml         | 2 ++
 src/Visualization.jl | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/Project.toml b/Project.toml
index ee8154ff..393e8ca8 100644
--- a/Project.toml
+++ b/Project.toml
@@ -7,6 +7,7 @@ version = "0.8.0-DEV"
 AbstractTrees = "1520ce14-60c1-5f80-bbc7-55ef81b5835c"
 Combinatorics = "861a8166-3701-5b0c-9a16-15d98fcdc6aa"
 DeltaArrays = "10b0fc19-5ccc-4427-889b-d75dd6306188"
+ECharts_jll = "ffd69456-1935-58d2-abba-ba12e8909167"
 EinExprs = "b1794770-133b-4de1-afb4-526377e9f4c5"
 KeywordDispatch = "5888135b-5456-5c80-a1b6-c91ef8180460"
 LinearAlgebra = "37e2e46d-f89d-539d-b4ee-838fcccc9c8e"
@@ -60,6 +61,7 @@ ChainRulesTestUtils = "1"
 Combinatorics = "1.0"
 Dagger = "0.18"
 DeltaArrays = "0.1.1"
+ECharts_jll = "5"
 EinExprs = "0.5, 0.6"
 FiniteDifferences = "0.12"
 GraphMakie = "0.4,0.5"
diff --git a/src/Visualization.jl b/src/Visualization.jl
index 691aba87..bdd59c6a 100644
--- a/src/Visualization.jl
+++ b/src/Visualization.jl
@@ -1,7 +1,5 @@
-# const echarts = read(joinpath(artifact"echarts", "node_modules", "echarts", "dist", "echarts.js"), String)
-const echarts_url = "https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"
+using ECharts_jll
 
-Base.show(io::IO, ::MIME"text/html", tn::AbstractTensorNetwork) = show(io, MIME"juliavscode/html", tn)
 function Base.show(io::IO, ::MIME"juliavscode/html", @nospecialize(tn::AbstractTensorNetwork))
     tn = transform(tn, Tenet.HyperFlatten)
     appid = gensym("tenet-graph")
@@ -12,7 +10,9 @@ function Base.show(io::IO, ::MIME"juliavscode/html", @nospecialize(tn::AbstractT
     return print(
         io,
         """
-            <script type="text/javascript" src="$echarts_url"></script>
+            <script type="text/javascript">$(
+                read(joinpath(dirname(ECharts_jll.echarts), "echarts.min.js"), String)
+            )</script>
             <div id="$appid" style="width: 600px; height: 600px;"></div>
             <script>
                 var chart = echarts.init(document.getElementById('$appid'));