@genspectrum/dashboard-components 0.4.0 → 0.4.2

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 (23) hide show
  1. package/custom-elements.json +2 -2
  2. package/dist/dashboard-components.js +263 -329
  3. package/dist/dashboard-components.js.map +1 -1
  4. package/dist/style.css +98 -185
  5. package/package.json +2 -1
  6. package/src/preact/components/SegmentSelector.tsx +0 -1
  7. package/src/preact/components/checkbox-selector.tsx +7 -9
  8. package/src/preact/components/dropdown.tsx +40 -0
  9. package/src/preact/components/info.tsx +20 -94
  10. package/src/preact/components/mutation-type-selector.tsx +0 -1
  11. package/src/preact/components/proportion-selector-dropdown.tsx +9 -18
  12. package/src/preact/components/tabs.tsx +12 -3
  13. package/src/preact/dateRangeSelector/date-range-selector.tsx +22 -18
  14. package/src/preact/locationFilter/location-filter.tsx +9 -2
  15. package/src/preact/mutationComparison/mutation-comparison.tsx +2 -2
  16. package/src/preact/mutations/mutations.tsx +2 -3
  17. package/src/preact/prevalenceOverTime/prevalence-over-time.tsx +3 -5
  18. package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx +2 -2
  19. package/src/preact/shared/floating-ui/hooks.ts +83 -0
  20. package/src/preact/textInput/text-input.tsx +2 -2
  21. package/src/web-components/input/gs-location-filter.stories.ts +9 -0
  22. package/src/web-components/input/gs-text-input.stories.ts +6 -0
  23. package/src/web-components/visualization/gs-prevalence-over-time.tsx +1 -1
package/custom-elements.json CHANGED
@@ -521,7 +521,7 @@
521
521
  "type": {
522
522
  "text": "StoryObj<LocationFilterProps>"
523
523
  },
524
- "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>18/}'); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
524
+ "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>18/}'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ region: undefined, country: undefined, division: undefined, location: undefined, }); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }, }), ); }); }, }"
525
525
  }
526
526
  ],
527
527
  "exports": [
@@ -863,7 +863,7 @@
863
863
  "type": {
864
864
  "text": "StoryObj<Required<TextInputProps>>"
865
865
  },
866
- "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-input'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-text-input-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo', }, }), ); }); }, args: { ...Default.args, initialValue: '', }, }"
866
+ "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-input'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-text-input-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await expect(listenerMock.mock.calls.at(-1)[0].detail).toStrictEqual({ host: undefined, }); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo', }, }), ); }); }, args: { ...Default.args, initialValue: '', }, }"
867
867
  }
868
868
  ],
869
869
  "exports": [