From 7b78a6f449d3b8b95a7bd4b9a834cc9f3c341cd4 Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Fri, 13 Oct 2023 20:57:18 +0200
Subject: [PATCH] handlich vaccines in UI

---
 docs/SymptomsCausedByVaccines/index.html      | 136 +++++++++++++++++-
 .../js/PageInitializer.js                     |  35 +++--
 .../js/PrrBySymptomTable.js                   |  72 ++++++++++
 .../js/PrrBySymptomTableView.js               |  15 ++
 .../js/PrrByVaccineProvider.js                |   4 +
 src/HowBadIsMyBatch.ipynb                     |   5 +-
 src/SymptomsCausedByVaccines/HtmlUpdater.py   |   9 +-
 7 files changed, 259 insertions(+), 17 deletions(-)
 create mode 100644 docs/SymptomsCausedByVaccines/js/PrrBySymptomTable.js
 create mode 100644 docs/SymptomsCausedByVaccines/js/PrrBySymptomTableView.js

diff --git a/docs/SymptomsCausedByVaccines/index.html b/docs/SymptomsCausedByVaccines/index.html
index deb21b70fa7..ffd437679b5 100644
--- a/docs/SymptomsCausedByVaccines/index.html
+++ b/docs/SymptomsCausedByVaccines/index.html
@@ -31,15 +31,23 @@
   <script src="./js/PageInitializer.js"></script>
   <script src="./js/PrrByVaccineProvider.js"></script>
   <script src="./js/PrrByVaccineTable.js"></script>
+  <script src="./js/PrrBySymptomTable.js"></script>
   <script src="./js/PrrByVaccineTableView.js"></script>
+  <script src="./js/PrrBySymptomTableView.js"></script>
   <script>
     document.addEventListener(
       "DOMContentLoaded",
       event => {
         PageInitializer.initializePage(
           {
-            symptomSelectElement: $('#symptomSelect'),
-            prrByVaccineTableElement: $('#prrByVaccineTable')
+            symptom: {
+              symptomSelectElement: $('#symptomSelect'),
+              prrByVaccineTableElement: $('#prrByVaccineTable')
+            },
+            vaccine: {
+              vaccineSelectElement: $('#vaccineSelect'),
+              prrBySymptomTableElement: $('#prrBySymptomTable')
+            }
           }
         );
       });
@@ -63,7 +71,7 @@
           </div>
           <div class="clearfix"></div>
           <div class="row">
-            <div>
+            <div class="col-xs-12 col-sm-6">
               <div class="x_panel">
                 <div class="x_title">
                   <h3>Worst Vaccines</h3>
@@ -17681,6 +17689,128 @@
                 </div>
               </div>
             </div>
