From 3a77fc63b3fff3d606ef93b968f21ef7c71b6cc8 Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Sat, 15 Apr 2023 17:15:03 +0200
Subject: [PATCH] refactoring

---
 docs/BatchCodeDetailsView.js          | 16 ++++++++--------
 docs/BatchcodeCombinationSelection.js |  6 ++----
 docs/batchCodeTable.html              | 17 ++++++++---------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/docs/BatchCodeDetailsView.js b/docs/BatchCodeDetailsView.js
index 82ad95bad7b..39d9bb8d392 100644
--- a/docs/BatchCodeDetailsView.js
+++ b/docs/BatchCodeDetailsView.js
@@ -14,7 +14,6 @@ class BatchCodeDetailsView {
     }
 
     #loadHistoDescrs(batchcode) {
-        UIUtils.clear(this.#uiContainer);
         const loadingText = document.createTextNode('Loading...');
         this.#uiContainer.appendChild(loadingText);
         return HistoDescrsProvider
@@ -68,13 +67,14 @@ class BatchCodeDetailsView {
     }
 
     #displaySelectBatchcodeCombination(histograms, histogramChartView, chartWithSlider) {
-        const selectBatchcodeCombination =
-            BatchcodeCombinationSelection.getSelectBatchcodeCombination(
-                {
-                    histograms: histograms,
-                    onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider)
-                });
-        this.#uiContainer.appendChild(selectBatchcodeCombination);
+        const selectBatchcodeCombinationElement = this.#uiContainer.querySelector("#selectBatchcodeCombination");
+        BatchcodeCombinationSelection.configureSelectBatchcodeCombinationElement(
+            {
+                selectBatchcodeCombinationElement: selectBatchcodeCombinationElement,
+                histograms: histograms,
+                onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider)
+            });
+        this.#uiContainer.appendChild(selectBatchcodeCombinationElement);
     }
 
     #displayHistogram(histoDescr, histogramChartView, chartWithSlider) {
diff --git a/docs/BatchcodeCombinationSelection.js b/docs/BatchcodeCombinationSelection.js
index 6a065e5403e..8f7cf44f596 100644
--- a/docs/BatchcodeCombinationSelection.js
+++ b/docs/BatchcodeCombinationSelection.js
@@ -1,8 +1,7 @@
 class BatchcodeCombinationSelection {
 
-    static getSelectBatchcodeCombination({ histograms, onSelect }) {
-        const selectBatchcodeCombination = UIUtils.instantiateTemplate('template-selectBatchcodeCombination');
-        const batchcodesSelect = selectBatchcodeCombination.querySelector('#batchcodesSelect');
+    static configureSelectBatchcodeCombinationElement({ selectBatchcodeCombinationElement, histograms, onSelect }) {
+        const batchcodesSelect = selectBatchcodeCombinationElement.querySelector('#batchcodesSelect');
         this.#addBatchcodeCombinationOptions(batchcodesSelect, histograms);
         batchcodesSelect.addEventListener(
             'change',
@@ -10,7 +9,6 @@ class BatchcodeCombinationSelection {
                 const histoDescr = histograms[event.target.value];
                 onSelect(histoDescr);
             });
-        return selectBatchcodeCombination;
     }
 
     static #addBatchcodeCombinationOptions(batchcodesSelect, histograms) {
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 1178e116b82..51492cb05f7 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -49762,7 +49762,14 @@
       <option value="Ø94F21A">Ø94F21A</option>
     </select>
   </p>
-  <div id="batchCodeDetails" style="width: 50%"></div>
+  <div id="batchCodeDetails" style="width: 50%">
+    <div id="selectBatchcodeCombination">
+      <label>Select batchcode combination:
+        <select id="batchcodesSelect" name="batchcodes">
+        </select>
+      </label>
+    </div>
+  </div>
   <p><b>Data Source:</b>
     <a href="https://vaers.hhs.gov/data/datasets.html" target="_blank">Vaccine Adverse Event Reporting System
       (VAERS)</a>
@@ -49773,14 +49780,6 @@
   <template id="template-canvas">
     <canvas></canvas>
   </template>
-  <template id="template-selectBatchcodeCombination">
-    <div>
-      <label>Select batchcode combination:
-        <select id="batchcodesSelect" name="batchcodes">
-        </select>
-      </label>
-    </div>
-  </template>
   <template id="template-chartWithSlider">
     <div class="chartWithSlider">
       <div class="chartContainer">