@imerss/inat-components 1.1.1 → 2.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import fetch$1 from 'isomorphic-unfetch';
 import { format } from 'date-fns';
 import LoadingSpinner from 'react-spinners/MoonLoader.js';
@@ -31,6 +31,18 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -70,26 +82,30 @@ function __generator(thisArg, body) {
 }
 
 var BASE_API_URL = 'https://api.inaturalist.org';
-var PER_PAGE = 100;
+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 constants = /*#__PURE__*/Object.freeze({
     __proto__: null,
     BASE_API_URL: BASE_API_URL,
-    PER_PAGE: PER_PAGE,
+    NUM_RESULTS: NUM_RESULTS,
+    DEFAULT_NUM_YEARS: DEFAULT_NUM_YEARS,
     BASE_URL: BASE_URL,
-    ERROR_LOG_FILENAME: ERROR_LOG_FILENAME
+    ERROR_LOG_FILENAME: ERROR_LOG_FILENAME,
+    DEFAULT_ITEM_WIDTH: DEFAULT_ITEM_WIDTH
 });
 
 var getCommonTaxa = function (_a) {
-    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, perPage = _a.perPage;
+    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, 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(perPage);
+                    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);
                     if (year !== "all") {
                         url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
                     }
@@ -132,22 +148,17 @@ var getCommonTaxa = function (_a) {
 };
 
 var getFavourites = function (_a) {
-    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, perPage = _a.perPage;
+    var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, 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(perPage);
+                    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);
                     if (year !== "all") {
                         url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
                     }
-                    return [4 /*yield*/, fetch$1(url, {
-                        // method: 'GET',
-                        // headers: {
-                        //     Accept: 'application/json'
-                        // }
-                        })];
+                    return [4 /*yield*/, fetch$1(url)];
                 case 1:
                     response = _b.sent();
                     return [4 /*yield*/, response.json()];
@@ -164,18 +175,15 @@ var getFavourites = function (_a) {
                     });
                     return [2 /*return*/, {
                             totalResults: resp.total_results,
-                            results: sortedTaxa.map(function (row) {
-                                var _a, _b;
-                                return ({
-                                    id: row.id,
-                                    imageUrl: ((_b = (_a = row.taxon) === null || _a === void 0 ? void 0 : _a.default_photo) === null || _b === void 0 ? void 0 : _b.square_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) { 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
+                            }); })
                         }];
             }
         });
@@ -183,13 +191,13 @@ var getFavourites = function (_a) {
 };
 
 var getRecentObservations = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, perPage = _a.perPage;
+    var taxonId = _a.taxonId, placeId = _a.placeId, 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(perPage, "&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, "&taxon_id=").concat(taxonId, "&place_id=").concat(placeId, "&order=desc&order_by=observed_on");
                     return [4 /*yield*/, fetch$1(url)];
                 case 1:
                     response = _b.sent();
@@ -310,12 +318,6 @@ var getSeasonalityData = function (taxonId, placeId, year) { return __awaiter(vo
     });
 }); };
 
-var DataSource;
-(function (DataSource) {
-    DataSource["autoLoad"] = "autoLoad";
-    DataSource["dataProp"] = "dataProp";
-    DataSource["url"] = "url";
-})(DataSource || (DataSource = {}));
 var Feature;
 (function (Feature) {
     Feature["commonTaxa"] = "commonTaxa";
@@ -323,32 +325,32 @@ var Feature;
     Feature["recentObservations"] = "recentObservations";
     Feature["stats"] = "stats";
 })(Feature || (Feature = {}));
-// I know this is duplicated, but it's very possible they could be different in future
-var Tab;
-(function (Tab) {
-    Tab["recent"] = "recent";
-    Tab["commonTaxa"] = "commonTaxa";
-    Tab["favourites"] = "favourites";
-    Tab["stats"] = "stats";
-})(Tab || (Tab = {}));
+var DataSourceEnum;
+(function (DataSourceEnum) {
+    DataSourceEnum["autoLoad"] = "autoLoad";
+    DataSourceEnum["url"] = "url";
+})(DataSourceEnum || (DataSourceEnum = {}));
 
 /*
  * Note that right now the source filenames aren't configurable.
  */
