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