@imerss/inat-components 2.0.1 → 3.0.0

package/dist/index.js

@@ -54,12 +54,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -79,14 +79,43 @@ function __generator(thisArg, body) {
         } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var filterParamNames = [
+    ["taxonId", "taxon_id"],
+    ["placeId", "place_id"],
+    ["projectId", "project_id"]
+];
+/**
+ * Render a filter as query parameters, to be appended to a URL which already has a query.
+ * @param filter - The taxon, place and project of the observations
+ * @return The parameters, each beginning with "&", of those members of the filter which are supplied
+ */
+var filterParams = function (filter) {
+    return filterParamNames
+        .filter(function (_a) {
+        var member = _a[0];
+        return filter[member] !== undefined && filter[member] !== null && filter[member] !== "";
+    })
+        // The commas of a list are left as they are, as iNaturalist's own pages write them
+        .map(function (_a) {
+        var member = _a[0], param = _a[1];
+        return "&".concat(param, "=").concat(encodeURIComponent(String(filter[member])).replace(/%2C/gi, ","));
+    })
+        .join("");
+};
 
 var BASE_API_URL = 'https://api.inaturalist.org';
 var NUM_RESULTS = 100;
 var DEFAULT_NUM_YEARS = 10;
 var BASE_URL = "https://www.inaturalist.org"; // /people/name_here
-var ERROR_LOG_FILENAME = "inat-components-error.log";
 var DEFAULT_ITEM_WIDTH = 150;
+var DEFAULT_NUM_TOP_OBSERVERS = 10;
 
 var constants = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -94,18 +123,18 @@ var constants = /*#__PURE__*/Object.freeze({
     NUM_RESULTS: NUM_RESULTS,
     DEFAULT_NUM_YEARS: DEFAULT_NUM_YEARS,
     BASE_URL: BASE_URL,
-    ERROR_LOG_FILENAME: ERROR_LOG_FILENAME,
-    DEFAULT_ITEM_WIDTH: DEFAULT_ITEM_WIDTH
+    DEFAULT_ITEM_WIDTH: DEFAULT_ITEM_WIDTH,
+    DEFAULT_NUM_TOP_OBSERVERS: DEFAULT_NUM_TOP_OBSERVERS
 });
 
 var getCommonTaxa = function (_a) {
-    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults;
+    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, numResults = _a.numResults;
     return __awaiter(void 0, void 0, void 0, function () {
         var url, response, resp, sortedTaxa;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    url = "".concat(BASE_API_URL, "/v1/observations/species_counts?verifiable=true&spam=false&place_id=").concat(placeId, "&taxon_id=").concat(taxonId, "&locale=en-US&per_page=").concat(numResults);
+                    url = "".concat(BASE_API_URL, "/v1/observations/species_counts?verifiable=true&spam=false").concat(filterParams({ taxonId: taxonId, placeId: placeId, projectId: projectId }), "&locale=en-US&per_page=").concat(numResults);
                     if (year !== "all") {
                         url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
                     }
@@ -148,13 +177,13 @@ var getCommonTaxa = function (_a) {
 };
 
 var getFavourites = function (_a) {
-    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults;
+    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, numResults = _a.numResults;
     return __awaiter(void 0, void 0, void 0, function () {
         var url, response, resp, sortedTaxa;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    url = "".concat(BASE_API_URL, "/v1/observations?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=").concat(placeId, "&taxon_id=").concat(taxonId, "&locale=en-US&per_page=").concat(numResults);
+                    url = "".concat(BASE_API_URL, "/v1/observations?verifiable=true&order_by=votes&order=desc&page=1&spam=false").concat(filterParams({ taxonId: taxonId, placeId: placeId, projectId: projectId }), "&locale=en-US&per_page=").concat(numResults);
                     if (year !== "all") {
                         url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
                     }
@@ -175,15 +204,19 @@ var getFavourites = function (_a) {
                     });
                     return [2 /*return*/, {
                             totalResults: resp.total_results,
-                            results: sortedTaxa.map(function (row) { return ({
-                                id: row.id,
-                                imageUrl: row.observation_photos[0].photo.url || "",
-                                obsDate: row.observed_on_string,
-                                obsUrl: row.uri,
-                                taxonName: row.taxon.name || "",
-                                taxonCommonName: row.taxon.preferred_common_name,
-                                numFaves: row.faves.length
-                            }); })
+                            results: sortedTaxa.map(function (row) {
+                                var _a;
+                                return ({
+                                    id: row.id,
+                                    imageUrl: row.observation_photos[0].photo.url || "",
+                                    obsDate: row.observed_on_string,
+                                    obsUrl: row.uri,
+                                    observerUsername: ((_a = row.user) === null || _a === void 0 ? void 0 : _a.login) || "",
+                                    taxonName: row.taxon.name || "",
+                                    taxonCommonName: row.taxon.preferred_common_name,
+                                    numFaves: row.faves.length
+                                });
+                            })
                         }];
             }
         });
@@ -191,13 +224,13 @@ var getFavourites = function (_a) {
 };
 
 var getRecentObservations = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults;
+    var taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, numResults = _a.numResults;
     return __awaiter(void 0, void 0, void 0, function () {
         var url, response, obs;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    url = "".concat(BASE_API_URL, "/v1/observations?photos=true&per_page=").concat(numResults, "&taxon_id=").concat(taxonId, "&place_id=").concat(placeId, "&order=desc&order_by=observed_on");
+                    url = "".concat(BASE_API_URL, "/v1/observations?photos=true&per_page=").concat(numResults).concat(filterParams({ taxonId: taxonId, placeId: placeId, projectId: projectId }), "&order=desc&order_by=observed_on");
                     return [4 /*yield*/, fetch$1(url)];
                 case 1:
                     response = _b.sent();
@@ -225,20 +258,22 @@ var getRecentObservations = function (_a) {
 };
 
 var getSummary = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, year = _a.year;
+    var taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, year = _a.year, _b = _a.numTopObservers, numTopObservers = _b === void 0 ? DEFAULT_NUM_TOP_OBSERVERS : _b;
     return __awaiter(void 0, void 0, void 0, function () {
-        var observers, observations, seasonalityData;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, getObserverSummary(taxonId, placeId, year)];
+        var filter, observers, observations, seasonalityData;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    filter = { taxonId: taxonId, placeId: placeId, projectId: projectId };
+                    return [4 /*yield*/, getObserverSummary(filter, year, numTopObservers)];
                 case 1:
-                    observers = _b.sent();
-                    return [4 /*yield*/, getObservationSummary(taxonId, placeId, year)];
+                    observers = _c.sent();
+                    return [4 /*yield*/, getObservationSummary(filter, year)];
                 case 2:
-                    observations = _b.sent();
-                    return [4 /*yield*/, getSeasonalityData(taxonId, placeId, year)];
+                    observations = _c.sent();
+                    return [4 /*yield*/, getSeasonalityData(filter, year)];
                 case 3:
-                    seasonalityData = _b.sent();
+                    seasonalityData = _c.sent();
                     return [2 /*return*/, {
                             observers: observers,
                             observations: observations,
@@ -248,39 +283,42 @@ var getSummary = function (_a) {
         });
     });
 };
-var getObserverSummary = function (taxonId, placeId, year) { return __awaiter(void 0, void 0, void 0, function () {
-    var url, response, data;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                url = "".concat(BASE_API_URL, "/v1/observations/observers?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=").concat(placeId, "&taxon_id=").concat(taxonId, "&locale=en-US&per_page=10");
-                if (year !== "all") {
-                    url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
-                }
-                return [4 /*yield*/, fetch$1(url)];
-            case 1:
-                response = _a.sent();
-                return [4 /*yield*/, response.json()];
-            case 2:
-                data = _a.sent();
-                return [2 /*return*/, {
-                        totalCount: data.total_results,
-                        top: data.results.map(function (result) { return ({
-                            id: result.user.id,
-                            userName: result.user.login,
-                            numObservations: result.observation_count,
-                            iconUrl: result.user.icon_url
-                        }); })
-                    }];
-        }
+var getObserverSummary = function (filter, year, numTopObservers) {
+    if (numTopObservers === void 0) { numTopObservers = DEFAULT_NUM_TOP_OBSERVERS; }
+    return __awaiter(void 0, void 0, void 0, function () {
+        var url, response, data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    url = "".concat(BASE_API_URL, "/v1/observations/observers?verifiable=true&order_by=votes&order=desc&page=1&spam=false").concat(filterParams(filter), "&locale=en-US&per_page=").concat(numTopObservers);
+                    if (year !== "all") {
+                        url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
+                    }
+                    return [4 /*yield*/, fetch$1(url)];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _a.sent();
+                    return [2 /*return*/, {
+                            totalCount: data.total_results,
+                            top: data.results.map(function (result) { return ({
+                                id: result.user.id,
+                                userName: result.user.login,
+                                numObservations: result.observation_count,
+                                iconUrl: result.user.icon_url
+                            }); })
+                        }];
+            }
+        });
     });
-}); };
-var getObservationSummary = function (taxonId, placeId, year) { return __awaiter(void 0, void 0, void 0, function () {
+};
+var getObservationSummary = function (filter, year) { return __awaiter(void 0, void 0, void 0, function () {
     var url, response, data;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                url = "".concat(BASE_API_URL, "/v1/observations?photos=true&per_page=1&taxon_id=").concat(taxonId, "&place_id=").concat(placeId, "&order=desc&order_by=observed_on");
+                url = "".concat(BASE_API_URL, "/v1/observations?photos=true&per_page=1").concat(filterParams(filter), "&order=desc&order_by=observed_on");
                 if (year !== "all") {
                     url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
                 }
@@ -296,12 +334,12 @@ var getObservationSummary = function (taxonId, placeId, year) { return __awaiter
         }
     });
 }); };
