col-browser 2.2.0 → 2.2.2

package/umd/col-browser.js

@@ -68681,7 +68681,10 @@ html body {
               rootTotal,
               rootLoading: false,
               treeData: [...this.state.treeData, ...treeData],
-              expandedKeys: treeData.length < 10 ? treeData.map((n2) => n2.taxon.id).filter((n2) => n2 === "CS5HF") : [],
+              // Nothing is auto-expanded by default. Consumers open a specific root
+              // (or deep taxon) by passing `defaultTaxonKey`/`expandedTaxonKey` —
+              // e.g. defaultTaxonKey="CS5HF" opens Eukaryota in current COL releases.
+              expandedKeys: [],
               error: null
             },
             () => {
@@ -77770,6 +77773,84 @@ html body {
       ] });
     }
   }
+  const styles$1 = {
+    tip: {
+      color: "rgba(0,0,0,.45)",
+      marginLeft: "4px"
+    },
+    icon: {
+      marginTop: "4px"
+    }
+  };
+  const Help = ({ title, classes }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(React.Fragment, { children: title && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.tip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title, getPopupContainer: () => document.getElementsByClassName(`catalogue-of-life`)[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$k, { className: classes.icon }) }) }) });
+  };
+  const Help$1 = createWithStyles(styles$1)(Help);
+  const styles = {
+    formItem: {
+      paddingBottom: 0,
+      width: "100%",
+      clear: "both",
+      borderBottom: "1px solid #eee",
+      "&:last-of-type": {
+        border: "none"
+      },
+      "&>div": {
+        paddingLeft: 10,
+        paddingRight: 10
+      }
+    },
+    label: {
+      display: "block",
+      color: "rgba(0, 0, 0, 0.85)"
+    },
+    content: {
+      wordBreak: "break-word",
+      marginBottom: 0
+    },
+    noContent: {
+      wordBreak: "break-word",
+      color: "#bbb",
+      marginBottom: 0
+    },
+    contentCol: {
+      wordBreak: "break-word"
+    },
+    smallMargin: {
+      marginBottom: 3,
+      marginTop: 3
+    },
+    mediumMargin: {
+      marginBottom: 10,
+      marginTop: 10
+    }
+  };
+  const PresentationItem = ({ label, helpText, classes, children, width, md: md2, size }) => {
+    const getValue2 = () => {
+      let value;
+      if (Array.isArray(children) && children.length > 0) {
+        value = children.map((item, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.content, children: item }, i));
+      } else if (!Array.isArray(children) && typeof children !== "undefined") {
+        value = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.content, children });
+      }
+      return value;
+    };
+    const medium = md2 || 8;
+    const mediumCol2 = medium < 24 ? 24 - medium : 24;
+    const marginSize = size === "medium" ? classes.mediumMargin : classes.smallMargin;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { className: classes.formItem, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { sm: 24, md: medium, style: width < MEDIUM ? { marginBottom: 0 } : {}, className: marginSize, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("dt", { className: classes.label, children: [
+        label,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Help$1, { title: helpText })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { sm: 24, md: mediumCol2, style: width < MEDIUM ? { marginTop: 0 } : {}, className: marginSize, children: getValue2() })
+    ] });
+  };
+  PresentationItem.propTypes = {
+    label: PropTypes.string.isRequired,
+    helpText: PropTypes.object
+  };
+  const PresentationItem$1 = withWidth()(createWithStyles(styles)(PresentationItem));
   const INFRASPECIFIC_RANKS = [
     "subspecies",
     "variety",
@@ -78973,7 +79054,9 @@ html body {
     showDistributionMap,
     focalTaxon,
     rankOrder,
-    gbifChecklistKey
+    gbifChecklistKey,
+    label,
+    md: md2
   }) => {
     const mappable = data.filter(isMappable);
     const baseUnmappable = data.length - mappable.length;
@@ -79014,22 +79097,16 @@ html body {
     const gbifAvailable = !hasGbifConfigured ? false : gbifCount === null || gbifCount > 0;
     const allMappableFailed = mappable.length > 0 && fetchFailures >= mappable.length;
     const showMap = showDistributionMap && (mappable.length > 0 || gbifAvailable) && !(mappable.length > 0 && allMappableFailed && !gbifAvailable);
-    if (!showMap && hasGbifConfigured && mappable.length === 0 && gbifCount === 0) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: style2, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#888" }, children: "No occurrence data on GBIF for this taxon." }) });
-    }
-    if (!showMap) {
-      if (!hasAnyRecords) return null;
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: style2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListView, { datasetKey, data }) });
-    }
+    if (!showMap && !hasAnyRecords) return null;
     const unmappable = baseUnmappable + fetchFailures;
     const showToggle = hasAnyRecords;
