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();