From 915066ed14e6915c0b598ccca48b39ab3a23701a Mon Sep 17 00:00:00 2001
From: Frank Knoll <Knoll_Frank@web.de>
Date: Wed, 10 Jul 2024 23:45:21 +0200
Subject: [PATCH] starting Safety Signal (All drugs)

---
 docs/SymptomsCausedByDrugs/index.html         | 229 ++++++++++++++++++
 .../js/PageInitializer.js                     |  37 +++
 .../js/PrrByKey2CsvConverter.js               |  41 ++++
 .../SymptomsCausedByDrugs/js/PrrByKeyTable.js | 109 +++++++++
 .../js/PrrByKeyTableView.js                   |  44 ++++
 .../js/PrrBySymptomTableView.js               |  25 ++
 .../js/PrrByVaccineProvider.js                |  10 +
 .../js/PrrByVaccineTableView.js               |  25 ++
 src/HowBadIsMyBatch.ipynb                     | 139 +++++++++++
 src/SymptomsCausedByVaccines/HtmlUtils.py     |   4 +-
 10 files changed, 662 insertions(+), 1 deletion(-)
 create mode 100644 docs/SymptomsCausedByDrugs/index.html
 create mode 100644 docs/SymptomsCausedByDrugs/js/PageInitializer.js
 create mode 100644 docs/SymptomsCausedByDrugs/js/PrrByKey2CsvConverter.js
 create mode 100644 docs/SymptomsCausedByDrugs/js/PrrByKeyTable.js
 create mode 100644 docs/SymptomsCausedByDrugs/js/PrrByKeyTableView.js
 create mode 100644 docs/SymptomsCausedByDrugs/js/PrrBySymptomTableView.js
 create mode 100644 docs/SymptomsCausedByDrugs/js/PrrByVaccineProvider.js
 create mode 100644 docs/SymptomsCausedByDrugs/js/PrrByVaccineTableView.js
