@genspectrum/dashboard-components 0.5.4 → 0.5.5

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.
Files changed (34) hide show
  1. package/custom-elements.json +306 -0
  2. package/dist/dashboard-components.js +394 -263
  3. package/dist/dashboard-components.js.map +1 -1
  4. package/dist/genspectrum-components.d.ts +80 -2
  5. package/package.json +1 -1
  6. package/src/preact/aggregatedData/aggregate.tsx +2 -14
  7. package/src/preact/dateRangeSelector/date-range-selector.tsx +2 -14
  8. package/src/preact/locationFilter/location-filter.tsx +2 -7
  9. package/src/preact/mutationComparison/mutation-comparison.tsx +2 -10
  10. package/src/preact/mutations/mutations.tsx +2 -10
  11. package/src/preact/numberSequencesOverTime/__mockData__/oneVariantEG.json +1702 -0
  12. package/src/preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json +1710 -0
  13. package/src/preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json +1070 -0
  14. package/src/preact/numberSequencesOverTime/__mockData__/twoVariantsXBB.json +506 -0
  15. package/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.spec.ts +75 -0
  16. package/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.ts +39 -0
  17. package/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx +58 -0
  18. package/src/preact/numberSequencesOverTime/number-sequences-over-time-table.tsx +32 -0
  19. package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx +133 -0
  20. package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx +105 -0
  21. package/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx +11 -20
  22. package/src/preact/prevalenceOverTime/prevalence-over-time.tsx +2 -20
  23. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx +2 -14
  24. package/src/preact/textInput/text-input.tsx +2 -2
  25. package/src/query/queryAggregatedDataOverTime.ts +78 -0
  26. package/src/query/queryNumberOfSequencesOverTime.spec.ts +195 -0
  27. package/src/query/queryNumberOfSequencesOverTime.ts +33 -0
  28. package/src/query/queryPrevalenceOverTime.ts +10 -86
  29. package/src/utils/sort.ts +9 -0
  30. package/src/utils/temporalTestHelpers.ts +9 -0
  31. package/src/utils/utils.ts +7 -0
  32. package/src/web-components/visualization/gs-number-sequences-over-time.stories.ts +232 -0
  33. package/src/web-components/visualization/gs-number-sequences-over-time.tsx +140 -0
  34. package/src/web-components/visualization/index.ts +1 -0
@@ -1871,6 +1871,304 @@
1871
1871
  }
1872
1872
  ]
1873
1873
  },
