From 5de578fd395c38ed0bf3496ce95ac060c841797c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Tavares?= <jotavemonte@gmail.com>
Date: Mon, 27 May 2024 19:18:25 +0100
Subject: [PATCH 1/7] Add svg restyle

---
 src/html.ts | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 src/html.ts
diff --git a/src/html.ts b/src/html.ts
new file mode 100644
index 0000000..d5ab539
--- /dev/null
+++ b/src/html.ts
@@ -0,0 +1,152 @@
+export function getHtmlContent(dot?:string){
+    return `<!DOCTYPE html>
+    <html lang="en">
+
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Call Graph</title>
+        <script src="https://d3js.org/d3.v5.min.js"></script>
+        <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
+        <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.0/svg.js"></script>
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <div class="btn-container">
+            <button class="btn" id="downloadDot">save dot file</button>
+            <button class="btn" id="downloadSvg">save as svg</button>
+        </div>
+    </body>
+    <script>
+        (async function () {
+            const vscode = acquireVsCodeApi()
+            const dot='${dot}'
+            vscode.setState(dot)
+            const res = await (await fetch(dot)).text()
+            const gv = d3.select('#app').graphviz().renderDot(res, restyleSvg)
+            d3.select('#hide').graphviz({zoom:false}).renderDot(res)
+
+            d3.select('#downloadSvg').on('click',()=>{
+                const serializer = new XMLSerializer()
+                // Reset it before saving since SVG may be zoomed.
+                gv.resetZoom()
+                const svg = serializer.serializeToString(d3.select('#app>svg').node())
+                vscode.postMessage({
+                    command: 'download',
+                    type:'svg',
+                    data:svg
+                })
+            })
+            d3.select('#downloadDot').on('click',()=>{
+                vscode.postMessage({
+                    command: 'download',
+                    type:'dot'
+                })
+            })
+
+            // --- Styling section ---
+            const BACKGROUND = getEditorColor('--vscode-editor-background');
+            const PRIMARY = getEditorColor('--vscode-list-activeSelectionBackground');
+            const SECONDARY = getEditorColor('--vscode-editor-foreground');
+
+            document.body.style.backgroundColor = BACKGROUND;
+
+            function getEditorColor(property) {
+                return document.getElementsByTagName('html')[0]
+                    .style.getPropertyValue(property);
+            }
+
+            let classMap = {
+                graph: node => {graphClassCallback(node)},
+                node: node => {nodeClassCallback(node)},
+                edge: node => {edgeClassCallback(node)},
+                cluster: node => {clusterClassCallback(node)}
+            }
+
+
+            function clusterClassCallback(parentNode) {
+                const clusterPolygonInstance = parentNode.node.children[1].instance;
+                const clusterTextInstance = parentNode.node.children[2].instance;
+
+                clusterPolygonInstance.stroke(SECONDARY);
+                clusterTextInstance.fill(SECONDARY)
+            }
+
+
+            function graphClassCallback(parentNode) {
+                const nodeOuterPolygonInstance = parentNode.node.children[0].instance;
+                nodeOuterPolygonInstance.fill(BACKGROUND);
+            }
+
+
+            function nodeClassCallback(parentNode) {
+                const nodeEllipseInstance = parentNode.node.children[1].instance;
+                const nodeTextInstance = parentNode.node.children[2].instance;
+                nodeEllipseInstance.fill(PRIMARY);
+                nodeEllipseInstance.stroke(SECONDARY);
+                nodeTextInstance.fill(SECONDARY);
+            }
+
+
+            function edgeClassCallback(parentNode) {
+                const nodeArrowInstance = parentNode.node.children[1].instance;
+                const nodeArrowTipInstance = parentNode.node.children[2].instance;
+                nodeArrowInstance.stroke(SECONDARY);
+                nodeArrowTipInstance.stroke(SECONDARY);
+            }
+
+
+            function applyRestyle(node) {
+                node.node.classList.forEach(domClass => {
+                    classCallback = classMap[domClass];
+                    if (classCallback) classCallback(node);
+                });
+            }
+
+
+            function restyleSvg() {
+                let currentNode;
+
+                const draw = SVG('#app');
+                const bfs = [draw];
+                let i = 0;
+
+                while (i < bfs.length) {
+                    currentNode = bfs[i];
+
+                    currentNode.children().forEach(element => {
+                        bfs.push(element);
+                    });
+                    i += 1;
+                    applyRestyle(currentNode);
+                }
+            }
+        })()
+    </script>
+    <style>
+        .btn-container{
+            position: fixed;
+            bottom: 8px;
+        }
+        .btn {
+            display: inline-block;
+            font-weight: 400;
+            color: #212529;
+            text-align: center;
+            border: 1px solid transparent;
+            padding: .300rem .60rem;
+            font-size: 1rem;
+            line-height: 1.5;
+            border-radius: .25rem;
+            color: #fff;
+            background-color: #007bff;
+        }
+        .btn:hover{
+              background-color: #0069d9;
+
+        }
+    <style/>
+    </html>`
+}

