@genspectrum/dashboard-components 0.11.2 → 0.11.4

package/dist/components.js

@@ -582,11 +582,11 @@ function GsAppError(error) {
 var f$1 = 0;
 function u$1(e2, t2, n3, o2, i2, u2) {
   t2 || (t2 = {});
-  var a2, c2, l2 = t2;
-  "ref" in t2 && (a2 = t2.ref, delete t2.ref);
-  var p2 = { type: e2, props: l2, key: n3, ref: a2, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --f$1, __i: -1, __u: 0, __source: i2, __self: u2 };
-  if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === l2[c2] && (l2[c2] = a2[c2]);
-  return options.vnode && options.vnode(p2), p2;
+  var a2, c2, p2 = t2;
+  if ("ref" in p2) for (c2 in p2 = {}, t2) "ref" == c2 ? a2 = t2[c2] : p2[c2] = t2[c2];
+  var l2 = { type: e2, props: p2, key: n3, ref: a2, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --f$1, __i: -1, __u: 0, __source: i2, __self: u2 };
+  if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === p2[c2] && (p2[c2] = a2[c2]);
+  return options.vnode && options.vnode(l2), l2;
 }
 var t, r, u, i, o = 0, f = [], c = options, e = c.__b, a = c.__r, v = c.diffed, l = c.__c, m = c.unmount, s = c.__;
 function d(n3, t2) {
@@ -1242,6 +1242,109 @@ const CsvDownloadButton = ({
   };
   return /* @__PURE__ */ u$1("button", { className, onClick: download, children: label });
 };
+function useModalRef() {
+  return A(null);
+}
+const Modal = ({ children, modalRef }) => {
+  return /* @__PURE__ */ u$1("dialog", { ref: modalRef, className: "modal modal-bottom sm:modal-middle", children: [
+    /* @__PURE__ */ u$1("div", { className: "modal-box sm:max-w-5xl", children: [
+      /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+      /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
+      /* @__PURE__ */ u$1("div", { className: "modal-action", children: /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
+    ] }),
+    /* @__PURE__ */ u$1("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "Helper to close when clicked outside" }) })
+  ] });
+};
+const Info = ({ children }) => {
+  const modalRef = useModalRef();
+  const toggleHelp = () => {
+    var _a;
+    (_a = modalRef.current) == null ? void 0 : _a.showModal();
+  };
+  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
+    /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
+    /* @__PURE__ */ u$1(Modal, { modalRef, children })
+  ] });
+};
+const InfoHeadline1 = ({ children }) => {
+  return /* @__PURE__ */ u$1("h1", { className: "text-lg font-bold", children });
+};
+const InfoHeadline2 = ({ children }) => {
+  return /* @__PURE__ */ u$1("h2", { className: "text-base font-bold mt-4", children });
+};
+const InfoParagraph = ({ children }) => {
+  return /* @__PURE__ */ u$1("p", { className: "text-justify my-1", children });
+};
+const InfoLink = ({ children, href }) => {
+  return /* @__PURE__ */ u$1("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
+};
+const InfoComponentCode = ({ componentName, params, lapisUrl }) => {
+  const componentCode = componentParametersToCode(componentName, params, lapisUrl);
+  const codePenData = {
+    title: "GenSpectrum dashboard component",
+    html: generateFullExampleCode(componentCode, componentName),
+    layout: "left",
+    editors: "100"
+  };
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Use this component yourself" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This component was created using the following parameters:",
+      /* @__PURE__ */ u$1("div", { className: "p-4 border border-gray-200 rounded-lg overflow-x-auto", children: /* @__PURE__ */ u$1("pre", { children: /* @__PURE__ */ u$1("code", { children: componentCode }) }) })
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "You can add this component to your own website using the",
+      " ",
+      /* @__PURE__ */ u$1(InfoLink, { href: "https://github.com/GenSpectrum/dashboard-components", children: "GenSpectrum dashboard components library" }),
+      " ",
+      "and the code from above."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("form", { action: "https://codepen.io/pen/define", method: "POST", target: "_blank", children: [
+      /* @__PURE__ */ u$1(
+        "input",
+        {
+          type: "hidden",
+          name: "data",
+          value: JSON.stringify(codePenData).replace(/"/g, """).replace(/'/g, "'")
+        }
+      ),
+      /* @__PURE__ */ u$1("button", { className: "text-blue-600 hover:text-blue-800", type: "submit", children: "Click here to try it out on CodePen." })
+    ] }) })
+  ] });
+};
+function componentParametersToCode(componentName, params, lapisUrl) {
+  const stringifyIfNeeded = (value) => {
+    return typeof value === "object" ? JSON.stringify(value) : value;
+  };
+  const attributes = indentLines(
+    Object.entries(params).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
+    4
+  );
+  return `<gs-app lapis="${lapisUrl}">
+  <gs-${componentName}
+${attributes}
+  />
+</gs-app>`;
+}
+function generateFullExampleCode(componentCode, componentName) {
+  const storyBookPath = `/docs/visualization-${componentName}--docs`;
+  return `<html>
+<head>
+  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/standalone-bundle/dashboard-components.js"><\/script>
+  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
+</head>
+
+<body>
+  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
+${indentLines(componentCode, 2)}
+</body>
+</html>
+`;
+}
+function indentLines(text, numberSpaces) {
+  const spaces = " ".repeat(numberSpaces);
+  return text.split("\n").map((line) => spaces + line).join("\n");
+}
 const GS_ERROR_EVENT_TYPE = "gs-error";
 class ErrorEvent extends Event {
   constructor(error) {
@@ -1270,7 +1373,7 @@ class InvalidPropsError extends Error {
 const ErrorDisplay = ({ error, resetError, layout }) => {
   console.error(error);
   const containerRef = A(null);
-  const ref = A(null);
+  const modalRef = useModalRef();
   y(() => {
     var _a;
     (_a = containerRef.current) == null ? void 0 : _a.dispatchEvent(new ErrorEvent(error));
@@ -1288,17 +1391,20 @@ const ErrorDisplay = ({ error, resetError, layout }) => {
             "Oops! Something went wrong.",
             details !== void 0 && /* @__PURE__ */ u$1(Fragment, { children: [
               " ",
-              /* @__PURE__ */ u$1("button", { className: "underline hover:text-gray-400", onClick: () => {
-                var _a;
-                return (_a = ref.current) == null ? void 0 : _a.showModal();
-              }, children: "Show details." }),
-              /* @__PURE__ */ u$1("dialog", { ref, class: "modal", children: [
-                /* @__PURE__ */ u$1("div", { class: "modal-box", children: [
-                  /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
-                  /* @__PURE__ */ u$1("h1", { class: "text-lg", children: details.headline }),
-                  /* @__PURE__ */ u$1("div", { class: "py-4", children: details.message })
-                ] }),
-                /* @__PURE__ */ u$1("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "close" }) })
+              /* @__PURE__ */ u$1(
+                "button",
+                {
+                  className: "underline hover:text-gray-400",
+                  onClick: () => {
+                    var _a;
+                    return (_a = modalRef.current) == null ? void 0 : _a.showModal();
+                  },
+                  children: "Show details."
+                }
+              ),
+              /* @__PURE__ */ u$1(Modal, { modalRef, children: [
+                /* @__PURE__ */ u$1(InfoHeadline1, { children: details.headline }),
+                /* @__PURE__ */ u$1(InfoParagraph, { children: details.message })
               ] })
             ] })
           ] })
@@ -1465,103 +1571,6 @@ function useFullscreenStatus() {
   }, []);
   return isFullscreen;
 }
-const Info = ({ children }) => {
-  const dialogRef = A(null);
-  const toggleHelp = () => {
-    var _a;
-    (_a = dialogRef.current) == null ? void 0 : _a.showModal();
-  };
-  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
-    /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
-    /* @__PURE__ */ u$1("dialog", { ref: dialogRef, className: "modal modal-bottom sm:modal-middle", children: [
-      /* @__PURE__ */ u$1("div", { className: "modal-box sm:max-w-5xl", children: [
-        /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
-        /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
-        /* @__PURE__ */ u$1("div", { className: "modal-action", children: /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
-      ] }),
-      /* @__PURE__ */ u$1("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "Helper to close when clicked outside" }) })
-    ] })
-  ] });
-};
-const InfoHeadline1 = ({ children }) => {
-  return /* @__PURE__ */ u$1("h1", { className: "text-lg font-bold", children });
-};
-const InfoHeadline2 = ({ children }) => {
-  return /* @__PURE__ */ u$1("h2", { className: "text-base font-bold mt-4", children });
-};
-const InfoParagraph = ({ children }) => {
-  return /* @__PURE__ */ u$1("p", { className: "text-justify my-1", children });
-};
-const InfoLink = ({ children, href }) => {
-  return /* @__PURE__ */ u$1("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
-};
-const InfoComponentCode = ({ componentName, params, lapisUrl }) => {
-  const componentCode = componentParametersToCode(componentName, params, lapisUrl);
-  const codePenData = {
-    title: "GenSpectrum dashboard component",
-    html: generateFullExampleCode(componentCode, componentName),
-    layout: "left",
-    editors: "100"
-  };
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Use this component yourself" }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: [
-      "This component was created using the following parameters:",
-      /* @__PURE__ */ u$1("div", { className: "p-4 border border-gray-200 rounded-lg overflow-x-auto", children: /* @__PURE__ */ u$1("pre", { children: /* @__PURE__ */ u$1("code", { children: componentCode }) }) })
-    ] }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: [
-      "You can add this component to your own website using the",
-      " ",
-      /* @__PURE__ */ u$1(InfoLink, { href: "https://github.com/GenSpectrum/dashboard-components", children: "GenSpectrum dashboard components library" }),
-      " ",
-      "and the code from above."
-    ] }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("form", { action: "https://codepen.io/pen/define", method: "POST", target: "_blank", children: [
-      /* @__PURE__ */ u$1(
-        "input",
-        {
-          type: "hidden",
-          name: "data",
-          value: JSON.stringify(codePenData).replace(/"/g, "&quot;").replace(/'/g, "&apos;")
-        }
-      ),
-      /* @__PURE__ */ u$1("button", { className: "text-blue-600 hover:text-blue-800", type: "submit", children: "Click here to try it out on CodePen." })
-    ] }) })
-  ] });
-};
-function componentParametersToCode(componentName, params, lapisUrl) {
-  const stringifyIfNeeded = (value) => {
-    return typeof value === "object" ? JSON.stringify(value) : value;
-  };
-  const attributes = indentLines(
-    Object.entries(params).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
-    4
-  );
-  return `<gs-app lapis="${lapisUrl}">
-  <gs-${componentName}
-${attributes}
-  />
-</gs-app>`;
-}
-function generateFullExampleCode(componentCode, componentName) {
-  const storyBookPath = `/docs/visualization-${componentName}--docs`;
-  return `<html>
-<head>
-  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/standalone-bundle/dashboard-components.js"><\/script>
-  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
-</head>
-
-<body>
-  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
-${indentLines(componentCode, 2)}
-</body>
-</html>
-`;
-}
-function indentLines(text, numberSpaces) {
-  const spaces = " ".repeat(numberSpaces);
-  return text.split("\n").map((line) => spaces + line).join("\n");
-}
 const LoadingDisplay = () => {
   return /* @__PURE__ */ u$1(
     "div",
@@ -2028,7 +2037,7 @@ function useQuery(fetchDataCallback, dependencies) {
         setIsLoading(false);
       }
     };
-    fetchData();
+    void fetchData();
   }, [JSON.stringify(dependencies)]);
   if (isLoading) {
     return { isLoading: true };
@@ -2284,7 +2293,7 @@ const tailwindStyle = `*, ::before, ::after {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -2956,6 +2965,7 @@ html {
   display: grid;
   width: 100%;
   overflow: hidden;
+  direction: ltr;
   container-type: inline-size;
   grid-template-columns: auto 1fr;
 }
@@ -4486,9 +4496,6 @@ input.tab:checked + .tab-content,
   border-end-end-radius: inherit;
   border-start-end-radius: inherit;
 }
-.modal-middle {
-  place-items: center;
-}
 .modal-bottom {
   place-items: end;
 }
@@ -4933,9 +4940,6 @@ input.tab:checked + .tab-content,
 .min-w-\\[7\\.5rem\\] {
   min-width: 7.5rem;
 }
-.max-w-3xl {
-  max-width: 48rem;
-}
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -5109,10 +5113,6 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -8327,7 +8327,7 @@ const AggregateInner = (componentProps) => {
       field: initialSortField,
       direction: initialSortDirection
     });
-  }, [lapisFilter, fields, lapis]);
+  }, [lapisFilter, fields, lapis, initialSortField, initialSortDirection]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
@@ -10101,62 +10101,12 @@ svg.leaflet-image-layer.leaflet-interactive path {\r
 	}\r
 `;
 const leafletStyleModifications = ".leaflet-container {\n    background: transparent;\n}\n";
-const mapSourceSchema = z$1.object({
-  type: z$1.literal("topojson"),
-  url: z$1.string().min(1),
-  topologyObjectsKey: z$1.string().min(1)
-});
-function useGeoJsonMap(mapSource) {
-  const {
-    data: geojsonData,
-    error,
-    isLoading
-  } = useQuery(async () => {
-    switch (mapSource.type) {
-      case "topojson":
-        return await loadTopojsonMap(mapSource);
-    }
-  }, [mapSource]);
-  if (isLoading) {
-    return { isLoading };
-  }
-  if (error) {
-    throw error;
-  }
-  return { geojsonData, isLoading: false };
-}
-async function loadTopojsonMap(mapSource) {
-  var _a;
-  const response = await fetch(mapSource.url);
-  const topology = await response.json();
-  if ((topology == null ? void 0 : topology.type) !== "Topology") {
-    throw new UserFacingError(
-      "Invalid map source",
-      `JSON downloaded from ${mapSource.url} does not look like a topojson Topology definition: missing 'type: "Topology"', got '${JSON.stringify(topology).substring(0, 100)}'`
-    );
-  }
-  const object = topology == null ? void 0 : topology.objects[mapSource.topologyObjectsKey];
-  if ((object == null ? void 0 : object.type) !== "GeometryCollection") {
-    throw new UserFacingError(
-      "Invalid map source",
-      `JSON downloaded from ${mapSource.url} does not have a GeometryCollection at key objects.${mapSource.topologyObjectsKey}, got '${(_a = JSON.stringify(topology)) == null ? void 0 : _a.substring(0, 100)}'`
-    );
-  }
-  return topojson.feature(topology, object);
-}
 const SequencesByLocationMap = ({
-  mapSource,
-  ...otherProps
-}) => {
-  const { isLoading: isLoadingMap, geojsonData } = useGeoJsonMap(mapSource);
-  if (isLoadingMap) {
-    return /* @__PURE__ */ u$1(LoadingDisplay, {});
-  }
-  return /* @__PURE__ */ u$1(SequencesByLocationMapInner$1, { geojsonData, ...otherProps });
-};
-const SequencesByLocationMapInner$1 = ({
-  geojsonData,
-  locationData,
+  locations,
+  totalCount,
+  countOfMatchedLocationData,
+  nullCount,
+  unmatchedLocations,
   enableMapNavigation,
   lapisLocationField,
   zoom,
@@ -10164,22 +10114,7 @@ const SequencesByLocationMapInner$1 = ({
   offsetY,
   hasTableView
 }) => {
-  var _a;
   const ref = A(null);
-  const { locations, totalCount, countOfMatchedLocationData, unmatchedLocations } = T(() => {
-    const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
-    const { locations: locations2, unmatchedLocations: unmatchedLocations2 } = matchLocationDataAndGeoJsonFeatures(
-      geojsonData,
-      countAndProportionByCountry,
-      lapisLocationField
-    );
-    const totalCount2 = locationData.map((value) => value.count).reduce((sum, b3) => sum + b3, 0);
-    const countOfMatchedLocationData2 = locations2.map((location) => {
-      var _a2;
-      return ((_a2 = location.properties.data) == null ? void 0 : _a2.count) ?? 0;
-    }).reduce((sum, b3) => sum + b3, 0);
-    return { locations: locations2, totalCount: totalCount2, countOfMatchedLocationData: countOfMatchedLocationData2, unmatchedLocations: unmatchedLocations2 };
-  }, [geojsonData, locationData, lapisLocationField]);
   y(() => {
     if (!ref.current) {
       return;
@@ -10195,11 +10130,11 @@ const SequencesByLocationMapInner$1 = ({
     });
     Leaflet.geoJson(locations, {
       style: (feature) => {
-        var _a2;
+        var _a;
         return {
-          fillColor: getColor((_a2 = feature == null ? void 0 : feature.properties.data) == null ? void 0 : _a2.proportion),
+          fillColor: getColor((_a = feature == null ? void 0 : feature.properties.data) == null ? void 0 : _a.proportion),
           fillOpacity: 1,
-          color: "grey",
+          color: "#666666",
           weight: 1
         };
       }
@@ -10208,7 +10143,6 @@ const SequencesByLocationMapInner$1 = ({
       leafletMap.remove();
     };
   }, [ref, locations, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
-  const nullCount = ((_a = locationData.find((row) => row[lapisLocationField] === null)) == null ? void 0 : _a.count) ?? 0;
   return /* @__PURE__ */ u$1("div", { className: "h-full", children: [
     /* @__PURE__ */ u$1("div", { ref, className: "h-full" }),
     /* @__PURE__ */ u$1("div", { className: "relative", children: /* @__PURE__ */ u$1(
@@ -10230,7 +10164,7 @@ const DataMatchInformation = ({
   nullCount,
   hasTableView
 }) => {
-  const dialogRef = A(null);
+  const modalRef = useModalRef();
   const proportion = formatProportion(countOfMatchedLocationData / totalCount);
   return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(
@@ -10238,7 +10172,7 @@ const DataMatchInformation = ({
       {
         onClick: () => {
           var _a;
-          return (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+          return (_a = modalRef.current) == null ? void 0 : _a.showModal();
         },
         className: "text-sm absolute bottom-0 px-1 z-[1001] bg-white rounded border cursor-pointer tooltip",
         "data-tip": "Click for detailed information",
@@ -10249,76 +10183,34 @@ const DataMatchInformation = ({
         ]
       }
     ),
-    /* @__PURE__ */ u$1("dialog", { ref: dialogRef, className: "modal modal-middle", children: [
-      /* @__PURE__ */ u$1("div", { className: "modal-box max-w-3xl", children: [
-        /* @__PURE__ */ u$1(InfoHeadline1, { children: "Sequences By Location - Map View" }),
-        /* @__PURE__ */ u$1(InfoParagraph, { children: [
-          "The current filter has matched ",
-          totalCount.toLocaleString("en-us"),
-          " sequences. From these sequences, we were able to match ",
-          countOfMatchedLocationData.toLocaleString("en-us"),
-          " (",
-          proportion,
-          ") on locations on the map."
-        ] }),
-        /* @__PURE__ */ u$1(InfoParagraph, { children: [
-          unmatchedLocations.length > 0 && /* @__PURE__ */ u$1(Fragment, { children: [
-            "The following locations from the data could not be matched on the map:",
-            " ",
-            unmatchedLocations.map((it) => `"${it}"`).join(", "),
-            ".",
-            " "
-          ] }),
-          nullCount > 0 && `${nullCount.toLocaleString("en-us")} matching sequences have no location information. `,
-          hasTableView && "You can check the table view for more detailed information."
-        ] }),
-        /* @__PURE__ */ u$1("div", { className: "modal-action", children: /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
+    /* @__PURE__ */ u$1(Modal, { modalRef, children: [
+      /* @__PURE__ */ u$1(InfoHeadline1, { children: "Sequences By Location - Map View" }),
+      /* @__PURE__ */ u$1(InfoParagraph, { children: [
+        "The current filter has matched ",
+        totalCount.toLocaleString("en-us"),
+        " sequences. From these sequences, we were able to match ",
+        countOfMatchedLocationData.toLocaleString("en-us"),
+        " (",
+        proportion,
+        ") on locations on the map."
       ] }),
-      /* @__PURE__ */ u$1("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "Helper to close when clicked outside" }) })
+      /* @__PURE__ */ u$1(InfoParagraph, { children: [
+        unmatchedLocations.length > 0 && /* @__PURE__ */ u$1(Fragment, { children: [
+          "The following locations from the data could not be matched on the map:",
+          " ",
+          unmatchedLocations.map((it) => `"${it}"`).join(", "),
+          ".",
+          " "
+        ] }),
+        nullCount > 0 && `${nullCount.toLocaleString("en-us")} matching sequences have no location information. `,
+        hasTableView && "You can check the table view for more detailed information."
+      ] })
     ] })
   ] });
 };
-function buildLookupByLocationField(locationData, lapisLocationField) {
-  return new Map(
-    locationData.filter((row) => typeof row[lapisLocationField] === "string").map((row) => [row[lapisLocationField], row])
-  );
-}
-function matchLocationDataAndGeoJsonFeatures(geojsonData, countAndProportionByCountry, lapisLocationField) {
-  const matchedLocations = [];
-  const locations = geojsonData.features.map(
-    (feature) => {
-      var _a;
-      const name = (_a = feature == null ? void 0 : feature.properties) == null ? void 0 : _a.name;
-      if (typeof name !== "string") {
-        throw new Error(
-          `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`
-        );
-      }
-      const data = countAndProportionByCountry.get(name) ?? null;
-      if (data !== null) {
-        matchedLocations.push(name);
-      }
-      return {
-        ...feature,
-        properties: {
-          ...feature.properties,
-          data
-        }
-      };
-    }
-  );
-  const unmatchedLocations = [...countAndProportionByCountry.keys()].filter(
-    (name) => !matchedLocations.includes(name)
-  );
-  if (unmatchedLocations.length > 0) {
-    const unmatchedLocationsWarning = `gs-map: Found location data from LAPIS (aggregated by "${lapisLocationField}") that could not be matched on locations on the given map. Unmatched location names are: ${unmatchedLocations.map((it) => `"${it}"`).join(", ")}`;
-    console.warn(unmatchedLocationsWarning);
-  }
-  return { locations, unmatchedLocations };
-}
 function getColor(value) {
   if (value === void 0) {
-    return "#888888";
+    return "#DDDDDD";
   }
   const thresholds = [
     { limit: 0.4, color: "#662506" },
@@ -10369,12 +10261,150 @@ function p({ innerText, className = "" }) {
   return headline;
 }
 const SequencesByLocationTable = ({
-  locationData,
+  tableData,
   lapisLocationField,
   pageSize
 }) => {
-  return /* @__PURE__ */ u$1(AggregateTable, { data: locationData, fields: [lapisLocationField], pageSize });
+  const headers = [
+    {
+      name: lapisLocationField,
+      sort: {
+        compare: compareAscending
+      }
+    },
+    {
+      name: "count",
+      sort: true
+    },
+    {
+      name: "proportion",
+      sort: true,
+      formatter: (cell) => formatProportion(cell)
+    },
+    ..."isShownOnMap" in tableData[0] ? [{ id: "isShownOnMap", name: "shown on map", sort: true, width: "20%" }] : []
+  ];
+  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pageSize });
+};
+const MapLocationDataType = {
+  tableDataOnly: "tableDataOnly",
+  tableAndMapData: "tableAndMapData"
 };
+function computeMapLocationData(locationData, geojsonData, lapisLocationField) {
+  var _a;
+  if (geojsonData === void 0) {
+    return { type: MapLocationDataType.tableDataOnly, tableData: locationData };
+  }
+  const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
+  const { locations, unmatchedLocations } = matchLocationDataAndGeoJsonFeatures(
+    geojsonData,
+    countAndProportionByCountry,
+    lapisLocationField
+  );
+  const totalCount = locationData.map((value) => value.count).reduce((sum, b3) => sum + b3, 0);
+  const countOfMatchedLocationData = locations.map((location) => {
+    var _a2;
+    return ((_a2 = location.properties.data) == null ? void 0 : _a2.count) ?? 0;
+  }).reduce((sum, b3) => sum + b3, 0);
+  const nullCount = ((_a = locationData.find((row) => row[lapisLocationField] === null)) == null ? void 0 : _a.count) ?? 0;
+  const tableData = getSequencesByLocationTableData(locationData, unmatchedLocations, lapisLocationField);
+  return {
+    type: MapLocationDataType.tableAndMapData,
+    locations,
+    tableData,
+    totalCount,
+    countOfMatchedLocationData,
+    unmatchedLocations,
+    nullCount
+  };
+}
+function buildLookupByLocationField(locationData, lapisLocationField) {
+  return new Map(
+    locationData.filter((row) => typeof row[lapisLocationField] === "string").map((row) => [row[lapisLocationField], row])
+  );
+}
+function matchLocationDataAndGeoJsonFeatures(geojsonData, countAndProportionByCountry, lapisLocationField) {
+  const matchedLocations = [];
+  const locations = geojsonData.features.map(
+    (feature) => {
+      var _a;
+      const name = (_a = feature == null ? void 0 : feature.properties) == null ? void 0 : _a.name;
+      if (typeof name !== "string") {
+        throw new Error(
+          `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`
+        );
+      }
+      const data = countAndProportionByCountry.get(name) ?? null;
+      if (data !== null) {
+        matchedLocations.push(name);
+      }
+      return {
+        ...feature,
+        properties: {
+          ...feature.properties,
+          data
+        }
+      };
+    }
+  );
+  const unmatchedLocations = [...countAndProportionByCountry.keys()].filter(
+    (name) => !matchedLocations.includes(name)
+  );
+  if (unmatchedLocations.length > 0) {
+    const unmatchedLocationsWarning = `gs-map: Found location data from LAPIS (aggregated by "${lapisLocationField}") that could not be matched on locations on the given map. Unmatched location names are: ${unmatchedLocations.map((it) => `"${it}"`).join(", ")}`;
+    console.warn(unmatchedLocationsWarning);
+  }
+  return { locations, unmatchedLocations };
+}
+function getSequencesByLocationTableData(locationData, unmatchedLocations, lapisLocationField) {
+  return locationData.map((row) => ({
+    ...row,
+    isShownOnMap: `${isShownOnMap(row, unmatchedLocations, lapisLocationField)}`
+  }));
+}
+function isShownOnMap(row, unmatchedLocations, lapisLocationField) {
+  const locationValue = row[lapisLocationField];
+  if (locationValue === null) {
+    return false;
+  }
+  return !unmatchedLocations.includes(locationValue);
+}
+const mapSourceSchema = z$1.object({
+  type: z$1.literal("topojson"),
+  url: z$1.string().min(1),
+  topologyObjectsKey: z$1.string().min(1)
+});
+async function loadMapSource(mapSource) {
+  switch (mapSource.type) {
+    case "topojson":
+      return await loadTopojsonMap(mapSource);
+  }
+}
+async function loadTopojsonMap(mapSource) {
+  var _a;
+  const response = await fetch(mapSource.url);
+  const topology = await response.json();
+  if ((topology == null ? void 0 : topology.type) !== "Topology") {
+    throw new UserFacingError(
+      "Invalid map source",
+      `JSON downloaded from ${mapSource.url} does not look like a topojson Topology definition: missing 'type: "Topology"', got '${JSON.stringify(topology).substring(0, 100)}'`
+    );
+  }
+  const object = topology == null ? void 0 : topology.objects[mapSource.topologyObjectsKey];
+  if ((object == null ? void 0 : object.type) !== "GeometryCollection") {
+    throw new UserFacingError(
+      "Invalid map source",
+      `JSON downloaded from ${mapSource.url} does not have a GeometryCollection at key objects.${mapSource.topologyObjectsKey}, got '${(_a = JSON.stringify(topology)) == null ? void 0 : _a.substring(0, 100)}'`
+    );
+  }
+  return topojson.feature(topology, object);
+}
+async function querySequencesByLocationData(lapisFilter, lapisLocationField, lapis, mapSource) {
+  const [locationData, geojsonData] = await Promise.all([
+    queryAggregateData(lapisFilter, [lapisLocationField], lapis),
+    mapSource !== void 0 ? loadMapSource(mapSource) : void 0
+  ]);
+  return computeMapLocationData(locationData, geojsonData, lapisLocationField);
+}
 const sequencesByLocationViewSchema = z$1.union([z$1.literal(views.map), z$1.literal(views.table)]);
 const sequencesByLocationPropsSchema = z$1.object({
   lapisFilter: lapisFilterSchema,
@@ -10395,15 +10425,15 @@ const SequencesByLocation = (componentProps) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, componentProps, schema: sequencesByLocationPropsSchema, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(SequencesByLocationMapInner, { ...componentProps }) }) });
 };
 const SequencesByLocationMapInner = (props) => {
-  const { lapisFilter, lapisLocationField } = props;
+  const { lapisFilter, lapisLocationField, mapSource } = props;
   const lapis = x(LapisUrlContext);
   const {
     data,
     error,
     isLoading: isLoadingLapisData
   } = useQuery(
-    async () => queryAggregateData(lapisFilter, [lapisLocationField], lapis),
-    [lapisFilter, lapisLocationField, lapis]
+    async () => querySequencesByLocationData(lapisFilter, lapisLocationField, lapis, mapSource),
+    [lapisFilter, lapisLocationField, lapis, mapSource]
   );
   if (isLoadingLapisData) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -10419,17 +10449,17 @@ const SequencesByLocationMapTabs = ({
 }) => {
   const getTab = (view) => {
     switch (view) {
-      case views.map:
-        if (originalComponentProps.mapSource === void 0) {
+      case views.map: {
+        if (data.type !== MapLocationDataType.tableAndMapData) {
           throw new Error("mapSource is required when using the map view");
         }
+        const { type: _type, tableData: _tableData, ...dataForMap } = data;
         return {
           title: "Map",
           content: /* @__PURE__ */ u$1(
             SequencesByLocationMap,
             {
-              locationData: data,
-              mapSource: originalComponentProps.mapSource,
+              ...dataForMap,
               enableMapNavigation: originalComponentProps.enableMapNavigation,
               lapisLocationField: originalComponentProps.lapisLocationField,
               zoom: originalComponentProps.zoom,
@@ -10439,13 +10469,14 @@ const SequencesByLocationMapTabs = ({
             }
           )
         };
+      }
       case views.table:
         return {
           title: "Table",
           content: /* @__PURE__ */ u$1(
             SequencesByLocationTable,
             {
-              locationData: data,
+              tableData: data.tableData,
               lapisLocationField: originalComponentProps.lapisLocationField,
               pageSize: originalComponentProps.pageSize
             }
@@ -10454,10 +10485,24 @@ const SequencesByLocationMapTabs = ({
     }
   };
   const tabs = originalComponentProps.views.map((view) => getTab(view));
-  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar, { originalComponentProps }) });
+  return /* @__PURE__ */ u$1(
+    Tabs,
+    {
+      tabs,
+      toolbar: /* @__PURE__ */ u$1(Toolbar, { originalComponentProps, tableData: data.tableData })
+    }
+  );
 };
-const Toolbar = ({ originalComponentProps }) => {
+const Toolbar = ({ originalComponentProps, tableData }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
+    /* @__PURE__ */ u$1(
+      CsvDownloadButton,
+      {
+        className: "mx-1 btn btn-xs",
+        getData: () => tableData,
+        filename: "sequences_by_location.csv"
+      }
+    ),
     /* @__PURE__ */ u$1(SequencesByLocationMapInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });