function updateUI(geometry, mapPanel, thumbnailGrid) {
  var images = BASE_COLLECTION.filterBounds(geometry);
  var first = ee.Image(images.first());
  images = images.filterBounds(first.geometry().centroid());

  // Repopulate the thumbnail grid with new thumbnails.
  thumbnailGrid.clear();
  images.limit(MAX_MOSAIC_SIZE)
      .aggregate_array('system:id')
      .evaluate(function(ids) {
        // Sometimes there are no images where the user has clicked.
        if (ids === undefined) {
          return;
        }

        // Define the function to be called when thumbnails are clicked or
        // unclicked.
        var remosaicFunc = function() {
          var ids = findSelectedThumbnails(thumbnailGrid);
          updateMosaic(ids, mapPanel);
        };

        ids.forEach(function(id) {
          var thumb = makeThumbnail(id, remosaicFunc);
          thumbnailGrid.add(thumb);
        });

        // Recompute the mosaic from the new image IDs and add to the mapPanel.
        updateMosaic(ids, mapPanel);

        // Center the map to the new mosaic.
        mapPanel.centerObject(first);
      });
}
Updates the mapPanel and thumbnailGrid widgets when a new bounding box has
been chosen on the map.