+            <div class="col-xs-12 col-sm-6">
+              <div class="x_panel">
+                <div class="x_title">
+                  <h3>Strongest Symptoms</h3>
+                  <div class="clearfix"></div>
+                </div>
+                <div class="x_content">
+                  <div style="margin-bottom: 20px;">
+                    <label>Select Vaccine:</label>
+                    <select id="vaccineSelect" name="vaccine">
+                      <option disabled="" hidden="" selected="" value="">Select Vaccine</option>
+                      <option value="6VAX-F">6VAX-F</option>
+                      <option value="ADEN_4_7">ADEN_4_7</option>
+                      <option value="ANTH">ANTH</option>
+                      <option value="BCG">BCG</option>
+                      <option value="CEE">CEE</option>
+                      <option value="CHOL">CHOL</option>
+                      <option value="COVID19">COVID19</option>
+                      <option value="COVID19-2">COVID19-2</option>
+                      <option value="DF">DF</option>
+                      <option value="DPP">DPP</option>
+                      <option value="DT">DT</option>
+                      <option value="DTAP">DTAP</option>
+                      <option value="DTAPH">DTAPH</option>
+                      <option value="DTAPHEPBIP">DTAPHEPBIP</option>
+                      <option value="DTAPIPV">DTAPIPV</option>
+                      <option value="DTAPIPVHIB">DTAPIPVHIB</option>
+                      <option value="DTIPV">DTIPV</option>
+                      <option value="DTOX">DTOX</option>
+                      <option value="DTP">DTP</option>
+                      <option value="DTPHEP">DTPHEP</option>
+                      <option value="DTPHIB">DTPHIB</option>
+                      <option value="DTPIHI">DTPIHI</option>
+                      <option value="DTPIPV">DTPIPV</option>
+                      <option value="DTPPHIB">DTPPHIB</option>
+                      <option value="DTPPVHBHPB">DTPPVHBHPB</option>
+                      <option value="EBZR">EBZR</option>
+                      <option value="FLU(H1N1)">FLU(H1N1)</option>
+                      <option value="FLU3">FLU3</option>
+                      <option value="FLU4">FLU4</option>
+                      <option value="FLUA3">FLUA3</option>
+                      <option value="FLUA4">FLUA4</option>
+                      <option value="FLUC3">FLUC3</option>
+                      <option value="FLUC4">FLUC4</option>
+                      <option value="FLUN(H1N1)">FLUN(H1N1)</option>
+                      <option value="FLUN3">FLUN3</option>
+                      <option value="FLUN4">FLUN4</option>
+                      <option value="FLUR3">FLUR3</option>
+                      <option value="FLUR4">FLUR4</option>
+                      <option value="FLUX">FLUX</option>
+                      <option value="FLUX(H1N1)">FLUX(H1N1)</option>
+                      <option value="H5N1">H5N1</option>
+                      <option value="HBHEPB">HBHEPB</option>
+                      <option value="HBPV">HBPV</option>
+                      <option value="HEP">HEP</option>
+                      <option value="HEPA">HEPA</option>
+                      <option value="HEPAB">HEPAB</option>
+                      <option value="HEPATYP">HEPATYP</option>
+                      <option value="HIBV">HIBV</option>
+                      <option value="HPV2">HPV2</option>
+                      <option value="HPV4">HPV4</option>
+                      <option value="HPV9">HPV9</option>
+                      <option value="HPVX">HPVX</option>
+                      <option value="IPV">IPV</option>
+                      <option value="JEV">JEV</option>
+                      <option value="JEV1">JEV1</option>
+                      <option value="JEVX">JEVX</option>
+                      <option value="LYME">LYME</option>
+                      <option value="MEA">MEA</option>
+                      <option value="MEN">MEN</option>
+                      <option value="MENB">MENB</option>
+                      <option value="MENHIB">MENHIB</option>
+                      <option value="MER">MER</option>
+                      <option value="MM">MM</option>
+                      <option value="MMR">MMR</option>
+                      <option value="MMRV">MMRV</option>
+                      <option value="MNC">MNC</option>
+                      <option value="MNQ">MNQ</option>
+                      <option value="MNQHIB">MNQHIB</option>
+                      <option value="MU">MU</option>
+                      <option value="MUR">MUR</option>
+                      <option value="OPV">OPV</option>
+                      <option value="PER">PER</option>
+                      <option value="PLAGUE">PLAGUE</option>
+                      <option value="PNC">PNC</option>
+                      <option value="PNC10">PNC10</option>
+                      <option value="PNC13">PNC13</option>
+                      <option value="PNC15">PNC15</option>
+                      <option value="PNC20">PNC20</option>
+                      <option value="PPV">PPV</option>
+                      <option value="RAB">RAB</option>
+                      <option value="RUB">RUB</option>
+                      <option value="RV">RV</option>
+                      <option value="RV1">RV1</option>
+                      <option value="RV5">RV5</option>
+                      <option value="RVX">RVX</option>
+                      <option value="SMALL">SMALL</option>
+                      <option value="SMALLMNK">SMALLMNK</option>
+                      <option value="SSEV">SSEV</option>
+                      <option value="TBE">TBE</option>
+                      <option value="TD">TD</option>
+                      <option value="TDAP">TDAP</option>
+                      <option value="TDAPIPV">TDAPIPV</option>
+                      <option value="TTOX">TTOX</option>
+                      <option value="TYP">TYP</option>
+                      <option value="UNK">UNK</option>
+                      <option value="VARCEL">VARCEL</option>
+                      <option value="VARZOS">VARZOS</option>
+                      <option value="YF">YF</option>
+                    </select>
+                  </div>
+                  <table class="display" id="prrBySymptomTable">
+                    <thead>
+                      <tr>
+                        <th>Symptom</th>
+                        <th>Proportional Reporting Ratio > 1</th>
+                      </tr>
+                    </thead>
+                  </table>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="clearfix"></div>
         </div>
