@genspectrum/dashboard-components 0.5.6 → 0.6.0

package/dist/dashboard-components.js

@@ -1357,30 +1357,10 @@ const ErrorDisplay = ({ error }) => {
 const ResizeContainer = ({ children, size: size2 }) => {
   return /* @__PURE__ */ u$1("div", { style: size2, children });
 };
-const Headline = ({ heading, children }) => {
-  if (!heading) {
-    return /* @__PURE__ */ u$1(Fragment, { children });
-  }
-  return /* @__PURE__ */ u$1(ResizingHeadline, { heading, children });
-};
-const ResizingHeadline = ({ heading, children }) => {
-  const ref = A(null);
-  const [h1Height, setH1Height] = h("2rem");
-  y(() => {
-    if (ref.current) {
-      const h1Height2 = ref.current.getBoundingClientRect().height;
-      setH1Height(`${h1Height2}px`);
-    }
-  }, []);
-  return /* @__PURE__ */ u$1("div", { className: "h-full w-full", children: [
-    /* @__PURE__ */ u$1("h1", { ref, children: heading }),
-    /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
-  ] });
-};
-const ErrorBoundary = ({ size: size2, headline, children }) => {
+const ErrorBoundary = ({ size: size2, children }) => {
   const [internalError] = b2();
   if (internalError) {
-    return /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) }) });
+    return /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) });
   }
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
@@ -1688,14 +1668,9 @@ function useQuery(fetchDataCallback, dependencies = []) {
   }, [JSON.stringify(dependencies)]);
   return { data, error, isLoading };
 }
