@genspectrum/dashboard-components 0.7.0 → 0.7.1

package/dist/dashboard-components.js

@@ -1930,16 +1930,13 @@ function useQuery(fetchDataCallback, dependencies) {
   }, [JSON.stringify(dependencies)]);
   return { data, error, isLoading };
 }
-const MutationComparison = ({ width, height, ...innerProps }) => {
+const MutationComparison = (componentProps) => {
+  const { width, height } = componentProps;
   const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationComparisonInner, { ...innerProps }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationComparisonInner, { ...componentProps }) }) });
 };
-const MutationComparisonInner = ({
-  lapisFilters,
-  sequenceType,
-  views,
-  pageSize
-}) => {
+const MutationComparisonInner = (componentProps) => {
+  const { lapisFilters, sequenceType } = componentProps;
   const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationData(lapisFilters, sequenceType, lapis);
@@ -1953,28 +1950,15 @@ const MutationComparisonInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(
-    MutationComparisonTabs,
-    {
-      data: data.mutationData,
-      sequenceType,
-      views,
-      pageSize
-    }
-  );
+  return /* @__PURE__ */ u$1(MutationComparisonTabs, { data: data.mutationData, originalComponentProps: componentProps });
 };
-const MutationComparisonTabs = ({
-  data,
-  views,
-  sequenceType,
-  pageSize
-}) => {
+const MutationComparisonTabs = ({ data, originalComponentProps }) => {
   const [proportionInterval, setProportionInterval] = h({ min: 0.5, max: 1 });
   const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
   ]);
-  const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+  const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
   const filteredData = T(
     () => filterMutationData(data, displayedSegments, displayedMutationTypes),
     [data, displayedSegments, displayedMutationTypes]
@@ -1989,7 +1973,7 @@ const MutationComparisonTabs = ({
             {
               data: { content: filteredData },
               proportionInterval,
-              pageSize
+              pageSize: originalComponentProps.pageSize
             }
           )
         };
@@ -2006,7 +1990,7 @@ const MutationComparisonTabs = ({
         };
     }
   };
-  const tabs = views.map((view) => getTab(view));
+  const tabs = originalComponentProps.views.map((view) => getTab(view));
   return /* @__PURE__ */ u$1(
     Tabs,
     {
@@ -2020,7 +2004,8 @@ const MutationComparisonTabs = ({
           setDisplayedMutationTypes,
           filteredData,
           proportionInterval,
-          setProportionInterval
+          setProportionInterval,
+          originalComponentProps
         }
       )
     }
@@ -2033,7 +2018,8 @@ const Toolbar$5 = ({
   setDisplayedMutationTypes,
   filteredData,
   proportionInterval,
-  setProportionInterval
+  setProportionInterval,
+  originalComponentProps
 }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(
@@ -2060,10 +2046,18 @@ const Toolbar$5 = ({
         filename: "mutation_comparison.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { children: "Info for mutation comparison" }),
+    /* @__PURE__ */ u$1(MutationComparisonInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });
 };
+const MutationComparisonInfo = ({ originalComponentProps }) => {
+  const lapis = x(LapisUrlContext);
+  return /* @__PURE__ */ u$1(Info, { children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Info for mutation comparison" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "TODO: https://github.com/GenSpectrum/dashboard-components/issues/465" }),
+    /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "mutation-comparison", params: originalComponentProps, lapisUrl: lapis })
+  ] });
+};
 const gridJsStyle = '.gridjs-head button, .gridjs-footer button {\n  cursor: pointer;\n  background-color: transparent;\n  background-image: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n}\n\n.gridjs-temp {\n  position: relative;\n}\n\n.gridjs-head {\n  width: 100%;\n  margin-bottom: 5px;\n  padding: 5px 1px;\n}\n.gridjs-head::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-head:empty {\n  padding: 0;\n  border: none;\n}\n\n.gridjs-container {\n  overflow: hidden;\n  display: inline-block;\n  padding: 2px;\n  color: #000;\n  position: relative;\n  z-index: 0;\n}\n\n.gridjs-footer {\n  display: block;\n  position: relative;\n  width: 100%;\n  z-index: 5;\n  padding: 12px 24px;\n  border-top: 1px solid #e5e7eb;\n  background-color: #fff;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 0 0 8px 8px;\n  border-bottom-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-footer:empty {\n  padding: 0;\n  border: none;\n}\n\ninput.gridjs-input {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #d2d6dc;\n  border-radius: 5px;\n  padding: 10px 13px;\n  font-size: 14px;\n  line-height: 1.45;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\ninput.gridjs-input:focus {\n  box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);\n  border-color: #9bc2f7;\n}\n\n.gridjs-pagination {\n  color: #3d4044;\n}\n.gridjs-pagination::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-pagination .gridjs-summary {\n  float: left;\n  margin-top: 5px;\n}\n.gridjs-pagination .gridjs-pages {\n  float: right;\n}\n.gridjs-pagination .gridjs-pages button {\n  padding: 5px 14px;\n  border: 1px solid #d2d6dc;\n  background-color: #fff;\n  border-right: none;\n  outline: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.gridjs-pagination .gridjs-pages button:focus {\n  box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5);\n  position: relative;\n  margin-right: -1px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:hover {\n  background-color: #f7f7f7;\n  color: rgb(60, 66, 87);\n  outline: none;\n}\n.gridjs-pagination .gridjs-pages button:disabled,\n.gridjs-pagination .gridjs-pages button[disabled],\n.gridjs-pagination .gridjs-pages button:hover:disabled {\n  cursor: default;\n  background-color: #fff;\n  color: #6b7280;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-spread {\n  cursor: default;\n  box-shadow: none;\n  background-color: #fff;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-currentPage {\n  background-color: #f7f7f7;\n  font-weight: bold;\n}\n.gridjs-pagination .gridjs-pages button:last-child {\n  border-bottom-right-radius: 6px;\n  border-top-right-radius: 6px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:first-child {\n  border-bottom-left-radius: 6px;\n  border-top-left-radius: 6px;\n}\n.gridjs-pagination .gridjs-pages button:last-child:focus {\n  margin-right: 0;\n}\n\nbutton.gridjs-sort {\n  float: right;\n  height: 24px;\n  width: 13px;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position-x: center;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n  background-size: contain;\n}\nbutton.gridjs-sort-neutral {\n  opacity: 0.3;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: center;\n}\nbutton.gridjs-sort-asc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 35%;\n  background-size: 10px;\n}\nbutton.gridjs-sort-desc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 65%;\n  background-size: 10px;\n}\nbutton.gridjs-sort:focus {\n  outline: none;\n}\n\ntable.gridjs-table {\n  width: 100%;\n  max-width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n  display: table;\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  table-layout: fixed;\n}\n\n.gridjs-tbody {\n  background-color: #fff;\n}\n\ntd.gridjs-td {\n  border: 1px solid #e5e7eb;\n  padding: 12px 24px;\n  background-color: #fff;\n  box-sizing: content-box;\n}\ntd.gridjs-td:first-child {\n  border-left: none;\n}\ntd.gridjs-td:last-child {\n  border-right: none;\n}\ntd.gridjs-message {\n  text-align: center;\n}\n\nth.gridjs-th {\n  position: relative;\n  color: #6b7280;\n  background-color: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-top: none;\n  padding: 14px 24px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  outline: none;\n  vertical-align: middle;\n}\nth.gridjs-th .gridjs-th-content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n  float: left;\n}\nth.gridjs-th-sort {\n  cursor: pointer;\n}\nth.gridjs-th-sort .gridjs-th-content {\n  width: calc(100% - 15px);\n}\nth.gridjs-th-sort:hover {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-sort:focus {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-fixed {\n  position: sticky;\n  box-shadow: 0 1px 0 0 #e5e7eb;\n}\n@supports (-moz-appearance: none) {\n  th.gridjs-th-fixed {\n    box-shadow: 0 0 0 1px #e5e7eb;\n  }\n}\nth.gridjs-th:first-child {\n  border-left: none;\n}\nth.gridjs-th:last-child {\n  border-right: none;\n}\n\n.gridjs-tr {\n  border: none;\n}\n.gridjs-tr-selected td {\n  background-color: #ebf5ff;\n}\n.gridjs-tr:last-child td {\n  border-bottom: 0;\n}\n\n.gridjs *,\n.gridjs :after,\n.gridjs :before {\n  box-sizing: border-box;\n}\n\n.gridjs-wrapper {\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 8px 8px 0 0;\n  display: block;\n  border-top-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-wrapper:nth-last-of-type(2) {\n  border-radius: 8px;\n  border-bottom-width: 1px;\n}\n\n.gridjs-search {\n  float: left;\n}\n.gridjs-search-input {\n  width: 250px;\n}\n\n.gridjs-loading-bar {\n  z-index: 10;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: #fff;\n  opacity: 0.5;\n}\n.gridjs-loading-bar::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0, rgba(204, 204, 204, 0.2) 20%, rgba(204, 204, 204, 0.5) 60%, rgba(204, 204, 204, 0));\n  animation: shimmer 2s infinite;\n  content: "";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.gridjs-td .gridjs-checkbox {\n  display: block;\n  margin: auto;\n  cursor: pointer;\n}\n\n.gridjs-resizable {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 5px;\n}\n.gridjs-resizable:hover {\n  cursor: ew-resize;\n  background-color: #9bc2f7;\n}\n/*# sourceMappingURL=mermaid.css?inline.map */';
 const minMaxPercentSliderCss = 'input[type=range]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-moz-range-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-webkit-slider-thumb:hover {\n    background: #f7f7f7;\n}\n\ninput[type=range]::-webkit-slider-thumb:active {\n    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n}\n\ninput[type="range"] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n         appearance: none;\n    height: 2px;\n    width: 100%;\n    position: absolute;\n    background-color: #C6C6C6;\n    pointer-events: none;\n}';
 const tailwindStyle = `*, ::before, ::after {
@@ -5445,17 +5439,14 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
     gridData: filteredSubstitutionsOrDeletions
   };
 }
-const Mutations = ({ width, height, ...innerProps }) => {
+const Mutations = (componentProps) => {
+  const { width, height } = componentProps;
   const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsInner, { ...innerProps }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsInner, { ...componentProps }) }) });
 };
-const MutationsInner = ({
-  lapisFilter,
-  sequenceType,
-  views,
-  pageSize
-}) => {
+const MutationsInner = (componentProps) => {
   const lapis = x(LapisUrlContext);
+  const { lapisFilter, sequenceType } = componentProps;
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(lapisFilter, sequenceType, lapis);
   }, [lapisFilter, sequenceType, lapis]);
@@ -5468,11 +5459,11 @@ const MutationsInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views, pageSize });
+  return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, originalComponentProps: componentProps });
 };
-const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
+const MutationsTabs = ({ mutationsData, originalComponentProps }) => {
   const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 1 });
-  const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+  const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
   const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
@@ -5488,7 +5479,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
             {
               data: filteredData.tableData,
               proportionInterval,
-              pageSize
+              pageSize: originalComponentProps.pageSize
             }
           )
         };
@@ -5499,20 +5490,20 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
             MutationsGrid,
             {
               data: filteredData.gridData,
-              sequenceType,
+              sequenceType: originalComponentProps.sequenceType,
               proportionInterval,
-              pageSize
+              pageSize: originalComponentProps.pageSize
             }
           )
         };
       case "insertions":
         return {
           title: "Insertions",
-          content: /* @__PURE__ */ u$1(InsertionsTable, { data: filteredData.insertions, pageSize })
+          content: /* @__PURE__ */ u$1(InsertionsTable, { data: filteredData.insertions, pageSize: originalComponentProps.pageSize })
         };
     }
   };
-  const tabs = views.map((view) => getTab(view));
+  const tabs = originalComponentProps.views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
     Toolbar$4,
     {
@@ -5523,7 +5514,8 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
       setDisplayedMutationTypes,
       filteredData,
       proportionInterval,
-      setProportionInterval
+      setProportionInterval,
+      originalComponentProps
     }
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
@@ -5536,7 +5528,8 @@ const Toolbar$4 = ({
   setDisplayedMutationTypes,
   filteredData,
   proportionInterval,
-  setProportionInterval
+  setProportionInterval,
+  originalComponentProps
 }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(SegmentSelector, { displayedSegments, setDisplayedSegments }),
@@ -5578,39 +5571,43 @@ const Toolbar$4 = ({
         filename: "insertions.csv"
       }
     ),
-    /* @__PURE__ */ u$1(MutationsInfo, {}),
+    /* @__PURE__ */ u$1(MutationsInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });
 };
-const MutationsInfo = () => /* @__PURE__ */ u$1(Info, { children: [
-  /* @__PURE__ */ u$1(InfoHeadline1, { children: "Mutations" }),
-  /* @__PURE__ */ u$1(InfoParagraph, { children: [
-    "This shows mutations of a variant. There are three types of mutations:",
-    " ",
-    /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Substitution", children: "substitutions" }),
-    ",",
-    " ",
-    /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Deletion", children: "deletions" }),
-    " and",
-    " ",
-    /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Insertion", children: "insertions" }),
-    "."
-  ] }),
-  /* @__PURE__ */ u$1(InfoHeadline2, { children: "Proportion calculation" }),
-  /* @__PURE__ */ u$1(InfoParagraph, { children: "The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the total number of sequences with a non-ambiguous symbol at the position." }),
-  /* @__PURE__ */ u$1(InfoParagraph, { children: [
-    /* @__PURE__ */ u$1("b", { children: "Example:" }),
-    " Assume we look at nucleotide mutations at position 5 where the reference has a T and assume there are 10 sequences in total:",
-    /* @__PURE__ */ u$1("ul", { className: "list-disc list-inside ml-2", children: [
-      /* @__PURE__ */ u$1("li", { children: "3 sequences have a C," }),
-      /* @__PURE__ */ u$1("li", { children: "2 sequences have a T," }),
-      /* @__PURE__ */ u$1("li", { children: "1 sequence has a G," }),
-      /* @__PURE__ */ u$1("li", { children: "3 sequences have an N," }),
-      /* @__PURE__ */ u$1("li", { children: "1 sequence has a Y (which means T or C)," })
+const MutationsInfo = ({ originalComponentProps }) => {
+  const lapis = x(LapisUrlContext);
+  return /* @__PURE__ */ u$1(Info, { children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Mutations" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This shows mutations of a variant. There are three types of mutations:",
+      " ",
+      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Substitution", children: "substitutions" }),
+      ",",
+      " ",
+      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Deletion", children: "deletions" }),
+      " and",
+      " ",
+      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Insertion", children: "insertions" }),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Proportion calculation" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the total number of sequences with a non-ambiguous symbol at the position." }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      /* @__PURE__ */ u$1("b", { children: "Example:" }),
+      " Assume we look at nucleotide mutations at position 5 where the reference has a T and assume there are 10 sequences in total:",
+      /* @__PURE__ */ u$1("ul", { className: "list-disc list-inside ml-2", children: [
+        /* @__PURE__ */ u$1("li", { children: "3 sequences have a C," }),
+        /* @__PURE__ */ u$1("li", { children: "2 sequences have a T," }),
+        /* @__PURE__ */ u$1("li", { children: "1 sequence has a G," }),
+        /* @__PURE__ */ u$1("li", { children: "3 sequences have an N," }),
+        /* @__PURE__ */ u$1("li", { children: "1 sequence has a Y (which means T or C)," })
+      ] }),
+      "then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the calculation."
     ] }),
-    "then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the calculation."
-  ] })
-] });
+    /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "mutations", params: originalComponentProps, lapisUrl: lapis })
+  ] });
+};
 var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
 var __decorateClass$a = (decorators, target, key, kind) => {
@@ -7768,27 +7765,18 @@ function toYearMonthDay(d2) {
     count: d2.count
   };
 }
-const RelativeGrowthAdvantage = ({
-  width,
-  height,
-  ...innerProps
-}) => {
+const RelativeGrowthAdvantage = (componentProps) => {
+  const { width, height } = componentProps;
   const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...innerProps }) }) });
-};
-const RelativeGrowthAdvantageInner = ({
-  numeratorFilter,
-  denominatorFilter,
-  generationTime,
-  views,
-  lapisDateField,
-  yAxisMaxConfig
-}) => {
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...componentProps }) }) });
+};
+const RelativeGrowthAdvantageInner = (componentProps) => {
   const lapis = x(LapisUrlContext);
+  const { numeratorFilter, denominatorFilter, generationTime, lapisDateField } = componentProps;
   const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const { data, error, isLoading } = useQuery(
     () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-    [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField]
+    [lapis, numeratorFilter, denominatorFilter, generationTime, lapisDateField]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7805,9 +7793,7 @@ const RelativeGrowthAdvantageInner = ({
       data,
       yAxisScaleType,
       setYAxisScaleType,
-      views,
-      generationTime,
-      yAxisMaxConfig
+      originalComponentProps: componentProps
     }
   );
 };
@@ -7815,9 +7801,7 @@ const RelativeGrowthAdvantageTabs = ({
   data,
   yAxisScaleType,
   setYAxisScaleType,
-  views,
-  generationTime,
-  yAxisMaxConfig
+  originalComponentProps
 }) => {
   const getTab = (view) => {
     switch (view) {
@@ -7833,17 +7817,17 @@ const RelativeGrowthAdvantageTabs = ({
                 params: data.params
               },
               yAxisScaleType,
-              yAxisMaxConfig
+              yAxisMaxConfig: originalComponentProps.yAxisMaxConfig
             }
           )
         };
     }
   };
-  const tabs = views.map((view) => getTab(view));
+  const tabs = originalComponentProps.views.map((view) => getTab(view));
   const toolbar = () => /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageToolbar,
     {
-      generationTime,
+      originalComponentProps,
       yAxisScaleType,
       setYAxisScaleType
     }
@@ -7853,15 +7837,19 @@ const RelativeGrowthAdvantageTabs = ({
 const RelativeGrowthAdvantageToolbar = ({
   yAxisScaleType,
   setYAxisScaleType,
-  generationTime
+  originalComponentProps
 }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
-    /* @__PURE__ */ u$1(RelativeGrowthAdvantageInfo, { generationTime }),
+    /* @__PURE__ */ u$1(RelativeGrowthAdvantageInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });
 };
-const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
+const RelativeGrowthAdvantageInfo = ({
+  originalComponentProps
+}) => {
+  const lapis = x(LapisUrlContext);
+  const generationTime = originalComponentProps.generationTime;
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Relative growth advantage" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
@@ -7879,7 +7867,15 @@ const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
       'Chen, Chaoran, et al. "Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland." Epidemics (2021); doi:',
       " ",
       /* @__PURE__ */ u$1(InfoLink, { href: "https://www.sciencedirect.com/science/article/pii/S1755436521000335?via=ihub", children: "10.1016/j.epidem.2021.100480" })
-    ] })
+    ] }),
+    /* @__PURE__ */ u$1(
+      InfoComponentCode,
+      {
+        componentName: "relative-growth-advantage",
+        params: originalComponentProps,
+        lapisUrl: lapis
+      }
+    )
   ] });
 };
 var __defProp$8 = Object.defineProperty;
@@ -8002,18 +7998,13 @@ const AggregateTable = ({ data, fields, pageSize }) => {
   ];
   return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
 };
-const Aggregate = ({ width, height, ...innerProps }) => {
+const Aggregate = (componentProps) => {
+  const { width, height } = componentProps;
   const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(AggregateInner, { ...innerProps }) }) });
-};
-const AggregateInner = ({
-  fields,
-  views,
-  filter,
-  initialSortField,
-  initialSortDirection,
-  pageSize
-}) => {
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(AggregateInner, { ...componentProps }) }) });
+};
+const AggregateInner = (componentProps) => {
+  const { fields, filter, initialSortField, initialSortDirection } = componentProps;
   const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
@@ -8027,36 +8018,48 @@ const AggregateInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields, pageSize });
+  return /* @__PURE__ */ u$1(AggregatedDataTabs, { data, originalComponentProps: componentProps });
 };
-const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
+const AggregatedDataTabs = ({ data, originalComponentProps }) => {
   const getTab = (view) => {
     switch (view) {
       case "table":
         return {
           title: "Table",
-          content: /* @__PURE__ */ u$1(AggregateTable, { data, fields, pageSize })
+          content: /* @__PURE__ */ u$1(
+            AggregateTable,
+            {
+              data,
+              fields: originalComponentProps.fields,
+              pageSize: originalComponentProps.pageSize
+            }
+          )
         };
     }
   };
-  const tabs = views.map((view) => getTab(view));
-  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar$2, { data, fields }) });
+  const tabs = originalComponentProps.views.map((view) => getTab(view));
+  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar$2, { data, originalComponentProps }) });
 };
-const Toolbar$2 = ({ data, fields }) => {
+const Toolbar$2 = ({ data, originalComponentProps }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
     /* @__PURE__ */ u$1(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
-    /* @__PURE__ */ u$1(Info, { children: [
-      /* @__PURE__ */ u$1(InfoHeadline1, { children: "Aggregated data" }),
-      /* @__PURE__ */ u$1(InfoParagraph, { children: [
-        "This table shows the number and proportion of sequences stratified by the following fields:",
-        " ",
-        fields.join(", "),
-        ". The proportion is calculated with respect to the total count within the filtered dataset."
-      ] })
-    ] }),
+    /* @__PURE__ */ u$1(AggregateInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });
 };
+const AggregateInfo = ({ originalComponentProps }) => {
+  const lapis = x(LapisUrlContext);
+  return /* @__PURE__ */ u$1(Info, { children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Aggregated data" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This table shows the number and proportion of sequences stratified by the following fields:",
+      " ",
+      originalComponentProps.fields.join(", "),
+      ". The proportion is calculated with respect to the total count within the filtered dataset."
+    ] }),
+    /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "aggregate", params: originalComponentProps, lapisUrl: lapis })
+  ] });
+};
 var __defProp$7 = Object.defineProperty;
 var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
 var __decorateClass$7 = (decorators, target, key, kind) => {
@@ -8278,18 +8281,13 @@ async function queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField
   });
   return Promise.all(queries);
 }
-const NumberSequencesOverTime = ({ width, height, ...innerProps }) => {
+const NumberSequencesOverTime = (componentProps) => {
+  const { width, height } = componentProps;
   const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(NumberSequencesOverTimeInner, { ...innerProps }) }) });
-};
-const NumberSequencesOverTimeInner = ({
-  lapisFilter,
-  granularity,
-  smoothingWindow,
-  lapisDateField,
-  views,
-  pageSize
-}) => {
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(NumberSequencesOverTimeInner, { ...componentProps }) }) });
+};
+const NumberSequencesOverTimeInner = (componentProps) => {
+  const { lapisFilter, lapisDateField, granularity, smoothingWindow } = componentProps;
   const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
     () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
@@ -8304,24 +8302,9 @@ const NumberSequencesOverTimeInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(
-    NumberSequencesOverTimeTabs,
-    {
-      views,
-      data,
-      granularity,
-      smoothingWindow,
-      pageSize
-    }
-  );
+  return /* @__PURE__ */ u$1(NumberSequencesOverTimeTabs, { data, originalComponentProps: componentProps });
 };
-const NumberSequencesOverTimeTabs = ({
-  views,
-  data,
-  granularity,
-  smoothingWindow,
-  pageSize
-}) => {
+const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }) => {
   const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const getTab = (view) => {
     switch (view) {
@@ -8338,7 +8321,14 @@ const NumberSequencesOverTimeTabs = ({
       case "table":
         return {
           title: "Table",
-          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeTable, { data, granularity, pageSize })
+          content: /* @__PURE__ */ u$1(
+            NumberSequencesOverTimeTable,
+            {
+              data,
+              granularity: originalComponentProps.granularity,
+              pageSize: originalComponentProps.pageSize
+            }
+          )
         };
       default:
         throw new Error(`Unknown view: ${view}`);
@@ -8347,29 +8337,21 @@ const NumberSequencesOverTimeTabs = ({
   return /* @__PURE__ */ u$1(
     Tabs,
     {
-      tabs: views.map((view) => getTab(view)),
+      tabs: originalComponentProps.views.map((view) => getTab(view)),
       toolbar: (activeTab) => /* @__PURE__ */ u$1(
         Toolbar$1,
         {
           activeTab,
           data,
-          granularity,
-          smoothingWindow,
           yAxisScaleType,
-          setYAxisScaleType
+          setYAxisScaleType,
+          originalComponentProps
         }
       )
     }
   );
 };
-const Toolbar$1 = ({
-  activeTab,
-  data,
-  granularity,
-  yAxisScaleType,
-  setYAxisScaleType,
-  smoothingWindow
-}) => {
+const Toolbar$1 = ({ activeTab, data, yAxisScaleType, setYAxisScaleType, originalComponentProps }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     activeTab !== "Table" && /* @__PURE__ */ u$1(
       ScalingSelector,
@@ -8383,26 +8365,37 @@ const Toolbar$1 = ({
       CsvDownloadButton,
       {
         className: "mx-1 btn btn-xs",
-        getData: () => getNumberOfSequencesOverTimeTableData(data, granularity),
+        getData: () => getNumberOfSequencesOverTimeTableData(data, originalComponentProps.granularity),
         filename: "number_of_sequences_over_time.csv"
       }
     ),
-    /* @__PURE__ */ u$1(NumberSequencesOverTimeInfo, { granularity, smoothingWindow }),
+    /* @__PURE__ */ u$1(NumberSequencesOverTimeInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });
 };
 const NumberSequencesOverTimeInfo = ({
-  granularity,
-  smoothingWindow
-}) => /* @__PURE__ */ u$1(Info, { children: [
-  /* @__PURE__ */ u$1(InfoHeadline1, { children: "Number of sequences over time" }),
-  /* @__PURE__ */ u$1(InfoParagraph, { children: [
-    "This presents the number of available sequences of a variant per ",
-    /* @__PURE__ */ u$1("b", { children: granularity }),
-    smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`,
-    "."
-  ] })
-] });
+  originalComponentProps
+}) => {
+  const lapis = x(LapisUrlContext);
+  return /* @__PURE__ */ u$1(Info, { children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Number of sequences over time" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This presents the number of available sequences of a variant per",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: originalComponentProps.granularity }),
+      originalComponentProps.smoothingWindow > 0 && `, smoothed using a ${originalComponentProps.smoothingWindow}-${originalComponentProps.granularity} sliding window`,
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(
+      InfoComponentCode,
+      {
+        componentName: "number-sequences-over-time",
+        params: originalComponentProps,
+        lapisUrl: lapis
+      }
+    )
+  ] });
+};
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key, kind) => {
@@ -8904,18 +8897,14 @@ function useWebWorker(messageToWorker, worker) {
   }, [messageToWorker]);
   return { data, error, isLoading };
 }