-var getSourceFile = function (api, taxonInfo, placeInfo, year) {
+var getSourceFile = function (api, taxon, place, year) {
+    if (!taxon || !place) {
+        return '';
+    }
     var yearStr = year === "all" ? "allyears" : year;
     var filename = "";
     if (api === Feature.recentObservations) {
-        filename = "".concat(taxonInfo.short, "-").concat(placeInfo.short, "-recent.json");
+        filename = "".concat(taxon.str, "-").concat(place.str, "-recent.json");
     }
     else if (api === Feature.commonTaxa) {
-        filename = "".concat(taxonInfo.short, "-").concat(placeInfo.short, "-").concat(yearStr, "-commonTaxa.json");
+        filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-commonTaxa.json");
     }
     else if (api === Feature.favourites) {
-        filename = "".concat(taxonInfo.short, "-").concat(placeInfo.short, "-").concat(yearStr, "-favourites.json");
+        filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-favourites.json");
     }
     else if (api === Feature.stats) {
-        filename = "".concat(taxonInfo.short, "-").concat(placeInfo.short, "-").concat(yearStr, "-stats.json");
+        filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-stats.json");
     }
     return filename;
 };
@@ -396,18 +398,18 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$5 = ".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  .observation-module_obs__-5hGT:hover {\n    background-color: #e1e1e1; }\n\n.observation-module_obs__-5hGT h3 {\n  margin: 0; }\n\n.observation-module_image__BBTP8 {\n  max-width: 100%;\n  max-height: 100%; }\n";
-var styles$5 = {"obs":"observation-module_obs__-5hGT","image":"observation-module_image__BBTP8"};
-styleInject(css_248z$5);
+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 Observation = function (_a) {
-    var imageUrl = _a.imageUrl, linkUrl = _a.linkUrl, children = _a.children;
+    var imageUrl = _a.imageUrl, linkUrl = _a.linkUrl, itemWidth = _a.itemWidth, children = _a.children;
     var gotoObservation = useCallback(function () {
         window.open(linkUrl);
     }, [linkUrl]);
-    return (jsxs("article", __assign({ className: styles$5.obs, onClick: gotoObservation }, { children: [jsx("div", { style: {
-                    width: 200,
-                    height: 200,
+    return (jsxs("article", __assign({ className: styles$4.obs, onClick: gotoObservation }, { children: [jsx("div", { style: {
+                    width: itemWidth,
+                    height: itemWidth,
                     overflow: "hidden",
                     borderRadius: 5,
                     background: "url(".concat(imageUrl, ") 50% 50% no-repeat"),
@@ -416,250 +418,194 @@ var Observation = function (_a) {
                 } }), children] })));
 };
 
-var css_248z$4 = ".general-module_page__ziNB9 {\n  padding: 80px 10px 10px;\n  margin: 0 auto;\n  max-width: 1100px; }\n  .general-module_page__ziNB9 h1 {\n    border-bottom: 1px solid #efefef;\n    padding-bottom: 2px;\n    margin-bottom: 25px; }\n\n.general-module_panel__WjWzy {\n  position: relative; }\n\n.general-module_grid__VwNiL {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  width: 100%;\n  grid-gap: 8px;\n  text-align: center; }\n\n.general-module_obsLabel__9R-PO {\n  padding: 10px 20px; }\n  .general-module_obsLabel__9R-PO a {\n    text-decoration: none;\n    color: #336699; }\n    .general-module_obsLabel__9R-PO a:hover {\n      text-decoration: underline; }\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.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.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";
-var styles$4 = {"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"};
-styleInject(css_248z$4);
+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 Loader = function (_a) {
     var loading = _a.loading;
-    var loaderClasses = styles$4.loader;
+    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$4.loaderBg }), jsx(LoadingSpinner, { color: "#000000" })] })));
+    return (jsxs("div", __assign({ className: loaderClasses }, { children: [jsx("div", { className: styles$3.loaderBg }), jsx(LoadingSpinner, { color: "#000000" })] })));
 };
 
 var NoResults = function () {
     return (jsx("p", { children: "No results found." }));
 };
 
-var RecentObservationLabel = function (obs) { return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", { children: obs.taxonCommonName || obs.taxonName }), jsx("div", { children: formatDate(obs.obsDate) }), jsx("div", { 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, data = _a.data, dataUrl = _a.dataUrl, _b = _a.source, source = _b === void 0 ? DataSource.autoLoad : _b, _c = _a.perPage, perPage = _c === void 0 ? PER_PAGE : _c, components = _a.components, className = _a.className;
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var _e = useState(function () { return (source === DataSource.dataProp) ? data : []; }), observations = _e[0], setObservations = _e[1];
-    useEffect(function () {
-        if (source !== DataSource.autoLoad) {
-            return;
-        }
-        if (!taxonId) {
-            console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        if (!placeId) {
-            console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        (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*/, getRecentObservations({ taxonId: taxonId, placeId: placeId, perPage: perPage })];
-                    case 1:
-                        obs = _a.sent();
-                        setObservations(obs.results);
-                        setLoading(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [source, taxonId, placeId, perPage]);
+/**
+ * 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
+ */
+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 _c = useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = useState([]), results = _d[0], setResults = _d[1];
     useEffect(function () {
-        if (source !== DataSource.url) {
-            return;
+        if (source === DataSourceEnum.autoLoad) {
+            if (!taxonId) {
+                console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
+                return;
+            }
+            if (!placeId) {
+                console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
+                return;
+            }
+            (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 1:
+                            obs = _a.sent();
+                            setResults(obs.results);
+                            setLoading(false);
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
         }
-        if (!dataUrl) {
-            console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
-            return;
+        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 () {
+                var obs, json;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            setLoading(true);
+                            return [4 /*yield*/, fetch(dataUrl)];
+                        case 1:
+                            obs = _a.sent();
+                            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*/];
+                    }
+                });
+            }); })();
         }
-        (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 1:
-                        obs = _a.sent();
-                        return [4 /*yield*/, obs.json()];
-                    case 2:
-                        json = _a.sent();
-                        setObservations(json.results);
-                        setLoading(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [source, dataUrl]);
+    }, [source, dataUrl, taxonId, placeId, year, numResults, isSummaryData]);
+    return {
+        loading: loading,
+        results: results
+    };
+};
+
+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 })) }))] })));
+};
+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 _e = useLoadSourceData({
+        taxonId: taxonId,
+        placeId: placeId,
+        numResults: numResults,
+        dataUrl: dataUrl,
+        source: source,
+        action: getRecentObservations
+    }), loading = _e.loading, observations = _e.results;
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : RecentObservationLabel;
-    var classes = styles$4.panel;
+    var componentClasses = styles$3.panel;
     if (className) {
-        classes += " ".concat(className);
+        componentClasses += " ".concat(className);
     }
