chore: replace raw result button with toggle switch

fkie-cad · Oct 22, 2024 · 26af06a · 26af06a
1 parent 7fbee57
commit 26af06a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/src/web_interface/static/js/show_analysis_preview.js b/src/web_interface/static/js/show_analysis_preview.js
@@ -37,31 +37,36 @@ function load_preview() {
  $("#preview-content").load(resourcePath, init_preview);
 }
 document.getElementById("preview_button").onclick = load_preview;
-let rawIsVisible = false;
 let rawResultIsHighlighted = false;
+const toggleSwitch = document.getElementById("rawResultSwitch");
 
-function toggleRawResult() {
+toggleSwitch.addEventListener('change', function() {
  const analysisTable = document.getElementById("analysis-table-body");
  const rawResultRow = document.getElementById("raw-result");
- // filter out meta rows
  const analysisRows = Array.from(analysisTable.children)
  .filter(child => !child.classList.contains("analysis-meta"));
- if (rawIsVisible) {
+
+ if (toggleSwitch.checked) {
  analysisRows.forEach((element) => {
- element.style.visibility = "visible";
+ element.style.visibility = "collapse";
  });
- rawResultRow.style.visibility = "collapse";
+ rawResultRow.style.visibility = "visible";
  } else {
  analysisRows.forEach((element) => {
- element.style.visibility = "collapse";
+ element.style.visibility = "visible";
  });
- rawResultRow.style.visibility = "visible";
+ rawResultRow.style.visibility = "collapse";
  }
- rawIsVisible = !rawIsVisible;
 
- if (!rawResultIsHighlighted) {
+ if (!rawResultIsHighlighted && toggleSwitch.checked) {
+ // highlight the result lazily and only once
  rawResultIsHighlighted = true;
  let rawResult = document.getElementById('raw-analysis');
  hljs.highlightBlock(rawResult);
  }
-}
+});
+
+window.onload = function() {
+ // make sure the switch is off when the page is reloaded
+ toggleSwitch.checked = false;
+};
diff --git a/src/web_interface/templates/analysis_plugins/general_information.html b/src/web_interface/templates/analysis_plugins/general_information.html
@@ -14,10 +14,12 @@
  <span>
  Showing Analysis: {{ selected_analysis | replace_underscore }}
  </span>
- <button class="btn btn-secondary btn-sm mb-0" onclick="toggleRawResult();">
- <i class="fas fa-code"></i>
- Show Raw Result (JSON)
- </button>
+ <div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" id="rawResultSwitch">
+ <label class="custom-control-label" for="rawResultSwitch" style="font-weight: normal;">
+ Show Raw Result (JSON)
+ </label>
+ </div>
  </div>
  </th>
  </tr>