New function: highlight selected buildings

Wraps logic of applying styling to selected buildings plus removing
duplicate building IDs

public/js/appCesium.js

@@ -52,7 +52,7 @@ const loadTiles = function (buildingTileset) {
   buildingTileset.readyPromise.then(function () {
     viewer
       .zoomTo(
-        tileset,
+        buildingTileset,
         new Cesium.HeadingPitchRange(
           0.0,
           -0.5,
@@ -344,3 +344,32 @@ const applyStylingForSelectedBuildings = function (
     },
   });
 };
+
+/**
+ * Highlight the building(s) that are selected in the buildings & data points drop-down list
+ *
+ * @param {Array} selectedBldgsDataPntsSmplngRateAbbrevNestedArr An array which contains one or more nested arrays of abbreviations of building(s), data point(s) and sampling rate(s)
+ * @returns {undefined} undefined
+ */
+const highlightSelectedBuildings = function (
+  selectedBldgsDataPntsSmplngRateAbbrevNestedArr
+) {
+  // The building ID is the first element
+  const buildingIdArr = selectedBldgsDataPntsSmplngRateAbbrevNestedArr.map(
+    (bldgDataPtSmplngRateAbbrev) => bldgDataPtSmplngRateAbbrev[0]
+  );
+
+  // Use a set to remove duplicates
+  const uniqueBuildingIdArr = [...new Set(buildingIdArr)];
+
+  applyStylingForSelectedBuildings(
+    nonDetailedBuilding225Tileset,
+    uniqueBuildingIdArr
+  );
+};
+
+export {
+  nonDetailedBuilding225Tileset,
+  resetStylingForAllBuildings,
+  highlightSelectedBuildings,
+};

public/js/appChart.js

@@ -51,6 +51,12 @@ import { drawLineChartBasedOnSelectedOptions } from "./src_modules/dropDownListC
 
 import { drawScatterPlotBasedOnSelectedOptions } from "./src_modules/dropDownListChartScatterPlot.mjs";
 
+import {
+  nonDetailedBuilding225Tileset,
+  resetStylingForAllBuildings,
+  highlightSelectedBuildings,
+} from "./appCesium.js";
+
 /**
  * Callback function that wraps the logic of populating the linked drop down lists.
  * Will run on `DOMContentLoaded` event
@@ -71,6 +77,9 @@ const afterDocumentLoads = function () {
  */
 const drawChartUsingSelectedOptions = async function () {
   try {
+    // Reset the styling of the 3D tileset, in case building(s) were highlighted
+    resetStylingForAllBuildings(nonDetailedBuilding225Tileset);
+
     // 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] =
@@ -95,6 +104,11 @@ const drawChartUsingSelectedOptions = async function () {
     const [[, , selectedSamplingRateAbbrev]] =
       selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
 
+    // Highlight the selected buildings
+    highlightSelectedBuildings(
+      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";