From a122850bf70e486a7ca340755da810a74a825edb Mon Sep 17 00:00:00 2001
From: Tamir Bahar <tamir.bahar@gmail.com>
Date: Sat, 7 Sep 2024 16:49:23 +0300
Subject: [PATCH 1/2] Expose flatSwitch and Simplify

Simplify and FlatSwitch can now be controlled both in the demo and the extension
---
 package.json                             |  5 ++
 src/frontend/src/lib/Demo.svelte         | 19 +++++-
 src/frontend/src/lib/Graph.svelte        | 37 +++++++----
 src/frontend/src/lib/SampleViewer.svelte | 10 ++-
 src/frontend/src/lib/SimpleGraph.svelte  | 84 ------------------------
 src/vscode/extension.ts                  |  8 ++-
 6 files changed, 63 insertions(+), 100 deletions(-)
 delete mode 100644 src/frontend/src/lib/SimpleGraph.svelte

diff --git a/package.json b/package.json
index 3e64318..13a3413 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,11 @@
           "type": "boolean",
           "default": "true",
           "description": "Simplify the graph by collapsing trivial paths."
+        },
+        "functionGraphOverview.flatSwitch": {
+          "type": "boolean",
+          "default": "false",
+          "description": "Flatten switches, so that all cases are direct descendants of the root."
         }
       }
     },
diff --git a/src/frontend/src/lib/Demo.svelte b/src/frontend/src/lib/Demo.svelte
index 7cd82ae..52c20db 100644
--- a/src/frontend/src/lib/Demo.svelte
+++ b/src/frontend/src/lib/Demo.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import CodeMirror from "svelte-codemirror-editor";
   import { go } from "@codemirror/lang-go";
-  import SimpleGraph from "./SimpleGraph.svelte";
+  import Graph from "./Graph.svelte";
 
   export let code = "func Example() {\n\tif x {\n\t\treturn\n\t}\n}";
+
+  let simplify = true;
+  let flatSwitch = false;
 </script>
 
 <main>
@@ -28,7 +31,14 @@
     </div>
   </div>
   <div class="graph">
-    <SimpleGraph {code} />
+    <div class="controls">
+      <input type="checkbox" id="simplify" bind:checked={simplify} />
+      <label for="simplify">Simplify</label>
+
+      <input type="checkbox" id="flatSwitch" bind:checked={flatSwitch} />
+      <label for="flatSwitch">Flat Switch</label>
+    </div>
+    <Graph {code} {simplify} {flatSwitch} />
   </div>
 </main>
 
@@ -51,6 +61,11 @@
     background-color: white;
     position: relative;
   }
