Create new module drop-down list styling logic

public/js/appChart.js

@@ -30,7 +30,7 @@ import {
   enableDrawChartButton,
 } from "./src_modules/loadingIndicator.mjs";
 
-import { vanillaSelectBox } from "./thirdparty/vanillaSelectBox.mjs";
+import { styleAllDropDownLists } from "./src_modules/dropDownListStyling.mjs";
 
 import {
   extractObservationsWithinDatesInterval,
@@ -57,66 +57,6 @@ import { drawLineChartBasedOnSelectedAggregationOptions } from "./src_modules/dr
 
 import { drawScatterPlotFromChartSelection } from "./src_modules/dropDownListChartScatterPlot.mjs";
 
-/**
- * Use the `vanillaDropDown` library to style the buildings & data points drop down list
- *
- * @returns {undefined}
- */
-const styleBuildingsDataPointsDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
-  new vanillaSelectBox("#drop-down--bldg-data-point", {
-    "disableSelectAll": true,
-    "maxSelect": 5,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
-
-/**
- * Use the `vanillaDropDown` library to style the aggregation type drop down list
- *
- * @returns {undefined}
- */
-const styleAggregationDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox("#drop-down--aggregation-type", {
-    "disableSelectAll": true,
-    "maxSelect": 1,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
-
-/**
- * Use the `vanillaDropDown` library to style the third sampling rate down list
- *
- * @returns {undefined}
- */
-const styleSamplingRateDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox("#drop-down--sampling-rate", {
-    "disableSelectAll": true,
-    "maxSelect": 1,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
-
-/**
- * Use the `vanillaDropDown` library to style the chart type drop down list
- *
- * @returns {undefined}
- */
-const styleChartTypeDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox("#drop-down--chart-type", {
-    "disableSelectAll": true,
-    "maxSelect": 1,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
-
 /**
  * Callback function that wraps the logic of populating the linked drop down lists.
  * Will run on `DOMContentLoaded` event
@@ -124,10 +64,7 @@ const styleChartTypeDropDown = function () {
  * @returns {undefined}
  */
 const afterDocumentLoads = function () {
-  styleBuildingsDataPointsDropDown();
-  styleAggregationDropDown();
-  styleSamplingRateDropDown();
-  styleChartTypeDropDown();
+  styleAllDropDownLists();
 };
 
 /**
@@ -140,33 +77,34 @@ const afterDocumentLoads = function () {
  */
 const drawChartUsingSelectedOptions = async function () {
   try {
-    const selectedOptionsAllDropDownLists =
-      getSelectedOptionsFromAllDropDownLists();
-
     // Note: The chart type amd aggregation type + duration are the first and
     // third elements respectively, we have ignored the second and fourth elements
     const [selectedChartTypeArr, , selectedAggregationTypeDurationArr] =
-      selectedOptionsAllDropDownLists;
+      getSelectedOptionsFromAllDropDownLists();
 
-    // Create an array of aggregation type and duration
-    const selectedAggregationTypeDurationSplitNestedArr =
+    // Note: the resulting array is nested, it only has one sub-array
+    // Separate the aggregation type and the aggregation duration strings
+    const [[selectedAggregationType, selectedAggregationDuration]] =
       splitMultipleOptionsTextDelimitedBySlash(
         selectedAggregationTypeDurationArr
       );
 
-    // Separate the aggregation type and the aggregation duration strings
-    const [selectedAggregationTypeDurationSplitArr] =
-      selectedAggregationTypeDurationSplitNestedArr;
-
-    const [selectedAggregationType, selectedAggregationDuration] =
-      selectedAggregationTypeDurationSplitArr;
-
     // Array of building(s) + data point(s) + sampling rate
     const selectedBuildingsDataPointsSamplingRateAbbrevNestedArr =
       getAbbreviationsForSelectedOptionsFromAllDropDownLists(
-        selectedOptionsAllDropDownLists
+        getSelectedOptionsFromAllDropDownLists()
       );
 
+    // The formatted abbreviations array is nested, we are interested in the first sub-array
+    // We assume that all the phenomena have the same sampling rate
+    // Extract the formatted sampling rate string - used by ALL chart types
+    const [[, , selectedSamplingRateAbbrev]] =
+      selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
+
+    // User-specified start date and end date for aggregation - used by MULTIPLE chart types
+    const AGGREGATION_START_DATE = "2020-01-01";
+    const AGGREGATION_STOP_DATE = "2020-12-31";
+
     // The values of these references is either equal to `true` or an error will be thrown
     // We would like the errors to be thrown at this point before we begin performing any asynchronous tasks
     const selectedAggregationOptionsAreValid =
@@ -209,8 +147,8 @@ const drawChartUsingSelectedOptions = async function () {
     // Disable the 'draw chart' button
     disableDrawChartButton();
 
-    // Fetch the observations + metadata / raw observations
-    const observationsRawPlusMetadataArr =
+    // Fetch and extract the observations + metadata / raw observations
+    const [observationsRawNestedArr, metadataRawNestedArr] =
       selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr.length === 0
         ? [[], []]
         : await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
@@ -219,8 +157,8 @@ const drawChartUsingSelectedOptions = async function () {
             selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr
           );
 
-    // Fetch the observations + metadata / temperature difference (dT)
-    const observationsTempDiffPlusMetadataArr =
+    // Fetch and extract the observations + metadata / temperature difference (dT)
+    const [observationsTempDiffNestedArr, metadataTempDiffNestedArr] =
       selectedBuildingsDataPointsSamplingRateAbbrevTempDiffArr.length === 0
         ? [[], []]
         : await calculateVorlaufMinusRuecklaufTemperature(
@@ -231,59 +169,36 @@ const drawChartUsingSelectedOptions = async function () {
             )
           );
 
-    // Extract the combined arrays for observations and metadata / raw observations
-    const [observationsRawNestedArr, metadataRawNestedArr] =
-      observationsRawPlusMetadataArr;
-
-    // Extract the combined arrays for observations and metadata / temperature difference (dT)
-    const [observationsTempDiffNestedArr, metadataTempDiffNestedArr] =
-      observationsTempDiffPlusMetadataArr;
-
-    // Create a combined array of observations and metadata
-    const observationsPlusMetadataCombined = [
+    // Create and extract the combined observations and metadata
+    const [observationsCombinedNestedArr, metadataCombinedNestedArr] = [
       [...observationsRawNestedArr, ...observationsTempDiffNestedArr],
       [...metadataRawNestedArr, ...metadataTempDiffNestedArr],
     ];
 
-    const [observationsComboNestedArr, metadataComboNestedArr] =
-      observationsPlusMetadataCombined;
-
     // Create formatted array(s) for metadata - used by ALL chart types
-    const formattedMetadataNestedArr = metadataComboNestedArr.map(
+    const formattedMetadataNestedArr = metadataCombinedNestedArr.map(
       (metadataObj) => formatDatastreamMetadataForChart(metadataObj)
     );
 
     // Extract the formatted metadata properties for the raw observations - used by ALL chart types
-    const rawObservationsExtractedFormattedDatastreamProperties =
+    const rawObsExtractedFormattedDatastreamProperties =
       extractPropertiesFromFormattedDatastreamMetadata(
         formattedMetadataNestedArr,
         false
       );
 
-    // The formatted abbreviations array is nested
-    const [selectedBuildingsDataPointsSamplingRateAbbrevArr] =
-      selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
-
-    // Extract the formatted sampling rate string - used by ALL chart types
-    const [, , selectedSamplingRateAbbrev] =
-      selectedBuildingsDataPointsSamplingRateAbbrevArr;
-
-    // User-specified start date and end date for aggregation - used by MULTIPLE chart types
-    const aggregationStartDate = "2020-01-01";
-    const aggregationEndDate = "2020-12-31";
-
     // Create final array of observations- used by MULTIPLE chart types
     // If we are performing aggregation, it was envisioned that the user would
     // select observations that fall within a start and end date
     const observationsComboNestedFinalArr =
       selectedAggregationType === "None (raw data)"
-        ? observationsComboNestedArr
-        : observationsComboNestedArr.map((observationsArr) =>
+        ? observationsCombinedNestedArr
+        : observationsCombinedNestedArr.map((observationsArr) =>
             extractObservationsWithinDatesInterval(
               observationsArr,
               selectedSamplingRateAbbrev,
-              aggregationStartDate,
-              aggregationEndDate
+              AGGREGATION_START_DATE,
+              AGGREGATION_STOP_DATE
             )
           );
 
@@ -303,7 +218,7 @@ const drawChartUsingSelectedOptions = async function () {
           ) {
             drawHeatmapBasedOnSelectedOptions(
               observationsComboNestedFinalArr,
-              rawObservationsExtractedFormattedDatastreamProperties
+              rawObsExtractedFormattedDatastreamProperties
             );
           }
           break;
@@ -316,7 +231,7 @@ const drawChartUsingSelectedOptions = async function () {
           ) {
             drawScatterPlotFromChartSelection(
               observationsComboNestedFinalArr,
-              rawObservationsExtractedFormattedDatastreamProperties
+              rawObsExtractedFormattedDatastreamProperties
             );
           }
           break;
@@ -335,7 +250,7 @@ const drawChartUsingSelectedOptions = async function () {
 
             drawLineChartHighcharts(
               formattedRawObservationsLineChartNestedArr,
-              rawObservationsExtractedFormattedDatastreamProperties
+              rawObsExtractedFormattedDatastreamProperties
             );
           }
           // Aggregated observations
@@ -365,7 +280,7 @@ const drawChartUsingSelectedOptions = async function () {
 
             drawColumnChartHighcharts(
               formattedRawObservationsColumnChartNestedArr,
-              rawObservationsExtractedFormattedDatastreamProperties
+              rawObsExtractedFormattedDatastreamProperties
             );
           }
           // Aggregated observations

public/js/src_modules/dropDownListStyling.mjs

+"use strict";
+
+import { vanillaSelectBox } from "../thirdparty/vanillaSelectBox.mjs";
+
+/**
+ * Use the `vanillaDropDown` library to style the buildings & data points drop down list
+ *
+ * @returns {undefined}
+ */
+const styleBuildingsDataPointsDropDown = function () {
+  // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
+  new vanillaSelectBox("#drop-down--bldg-data-point", {
+    disableSelectAll: true,
+    maxSelect: 5,
+    placeHolder: "--Select--",
+    search: false,
+  });
+};
+
+/**
+ * Use the `vanillaDropDown` library to style the chart type,
+ * aggregation type and sampling rates drop down lists
+ *
+ * @returns {undefined} undefined
+ */
+const styleOtherDropDownLists = function () {
+  // Array of CSS selector strings
+  const cssSelectorStringsArr = [
+    "#drop-down--chart-type",
+    "#drop-down--aggregation-type",
+    "#drop-down--sampling-rate",
+  ];
+
+  // Create our dropdown lists using `vanillaSelectBox`
+  cssSelectorStringsArr.forEach((cssSelectorString) => {
+    new vanillaSelectBox(cssSelectorString, {
+      disableSelectAll: true,
+      maxSelect: 1,
+      placeHolder: "--Select--",
+      search: false,
+    });
+  });
+};
+
+/**
+ *  Use the `vanillaDropDown` library to style all the drop down lists
+ *
+ * @returns {undefined} undefined
+ */
+export const styleAllDropDownLists = function () {
+  styleBuildingsDataPointsDropDown();
+  styleOtherDropDownLists();
+};