-var getSeasonalityData = function (taxonId, placeId, year) { return __awaiter(void 0, void 0, void 0, function () {
+var getSeasonalityData = function (filter, year) { return __awaiter(void 0, void 0, void 0, function () {
     var url, response, resp;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                url = "".concat(BASE_API_URL, "/v1/observations/histogram?verifiable=true&taxon_id=").concat(taxonId, "&place_id=").concat(placeId, "&locale=en-US&date_field=observed&interval=month_of_year");
+                url = "".concat(BASE_API_URL, "/v1/observations/histogram?verifiable=true").concat(filterParams(filter), "&locale=en-US&date_field=observed&interval=month_of_year");
                 if (year !== "all") {
                     url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
                 }
@@ -332,25 +370,28 @@ var DataSourceEnum;
 })(DataSourceEnum || (DataSourceEnum = {}));
 
 /*
- * Note that right now the source filenames aren't configurable.
+ * Note that right now the source filenames aren't configurable. A file is named by the `str` of each of the taxon,
+ * place and project which are supplied, in that order - so that the names of files for a taxon and a place are as they
+ * were before projects could be supplied.
  */
-var getSourceFile = function (api, taxon, place, year) {
-    if (!taxon || !place) {
+var getSourceFile = function (api, taxon, place, year, project) {
+    if (!project && (!taxon || !place)) {
         return '';
     }
     var yearStr = year === "all" ? "allyears" : year;
+    var stem = [taxon, place, project].filter(function (item) { return item; }).map(function (item) { return item.str; }).join("-");
     var filename = "";
     if (api === Feature.recentObservations) {
-        filename = "".concat(taxon.str, "-").concat(place.str, "-recent.json");
+        filename = "".concat(stem, "-recent.json");
     }
     else if (api === Feature.commonTaxa) {
-        filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-commonTaxa.json");
+        filename = "".concat(stem, "-").concat(yearStr, "-commonTaxa.json");
     }
     else if (api === Feature.favourites) {
-        filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-favourites.json");
+        filename = "".concat(stem, "-").concat(yearStr, "-favourites.json");
     }
     else if (api === Feature.stats) {
-        filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-stats.json");
+        filename = "".concat(stem, "-").concat(yearStr, "-stats.json");
     }
     return filename;
 };
@@ -398,204 +439,242 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$4 = ".observation-module_obs__-5hGT {\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: #f9f9f9;\n  text-align: center;\n  transition: all 0.15s ease-in-out;\n}\n.observation-module_obs__-5hGT:hover {\n  background-color: #e1e1e1;\n}\n\n.observation-module_obs__-5hGT h3 {\n  margin: 0;\n}\n\n.observation-module_image__BBTP8 {\n  max-width: 100%;\n  max-height: 100%;\n}";
-var styles$4 = {"obs":"observation-module_obs__-5hGT","image":"observation-module_image__BBTP8"};
-styleInject(css_248z$4);
+var css_248z$5 = ".observation-module_obs__5i2W5 {\n  cursor: pointer;\n  border-radius: 8px;\n  /* Rounds the corners of the photo with those of the card */\n  overflow: hidden;\n  background-color: #f9f9f9;\n  text-align: center;\n  transition: all 0.15s ease-in-out;\n}\n.observation-module_obs__5i2W5:hover {\n  background-color: #e1e1e1;\n}\n\n.observation-module_obs__5i2W5 h3 {\n  margin: 0;\n}\n\n.observation-module_image__R07tV {\n  width: 100%;\n  aspect-ratio: 1;\n  overflow: hidden;\n}\n";
+var styles$5 = {"obs":"observation-module_obs__5i2W5","image":"observation-module_image__R07tV"};
+styleInject(css_248z$5);
 
+/**
+ * The columns of a grid of observations. Each is at least `itemWidth` wide, but no wider than allows two across a narrow
+ * screen, and a row of fewer results than fill it leaves the rest empty, rather than stretching them across it.
+ * @param itemWidth - The least width of a column, in pixels
+ * @return The value of the grid's `grid-template-columns`
+ */
+var gridColumns = function (itemWidth) {
+    return "repeat(auto-fill, minmax(min(".concat(itemWidth, "px, calc(50% - 4px)), 1fr))");
+};
 var Observation = function (_a) {
-    var imageUrl = _a.imageUrl, linkUrl = _a.linkUrl, itemWidth = _a.itemWidth, children = _a.children;
+    var imageUrl = _a.imageUrl, linkUrl = _a.linkUrl, children = _a.children;
     var gotoObservation = useCallback(function () {
         window.open(linkUrl);
     }, [linkUrl]);
-    return (jsxs("article", __assign({ className: styles$4.obs, onClick: gotoObservation }, { children: [jsx("div", { style: {
-                    width: itemWidth,
-                    height: itemWidth,
-                    overflow: "hidden",
-                    borderRadius: 5,
+    return (jsxs("article", __assign({ className: styles$5.obs, onClick: gotoObservation }, { children: [jsx("div", { className: styles$5.image, style: {
                     background: "url(".concat(imageUrl, ") 50% 50% no-repeat"),
-                    margin: "0 auto",
                     backgroundSize: "cover"
                 } }), children] })));
 };
 
-var css_248z$3 = ".general-module_page__ziNB9 {\n  padding: 80px 10px 10px;\n  margin: 0 auto;\n  max-width: 1100px;\n}\n.general-module_page__ziNB9 h1 {\n  border-bottom: 1px solid #efefef;\n  padding-bottom: 2px;\n  margin-bottom: 25px;\n}\n\n.general-module_panel__WjWzy {\n  position: relative;\n}\n\n.general-module_grid__VwNiL {\n  display: grid;\n  width: 100%;\n  grid-gap: 8px;\n  text-align: center;\n}\n\n.general-module_obsLabel__9R-PO {\n  padding: 10px 20px;\n}\n.general-module_obsLabel__9R-PO a {\n  text-decoration: none;\n  color: #336699;\n}\n.general-module_obsLabel__9R-PO a:hover {\n  text-decoration: underline;\n}\n\n.general-module_loader__gBvfF {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.general-module_loaderBg__URuj7 {\n  position: absolute;\n  background-color: #cccccc;\n  padding: 20px;\n  width: 100px;\n  border-radius: 10px;\n  height: 100%;\n  opacity: 0.8;\n}\n\n.general-module_count__Gnr8W {\n  background-color: #efefef;\n  color: #666666;\n  padding: 2px 8px;\n  margin-top: 6px;\n  display: inline-block;\n  border-radius: 3px;\n  font-weight: bold;\n  font-size: 18px;\n}\n\n.general-module_tabDesc__zOFiV {\n  font-size: 14px;\n  margin-bottom: 20px;\n}";
-var styles$3 = {"page":"general-module_page__ziNB9","panel":"general-module_panel__WjWzy","grid":"general-module_grid__VwNiL","obsLabel":"general-module_obsLabel__9R-PO","loader":"general-module_loader__gBvfF","loaderBg":"general-module_loaderBg__URuj7","count":"general-module_count__Gnr8W","tabDesc":"general-module_tabDesc__zOFiV"};
-styleInject(css_248z$3);
+var css_248z$4 = ".general-module_page__ijzIy {\n  padding: 80px 10px 10px;\n  margin: 0 auto;\n  max-width: 1100px;\n}\n.general-module_page__ijzIy h1 {\n  border-bottom: 1px solid #efefef;\n  padding-bottom: 2px;\n  margin-bottom: 25px;\n}\n\n.general-module_panel__rdHWU {\n  position: relative;\n}\n\n.general-module_grid__wJM1E {\n  display: grid;\n  width: 100%;\n  grid-gap: 8px;\n  text-align: center;\n}\n\n.general-module_obsLabel__Gudlw {\n  padding: 10px 20px;\n}\n.general-module_obsLabel__Gudlw a {\n  text-decoration: none;\n  color: #336699;\n}\n.general-module_obsLabel__Gudlw a:hover {\n  text-decoration: underline;\n}\n\n.general-module_loader__p0Lxn {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.general-module_loaderBg__AnbjC {\n  position: absolute;\n  background-color: #cccccc;\n  padding: 20px;\n  width: 100px;\n  border-radius: 10px;\n  height: 100%;\n  opacity: 0.8;\n}\n\n.general-module_count__50oeR {\n  background-color: #efefef;\n  color: #666666;\n  padding: 2px 8px;\n  margin-top: 6px;\n  display: inline-block;\n  border-radius: 3px;\n  font-weight: bold;\n  font-size: 18px;\n}\n\n.general-module_tabDesc__RhIql {\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n";
+var styles$4 = {"page":"general-module_page__ijzIy","panel":"general-module_panel__rdHWU","grid":"general-module_grid__wJM1E","obsLabel":"general-module_obsLabel__Gudlw","loader":"general-module_loader__p0Lxn","loaderBg":"general-module_loaderBg__AnbjC","count":"general-module_count__50oeR","tabDesc":"general-module_tabDesc__RhIql"};
+styleInject(css_248z$4);
 
 var Loader = function (_a) {
     var loading = _a.loading;
-    var loaderClasses = styles$3.loader;
-    // if (loading) {
-    //     loaderClasses += ` ${styles.loading}`;
-    // }
     if (!loading) {
         return null;
     }
-    return (jsxs("div", __assign({ className: loaderClasses }, { children: [jsx("div", { className: styles$3.loaderBg }), jsx(LoadingSpinner, { color: "#000000" })] })));
+    return (jsxs("div", __assign({ className: styles$4.loader }, { children: [jsx("div", { className: styles$4.loaderBg }), jsx(LoadingSpinner, { color: "#000000" })] })));
 };
 
 var NoResults = function () {
     return (jsx("p", { children: "No results found." }));
 };
 
+var css_248z$3 = ".error-module_error__trW7H {\n  color: #993333;\n}\n";
+var styles$3 = {"error":"error-module_error__trW7H"};
+styleInject(css_248z$3);
+
+/**
+ * Shown in place of a tab's results when they could not be loaded. A site may supply its own, as `components.error`.
+ */
+var LoadError = function () { return (jsx("p", __assign({ className: styles$3.error }, { children: "The observations could not be loaded from iNaturalist. Please try again later." }))); };
+
 /**
  * This hook handles loading the iNat data from whatever source has been specified (DataSource):
- *   nothing needs to be done.
- * - "autoLoad": the user is developing locally and wants to just ping iNat directly for the source
- * - "url": the user has generated the data sources at a URL somewhere via @imerss/inat-component-utils
+ * - "autoLoad": the data is requested from iNaturalist's API directly, by the `action` supplied
+ * - "url": the data is read from files generated at a URL somewhere via @imerss/inat-components-utils
+ * It returns `error` as `true` once a request has failed, or returned something other than the data.
  */
 var useLoadSourceData = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults, source = _a.source, dataUrl = _a.dataUrl, year = _a.year, action = _a.action, _b = _a.isSummaryData, isSummaryData = _b === void 0 ? false : _b;
+    var taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, numResults = _a.numResults, source = _a.source, dataUrl = _a.dataUrl, year = _a.year, action = _a.action, _b = _a.isSummaryData, isSummaryData = _b === void 0 ? false : _b;
     var _c = useState(false), loading = _c[0], setLoading = _c[1];
     var _d = useState([]), results = _d[0], setResults = _d[1];
+    var _e = useState(false), error = _e[0], setError = _e[1];
+    // Runs a load, recording its results, or else that it failed
+    var load = function (fetchResults) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, e_1;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setLoading(true);
+                    setError(false);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    _a = setResults;
+                    return [4 /*yield*/, fetchResults()];
+                case 2:
+                    _a.apply(void 0, [_b.sent()]);
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _b.sent();
+                    console.error("Failed to load iNaturalist data", e_1);
+                    setResults([]);
+                    setError(true);
+                    return [3 /*break*/, 4];
+                case 4:
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
     useEffect(function () {
         if (source === DataSourceEnum.autoLoad) {
-            if (!taxonId) {
-                console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
+            // A project brings its own taxa and places, so that it may be supplied in place of both
+            if (!projectId && !taxonId) {
+                console.error("Please supply a `taxonId` or `projectId` prop for the `autoLoad` source prop option.");
                 return;
             }
-            if (!placeId) {
-                console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
+            if (!projectId && !placeId) {
+                console.error("Please supply a `placeId` or `projectId` prop for the `autoLoad` source prop option.");
                 return;
             }
-            (function () { return __awaiter(void 0, void 0, void 0, function () {
+            // note that `year` isn't used for recentObservations, but we pass it anyway to get more reusability out
+            // of this hook
+            load(function () { return __awaiter(void 0, void 0, void 0, function () {
                 var obs;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
-                            setLoading(true);
-                            return [4 /*yield*/, action({ taxonId: taxonId, placeId: placeId, numResults: numResults, year: year })];
+                        case 0: return [4 /*yield*/, action({ taxonId: taxonId, placeId: placeId, projectId: projectId, numResults: numResults, year: year })];
                         case 1:
                             obs = _a.sent();
-                            setResults(obs.results);
-                            setLoading(false);
-                            return [2 /*return*/];
+                            return [2 /*return*/, obs.results];
                     }
                 });
-            }); })();
+            }); });
         }
         if (source === DataSourceEnum.url) {
             if (!dataUrl) {
                 console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
                 return;
             }
-            (function () { return __awaiter(void 0, void 0, void 0, function () {
+            load(function () { return __awaiter(void 0, void 0, void 0, function () {
                 var obs, json;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
-                            setLoading(true);
-                            return [4 /*yield*/, fetch(dataUrl)];
+                        case 0: return [4 /*yield*/, fetch(dataUrl)];
                         case 1:
                             obs = _a.sent();
+                            if (!obs.ok) {
+                                throw new Error("".concat(dataUrl, " returned ").concat(obs.status));
+                            }
                             return [4 /*yield*/, obs.json()];
                         case 2:
                             json = _a.sent();
                             // hack workaround. Better solution would have been to standardize the JSON structure at the top-level
-                            if (isSummaryData) {
-                                setResults(json);
-                            }
-                            else {
-                                setResults(json.results);
-                            }
-                            setLoading(false);
-                            return [2 /*return*/];
+                            return [2 /*return*/, isSummaryData ? json : json.results];
                     }
                 });
-            }); })();
+            }); });
         }
-    }, [source, dataUrl, taxonId, placeId, year, numResults, isSummaryData]);
+    }, [source, dataUrl, taxonId, placeId, projectId, year, numResults, isSummaryData]);
     return {
         loading: loading,
-        results: results
+        results: results,
+        error: error
     };
 };
 
 var RecentObservationLabel = function (obs) {
     var _a, _b, _c;
-    return (jsxs("div", __assign({ className: styles$3.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = obs.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: obs.taxonCommonName || obs.taxonName })), jsx("div", __assign({ className: (_b = obs.classes) === null || _b === void 0 ? void 0 : _b.observationLabelDate }, { children: formatDate(obs.obsDate) })), jsx("div", __assign({ className: (_c = obs.classes) === null || _c === void 0 ? void 0 : _c.observationLabelName }, { children: jsx("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.observerUsername), target: "_blank", rel: "noreferrer", onClick: function (e) { return e.stopPropagation(); } }, { children: obs.observerUsername })) }))] })));
+    return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = obs.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: obs.taxonCommonName || obs.taxonName })), jsx("div", __assign({ className: (_b = obs.classes) === null || _b === void 0 ? void 0 : _b.observationLabelDate }, { children: formatDate(obs.obsDate) })), jsx("div", __assign({ className: (_c = obs.classes) === null || _c === void 0 ? void 0 : _c.observationLabelName }, { children: jsx("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.observerUsername), target: "_blank", rel: "noreferrer", onClick: function (e) { return e.stopPropagation(); } }, { children: obs.observerUsername })) }))] })));
 };
 var RecentObservations = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, generalClasses = _a.generalClasses, tabDesc = _a.tabDesc, _b = _a.source, source = _b === void 0 ? DataSourceEnum.autoLoad : _b, _c = _a.numResults, numResults = _c === void 0 ? NUM_RESULTS : _c, _d = _a.itemWidth, itemWidth = _d === void 0 ? DEFAULT_ITEM_WIDTH : _d;
+    var taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, generalClasses = _a.generalClasses, tabDesc = _a.tabDesc, _b = _a.source, source = _b === void 0 ? DataSourceEnum.autoLoad : _b, _c = _a.numResults, numResults = _c === void 0 ? NUM_RESULTS : _c, _d = _a.itemWidth, itemWidth = _d === void 0 ? DEFAULT_ITEM_WIDTH : _d;
     var _e = useLoadSourceData({
         taxonId: taxonId,
         placeId: placeId,
+        projectId: projectId,
         numResults: numResults,
         dataUrl: dataUrl,
         source: source,
         action: getRecentObservations
-    }), loading = _e.loading, observations = _e.results;
+    }), loading = _e.loading, observations = _e.results, error = _e.error;
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
+    var ErrorMessage = (components === null || components === void 0 ? void 0 : components.error) ? components.error : LoadError;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : RecentObservationLabel;
-    var componentClasses = styles$3.panel;
+    var componentClasses = styles$4.panel;
     if (className) {
         componentClasses += " ".concat(className);
     }
-    var descClasses = styles$3.tabDesc;
+    var descClasses = styles$4.tabDesc;
     if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
         descClasses += " ".concat(generalClasses.tabDesc);
     }
-    return (jsxs("div", __assign({ className: componentClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), jsxs("div", __assign({ className: styles$3.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: [!loading && observations.length === 0 && jsx(NoResults, {}), observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: generalClasses })) }), obs.id)); })] }))] })));
+    return (jsxs("div", __assign({ className: componentClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), jsxs("div", __assign({ className: styles$4.grid, style: { gridTemplateColumns: gridColumns(itemWidth) } }, { children: [error && jsx(ErrorMessage, {}), !loading && !error && observations.length === 0 && jsx(NoResults, {}), observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: generalClasses })) }), obs.id)); })] }))] })));
 };
 
 var CommonTaxaLabel = function (data) {
     var _a, _b;
-    return (jsxs("div", __assign({ className: styles$3.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("label", __assign({ className: "".concat(((_b = data.classes) === null || _b === void 0 ? void 0 : _b.observationCount) || '', " ").concat(styles$3.count) }, { children: numberWithCommas(data.obsCount) }))] })));
+    return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("label", __assign({ className: "".concat(((_b = data.classes) === null || _b === void 0 ? void 0 : _b.observationCount) || '', " ").concat(styles$4.count) }, { children: numberWithCommas(data.obsCount) }))] })));
 };
 var CommonTaxa = function (_a) {
-    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, _b = _a.numResults, numResults = _b === void 0 ? NUM_RESULTS : _b, _c = _a.itemWidth, itemWidth = _c === void 0 ? DEFAULT_ITEM_WIDTH : _c, dataUrl = _a.dataUrl, components = _a.components, generalClasses = _a.generalClasses, className = _a.className, tabDesc = _a.tabDesc;
+    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, _b = _a.numResults, numResults = _b === void 0 ? NUM_RESULTS : _b, _c = _a.itemWidth, itemWidth = _c === void 0 ? DEFAULT_ITEM_WIDTH : _c, dataUrl = _a.dataUrl, components = _a.components, generalClasses = _a.generalClasses, className = _a.className, tabDesc = _a.tabDesc;
     var _d = useLoadSourceData({
         taxonId: taxonId,
         placeId: placeId,
+        projectId: projectId,
         numResults: numResults,
         dataUrl: dataUrl,
         source: source,
         year: year,
         action: getCommonTaxa
-    }), loading = _d.loading, taxa = _d.results;
+    }), loading = _d.loading, taxa = _d.results, error = _d.error;
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
+    var ErrorMessage = (components === null || components === void 0 ? void 0 : components.error) ? components.error : LoadError;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : CommonTaxaLabel;
-    var elClasses = styles$3.panel;
+    var elClasses = styles$4.panel;
     if (className) {
         elClasses += " ".concat(className);
     }
