continuing

docs/HistogramView.js

@@ -6,6 +6,7 @@ class HistogramView {
         this.#uiContainer = uiContainer
     }
 
+    // FK-TODO: unbind all events here and in HistogramChartView
     displayHistogramView(batchcode) {
         this
             .#loadHistoDescrs(batchcode)
@@ -13,6 +14,7 @@ class HistogramView {
     }
 
     #loadHistoDescrs(batchcode) {
+        UIUtils.clear(this.#uiContainer);
         const loadingText = document.createTextNode('Loading...');
         this.#uiContainer.appendChild(loadingText);
         return HistoDescrsProvider

docs/UIUtils.js

@@ -8,6 +8,10 @@ class UIUtils {
         return UIUtils.instantiateTemplate('template-canvas');
     }
 
+    static clear(container) {
+        container.replaceChildren();
+    }
+
     static createChartViewElementWithHeading(heading) {
         const chartViewElement = UIUtils.instantiateTemplate('template-ChartView');
         chartViewElement.querySelector(".heading").textContent = heading;

docs/batchCodeTable.html

@@ -60,6 +60,7 @@
   </p>
   <p>
     <select id="batchCodeSelect" name="batchCode">
+      <option disabled="" hidden="" selected="" value="">Select Batch</option>
       <option value="FE6208">FE6208</option>
       <option value="FD6840">FD6840</option>
       <option value="FD4555">FD4555</option>
@@ -49764,6 +49765,7 @@
       <option value="RL8095">RL8095</option>
       <option value="Ø94F21A">Ø94F21A</option>
     </select>
+  <div id="batchCodeDetails"></div>
   </p>
   <table class="display" id="batchCodeTable">
     <thead>

docs/batchCodeTable.js

@@ -16,7 +16,6 @@ class BatchCodeTableInitializer {
         this.#initializeBatchCodeSelect();
         this.#display();
         this.#initializeHistogramView();
-        this.#trackSearchWithGoogleAnalytics();
     }
 
     #createEmptyBatchCodeTable() {
@@ -105,7 +104,6 @@ class BatchCodeTableInitializer {
             .then(json => {
                 this.#setTableRows(json.data);
                 this.#columnSearch.columnContentUpdated();
-                this.#selectInput();
             });
     }
 
@@ -121,20 +119,16 @@ class BatchCodeTableInitializer {
             .draw();
     }
 
-    #selectInput() {
-        const input = document.querySelector(".dataTables_filter input");
-        input.focus();
-        input.select();
-    }
-
     #initializeBatchCodeSelect() {
-        this.#batchCodeSelect.select2({ minimumInputLength: 3 });
+        this.#batchCodeSelect.select2({ minimumInputLength: 4 });
         this.#batchCodeSelect.on(
             'select2:select',
-            function (e) {
-                var data = e.params.data;
-                console.log(data.id);
+            function (event) {
+                const batchcode = event.params.data.id;
+                new HistogramView(document.querySelector("#batchCodeDetails")).displayHistogramView(batchcode);
+                GoogleAnalytics.click_batchcode(batchcode);
             });
+        this.#batchCodeSelect.select2('open');
     }
 
     #initializeHistogramView() {
@@ -159,14 +153,4 @@ class BatchCodeTableInitializer {
                     }
                 });
     }
-
-    #trackSearchWithGoogleAnalytics() {
-        const thisClassInstance = this;
-        $(`#${this.#batchCodeTableElement[0].id}`)
-            .on(
-                'search.dt',
-                function () {
-                    GoogleAnalytics.view_search_results(thisClassInstance.#batchCodeTable.search().toUpperCase());
-                });
-    }
 }

src/HtmlUtils.py

@@ -3,6 +3,10 @@ def getBatchcodes(batchCodeTable):
 
 
 def getBatchcodeOptions(batchcodes):
+    return ['<option hidden disabled selected value>Select Batch</option>'] + _getBatchcodeOptions(batchcodes)
+
+
+def _getBatchcodeOptions(batchcodes):
     return [_getBatchcodeOption(batchcode) for batchcode in batchcodes]