-    return (jsxs("div", __assign({ className: classes }, { children: [jsx(Load, { loading: loading }), jsxs("div", __assign({ className: styles$4.grid }, { children: [!loading && 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)) }), obs.id)); })] }))] })));
+    var descClasses = styles$3.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)); })] }))] })));
 };
 
-var css_248z$3 = "/*\n * Replace this with your own classes\n *\n * e.g.\n * .container {\n * }\n*/\n";
-var styles$3 = {};
-styleInject(css_248z$3);
-
-var Error = function (props) {
-    return (jsx("div", __assign({ className: styles$3['container'] }, { children: jsx("h1", { children: "Welcome to Error!" }) })));
+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) }))] })));
 };
-
-var CommonTaxaLabel = function (data) { return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", { children: data.taxonCommonName || data.taxonName }), jsx("label", __assign({ className: 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.perPage, perPage = _b === void 0 ? PER_PAGE : _b, data = _a.data, dataUrl = _a.dataUrl, components = _a.components, className = _a.className;
-    var _c = useState(function () { return (source === DataSource.dataProp) ? data : []; }), taxa = _c[0], setTaxa = _c[1];
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    useEffect(function () {
-        if (source !== DataSource.autoLoad) {
-            return;
-        }
-        if (!taxonId) {
-            console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        if (!placeId) {
-            console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var resp;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setLoading(true);
-                        return [4 /*yield*/, getCommonTaxa({ taxonId: taxonId, placeId: placeId, year: year, perPage: perPage })];
-                    case 1:
-                        resp = _a.sent();
-                        setTaxa(resp.results);
-                        setLoading(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [source, year, placeId, taxonId, perPage]);
-    useEffect(function () {
-        if (source !== DataSource.url) {
-            return;
-        }
-        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 () {
-            var obs, json;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setLoading(true);
-                        return [4 /*yield*/, fetch(dataUrl)];
-                    case 1:
-                        obs = _a.sent();
-                        return [4 /*yield*/, obs.json()];
-                    case 2:
-                        json = _a.sent();
-                        setTaxa(json.results);
-                        setLoading(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [source, dataUrl]);
+    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 _d = useLoadSourceData({
+        taxonId: taxonId,
+        placeId: placeId,
+        numResults: numResults,
+        dataUrl: dataUrl,
+        source: source,
+        year: year,
+        action: getCommonTaxa
+    }), loading = _d.loading, taxa = _d.results;
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : CommonTaxaLabel;
-    (components === null || components === void 0 ? void 0 : components.error) ? components.error : Error;
-    var classes = styles$4.panel;
+    var elClasses = styles$3.panel;
     if (className) {
-        classes += " ".concat(className);
+        elClasses += " ".concat(className);
+    }
+    var descClasses = styles$3.tabDesc;
+    if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
+        descClasses += " ".concat(generalClasses.tabDesc);
     }
-    return (jsxs("div", __assign({ className: classes }, { children: [jsx(Load, { loading: loading }), !loading && taxa.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid }, { children: taxa.map(function (data) { return (jsx(Observation, __assign({ imageUrl: data.imageUrl.replace(/square/, "medium"), linkUrl: "".concat(BASE_URL, "/").concat(data.id) }, { children: jsx(Label, __assign({}, data)) }), data.id)); }) }))] })));
+    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)); }) }))] })));
 };
 
