SDFG Diff viewer (#161)

* Add first prototype of SDFG Diff viewer

* Refactoring

* Diff outline

* Add diff search

* Mask unused features for diff view

* Draw call

* Cleanup and fixes

* Add tests files

* Add tests

* Fix outline

* Address some review comments

* Switch to SDFGElements where possible

* Test improvements

* Update packages

* Re-add package-lock

* Remove type not supported by jsdom

* Fix localview things

* Fixes

index.html

@@ -50,10 +50,31 @@ <h3 id="sidebar-header">
                        style="display: none;">
                 <button id="load-instrumentation-report-btn"
                     class="btn btn-sm btn-light"
+                    disabled="disabled"
                     onclick="document.getElementById('instrumentation-report-file-input').click();">
                     Load Instrumentation Report
                 </button>
             </div>
+            <div class="col-auto" id="diff-view-btn-container">
+                <input type="file"
+                       accept=".sdfg,.json,.sdfgz,.sdfg.gz"
+                       id="second-sdfg-file-input"
+                       style="display: none;">
+                <button id="diff-view-btn"
+                    disabled="disabled"
+                    class="btn btn-sm btn-light"
+                    onclick="document.getElementById('second-sdfg-file-input').click();">
+                    Compare With Other SDFG
+                </button>
+            </div>
+            <div class="col-auto"
+                 id="exit-diff-view-btn-container"
+                 style="display: none;">
+                <button id="exit-diff-view-btn"
+                    class="btn btn-sm btn-light">
+                    Exit Comparison
+                </button>
+            </div>
         </div>
         <div class="row g-2">
             <div class="col-auto">
@@ -107,6 +128,12 @@ <h3 id="sidebar-header">
         </div>
     </div>
     <div id="contents"></div>
+    <div id="diff-container" style="display: none;">
+        <div id="diff-contents-A" class="diff-contents">
+        </div>
+        <div id="diff-contents-B" class="diff-contents">
+        </div>
+    </div>
 </body>
 
 </html>