-    var descClasses = styles$3.tabDesc;
+    var descClasses = styles$4.tabDesc;
     if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
         descClasses += " ".concat(generalClasses.tabDesc);
     }
-    return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && taxa.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$3.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: taxa.map(function (data) { return (jsx(Observation, __assign({ imageUrl: data.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: "".concat(BASE_URL, "/").concat(data.id) }, { children: jsx(Label, __assign({}, data, { classes: generalClasses })) }), data.id)); }) }))] })));
+    return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), error && jsx(ErrorMessage, {}), !loading && !error && taxa.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid, style: { gridTemplateColumns: gridColumns(itemWidth) } }, { children: taxa.map(function (data) { return (jsx(Observation, __assign({ imageUrl: data.imageUrl.replace(/square/, "medium"), linkUrl: "".concat(BASE_URL, "/taxa/").concat(data.id) }, { children: jsx(Label, __assign({}, data, { classes: generalClasses })) }), data.id)); }) }))] })));
 };
 
 var FavouritesLabel = function (data) {
     var _a, _b, _c, _d;
-    return (jsxs("div", __assign({ className: styles$3.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("div", __assign({ className: (_b = data.classes) === null || _b === void 0 ? void 0 : _b.observationLabelTitle }, { children: data.observerUsername })), jsx("div", __assign({ className: (_c = data.classes) === null || _c === void 0 ? void 0 : _c.observationLabelDate }, { children: formatDate(data.obsDate) })), jsx("label", __assign({ className: "".concat(((_d = data.classes) === null || _d === void 0 ? void 0 : _d.observationCount) || '', " ").concat(styles$3.count) }, { children: data.numFaves }))] })));
+    return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("div", __assign({ className: (_b = data.classes) === null || _b === void 0 ? void 0 : _b.observationLabelName }, { children: data.observerUsername })), jsx("div", __assign({ className: (_c = data.classes) === null || _c === void 0 ? void 0 : _c.observationLabelDate }, { children: formatDate(data.obsDate) })), jsx("label", __assign({ className: "".concat(((_d = data.classes) === null || _d === void 0 ? void 0 : _d.observationCount) || '', " ").concat(styles$4.count) }, { children: data.numFaves }))] })));
 };
 var Favourites = function (_a) {
-    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, tabDesc = _a.tabDesc, generalClasses = _a.generalClasses, _b = _a.itemWidth, itemWidth = _b === void 0 ? DEFAULT_ITEM_WIDTH : _b, _c = _a.numResults, numResults = _c === void 0 ? NUM_RESULTS : _c;
+    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, tabDesc = _a.tabDesc, generalClasses = _a.generalClasses, _b = _a.itemWidth, itemWidth = _b === void 0 ? DEFAULT_ITEM_WIDTH : _b, _c = _a.numResults, numResults = _c === void 0 ? NUM_RESULTS : _c;
     var _d = useLoadSourceData({
         year: year,
         taxonId: taxonId,
         placeId: placeId,
+        projectId: projectId,
         numResults: numResults,
         dataUrl: dataUrl,
         source: source,
         action: getFavourites
-    }), loading = _d.loading, observations = _d.results;
+    }), loading = _d.loading, observations = _d.results, error = _d.error;
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
+    var ErrorMessage = (components === null || components === void 0 ? void 0 : components.error) ? components.error : LoadError;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : FavouritesLabel;
-    var elClasses = styles$3.panel;
+    var elClasses = styles$4.panel;
     if (className) {
         elClasses += " ".concat(className);
     }