diff --git a/docs/SymptomsCausedByDrugs/index.html b/docs/SymptomsCausedByDrugs/index.html
new file mode 100644
index 00000000000..87fbd2148b0
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+  <!-- Meta, title, CSS, favicons, etc. -->
+  <meta charset="utf-8" />
+  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Safety Signal (All drugs)</title>
+  <!-- Google tag (gtag.js) -->
+  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'G-ERHYDH4P64');
+  </script>
+  <!-- Bootstrap -->
+  <link href="../gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
+  <!-- Font Awesome -->
+  <link href="../gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+  <!-- Custom Theme Style -->
+  <link href="../gentelella/build/css/custom.css" rel="stylesheet" />
+  <link href="../forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
+  <script src="../Utils.js"></script>
+  <script src="../UIUtils.js"></script>
+  <script src="../NumberWithBarElementFactory.js"></script>
+  <script src="./js/PrrByKey2CsvConverter.js"></script>
+  <script src="./js/PageInitializer.js"></script>
+  <script src="./js/PrrByVaccineProvider.js"></script>
+  <script src="./js/PrrByKeyTable.js"></script>
+  <script src="./js/PrrByKeyTableView.js"></script>
+  <script src="./js/PrrByVaccineTableView.js"></script>
+  <script src="./js/PrrBySymptomTableView.js"></script>
+  <script>
+    document.addEventListener(
+      "DOMContentLoaded",
+      event => {
+        PageInitializer.initializePage(
+          {
+            symptom: {
+              symptomSelectElement: $('#symptomSelect'),
+              prrByVaccineTableElement: $('#prrByVaccineTable'),
+              downloadPrrByVaccineTableButton: document.querySelector("#downloadPrrByVaccineTable")
+            },
+            vaccine: {
+              vaccineSelectElement: $('#vaccineSelect'),
+              prrBySymptomTableElement: $('#prrBySymptomTable'),
+              downloadPrrBySymptomTableButton: document.querySelector("#downloadPrrBySymptomTable")
+            }
+          }
+        );
+      });
+  </script>
+</head>
+
+<body class="nav-md">
+  <div class="container body">
+    <div class="main_container">
+      <!-- top navigation -->
+      <div class="top_nav">
+      </div>
+      <!-- top navigation -->
+      <!-- page content -->
+      <div class="right_col" role="main">
+        <div>
+          <div class="page-title">
+            <div class="title_left">
+              <h1>Safety Signal (All drugs)</h1>
+              <div class="alert alert-danger alert-dismissible" role="alert">
+                <button aria-label="Close" class="close" data-dismiss="alert" type="button">
+                  <span aria-hidden="true">×</span>
+                </button>
+                Many traditional vaccines are now being switched to mRNA versions. mRNA vaccines such as COVID-19
+                vaccine generate strong safety signals and are associated with clotting, heart damage, cancer
+                progression, immune suppression and significant excess mortality.
+              </div>
+            </div>
+          </div>
+          <div class="clearfix"></div>
+          <div class="row">
+            <div class="col-xs-12 col-sm-6">
+              <div class="x_panel">
+                <div class="x_title">
+                  <h3>Worst Vaccines</h3>
+                  <div class="clearfix"></div>
+                </div>
+                <div class="x_content">
+                  <div style="margin-bottom: 20px;">
+                    <label>Select Symptom:</label>
+                    <select id="symptomSelect" name="symptom">
+                      <option disabled="" hidden="" selected="" value="">Select Symptom</option>
+                      <option value="Abdominal pain lower ">Abdominal pain lower </option>
+                      <option value="Abdominal pain upper ">Abdominal pain upper </option>
+                      <option value="Accidental exposure to product ">Accidental exposure to product </option>
+                      <option value="Agitation ">Agitation </option>
+                      <option value="Anal cancer ">Anal cancer </option>
+                      <option value="Bowel movement irregularity ">Bowel movement irregularity </option>
+                      <option value="Carcinoembryonic antigen increased ">Carcinoembryonic antigen increased </option>
+                      <option value="Chest discomfort ">Chest discomfort </option>
+                      <option value="Colon cancer ">Colon cancer </option>
+                      <option value="Completed suicide ">Completed suicide </option>
+                      <option value="Confusional state ">Confusional state </option>
+                      <option value="Constipation ">Constipation </option>
+                      <option value="Diarrhoea ">Diarrhoea </option>
+                      <option value="Drug abuse ">Drug abuse </option>
+                      <option value="Dysphagia ">Dysphagia </option>
+                      <option value="Eye pruritus ">Eye pruritus </option>
+                      <option value="Gastrointestinal disorder ">Gastrointestinal disorder </option>
+                      <option value="Gastrointestinal tract mucosal pigmentation ">Gastrointestinal tract mucosal
+                        pigmentation </option>
+                      <option value="Haematochezia ">Haematochezia </option>
+                      <option value="Haemorrhoids ">Haemorrhoids </option>
+                      <option value="Hallucination, visual ">Hallucination, visual </option>
+                      <option value="Insomnia ">Insomnia </option>
+                      <option value="Intentional overdose ">Intentional overdose </option>
+                      <option value="Interstitial lung disease ">Interstitial lung disease </option>
+                      <option value="Nausea ">Nausea </option>
+                      <option value="Product use in unapproved indication ">Product use in unapproved indication
+                      </option>
+                      <option value="Rectal cancer ">Rectal cancer </option>
+                      <option value="Rectosigmoid cancer ">Rectosigmoid cancer </option>
+                      <option value="Sepsis ">Sepsis </option>
+                      <option value="Somnolence ">Somnolence </option>
+                      <option value="Swelling ">Swelling </option>
+                      <option value="Syncope ">Syncope </option>
+                      <option value="Thrombocytopenic purpura ">Thrombocytopenic purpura </option>
+                      <option value="Tonic convulsion ">Tonic convulsion </option>
+                      <option value="Urinary tract infection ">Urinary tract infection </option>
+                      <option value="Vomiting ">Vomiting </option>
+                      <option value="Wrong technique in product usage process ">Wrong technique in product usage process
+                      </option>
+                    </select>
+                  </div>
+                  <table class="display" id="prrByVaccineTable">
+                    <thead>
+                      <tr>
+                        <th>Vaccine</th>
+                        <th>Lower Confidence Limit of Proportional Reporting Ratio</th>
+                      </tr>
+                    </thead>
+                  </table>
+                  <button class="btn downloadButton" id="downloadPrrByVaccineTable">Download</button>
+                </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='"A BUNCH OF OTHER MEDICATIONS" '>"A BUNCH OF OTHER MEDICATIONS" </option>
+                      <option value='"BETA BLOCKER" '>"BETA BLOCKER" </option>
+                      <option value='"BLOOD PRESSURE" MEDICATION '>"BLOOD PRESSURE" MEDICATION </option>
+                      <option
+                        value="&quot;CHLORO-2&quot;&quot; PHENYL-3' METHYL-5' ISOXAZOLYL-(1') PENICILLINE,SEL DE BENZATHINE&quot; ">
+                        "CHLORO-2"" PHENYL-3' METHYL-5' ISOXAZOLYL-(1') PENICILLINE,SEL DE BENZATHINE" </option>
+                      <option value='"DIPHENHYDRAMINE CLEANER (ANIONIC/NONIONIC)" '>"DIPHENHYDRAMINE CLEANER
+                        (ANIONIC/NONIONIC)" </option>
+                      <option value='"DRAIN CLEANER" '>"DRAIN CLEANER" </option>
+                      <option value='"DRUG, UNKNOWN" '>"DRUG, UNKNOWN" </option>
+                      <option value="&quot;FRED'S LAXATIVE&quot; ">"FRED'S LAXATIVE" </option>
+                      <option value='"GENERIC COLD ACID" '>"GENERIC COLD ACID" </option>
+                    </select>
+                  </div>
+                  <table class="display" id="prrBySymptomTable">
+                    <thead>
+                      <tr>
+                        <th>Symptom</th>
+                        <th>Lower Confidence Limit of Proportional Reporting Ratio &gt;= 2</th>
+                      </tr>
+                    </thead>
+                  </table>
+                  <button class="btn downloadButton" id="downloadPrrBySymptomTable">Download</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="clearfix"></div>
+        </div>
+      </div>
+    </div>
+    <!-- page content -->
+    <!-- footer content -->
+    <footer>
+      <p>
+        <a href="https://howbad.info/safety_signal_paper-x.pdf" target="_blank">Data Source <i aria-hidden="true"
+            class="fa fa-external-link"></i>
+        </a>
+      </p>
+      <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch" target="_blank">Fork me on
+          GitHub <i aria-hidden="true" class="fa fa-external-link"></i>
+        </a></span>
+      <div class="clearfix"></div>
+    </footer>
+  </div>
+  <template id="template-number-with-bar">
+    <div>
+      <div class="number"></div>
+      <div class="bar"></div>
+    </div>
+  </template>
+  <!-- jQuery -->
+  <script src="../gentelella/vendors/jquery/dist/jquery.min.js"></script>
+  <!-- Bootstrap -->
+  <script src="../gentelella/vendors/bootstrap/dist/js/bootstrap.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 src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.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/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js "></script>
+  <!-- FastClick -->
+  <script src="../gentelella/vendors/fastclick/lib/fastclick.js"></script>
+  <!-- Custom Theme Scripts -->
+  <script src="../gentelella/build/js/custom.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/SymptomsCausedByDrugs/js/PageInitializer.js b/docs/SymptomsCausedByDrugs/js/PageInitializer.js
new file mode 100644
index 00000000000..914e5b52283
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/js/PageInitializer.js
@@ -0,0 +1,37 @@
+class PageInitializer {
+
+    static initializePage({ symptom, vaccine }) {
+        PageInitializer.#configureSymptom(symptom);
+        PageInitializer.#configureVaccine(vaccine);
+    }
+
+    static #configureSymptom({ symptomSelectElement, prrByVaccineTableElement, downloadPrrByVaccineTableButton }) {
+        const prrByVaccineTableView = new PrrByVaccineTableView(prrByVaccineTableElement, downloadPrrByVaccineTableButton);
+        PageInitializer.#initializeSelectElement(
+            {
+                selectElement: symptomSelectElement,
+                onValueSelected: symptom => prrByVaccineTableView.displayPrrByVaccineTable4Symptom(symptom),
+                minimumInputLength: 4
+            });
+    }
+
+    static #configureVaccine({ vaccineSelectElement, prrBySymptomTableElement, downloadPrrBySymptomTableButton }) {
+        const prrBySymptomTableView = new PrrBySymptomTableView(prrBySymptomTableElement, downloadPrrBySymptomTableButton);
+        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 value = event.params.data.id;
+                onValueSelected(value);
+            });
+    }
+}
diff --git a/docs/SymptomsCausedByDrugs/js/PrrByKey2CsvConverter.js b/docs/SymptomsCausedByDrugs/js/PrrByKey2CsvConverter.js
new file mode 100644
index 00000000000..65272b118b4
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/js/PrrByKey2CsvConverter.js
@@ -0,0 +1,41 @@
+class PrrByKey2CsvConverter {
+
+    static convertPrrByKey2Csv(
+        {
+            heading,
+            columns: { keyColumn, prrColumn },
+            prrByKey
+        }
+    ) {
+        return heading + '\n\n' +
+            PrrByKey2CsvConverter.#convert2Csv(
+                {
+                    prrByKey: PrrByKey2CsvConverter.#quoteKeys(prrByKey),
+                    keyColumn: PrrByKey2CsvConverter.#quote(keyColumn),
+                    prrColumn: PrrByKey2CsvConverter.#quote(prrColumn)
+                });
+    }
+
+    static #quoteKeys(prrByKey) {
+        return Object.fromEntries(
+            Object
+                .entries(prrByKey)
+                .map(([key, prr]) => [PrrByKey2CsvConverter.#quote(key), prr]))
+    }
+
+    static #quote(str) {
+        return '"' + str + '"';
+    }
+
+    static #convert2Csv({ prrByKey, keyColumn, prrColumn }) {
+        const header = `${keyColumn},${prrColumn}`;
+        return `${header}\n${PrrByKey2CsvConverter.#convertDict2Csv(prrByKey)}`;
+    }
+
+    static #convertDict2Csv(dict) {
+        return Object
+            .entries(dict)
+            .map(([key, value]) => `${key},${value}`)
+            .join('\n');
+    }
+}
diff --git a/docs/SymptomsCausedByDrugs/js/PrrByKeyTable.js b/docs/SymptomsCausedByDrugs/js/PrrByKeyTable.js
new file mode 100644
index 00000000000..ee0ac57e839
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/js/PrrByKeyTable.js
@@ -0,0 +1,109 @@
+class PrrByKeyTable {
+
+    #tableElement;
+    #table;
+    #sumPrrs;
+    #prrByKey;
+    #keyColumnName;
+    #prrColumnName;
+    #shallMarkRowIfPrrTooHigh;
+
+    constructor({ tableElement, keyColumnName, prrColumnName, shallMarkRowIfPrrTooHigh }) {
+        this.#tableElement = tableElement;
+        this.#keyColumnName = keyColumnName;
+        this.#prrColumnName = prrColumnName;
+        this.#shallMarkRowIfPrrTooHigh = shallMarkRowIfPrrTooHigh;
+    }
+
+    initialize() {
+        this.#table = this.#createEmptyTable();
+    }
+
+    display(prrByKey) {
+        this.#prrByKey = prrByKey;
+        const key_prr_pairs = Object.entries(prrByKey);
+        this.#setTableRows(key_prr_pairs);
+    }
+
+    getDisplayedTableAsCsv(heading) {
+        return PrrByKey2CsvConverter.convertPrrByKey2Csv(
+            {
+                heading: heading,
+                columns: {
+                    keyColumn: this.#keyColumnName,
+                    prrColumn: this.#prrColumnName
+                },
+                prrByKey: this.#prrByKey
+            });
+    }
+
+    #createEmptyTable() {
+        return this.#tableElement.DataTable(
+            {
+                search:
+                {
+                    return: false
+                },
+                processing: true,
+                deferRender: true,
+                order: [[this.#getColumnIndex(this.#prrColumnName), "desc"]],
+                columnDefs:
+                    [
+                        {
+                            searchable: false,
+                            targets: [this.#getColumnIndex(this.#prrColumnName)]
+                        },
+                        {
+                            render: (prr, type, row, meta) =>
+                                (type === 'sort' || type === 'type') ?
+                                    parseFloat(prr) :
+                                    NumberWithBarElementFactory
+                                        .createNumberWithBarElement(
+                                            {
+                                                number: prr,
+                                                barLenInPercent: prr / this.#sumPrrs * 100
+                                            })
+                                        .outerHTML,
+                            targets: [this.#getColumnIndex(this.#prrColumnName)]
+                        }
+                    ],
+                createdRow: (row, data) => {
+                    if (this.#shallMarkRowIfPrrTooHigh) {
+                        this.#markRowIfPrrTooHigh(
+                            {
+                                prr: data[this.#getColumnIndex(this.#prrColumnName)],
+                                row: row
+                            });
+                    }
+                }
+            });
+    }
+
+    #markRowIfPrrTooHigh({ prr, row }) {
+        if (prr >= 2.0) {
+            $(row).addClass('prrTooHigh');
+        }
+    }
+
+    #getColumnIndex(columnName) {
+        switch (columnName) {
+            case this.#keyColumnName:
+                return 0;
+            case this.#prrColumnName:
+                return 1;
+        }
+    }
+
+    #setTableRows(key_prr_pairs) {
+        this.#sumPrrs = this.#getSumPrrs(key_prr_pairs);
+        this.#table
+            .clear()
+            .rows.add(key_prr_pairs)
+            .draw();
+    }
+
+    #getSumPrrs(key_prr_pairs) {
+        const prrs = key_prr_pairs.map(key_prr_pair => key_prr_pair[1])
+        return Utils.sum(prrs);
+    }
+}
diff --git a/docs/SymptomsCausedByDrugs/js/PrrByKeyTableView.js b/docs/SymptomsCausedByDrugs/js/PrrByKeyTableView.js
new file mode 100644
index 00000000000..9694a94125b
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/js/PrrByKeyTableView.js
@@ -0,0 +1,44 @@
+class PrrByKeyTableView {
+
+    #prrByKeyTable;
+    #downloadPrrByKeyTableButton;
+    #value;
+    #valueName;
+    #prrByKeyProvider;
+
+    constructor(prrByKeyTable, downloadPrrByKeyTableButton, valueName, prrByKeyProvider) {
+        this.#prrByKeyTable = prrByKeyTable;
+        this.#prrByKeyTable.initialize();
+        this.#initializeButton(downloadPrrByKeyTableButton);
+        this.#valueName = valueName;
+        this.#prrByKeyProvider = prrByKeyProvider;
+    }
+
+    displayPrrByKeyTable4Value(value) {
+        UIUtils.disableButton(this.#downloadPrrByKeyTableButton);
+        this.#prrByKeyProvider(value)
+            .then(prrByKey => {
+                this.#value = value;
+                this.#prrByKeyTable.display(prrByKey);
+                UIUtils.enableButton(this.#downloadPrrByKeyTableButton);
+            });
+    }
+
+    #initializeButton(downloadPrrByKeyTableButton) {
+        this.#downloadPrrByKeyTableButton = downloadPrrByKeyTableButton;
+        UIUtils.disableButton(downloadPrrByKeyTableButton);
+        downloadPrrByKeyTableButton.addEventListener(
+            'click',
+            () => this.#downloadPrrByKey())
+    }
+
+    #downloadPrrByKey() {
+        UIUtils.downloadUrlAsFilename(
+            window.URL.createObjectURL(
+                new Blob(
+                    [this.#prrByKeyTable.getDisplayedTableAsCsv(`# ${this.#valueName}: ${this.#value}`)],
+                    { type: 'text/csv' })),
+            this.#value
+        );
+    }
+}
diff --git a/docs/SymptomsCausedByDrugs/js/PrrBySymptomTableView.js b/docs/SymptomsCausedByDrugs/js/PrrBySymptomTableView.js
new file mode 100644
index 00000000000..e41f4d3c998
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/js/PrrBySymptomTableView.js
@@ -0,0 +1,25 @@
+class PrrBySymptomTableView {
+
+    #delegate;
+
+    constructor(prrBySymptomTableElement, downloadPrrBySymptomTableButton) {
+        this.#delegate = new PrrByKeyTableView(
+            this.#createPrrBySymptomTable(prrBySymptomTableElement),
+            downloadPrrBySymptomTableButton,
+            'Vaccine',
+            PrrByVaccineProvider.getPrrBySymptom);
+    }
+
+    displayPrrBySymptomTable4Vaccine(vaccine) {
+        this.#delegate.displayPrrByKeyTable4Value(vaccine);
+    }
+
+    #createPrrBySymptomTable(tableElement) {
+        return new PrrByKeyTable({
+            tableElement: tableElement,
+            keyColumnName: 'Symptom',
+            prrColumnName: 'Lower Confidence Limit of Proportional Reporting Ratio >= 2',
+            shallMarkRowIfPrrTooHigh: false
+        });
+    }
+}
diff --git a/docs/SymptomsCausedByDrugs/js/PrrByVaccineProvider.js b/docs/SymptomsCausedByDrugs/js/PrrByVaccineProvider.js
new file mode 100644
index 00000000000..5f7cff61a54
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/js/PrrByVaccineProvider.js
@@ -0,0 +1,10 @@
+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/docs/SymptomsCausedByDrugs/js/PrrByVaccineTableView.js b/docs/SymptomsCausedByDrugs/js/PrrByVaccineTableView.js
new file mode 100644
index 00000000000..bd55ea1792e
--- /dev/null
+++ b/docs/SymptomsCausedByDrugs/js/PrrByVaccineTableView.js
@@ -0,0 +1,25 @@
+class PrrByVaccineTableView {
+
+    #delegate;
+
+    constructor(prrByVaccineTableElement, downloadPrrByVaccineTableButton) {
+        this.#delegate = new PrrByKeyTableView(
+            this.#createPrrByVaccineTable(prrByVaccineTableElement),
+            downloadPrrByVaccineTableButton,
+            'Symptom',
+            PrrByVaccineProvider.getPrrByVaccine);
+    }
+
+    displayPrrByVaccineTable4Symptom(symptom) {
+        this.#delegate.displayPrrByKeyTable4Value(symptom);
+    }
+
+    #createPrrByVaccineTable(tableElement) {
+        return new PrrByKeyTable({
+            tableElement: tableElement,
+            keyColumnName: 'Vaccine',
+            prrColumnName: 'Lower Confidence Limit of Proportional Reporting Ratio',
+            shallMarkRowIfPrrTooHigh: true
+        });
+    }
+}
diff --git a/src/HowBadIsMyBatch.ipynb b/src/HowBadIsMyBatch.ipynb
index 2e80d1ac257..3cda82b3f45 100644
--- a/src/HowBadIsMyBatch.ipynb
+++ b/src/HowBadIsMyBatch.ipynb
@@ -439,6 +439,145 @@
     "    lastUpdatedElementId = 'last_updated')"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "6c302a04",
