diff --git a/public/js/appCesium.js b/public/js/appCesium.js index 6efc42e237588ce52af2cdf99064520844204143..9e77d930e383c3fab47460546ee5a2608825d759 100644 --- a/public/js/appCesium.js +++ b/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, +}; diff --git a/public/js/appChart.js b/public/js/appChart.js index c3a7f6a73d656f3f49671b115c25654e5dee848b..12807cac207b159ab4e7d32cfbfab559cdc672f1 100644 --- a/public/js/appChart.js +++ b/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";