diff --git a/frontend/src/layouts/search-layout-page.ts b/frontend/src/layouts/search-layout-page.ts index d18e8994..dd830ad7 100644 --- a/frontend/src/layouts/search-layout-page.ts +++ b/frontend/src/layouts/search-layout-page.ts @@ -6,13 +6,16 @@ import {EventRegistrationMixin} from '../event-listener-setup'; import {HIDE_STYLE} from '../styles'; import {ContextConsumer} from '@lit/context'; import {chartSideBarStateContext} from '../context'; +import {SearchaliciousResultCtlMixin} from '../mixins/search-results-ctl'; /** * Component for the layout of the page * Three columns layout with display flex */ @customElement('searchalicious-layout-page') -export class SearchLayoutPage extends EventRegistrationMixin(LitElement) { +export class SearchLayoutPage extends SearchaliciousResultCtlMixin( + EventRegistrationMixin(LitElement) +) { static override styles = [ HIDE_STYLE, css` diff --git a/frontend/src/search-count.ts b/frontend/src/search-count.ts index 8000828a..9ba13720 100644 --- a/frontend/src/search-count.ts +++ b/frontend/src/search-count.ts @@ -34,10 +34,13 @@ export class SearchCount extends SearchaliciousResultCtlMixin(LitElement) { } if (this.displayTime) { - result += ` (${this.searchResultDetail.displayTime}ms)`; + result = html`${result} + + (${this.searchResultDetail.displayTime}ms)`; } - return result; + return html`${result}`; } /** @@ -46,7 +49,6 @@ export class SearchCount extends SearchaliciousResultCtlMixin(LitElement) { override render() { if (this.searchResultDetail.count > 0) { return html`
${this.renderResultsFound()}
`; - return this.searchResultDetail.count + ' results found'; } else if (this.searchResultDetail.isSearchLaunch) { return html`${this.noResults}`; } else { diff --git a/frontend/src/signals.ts b/frontend/src/signals.ts index 1ec6e660..4947c75c 100644 --- a/frontend/src/signals.ts +++ b/frontend/src/signals.ts @@ -37,6 +37,11 @@ const _searchResultDetail: Record< Signal > = {} as Record>; +/** + * Payload for searchResult signal, before we launch any search + * + * isSearchLaunch is false + */ export const getDefaultSearchResultDetail = () => ({ charts: {}, count: 0, @@ -51,9 +56,10 @@ export const getDefaultSearchResultDetail = () => ({ }); /** * Function to get or create a signal by search name. - * If the signal does not exist, it creates it. + * If the signal does not exist, it creates it using the default value. * @param signalsObject * @param searchName + * @param defaultValue - default value in case it does not yet exists */ const _getOrCreateSignal = ( signalsObject: Record>, @@ -82,6 +88,11 @@ export const isSearchChanged = (searchName: string) => { return _getOrCreateSignal(_isSearchChanged, searchName, false); }; +/** + * Get the SearcResultDetail signal based on search name. + * + * If the no search was yet launch, return a detail corresponding to no search + */ export const searchResultDetail = (searchName: string) => { return _getOrCreateSignal( _searchResultDetail, diff --git a/frontend/src/test/utils.ts b/frontend/src/test/utils.ts index ed91f717..32148eae 100644 --- a/frontend/src/test/utils.ts +++ b/frontend/src/test/utils.ts @@ -1,6 +1,9 @@ import {getDefaultSearchResultDetail, searchResultDetail} from '../signals'; import {DEFAULT_SEARCH_NAME} from '../utils/constants'; +/** + * Utility function for test to reset signal state + */ export const resetSignalToDefault = () => { searchResultDetail(DEFAULT_SEARCH_NAME).value = getDefaultSearchResultDetail();