From f3ac873469ab63097f06696ff6b86c0c94e26d79 Mon Sep 17 00:00:00 2001
From: Philipp Schaad <schaad.phil@gmail.com>
Date: Thu, 30 May 2024 10:35:13 +0200
Subject: [PATCH] Updated SDFV to fix bugs

---
 dace/viewer/templates/sdfv.html | 127 ++++++++++++++++++++++----------
 dace/viewer/webclient           |   2 +-
 2 files changed, 89 insertions(+), 40 deletions(-)
diff --git a/dace/viewer/templates/sdfv.html b/dace/viewer/templates/sdfv.html
index fd62ae5288..ea93b7e0d3 100644
--- a/dace/viewer/templates/sdfv.html
+++ b/dace/viewer/templates/sdfv.html
@@ -1,64 +1,113 @@
+<!-- Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved. -->
+
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="sdfv">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>SDFV: SDFG Viewer</title>
-    <link rel="stylesheet" type="text/css" href="{{dir|safe}}./webclient/external_lib/material/material-icons.css">
-    <link rel="stylesheet" type="text/css" href="{{dir|safe}}./webclient/sdfv.css">
 
     <script src="{{dir|safe}}./webclient/external_lib/pdfkit.standalone.js"></script>
     <script src="{{dir|safe}}./webclient/external_lib/blob-stream.js"></script>
     <script src="{{dir|safe}}./webclient/external_lib/canvas2pdf.js"></script>
+
+    <script defer src="{{dir|safe}}./webclient/dist/sdfv.js"></script>
 </head>
 
-<body>
-    <div class="w3-sidebar w3-bar-block w3-card w3-animate-right" style="display:none;right:0;" id="sidebar">
+<body class="sdfv">
+    <div class="w3-sidebar w3-bar-block w3-card w3-animate-right"
+        style="display:none;right:0;" id="sidebar">
         <div class="dragbar" id="dragbar"></div>
         <div class="sidebar-inner">
-            <button id="menuclose" class="w3-bar-item w3-button w3-large">Close &times;</button>
-            <h3 id="sidebar-header">Nothing selected</h3>
+            <button id="menuclose" class="w3-bar-item w3-button w3-large">
+                Close &times;
+            </button>
+            <h3 id="sidebar-header">
+                Nothing selected
+            </h3>
             <div id="sidebar-contents"></div>
         </div>
     </div>
-    <div id="filepicker">
-        <form>
-            <input type="file" id="sdfg-file-input" accept=".sdfg,.json"> <input type="button" id="reload"
-                value="Refresh">
-            <input type="button" id="outline" value="SDFG Outline">
-        </form>
-    </div>
-    <input type="file" accept=".json" id="instrumentation-report-file-input" style="display: none;">
-    <input type="button" value="Load Instrumentation Report" id="load-instrumentation-report-btn"
-        onclick="document.getElementById('instrumentation-report-file-input').click();">
-    <div>
-        <form>
-            <input id="search" type="text" placeholder="Search in graph elements">
-            <input type="button" id="search-btn" value="Search">
-            <input type="checkbox" id="search-case"> Case Sensitive
-        </form>
-        <form>
-            <textarea id="advsearch" style="font-family: monospace">
-(graph, element) => {
-  // Create a predicate that returns true for a match
-  // For example, finding transient arrays below  
-  if (element && element.data.node) {
+    <div class="container-fluid" id="header-container">
+        <div class="row g-2">
+            <div class="col-auto">
+                <input type="file" id="sdfg-file-input"
+                    accept=".sdfg,.json,.sdfgz,.sdfg.gz"
+                    class="form-control form-control-sm">
+            </div>
+            <div class="col-auto">
+                <button class="btn btn-sm btn-light btn-sdfv-light" id="reload">
+                    Refresh
+                </button>
+            </div>
+            <div class="col-auto">
+                <button class="btn btn-sm btn-light btn-sdfv-light" id="outline">
+                    SDFG Outline
+                </button>
+            </div>
+            <div class="col-auto">
+                <input type="file" accept=".json" id="instrumentation-report-file-input"
+                       style="display: none;">
+                <button id="load-instrumentation-report-btn"
+                    class="btn btn-sm btn-light btn-sdfv-light"
+                    onclick="document.getElementById('instrumentation-report-file-input').click();">
+                    Load Instrumentation Report
+                </button>
+            </div>
+        </div>
+        <div class="row g-2">
+            <div class="col-auto">
+                <div class="input-group">
+                    <input id="search" type="text" class="form-control form-control-sm"
+                        placeholder="Search in graph elements">
+                    <button id="search-btn" class="btn btn-sm btn-light btn-sdfv-light">
+                        Search
+                    </button>
+                </div>
+            </div>
+            <div class="col-auto d-flex align-items-center">
+                <div class="form-check form-switch">
+                    <input type="checkbox" id="search-case" class="form-check-input">
+                    <label for="search-case" class="form-check-label">
+                        Case Sensitive
+                    </label>
+                </div>
+            </div>
+            <div class="col-auto">
+                <div class="dropdown">
+                    <button class="btn btn-sm btn-light btn-sdfv-light dropdown-toggle" type="button"
+                        data-bs-toggle="dropdown">
+                        Advanced Search
+                    </button>
+                    <form class="dropdown-menu p-1">
+                        <textarea id="advsearch" style="font-family: monospace"
+                            class="form-control mb-2">(graph, element) => {
+// Create a predicate that returns true for a match
+// For example, finding transient arrays below  
+if (element && element.data.node) {
     let arrname = element.data.node.attributes.data;
     if (arrname) {
-      let arr = element.sdfg.attributes._arrays[arrname];
-      if (arr && arr.attributes.transient)
+    let arr = element.sdfg.attributes._arrays[arrname];
+    if (arr && arr.attributes.transient)
         return true;
     }
-  }
-  return false;
-};
-            </textarea>
-            <input type="button" id="advsearch-btn" value="Advanced Search">
-        </form>
+}
+return false;
+};</textarea>
+                        <button id="advsearch-btn" class="btn btn-light btn-sdfv-light">
+                            Search
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="col-auto d-flex align-items-center">
+                <div id="task-info-field">
+                </div>
+            </div>
+        </div>
     </div>
-    <div id="contents">
-    <script src="{{dir|safe}}./webclient/dist/sdfv.js"></script>
+    <div id="contents"></div>
     <script>
     document.addEventListener("DOMContentLoaded", function (event) {
         var sdfg_json = {{sdfg|safe}};
diff --git a/dace/viewer/webclient b/dace/viewer/webclient
index 2128d61489..ee843101e8 160000
--- a/dace/viewer/webclient
+++ b/dace/viewer/webclient
@@ -1 +1 @@
-Subproject commit 2128d61489ff249db5a0f92587ef4d55eefc8add
+Subproject commit ee843101e8b1b664153f74cee7280b7488ee43f2