diff --git a/docs/SymptomsCausedByVaccines/js/PageInitializer.js b/docs/SymptomsCausedByVaccines/js/PageInitializer.js
index a5ed79d8680..ecb2e9fbb9d 100644
--- a/docs/SymptomsCausedByVaccines/js/PageInitializer.js
+++ b/docs/SymptomsCausedByVaccines/js/PageInitializer.js
@@ -1,22 +1,37 @@
 class PageInitializer {
 
-    static initializePage({ symptomSelectElement, prrByVaccineTableElement }) {
+    static initializePage({ symptom, vaccine }) {
+        PageInitializer.#configureSymptom(symptom);
+        PageInitializer.#configureVaccine(vaccine);
+    }
+
+    static #configureSymptom({ symptomSelectElement, prrByVaccineTableElement }) {
         const prrByVaccineTableView = new PrrByVaccineTableView(prrByVaccineTableElement);
-        PageInitializer.#initializeSymptomSelectElement(
+        PageInitializer.#initializeSelectElement(
             {
-                symptomSelectElement: symptomSelectElement,
-                onSymptomSelected: symptom => prrByVaccineTableView.displayPrrByVaccineTable4Symptom(symptom)
+                selectElement: symptomSelectElement,
+                onValueSelected: symptom => prrByVaccineTableView.displayPrrByVaccineTable4Symptom(symptom),
+                minimumInputLength: 4
             });
     }
 
-    static #initializeSymptomSelectElement({ symptomSelectElement, onSymptomSelected }) {
-        symptomSelectElement.select2({ minimumInputLength: 4 });
-        symptomSelectElement.on(
+    static #configureVaccine({ vaccineSelectElement, prrBySymptomTableElement }) {
+        const prrBySymptomTableView = new PrrBySymptomTableView(prrBySymptomTableElement);
+        PageInitializer.#initializeSelectElement(
+            {
+                selectElement: vaccineSelectElement,
+                onValueSelected: vaccine => prrBySymptomTableView.displayPrrBySymptomTable4Vaccine(vaccine),
+                minimumInputLength: 0
+            });
+    }
+
+    static #initializeSelectElement({ selectElement, onValueSelected, minimumInputLength }) {
+        selectElement.select2({ minimumInputLength: minimumInputLength });
+        selectElement.on(
             'select2:select',
             function (event) {
-                const symptom = event.params.data.id;
-                onSymptomSelected(symptom);
+                const value = event.params.data.id;
+                onValueSelected(value);
             });
-        symptomSelectElement.select2('open');
     }
 }