+   "metadata": {},
+   "source": [
+    "# Symptoms caused by Drugs (EudraVigilance)\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fb02ce7c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from SymptomsCausedByVaccines.DataFrameFilter import DataFrameFilter\n",
+    "from SymptomsCausedByVaccines.HtmlUpdater import updateHtmlFile, updateHtmlFile4SymptomsCausedByCOVIDLots\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"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4ad05656",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "prrByVaccineAndSymptom = pd.read_csv(\n",
+    "    'data/prrByDrugAndSymptom-EudraVigilance-10.csv',\n",
+    "    index_col = 'DRUG')\n",
+    "prrByVaccineAndSymptom"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "7aed1621",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "prrByVaccineAndSymptom = DataFrameFilter.withoutZeroRowsAndZeroColumns(prrByVaccineAndSymptom)\n",
+    "prrByVaccineAndSymptom"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "588aaa2b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "prrByVaccineBySymptom = PrrSeriesFactory.getPrrByVaccineBySymptom(prrByVaccineAndSymptom)\n",
+    "prrByVaccineBySymptom"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "379d9730",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "prrBySymptomByVaccine = PrrSeriesFactory.getPrrBySymptomByVaccine(prrByVaccineAndSymptom)\n",
+    "prrBySymptomByVaccine"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0cfd4c66",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "prrByVaccineBySymptomWithoutZeroPrrs = PrrSeriesTransformer.filterByNonZeroPrrs(prrByVaccineBySymptom)\n",
+    "prrByVaccineBySymptomWithoutZeroPrrs"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "86da9cb7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "prrBySymptomByVaccineWithHighPrrs = PrrSeriesTransformer.filterPrrs(prrBySymptomByVaccine, lambda prr: prr >= 2)\n",
+    "prrBySymptomByVaccineWithHighPrrs"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b41b60c7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "webAppBaseDir = os.getcwd() + '/../docs/SymptomsCausedByDrugs'"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "26f72e75",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "saveProportionalReportingRatios(\n",
+    "    prrByVaccineBySymptomWithoutZeroPrrs,\n",
+    "    directory = os.path.normpath(webAppBaseDir + '/data/ProportionalReportingRatios/symptoms'))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5bfdcbdd",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "saveProportionalReportingRatios(\n",
+    "    prrBySymptomByVaccineWithHighPrrs,\n",
+    "    directory = os.path.normpath(webAppBaseDir + '/data/ProportionalReportingRatios/vaccines'))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "cc97b8d4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "updateHtmlFile(\n",
+    "    symptoms = list(prrByVaccineAndSymptom.columns),\n",
+    "    vaccines = list(prrByVaccineAndSymptom.index),\n",
+    "    htmlFile = os.path.normpath(webAppBaseDir + '/index.html'))"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "3e47c62c",
diff --git a/src/SymptomsCausedByVaccines/HtmlUtils.py b/src/SymptomsCausedByVaccines/HtmlUtils.py
index 3a6edaf4795..cfff42d3c85 100644
--- a/src/SymptomsCausedByVaccines/HtmlUtils.py
+++ b/src/SymptomsCausedByVaccines/HtmlUtils.py
@@ -1,3 +1,5 @@
+import html
+
 def getVaccineOptions(vaccines, defaultOptionText):
     return _getOptionsWithDefaultOption(defaultOptionText = defaultOptionText, values = vaccines)
 
@@ -15,4 +17,4 @@ def _getOptions(values):
 
 
 def _getOption(value):
-    return '<option value="{value}">{value}</option>'.format(value=value)
+    return '<option value="{value}">{value}</option>'.format(value = html.escape(value))