-    var descClasses = styles$3.tabDesc;
+    var descClasses = styles$4.tabDesc;
     if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
         descClasses += " ".concat(generalClasses.tabDesc);
     }
-    return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && observations.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$3.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: generalClasses })) }), obs.id)); }) }))] })));
+    return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), error && jsx(ErrorMessage, {}), !loading && !error && observations.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid, style: { gridTemplateColumns: gridColumns(itemWidth) } }, { children: observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: generalClasses })) }), obs.id)); }) }))] })));
 };
 
-var css_248z$2 = ".summary-module_summaryPage__NMmsj {\n  position: relative;\n}\n.summary-module_summaryPage__NMmsj section {\n  display: flex;\n}\n\n.summary-module_top__TKW0j {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n.summary-module_top__TKW0j .summary-module_avatar__16ZeD, .summary-module_top__TKW0j .summary-module_noAvatar__OsMWn {\n  margin-right: 10px;\n  border-radius: 20px;\n  width: 40px;\n  height: 40px;\n}\n.summary-module_top__TKW0j .summary-module_noAvatar__OsMWn {\n  display: inline-block;\n  background-color: #efefef;\n}\n.summary-module_top__TKW0j h3 {\n  flex: 1;\n  color: black;\n}\n.summary-module_top__TKW0j label {\n  flex: 0;\n  background-color: #efefef;\n  color: #666666;\n  padding: 2px 8px;\n  margin-top: 6px;\n  border-radius: 3px;\n  font-weight: bold;\n  font-size: 16px;\n}\n.summary-module_top__TKW0j li {\n  border-radius: 3px;\n}\n.summary-module_top__TKW0j li a {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n}\n.summary-module_top__TKW0j li:hover {\n  background-color: #efefef;\n}\n\n.summary-module_countSummary__Xc2Kd {\n  list-style-type: none;\n  line-height: 28px;\n  font-size: 16px;\n  padding: 0;\n  margin: 0 0 30px;\n}\n\n.summary-module_seasonalityBlock__BL8L- {\n  flex: 3;\n}\n\n.summary-module_observersBlock__0wnbm {\n  flex: 1;\n  margin-left: 40px;\n  margin-bottom: -40px;\n}\n\n@media screen and (max-width: 800px) {\n  .summary-module_summaryPage__NMmsj section {\n    display: block;\n  }\n  .summary-module_seasonalityBlock__BL8L- {\n    height: 250px;\n    margin-bottom: 80px;\n  }\n  .summary-module_observersBlock__0wnbm {\n    margin-left: 0;\n  }\n}";
-var styles$2 = {"summaryPage":"summary-module_summaryPage__NMmsj","top":"summary-module_top__TKW0j","avatar":"summary-module_avatar__16ZeD","noAvatar":"summary-module_noAvatar__OsMWn","countSummary":"summary-module_countSummary__Xc2Kd","seasonalityBlock":"summary-module_seasonalityBlock__BL8L-","observersBlock":"summary-module_observersBlock__0wnbm"};
+var css_248z$2 = ".summary-module_summaryPage__zFqlS {\n  position: relative;\n}\n.summary-module_summaryPage__zFqlS section {\n  display: flex;\n}\n\n.summary-module_top__IGZ10 {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n.summary-module_top__IGZ10 .summary-module_avatar__tmqK8, .summary-module_top__IGZ10 .summary-module_noAvatar__3Z4-0 {\n  margin-right: 10px;\n  border-radius: 20px;\n  width: 40px;\n  height: 40px;\n}\n\n.summary-module_top__IGZ10 .summary-module_noAvatar__3Z4-0 {\n  display: inline-block;\n  background-color: #efefef;\n}\n\n.summary-module_top__IGZ10 h3 {\n  flex: 1;\n  color: black;\n}\n\n.summary-module_top__IGZ10 label {\n  flex: 0;\n  background-color: #efefef;\n  color: #666666;\n  padding: 2px 8px;\n  margin-top: 6px;\n  border-radius: 3px;\n  font-weight: bold;\n  font-size: 16px;\n}\n\n.summary-module_top__IGZ10 li {\n  border-radius: 3px;\n}\n.summary-module_top__IGZ10 li a {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n}\n\n.summary-module_top__IGZ10 li:hover {\n  background-color: #efefef;\n}\n\n.summary-module_countSummary__XQyps {\n  list-style-type: none;\n  line-height: 28px;\n  font-size: 16px;\n  padding: 0;\n  margin: 0 0 30px;\n}\n\n/* The chart fills the height left to it in its block, which must have a height of its own. Its month labels are\n   rotated, and drawn beyond the chart's height, which leaves room for them beneath it */\n.summary-module_seasonalityBlock__zUmrb {\n  flex: 3;\n  display: flex;\n  flex-direction: column;\n  height: 500px;\n  box-sizing: border-box;\n}\n\n.summary-module_chart__B8Ysr {\n  flex: 1 1 0;\n  min-height: 0;\n  margin-bottom: 80px;\n}\n\n.summary-module_observersBlock__pQW1h {\n  flex: 1;\n  margin-left: 40px;\n  margin-bottom: -40px;\n}\n\n@media screen and (max-width: 800px) {\n  .summary-module_summaryPage__zFqlS section {\n    display: block;\n  }\n  .summary-module_seasonalityBlock__zUmrb {\n    height: 330px;\n  }\n  .summary-module_observersBlock__pQW1h {\n    margin-left: 0;\n  }\n}\n";
+var styles$2 = {"summaryPage":"summary-module_summaryPage__zFqlS","top":"summary-module_top__IGZ10","avatar":"summary-module_avatar__tmqK8","noAvatar":"summary-module_noAvatar__3Z4-0","countSummary":"summary-module_countSummary__XQyps","seasonalityBlock":"summary-module_seasonalityBlock__zUmrb","chart":"summary-module_chart__B8Ysr","observersBlock":"summary-module_observersBlock__pQW1h"};
 styleInject(css_248z$2);
 
 var ObserverList = function (_a) {
@@ -637,28 +716,34 @@ var SeasonalityGraph = function (_a) {
 
 var Summary = function (_a) {
     var _b, _c, _d;
-    var source = _a.source, dataUrl = _a.dataUrl, taxonId = _a.taxonId, placeId = _a.placeId, year = _a.year, generalClasses = _a.generalClasses, className = _a.className, tabDesc = _a.tabDesc, observersListClass = _a.observersListClass, statsCountSummaryClass = _a.statsCountSummaryClass;
-    var _e = useLoadSourceData({
+    var source = _a.source, dataUrl = _a.dataUrl, taxonId = _a.taxonId, placeId = _a.placeId, projectId = _a.projectId, year = _a.year, generalClasses = _a.generalClasses, className = _a.className, tabDesc = _a.tabDesc, observersListClass = _a.observersListClass, statsCountSummaryClass = _a.statsCountSummaryClass, _e = _a.numTopObservers, numTopObservers = _e === void 0 ? DEFAULT_NUM_TOP_OBSERVERS : _e, components = _a.components;
+    var _f = useLoadSourceData({
         year: year,
         taxonId: taxonId,
         placeId: placeId,
+        projectId: projectId,
         dataUrl: dataUrl,
         source: source,
+        // The hook passes this on to the action as `numResults`
+        numResults: numTopObservers,
         isSummaryData: true,
         // shim to standardize the response from the `action` method with a top-level `results` property. This
         // just lets the useLoadSourceData hook work for all tab components
-        action: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        action: function (_a) { return __awaiter(void 0, void 0, void 0, function () {
             var results;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getSummary(data)];
+            var numResults = _a.numResults, data = __rest(_a, ["numResults"]);
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, getSummary(__assign(__assign({}, data), { numTopObservers: numResults }))];
                     case 1:
-                        results = _a.sent();
+                        results = _b.sent();
                         return [2 /*return*/, { results: results }];
                 }
             });
         }); }
-    }), loading = _e.loading, summaryData = _e.results;
+    }), loading = _f.loading, summaryData = _f.results, error = _f.error;
+    var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
+    var ErrorMessage = (components === null || components === void 0 ? void 0 : components.error) ? components.error : LoadError;
     var countSummaryClasses = styles$2.countSummary;
     if (statsCountSummaryClass) {
         countSummaryClasses += " ".concat(statsCountSummaryClass);
@@ -671,11 +756,11 @@ var Summary = function (_a) {
     if (className) {
         classList += " ".concat(className);
     }
-    return (jsxs("div", __assign({ className: classList }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Loader, { loading: loading }), jsxs("ul", __assign({ className: countSummaryClasses }, { children: [jsxs("li", { children: ["Total number of observers: ", jsx("b", { children: ((_b = summaryData.observers) === null || _b === void 0 ? void 0 : _b.totalCount) ? numberWithCommas(summaryData.observers.totalCount) : "" })] }), jsxs("li", { children: ["Total number of observations: ", jsx("b", { children: ((_c = summaryData.observations) === null || _c === void 0 ? void 0 : _c.totalCount) ? numberWithCommas(summaryData.observations.totalCount) : "" })] })] })), jsxs("section", { children: [jsxs("div", __assign({ className: styles$2.seasonalityBlock }, { children: [jsx("h1", { children: "Seasonality" }), summaryData.seasonalityData && jsx(SeasonalityGraph, { data: summaryData.seasonalityData.monthOfYear })] })), jsxs("div", __assign({ className: styles$2.observersBlock }, { children: [jsx("h1", { children: "Top observers" }), ((_d = summaryData.observers) === null || _d === void 0 ? void 0 : _d.top) && (jsx(ObserverList, { observers: summaryData.observers.top, className: observersListClass, generalClasses: generalClasses }))] }))] })] })));
+    return (jsxs("div", __assign({ className: classList }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), error && jsx(ErrorMessage, {}), jsxs("ul", __assign({ className: countSummaryClasses }, { children: [jsxs("li", { children: ["Total number of observers: ", jsx("b", { children: ((_b = summaryData.observers) === null || _b === void 0 ? void 0 : _b.totalCount) ? numberWithCommas(summaryData.observers.totalCount) : "" })] }), jsxs("li", { children: ["Total number of observations: ", jsx("b", { children: ((_c = summaryData.observations) === null || _c === void 0 ? void 0 : _c.totalCount) ? numberWithCommas(summaryData.observations.totalCount) : "" })] })] })), jsxs("section", { children: [jsxs("div", __assign({ className: styles$2.seasonalityBlock }, { children: [jsx("h1", { children: "Seasonality" }), jsx("div", __assign({ className: styles$2.chart }, { children: summaryData.seasonalityData && jsx(SeasonalityGraph, { data: summaryData.seasonalityData.monthOfYear }) }))] })), jsxs("div", __assign({ className: styles$2.observersBlock }, { children: [jsx("h1", { children: "Top observers" }), ((_d = summaryData.observers) === null || _d === void 0 ? void 0 : _d.top) && (jsx(ObserverList, { observers: summaryData.observers.top, className: observersListClass, generalClasses: generalClasses }))] }))] })] })));
 };
 