-const MutationsOverTime = ({ width, height, ...innerProps }) => {
+const MutationsOverTime = (componentProps) => {
+  const { width, height } = componentProps;
   const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsOverTimeInner, { ...innerProps }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsOverTimeInner, { ...componentProps }) }) });
 };
-const MutationsOverTimeInner = ({
-  lapisFilter,
-  sequenceType,
-  views,
-  granularity,
-  lapisDateField
-}) => {
+const MutationsOverTimeInner = (componentProps) => {
   const lapis = x(LapisUrlContext);
+  const { lapisFilter, sequenceType, granularity, lapisDateField } = componentProps;
   const { data, error, isLoading } = useWebWorker(
     {
       lapisFilter,
@@ -8942,20 +8931,18 @@ const MutationsOverTimeInner = ({
     {
       overallMutationData,
       mutationOverTimeData,
-      sequenceType,
-      views
+      originalComponentProps: componentProps
     }
   );
 };
 const MutationsOverTimeTabs = ({
   mutationOverTimeData,
-  sequenceType,
-  views,
+  originalComponentProps,
   overallMutationData
 }) => {
   const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 0.9 });
   const [colorScale, setColorScale] = h({ min: 0, max: 1, color: "indigo" });
-  const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+  const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
   const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
@@ -8984,7 +8971,7 @@ const MutationsOverTimeTabs = ({
         };
     }
   };
-  const tabs = views.map((view) => getTab(view));
+  const tabs = originalComponentProps.views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
     Toolbar,
     {
@@ -8997,7 +8984,8 @@ const MutationsOverTimeTabs = ({
       setProportionInterval,
       filteredData,
       colorScale,
-      setColorScale
+      setColorScale,
+      originalComponentProps
     }
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
@@ -9012,7 +9000,8 @@ const Toolbar = ({
   setProportionInterval,
   filteredData,
   colorScale,
-  setColorScale
+  setColorScale,
+  originalComponentProps
 }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     activeTab === "Grid" && /* @__PURE__ */ u$1(ColorScaleSelectorDropdown, { colorScale, setColorScale }),
@@ -9041,10 +9030,18 @@ const Toolbar = ({
         filename: "mutations_over_time.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { children: "Info for mutations over time" }),
+    /* @__PURE__ */ u$1(MutationsOverTimeInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });
 };
+const MutationsOverTimeInfo = ({ originalComponentProps }) => {
+  const lapis = x(LapisUrlContext);
+  return /* @__PURE__ */ u$1(Info, { children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Info for mutations over time" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "TODO: https://github.com/GenSpectrum/dashboard-components/issues/441" }),
+    /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "mutations-over-time", params: originalComponentProps, lapisUrl: lapis })
+  ] });
+};
 function getDownloadData(filteredData) {
   const dates = filteredData.getSecondAxisKeys().map((date) => toTemporalClass(date));
   return filteredData.getFirstAxisKeys().map((mutation) => {