diff --git a/docs/SymptomsCausedByVaccines/js/PrrBySymptomTable.js b/docs/SymptomsCausedByVaccines/js/PrrBySymptomTable.js
new file mode 100644
index 00000000000..4543271adb0
--- /dev/null
+++ b/docs/SymptomsCausedByVaccines/js/PrrBySymptomTable.js
@@ -0,0 +1,72 @@
+class PrrBySymptomTable {
+
+    #tableElement;
+    #table;
+    #sumPrrs;
+
+    constructor(tableElement) {
+        this.#tableElement = tableElement;
+    }
+
+    initialize() {
+        this.#table = this.#createEmptyTable();
+    }
+
+    display(prrBySymptom) {
+        const symptom_prr_pairs = Object.entries(prrBySymptom);
+        this.#setTableRows(symptom_prr_pairs);
+    }
+
+    #createEmptyTable() {
+        return this.#tableElement.DataTable(
+            {
+                search:
+                {
+                    return: false
+                },
+                processing: true,
+                deferRender: true,
+                order: [[this.#getColumnIndex('Proportional Reporting Ratio > 1'), "desc"]],
+                columnDefs:
+                    [
+                        {
+                            searchable: false,
+                            targets: [this.#getColumnIndex('Proportional Reporting Ratio > 1')]
+                        },
+                        {
+                            render: prr =>
+                                NumberWithBarElementFactory
+                                    .createNumberWithBarElement(
+                                        {
+                                            number: prr,
+                                            barLenInPercent: prr / this.#sumPrrs * 100
+                                        })
+                                    .outerHTML,
+                            targets: [this.#getColumnIndex('Proportional Reporting Ratio > 1')]
+                        }
+                    ]
+            });
+    }
+
+    #getColumnIndex(columnName) {
+        switch (columnName) {
+            case 'Symptom':
+                return 0;
+            case 'Proportional Reporting Ratio > 1':
+                return 1;
+        }
+    }
+
+    #setTableRows(symptom_prr_pairs) {
+        this.#sumPrrs = this.#getSumPrrs(symptom_prr_pairs);
+        this.#table
+            .clear()
+            .rows.add(symptom_prr_pairs)
+            .draw();
+    }
+
+    #getSumPrrs(symptom_prr_pairs) {
+        const prrs = symptom_prr_pairs.map(symptom_prr_pair => symptom_prr_pair[1])
+        return Utils.sum(prrs);
+    }
+}
diff --git a/docs/SymptomsCausedByVaccines/js/PrrBySymptomTableView.js b/docs/SymptomsCausedByVaccines/js/PrrBySymptomTableView.js
new file mode 100644
index 00000000000..663d59ac19b
--- /dev/null
+++ b/docs/SymptomsCausedByVaccines/js/PrrBySymptomTableView.js
@@ -0,0 +1,15 @@
+class PrrBySymptomTableView {
+
+    #prrBySymptomTable;
+
+    constructor(prrBySymptomTableElement) {
+        this.#prrBySymptomTable = new PrrBySymptomTable(prrBySymptomTableElement);
+        this.#prrBySymptomTable.initialize();
+    }
+
+    displayPrrBySymptomTable4Vaccine(vaccine) {
+        PrrByVaccineProvider
+            .getPrrBySymptom(vaccine)
+            .then(prrBySymptom => this.#prrBySymptomTable.display(prrBySymptom));
+    }
+}
diff --git a/docs/SymptomsCausedByVaccines/js/PrrByVaccineProvider.js b/docs/SymptomsCausedByVaccines/js/PrrByVaccineProvider.js
index e76c9443426..2bf949c38d2 100644
--- a/docs/SymptomsCausedByVaccines/js/PrrByVaccineProvider.js
+++ b/docs/SymptomsCausedByVaccines/js/PrrByVaccineProvider.js
@@ -3,4 +3,8 @@ class PrrByVaccineProvider {
     static getPrrByVaccine(symptom) {
         return fetch(`../data/ProportionalReportingRatios/symptoms/${symptom}.json`).then(response => response.json());
     }
+
+    static getPrrBySymptom(vaccine) {
+        return fetch(`../data/ProportionalReportingRatios/vaccines/${vaccine}.json`).then(response => response.json());
+    }
 }
\ No newline at end of file
diff --git a/src/HowBadIsMyBatch.ipynb b/src/HowBadIsMyBatch.ipynb
index af5428d8deb..9d0073b4d29 100644
--- a/src/HowBadIsMyBatch.ipynb
+++ b/src/HowBadIsMyBatch.ipynb
@@ -439,8 +439,8 @@
    "outputs": [],
    "source": [
     "from SymptomsCausedByVaccines.HtmlUpdater import updateHtmlFile\n",
-    "from src.SymptomsCausedByVaccines.PrrSeriesFactory import PrrSeriesFactory\n",
-    "from src.SymptomsCausedByVaccines.PrrSeriesTransformer import PrrSeriesTransformer\n",
+    "from SymptomsCausedByVaccines.PrrSeriesFactory import PrrSeriesFactory\n",
+    "from SymptomsCausedByVaccines.PrrSeriesTransformer import PrrSeriesTransformer\n",
     "from SymptomsCausedByVaccines.ProportionalReportingRatiosPersister import saveProportionalReportingRatios\n",
     "import os\n",
     "import pandas as pd"
@@ -537,6 +537,7 @@
    "source": [
     "updateHtmlFile(\n",
     "    symptoms = list(prrByVaccineAndSymptom.columns),\n",
+    "    vaccines = list(prrByVaccineAndSymptom.index),\n",
     "    htmlFile = \"../docs/SymptomsCausedByVaccines/index.html\")"
    ]
   }
diff --git a/src/SymptomsCausedByVaccines/HtmlUpdater.py b/src/SymptomsCausedByVaccines/HtmlUpdater.py
index f703bbc8502..2666a4d449b 100644
--- a/src/SymptomsCausedByVaccines/HtmlUpdater.py
+++ b/src/SymptomsCausedByVaccines/HtmlUpdater.py
@@ -1,16 +1,21 @@
 from bs4 import BeautifulSoup
 from HtmlTransformerUtil import HtmlTransformerUtil
 from DateProvider import DateProvider
-from SymptomsCausedByVaccines.HtmlUtils import getSymptomOptions
+from SymptomsCausedByVaccines.HtmlUtils import getSymptomOptions, getVaccineOptions
 from SymptomsCausedByVaccines.OptionsSetter import OptionsSetter
 
 
-def updateHtmlFile(symptoms, htmlFile):    
+def updateHtmlFile(symptoms, vaccines, htmlFile):
     _saveOptions(
         options = getSymptomOptions(symptoms),
         htmlFile = htmlFile,
         selectElementId = 'symptomSelect')
     
+    _saveOptions(
+        options = getVaccineOptions(vaccines),
+        htmlFile = htmlFile,
+        selectElementId = 'vaccineSelect')
+
 def _saveOptions(options, htmlFile, selectElementId):
     HtmlTransformerUtil().applySoupTransformerToFile(
         file=htmlFile,