-var css_248z$1 = ".year-dropdown-module_dropdown__iD9sj {\n  font-size: 18px;\n}";
-var styles$1 = {"dropdown":"year-dropdown-module_dropdown__iD9sj"};
+var css_248z$1 = ".year-dropdown-module_dropdown__hKFwD {\n  font-size: 18px;\n}\n";
+var styles$1 = {"dropdown":"year-dropdown-module_dropdown__hKFwD"};
 styleInject(css_248z$1);
 
 var Years = function (_a) {
@@ -696,8 +781,8 @@ var Years = function (_a) {
     return (jsxs("select", __assign({ className: classes, onChange: function (e) { return onChange(e.target.value); }, defaultValue: value }, { children: [jsx("option", __assign({ value: "all" }, { children: "All years" })), years.map(function (year) { return jsx("option", __assign({ value: year }, { children: year }), year); })] })));
 };
 
-var css_248z = ".tabs-module_tabs__UMeM9 {\n  display: flex;\n  flex-direction: row;\n  list-style: none;\n  font-size: 18px;\n  padding: 0;\n  margin-bottom: 30px;\n}\n.tabs-module_tabs__UMeM9 li {\n  margin: 0 20px;\n  padding: 4px 20px;\n  cursor: pointer;\n  color: #999999;\n  transition: all 0.2s ease-in-out;\n}\n.tabs-module_tabs__UMeM9 li.tabs-module_selected__SVr0E, .tabs-module_tabs__UMeM9 li:hover {\n  border-bottom: 5px solid #0099cc;\n  color: black;\n}\n\n@media screen and (max-width: 600px) {\n  .tabs-module_tabs__UMeM9 li {\n    margin: 0 5px;\n    padding: 4px 6px;\n  }\n}";
-var styles = {"tabs":"tabs-module_tabs__UMeM9","selected":"tabs-module_selected__SVr0E"};
+var css_248z = ".tabs-module_tabs__vVmY7 {\n  display: flex;\n  flex-direction: row;\n  list-style: none;\n  font-size: 18px;\n  padding: 0;\n  margin-bottom: 30px;\n}\n.tabs-module_tabs__vVmY7 li {\n  margin: 0 20px;\n  padding: 4px 20px;\n  cursor: pointer;\n  color: #999999;\n  /* Every tab bears the border which marks the selected one, so that selecting or hovering over a tab moves nothing */\n  border-bottom: 5px solid transparent;\n  transition: all 0.2s ease-in-out;\n}\n.tabs-module_tabs__vVmY7 li.tabs-module_selected__-yd68, .tabs-module_tabs__vVmY7 li:hover {\n  border-bottom-color: #0099cc;\n  color: black;\n}\n\n@media screen and (max-width: 600px) {\n  .tabs-module_tabs__vVmY7 li {\n    margin: 0 5px;\n    padding: 4px 6px;\n  }\n}\n";
+var styles = {"tabs":"tabs-module_tabs__vVmY7","selected":"tabs-module_selected__-yd68"};
 styleInject(css_248z);
 
 var _a;
@@ -707,20 +792,22 @@ var defaultTitles = (_a = {},
     _a[Feature.favourites] = "Most favourited",
     _a[Feature.stats] = "General stats",
     _a);
-var useFeatureTitles = function (features) {
-    var _a = useState(defaultTitles), titles = _a[0], setTitles = _a[1];
-    useEffect(function () {
-        var _a;
-        var _b, _c, _d, _e;
-        setTitles((_a = {},
-            _a[Feature.recentObservations] = ((_b = features.recentObservations) === null || _b === void 0 ? void 0 : _b.title) || defaultTitles[Feature.recentObservations],
-            _a[Feature.commonTaxa] = ((_c = features.commonTaxa) === null || _c === void 0 ? void 0 : _c.title) || defaultTitles[Feature.commonTaxa],
-            _a[Feature.favourites] = ((_d = features.favourites) === null || _d === void 0 ? void 0 : _d.title) || defaultTitles[Feature.favourites],
-            _a[Feature.stats] = ((_e = features.stats) === null || _e === void 0 ? void 0 : _e.title) || defaultTitles[Feature.stats],
-            _a));
-    }, [features]);
-    return titles;
-};
+/**
+ * The title of each feature - its own `title`, or the default.
+ * @param features - The features, as TaxonPanel's array of them, or as an object keyed by feature
+ * @return The titles, keyed by feature
+ */
+var useFeatureTitles = function (features) { return useMemo(function () {
+    var _a;
+    var _b, _c, _d, _e;
+    var byFeature = Array.isArray(features) ? convertFeaturesToObj(features) : features;
+    return _a = {},
+        _a[Feature.recentObservations] = ((_b = byFeature.recentObservations) === null || _b === void 0 ? void 0 : _b.title) || defaultTitles[Feature.recentObservations],
+        _a[Feature.commonTaxa] = ((_c = byFeature.commonTaxa) === null || _c === void 0 ? void 0 : _c.title) || defaultTitles[Feature.commonTaxa],
+        _a[Feature.favourites] = ((_d = byFeature.favourites) === null || _d === void 0 ? void 0 : _d.title) || defaultTitles[Feature.favourites],
+        _a[Feature.stats] = ((_e = byFeature.stats) === null || _e === void 0 ? void 0 : _e.title) || defaultTitles[Feature.stats],
+        _a;
+}, [features]); };
 var convertFeaturesToObj = function (features) {
     var featuresObj = {};
     features.forEach(function (row) {
@@ -758,7 +845,7 @@ var Tabs = function (_a) {
 
 var TaxonPanel = function (_a) {
     var _b;
-    var taxon = _a.taxon, place = _a.place, features = _a.features, dataSource = _a.dataSource, dataSourceBaseUrl = _a.dataSourceBaseUrl, itemWidth = _a.itemWidth, generalClasses = _a.generalClasses;
+    var taxon = _a.taxon, place = _a.place, project = _a.project, features = _a.features, dataSource = _a.dataSource, dataSourceBaseUrl = _a.dataSourceBaseUrl, itemWidth = _a.itemWidth, generalClasses = _a.generalClasses;
     var _c = useState(features[0].feature), tab = _c[0], setTab = _c[1];
     var _d = useState("all"), year = _d[0], setYear = _d[1];
     var featuresObj = useMemo(function () {
@@ -775,11 +862,12 @@ var TaxonPanel = function (_a) {
             className: (_b = featuresObj[feature]) === null || _b === void 0 ? void 0 : _b.className
         };
         if (dataSource === DataSourceEnum.url) {
-            props.dataUrl = dataSourceBaseUrl + '/' + getSourceFile(feature, taxon, place, year);
+            props.dataUrl = dataSourceBaseUrl + '/' + getSourceFile(feature, taxon, place, year, project);
         }
         else {
-            props.placeId = place.id;
-            props.taxonId = taxon.id;
+            props.placeId = place === null || place === void 0 ? void 0 : place.id;
+            props.taxonId = taxon === null || taxon === void 0 ? void 0 : taxon.id;
+            props.projectId = project === null || project === void 0 ? void 0 : project.id;
         }
         if (feature !== Feature.stats) {
             props.numResults = (_c = featuresObj[feature]) === null || _c === void 0 ? void 0 : _c.numResults;
@@ -790,7 +878,7 @@ var TaxonPanel = function (_a) {
         return props;
     };
     var getCurrentTab = function () {
-        var _a, _b;
+        var _a, _b, _c;
         switch (tab) {
             case Feature.recentObservations:
                 return jsx(RecentObservations, __assign({}, getProps(Feature.recentObservations)));
@@ -799,12 +887,12 @@ var TaxonPanel = function (_a) {
             case Feature.favourites:
                 return jsx(Favourites, __assign({}, getProps(Feature.favourites)));
             case Feature.stats:
-                return (jsx(Summary, __assign({}, getProps(Feature.stats), { observersListClass: (_a = featuresObj[Feature.stats]) === null || _a === void 0 ? void 0 : _a.observersListClass, statsCountSummaryClass: (_b = featuresObj[Feature.stats]) === null || _b === void 0 ? void 0 : _b.statsCountSummaryClass })));
+                return (jsx(Summary, __assign({}, getProps(Feature.stats), { observersListClass: (_a = featuresObj[Feature.stats]) === null || _a === void 0 ? void 0 : _a.observersListClass, statsCountSummaryClass: (_b = featuresObj[Feature.stats]) === null || _b === void 0 ? void 0 : _b.statsCountSummaryClass, numTopObservers: (_c = featuresObj[Feature.stats]) === null || _c === void 0 ? void 0 : _c.numTopObservers })));
         }
     };
     var tabsClass = (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabsElement) || '';
     var yearDropdownClass = (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.yearsDropdown) || '';
-    return (jsxs("div", __assign({ className: styles$3.page }, { children: [features.length > 1 && jsx(Tabs, { selectedTab: tab, onChangeTab: setTab, features: features, className: tabsClass }), jsxs("div", { children: [tab !== Feature.recentObservations && (jsx("div", __assign({ style: { float: "right" }, className: yearDropdownClass }, { children: jsx(Years, { value: year, numYears: ((_b = featuresObj[tab]) === null || _b === void 0 ? void 0 : _b.numYears) || DEFAULT_NUM_YEARS, onChange: setYear }) }))), jsx("h1", __assign({ className: generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.pageHeadings }, { children: titles[tab] }))] }), getCurrentTab()] })));
+    return (jsxs("div", __assign({ className: styles$4.page }, { children: [features.length > 1 && jsx(Tabs, { selectedTab: tab, onChangeTab: setTab, features: features, className: tabsClass }), jsxs("div", { children: [tab !== Feature.recentObservations && (jsx("div", __assign({ style: { float: "right" }, className: yearDropdownClass }, { children: jsx(Years, { value: year, numYears: ((_b = featuresObj[tab]) === null || _b === void 0 ? void 0 : _b.numYears) || DEFAULT_NUM_YEARS, onChange: setYear }) }))), jsx("h1", __assign({ className: generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.pageHeadings }, { children: titles[tab] }))] }), getCurrentTab()] })));
 };
 
-export { constants as C, CommonTaxa, CommonTaxaLabel, DataSourceEnum, Favourites, FavouritesLabel, Feature, Observation, RecentObservationLabel, RecentObservations, SeasonalityGraph, Summary, TaxonPanel as default, formatDate, getCommonTaxa, getCurrentYear, getFavourites, getObservationSummary, getObserverSummary, getRecentObservations, getSeasonalityData, getSourceFile, getSummary, numberWithCommas };
+export { constants as C, CommonTaxa, CommonTaxaLabel, DataSourceEnum, Favourites, FavouritesLabel, Feature, Observation, RecentObservationLabel, RecentObservations, SeasonalityGraph, Summary, TaxonPanel as default, filterParams, formatDate, getCommonTaxa, getCurrentYear, getFavourites, getObservationSummary, getObserverSummary, getRecentObservations, getSeasonalityData, getSourceFile, getSummary, gridColumns, numberWithCommas };