From 22991f89f6c6aac141a9cd0ff3757b13ea7705d8 Mon Sep 17 00:00:00 2001
From: Joao Tavares <=>
Date: Sat, 23 Nov 2024 23:38:20 +0100
Subject: [PATCH 2/7] Revert "Add svg restyle"

This reverts commit 494c8bb01205bd5910b7c64c9411c23ec497a907.
---
 src/html.ts | 86 ++---------------------------------------------------
 1 file changed, 3 insertions(+), 83 deletions(-)

diff --git a/src/html.ts b/src/html.ts
index d5ab539..2ffebe7 100644
--- a/src/html.ts
+++ b/src/html.ts
@@ -9,7 +9,6 @@ export function getHtmlContent(dot?:string){
         <script src="https://d3js.org/d3.v5.min.js"></script>
         <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
         <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.0/svg.js"></script>
     </head>
 
     <body>
@@ -24,9 +23,8 @@ export function getHtmlContent(dot?:string){
             const vscode = acquireVsCodeApi()
             const dot='${dot}'
             vscode.setState(dot)
-            const res = await (await fetch(dot)).text()
-            const gv = d3.select('#app').graphviz().renderDot(res, restyleSvg)
-            d3.select('#hide').graphviz({zoom:false}).renderDot(res)
+            const res =await (await fetch(dot)).text()
+            const gv = d3.select('#app').graphviz().renderDot(res)
 
             d3.select('#downloadSvg').on('click',()=>{
                 const serializer = new XMLSerializer()
@@ -45,84 +43,6 @@ export function getHtmlContent(dot?:string){
                     type:'dot'
                 })
             })
-
-            // --- Styling section ---
-            const BACKGROUND = getEditorColor('--vscode-editor-background');
-            const PRIMARY = getEditorColor('--vscode-list-activeSelectionBackground');
-            const SECONDARY = getEditorColor('--vscode-editor-foreground');
-
-            document.body.style.backgroundColor = BACKGROUND;
-
-            function getEditorColor(property) {
-                return document.getElementsByTagName('html')[0]
-                    .style.getPropertyValue(property);
-            }
-
-            let classMap = {
-                graph: node => {graphClassCallback(node)},
-                node: node => {nodeClassCallback(node)},
-                edge: node => {edgeClassCallback(node)},
-                cluster: node => {clusterClassCallback(node)}
-            }
-
-
-            function clusterClassCallback(parentNode) {
-                const clusterPolygonInstance = parentNode.node.children[1].instance;
-                const clusterTextInstance = parentNode.node.children[2].instance;
-
-                clusterPolygonInstance.stroke(SECONDARY);
-                clusterTextInstance.fill(SECONDARY)
-            }
-
-
-            function graphClassCallback(parentNode) {
-                const nodeOuterPolygonInstance = parentNode.node.children[0].instance;
-                nodeOuterPolygonInstance.fill(BACKGROUND);
-            }
-
-
-            function nodeClassCallback(parentNode) {
-                const nodeEllipseInstance = parentNode.node.children[1].instance;
-                const nodeTextInstance = parentNode.node.children[2].instance;
-                nodeEllipseInstance.fill(PRIMARY);
-                nodeEllipseInstance.stroke(SECONDARY);
-                nodeTextInstance.fill(SECONDARY);
-            }
-
-
-            function edgeClassCallback(parentNode) {
-                const nodeArrowInstance = parentNode.node.children[1].instance;
-                const nodeArrowTipInstance = parentNode.node.children[2].instance;
-                nodeArrowInstance.stroke(SECONDARY);
-                nodeArrowTipInstance.stroke(SECONDARY);
-            }
-
-
-            function applyRestyle(node) {
-                node.node.classList.forEach(domClass => {
-                    classCallback = classMap[domClass];
-                    if (classCallback) classCallback(node);
-                });
-            }
-
-
-            function restyleSvg() {
-                let currentNode;
-
-                const draw = SVG('#app');
-                const bfs = [draw];
-                let i = 0;
-
-                while (i < bfs.length) {
-                    currentNode = bfs[i];
-
-                    currentNode.children().forEach(element => {
-                        bfs.push(element);
-                    });
-                    i += 1;
-                    applyRestyle(currentNode);
-                }
-            }
         })()
     </script>
     <style>