+  .controls {
+    font-family: Arial, Helvetica, sans-serif;
+    margin-top: 1rem;
+    margin-left: 1rem;
+  }
   .graph,
   .editor {
     background-color: white;
diff --git a/src/frontend/src/lib/Graph.svelte b/src/frontend/src/lib/Graph.svelte
index cea0751..40f8513 100644
--- a/src/frontend/src/lib/Graph.svelte
+++ b/src/frontend/src/lib/Graph.svelte
@@ -16,6 +16,8 @@
   export let simplify: boolean = true;
   export let trim: boolean = true;
   export let flatSwitch: boolean = false;
+  export let showDot: boolean = false;
+  export let showAST: boolean = false;
 
   async function initialize() {
     parser = await initializeParser();
@@ -70,20 +72,33 @@
   }
 </script>
 
-<div class="graph">
+<div class="results">
   {#await initialize() then}
-    {@html renderWrapper(code, { simplify, verbose, trim, flatSwitch })}
+    <div class="graph">
+      {@html renderWrapper(code, { simplify, verbose, trim, flatSwitch })}
+    </div>
   {/await}
-  <br />
-  <details>
-    <summary>AST</summary>
-    {@html ast}
-  </details>
-  <details>
-    <summary>DOT</summary>
-    <pre>{dot}</pre>
-  </details>
+  {#if showAST}
+    <br />
+    <details>
+      <summary>AST</summary>
+      {@html ast}
+    </details>
+  {/if}
+  {#if showDot}
+    <br />
+    <details>
+      <summary>DOT</summary>
+      <pre>{dot}</pre>
+    </details>
+  {/if}
 </div>
 
 <style>
+  .graph {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1em;
+  }
 </style>
diff --git a/src/frontend/src/lib/SampleViewer.svelte b/src/frontend/src/lib/SampleViewer.svelte
index e9d85e4..fe318a4 100644
--- a/src/frontend/src/lib/SampleViewer.svelte
+++ b/src/frontend/src/lib/SampleViewer.svelte
@@ -29,7 +29,15 @@
 <div class="container">
   {#each Object.entries(goSamples) as [name, code] (name)}
     <div class="code"><pre>{code}</pre></div>
-    <Graph {code} {simplify} {verbose} {trim} {flatSwitch} />
+    <Graph
+      {code}
+      {simplify}
+      {verbose}
+      {trim}
+      {flatSwitch}
+      showAST={true}
+      showDot={true}
+    />
   {/each}
 </div>
 
diff --git a/src/frontend/src/lib/SimpleGraph.svelte b/src/frontend/src/lib/SimpleGraph.svelte
deleted file mode 100644
index 2b09eb5..0000000
--- a/src/frontend/src/lib/SimpleGraph.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-  import Parser from "web-tree-sitter";
-  import { CFGBuilder, mergeNodeAttrs } from "../../../control-flow/cfg";
-  import { graphToDot } from "../../../control-flow/render";
-  import { simplifyCFG, trimFor } from "../../../control-flow/graph-ops";
-  import { Graphviz } from "@hpcc-js/wasm-graphviz";
-
-  import { initializeParser, getFirstFunction } from "./utils";
-
-  let parser: Parser;
-  let graphviz: Graphviz;
-  let svg: string = "";
-  let ast: string = "";
-  let dot: string = "";
-  export let code: string;
-  export let verbose: boolean = false;
-  export let simplify: boolean = true;
-  export let trim: boolean = true;
-
-  async function initialize() {
-    parser = await initializeParser();
-    graphviz = await Graphviz.load();
-    return { parser, graphviz };
-  }
-
-  interface RenderOptions {
-    readonly simplify: boolean;
-    readonly verbose: boolean;
-    readonly trim: boolean;
-  }
-
-  function renderCode(code: string, options: RenderOptions) {
-    const { trim, simplify, verbose } = options;
-    const tree = parser.parse(code);
-
-    const functionNode = getFirstFunction(tree);
-
-    ast = functionNode
-      .toString()
-      .replaceAll(
-        "(",
-        "<div style='margin-left:10px;border-left: 1px #888 solid;'>",
-      )
-      .replaceAll(")", "</div>");
-    let builder = new CFGBuilder();
-    let cfg = builder.buildCFG(functionNode);
-    if (!cfg) {
-      return;
-    }
-
-    if (trim) {
-      cfg = trimFor(cfg);
-    }
-
-    if (simplify) {
-      cfg = simplifyCFG(cfg, mergeNodeAttrs);
-    }
-    dot = graphToDot(cfg, verbose);
-    return graphviz.dot(dot);
-  }
-
-  function renderWrapper(code: string, options: RenderOptions) {
-    try {
-      return renderCode(code, options);
-    } catch (error) {
-      return `<p style='border: 2px red solid;'>${error.toString()}</p>`;
-    }
-  }
-</script>
-
-<div class="graph">
-  {#await initialize() then}
-    {@html renderWrapper(code, { simplify, verbose, trim })}
-  {/await}
-</div>
-
-<style>
-  .graph {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1em;
-  }
-</style>
diff --git a/src/vscode/extension.ts b/src/vscode/extension.ts
index a01a412..1df7f96 100644
--- a/src/vscode/extension.ts
+++ b/src/vscode/extension.ts
@@ -116,8 +116,12 @@ export async function activate(context: vscode.ExtensionContext) {
           );
           console.log("Currently in", name);
         }
-
-        const builder = new CFGBuilder();
+        const flatSwitch = Boolean(
+          vscode.workspace
+            .getConfiguration("functionGraphOverview")
+            .get("flatSwitch"),
+        );
+        const builder = new CFGBuilder({ flatSwitch });
         let cfg = builder.buildCFG(node);
         cfg = trimFor(cfg);
         if (

From 134bb9f91924b2f87edac4072b761d5338b65ce6 Mon Sep 17 00:00:00 2001
From: Tamir Bahar <tamir.bahar@gmail.com>
Date: Sat, 7 Sep 2024 16:50:08 +0300
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 12d68d0..1e2bfe2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 - Learned Go's `fallthrough` keyword
 - Learned an option to draw flat-switches (where all cases are direct descendants of the switch head)
 - Added utilities for basic reachability testing
+- Expose `simplify` and `flat switch` settings in demo
+- Expose `flat switch` setting in extension
 
 ## [0.0.2] - 2024-09-06