-const MutationComparison = ({
-  width,
-  height,
-  headline = "Mutation comparison",
-  ...innerProps
-}) => {
+const MutationComparison = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(MutationComparisonInner, { ...innerProps }) }) });
 };
 const MutationComparisonInner = ({
   lapisFilters,
@@ -1775,7 +1750,7 @@ const MutationComparisonTabs = ({
     {
       tabs,
       toolbar: /* @__PURE__ */ u$1(
-        Toolbar$3,
+        Toolbar$4,
         {
           displayedSegments,
           setDisplayedSegments,
@@ -1789,7 +1764,7 @@ const MutationComparisonTabs = ({
     }
   );
 };
-const Toolbar$3 = ({
+const Toolbar$4 = ({
   displayedSegments,
   setDisplayedSegments,
   displayedMutationTypes,
@@ -4448,10 +4423,6 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
-.bg-base-200 {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -4663,7 +4634,6 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.views = ["table"];
     this.width = "100%";
     this.height = "700px";
-    this.headline = "Mutation comparison";
     this.pageSize = false;
   }
   render() {
@@ -4675,7 +4645,6 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         pageSize: this.pageSize
       }
     );
@@ -4696,9 +4665,6 @@ __decorateClass$9([
 __decorateClass$9([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "height", 2);
-__decorateClass$9([
-  n2({ type: String })
-], MutationComparisonComponent.prototype, "headline", 2);
 __decorateClass$9([
   n2({ type: Object })
 ], MutationComparisonComponent.prototype, "pageSize", 2);
@@ -4968,14 +4934,9 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
     gridData: filteredSubstitutionsOrDeletions
   };
 }
-const Mutations = ({
-  width,
-  height,
-  headline = "Mutations",
-  ...innerProps
-}) => {
+const Mutations = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(MutationsInner, { ...innerProps }) }) });
 };
 const MutationsInner = ({
   lapisFilter,
@@ -5042,7 +5003,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$2,
+    Toolbar$3,
     {
       activeTab,
       displayedSegments,
@@ -5056,7 +5017,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$2 = ({
+const Toolbar$3 = ({
   activeTab,
   displayedSegments,
   setDisplayedSegments,
@@ -5089,7 +5050,7 @@ const Toolbar$2 = ({
         {
           className: "mx-1 btn btn-xs",
           getData: () => getMutationsTableData(filteredData.tableData, proportionInterval),
-          filename: "substitutionsAndDeletions.csv"
+          filename: "substitutions_and_deletions.csv"
         }
       )
     ] }),
@@ -5127,7 +5088,6 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.views = ["table", "grid"];
     this.width = "100%";
     this.height = "700px";
-    this.headline = "Mutations";
     this.pageSize = false;
   }
   render() {
@@ -5139,7 +5099,6 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         pageSize: this.pageSize
       }
     );
@@ -5160,9 +5119,6 @@ __decorateClass$8([
 __decorateClass$8([
   n2({ type: String })
 ], MutationsComponent.prototype, "height", 2);
-__decorateClass$8([
-  n2({ type: String })
-], MutationsComponent.prototype, "headline", 2);
 __decorateClass$8([
   n2({ type: Object })
 ], MutationsComponent.prototype, "pageSize", 2);
@@ -6732,16 +6688,20 @@ const ConfidenceIntervalSelector = ({
     }
   );
 };
+const scaleTypeItem = [
+  { label: "Linear", value: "linear" },
+  { label: "Logarithmic", value: "logarithmic" },
+  { label: "Logit", value: "logit" }
+];
 const ScalingSelector = ({
   yAxisScaleType,
   setYAxisScaleType,
-  className
+  className,
+  enabledTypes
 }) => {
   const items = [
     { label: "y axis scaling type", value: "none", disabled: true },
-    { label: "Linear", value: "linear" },
-    { label: "Logarithmic", value: "logarithmic" },
-    { label: "Logit", value: "logit" }
+    ...scaleTypeItem.filter((item) => enabledTypes === void 0 || enabledTypes.includes(item.value))
   ];
   return /* @__PURE__ */ u$1(
     Select,
@@ -6757,14 +6717,9 @@ const ScalingSelector = ({
     }
   );
 };
-const PrevalenceOverTime = ({
-  width,
-  height,
-  headline = "Prevalence over time",
-  ...innerProps
-}) => {
+const PrevalenceOverTime = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(PrevalenceOverTimeInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(PrevalenceOverTimeInner, { ...innerProps }) }) });
 };
 const PrevalenceOverTimeInner = ({
   numeratorFilter,
@@ -6871,7 +6826,7 @@ const PrevalenceOverTimeTabs = ({
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$1,
+    Toolbar$2,
     {
       activeTab,
       yAxisScaleType,
@@ -6885,7 +6840,7 @@ const PrevalenceOverTimeTabs = ({
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$1 = ({
+const Toolbar$2 = ({
   activeTab,
   yAxisScaleType,
   setYAxisScaleType,
@@ -6910,7 +6865,7 @@ const Toolbar$1 = ({
       {
         className: "mx-1 btn btn-xs",
         getData: () => getPrevalenceOverTimeTableData(data, granularity),
-        filename: "prevalence-over-time.csv"
+        filename: "prevalence_over_time.csv"
       }
     ),
     /* @__PURE__ */ u$1(PrevalenceOverTimeInfo, {})
@@ -6942,7 +6897,6 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
     this.confidenceIntervalMethods = ["wilson"];
-    this.headline = "Prevalence over time";
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
@@ -6962,7 +6916,6 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         confidenceIntervalMethods: this.confidenceIntervalMethods,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         lapisDateField: this.lapisDateField,
         pageSize: this.pageSize,
         yAxisMaxConfig: {
@@ -6991,9 +6944,6 @@ __decorateClass$7([
 __decorateClass$7([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
-__decorateClass$7([
-  n2({ type: String })
-], PrevalenceOverTimeComponent.prototype, "headline", 2);
 __decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "width", 2);
@@ -7227,11 +7177,10 @@ function toYearMonthDay(d2) {
 const RelativeGrowthAdvantage = ({
   width,
   height,
-  headline = "Relative growth advantage",
   ...innerProps
 }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...innerProps }) }) });
 };
 const RelativeGrowthAdvantageInner = ({
   numeratorFilter,
@@ -7355,7 +7304,6 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.denominatorFilter = {};
     this.generationTime = 7;
     this.views = ["line"];
-    this.headline = "Relative growth advantage";
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
@@ -7372,7 +7320,6 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         lapisDateField: this.lapisDateField,
         yAxisMaxConfig: {
           linear: this.yAxisMaxLinear,
@@ -7394,9 +7341,6 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
-__decorateClass$6([
-  n2({ type: String })
-], RelativeGrowthAdvantageComponent.prototype, "headline", 2);
 __decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "width", 2);
@@ -7463,14 +7407,9 @@ const AggregateTable = ({ data, fields, pageSize }) => {
   ];
   return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
 };
-const Aggregate = ({
-  width,
-  height,
-  headline = "Mutations",
-  ...innerProps
-}) => {
+const Aggregate = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(AggregateInner, { ...innerProps }) }) });
 };
 const AggregateInner = ({
   fields,
@@ -7506,9 +7445,9 @@ const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
     }
   };
   const tabs = views.map((view) => getTab(view));
-  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar, { data }) });
+  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar$1, { data }) });
 };
-const Toolbar = ({ data }) => {
+const Toolbar$1 = ({ data }) => {
   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, { height: "100px", children: "Info for aggregate" })
@@ -7532,7 +7471,6 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.filter = {};
     this.width = "100%";
     this.height = "700px";
-    this.headline = "Aggregate";
     this.initialSortField = "count";
     this.initialSortDirection = "descending";
     this.pageSize = false;
@@ -7546,7 +7484,6 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
         filter: this.filter,
         width: this.width,
         height: this.height,
-        headline: this.headline,
         initialSortField: this.initialSortField,
         initialSortDirection: this.initialSortDirection,
         pageSize: this.pageSize
@@ -7569,9 +7506,6 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "height", 2);
-__decorateClass$5([
-  n2({ type: String })
-], AggregateComponent.prototype, "headline", 2);
 __decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "initialSortField", 2);
@@ -7615,7 +7549,7 @@ const getNumberOfSequencesOverTimeTableData = (data, dateRangeKey) => {
   });
 };
 Chart.register(...registerables);
-const NumberSequencesOverTimeBarChart = ({ data }) => {
+const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
   const config = T(
     () => ({
       type: "bar",
@@ -7625,6 +7559,11 @@ const NumberSequencesOverTimeBarChart = ({ data }) => {
       options: {
         maintainAspectRatio: false,
         animation: false,
+        scales: {
+          y: {
+            type: getYAxisScale(yAxisScaleType).type
+          }
+        },
         plugins: {
           legend: {
             display: false
@@ -7636,7 +7575,7 @@ const NumberSequencesOverTimeBarChart = ({ data }) => {
         }
       }
     }),
-    [data]
+    [data, yAxisScaleType]
   );
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
@@ -7656,7 +7595,7 @@ const getDatasets$1 = (data) => {
   );
 };
 Chart.register(...registerables);
-const NumberSequencesOverTimeLineChart = ({ data }) => {
+const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }) => {
   const config = T(
     () => ({
       type: "line",
@@ -7666,6 +7605,11 @@ const NumberSequencesOverTimeLineChart = ({ data }) => {
       options: {
         maintainAspectRatio: false,
         animation: false,
+        scales: {
+          y: {
+            type: getYAxisScale(yAxisScaleType).type
+          }
+        },
         plugins: {
           legend: {
             display: false
@@ -7677,7 +7621,7 @@ const NumberSequencesOverTimeLineChart = ({ data }) => {
         }
       }
     }),
-    [data]
+    [data, yAxisScaleType]
   );
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
@@ -7730,9 +7674,9 @@ async function queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField
   });
   return Promise.all(queries);
 }
-const NumberSequencesOverTime = ({ width, height, headline, ...innerProps }) => {
+const NumberSequencesOverTime = ({ width, height, ...innerProps }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NumberSequencesOverTimeInner, { ...innerProps }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(NumberSequencesOverTimeInner, { ...innerProps }) }) });
 };
 const NumberSequencesOverTimeInner = ({
   lapisFilter,
@@ -7758,12 +7702,19 @@ const NumberSequencesOverTimeInner = ({
   return /* @__PURE__ */ u$1(NumberSequencesOverTimeTabs, { views, data, granularity, pageSize });
 };
 const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) => {
+  const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const getTab = (view) => {
     switch (view) {
       case "bar":
-        return { title: "Bar", content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data }) };
+        return {
+          title: "Bar",
+          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data, yAxisScaleType })
+        };
       case "line":
-        return { title: "Line", content: /* @__PURE__ */ u$1(NumberSequencesOverTimeLineChart, { data }) };
+        return {
+          title: "Line",
+          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeLineChart, { data, yAxisScaleType })
+        };
       case "table":
         return {
           title: "Table",
@@ -7773,8 +7724,48 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
         throw new Error(`Unknown view: ${view}`);
     }
   };
-  return /* @__PURE__ */ u$1(Tabs, { tabs: views.map((view) => getTab(view)) });
+  return /* @__PURE__ */ u$1(
+    Tabs,
+    {
+      tabs: views.map((view) => getTab(view)),
+      toolbar: (activeTab) => /* @__PURE__ */ u$1(
+        Toolbar,
+        {
+          activeTab,
+          data,
+          granularity,
+          yAxisScaleType,
+          setYAxisScaleType
+        }
+      )
+    }
+  );
+};
+const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }) => {
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    activeTab !== "Table" && /* @__PURE__ */ u$1(
+      ScalingSelector,
+      {
+        yAxisScaleType,
+        setYAxisScaleType,
+        enabledTypes: ["linear", "logarithmic"]
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      CsvDownloadButton,
+      {
+        className: "mx-1 btn btn-xs",
+        getData: () => getNumberOfSequencesOverTimeTableData(data, granularity),
+        filename: "number_of_sequences_over_time.csv"
+      }
+    ),
+    /* @__PURE__ */ u$1(NumberSequencesOverTimeInfo, {})
+  ] });
 };
+const NumberSequencesOverTimeInfo = () => /* @__PURE__ */ u$1(Info, { height: "100px", children: [
+  /* @__PURE__ */ u$1(InfoHeadline1, { children: "Number of sequences over time" }),
+  /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("a", { href: "https://github.com/GenSpectrum/dashboard-components/issues/315", children: "TODO" }) })
+] });
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __decorateClass$4 = (decorators, target, key, kind) => {
@@ -7791,7 +7782,6 @@ let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsS
     this.lapisFilter = { displayName: "", lapisFilter: {} };
     this.lapisDateField = "date";
     this.views = ["bar", "line", "table"];
-    this.headline = "Number of sequences of time";
     this.width = "100%";
     this.height = "700px";
     this.granularity = "day";
@@ -7805,7 +7795,6 @@ let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsS
         lapisFilter: this.lapisFilter,
         lapisDateField: this.lapisDateField,
         views: this.views,
-        headline: this.headline,
         width: this.width,
         height: this.height,
         granularity: this.granularity,
@@ -7824,9 +7813,6 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Array })
 ], NumberSequencesOverTimeComponent.prototype, "views", 2);
-__decorateClass$4([
-  n2({ type: String })
-], NumberSequencesOverTimeComponent.prototype, "headline", 2);
 __decorateClass$4([
   n2({ type: String })
 ], NumberSequencesOverTimeComponent.prototype, "width", 2);