removing batchCodeTable from UI

docs/BatchCodeSelectInitializer.js

@@ -0,0 +1,14 @@
+class BatchCodeSelectInitializer {
+
+    static initialize({batchCodeSelect, batchCodeDetails}) {
+        batchCodeSelect.select2({ minimumInputLength: 4 });
+        batchCodeSelect.on(
+            'select2:select',
+            function (event) {
+                const batchcode = event.params.data.id;
+                new HistogramView(batchCodeDetails).displayHistogramView(batchcode);
+                GoogleAnalytics.click_batchcode(batchcode);
+            });
+        batchCodeSelect.select2('open');
+    }
+}

docs/ColumnSearch.js

@@ -1,35 +0,0 @@
-// adapted from https://datatables.net/examples/api/multi_filter_select.html
-class ColumnSearch {
-
-    #column;
-    #select;
-
-    constructor(column) {
-        this.#column = column;
-        const clazz = this;
-        $('<br/>').appendTo($(this.#column.header()));
-        this.#select = $('<select></select>')
-            .appendTo($(this.#column.header()))
-            .on(
-                'change',
-                function () {
-                    const val = $.fn.dataTable.util.escapeRegex($(this).val());
-                    clazz.#column
-                        .search(val ? '^' + val + '$' : '', true, false)
-                        .draw();
-                });
-    }
-
-    columnContentUpdated() {
-        this.#select.empty();
-        this.#select.append('<option value=""></option>');
-        const clazz = this;
-        this.#column
-            .data()
-            .unique()
-            .sort()
-            .each(function (d, _) {
-                clazz.#select.append('<option value="' + d + '">' + d + '</option>');
-            });
-    }
-}

docs/batchCodeTable.css

@@ -1,11 +1,3 @@
-.dataTables_filter {
-    float: left !important;
-}
-
-.dataTables_length {
-    float: right !important;
-}
-
 .chartWithSlider {
     display: flex;
     flex-wrap: nowrap;

docs/batchCodeTable.html

@@ -15,7 +15,6 @@
 
     gtag('config', 'G-ERHYDH4P64');
   </script> -->
-  <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
   <link href="batchCodeTable.css" rel="stylesheet" type="text/css" />
   <link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
   <script crossorigin="anonymous"
@@ -28,27 +27,23 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
-  <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
-    type="text/javascript"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
   <script src="./Utils.js"></script>
   <script src="./UIUtils.js"></script>
-  <script src="./ColumnSearch.js"></script>
   <script src="./GoogleAnalytics.js"></script>
-  <script src="./batchCodeTable.js"></script>
+  <script src="./BatchCodeSelectInitializer.js"></script>
   <script src="./HistoDescrsProvider.js"></script>
   <script src="./HistogramChartView.js"></script>
   <script src="./BatchcodeCombinationSelection.js"></script>
   <script src="./HistogramView.js"></script>
   <script>
     $(document).ready(function () {
-      const batchCodeTableInitializer =
+      BatchCodeSelectInitializer.initialize(
-        new BatchCodeTableInitializer(
+        {
-          {
+          batchCodeSelect: $('#batchCodeSelect'),
-            batchCodeTableElement: $('#batchCodeTable'),
+          batchCodeDetails: document.querySelector("#batchCodeDetails")
-            batchCodeSelect: $('#batchCodeSelect')
+        }
-          });
+      );
-      batchCodeTableInitializer.initialize();
     });
   </script>
 </head>
@@ -49767,21 +49762,6 @@
     </select>
   </p>
   <div id="batchCodeDetails"></div>
-  <table class="display" id="batchCodeTable">
-    <thead>
-      <tr>
-        <th></th>
-        <th>Batch</th>
-        <th>Adverse Reaction Reports</th>
-        <th>Deaths</th>
-        <th>Disabilities</th>
-        <th>Life Threatening Illnesses</th>
-        <th>Company</th>
-        <th>Severe reports</th>
-        <th>Lethality</th>
-      </tr>
-    </thead>
-  </table>
   <p><b>Data Source:</b>
     <a href="https://vaers.hhs.gov/data/datasets.html" target="_blank">Vaccine Adverse Event Reporting System
       (VAERS)</a>

docs/batchCodeTable.js

@@ -1,156 +0,0 @@
-class BatchCodeTableInitializer {
-
-    #batchCodeTableElement;
-    #batchCodeTable;
-    #batchCodeSelect;
-    #columnSearch;
-
-    constructor({ batchCodeTableElement, batchCodeSelect }) {
-        this.#batchCodeTableElement = batchCodeTableElement;
-        this.#batchCodeSelect = batchCodeSelect;
-    }
-
-    initialize() {
-        this.#batchCodeTable = this.#createEmptyBatchCodeTable();
-        this.#columnSearch = new ColumnSearch(this.#batchCodeTable.column(this.#getColumnIndex('Company')));
-        this.#initializeBatchCodeSelect();
-        this.#display();
-        this.#initializeHistogramView();
-    }
-
-    #createEmptyBatchCodeTable() {
-        return this.#batchCodeTableElement.DataTable(
-            {
-                initComplete: function () {
-                    $('.dataTables_filter').append(' (press return key)');
-                },
-                language:
-                {
-                    searchPlaceholder: "Enter Batch Code"
-                },
-                search:
-                {
-                    return: true
-                },
-                processing: true,
-                deferRender: true,
-                order: [[this.#getColumnIndex('Adverse Reaction Reports'), "desc"]],
-                columnDefs:
-                    [
-                        {
-                            className: 'dt-control',
-                            orderable: false,
-                            data: null,
-                            defaultContent: '',
-                            targets: this.#getColumnIndex('control')
-                        },
-                        {
-                            searchable: false,
-                            targets: [
-                                this.#getColumnIndex('Adverse Reaction Reports'),
-                                this.#getColumnIndex('Deaths'),
-                                this.#getColumnIndex('Disabilities'),
-                                this.#getColumnIndex('Life Threatening Illnesses'),
-                                this.#getColumnIndex('Severe reports'),
-                                this.#getColumnIndex('Lethality')
-                            ]
-                        },
-                        {
-                            orderable: false,
-                            targets: [this.#getColumnIndex('Company')]
-                        },
-                        {
-                            render: (data, type, row) => {
-                                const numberInPercent = parseFloat(data);
-                                return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + " %" : '';
-                            },
-                            targets: [this.#getColumnIndex('Severe reports'), this.#getColumnIndex('Lethality')]
-                        }
-                    ]
-            });
-    }
-
-    #getColumnIndex(columnName) {
-        switch (columnName) {
-            case 'control':
-                return 0;
-            case 'Batch':
-                return 1;
-            case 'Adverse Reaction Reports':
-                return 2;
-            case 'Deaths':
-                return 3;
-            case 'Disabilities':
-                return 4;
-            case 'Life Threatening Illnesses':
-                return 5;
-            case 'Company':
-                return 6;
-            case 'Severe reports':
-                return 7;
-            case 'Lethality':
-                return 8;
-        }
-    }
-
-    #display() {
-        // FK-TODO: show "Loading.." message or spinning wheel.
-        fetch(`data/batchCodeTables/Global.json`)
-            .then(response => response.json())
-            .then(json => {
-                this.#_addEmptyControlColumn(json);
-                return json;
-            })
-            .then(json => {
-                this.#setTableRows(json.data);
-                this.#columnSearch.columnContentUpdated();
-            });
-    }
-
-    #_addEmptyControlColumn(json) {
-        json.columns.unshift('control');
-        json.data.forEach(row => row.unshift(null));
-    }
-
-    #setTableRows(rows) {
-        this.#batchCodeTable
-            .clear()
-            .rows.add(rows)
-            .draw();
-    }
-
-    #initializeBatchCodeSelect() {
-        this.#batchCodeSelect.select2({ minimumInputLength: 4 });
-        this.#batchCodeSelect.on(
-            'select2:select',
-            function (event) {
-                const batchcode = event.params.data.id;
-                new HistogramView(document.querySelector("#batchCodeDetails")).displayHistogramView(batchcode);
-                GoogleAnalytics.click_batchcode(batchcode);
-            });
-        this.#batchCodeSelect.select2('open');
-    }
-
-    #initializeHistogramView() {
-        const thisClassInstance = this;
-        $(`#${this.#batchCodeTableElement[0].id} tbody`)
-            .on(
-                'click',
-                'td.dt-control',
-                function () {
-                    const tr = $(this).closest('tr');
-                    const row = thisClassInstance.#batchCodeTable.row(tr);
-                    if (row.child.isShown()) {
-                        row.child.hide();
-                        tr.removeClass('shown');
-                    } else {
-                        const uiContainer = document.createElement("div");
-                        row.child(uiContainer).show();
-                        tr.addClass('shown');
-                        const batchcode = row.data()[thisClassInstance.#getColumnIndex('Batch')];
-                        new HistogramView(uiContainer).displayHistogramView(batchcode);
-                        GoogleAnalytics.click_batchcode(batchcode);
-                    }
-                });
-    }
-}

src/BatchCodeTablePersister.py

@@ -22,5 +22,6 @@ def createAndSaveGlobalBatchCodeTable(minADRsForLethality, batchCodeTableFactory
             'Severe reports',
             'Lethality'
         ]]
+    # FK-TODO: remove Global.json
     IOUtils.saveDataFrameAsJson(batchCodeTable, '../docs/data/batchCodeTables/Global.json')
     return batchCodeTable

src/help.txt

@@ -4,7 +4,6 @@ FK-FIXME:
 
 FK-TODO:
 - add google captcha to batchCodeTable.html
-- remove batchCodeTable
 
 anacron job:
 sudo cp src/intensivstationen_howbadismybatch.sh /etc/cron.daily/intensivstationen_howbadismybatch