1874
+ {
1875
+ "kind": "javascript-module",
1876
+ "path": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts",
1877
+ "declarations": [
1878
+ {
1879
+ "kind": "variable",
1880
+ "name": "meta",
1881
+ "type": {
1882
+ "text": "Meta<NumberSequencesOverTimeProps>"
1883
+ },
1884
+ "default": "{ title: 'Visualization/Number sequences over time', component: 'gs-number-sequences-over-time', argTypes: { granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, views: { options: ['bar', 'line', 'table'], control: { type: 'check' }, }, pageSize: { control: 'object' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
1885
+ },
1886
+ {
1887
+ "kind": "variable",
1888
+ "name": "OneDatasetBarChart",
1889
+ "type": {
1890
+ "text": "StoryObj<NumberSequencesOverTimeProps>"
1891
+ },
1892
+ "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Bar' })).toBeVisible()); await fireEvent.click(canvas.getByRole('button', { name: 'Bar' })); }, }"
1893
+ },
1894
+ {
1895
+ "kind": "variable",
1896
+ "name": "OneDatasetTable",
1897
+ "type": {
1898
+ "text": "StoryObj<NumberSequencesOverTimeProps>"
1899
+ },
1900
+ "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeVisible()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
1901
+ },
1902
+ {
1903
+ "kind": "variable",
1904
+ "name": "TwoDatasets",
1905
+ "type": {
1906
+ "text": "StoryObj<NumberSequencesOverTimeProps>"
1907
+ },
1908
+ "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-10-01' }, }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'EG*', fields: ['date'], }, }, response: { status: 200, body: twoVariantsEG, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
1909
+ },
1910
+ {
1911
+ "kind": "variable",
1912
+ "name": "TwoDatasetsWithNonOverlappingDates",
1913
+ "type": {
1914
+ "text": "StoryObj<NumberSequencesOverTimeProps>"
1915
+ },
1916
+ "default": "{ ...Template, args: { ...Template.args, lapisFilter: [ { displayName: 'XBB', lapisFilter: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31' }, }, { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } }, ], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedEG', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'XBB*', dateFrom: '2022-01-01', dateTo: '2022-12-31', fields: ['date'], }, }, response: { status: 200, body: twoVariantsXBB, }, }, { matcher: { name: 'aggregatedJN.1', url: AGGREGATED_ENDPOINT, body: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01', fields: ['date'], }, }, response: { status: 200, body: twoVariantsJN1, }, }, ], }, }, }"
1917
+ }
1918
+ ],
1919
+ "exports": [
1920
+ {
1921
+ "kind": "js",
1922
+ "name": "default",
1923
+ "declaration": {
1924
+ "name": "meta",
1925
+ "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
1926
+ }
1927
+ },
1928
+ {
1929
+ "kind": "js",
1930
+ "name": "OneDatasetBarChart",
1931
+ "declaration": {
1932
+ "name": "OneDatasetBarChart",
1933
+ "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
1934
+ }
1935
+ },
1936
+ {
1937
+ "kind": "js",
1938
+ "name": "OneDatasetTable",
1939
+ "declaration": {
1940
+ "name": "OneDatasetTable",
1941
+ "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
1942
+ }
1943
+ },
1944
+ {
1945
+ "kind": "js",
1946
+ "name": "TwoDatasets",
1947
+ "declaration": {
1948
+ "name": "TwoDatasets",
1949
+ "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
1950
+ }
1951
+ },
1952
+ {
1953
+ "kind": "js",
1954
+ "name": "TwoDatasetsWithNonOverlappingDates",
1955
+ "declaration": {
1956
+ "name": "TwoDatasetsWithNonOverlappingDates",
1957
+ "module": "src/web-components/visualization/gs-number-sequences-over-time.stories.ts"
1958
+ }
1959
+ }
1960
+ ]
1961
+ },
1962
+ {
1963
+ "kind": "javascript-module",
1964
+ "path": "src/web-components/visualization/gs-number-sequences-over-time.tsx",
1965
+ "declarations": [
1966
+ {
1967
+ "kind": "class",
1968
+ "description": "TODO(#330) write docs",
1969
+ "name": "NumberSequencesOverTimeComponent",
1970
+ "members": [
1971
+ {
1972
+ "kind": "field",
1973
+ "name": "lapisFilter",
1974
+ "type": {
1975
+ "text": "{\n lapisFilter: Record<string, string | number | null | boolean>;\n displayName: string;\n }\n | {\n lapisFilter: Record<string, string | number | null | boolean>;\n displayName: string;\n }[]"
1976
+ },
1977
+ "default": "{ displayName: '', lapisFilter: {} }",
1978
+ "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
1979
+ "attribute": "lapisFilter"
1980
+ },
1981
+ {
1982
+ "kind": "field",
1983
+ "name": "lapisDateField",
1984
+ "type": {
1985
+ "text": "string"
1986
+ },
1987
+ "default": "'date'",
1988
+ "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
1989
+ "attribute": "lapisDateField"
1990
+ },
1991
+ {
1992
+ "kind": "field",
1993
+ "name": "views",
1994
+ "type": {
1995
+ "text": "('bar' | 'line' | 'table')[]"
1996
+ },
1997
+ "default": "['bar', 'line', 'table']",
1998
+ "description": "A list of tabs with views that this component should provide.",
1999
+ "attribute": "views"
2000
+ },
2001
+ {
2002
+ "kind": "field",
2003
+ "name": "headline",
2004
+ "type": {
2005
+ "text": "string"
2006
+ },
2007
+ "default": "'Number of sequences of time'",
2008
+ "description": "The headline of the component. Set to an empty string to hide the headline.",
2009
+ "attribute": "headline"
2010
+ },
2011
+ {
2012
+ "kind": "field",
2013
+ "name": "width",
2014
+ "type": {
2015
+ "text": "string"
2016
+ },
2017
+ "default": "'100%'",
2018
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2019
+ "attribute": "width"
2020
+ },
2021
+ {
2022
+ "kind": "field",
2023
+ "name": "height",
2024
+ "type": {
2025
+ "text": "string"
2026
+ },
2027
+ "default": "'700px'",
2028
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2029
+ "attribute": "height"
2030
+ },
2031
+ {
2032
+ "kind": "field",
2033
+ "name": "granularity",
2034
+ "type": {
2035
+ "text": "'day' | 'week' | 'month' | 'year'"
2036
+ },
2037
+ "default": "'day'",
2038
+ "description": "The granularity of the time axis.",
2039
+ "attribute": "granularity"
2040
+ },
2041
+ {
2042
+ "kind": "field",
2043
+ "name": "smoothingWindow",
2044
+ "type": {
2045
+ "text": "number"
2046
+ },
2047
+ "default": "0",
2048
+ "description": "The number of time steps to use for smoothing the data.\n`0` means no smoothing.\nMust be a non-negative integer.\n\nFor a given time, the shown value is the mean of the neighbouring measured values.\nThe `smoothingWindow` value provides the number of neighbouring values to take into account.\nThe resulting time is computed via `Math.floor(smoothingWindow / 2)`.",
2049
+ "attribute": "smoothingWindow"
2050
+ },
2051
+ {
2052
+ "kind": "field",
2053
+ "name": "pageSize",
2054
+ "type": {
2055
+ "text": "boolean | number"
2056
+ },
2057
+ "default": "false",
2058
+ "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
2059
+ "attribute": "pageSize"
2060
+ }
2061
+ ],
2062
+ "attributes": [
2063
+ {
2064
+ "name": "lapisFilter",
2065
+ "type": {
2066
+ "text": "{\n lapisFilter: Record<string, string | number | null | boolean>;\n displayName: string;\n }\n | {\n lapisFilter: Record<string, string | number | null | boolean>;\n displayName: string;\n }[]"
2067
+ },
2068
+ "default": "{ displayName: '', lapisFilter: {} }",
2069
+ "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
2070
+ "fieldName": "lapisFilter"
2071
+ },
2072
+ {
2073
+ "name": "lapisDateField",
2074
+ "type": {
2075
+ "text": "string"
2076
+ },
2077
+ "default": "'date'",
2078
+ "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
2079
+ "fieldName": "lapisDateField"
2080
+ },
2081
+ {
2082
+ "name": "views",
2083
+ "type": {
2084
+ "text": "('bar' | 'line' | 'table')[]"
2085
+ },
2086
+ "default": "['bar', 'line', 'table']",
2087
+ "description": "A list of tabs with views that this component should provide.",
2088
+ "fieldName": "views"
2089
+ },
2090
+ {
2091
+ "name": "headline",
2092
+ "type": {
2093
+ "text": "string"
2094
+ },
2095
+ "default": "'Number of sequences of time'",
2096
+ "description": "The headline of the component. Set to an empty string to hide the headline.",
2097
+ "fieldName": "headline"
2098
+ },
2099
+ {
2100
+ "name": "width",
2101
+ "type": {
2102
+ "text": "string"
2103
+ },
2104
+ "default": "'100%'",
2105
+ "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2106
+ "fieldName": "width"
2107
+ },
2108
+ {
2109
+ "name": "height",
2110
+ "type": {
2111
+ "text": "string"
2112
+ },
2113
+ "default": "'700px'",
2114
+ "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
2115
+ "fieldName": "height"
2116
+ },
2117
+ {
2118
+ "name": "granularity",
2119
+ "type": {
2120
+ "text": "'day' | 'week' | 'month' | 'year'"
2121
+ },
2122
+ "default": "'day'",
2123
+ "description": "The granularity of the time axis.",
2124
+ "fieldName": "granularity"
2125
+ },
2126
+ {
2127
+ "name": "smoothingWindow",
2128
+ "type": {
2129
+ "text": "number"
2130
+ },
2131
+ "default": "0",
2132
+ "description": "The number of time steps to use for smoothing the data.\n`0` means no smoothing.\nMust be a non-negative integer.\n\nFor a given time, the shown value is the mean of the neighbouring measured values.\nThe `smoothingWindow` value provides the number of neighbouring values to take into account.\nThe resulting time is computed via `Math.floor(smoothingWindow / 2)`.",
2133
+ "fieldName": "smoothingWindow"
2134
+ },
2135
+ {
2136
+ "name": "pageSize",
2137
+ "type": {
2138
+ "text": "boolean | number"
2139
+ },
2140
+ "default": "false",
2141
+ "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
2142
+ "fieldName": "pageSize"
2143
+ }
2144
+ ],
2145
+ "superclass": {
2146
+ "name": "PreactLitAdapterWithGridJsStyles",
2147
+ "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
2148
+ },
2149
+ "tagName": "gs-number-sequences-over-time",
2150
+ "customElement": true
2151
+ }
2152
+ ],
2153
+ "exports": [
2154
+ {
2155
+ "kind": "js",
2156
+ "name": "NumberSequencesOverTimeComponent",
2157
+ "declaration": {
2158
+ "name": "NumberSequencesOverTimeComponent",
2159
+ "module": "src/web-components/visualization/gs-number-sequences-over-time.tsx"
2160
+ }
2161
+ },
2162
+ {
2163
+ "kind": "custom-element-definition",
2164
+ "name": "gs-number-sequences-over-time",
2165
+ "declaration": {
2166
+ "name": "NumberSequencesOverTimeComponent",
2167
+ "module": "src/web-components/visualization/gs-number-sequences-over-time.tsx"
2168
+ }
2169
+ }
2170
+ ]
2171
+ },
1874
2172
  {
1875
2173
  "kind": "javascript-module",
1876
2174
  "path": "src/web-components/visualization/gs-prevalence-over-time.stories.ts",
@@ -2574,6 +2872,14 @@
2574
2872
  "name": "AggregateComponent",
2575
2873
  "module": "./gs-aggregate"
2576
2874
  }
2875
+ },
2876
+ {
2877
+ "kind": "js",
2878
+ "name": "NumberSequencesOverTimeComponent",
2879
+ "declaration": {
2880
+ "name": "NumberSequencesOverTimeComponent",
2881
+ "module": "./gs-number-sequences-over-time"
2882
+ }
2577
2883
  }
2578
2884
  ]
2579
2885
  },