diff --git a/docs/HistogramView.js b/docs/HistogramView.js
index f38aa640d3b..0e6f9dcea5a 100644
--- a/docs/HistogramView.js
+++ b/docs/HistogramView.js
@@ -35,33 +35,15 @@ class HistogramView {
     }
 
     #displaySelectBatchcodeCombination(histograms, histogramChartView, chartWithSlider) {
-        const selectBatchcodeCombination = UIUtils.instantiateTemplate('template-selectBatchcodeCombination');
-        const batchcodesSelect = selectBatchcodeCombination.querySelector('#batchcodesSelect');
-        this.#addBatchcodeCombinationOptions(batchcodesSelect, histograms);
-        batchcodesSelect.addEventListener(
-            'change',
-            event => {
-                const histoDescr = histograms[event.target.value];
-                this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider);
-            });
+        const selectBatchcodeCombination =
+            new BatchcodeCombinationSelection().getSelectBatchcodeCombination(
+                {
+                    histograms: histograms,
+                    onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider)
+                });
         this.#uiContainer.appendChild(selectBatchcodeCombination);
     }
 
-    #addBatchcodeCombinationOptions(batchcodesSelect, histograms) {
-        this.#getBatchcodeCombinationOptions(histograms).forEach(option => batchcodesSelect.add(option));
-    }
-
-    #getBatchcodeCombinationOptions(histograms) {
-        return histograms.map(this.#getBatchcodeCombinationOption);
-    }
-
-    #getBatchcodeCombinationOption(histoDescr, index) {
-        const option = document.createElement("option");
-        option.text = histoDescr.batchcodes.join(', ');
-        option.value = index;
-        return option;
-    }
-
     #displayHistogram(histoDescr, histogramChartView, chartWithSlider) {
         histogramChartView.displayChart(histoDescr);
         this.#createSlider(
@@ -109,4 +91,35 @@ class HistogramView {
             sliderElement.style.height = height;
         }
     }
+}
+
+class BatchcodeCombinationSelection {
+
+    getSelectBatchcodeCombination({ histograms, onSelect }) {
+        const selectBatchcodeCombination = UIUtils.instantiateTemplate('template-selectBatchcodeCombination');
+        const batchcodesSelect = selectBatchcodeCombination.querySelector('#batchcodesSelect');
+        this.#addBatchcodeCombinationOptions(batchcodesSelect, histograms);
+        batchcodesSelect.addEventListener(
+            'change',
+            event => {
+                const histoDescr = histograms[event.target.value];
+                onSelect(histoDescr);
+            });
+        return selectBatchcodeCombination;
+    }
+
+    #addBatchcodeCombinationOptions(batchcodesSelect, histograms) {
+        this.#getBatchcodeCombinationOptions(histograms).forEach(option => batchcodesSelect.add(option));
+    }
+
+    #getBatchcodeCombinationOptions(histograms) {
+        return histograms.map(this.#getBatchcodeCombinationOption);
+    }
+
+    #getBatchcodeCombinationOption(histoDescr, index) {
+        const option = document.createElement("option");
+        option.text = histoDescr.batchcodes.join(', ');
+        option.value = index;
+        return option;
+    }
 }
\ No newline at end of file