-var FavouritesLabel = function (data) { return (jsxs("div", __assign({ className: styles$4.obsLabel }, { children: [jsx("h3", { children: data.taxonCommonName || data.taxonName }), jsx("div", { children: data.observerUsername }), jsx("div", { children: formatDate(data.obsDate) }), jsx("label", __assign({ className: styles$4.count }, { children: data.numFaves }))] }))); };
+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 }))] })));
+};
 var Favourites = function (_a) {
-    var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, data = _a.data, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, _b = _a.perPage, perPage = _b === void 0 ? PER_PAGE : _b;
-    var _c = useState(function () { return (source === DataSource.dataProp) ? data : []; }), observations = _c[0], setObservations = _c[1];
-    var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    useEffect(function () {
-        if (source !== DataSource.autoLoad) {
-            return;
-        }
-        if (!taxonId) {
-            console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        if (!placeId) {
-            console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var resp;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setLoading(true);
-                        return [4 /*yield*/, getFavourites({ taxonId: taxonId, placeId: placeId, year: year, perPage: perPage })];
-                    case 1:
-                        resp = _a.sent();
-                        setObservations(resp.results);
-                        setLoading(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [source, year, placeId, taxonId, perPage]);
-    useEffect(function () {
-        if (source !== DataSource.url) {
-            return;
-        }
-        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 () {
-            var obs, json;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setLoading(true);
-                        return [4 /*yield*/, fetch(dataUrl)];
-                    case 1:
-                        obs = _a.sent();
-                        return [4 /*yield*/, obs.json()];
-                    case 2:
-                        json = _a.sent();
-                        setObservations(json.results);
-                        setLoading(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [source, dataUrl]);
+    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 _d = useLoadSourceData({
+        year: year,
+        taxonId: taxonId,
+        placeId: placeId,
+        numResults: numResults,
+        dataUrl: dataUrl,
+        source: source,
+        action: getFavourites
+    }), loading = _d.loading, observations = _d.results;
     var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
     var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : FavouritesLabel;
-    var classes = styles$4.panel;
+    var elClasses = styles$3.panel;
     if (className) {
-        classes += " ".concat(className);
+        elClasses += " ".concat(className);
+    }
+    var descClasses = styles$3.tabDesc;
+    if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
+        descClasses += " ".concat(generalClasses.tabDesc);
     }
-    return (jsxs("div", __assign({ className: classes }, { children: [jsx(Load, { loading: loading }), !loading && observations.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$4.grid }, { children: observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs)) }), obs.id)); }) }))] })));
+    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)); }) }))] })));
 };
 