@@ -149,4 +69,4 @@ export function getHtmlContent(dot?:string){
         }
     <style/>
     </html>`
-}
+}
\ No newline at end of file

From b08b8c7f03cc0dd41e1ad38de43d16d7d86f6ca5 Mon Sep 17 00:00:00 2001
From: Joao Tavares <=>
Date: Sun, 24 Nov 2024 01:50:59 +0100
Subject: [PATCH 3/7] add style in dot generation

---
 src/dot.ts  | 41 ++++++++++++++++++-----------------------
 src/html.ts | 16 ++++++++++++++--
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/dot.ts b/src/dot.ts
index 11c413b..6638c60 100644
--- a/src/dot.ts
+++ b/src/dot.ts
@@ -11,12 +11,9 @@ export function generateDot(graph: CallHierarchyNode, path: string) {
     const getNode = (n: CallHierarchyNode) => {
         return {
             name: `"${n.item.uri.path}#${n.item.name}@${n.item.range.start.line}:${n.item.range.start.character}"`,
-            attr: { label: n.item.name },
-            subgraph: {
-                name: n.item.uri.path,
-                attr: { label: n.item.uri.path.replace(root, '${workspace}') },
-            },
-            next: [],
+            attr: { label: n.item.name, color: '$secondaryColor', fillcolor: '$primaryColor', style: 'filled', fontcolor: '$secondaryColor' },
+            subgraph: { name: n.item.uri.path, attr: { label: n.item.uri.path.replace(root, '${workspace}') } },
+            next: []
         } as Node
     }
     const node = getNode(graph)
@@ -77,7 +74,11 @@ class Graph {
     private _subgraphs = new Map<string, string>()
     private _nodes = new Set<Node>()
     constructor(title?: string) {
-        this._dot = 'digraph' + ` ${title ?? ''} {\n`
+        this._dot = (true ? 'digraph' : 'graph')
+            + ` ${title ?? ''} {\n`
+            + 'bgcolor="$backgroundColor"\n'
+            + 'color="$secondaryColor"\n'
+            + 'fontcolor="$secondaryColor"\n'
     }
     addAttr(attr: Attr) {
         this._dot += this.getAttr(attr, true)
@@ -90,22 +91,16 @@ class Graph {
             let s = ''
             const removeRepeat = [] as number[]
             if (n.next.length > 0) {
-                const children = n.next
-                    .map((child, index) => {
-                        for (const s of this._nodes) {
-                            if (isDeepStrictEqual(s, child))
-                                removeRepeat.push(index)
-                        }
-                        if (child.subgraph)
-                            this.insertToSubgraph(
-                                child.subgraph,
-                                child.name + ' ',
-                            )
-                        return child.name + this.getAttr(child.attr)
-                    })
-                    .join(' ')
-                s += `{${name}} -> {${children}}\n`
-            } else s += name + '\n'
+                const children = n.next.map((child, index) => {
+                    for (const s of this._nodes) {
+                        if (isDeepStrictEqual(s, child)) removeRepeat.push(index)
+                    }
+                    if (child.subgraph) this.insertToSubgraph(child.subgraph, child.name + ' ')
+                    return child.name + this.getAttr(child.attr)
+                }).join(' ')
+                s += `{${name}} -> {${children}} [color="$secondaryColor"]\n`
+            }
+            else s += name + '\n'
             this._dot += s
             this.addNode(
                 ...n.next.filter((_, index) => !removeRepeat.includes(index)),
diff --git a/src/html.ts b/src/html.ts
index 2ffebe7..7d44d34 100644
--- a/src/html.ts
+++ b/src/html.ts
@@ -19,12 +19,24 @@ export function getHtmlContent(dot?:string){
         </div>
     </body>
     <script>
+        function getEditorColor(property) {
+            return document.getElementsByTagName('html')[0]
+                .style.getPropertyValue(property);
+        }
         (async function () {
+           // --- Styling section ---
+            const BACKGROUND = getEditorColor('--vscode-editor-background');
+            const PRIMARY = getEditorColor('--vscode-list-activeSelectionBackground');
+            const SECONDARY = getEditorColor('--vscode-editor-foreground');    
+
             const vscode = acquireVsCodeApi()
             const dot='${dot}'
             vscode.setState(dot)
-            const res =await (await fetch(dot)).text()
-            const gv = d3.select('#app').graphviz().renderDot(res)
+            const res = await (await fetch(dot)).text()
+            const styledDot = res.replaceAll('$backgroundColor', BACKGROUND)
+                .replaceAll('$primaryColor', PRIMARY)
+                .replaceAll('$secondaryColor', SECONDARY)
+            const gv = d3.select('#app').graphviz().renderDot(styledDot)
 
             d3.select('#downloadSvg').on('click',()=>{
                 const serializer = new XMLSerializer()

From c38e21c68bcaab4b62fafa14bae9784ce7658fad Mon Sep 17 00:00:00 2001
From: Joao Tavares <=>
Date: Sun, 24 Nov 2024 10:44:26 +0100
Subject: [PATCH 4/7] use verbose color variables

---
 src/dot.ts  | 10 +++++-----
 src/html.ts |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/dot.ts b/src/dot.ts
index 6638c60..fa0a674 100644
--- a/src/dot.ts
+++ b/src/dot.ts
@@ -11,7 +11,7 @@ export function generateDot(graph: CallHierarchyNode, path: string) {
     const getNode = (n: CallHierarchyNode) => {
         return {
             name: `"${n.item.uri.path}#${n.item.name}@${n.item.range.start.line}:${n.item.range.start.character}"`,
-            attr: { label: n.item.name, color: '$secondaryColor', fillcolor: '$primaryColor', style: 'filled', fontcolor: '$secondaryColor' },
+            attr: { label: n.item.name, color: '$callGraphSecondaryColor', fillcolor: '$callGraphPrimaryColor', style: 'filled', fontcolor: '$callGraphSecondaryColor' },
             subgraph: { name: n.item.uri.path, attr: { label: n.item.uri.path.replace(root, '${workspace}') } },
             next: []
         } as Node
@@ -76,9 +76,9 @@ class Graph {
     constructor(title?: string) {
         this._dot = (true ? 'digraph' : 'graph')
             + ` ${title ?? ''} {\n`
-            + 'bgcolor="$backgroundColor"\n'
-            + 'color="$secondaryColor"\n'
-            + 'fontcolor="$secondaryColor"\n'
+            + 'bgcolor="$callGraphBackgroundColor"\n'
+            + 'color="$callGraphSecondaryColor"\n'
+            + 'fontcolor="$callGraphSecondaryColor"\n'
     }
     addAttr(attr: Attr) {
         this._dot += this.getAttr(attr, true)
@@ -98,7 +98,7 @@ class Graph {
                     if (child.subgraph) this.insertToSubgraph(child.subgraph, child.name + ' ')
                     return child.name + this.getAttr(child.attr)
                 }).join(' ')
-                s += `{${name}} -> {${children}} [color="$secondaryColor"]\n`
+                s += `{${name}} -> {${children}} [color="$callGraphSecondaryColor"]\n`
             }
             else s += name + '\n'
             this._dot += s
diff --git a/src/html.ts b/src/html.ts
index 7d44d34..2d1fbe8 100644
--- a/src/html.ts
+++ b/src/html.ts
@@ -33,9 +33,9 @@ export function getHtmlContent(dot?:string){
             const dot='${dot}'
             vscode.setState(dot)
             const res = await (await fetch(dot)).text()
-            const styledDot = res.replaceAll('$backgroundColor', BACKGROUND)
-                .replaceAll('$primaryColor', PRIMARY)
-                .replaceAll('$secondaryColor', SECONDARY)
+            const styledDot = res.replaceAll('$callGraphBackgroundColor', BACKGROUND)
+                .replaceAll('$callGraphPrimaryColor', PRIMARY)
+                .replaceAll('$callGraphSecondaryColor', SECONDARY)
             const gv = d3.select('#app').graphviz().renderDot(styledDot)
 
             d3.select('#downloadSvg').on('click',()=>{

From 4704dd2ee37613e4d77a6bccc2b0cb7f05f1bffc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor=20Tavares?= <joao.tavares@gorgias.com>
Date: Sat, 25 Jan 2025 21:59:34 +0100
Subject: [PATCH 5/7] refactor: remove getHtmlContent function and integrate
 styling directly in index.html

---
 src/html.ts       | 84 -----------------------------------------------
 static/index.html | 13 +++++++-
 2 files changed, 12 insertions(+), 85 deletions(-)
 delete mode 100644 src/html.ts

diff --git a/src/html.ts b/src/html.ts
deleted file mode 100644
index 2d1fbe8..0000000
--- a/src/html.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-export function getHtmlContent(dot?:string){
-    return `<!DOCTYPE html>
-    <html lang="en">
-
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Call Graph</title>
-        <script src="https://d3js.org/d3.v5.min.js"></script>
-        <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
-        <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
-    </head>
-
-    <body>
-        <div id="app"></div>
-        <div class="btn-container">
-            <button class="btn" id="downloadDot">save dot file</button>
-            <button class="btn" id="downloadSvg">save as svg</button>
-        </div>
-    </body>
-    <script>
-        function getEditorColor(property) {
-            return document.getElementsByTagName('html')[0]
-                .style.getPropertyValue(property);
-        }
-        (async function () {
-           // --- Styling section ---
-            const BACKGROUND = getEditorColor('--vscode-editor-background');
-            const PRIMARY = getEditorColor('--vscode-list-activeSelectionBackground');
-            const SECONDARY = getEditorColor('--vscode-editor-foreground');    
-
-            const vscode = acquireVsCodeApi()
-            const dot='${dot}'
-            vscode.setState(dot)
-            const res = await (await fetch(dot)).text()
-            const styledDot = res.replaceAll('$callGraphBackgroundColor', BACKGROUND)
-                .replaceAll('$callGraphPrimaryColor', PRIMARY)
-                .replaceAll('$callGraphSecondaryColor', SECONDARY)
-            const gv = d3.select('#app').graphviz().renderDot(styledDot)
-
-            d3.select('#downloadSvg').on('click',()=>{
-                const serializer = new XMLSerializer()
-                // Reset it before saving since SVG may be zoomed.
-                gv.resetZoom()
-                const svg = serializer.serializeToString(d3.select('#app>svg').node())
-                vscode.postMessage({
-                    command: 'download',
-                    type:'svg',
-                    data:svg
-                })
-            })
-            d3.select('#downloadDot').on('click',()=>{
-                vscode.postMessage({
-                    command: 'download',
-                    type:'dot'
-                })
-            })
-        })()
-    </script>
-    <style>
-        .btn-container{
-            position: fixed;
-            bottom: 8px;
-        }
-        .btn {
-            display: inline-block;
-            font-weight: 400;
-            color: #212529;
-            text-align: center;
-            border: 1px solid transparent;
-            padding: .300rem .60rem;
-            font-size: 1rem;
-            line-height: 1.5;
-            border-radius: .25rem;
-            color: #fff;
-            background-color: #007bff;
-        }
-        .btn:hover{
-              background-color: #0069d9;
-
-        }
-    <style/>
-    </html>`
-}
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index abe6b9e..d2cea6a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -20,6 +20,13 @@
         </div>
     </body>
     <script>
+        // --- Styling section ---
+        const BACKGROUND = getEditorColor('--vscode-editor-background')
+        const PRIMARY = getEditorColor(
+            '--vscode-list-activeSelectionBackground',
+        )
+        const SECONDARY = getEditorColor('--vscode-editor-foreground')
+
         function updateSvgViewBox() {
             const width = window.innerWidth
             const height = window.innerHeight
@@ -35,10 +42,14 @@
             // Inject dot file uri: $DOT_FILE_URI
             vscode.setState('$DOT_FILE_URI')
             const dot = await (await fetch('$DOT_FILE_URI')).text()
+            const styledDot = dot
+                .replaceAll('$callGraphBackgroundColor', BACKGROUND)
+                .replaceAll('$callGraphPrimaryColor', PRIMARY)
+                .replaceAll('$callGraphSecondaryColor', SECONDARY)
             const gv = d3
                 .select('#app')
                 .graphviz()
-                .renderDot(dot, () => {
+                .renderDot(styledDot, () => {
                     d3.select(window).on('resize.updatesvg', updateSvgViewBox)
                     updateSvgViewBox()
                 })

From 25b2e2c1308c2a30784a0733e63f9002d731baf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor=20Tavares?= <joao.tavares@gorgias.com>
Date: Sat, 25 Jan 2025 22:31:37 +0100
Subject: [PATCH 6/7] refactor: improve code readability in dot generation by
 restructuring attribute assignments

---
 src/dot.ts | 50 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/dot.ts b/src/dot.ts
index fa0a674..ff80dff 100644
--- a/src/dot.ts
+++ b/src/dot.ts
@@ -11,9 +11,18 @@ export function generateDot(graph: CallHierarchyNode, path: string) {
     const getNode = (n: CallHierarchyNode) => {
         return {
             name: `"${n.item.uri.path}#${n.item.name}@${n.item.range.start.line}:${n.item.range.start.character}"`,
-            attr: { label: n.item.name, color: '$callGraphSecondaryColor', fillcolor: '$callGraphPrimaryColor', style: 'filled', fontcolor: '$callGraphSecondaryColor' },
-            subgraph: { name: n.item.uri.path, attr: { label: n.item.uri.path.replace(root, '${workspace}') } },
-            next: []
+            attr: {
+                label: n.item.name,
+                color: '$callGraphSecondaryColor',
+                fillcolor: '$callGraphPrimaryColor',
+                style: 'filled',
+                fontcolor: '$callGraphSecondaryColor',
+            },
+            subgraph: {
+                name: n.item.uri.path,
+                attr: { label: n.item.uri.path.replace(root, '${workspace}') },
+            },
+            next: [],
         } as Node
     }
     const node = getNode(graph)
@@ -74,11 +83,12 @@ class Graph {
     private _subgraphs = new Map<string, string>()
     private _nodes = new Set<Node>()
     constructor(title?: string) {
-        this._dot = (true ? 'digraph' : 'graph')
-            + ` ${title ?? ''} {\n`
-            + 'bgcolor="$callGraphBackgroundColor"\n'
-            + 'color="$callGraphSecondaryColor"\n'
-            + 'fontcolor="$callGraphSecondaryColor"\n'
+        this._dot =
+            'digraph' +
+            ` ${title ?? ''} {\n` +
+            'bgcolor="$callGraphBackgroundColor"\n' +
+            'color="$callGraphSecondaryColor"\n' +
+            'fontcolor="$callGraphSecondaryColor"\n'
     }
     addAttr(attr: Attr) {
         this._dot += this.getAttr(attr, true)
@@ -91,16 +101,22 @@ class Graph {
             let s = ''
             const removeRepeat = [] as number[]
             if (n.next.length > 0) {
-                const children = n.next.map((child, index) => {
-                    for (const s of this._nodes) {
-                        if (isDeepStrictEqual(s, child)) removeRepeat.push(index)
-                    }
-                    if (child.subgraph) this.insertToSubgraph(child.subgraph, child.name + ' ')
-                    return child.name + this.getAttr(child.attr)
-                }).join(' ')
+                const children = n.next
+                    .map((child, index) => {
+                        for (const s of this._nodes) {
+                            if (isDeepStrictEqual(s, child))
+                                removeRepeat.push(index)
+                        }
+                        if (child.subgraph)
+                            this.insertToSubgraph(
+                                child.subgraph,
+                                child.name + ' ',
+                            )
+                        return child.name + this.getAttr(child.attr)
+                    })
+                    .join(' ')
                 s += `{${name}} -> {${children}} [color="$callGraphSecondaryColor"]\n`
-            }
-            else s += name + '\n'
+            } else s += name + '\n'
             this._dot += s
             this.addNode(
                 ...n.next.filter((_, index) => !removeRepeat.includes(index)),

From 1ffd567029d86de424dea231969641053dd89e4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor=20Tavares?= <joao.tavares@gorgias.com>
Date: Sat, 25 Jan 2025 23:09:25 +0100
Subject: [PATCH 7/7] feat: adjust colors in exported dot file

---
 static/index.html | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/static/index.html b/static/index.html
index d2cea6a..e1c9591 100644
--- a/static/index.html
+++ b/static/index.html
@@ -20,13 +20,6 @@
         </div>
     </body>
     <script>
-        // --- Styling section ---
-        const BACKGROUND = getEditorColor('--vscode-editor-background')
-        const PRIMARY = getEditorColor(
-            '--vscode-list-activeSelectionBackground',
-        )
-        const SECONDARY = getEditorColor('--vscode-editor-foreground')
-
         function updateSvgViewBox() {
             const width = window.innerWidth
             const height = window.innerHeight
@@ -37,7 +30,20 @@
                 .attr('viewBox', [0, 0, width, height].join(' '))
         }
 
+        function getEditorColor(property) {
+            return document
+                .getElementsByTagName('html')[0]
+                .style.getPropertyValue(property)
+        }
+
         ;(async function () {
+            // --- Styling section ---
+            const BACKGROUND = getEditorColor('--vscode-editor-background')
+            const PRIMARY = getEditorColor(
+                '--vscode-list-activeSelectionBackground',
+            )
+            const SECONDARY = getEditorColor('--vscode-editor-foreground')
+
             const vscode = acquireVsCodeApi()
             // Inject dot file uri: $DOT_FILE_URI
             vscode.setState('$DOT_FILE_URI')
@@ -76,7 +82,7 @@
                 vscode.postMessage({
                     command: 'download',
                     type: 'dot',
-                    data: dot,
+                    data: styledDot,
                 })
             })
         })()
