Expose flatSwitch and Simplify

Simplify and FlatSwitch can now be controlled both in the demo and the extension

Author: tmr232

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."
         }
       }
     },

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;

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>

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>
 

src/frontend/src/lib/SimpleGraph.svelte

@@ -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 (