From 689679486ec5a5a6671e3e3adf9de52005aa71c2 Mon Sep 17 00:00:00 2001
From: Bill Long <bilong@microsoft.com>
Date: Thu, 15 Sep 2022 15:11:31 -0500
Subject: [PATCH] Add Clear All Selections button

---
 Diagnostics/ExTRA/ui.html | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/Diagnostics/ExTRA/ui.html b/Diagnostics/ExTRA/ui.html
index ac302f883c..07d1da00b8 100644
--- a/Diagnostics/ExTRA/ui.html
+++ b/Diagnostics/ExTRA/ui.html
@@ -36,6 +36,10 @@
         #scenariosDiv {
             column-count: 5;
         }
+
+        .btn {
+            margin-top: 15px;
+        }
     </style>
 </head>
 
@@ -51,11 +55,15 @@
                 <input id="tagFilter" onchange="tagFilterChanged(event)" onkeyup="tagFilterChanged(event)" />
                 <label for="tagFilter" class="active">Tag Filter</label>
             </div>
-            <label for="showOnlySelectedCheckbox" class="col s3">
-                <input id="showOnlySelectedCheckbox" class="filled-in" type="checkbox"
-                    onchange="updateVisibility(event)" />
-                <span>Only Show Selected</span>
-            </label>
+            <div class="col s3">
+                <label for="showOnlySelectedCheckbox">
+                    <input id="showOnlySelectedCheckbox" class="filled-in" type="checkbox"
+                        onchange="updateVisibility(event)" />
+                    <span>Only Show Selected</span>
+                </label>
+                <button class="btn waves-effect waves-light" onclick="clearAllSelections()">Clear All
+                    Selections</button>
+            </div>
             <button class="btn waves-effect waves-light col s3" onclick="save()">Save</button>
         </div>
 
@@ -84,6 +92,18 @@
                 updateVisibility();
             }
 
+            function clearAllSelections(event) {
+                selectionTable.forEach(category => {
+                    category.tags.forEach(tag => {
+                        setSelectedOnTag(tag, false, false);
+                    });
+
+                    checkCategorySelectionState(category);
+                });
+
+                updateVisibility();
+            }
+
             async function save() {
                 const response = await fetch(window.location.href, {
                     method: 'POST',