@genspectrum/dashboard-components 0.11.2 → 0.11.3

package/dist/components.d.ts

@@ -1221,7 +1221,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1229,7 +1232,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1237,7 +1240,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1245,7 +1252,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1253,7 +1260,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1261,7 +1271,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1269,7 +1279,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1277,7 +1290,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1285,7 +1298,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1293,7 +1309,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1301,7 +1317,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1309,7 +1325,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1317,7 +1333,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1325,7 +1341,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1333,7 +1349,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1341,7 +1357,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1349,7 +1365,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1357,7 +1373,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1365,11 +1381,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1377,7 +1389,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1385,10 +1397,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1396,7 +1405,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1404,10 +1413,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1415,7 +1421,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1423,10 +1429,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1434,7 +1437,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1442,10 +1445,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1453,7 +1453,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/components.js

@@ -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",
@@ -4486,9 +4495,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 +4939,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 +5112,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;
 }
@@ -10199,7 +10198,7 @@ const SequencesByLocationMapInner$1 = ({
         return {
           fillColor: getColor((_a2 = feature == null ? void 0 : feature.properties.data) == null ? void 0 : _a2.proportion),
           fillOpacity: 1,
-          color: "grey",
+          color: "#666666",
           weight: 1
         };
       }
@@ -10230,7 +10229,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 +10237,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,32 +10248,28 @@ 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."
+      ] })
     ] })
   ] });
 };
@@ -10318,7 +10313,7 @@ function matchLocationDataAndGeoJsonFeatures(geojsonData, countAndProportionByCo
 }
 function getColor(value) {
   if (value === void 0) {
-    return "#888888";
+    return "#DDDDDD";
   }
   const thresholds = [
     { limit: 0.4, color: "#662506" },