-var css_248z$2 = ".summary-module_summaryPage__NMmsj {\n  position: relative; }\n  .summary-module_summaryPage__NMmsj section {\n    display: flex; }\n\n.summary-module_top__TKW0j {\n  list-style-type: none;\n  margin: 0;\n  padding: 0; }\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  .summary-module_top__TKW0j .summary-module_noAvatar__OsMWn {\n    display: inline-block;\n    background-color: #efefef; }\n  .summary-module_top__TKW0j h3 {\n    flex: 1;\n    color: black; }\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  .summary-module_top__TKW0j li {\n    border-radius: 3px; }\n    .summary-module_top__TKW0j li a {\n      display: flex;\n      align-items: center;\n      text-decoration: none; }\n    .summary-module_top__TKW0j li:hover {\n      background-color: #efefef; }\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.summary-module_seasonalityBlock__BL8L- {\n  flex: 3; }\n\n.summary-module_observersBlock__0wnbm {\n  flex: 1;\n  margin-left: 40px;\n  margin-bottom: -40px; }\n\n@media screen and (max-width: 800px) {\n  .summary-module_summaryPage__NMmsj section {\n    display: block; }\n  .summary-module_seasonalityBlock__BL8L- {\n    height: 250px;\n    margin-bottom: 80px; }\n  .summary-module_observersBlock__0wnbm {\n    margin-left: 0; } }\n";
+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"};
 styleInject(css_248z$2);
 
 var ObserverList = function (_a) {
-    var observers = _a.observers;
-    return (jsx("ul", __assign({ className: styles$2.top }, { children: observers.map(function (obs) { return (jsx("li", { children: jsxs("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.userName), target: "_blank", rel: "noreferrer" }, { children: [obs.iconUrl ? jsx("img", { src: obs.iconUrl || "", className: styles$2.avatar, alt: "User icon" }) :
-                        jsx("div", { className: styles$2.noAvatar }), jsx("h3", { children: obs.userName }), jsx("label", { children: numberWithCommas(obs.numObservations) })] })) }, obs.id)); }) })));
+    var observers = _a.observers, generalClasses = _a.generalClasses, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var classes = styles$2.top;
+    if (className) {
+        classes += " ".concat(className);
+    }
+    return (jsx("ul", __assign({ className: classes }, { children: observers.map(function (obs) { return (jsx("li", { children: jsxs("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.userName), target: "_blank", rel: "noreferrer" }, { children: [obs.iconUrl ? jsx("img", { src: obs.iconUrl || "", className: styles$2.avatar, alt: "User icon" }) :
+                        jsx("div", { className: styles$2.noAvatar }), jsx("h3", { children: obs.userName }), jsx("label", __assign({ className: generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.observationCount }, { children: numberWithCommas(obs.numObservations) }))] })) }, obs.id)); }) })));
 };
 
 var SeasonalityGraph = function (_a) {
@@ -691,81 +637,58 @@ var SeasonalityGraph = function (_a) {
 
 var Summary = function (_a) {
     var _b, _c, _d;
-    var source = _a.source; _a.data; var dataUrl = _a.dataUrl, taxonId = _a.taxonId, placeId = _a.placeId, year = _a.year;
-    var _e = useState({}), summaryData = _e[0], setSummaryData = _e[1];
-    var _f = useState(false), loading = _f[0], setLoading = _f[1];
-    useEffect(function () {
-        if (source !== DataSource.autoLoad) {
-            return;
-        }
-        if (!taxonId) {
-            console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        if (!placeId) {
-            console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
-            return;
-        }
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var data;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        setLoading(true);
-                        return [4 /*yield*/, getSummary({ taxonId: taxonId, placeId: placeId, year: year })];
-                    case 1:
-                        data = _a.sent();
-                        setSummaryData(data);
-                        setLoading(false);
-                        return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [source, year, placeId, taxonId]);
-    useEffect(function () {
-        if (source !== DataSource.url) {
-            return;
-        }
-        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 () {
-            var obs, json;
+    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({
+        year: year,
+        taxonId: taxonId,
+        placeId: placeId,
+        dataUrl: dataUrl,
+        source: source,
+        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 () {
+            var results;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        setLoading(true);
-                        return [4 /*yield*/, fetch(dataUrl)];
+                    case 0: return [4 /*yield*/, getSummary(data)];
                     case 1:
-                        obs = _a.sent();
-                        return [4 /*yield*/, obs.json()];
-                    case 2:
-                        json = _a.sent();
-                        setSummaryData(json);
-                        setLoading(false);
-                        return [2 /*return*/];
+                        results = _a.sent();
+                        return [2 /*return*/, { results: results }];
                 }
             });
-        }); })();
-    }, [source, dataUrl]);
-    return (jsxs("div", __assign({ className: styles$2.summaryPage }, { children: [jsx(Loader, { loading: loading }), jsxs("ul", __assign({ className: styles$2.countSummary }, { 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 })] }))] })] })));
+        }); }
+    }), loading = _e.loading, summaryData = _e.results;
+    var countSummaryClasses = styles$2.countSummary;
+    if (statsCountSummaryClass) {
+        countSummaryClasses += " ".concat(statsCountSummaryClass);
+    }
+    var descClasses = styles$2.tabDesc;
+    if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
+        descClasses += " ".concat(generalClasses.tabDesc);
+    }
+    var classList = styles$2.summaryPage;
+    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 }))] }))] })] })));
 };
 
