fix

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`

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}
+        <span part="result-display-time">
+          (${this.searchResultDetail.displayTime}ms)</span
+        >`;
     }
 
-    return result;
+    return html`<span part="result-found">${result}</span>`;
   }
 
   /**
@@ -46,7 +49,6 @@ export class SearchCount extends SearchaliciousResultCtlMixin(LitElement) {
   override render() {
     if (this.searchResultDetail.count > 0) {
       return html`<div>${this.renderResultsFound()}</div>`;
-      return this.searchResultDetail.count + ' results found';
     } else if (this.searchResultDetail.isSearchLaunch) {
       return html`<slot name="no-results">${this.noResults}</slot>`;
     } else {

frontend/src/signals.ts

@@ -37,6 +37,11 @@ const _searchResultDetail: Record<
   Signal<SearchResultDetail>
 > = {} as Record<string, Signal<SearchResultDetail>>;
 
+/**
+ * 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 = <T>(
   signalsObject: Record<string, Signal<T>>,
@@ -82,6 +88,11 @@ export const isSearchChanged = (searchName: string) => {
   return _getOrCreateSignal<boolean>(_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>(
     _searchResultDetail,

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