@genspectrum/dashboard-components 0.3.0 → 0.3.1

package/dist/genspectrum-components.d.ts

@@ -171,7 +171,7 @@ declare type LapisFilter = Record<string, string | number | null | boolean>;
  * Values for the fields `i > K` are considered `undefined`.
  *
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
- * Fired when the field is submitted with a valid location value.
+ * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
  * and the corresponding values as values, if they are not `undefined`.
  * Example:
@@ -732,20 +732,20 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 

package/dist/style.css

@@ -1246,19 +1246,6 @@ html {
     }
   }
 
-  .btn-outline.btn-primary:hover {
-    --tw-text-opacity: 1;
-    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  }
-
-  @supports (color: color-mix(in oklab, black, black)) {
-
-    .btn-outline.btn-primary:hover {
-      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    }
-  }
-
   .btn-disabled:hover,
     .btn[disabled]:hover,
     .btn:disabled:hover {
@@ -1728,34 +1715,12 @@ input.tab:checked + .tab-content,
     background-color: var(--btn-color, var(--fallback-b2));
     border-color: var(--btn-color, var(--fallback-b2));
   }
-
-  .btn-primary {
-    --btn-color: var(--fallback-p);
-  }
-}
-@supports (color: color-mix(in oklab, black, black)) {
-
-  .btn-outline.btn-primary.btn-active {
-    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
-  }
 }
 .btn:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
 }
-.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-  outline-color: var(--fallback-p,oklch(var(--p)/1));
-}
-@supports (color: oklch(0% 0 0)) {
-
-  .btn-primary {
-    --btn-color: var(--p);
-  }
-}
 .btn.glass {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -1780,14 +1745,6 @@ input.tab:checked + .tab-content,
   border-color: transparent;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
-.btn-outline.btn-primary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
-}
-.btn-outline.btn-primary.btn-active {
-  --tw-text-opacity: 1;
-  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
-}
 .btn.btn-disabled,
   .btn[disabled],
   .btn:disabled {
@@ -2938,9 +2895,6 @@ input.tab:checked + .tab-content,
 .me-1 {
   margin-inline-end: 0.25rem;
 }
-.ml-1 {
-  margin-left: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -34,7 +34,7 @@ const meta: Meta<LocationFilterProps> = {
     args: {
         width: '100%',
         fields: ['region', 'country', 'division', 'location'],
-        initialValue: 'United States',
+        initialValue: 'Europe',
     },
     argTypes: {
         fields: {

package/src/preact/locationFilter/location-filter.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
+import { type JSXInternal } from 'preact/src/jsx';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -36,7 +37,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
     const [value, setValue] = useState(initialValue ?? '');
     const [unknownLocation, setUnknownLocation] = useState(false);
 
-    const formRef = useRef<HTMLFormElement>(null);
+    const divRef = useRef<HTMLDivElement>(null);
 
     const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
 
@@ -47,40 +48,29 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
         return <ErrorDisplay error={error} />;
     }
 
-    const onInput = (event: InputEvent) => {
-        if (event.target instanceof HTMLInputElement) {
-            const inputValue = event.target.value;
-            setValue(inputValue);
-            if (unknownLocation) {
-                const eventDetail = parseLocation(inputValue, fields);
-                if (hasMatchingEntry(data, eventDetail)) {
-                    setUnknownLocation(false);
-                }
-            }
+    const onInput = (event: JSXInternal.TargetedInputEvent<HTMLInputElement>) => {
+        const inputValue = event.currentTarget.value;
+        setValue(inputValue);
+        if (inputValue.trim() === value.trim()) {
+            return;
         }
-    };
-
-    const submit = (event: SubmitEvent) => {
-        event.preventDefault();
-        const eventDetail = parseLocation(value, fields);
-
+        const eventDetail = parseLocation(inputValue, fields);
         if (hasMatchingEntry(data, eventDetail)) {
-            setUnknownLocation(false);
-
-            formRef.current?.dispatchEvent(
+            divRef.current?.dispatchEvent(
                 new CustomEvent('gs-location-changed', {
                     detail: eventDetail,
                     bubbles: true,
                     composed: true,
                 }),
             );
+            setUnknownLocation(false);
         } else {
             setUnknownLocation(true);
         }
     };
 
     return (
-        <form class='flex w-full' onSubmit={submit} ref={formRef}>
+        <div class='flex w-full' ref={divRef}>
             <input
                 type='text'
                 class={`input input-bordered grow ${unknownLocation ? 'border-2 border-error' : ''}`}
@@ -97,10 +87,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
                     return <option key={value} value={value} />;
                 })}
             </datalist>
-            <button class='btn btn-primary ml-1' type='submit'>
-                Submit
-            </button>
-        </form>
+        </div>
     );
 };
 

package/src/web-components/input/gs-location-filter.stories.ts

@@ -169,7 +169,6 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
 
-        const submitButton = () => canvas.getByRole('button', { name: 'Submit' });
         const inputField = () => canvas.getByRole('combobox');
 
         const listenerMock = fn();
@@ -185,14 +184,12 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         await step('Input invalid location', async () => {
             await userEvent.type(inputField(), 'Not / A / Location');
-            await userEvent.click(submitButton());
             await expect(listenerMock).not.toHaveBeenCalled();
             await userEvent.type(inputField(), '{backspace>18/}');
         });
 
         await step('Select Asia', async () => {
             await userEvent.type(inputField(), 'Asia');
-            await userEvent.click(submitButton());
             await expect(listenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
@@ -204,7 +201,6 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => {
             await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj');
-            await userEvent.click(submitButton());
             await expect(listenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {

package/src/web-components/input/gs-location-filter.tsx

@@ -18,7 +18,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Values for the fields `i > K` are considered `undefined`.
  *
  * @fires {CustomEvent<Record<string, string>>} gs-location-changed
- * Fired when the field is submitted with a valid location value.
+ * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
  * and the corresponding values as values, if they are not `undefined`.
  * Example: