feat(components): Filter suggestion dropdown to only include values that exist with the current filters and add show the number of options #633

anna-parker · 2025-01-02T20:10:34Z

resolves #609

Summary

This shows the number of values for each option in the dropdown and filters the list of option to options that are available with current filters.

Sadly it is not possible to style the options component so that the number of the options is next to the value and not below, we will need to create a custom component for this. Loculus does this by using '@headlessui/react''s Combobox class -- however sadly this requires react and thus cannot be used in our webcomponents (?) I have not been able to find a good solution for this without react.

Screenshot

PR Checklist

All necessary documentation has been adapted.
The implemented feature is covered by an appropriate test.

vercel · 2025-01-02T20:10:37Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dashboard-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 3, 2025 6:57pm

github-actions · 2025-01-02T20:10:59Z

This is a preview of the changelog of the next release. If this branch is not up-to-date with the current main branch, the changelog may not be accurate. Rebase your branch on the main branch to get the most accurate changelog.

Note that this might contain changes that are on main, but not yet released.

Changelog:

0.11.4 (2025-01-06)

Features

components: add number of each option to filter options (78af02a)
components: add option to delete input of text-input and lineage-filter input with x and sort text-input datalist options (b58faae)
components: add option to filter option selection shown in text-input and lineage-filter using lapisFilter objects (e06c074)

Bug Fixes

components: gs-aggregate: rerender when initialSortField or initialSortDirection changes (60d578f)
components: prevent playwright race conditions by changing name of info header (2dabbe9)

…-input and lineage-filter using lapisFilter objects

…of info header

fengelniederhammer · 2025-01-08T07:21:07Z

components/src/preact/textInput/text-input.tsx

+                    <option
+                        value={item[lapisField]}
+                        key={item[lapisField]}
+                        style='white-space: nowrap;'


Suggested change

style='white-space: nowrap;'

className='whitespace-nowrap'

fengelniederhammer · 2025-01-08T07:21:35Z

components/src/preact/lineageFilter/lineage-filter.tsx

+                    <option
+                        value={item[lapisField]}
+                        key={item[lapisField]}
+                    >{`${item[lapisField]} (${item['count']})`}</option>


Do we also want to include

className='whitespace-nowrap'

here?

fengelniederhammer · 2025-01-08T07:25:29Z

components/src/preact/textInput/text-input.tsx

+                        value={item[lapisField]}
+                        key={item[lapisField]}
+                        style='white-space: nowrap;'
+                    >{`${item[lapisField]} (${item['count']})`}</option>


You don't need a template string here. You can use JSX string rendering directly.

Suggested change

>{`${item[lapisField]} (${item['count']})`}</option>

>{item[lapisField]} ({item['count']})</option>

fengelniederhammer · 2025-01-08T07:26:03Z

components/src/preact/lineageFilter/lineage-filter.tsx

+                    <option
+                        value={item[lapisField]}
+                        key={item[lapisField]}
+                    >{`${item[lapisField]} (${item['count']})`}</option>


You don't need a template string here. You can use JSX string rendering directly.

Suggested change

>{`${item[lapisField]} (${item['count']})`}</option>

>{item[lapisField]} ({item['count']})</option>

fengelniederhammer · 2025-01-08T07:26:52Z

components/src/preact/textInput/text-input.tsx

@@ -78,7 +88,7 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, pl
        if (value === undefined) {
            return true;
        }
-        return data.includes(value);
+        return data.map((item) => item[lapisField]).includes(value);


It would probably be better to put data.map((item) => item[lapisField]) in a useMemo so that we don't have to map the whole data on every keystroke again.

fengelniederhammer · 2025-01-08T07:31:16Z

components/src/preact/textInput/fetchAutocompleteList.ts

+        if (aValue === undefined && bValue !== undefined) {
+            return 1;
+        }
+        if (bValue === undefined && aValue !== undefined) {
+            return -1;
+        }
+        if (aValue === undefined && bValue === undefined) {
+            return 0;
+        }


This is shorter, less complicated, but most probably as good as the longer version ;)

Suggested change

if (aValue === undefined && bValue !== undefined) {

return 1;

}

if (bValue === undefined && aValue !== undefined) {

return -1;

}

if (aValue === undefined && bValue === undefined) {

return 0;

}

if (aValue === undefined) {

return 1;

}

if (bValue === undefined) {

return -1;

}

fengelniederhammer · 2025-01-08T07:39:04Z

components/src/preact/textInput/fetchAutocompleteList.ts

