Add JavaScript functionality for dynamic UI updates and filtering

- Implemented font color configuration based on numeric values in various sections.
- Added resizing functionality for input fields to accommodate text length.
- Initialized filters on document ready for improved user interaction.
- Created visualization for profile data using fetched dot format.
- Enhanced SQL detail page with click event handling for row navigation.
- Ensured consistent highlighting for code blocks across multiple pages.

staticfiles/silk/js/pages/base.js

@@ -0,0 +1,5 @@
+$(document).ready(function () {
+    configureSpanFontColors($('#num-joins-div').find('.numeric'), 3, 5);
+    configureSpanFontColors($('#time-taken-div').find('.numeric'), 200, 500);
+    configureSpanFontColors($('#num-queries-div').find('.numeric'), 10, 500);
+});

staticfiles/silk/js/pages/clear_db.js

@@ -0,0 +1,7 @@
+$(document).ready(function () {
+    initFilters();
+    var $inputs = $('.resizing-input');
+    $inputs.focusout(function () {
+        $('#filter-form').submit();
+    });
+});

staticfiles/silk/js/pages/detail_base.js

@@ -0,0 +1 @@
+hljs.initHighlightingOnLoad();

staticfiles/silk/js/pages/profile_detail.js

@@ -0,0 +1,15 @@
+function createViz() {
+    var profileDotURL = JSON.parse(document.getElementById("profileDotURL").textContent);
+
+    $.get(
+        profileDotURL,
+        { cutoff: $('#percent').val() },
+        function (response) {
+            var svg = '#graph-div';
+            $(svg).html(Viz(response.dot));
+            $(svg + ' svg').attr('width', 960).attr('height', 600);
+            svgPanZoom(svg + ' svg', { controlIconsEnabled: true });
+        }
+    );
+}
+createViz();

staticfiles/silk/js/pages/profiling.js

@@ -0,0 +1,4 @@
+$(document).ready(function () {
+    initFilters();
+    initFilterButton();
+});

staticfiles/silk/js/pages/raw.js

@@ -0,0 +1 @@
+hljs.initHighlightingOnLoad();

staticfiles/silk/js/pages/request.js

@@ -0,0 +1 @@
+hljs.initHighlightingOnLoad();

staticfiles/silk/js/pages/requests.js

@@ -0,0 +1,4 @@
+$(document).ready(function () {
+    initFilters();
+    initFilterButton();
+});

staticfiles/silk/js/pages/root_base.js

@@ -0,0 +1,15 @@
+function initFilterButton() {
+    $('#filter-button').click(function () {
+        $(this).toggleClass('active');
+        $('body').toggleClass('cbp-spmenu-push-toleft');
+        $('#cbp-spmenu-s2').toggleClass('cbp-spmenu-open');
+        initFilters();
+    });
+}
+function submitFilters() {
+    $('#filter-form2').submit();
+}
+function submitEmptyFilters() {
+    $('#cbp-spmenu-s2 :input:not([type=hidden])').val('');
+    submitFilters();
+}

staticfiles/silk/js/pages/sql.js

@@ -0,0 +1,17 @@
+$(document).ready(function () {
+  document.querySelectorAll(".data-row").forEach((rowElement) => {
+    let sqlDetailUrl = rowElement.dataset.sqlDetailUrl;
+    rowElement.addEventListener("click", (e) => {
+      switch (e.button) {
+        case 0:
+          window.location = sqlDetailUrl;
+          break;
+        case 1:
+          window.open(sqlDetailUrl);
+          break;
+        default:
+          break;
+      }
+    });
+  });
+});

staticfiles/silk/js/pages/sql_detail.js

@@ -0,0 +1,4 @@
+$(document).ready(function () {
+    configureSpanFontColors($('#num-joins-div').find('.numeric'), 3, 5);
+    configureSpanFontColors($('#time-taken-div').find('.numeric'), 200, 500);
+});

staticfiles/silk/js/pages/summary.js

@@ -0,0 +1,7 @@
+$(document).ready(function () {
+    initFilters();
+    var $inputs = $('.resizing-input');
+    $inputs.focusout(function () {
+        $('#filter-form').submit();
+    });
+});