-var css_248z$1 = ".year-dropdown-module_dropdown__iD9sj {\n  font-size: 18px; }\n";
+var css_248z$1 = ".year-dropdown-module_dropdown__iD9sj {\n  font-size: 18px;\n}";
 var styles$1 = {"dropdown":"year-dropdown-module_dropdown__iD9sj"};
 styleInject(css_248z$1);
 
 var Years = function (_a) {
-    var value = _a.value, onChange = _a.onChange, className = _a.className;
-    var years = useState(function () {
+    var value = _a.value, onChange = _a.onChange, numYears = _a.numYears, className = _a.className;
+    var _b = useState([]), years = _b[0], setYears = _b[1];
+    useEffect(function () {
         var currentYear = getCurrentYear();
         var years = [];
-        for (var i = currentYear; i >= currentYear - 10; i--) {
+        for (var i = currentYear; i > currentYear - numYears; i--) {
             years.push(i);
         }
-        return years;
-    })[0];
+        setYears(years);
+    }, [numYears]);
     var classes = styles$1.dropdown;
     if (className) {
         classes += " ".concat(className);
@@ -773,16 +696,16 @@ 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  .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    .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@media screen and (max-width: 600px) {\n  .tabs-module_tabs__UMeM9 li {\n    margin: 0 5px;\n    padding: 4px 6px; } }\n";
+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"};
 styleInject(css_248z);
 
 var _a;
 var defaultTitles = (_a = {},
-    _a[Tab.recent] = "Recent",
-    _a[Tab.commonTaxa] = "Most common",
-    _a[Tab.favourites] = "Most favourited",
-    _a[Tab.stats] = "General stats",
+    _a[Feature.recentObservations] = "Recent",
+    _a[Feature.commonTaxa] = "Most common",
+    _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];
@@ -790,88 +713,98 @@ var useFeatureTitles = function (features) {
         var _a;
         var _b, _c, _d, _e;
         setTitles((_a = {},
-            _a[Tab.recent] = ((_b = features.recentObservations) === null || _b === void 0 ? void 0 : _b.label) || defaultTitles[Tab.recent],
-            _a[Tab.commonTaxa] = ((_c = features.commonTaxa) === null || _c === void 0 ? void 0 : _c.label) || defaultTitles[Tab.commonTaxa],
-            _a[Tab.favourites] = ((_d = features.favourites) === null || _d === void 0 ? void 0 : _d.label) || defaultTitles[Tab.favourites],
-            _a[Tab.stats] = ((_e = features.stats) === null || _e === void 0 ? void 0 : _e.label) || defaultTitles[Tab.stats],
+            _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;
 };
+var convertFeaturesToObj = function (features) {
+    var featuresObj = {};
+    features.forEach(function (row) {
+        var feature = row.feature, other = __rest(row, ["feature"]);
+        featuresObj[feature] = other;
+    });
+    return featuresObj;
+};
 
 var Tabs = function (_a) {
-    var selectedTab = _a.selectedTab, onChangeTab = _a.onChangeTab, features = _a.features;
+    var selectedTab = _a.selectedTab, onChangeTab = _a.onChangeTab, features = _a.features, className = _a.className;
     var titles = useFeatureTitles(features);
-    return (jsxs("ul", __assign({ className: styles.tabs }, { children: [features.recentObservations && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.recent); }, className: selectedTab === Tab.recent ? styles.selected : "" }, { children: titles[Tab.recent] }))), features.commonTaxa && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.commonTaxa); }, className: selectedTab === Tab.commonTaxa ? styles.selected : "" }, { children: titles[Tab.commonTaxa] }))), features.favourites && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.favourites); }, className: selectedTab === Tab.favourites ? styles.selected : "" }, { children: titles[Tab.favourites] }))), features.stats && (jsx("li", __assign({ onClick: function () { return onChangeTab(Tab.stats); }, className: selectedTab === Tab.stats ? styles.selected : "" }, { children: titles[Tab.stats] })))] })));
+    var classes = styles.tabs;
+    if (className) {
+        classes += " ".concat(className);
+    }
+    var items = features.map(function (item) {
+        if (item.feature == Feature.recentObservations) {
+            return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.recentObservations); }, className: selectedTab === Feature.recentObservations ? styles.selected : "" }, { children: titles[Feature.recentObservations] }), Feature.recentObservations));
+        }
+        else if (item.feature == Feature.commonTaxa) {
+            return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.commonTaxa); }, className: selectedTab === Feature.commonTaxa ? styles.selected : "" }, { children: titles[Feature.commonTaxa] }), Feature.commonTaxa));
+        }
+        else if (item.feature == Feature.favourites) {
+            return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.favourites); }, className: selectedTab === Feature.favourites ? styles.selected : "" }, { children: titles[Feature.favourites] }), Feature.favourites));
+        }
+        else if (item.feature == Feature.stats) {
+            return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.stats); }, className: selectedTab === Feature.stats ? styles.selected : "" }, { children: titles[Feature.stats] }), Feature.stats));
+        }
+        // possibly a user has included something wacky
+        return undefined;
+    });
+    return (jsx("ul", __assign({ className: classes }, { children: items })));
 };
 
 var TaxonPanel = function (_a) {
-    var taxonId = _a.taxonId, placeId = _a.placeId, dataSource = _a.dataSource, config = _a.config, baseURL = _a.baseURL;
-    var _b = useState(Tab.recent), tab = _b[0], setTab = _b[1];
-    var _c = useState("all"), year = _c[0], setYear = _c[1];
-    var titles = useFeatureTitles(config.features);
-    var _d = useState(function () { return config.taxa.find(function (i) { return i.taxonId === taxonId; }); }), taxonInfo = _d[0]; _d[1];
-    var _e = useState(function () { return config.places.find(function (i) { return i.placeId === placeId; }); }), placeInfo = _e[0]; _e[1];
+    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 _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 () {
+        return convertFeaturesToObj(features);
+    }, [features]);
+    var titles = useFeatureTitles(featuresObj);
+    var getProps = function (feature) {
+        var _a, _b, _c;
+        var props = {
+            source: dataSource,
+            itemWidth: itemWidth,
+            tabDesc: (_a = featuresObj[feature]) === null || _a === void 0 ? void 0 : _a.desc,
+            generalClasses: generalClasses,
+            className: (_b = featuresObj[feature]) === null || _b === void 0 ? void 0 : _b.className
+        };
+        if (dataSource === DataSourceEnum.url) {
+            props.dataUrl = dataSourceBaseUrl + '/' + getSourceFile(feature, taxon, place, year);
+        }
+        else {
+            props.placeId = place.id;
+            props.taxonId = taxon.id;
+        }
+        if (feature !== Feature.stats) {
+            props.numResults = (_c = featuresObj[feature]) === null || _c === void 0 ? void 0 : _c.numResults;
+        }
+        if (feature !== Feature.recentObservations) {
+            props.year = year;
+        }
+        return props;
+    };
     var getCurrentTab = function () {
+        var _a, _b;
         switch (tab) {
-            case Tab.recent: {
-                var props = {
-                    source: dataSource
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
-                }
-                else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
-                return (jsx(RecentObservations, __assign({}, props)));
-            }
-            case Tab.commonTaxa: {
-                var props = {
-                    source: dataSource,
-                    year: year
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
-                }
-                else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
-                return (jsx(CommonTaxa, __assign({}, props)));
-            }
-            case Tab.favourites: {
-                var props = {
-                    source: dataSource,
-                    year: year
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.favourites, taxonInfo, placeInfo, year);
-                }
-                else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
-                return (jsx(Favourites, __assign({}, props)));
-            }
-            case Tab.stats: {
-                var props = {
-                    source: dataSource,
-                    year: year
-                };
-                if (dataSource === DataSource.url) {
-                    props.dataUrl = baseURL + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
-                }
-                else {
-                    props.placeId = placeId;
-                    props.taxonId = taxonId;
-                }
-                return jsx(Summary, __assign({}, props));
-            }
+            case Feature.recentObservations:
+                return jsx(RecentObservations, __assign({}, getProps(Feature.recentObservations)));
+            case Feature.commonTaxa:
+                return jsx(CommonTaxa, __assign({}, getProps(Feature.commonTaxa)));
+            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 (jsxs("div", __assign({ className: styles$4.page }, { children: [jsx(Tabs, { selectedTab: tab, onChangeTab: setTab, features: config.features }), jsxs("div", { children: [tab !== Tab.recent && (jsx("div", __assign({ style: { float: "right" } }, { children: jsx(Years, { value: year, onChange: setYear }) }))), jsx("h1", { children: titles[tab] })] }), getCurrentTab()] })));
+    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()] })));
 };
 
-export { constants as C, CommonTaxa, CommonTaxaLabel, DataSource, Favourites, FavouritesLabel, Feature, Observation, RecentObservationLabel, RecentObservations, SeasonalityGraph, Summary, Tab, 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, formatDate, getCommonTaxa, getCurrentYear, getFavourites, getObservationSummary, getObserverSummary, getRecentObservations, getSeasonalityData, getSourceFile, getSummary, numberWithCommas };