-    const activeView = showToggle ? view : "map";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: style2, children: [
+    const activeView = showMap && showToggle ? view : showMap ? "map" : "list";
+    const body = activeView === "map" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       showToggle ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
         Radio.Group,
         {
           size: "small",
-          value: activeView,
+          value: view,
           onChange: (e2) => setView(e2.target.value),
           style: { marginBottom: 8 },
           children: [
@@ -79042,28 +79119,31 @@ html body {
         // map's top edge lines up with the "Distributions" label.
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: 24, marginBottom: 8 } })
       ),
-      activeView === "map" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DistributionsMap,
-          {
-            records: mappable,
-            onUnmappable: setFetchFailures,
-            datasetKey,
-            focalTaxon,
-            rankOrder,
-            gbifChecklistKey,
-            gbifAvailable
-          }
-        ),
-        showToggle && unmappable > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { onClick: () => setView("list"), style: { cursor: "pointer" }, children: [
-          "+",
-          unmappable,
-          " distribution",
-          unmappable === 1 ? "" : "s",
-          " not on map"
-        ] }) })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ListView, { datasetKey, data })
-    ] });
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DistributionsMap,
+        {
+          records: mappable,
+          onUnmappable: setFetchFailures,
+          datasetKey,
+          focalTaxon,
+          rankOrder,
+          gbifChecklistKey,
+          gbifAvailable
+        }
+      ),
+      showToggle && unmappable > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { onClick: () => setView("list"), style: { cursor: "pointer" }, children: [
+        "+",
+        unmappable,
+        " distribution",
+        unmappable === 1 ? "" : "s",
+        " not on map"
+      ] }) })
+    ] }) : (
+      // List view: either the user toggled to it, or there is no map to show.
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ListView, { datasetKey, data })
+    );
+    const content = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: style2, children: body });
+    return label ? /* @__PURE__ */ jsxRuntimeExports.jsx(PresentationItem$1, { md: md2, label, children: content }) : content;
   };
   const rankStyle = {
     color: "rgba(0, 0, 0, 0.45)",
@@ -79080,84 +79160,6 @@ html body {
       i < data.length - 1 && " >"
     ] }, t2.rank))
   ] });
-  const styles$1 = {
-    tip: {
-      color: "rgba(0,0,0,.45)",
-      marginLeft: "4px"
-    },
-    icon: {
-      marginTop: "4px"
-    }
-  };
-  const Help = ({ title, classes }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(React.Fragment, { children: title && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.tip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title, getPopupContainer: () => document.getElementsByClassName(`catalogue-of-life`)[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$k, { className: classes.icon }) }) }) });
-  };
-  const Help$1 = createWithStyles(styles$1)(Help);
-  const styles = {
-    formItem: {
-      paddingBottom: 0,
-      width: "100%",
-      clear: "both",
-      borderBottom: "1px solid #eee",
-      "&:last-of-type": {
-        border: "none"
-      },
-      "&>div": {
-        paddingLeft: 10,
-        paddingRight: 10
-      }
-    },
-    label: {
-      display: "block",
-      color: "rgba(0, 0, 0, 0.85)"
-    },
-    content: {
-      wordBreak: "break-word",
-      marginBottom: 0
-    },
-    noContent: {
-      wordBreak: "break-word",
-      color: "#bbb",
-      marginBottom: 0
-    },
-    contentCol: {
-      wordBreak: "break-word"
-    },
-    smallMargin: {
-      marginBottom: 3,
-      marginTop: 3
-    },
-    mediumMargin: {
-      marginBottom: 10,
-      marginTop: 10
-    }
-  };
-  const PresentationItem = ({ label, helpText, classes, children, width, md: md2, size }) => {
-    const getValue2 = () => {
-      let value;
-      if (Array.isArray(children) && children.length > 0) {
-        value = children.map((item, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.content, children: item }, i));
-      } else if (!Array.isArray(children) && typeof children !== "undefined") {
-        value = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.content, children });
-      }
-      return value;
-    };
-    const medium = md2 || 8;
-    const mediumCol2 = medium < 24 ? 24 - medium : 24;
-    const marginSize = size === "medium" ? classes.mediumMargin : classes.smallMargin;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Row, { className: classes.formItem, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { sm: 24, md: medium, style: width < MEDIUM ? { marginBottom: 0 } : {}, className: marginSize, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("dt", { className: classes.label, children: [
-        label,
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Help$1, { title: helpText })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { sm: 24, md: mediumCol2, style: width < MEDIUM ? { marginTop: 0 } : {}, className: marginSize, children: getValue2() })
-    ] });
-  };
-  PresentationItem.propTypes = {
-    label: PropTypes.string.isRequired,
-    helpText: PropTypes.object
-  };
-  const PresentationItem$1 = withWidth()(createWithStyles(styles)(PresentationItem));
   const getLabel = (r2, reverse) => {
     if (!reverse) {
       switch (r2.type) {
@@ -87571,10 +87573,15 @@ html body {
                 datasetKey: taxon.datasetKey
               }
             ) }),