+    field: string,
+    signal?: AbortSignal,
+) {
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>(lapisFilter, [field]);


Actually the type Record<string, string> is not really correct. When you choose a field of type int for field, then the sort function won't work.

How do we deal with this? Should we generalize the sort function?

fengelniederhammer · 2025-01-08T07:39:35Z

components/src/web-components/input/gs-text-input.stories.ts

@@ -14,6 +14,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-text-input 
    lapisField="host"
+    lapisFilter={{}}


It would be good to provide an example with more values here.

fengelniederhammer · 2025-01-08T07:40:09Z

components/src/web-components/input/gs-text-input.tsx

@@ -29,6 +29,20 @@ export class TextInputComponent extends PreactLitAdapter {
    @property()
    initialValue: string | undefined = undefined;

+    /**
+     * A LAPIS filter to fetch the number of sequences for.


Suggested change

* A LAPIS filter to fetch the number of sequences for.

* A LAPIS filter to fetch the number of sequences that is shown on each autocomplete suggestion.

fengelniederhammer · 2025-01-08T07:51:49Z

components/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

+    const output: (Record<string, string> & {
+        count: number;
+    })[] = [];
+
+    const findOrCreateGroup = (pattern: string) => {
+        let group = output.find((item) => item[field] === pattern) as GroupType | undefined;
+        if (!group) {
+            group = { count: 0, [field]: pattern } as GroupType;
+            output.push(group);
+        }
+        return group;
+    };
+
+    data.forEach((item) => {
+        if (!item[field]) {
+            return;
+        }
+        const parts = item[field].split('.');
+        for (let step = 0; step < parts.length; step++) {
+            const section = `${parts.slice(0, step + 1).join('.')}*`;
+            const group = findOrCreateGroup(section);
+            group.count += item.count;
+        }
+        const group = findOrCreateGroup(item[field]);
+        group.count += item.count;
+    });
+
+    return sortDataByField(output, field);


I think this tries to do more than it can achieve:

The sorting is off:

JN.1.1 appears at the top, but JN.1.1* is somewhere further down. I would expect them to be next to each other.

The computed counts for values that include sublineages are not correct, because they don't consider aliases.

SILO will already return all possible parent lineage. IMO we should not need to compute them here.

This looks more complicated than initially thought. Let's split the changes?

Let's discuss counts for lineages and maybe do it later.

We can get sorting (for gs-text-input and gs-lineage-filter) and counts for gs-text-input done in this PR.

fengelniederhammer · 2025-01-20T13:12:15Z

Closing in favor of #666 🤘

vercel bot deployed to Preview January 2, 2025 20:11 View deployment

anna-parker force-pushed the add-number-options branch from b53436b to 97e1e89 Compare January 3, 2025 09:01

vercel bot deployed to Preview January 3, 2025 09:02 View deployment

anna-parker force-pushed the add-number-options branch from 97e1e89 to b60df2e Compare January 3, 2025 09:04

vercel bot deployed to Preview January 3, 2025 09:05 View deployment

anna-parker changed the title ~~Add-number-options~~ feat(components): Filter suggestion dropdown to only include values that exist with the current filters and add show the number of options Jan 3, 2025

feat(components): add number of each option to filter options

78af02a

anna-parker force-pushed the add-number-options branch from b60df2e to 6ded571 Compare January 3, 2025 10:04

vercel bot deployed to Preview January 3, 2025 10:05 View deployment

anna-parker force-pushed the add-number-options branch from 6ded571 to b83bfe8 Compare January 3, 2025 10:25

vercel bot deployed to Preview January 3, 2025 10:26 View deployment

anna-parker mentioned this pull request Jan 3, 2025

feat(website): update GsTextInput and GsLineageFilter to only show options that correspond to current filters GenSpectrum/dashboards#452

Closed

2 tasks

anna-parker force-pushed the add-number-options branch from b83bfe8 to 1101bfc Compare January 3, 2025 12:27

vercel bot deployed to Preview January 3, 2025 12:28 View deployment

anna-parker force-pushed the add-number-options branch from 1101bfc to 3519e7c Compare January 3, 2025 12:47

vercel bot deployed to Preview January 3, 2025 12:48 View deployment

feat(components): add option to filter option selection shown in text…

e06c074

…-input and lineage-filter using lapisFilter objects

anna-parker force-pushed the add-number-options branch from 3519e7c to e06c074 Compare January 3, 2025 12:54

vercel bot deployed to Preview January 3, 2025 12:55 View deployment

vercel bot deployed to Preview January 3, 2025 17:47 View deployment

fix(components): prevent playwright race conditions by changing name …

2dabbe9

…of info header

anna-parker force-pushed the add-number-options branch from 7ca6ca1 to 2dabbe9 Compare January 3, 2025 18:56

vercel bot deployed to Preview January 3, 2025 18:57 View deployment

anna-parker mentioned this pull request Jan 6, 2025

feat(components): improve design of location filter #622

Closed

2 tasks

anna-parker marked this pull request as ready for review January 6, 2025 08:11

anna-parker requested review from JonasKellerer and chaoran-chen January 6, 2025 08:11

fengelniederhammer linked an issue Jan 7, 2025 that may be closed by this pull request

Filter autocomplete options of location filter, text input and location filter #609

Closed

fengelniederhammer requested changes Jan 8, 2025

View reviewed changes

fengelniederhammer closed this Jan 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): Filter suggestion dropdown to only include values that exist with the current filters and add show the number of options #633

feat(components): Filter suggestion dropdown to only include values that exist with the current filters and add show the number of options #633

anna-parker commented Jan 2, 2025 •

edited

Loading

vercel bot commented Jan 2, 2025 •

edited

Loading

github-actions bot commented Jan 2, 2025 •

edited

Loading

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer Jan 8, 2025

fengelniederhammer commented Jan 20, 2025

	>{`${item[lapisField]} (${item['count']})`}</option>
	>{item[lapisField]} ({item['count']})</option>

	* A LAPIS filter to fetch the number of sequences for.
	* A LAPIS filter to fetch the number of sequences that is shown on each autocomplete suggestion.

feat(components): Filter suggestion dropdown to only include values that exist with the current filters and add show the number of options #633

feat(components): Filter suggestion dropdown to only include values that exist with the current filters and add show the number of options #633

Conversation

anna-parker commented Jan 2, 2025 • edited Loading

Summary

Screenshot

PR Checklist

vercel bot commented Jan 2, 2025 • edited Loading

github-actions bot commented Jan 2, 2025 • edited Loading

0.11.4 (2025-01-06)

Features

Bug Fixes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fengelniederhammer commented Jan 20, 2025

anna-parker commented Jan 2, 2025 •

edited

Loading

vercel bot commented Jan 2, 2025 •

edited

Loading

github-actions bot commented Jan 2, 2025 •

edited

Loading