@genspectrum/dashboard-components 0.5.6 → 0.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dashboard-components.js +82 -21
- package/dist/dashboard-components.js.map +1 -1
- package/package.json +1 -1
- package/src/preact/components/scaling-selector.tsx +9 -3
- package/src/preact/mutations/mutations.tsx +1 -1
- package/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx +9 -2
- package/src/preact/numberSequencesOverTime/number-sequences-over-time-line-chart.tsx +9 -2
- package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx +67 -4
- package/src/preact/prevalenceOverTime/prevalence-over-time.tsx +1 -1
- package/src/preact/shared/charts/scales.ts +0 -16
|
@@ -1775,7 +1775,7 @@ const MutationComparisonTabs = ({
|
|
|
1775
1775
|
{
|
|
1776
1776
|
tabs,
|
|
1777
1777
|
toolbar: /* @__PURE__ */ u$1(
|
|
1778
|
-
Toolbar$
|
|
1778
|
+
Toolbar$4,
|
|
1779
1779
|
{
|
|
1780
1780
|
displayedSegments,
|
|
1781
1781
|
setDisplayedSegments,
|
|
@@ -1789,7 +1789,7 @@ const MutationComparisonTabs = ({
|
|
|
1789
1789
|
}
|
|
1790
1790
|
);
|
|
1791
1791
|
};
|
|
1792
|
-
const Toolbar$
|
|
1792
|
+
const Toolbar$4 = ({
|
|
1793
1793
|
displayedSegments,
|
|
1794
1794
|
setDisplayedSegments,
|
|
1795
1795
|
displayedMutationTypes,
|
|
@@ -5042,7 +5042,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
|
|
|
5042
5042
|
};
|
|
5043
5043
|
const tabs = views.map((view) => getTab(view));
|
|
5044
5044
|
const toolbar = (activeTab) => /* @__PURE__ */ u$1(
|
|
5045
|
-
Toolbar$
|
|
5045
|
+
Toolbar$3,
|
|
5046
5046
|
{
|
|
5047
5047
|
activeTab,
|
|
5048
5048
|
displayedSegments,
|
|
@@ -5056,7 +5056,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
|
|
|
5056
5056
|
);
|
|
5057
5057
|
return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
|
|
5058
5058
|
};
|
|
5059
|
-
const Toolbar$
|
|
5059
|
+
const Toolbar$3 = ({
|
|
5060
5060
|
activeTab,
|
|
5061
5061
|
displayedSegments,
|
|
5062
5062
|
setDisplayedSegments,
|
|
@@ -5089,7 +5089,7 @@ const Toolbar$2 = ({
|
|
|
5089
5089
|
{
|
|
5090
5090
|
className: "mx-1 btn btn-xs",
|
|
5091
5091
|
getData: () => getMutationsTableData(filteredData.tableData, proportionInterval),
|
|
5092
|
-
filename: "
|
|
5092
|
+
filename: "substitutions_and_deletions.csv"
|
|
5093
5093
|
}
|
|
5094
5094
|
)
|
|
5095
5095
|
] }),
|
|
@@ -6732,16 +6732,20 @@ const ConfidenceIntervalSelector = ({
|
|
|
6732
6732
|
}
|
|
6733
6733
|
);
|
|
6734
6734
|
};
|
|
6735
|
+
const scaleTypeItem = [
|
|
6736
|
+
{ label: "Linear", value: "linear" },
|
|
6737
|
+
{ label: "Logarithmic", value: "logarithmic" },
|
|
6738
|
+
{ label: "Logit", value: "logit" }
|
|
6739
|
+
];
|
|
6735
6740
|
const ScalingSelector = ({
|
|
6736
6741
|
yAxisScaleType,
|
|
6737
6742
|
setYAxisScaleType,
|
|
6738
|
-
className
|
|
6743
|
+
className,
|
|
6744
|
+
enabledTypes
|
|
6739
6745
|
}) => {
|
|
6740
6746
|
const items = [
|
|
6741
6747
|
{ label: "y axis scaling type", value: "none", disabled: true },
|
|
6742
|
-
|
|
6743
|
-
{ label: "Logarithmic", value: "logarithmic" },
|
|
6744
|
-
{ label: "Logit", value: "logit" }
|
|
6748
|
+
...scaleTypeItem.filter((item) => enabledTypes === void 0 || enabledTypes.includes(item.value))
|
|
6745
6749
|
];
|
|
6746
6750
|
return /* @__PURE__ */ u$1(
|
|
6747
6751
|
Select,
|
|
@@ -6871,7 +6875,7 @@ const PrevalenceOverTimeTabs = ({
|
|
|
6871
6875
|
};
|
|
6872
6876
|
const tabs = views.map((view) => getTab(view));
|
|
6873
6877
|
const toolbar = (activeTab) => /* @__PURE__ */ u$1(
|
|
6874
|
-
Toolbar$
|
|
6878
|
+
Toolbar$2,
|
|
6875
6879
|
{
|
|
6876
6880
|
activeTab,
|
|
6877
6881
|
yAxisScaleType,
|
|
@@ -6885,7 +6889,7 @@ const PrevalenceOverTimeTabs = ({
|
|
|
6885
6889
|
);
|
|
6886
6890
|
return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
|
|
6887
6891
|
};
|
|
6888
|
-
const Toolbar$
|
|
6892
|
+
const Toolbar$2 = ({
|
|
6889
6893
|
activeTab,
|
|
6890
6894
|
yAxisScaleType,
|
|
6891
6895
|
setYAxisScaleType,
|
|
@@ -6910,7 +6914,7 @@ const Toolbar$1 = ({
|
|
|
6910
6914
|
{
|
|
6911
6915
|
className: "mx-1 btn btn-xs",
|
|
6912
6916
|
getData: () => getPrevalenceOverTimeTableData(data, granularity),
|
|
6913
|
-
filename: "
|
|
6917
|
+
filename: "prevalence_over_time.csv"
|
|
6914
6918
|
}
|
|
6915
6919
|
),
|
|
6916
6920
|
/* @__PURE__ */ u$1(PrevalenceOverTimeInfo, {})
|
|
@@ -7506,9 +7510,9 @@ const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
|
|
|
7506
7510
|
}
|
|
7507
7511
|
};
|
|
7508
7512
|
const tabs = views.map((view) => getTab(view));
|
|
7509
|
-
return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar, { data }) });
|
|
7513
|
+
return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar$1, { data }) });
|
|
7510
7514
|
};
|
|
7511
|
-
const Toolbar = ({ data }) => {
|
|
7515
|
+
const Toolbar$1 = ({ data }) => {
|
|
7512
7516
|
return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
|
|
7513
7517
|
/* @__PURE__ */ u$1(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
|
|
7514
7518
|
/* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for aggregate" })
|
|
@@ -7615,7 +7619,7 @@ const getNumberOfSequencesOverTimeTableData = (data, dateRangeKey) => {
|
|
|
7615
7619
|
});
|
|
7616
7620
|
};
|
|
7617
7621
|
Chart.register(...registerables);
|
|
7618
|
-
const NumberSequencesOverTimeBarChart = ({ data }) => {
|
|
7622
|
+
const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
|
|
7619
7623
|
const config = T(
|
|
7620
7624
|
() => ({
|
|
7621
7625
|
type: "bar",
|
|
@@ -7625,6 +7629,11 @@ const NumberSequencesOverTimeBarChart = ({ data }) => {
|
|
|
7625
7629
|
options: {
|
|
7626
7630
|
maintainAspectRatio: false,
|
|
7627
7631
|
animation: false,
|
|
7632
|
+
scales: {
|
|
7633
|
+
y: {
|
|
7634
|
+
type: getYAxisScale(yAxisScaleType).type
|
|
7635
|
+
}
|
|
7636
|
+
},
|
|
7628
7637
|
plugins: {
|
|
7629
7638
|
legend: {
|
|
7630
7639
|
display: false
|
|
@@ -7636,7 +7645,7 @@ const NumberSequencesOverTimeBarChart = ({ data }) => {
|
|
|
7636
7645
|
}
|
|
7637
7646
|
}
|
|
7638
7647
|
}),
|
|
7639
|
-
[data]
|
|
7648
|
+
[data, yAxisScaleType]
|
|
7640
7649
|
);
|
|
7641
7650
|
return /* @__PURE__ */ u$1(GsChart, { configuration: config });
|
|
7642
7651
|
};
|
|
@@ -7656,7 +7665,7 @@ const getDatasets$1 = (data) => {
|
|
|
7656
7665
|
);
|
|
7657
7666
|
};
|
|
7658
7667
|
Chart.register(...registerables);
|
|
7659
|
-
const NumberSequencesOverTimeLineChart = ({ data }) => {
|
|
7668
|
+
const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }) => {
|
|
7660
7669
|
const config = T(
|
|
7661
7670
|
() => ({
|
|
7662
7671
|
type: "line",
|
|
@@ -7666,6 +7675,11 @@ const NumberSequencesOverTimeLineChart = ({ data }) => {
|
|
|
7666
7675
|
options: {
|
|
7667
7676
|
maintainAspectRatio: false,
|
|
7668
7677
|
animation: false,
|
|
7678
|
+
scales: {
|
|
7679
|
+
y: {
|
|
7680
|
+
type: getYAxisScale(yAxisScaleType).type
|
|
7681
|
+
}
|
|
7682
|
+
},
|
|
7669
7683
|
plugins: {
|
|
7670
7684
|
legend: {
|
|
7671
7685
|
display: false
|
|
@@ -7677,7 +7691,7 @@ const NumberSequencesOverTimeLineChart = ({ data }) => {
|
|
|
7677
7691
|
}
|
|
7678
7692
|
}
|
|
7679
7693
|
}),
|
|
7680
|
-
[data]
|
|
7694
|
+
[data, yAxisScaleType]
|
|
7681
7695
|
);
|
|
7682
7696
|
return /* @__PURE__ */ u$1(GsChart, { configuration: config });
|
|
7683
7697
|
};
|
|
@@ -7758,12 +7772,19 @@ const NumberSequencesOverTimeInner = ({
|
|
|
7758
7772
|
return /* @__PURE__ */ u$1(NumberSequencesOverTimeTabs, { views, data, granularity, pageSize });
|
|
7759
7773
|
};
|
|
7760
7774
|
const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) => {
|
|
7775
|
+
const [yAxisScaleType, setYAxisScaleType] = h("linear");
|
|
7761
7776
|
const getTab = (view) => {
|
|
7762
7777
|
switch (view) {
|
|
7763
7778
|
case "bar":
|
|
7764
|
-
return {
|
|
7779
|
+
return {
|
|
7780
|
+
title: "Bar",
|
|
7781
|
+
content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data, yAxisScaleType })
|
|
7782
|
+
};
|
|
7765
7783
|
case "line":
|
|
7766
|
-
return {
|
|
7784
|
+
return {
|
|
7785
|
+
title: "Line",
|
|
7786
|
+
content: /* @__PURE__ */ u$1(NumberSequencesOverTimeLineChart, { data, yAxisScaleType })
|
|
7787
|
+
};
|
|
7767
7788
|
case "table":
|
|
7768
7789
|
return {
|
|
7769
7790
|
title: "Table",
|
|
@@ -7773,8 +7794,48 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
|
|
|
7773
7794
|
throw new Error(`Unknown view: ${view}`);
|
|
7774
7795
|
}
|
|
7775
7796
|
};
|
|
7776
|
-
return /* @__PURE__ */ u$1(
|
|
7797
|
+
return /* @__PURE__ */ u$1(
|
|
7798
|
+
Tabs,
|
|
7799
|
+
{
|
|
7800
|
+
tabs: views.map((view) => getTab(view)),
|
|
7801
|
+
toolbar: (activeTab) => /* @__PURE__ */ u$1(
|
|
7802
|
+
Toolbar,
|
|
7803
|
+
{
|
|
7804
|
+
activeTab,
|
|
7805
|
+
data,
|
|
7806
|
+
granularity,
|
|
7807
|
+
yAxisScaleType,
|
|
7808
|
+
setYAxisScaleType
|
|
7809
|
+
}
|
|
7810
|
+
)
|
|
7811
|
+
}
|
|
7812
|
+
);
|
|
7813
|
+
};
|
|
7814
|
+
const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }) => {
|
|
7815
|
+
return /* @__PURE__ */ u$1(Fragment, { children: [
|
|
7816
|
+
activeTab !== "Table" && /* @__PURE__ */ u$1(
|
|
7817
|
+
ScalingSelector,
|
|
7818
|
+
{
|
|
7819
|
+
yAxisScaleType,
|
|
7820
|
+
setYAxisScaleType,
|
|
7821
|
+
enabledTypes: ["linear", "logarithmic"]
|
|
7822
|
+
}
|
|
7823
|
+
),
|
|
7824
|
+
/* @__PURE__ */ u$1(
|
|
7825
|
+
CsvDownloadButton,
|
|
7826
|
+
{
|
|
7827
|
+
className: "mx-1 btn btn-xs",
|
|
7828
|
+
getData: () => getNumberOfSequencesOverTimeTableData(data, granularity),
|
|
7829
|
+
filename: "number_of_sequences_over_time.csv"
|
|
7830
|
+
}
|
|
7831
|
+
),
|
|
7832
|
+
/* @__PURE__ */ u$1(NumberSequencesOverTimeInfo, {})
|
|
7833
|
+
] });
|
|
7777
7834
|
};
|
|
7835
|
+
const NumberSequencesOverTimeInfo = () => /* @__PURE__ */ u$1(Info, { height: "100px", children: [
|
|
7836
|
+
/* @__PURE__ */ u$1(InfoHeadline1, { children: "Number of sequences over time" }),
|
|
7837
|
+
/* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("a", { href: "https://github.com/GenSpectrum/dashboard-components/issues/315", children: "TODO" }) })
|
|
7838
|
+
] });
|
|
7778
7839
|
var __defProp$4 = Object.defineProperty;
|
|
7779
7840
|
var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
|
|
7780
7841
|
var __decorateClass$4 = (decorators, target, key, kind) => {
|