-            (get(info, "distributions") || showDistributionMap && gbifChecklistKey && taxon) && /* @__PURE__ */ jsxRuntimeExports.jsx(PresentationItem$1, { md, label: "Distributions", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            (get(info, "distributions") || showDistributionMap && gbifChecklistKey && taxon) && // Distributions owns its labelled block so it can hide entirely
+            // (label included) when there is nothing to show — including after
+            // the async GBIF occurrence lookup comes back empty.
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
               DistributionsTable,
               {
                 style: { marginTop: "-3px" },
+                label: "Distributions",
+                md,
                 data: (info == null ? void 0 : info.distributions) || [],
                 datasetKey,
                 showDistributionMap,
@@ -87582,7 +87589,7 @@ html body {
                 rankOrder: rank,
                 gbifChecklistKey
               }
-            ) }),
+            ),
             get(taxon, "environments") && /* @__PURE__ */ jsxRuntimeExports.jsx(PresentationItem$1, { md, label: "Environment(s)", children: get(taxon, "environments").join(", ") }),
             get(taxon, "remarks") && /* @__PURE__ */ jsxRuntimeExports.jsx(PresentationItem$1, { md, label: "Additional Data", children: taxon.remarks }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Row, { children: get(taxon, "accordingTo") && /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { span: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(PresentationItem$1, { md: md * 2, label: "According to", children: [
@@ -89887,40 +89894,41 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
     window.addEventListener(evt, cb);
     return () => window.removeEventListener(evt, cb);
   };
-  const hrefFor = (mode, prefix2, args) => {
+  const hrefFor = (mode, prefix2, args, reserved = {}) => {
     if (!prefix2) return null;
     const arg = args == null ? "" : typeof args === "object" ? "" : String(args);
-    const tail = typeof args === "object" && args && Object.keys(args).length > 0 ? `?${queryString.stringify(args, { arrayFormat: "none" })}` : "";
+    const queryObj = typeof args === "object" && args ? { ...args, ...reserved } : { ...reserved };
+    const tail = Object.keys(queryObj).length > 0 ? `?${queryString.stringify(queryObj, { arrayFormat: "none" })}` : "";
     const url = `${prefix2}${arg}${tail}`;
     return isHash(mode) ? `#${url}` : url;
   };
-  const navigate = (mode, navigation2, prefix2, args) => {
+  const navigate = (mode, navigation2, prefix2, args, reserved = {}) => {
     if (!prefix2) return;
     if (navigation2 === "reload") {
-      const url = hrefFor(mode, prefix2, args);
+      const url = hrefFor(mode, prefix2, args, reserved);
       if (url != null && typeof window !== "undefined") {
         window.location.assign(url);
       }
       return;
     }
     let path = prefix2;
-    let search = null;
+    let search = Object.keys(reserved).length > 0 ? { ...reserved } : null;
     if (typeof args === "string" || typeof args === "number") {
       path = `${prefix2}${args}`;
     } else if (args && typeof args === "object") {
-      search = args;
+      search = { ...search || {}, ...args };
     }
     writeLocation(mode, path, search);
   };
-  const buildNavProps = (mode, navigation2, paths) => ({
-    hrefForTaxon: (id) => hrefFor(mode, paths.taxon, id),
-    hrefForTree: (a) => hrefFor(mode, paths.tree, a),
-    hrefForSearch: (a) => hrefFor(mode, paths.search, a),
-    hrefForSource: (id) => hrefFor(mode, paths.source, id),
-    onNavigateToTaxon: (id) => navigate(mode, navigation2, paths.taxon, id),
-    onNavigateToTree: (a) => navigate(mode, navigation2, paths.tree, a),
-    onNavigateToSearch: (a) => navigate(mode, navigation2, paths.search, a),
-    onNavigateToSource: (id) => navigate(mode, navigation2, paths.source, id)
+  const buildNavProps = (mode, navigation2, paths, reserved = {}) => ({
+    hrefForTaxon: (id) => hrefFor(mode, paths.taxon, id, reserved),
+    hrefForTree: (a) => hrefFor(mode, paths.tree, a, reserved),
+    hrefForSearch: (a) => hrefFor(mode, paths.search, a, reserved),
+    hrefForSource: (id) => hrefFor(mode, paths.source, id, reserved),
+    onNavigateToTaxon: (id) => navigate(mode, navigation2, paths.taxon, id, reserved),
+    onNavigateToTree: (a) => navigate(mode, navigation2, paths.tree, a, reserved),
+    onNavigateToSearch: (a) => navigate(mode, navigation2, paths.search, a, reserved),
+    onNavigateToSource: (id) => navigate(mode, navigation2, paths.source, id, reserved)
   });
   const lastSegmentAfter = (path, prefix2) => {
     if (!prefix2) return void 0;
@@ -89932,12 +89940,20 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
     return path.slice(prefix2.length).split("/").filter(Boolean).pop();
   };
   function withRouting(Component, options) {
-    const { kind, mode = "path", navigation: navigation2 = "spa", paths = {} } = options;
+    const { kind, mode = "path", navigation: navigation2 = "spa", paths = {}, query = "" } = options;
+    const reserved = query ? queryString.parse(query) : {};
+    const reservedKeys = Object.keys(reserved);
+    const stripReserved = (obj) => {
+      if (reservedKeys.length === 0) return obj;
+      const out = { ...obj };
+      for (const k of reservedKeys) delete out[k];
+      return out;
+    };
     const Wrapped = (props) => {
       const [tick, setTick] = reactExports.useState(0);
       reactExports.useEffect(() => subscribe(mode, () => setTick((t2) => t2 + 1)), []);
       const { path, search } = readLocationKind(mode);
-      const navProps = reactExports.useMemo(() => buildNavProps(mode, navigation2, paths), []);
+      const navProps = reactExports.useMemo(() => buildNavProps(mode, navigation2, paths, reserved), []);
       let extra = {};
       if (kind === "taxon") {
         extra.taxonKey = lastSegmentAfter(path, paths.taxon);
@@ -89950,7 +89966,7 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
       } else if (kind === "bibtex") {
         extra.sourceDatasetKey = lastSegmentAfter(path, paths.bibtex);
       } else if (kind === "tree") {
-        const parsed = queryString.parse(search);
+        const parsed = stripReserved(queryString.parse(search));
         extra.expandedTaxonKey = parsed.taxonKey || void 0;
         extra.onExpandedTaxonKeyChange = reactExports.useCallback((id) => {
           const cur = readLocationKind(mode);
@@ -89960,11 +89976,11 @@ Please report this to https://github.com/markedjs/marked.`, e2) {
           writeLocation(mode, cur.path || paths.tree || "/", next2);
         }, []);
       } else if (kind === "search") {
-        const parsed = queryString.parse(search, { arrayFormat: "none" });
+        const parsed = stripReserved(queryString.parse(search, { arrayFormat: "none" }));
         extra.filters = parsed;
         extra.onFiltersChange = reactExports.useCallback((filters) => {
           const cur = readLocationKind(mode);
-          writeLocation(mode, cur.path || paths.search || "/", filters);
+          writeLocation(mode, cur.path || paths.search || "/", { ...reserved, ...filters });
         }, []);
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...navProps, ...extra, ...props });