Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(atomic): add configurable query suggestions & recent queries to search box #1261

Merged
merged 6 commits into from
Oct 6, 2021
Merged

feat(atomic): add configurable query suggestions & recent queries to search box #1261

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f333932
search box: don't register QS when numberOfSuggestions = 0
ThibodeauJF Sep 28, 2021
903ddb7
setup a mix of recent queries and query suggest
ThibodeauJF Sep 28, 2021
acd6b24
add children configuration elements
ThibodeauJF Sep 28, 2021
e30b981
add default components
ThibodeauJF Sep 28, 2021
87eddcf
add todos and extract custom event dispatch
ThibodeauJF Sep 28, 2021
e5a4cdc
PART 2 - configurable query suggestions & recent queries (#1267)
ThibodeauJF Oct 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions packages/atomic/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,18 @@ export namespace Components {
"initialChoice"?: number;
}
interface AtomicSearchBox {
/**
* The amount of queries displayed when the user interacts with the search box. By default, a mix of query suggestions and recent queries will be shown. You can configure those settings using the following components as children: - atomic-search-box-query-suggestions - atomic-search-box-recent-queries
*/
"numberOfQueries": number;
}
interface AtomicSearchBoxQuerySuggestions {
"maxWithQuery"?: number;
"maxWithoutQuery"?: number;
}
interface AtomicSearchBoxRecentQueries {
"maxWithQuery"?: number;
"maxWithoutQuery"?: number;
}
interface AtomicSearchInterface {
/**
Expand Down Expand Up @@ -1054,6 +1066,18 @@ declare global {
prototype: HTMLAtomicSearchBoxElement;
new (): HTMLAtomicSearchBoxElement;
};
interface HTMLAtomicSearchBoxQuerySuggestionsElement extends Components.AtomicSearchBoxQuerySuggestions, HTMLStencilElement {
}
var HTMLAtomicSearchBoxQuerySuggestionsElement: {
prototype: HTMLAtomicSearchBoxQuerySuggestionsElement;
new (): HTMLAtomicSearchBoxQuerySuggestionsElement;
};
interface HTMLAtomicSearchBoxRecentQueriesElement extends Components.AtomicSearchBoxRecentQueries, HTMLStencilElement {
}
var HTMLAtomicSearchBoxRecentQueriesElement: {
prototype: HTMLAtomicSearchBoxRecentQueriesElement;
new (): HTMLAtomicSearchBoxRecentQueriesElement;
};
interface HTMLAtomicSearchInterfaceElement extends Components.AtomicSearchInterface, HTMLStencilElement {
}
var HTMLAtomicSearchInterfaceElement: {
Expand Down Expand Up @@ -1156,6 +1180,8 @@ declare global {
"atomic-result-text": HTMLAtomicResultTextElement;
"atomic-results-per-page": HTMLAtomicResultsPerPageElement;
"atomic-search-box": HTMLAtomicSearchBoxElement;
"atomic-search-box-query-suggestions": HTMLAtomicSearchBoxQuerySuggestionsElement;
"atomic-search-box-recent-queries": HTMLAtomicSearchBoxRecentQueriesElement;
"atomic-search-interface": HTMLAtomicSearchInterfaceElement;
"atomic-sort-dropdown": HTMLAtomicSortDropdownElement;
"atomic-sort-expression": HTMLAtomicSortExpressionElement;
Expand Down Expand Up @@ -1752,6 +1778,18 @@ declare namespace LocalJSX {
"initialChoice"?: number;
}
interface AtomicSearchBox {
/**
* The amount of queries displayed when the user interacts with the search box. By default, a mix of query suggestions and recent queries will be shown. You can configure those settings using the following components as children: - atomic-search-box-query-suggestions - atomic-search-box-recent-queries
*/
"numberOfQueries"?: number;
}
interface AtomicSearchBoxQuerySuggestions {
"maxWithQuery"?: number;
"maxWithoutQuery"?: number;
}
interface AtomicSearchBoxRecentQueries {
"maxWithQuery"?: number;
"maxWithoutQuery"?: number;
}
interface AtomicSearchInterface {
/**
Expand Down Expand Up @@ -1932,6 +1970,8 @@ declare namespace LocalJSX {
"atomic-result-text": AtomicResultText;
"atomic-results-per-page": AtomicResultsPerPage;
"atomic-search-box": AtomicSearchBox;
"atomic-search-box-query-suggestions": AtomicSearchBoxQuerySuggestions;
"atomic-search-box-recent-queries": AtomicSearchBoxRecentQueries;
"atomic-search-interface": AtomicSearchInterface;
"atomic-sort-dropdown": AtomicSortDropdown;
"atomic-sort-expression": AtomicSortExpression;
Expand Down Expand Up @@ -1999,6 +2039,8 @@ declare module "@stencil/core" {
"atomic-result-text": LocalJSX.AtomicResultText & JSXBase.HTMLAttributes<HTMLAtomicResultTextElement>;
"atomic-results-per-page": LocalJSX.AtomicResultsPerPage & JSXBase.HTMLAttributes<HTMLAtomicResultsPerPageElement>;
"atomic-search-box": LocalJSX.AtomicSearchBox & JSXBase.HTMLAttributes<HTMLAtomicSearchBoxElement>;
"atomic-search-box-query-suggestions": LocalJSX.AtomicSearchBoxQuerySuggestions & JSXBase.HTMLAttributes<HTMLAtomicSearchBoxQuerySuggestionsElement>;
"atomic-search-box-recent-queries": LocalJSX.AtomicSearchBoxRecentQueries & JSXBase.HTMLAttributes<HTMLAtomicSearchBoxRecentQueriesElement>;
"atomic-search-interface": LocalJSX.AtomicSearchInterface & JSXBase.HTMLAttributes<HTMLAtomicSearchInterfaceElement>;
"atomic-sort-dropdown": LocalJSX.AtomicSortDropdown & JSXBase.HTMLAttributes<HTMLAtomicSortDropdownElement>;
"atomic-sort-expression": LocalJSX.AtomicSortExpression & JSXBase.HTMLAttributes<HTMLAtomicSortExpressionElement>;
Expand Down
107 changes: 84 additions & 23 deletions packages/atomic/src/components/atomic-search-box/atomic-search-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import SearchIcon from 'coveo-styleguide/resources/icons/svg/search.svg';
import ClearIcon from 'coveo-styleguide/resources/icons/svg/clear.svg';
import {Component, h, State} from '@stencil/core';
import {Component, h, State, Prop, Listen} from '@stencil/core';
import {
SearchBox,
SearchBoxState,
buildSearchBox,
Suggestion,
loadQuerySetActions,
QuerySetActionCreators,
} from '@coveo/headless';
Expand All @@ -17,6 +16,12 @@ import {
import {Button} from '../common/button';
import {randomID} from '../../utils/utils';
import {isNullOrUndefined} from '@coveo/bueno';
import {
SearchBoxSuggestionElement,
SearchBoxSuggestions,
SearchBoxSuggestionsBindings,
SearchBoxSuggestionsEvent,
} from '../search-box-suggestions/suggestions-common';

/**
* The `atomic-search-box` component creates a search box with built-in support for suggestions.
Expand All @@ -41,21 +46,33 @@ export class AtomicSearchBox {
private inputRef!: HTMLInputElement;
private listRef!: HTMLElement;
private querySetActions!: QuerySetActionCreators;
private pendingSuggestionEvents: SearchBoxSuggestionsEvent[] = [];
private suggestions: SearchBoxSuggestions[] = [];

@BindStateToController('searchBox')
@State()
private searchBoxState!: SearchBoxState;
@State() public error!: Error;
@State() private isExpanded = false;
@State() private activeDescendant = '';
@State() private suggestionElements: SearchBoxSuggestionElement[] = [];

/**
* The amount of queries displayed when the user interacts with the search box.
* By default, a mix of query suggestions and recent queries will be shown.
* You can configure those settings using the following components as children:
* - atomic-search-box-query-suggestions
* - atomic-search-box-recent-queries
*/
@Prop() public numberOfQueries = 8;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

numberOfSuggestions ? What do you think ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like described in the documents, there will also be "numberOfResults" for the other types of suggestions. So these scenarios can be configured:

Screen Shot 2021-09-28 at 3 26 15 PM

Copy link
Contributor

@btaillon-coveo btaillon-coveo Sep 29, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that instead of making this an option here, we could have an opiniated default, and if people want to override it then they need to specify atomic-search-box-query-suggestions and atomic-search-box-recent-queries themselves.

Otherwise, I find it confusing to predict what number of suggestions & recent queries will each appear based on this option.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is why each of the sub elements, atomic-search-box-query-suggestions and atomic-search-box-recent-queries, have maximums, which when not defined, fill up the numberOfQueries value. How else could we configure the following:

  • I want a max of 8 queries at all times (any type)
  • When there is no query in the input, I want all the recent queries I can up to 8, but fill the rest with query suggestions
  • When there is a query, I want up to 3 matching recent queries, and fill the rest with query suggestions


public initialize() {
this.id = randomID('atomic-search-box-');
this.querySetActions = loadQuerySetActions(this.bindings.engine);
this.searchBox = buildSearchBox(this.bindings.engine, {
options: {
id: this.id,
numberOfSuggestions: 8, // TODO: handle when adding query suggestion component
numberOfSuggestions: 0,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the new initial value 0?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't let the search box manage the registering and fetching of query suggestions, mainly for the promise we need to wait for before rendering all suggestions. The other atomic-search-box-query-suggestions handles it

highlightOptions: {
notMatchDelimiters: {
open: '<span class="font-bold">',
Expand All @@ -68,14 +85,45 @@ export class AtomicSearchBox {
},
},
});

this.suggestions.push(
...this.pendingSuggestionEvents.map((event) =>
event(this.suggestionBindings)
)
);
this.pendingSuggestionEvents = [];
}

@Listen('atomic/searchBoxSuggestion')
public setFormat(event: CustomEvent<SearchBoxSuggestionsEvent>) {
event.preventDefault();
event.stopPropagation();
if (this.searchBox) {
this.suggestions.push(event.detail(this.suggestionBindings));
return;
}
this.pendingSuggestionEvents.push(event.detail);
}

private get suggestionBindings(): SearchBoxSuggestionsBindings {
return {
...this.bindings,
id: this.id,
searchBoxController: this.searchBox,
numberOfQueries: this.numberOfQueries,
};
}

private get popupId() {
return `${this.id}-popup`;
}

private get hasInputValue() {
return this.searchBoxState.value !== '';
}

private get hasSuggestions() {
return !!this.searchBoxState.suggestions.length;
return !!this.suggestionElements.length;
}

private get hasActiveDescendant() {
Expand Down Expand Up @@ -148,16 +196,26 @@ export class AtomicSearchBox {
this.scrollActiveDescendantIntoView();
}

private async triggerSuggestions() {
await Promise.all(
this.suggestions.map((suggestion) => suggestion.onInput())
);
this.suggestionElements = this.suggestions
// TODO: sort by position
.map((suggestion) => suggestion.renderItems())
.flat()
.slice(0, this.numberOfQueries);
}

private onInput(value: string) {
this.searchBox.updateText(value);
this.updateActiveDescendant();
this.triggerSuggestions();
}

private onFocus() {
this.isExpanded = true;
if (!this.searchBoxState.suggestions.length) {
this.searchBox.showSuggestions();
}
this.triggerSuggestions();
}

private onBlur() {
Expand Down Expand Up @@ -251,7 +309,6 @@ export class AtomicSearchBox {

private renderInputContainer() {
const isLoading = this.searchBoxState.isLoading;
const hasValue = this.searchBoxState.value !== '';
return (
<div class="flex-grow flex items-center">
{this.renderInput()}
Expand All @@ -261,34 +318,32 @@ export class AtomicSearchBox {
class="loading w-5 h-5 rounded-full bg-gradient-to-r animate-spin mr-3 grid place-items-center"
></span>
)}
{!isLoading && hasValue && this.renderClearButton()}
{!isLoading && this.hasInputValue && this.renderClearButton()}
</div>
);
}

// TODO: move inside the atomic-query-suggestions/atomic-recent-queries components
private renderSuggestion(suggestion: Suggestion, index: number) {
private renderSuggestion(
suggestion: SearchBoxSuggestionElement,
index: number
) {
const id = `${this.id}-suggestion-${index}`;
const isSelected = id === this.activeDescendant;
return (
<li
id={id}
role="option"
aria-selected={`${isSelected}`}
key={suggestion.rawValue}
data-value={suggestion.rawValue}
key={suggestion.value}
data-value={suggestion.value}
part={isSelected ? 'active-suggestion suggestion' : 'suggestion'}
class={`flex px-4 h-10 items-center text-neutral-dark hover:bg-neutral-light cursor-pointer first:rounded-t-md last:rounded-b-md ${
isSelected ? 'bg-neutral-light' : ''
}`}
onMouseDown={(e) => e.preventDefault()}
onClick={() => {
this.searchBox.selectSuggestion(suggestion.rawValue);
this.inputRef.blur();
}}
onClick={() => suggestion.onClick()}
>
{/* TODO: add icon when mixed suggestions */}
<span innerHTML={suggestion.highlightedValue}></span>
{suggestion.content}
</li>
);
}
Expand All @@ -307,7 +362,7 @@ export class AtomicSearchBox {
showSuggestions ? '' : 'hidden'
}`}
>
{this.searchBoxState.suggestions.map((suggestion, index) =>
{this.suggestionElements.map((suggestion, index) =>
this.renderSuggestion(suggestion, index)
)}
</ul>
Expand All @@ -329,7 +384,7 @@ export class AtomicSearchBox {
}

public render() {
return (
return [
<div
class={`relative flex bg-background h-full w-full border border-neutral rounded-md ${
this.isExpanded ? 'border-primary ring ring-ring-primary' : ''
Expand All @@ -338,7 +393,13 @@ export class AtomicSearchBox {
{this.renderInputContainer()}
{this.renderSuggestions()}
{this.renderSubmitButton()}
</div>
);
</div>,
!this.suggestions.length && (
<slot>
<atomic-search-box-recent-queries></atomic-search-box-recent-queries>
<atomic-search-box-query-suggestions></atomic-search-box-query-suggestions>
</slot>
),
];
}
}
66 changes: 66 additions & 0 deletions ...x-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import {loadQuerySuggestActions, SearchEngine} from '@coveo/headless';
import {QuerySuggestionSection} from '@coveo/headless/dist/definitions/state/state-sections';
import {Component, Element, Prop, State, h} from '@stencil/core';
import {dispatchSearchBoxSuggestionsEvent} from '../suggestions-common';

@Component({
tag: 'atomic-search-box-query-suggestions',
shadow: true,
})
export class AtomicSearchBoxQuerySuggestions {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think ending the name with a singular would make it easier to understand? Could it also be possible to shorten by removing SearchBox ? e.g.

AtomicSearchBoxQuerySuggestionList
AtomicQuerySuggestionList

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough, but I wanted it to be clear they are for the search box and you can't see them as independent. I could see these AtomicQuerySuggestions/AtomicRecentQueries being standalone somewhere in the page, like quantic uses recent queries

@Element() private host!: HTMLElement;

@State() public error!: Error;

@Prop() public maxWithQuery?: number;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need two different prop for this ? Just one for both could do, no ? 🤔

Why would it be important to have separate option for both mode ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the design (figma), you put as many recent queries as possible when the input is empty, but then you match up to 3 queries. I could remove the options here for query suggest, but I find it more consistent.

@Prop() public maxWithoutQuery?: number;

componentWillLoad() {
try {
dispatchSearchBoxSuggestionsEvent(
({engine, id, searchBoxController, numberOfQueries}) => {
const {registerQuerySuggest, fetchQuerySuggestions} =
loadQuerySuggestActions(engine);

(engine as SearchEngine<QuerySuggestionSection>).dispatch(
registerQuerySuggest({
id,
count: numberOfQueries,
})
);

return {
onInput: () =>
(engine as SearchEngine<QuerySuggestionSection>).dispatch(
fetchQuerySuggestions({
id,
})
),
renderItems: () =>
// TODO: limit values according to maxWithQuery/maxWithoutQuery
searchBoxController.state.suggestions.map((suggestion) => ({
content: <span innerHTML={suggestion.highlightedValue}></span>,
value: suggestion.rawValue,
onClick: () =>
searchBoxController.selectSuggestion(suggestion.rawValue),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this block would be easier to follow if it was broken up into multiple smaller functions.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep! I'll do it in the other PR

})),
};
},
this.host
);
} catch (error) {
this.error = error as Error;
}
}

public render() {
if (this.error) {
return (
<atomic-component-error
element={this.host}
error={this.error}
></atomic-component-error>
);
}
}
}
Loading