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/components/cell.js

@@ -0,0 +1,24 @@
+function configureSpanFontColors(selector, okValue, badValue) {
+    selector.each(function () {
+        var val = parseFloat($(this).text());
+        if (val < okValue) {
+            $(this).addClass('very-good-font-color');
+        }
+        else if (val < badValue) {
+            $(this).addClass('ok-font-color');
+        }
+        else {
+            $(this).addClass('very-bad-font-color');
+        }
+    });
+}
+
+function configureFontColors() {
+    configureSpanFontColors($('.time-taken-div .numeric'), 200, 500);
+    configureSpanFontColors($('.time-taken-queries-div .numeric'), 50, 200);
+    configureSpanFontColors($('.num-queries-div .numeric'), 10, 50);
+}
+
+$(document).ready(function () {
+    configureFontColors();
+});

staticfiles/silk/js/components/filters.js

@@ -0,0 +1,50 @@
+
+function configureResizingInputs() {
+    var $inputs = $('.resizing-input');
+
+    function resizeForText(text) {
+        var $this = $(this);
+        if (!text.trim()) {
+            text = $this.attr('placeholder').trim();
+        }
+        var $span = $this.parent().find('span');
+        $span.text(text);
+        var $inputSize = $span.width();
+        $this.css("width", $inputSize);
+    }
+
+    $inputs.find('input').keypress(function (e) {
+        if (e.which && e.charCode) {
+            var c = String.fromCharCode(e.keyCode | e.charCode);
+            var $this = $(this);
+            resizeForText.call($this, $this.val() + c);
+        }
+    });
+
+    $inputs.find('input').keyup(function (e) { // Backspace event only fires for keyup
+        if (e.keyCode === 8 || e.keyCode === 46) {
+            resizeForText.call($(this), $(this).val());
+        }
+    });
+
+    $inputs.find('input').each(function () {
+        var $this = $(this);
+        resizeForText.call($this, $this.val())
+    });
+
+
+    $('.resizing-input .datetimepicker').datetimepicker({
+        step: 10,
+        onChangeDateTime: function (dp, $input) {
+            resizeForText.call($input, $input.val())
+        }
+    });
+
+}
+
+/**
+ * Entry point for filter initialisation.
+ */
+function initFilters() {
+    configureResizingInputs();
+}

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();
+    });
+});