feat: improve search experience

backend/backend/config/b-tu/elasticsearchrc.js

@@ -8,8 +8,7 @@ const config = {
     database: {
       name: 'elasticsearch',
       query: {
-        minMatch: '60%',
-        queryType: 'query_string',
+        fields: ["name"]
       },
     },
   },

backend/backend/config/default/backend/boostings.js

@@ -39,7 +39,7 @@ const boostings = {
       type: SCThingType.AcademicEvent,
     },
     {
-      factor: 1.6,
+      factor: 2,
       type: SCThingType.Building,
     },
     {
@@ -85,7 +85,7 @@ const boostings = {
   ],
   place: [
     {
-      factor: 2,
+      factor: 3,
       type: SCThingType.Building,
     },
     {

backend/backend/config/default/elasticsearchrc.js

@@ -17,12 +17,21 @@ const config = {
       name: 'elasticsearch',
       version: '8.4.2',
       query: {
-        minMatch: '75%',
-        queryType: 'dis_max',
-        matchBoosting: 1.3,
-        fuzziness: 'AUTO',
-        cutoffFrequency: 0,
-        tieBreaker: 0,
+        type: 'best_fields',
+        fields: [
+          'identifiers^20',
+          'name^10',
+          'translations.*.name^10',
+          'alternateNames^10',
+          'translations.*.alternateNames^10',
+          'description^2',
+          'translations.*.description^2',
+          'categories^5',
+        ],
+      },
+      searchAsYouTypeQuery: {
+        type: 'phrase_prefix',
+        fields: ['name.completion', 'name.completion._2gram', 'name.completion._3gram'],
       },
     },
   },

backend/backend/src/storage/elasticsearch/elasticsearch.ts

@@ -20,6 +20,8 @@ import {
   IndicesGetAliasResponse,
   SearchHit,
   SearchResponse,
+  SearchTermSuggest,
+  SearchTermSuggestOption,
 } from '@elastic/elasticsearch/lib/api/types.js';
 import {SCConfigFile, SCSearchQuery, SCSearchResponse, SCThings, SCUuid} from '@openstapps/core';
 import {Logger} from '@openstapps/logger';
@@ -47,6 +49,9 @@ import {
 import {noUndefined} from './util/no-undefined.js';
 import {retryCatch, RetryOptions} from './util/retry.js';
 import {Feature, Point, Polygon} from 'geojson';
+import {parseSuggestions} from './util/parse-suggestions.js';
+import {buildScoringFunctions} from './query/boost/scoring-functions.js';
+import {buildFilter} from './query/filter.js';
 
 /**
  * A database interface for elasticsearch
@@ -355,6 +360,39 @@ export class Elasticsearch implements Database {
     throw new Error('You tried to PUT an non-existing object. PUT is only supported on existing objects.');
   }
 
+  public async searchAsYouType(parameters: SCSearchQuery): Promise<SCSearchResponse> {
+    const result = await this.client.search({
+      _source: 'name',
+      query: {
+        function_score: {
+          functions: buildScoringFunctions(this.config.internal.boostings, parameters.context),
+          query: {
+            bool: {
+              must: {
+                multi_match: {
+                  query: parameters.query,
+                  type: 'bool_prefix',
+                  fields: ['name.completion', 'name.completion._2gram', 'name.completion._3gram'],
+                },
+              },
+              should: [],
+              filter: parameters.filter === undefined ? undefined : buildFilter(parameters.filter),
+            },
+          },
+          score_mode: 'max',
+          boost_mode: 'multiply',
+        },
+      },
+      index: ACTIVE_INDICES_ALIAS,
+      allow_no_indices: true,
+      size: 5,
+    });
+
+    const suggestions = result.hits.hits.map(it => (it._source as any).name);
+    console.log(suggestions);
+    console.log(result.took);
+  }
+
   /**
    * Search all indexed data
    * @param parameters search query
@@ -364,18 +402,23 @@ export class Elasticsearch implements Database {
       throw new TypeError('Database is undefined. You have to configure the query build');
     }
 
-    const esConfig: ElasticsearchConfig = {
-      name: this.config.internal.database.name as 'elasticsearch',
-      version: this.config.internal.database.version as string,
-      query: this.config.internal.database.query as
-        | ElasticsearchQueryDisMaxConfig
-        | ElasticsearchQueryQueryStringConfig
-        | undefined,
-    };
+    const esConfig = this.config.internal.database as object as ElasticsearchConfig;
 
     const response: SearchResponse<SCThings> = await this.client.search({
       aggs: aggregations,
       query: buildQuery(parameters, this.config, esConfig),
+      suggest:
+        parameters.query === undefined
+          ? undefined
+          : {
+              text: parameters.query,
+              terms: {
+                term: {
+                  field: 'name',
+                  suggest_mode: 'missing',
+                },
+              },
+            },
       from: parameters.from,
       index: ACTIVE_INDICES_ALIAS,
       allow_no_indices: true,
@@ -395,6 +438,7 @@ export class Elasticsearch implements Database {
         response.aggregations === undefined
           ? []
           : parseAggregations(response.aggregations as Record<AggregateName, AggregationsMultiTermsBucket>),
+      suggestions: response.suggest === undefined ? undefined : parseSuggestions(response.suggest),
       pagination: {
         count: response.hits.hits.length,
         offset: typeof parameters.from === 'number' ? parameters.from : 0,

backend/backend/src/storage/elasticsearch/query/query.ts

@@ -30,84 +30,21 @@ export const buildQuery = function buildQuery(
   defaultConfig: SCConfigFile,
   elasticsearchConfig: ElasticsearchConfig,
 ): QueryDslQueryContainer {
-  // if config provides a minMatch parameter, we use query_string instead of a match query
-  let query;
-  if (elasticsearchConfig.query === undefined) {
-    query = {
-      query_string: {
-        analyzer: 'search_german',
-        default_field: 'name',
-        minimum_should_match: '90%',
-        query: typeof parameters.query === 'string' ? parameters.query : '*',
-      },
-    };
-  } else if (elasticsearchConfig.query.queryType === 'query_string') {
-    query = {
-      query_string: {
-        analyzer: 'search_german',
-        default_field: 'name',
-        minimum_should_match: elasticsearchConfig.query.minMatch,
-        query: typeof parameters.query === 'string' ? parameters.query : '*',
-      },
-    };
-  } else if (elasticsearchConfig.query.queryType === 'dis_max') {
-    if (typeof parameters.query === 'string' && parameters.query !== '*') {
-      query = {
-        dis_max: {
-          boost: 1.2,
-          queries: [
-            {
-              match: {
-                name: {
-                  boost: elasticsearchConfig.query.matchBoosting,
-                  fuzziness: elasticsearchConfig.query.fuzziness,
-                  query: parameters.query,
-                },
-              },
-            },
-            {
-              query_string: {
-                default_field: 'name',
-                minimum_should_match: elasticsearchConfig.query.minMatch,
-                query: parameters.query,
-              },
-            },
-          ],
-          tie_breaker: elasticsearchConfig.query.tieBreaker,
-        },
-      };
-    }
-  } else {
-    throw new Error(
-      'Unsupported query type. Check your config file and reconfigure your elasticsearch query',
-    );
-  }
-
-  const functionScoreQuery: QueryDslQueryContainer = {
+  return {
     function_score: {
       functions: buildScoringFunctions(defaultConfig.internal.boostings, parameters.context),
       query: {
         bool: {
-          minimum_should_match: 0, // if we have no should, nothing can match
-          must: [],
+          must:
+            parameters.query === undefined || parameters.query === '' || parameters.query === '*'
+              ? {match_all: {}}
+              : {multi_match: {...elasticsearchConfig.query, query: parameters.query}},
           should: [],
+          filter: parameters.filter === undefined ? undefined : buildFilter(parameters.filter),
         },
       },
-      score_mode: 'multiply',
+      score_mode: 'max',
+      boost_mode: 'multiply',
     },
   };
-
-  const mustMatch = functionScoreQuery.function_score?.query?.bool?.must;
-
-  if (Array.isArray(mustMatch)) {
-    if (query !== undefined) {
-      mustMatch.push(query);
-    }
-
-    if (parameters.filter !== undefined) {
-      mustMatch.push(buildFilter(parameters.filter));
-    }
-  }
-
-  return functionScoreQuery;
 };

backend/backend/src/storage/elasticsearch/types/elasticsearch-config.ts

@@ -13,68 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-/**
- * A configuration for using the Dis Max Query
- *
- * See https://www.elastic.co/guide/en/elasticsearch/reference/5.5/query-dsl-dis-max-query.html for further
- * explanation of what the parameters mean
- */
-export interface ElasticsearchQueryDisMaxConfig {
-  /**
-   * Relative (to a total number of documents) or absolute number to exclude meaningless matches that frequently appear
-   */
-  cutoffFrequency: number;
-
-  /**
-   * The maximum allowed Levenshtein Edit Distance (or number of edits)
-   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/common-options.html#fuzziness
-   */
-  fuzziness: number | string;
-
-  /**
-   * Increase the importance (relevance score) of a field
-   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/mapping-boost.html
-   */
-  matchBoosting: number;
-
-  /**
-   * Minimal number (or percentage) of words that should match in a query
-   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-minimum-should-match.html
-   */
-  minMatch: string;
-
-  /**
-   * Type of the query - in this case 'dis_max' which is a union of its subqueries
-   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-dis-max-query.html
-   */
-  queryType: 'dis_max';
-
-  /**
-   * Changes behavior of default calculation of the score when multiple results match
-   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-multi-match-query.html#tie-breaker
-   */
-  tieBreaker: number;
-}
-
-/**
- * A configuration for using Query String Query
- *
- * See https://www.elastic.co/guide/en/elasticsearch/reference/5.5/query-dsl-query-string-query.html for further
- * explanation of what the parameters mean
- */
-export interface ElasticsearchQueryQueryStringConfig {
-  /**
-   * Minimal number (or percentage) of words that should match in a query
-   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-minimum-should-match.html
-   */
-  minMatch: string;
-
-  /**
-   * Type of the query - in this case 'query_string' which uses a query parser in order to parse content
-   * @see https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-query-string-query.html
-   */
-  queryType: 'query_string';
-}
+import {QueryDslMultiMatchQuery} from '@elastic/elasticsearch/lib/api/types.js';
 
 /**
  * An config file for the elasticsearch database interface
@@ -105,7 +44,12 @@ export interface ElasticsearchConfig {
   /**
    * Configuration for using queries
    */
-  query?: ElasticsearchQueryDisMaxConfig | ElasticsearchQueryQueryStringConfig;
+  query: Omit<QueryDslMultiMatchQuery, 'query'>;
+
+  /**
+   *
+   */
+  searchAsYouTypeQuery: Omit<QueryDslMultiMatchQuery, 'query'>;
 
   /**
    * Version of the used elasticsearch

backend/backend/src/storage/elasticsearch/util/parse-suggestions.ts

@@ -0,0 +1,28 @@
+import {
+  SearchSuggest,
+  SearchTermSuggest,
+  SearchTermSuggestOption,
+  SuggestionName,
+} from '@elastic/elasticsearch/lib/api/types.js';
+import {SCSearchSuggestions} from '@openstapps/core';
+
+/**
+ * Parse ES Suggestions to SC Search Suggestions
+ */
+export function parseSuggestions(suggest: Record<SuggestionName, SearchSuggest[]>): SCSearchSuggestions {
+  const termsSuggestions =
+    suggest.terms === undefined
+      ? []
+      : (suggest.terms as SearchTermSuggest[])
+          ?.map(
+            ({text, options}) =>
+              [
+                text,
+                (options as SearchTermSuggestOption[] | undefined)?.map(({text}) => text) ?? [],
+              ] as const,
+          )
+          .filter(([, suggestions]) => suggestions.length > 0) ?? [];
+  return {
+    terms: termsSuggestions.length === 0 ? undefined : Object.fromEntries(termsSuggestions),
+  };
+}

frontend/app/package.json

@@ -82,7 +82,6 @@
     "@ionic/angular": "7.8.0",
     "@ionic/storage-angular": "4.0.0",
     "@maplibre/ngx-maplibre-gl": "17.4.1",
-    "@material/material-color-utilities": "0.3.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.1",

frontend/app/src/app/app.module.ts

@@ -71,7 +71,6 @@ import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
 import maplibregl from 'maplibre-gl';
 import {Protocol} from 'pmtiles';
-import {ThemeProvider} from './util/theme.provider';
 
 registerLocaleData(localeDe);
 
@@ -90,7 +89,6 @@ export function initializerFactory(
   defaultAuthService: DefaultAuthService,
   paiaAuthService: PAIAAuthService,
   dateFnsConfigurationService: DateFnsConfigurationService,
-  _themeProvider: ThemeProvider,
 ) {
   return async () => {
     try {
@@ -215,7 +213,6 @@ export function createTranslateLoader(http: HttpClient) {
         DefaultAuthService,
         PAIAAuthService,
         DateFnsConfigurationService,
-        ThemeProvider,
       ],
       useFactory: initializerFactory,
     },

frontend/app/src/app/modules/data/list/search-page.component.ts

@@ -24,6 +24,7 @@ import {
   SCSearchQuery,
   SCSearchSort,
   SCThings,
+  SCSearchSuggestions,
 } from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
 import {combineLatest, Subject} from 'rxjs';
@@ -110,6 +111,8 @@ export class SearchPageComponent implements OnInit {
    */
   items: Promise<SCThings[]>;
 
+  suggestions: SCSearchSuggestions | undefined;
+
   /**
    * Page size of queries
    */
@@ -219,6 +222,7 @@ export class SearchPageComponent implements OnInit {
 
     try {
       const result = await this.dataProvider.search(searchOptions);
+      this.suggestions = result.suggestions;
       this.singleTypeResponse = result.facets.find(facet => facet.field === 'type')?.buckets.length === 1;
       if (append) {
         // append results
@@ -283,6 +287,12 @@ export class SearchPageComponent implements OnInit {
     this.contextMenuService.updateContextFilter(facets);
   }
 
+  applySuggestion(target: string, suggestion: string) {
+    this.queryText = this.queryText.replaceAll(target, suggestion);
+    this.suggestions = undefined;
+    this.searchStringChanged(this.queryText);
+  }
+
   ngOnInit(defaultListeners = true) {
     this.initialize();
     this.contextMenuService.setContextSort({

frontend/app/src/app/modules/data/list/search-page.html

@@ -69,7 +69,23 @@
 </ion-header>
 
 <ion-content class="content">
+  <div class="suggestions">
+    @if (suggestions?.terms; as terms) {
+      <span>{{ 'search.SUGGESTIONS' | translate }}: </span>
+      @for (suggestion of terms | keyvalue; track suggestion) {
+        @for (term of suggestion.value; track term) {
+          @if ($index == 0) {
+            <b (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</b>
+          } @else {
+            <span (click)="applySuggestion(suggestion.key, term)" class="suggestion">{{ term }}</span>
+          }
+        }
+      }
+    }
+  </div>
+
   <div
+    class="hint"
     [class.no-results]="!showDefaultData && !items && !loading"
     [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
   >

frontend/app/src/app/modules/data/list/search-page.scss

@@ -46,7 +46,7 @@ ion-content {
   --background: var(--ion-background-color);
 }
 
-.content > div {
+.content > .hint {
   height: 100%;
 
   ion-label.centered-message-container {
@@ -60,3 +60,19 @@ ion-content {
 ion-header {
   background: var(--ion-color-primary);
 }
+
+.suggestions {
+  padding: var(--spacing-md);
+  padding-block-end: 0;
+}
+
+.suggestion {
+  cursor: pointer;
+}
+
+.suggestion + .suggestion::before {
+  cursor: text;
+  content: ',';
+  padding-inline-end: 0.25ch;
+  font-weight: normal;
+}

frontend/app/src/app/util/media-query.pipe.ts

@@ -1,7 +1,6 @@
 import {PipeTransform} from '@angular/core';
 import {Pipe} from '@angular/core';
-import {Observable} from 'rxjs';
-import {fromMediaQuery} from './rxjs/from-media-query';
+import {Observable, fromEvent, map, startWith} from 'rxjs';
 
 @Pipe({
   name: 'mediaQuery',
@@ -10,6 +9,10 @@ import {fromMediaQuery} from './rxjs/from-media-query';
 })
 export class MediaQueryPipe implements PipeTransform {
   transform(query: string): Observable<boolean> {
-    return fromMediaQuery(query);
+    const match = window.matchMedia(query);
+    return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
+      map(event => event.matches),
+      startWith(match.matches),
+    );
   }
 }

frontend/app/src/app/util/rxjs/from-media-query.ts

@@ -1,38 +0,0 @@
-import {Observable, combineLatest, defer, distinctUntilChanged, fromEvent, map, startWith} from 'rxjs';
-
-/**
- * Lazily creates an Observable that emits whether the given media query matches.
- * @example
- * fromMediaQuery('(prefers-color-scheme: dark)').subscribe(matches => console.log(matches))
- */
-export function fromMediaQuery(query: string): Observable<boolean> {
-  return defer(() => {
-    const match = window.matchMedia(query);
-    return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
-      map(event => event.matches),
-      startWith(match.matches),
-    );
-  });
-}
-
-/**
- * Like `fromMediaQuery`, but combines multiple matches.
- * Since the list of values may not be exhaustive, the result can be `undefined`
- * @example
- * fromMediaQueryValues('prefers-color-scheme', ['dark', 'light']).subscribe(value => console.log(value))
- */
-export function fromMediaQueryValues<T extends string>(
-  property: string,
-  values: T[],
-): Observable<T | undefined> {
-  return defer(() =>
-    combineLatest(
-      values.map(value =>
-        fromMediaQuery(`(${property}: ${value})`).pipe(map(matches => [value, matches] as const)),
-      ),
-    ).pipe(
-      map(matches => matches.find(([, matches]) => matches)?.[0]),
-      distinctUntilChanged(),
-    ),
-  );
-}

frontend/app/src/app/util/theme-ionic-utils.ts

@@ -1,288 +0,0 @@
-import {Hct, argbFromHex, hexFromArgb} from '@material/material-color-utilities';
-import {
-  IonTheme,
-  IonThemeColorDarkLight,
-  IonThemeOptions,
-  ThemeCustomColor,
-  ThemeCustomColorOptions,
-} from './theme-types';
-import {dynamicScheme, makeCustomColor} from './theme-utils';
-
-/**
- * Turn a custom material color to a color that can be used in Ionic
- */
-export function ionColorFromCustomColor(color: ThemeCustomColor): IonThemeColorDarkLight {
-  return {
-    palette: color.palette,
-    light: {
-      color: color.light.color,
-      colorContrast: color.light.onColor,
-      colorShade: color.fixed.dim,
-      colorTint: color.fixed.color,
-    },
-    dark: {
-      color: color.dark.color,
-      colorContrast: color.dark.onColor,
-      colorShade: color.fixed.dim,
-      colorTint: color.fixed.color,
-    },
-  };
-}
-
-/**
- * Create an Ionic theme
- */
-export function makeIonicTheme(options: IonThemeOptions): IonTheme {
-  const light = dynamicScheme(
-    options.variant,
-    Hct.fromInt(options.sourceColor),
-    false,
-    options.contrastLevel,
-  );
-  const dark = dynamicScheme(options.variant, Hct.fromInt(options.sourceColor), true, options.contrastLevel);
-  const customColorOptions: Omit<ThemeCustomColorOptions, 'color'> = {
-    blend: true,
-    sourceColor: options.sourceColor,
-    variant: options.variant,
-    contrastLevel: options.contrastLevel,
-  };
-
-  return {
-    success: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#00ff00'), ...customColorOptions})),
-    warning: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ffdd00'), ...customColorOptions})),
-    danger: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ff4444'), ...customColorOptions})),
-    primary: {
-      palette: light.primaryPalette,
-      light: {
-        color: light.primary,
-        colorContrast: light.onPrimary,
-        colorShade: light.primaryFixedDim,
-        colorTint: light.primaryFixed,
-      },
-      dark: {
-        color: dark.primary,
-        colorContrast: dark.onPrimary,
-        colorShade: dark.primaryFixedDim,
-        colorTint: dark.primaryFixed,
-      },
-    },
-    secondary: {
-      palette: light.secondaryPalette,
-      light: {
-        color: light.secondary,
-        colorContrast: light.onSecondary,
-        colorShade: light.secondaryFixedDim,
-        colorTint: light.secondaryFixed,
-      },
-      dark: {
-        color: dark.secondary,
-        colorContrast: dark.onSecondary,
-        colorShade: dark.secondaryFixedDim,
-        colorTint: dark.secondaryFixed,
-      },
-    },
-    tertiary: {
-      palette: light.tertiaryPalette,
-      light: {
-        color: light.tertiary,
-        colorContrast: light.onTertiary,
-        colorShade: light.tertiaryFixedDim,
-        colorTint: light.tertiaryFixed,
-      },
-      dark: {
-        color: dark.tertiary,
-        colorContrast: dark.onTertiary,
-        colorShade: dark.tertiaryFixedDim,
-        colorTint: dark.tertiaryFixed,
-      },
-    },
-    light: {
-      palette: light.neutralPalette,
-      light: {
-        color: light.neutralPalette.tone(90),
-        colorContrast: light.onSurface,
-        colorShade: light.neutralPalette.tone(85),
-        colorTint: light.neutralPalette.tone(95),
-      },
-      dark: {
-        color: dark.surfaceContainerLowest,
-        colorContrast: dark.onSurface,
-        // TODO: find a better color for these
-        colorShade: dark.surfaceBright,
-        colorTint: dark.surfaceBright,
-      },
-    },
-    medium: {
-      palette: light.neutralVariantPalette,
-      light: {
-        color: light.neutralPalette.tone(50),
-        colorContrast: light.onSurfaceVariant,
-        colorShade: light.neutralPalette.tone(45),
-        colorTint: light.neutralPalette.tone(55),
-      },
-      dark: {
-        color: dark.surfaceVariant,
-        colorContrast: dark.onSurfaceVariant,
-        // TODO: find a better color for these
-        colorShade: dark.surfaceContainerLow,
-        colorTint: dark.surfaceContainerHigh,
-      },
-    },
-    dark: {
-      palette: light.neutralPalette,
-      light: {
-        color: light.surfaceContainerHigh,
-        colorContrast: light.onSurface,
-        colorShade: light.surfaceContainerHighest,
-        colorTint: light.surfaceContainer,
-      },
-      dark: {
-        color: dark.surfaceContainerHighest,
-        colorContrast: dark.onSurface,
-        // TODO: find a better color for these
-        colorShade: dark.surfaceDim,
-        colorTint: dark.surfaceDim,
-      },
-    },
-    background: {
-      palette: light.neutralPalette,
-      light: {
-        backgroundColor: light.background,
-        textColor: light.onBackground,
-        boxShadowColor: light.shadow,
-        placeholderColor: light.onSurfaceVariant,
-      },
-      dark: {
-        backgroundColor: dark.background,
-        textColor: dark.onBackground,
-        boxShadowColor: dark.shadow,
-        placeholderColor: dark.onSurfaceVariant,
-      },
-    },
-    item: {
-      palette: light.neutralPalette,
-      light: {
-        itemBackground: light.surface,
-        itemColor: light.onSurface,
-        cardBackground: light.surfaceContainer,
-        itemBorderColor: light.outline,
-        borderColor: light.outline,
-      },
-      dark: {
-        itemBackground: dark.surface,
-        itemColor: dark.onSurface,
-        cardBackground: dark.surfaceContainer,
-        itemBorderColor: dark.outline,
-        borderColor: dark.outline,
-      },
-    },
-  };
-}
-
-/**
- * Simple color
- */
-function color(element: HTMLElement, name: string, argb: number) {
-  element.style.setProperty(name, hexFromArgb(argb));
-}
-
-/**
- * Color, in RGB
- */
-function colorRgb(element: HTMLElement, name: string, argb: number) {
-  element.style.setProperty(name, `${(argb >> 16) & 0xff}, ${(argb >> 8) & 0xff}, ${argb & 0xff}`);
-}
-
-/**
- * Apply the Ionic color to an element
- */
-export function applyIonicAccentColor(
-  element: HTMLElement,
-  name: string,
-  colors: IonThemeColorDarkLight,
-  dark: boolean,
-) {
-  const operations = [
-    ['', dark ? colors.dark : colors.light],
-    ['-dark', colors.dark],
-    ['-light', colors.light],
-  ] as const;
-
-  for (const [suffix, colors] of operations) {
-    color(element, `--ion-color-${name}${suffix}`, colors.color);
-    color(element, `--ion-color-${name}-contrast${suffix}`, colors.colorContrast);
-    color(element, `--ion-color-${name}-shade${suffix}`, colors.colorShade);
-    color(element, `--ion-color-${name}-tint${suffix}`, colors.colorTint);
-
-    colorRgb(element, `--ion-color-${name}-rgb${suffix}`, colors.color);
-    colorRgb(element, `--ion-color-${name}-contrast-rgb${suffix}`, colors.colorContrast);
-    colorRgb(element, `--ion-color-${name}-shade-rgb${suffix}`, colors.colorShade);
-    colorRgb(element, `--ion-color-${name}-tint-rgb${suffix}`, colors.colorTint);
-  }
-}
-
-/**
- * Apply the theme
- */
-export function applyIonicTheme(element: HTMLElement, theme: IonTheme, dark: boolean) {
-  applyIonicAccentColor(element, 'primary', theme.primary, dark);
-  applyIonicAccentColor(element, 'secondary', theme.secondary, dark);
-  applyIonicAccentColor(element, 'tertiary', theme.tertiary, dark);
-  applyIonicAccentColor(element, 'success', theme.success, dark);
-  applyIonicAccentColor(element, 'warning', theme.warning, dark);
-  applyIonicAccentColor(element, 'danger', theme.danger, dark);
-  applyIonicAccentColor(element, 'dark', theme.dark, dark);
-  applyIonicAccentColor(element, 'medium', theme.medium, dark);
-  applyIonicAccentColor(element, 'light', theme.light, dark);
-
-  const backgroundOps = [
-    ['', dark ? theme.background.dark : theme.background.light],
-    ['-dark', theme.background.dark],
-    ['-light', theme.background.light],
-  ] as const;
-
-  for (const [suffix, background] of backgroundOps) {
-    color(element, `--ion-background-color${suffix}`, background.backgroundColor);
-    color(element, `--ion-text-color${suffix}`, background.textColor);
-    color(element, `--ion-box-shadow-color${suffix}`, background.boxShadowColor);
-    color(element, `--ion-placeholder-color${suffix}`, background.placeholderColor);
-
-    colorRgb(element, `--ion-background-color-rgb${suffix}`, background.backgroundColor);
-    colorRgb(element, `--ion-text-color-rgb${suffix}`, background.textColor);
-    colorRgb(element, `--ion-box-shadow-color-rgb${suffix}`, background.boxShadowColor);
-    colorRgb(element, `--ion-placeholder-color-rgb${suffix}`, background.placeholderColor);
-  }
-
-  const stepOps = [
-    ['', dark ? true : false],
-    ['-dark', true],
-    ['-light', false],
-  ] as const;
-
-  for (const [suffix, reverse] of stepOps) {
-    for (let i = 5; i < 100; i += 5) {
-      const ionicTone = 10 * (reverse ? 100 - i : i);
-      color(element, `--ion-color-step-${ionicTone}${suffix}`, theme.background.palette.tone(i));
-    }
-  }
-
-  const itemOps = [
-    ['', dark ? theme.item.dark : theme.item.light],
-    ['-dark', theme.item.dark],
-    ['-light', theme.item.light],
-  ] as const;
-
-  for (const [suffix, item] of itemOps) {
-    color(element, `--ion-item-background${suffix}`, item.itemBackground);
-    color(element, `--ion-card-background${suffix}`, item.cardBackground);
-    color(element, `--ion-item-border-color${suffix}`, item.itemBorderColor);
-    color(element, `--ion-border-color${suffix}`, item.borderColor);
-    color(element, `--ion-item-color${suffix}`, item.itemColor);
-
-    colorRgb(element, `--ion-item-background-rgb${suffix}`, item.itemBackground);
-    colorRgb(element, `--ion-card-background-rgb${suffix}`, item.cardBackground);
-    colorRgb(element, `--ion-item-border-color-rgb${suffix}`, item.itemBorderColor);
-    colorRgb(element, `--ion-border-color-rgb${suffix}`, item.borderColor);
-    colorRgb(element, `--ion-item-color-rgb${suffix}`, item.itemColor);
-  }
-}

frontend/app/src/app/util/theme-types.ts

@@ -1,109 +0,0 @@
-import {TonalPalette} from '@material/material-color-utilities';
-
-export const THEME_VARIANTS = [
-  'content',
-  'neutral',
-  'rainbow',
-  'vibrant',
-  'fidelity',
-  'expressive',
-  'monochrome',
-  'tonal-spot',
-  'fruit-salad',
-] as const;
-export type ThemeVariant = (typeof THEME_VARIANTS)[number];
-
-export interface ThemeCustomColorOptions {
-  color: number;
-  blend: boolean;
-  sourceColor: number;
-  variant: ThemeVariant;
-  contrastLevel: number;
-}
-
-export interface ThemeColorNormal {
-  color: number;
-  onColor: number;
-  container: number;
-  onContainer: number;
-}
-
-/**
- * Palette that can be used in both light and dark mode.
- * Caution: check contrast level before using
- * @see https://m3.material.io/styles/color/roles#26b6a882-064d-4668-b096-c51142477850
- */
-export interface ThemeColorFixed {
-  color: number;
-  onColor: number;
-  /**
-   * Lower emphasis against fixed color
-   */
-  onVariant: number;
-  dim: number;
-}
-
-export interface ThemeCustomColor {
-  color: number;
-  source: number;
-  palette: TonalPalette;
-  light: ThemeColorNormal;
-  dark: ThemeColorNormal;
-  fixed: ThemeColorFixed;
-}
-
-export interface IonThemeOptions {
-  sourceColor: number;
-  contrastLevel: number;
-  variant: ThemeVariant;
-}
-
-export interface IonThemeColor {
-  color: number;
-  colorContrast: number;
-  colorShade: number;
-  colorTint: number;
-}
-
-export interface IonThemeColorDarkLight {
-  palette: TonalPalette;
-  dark: IonThemeColor;
-  light: IonThemeColor;
-}
-
-export interface IonThemeBackground {
-  backgroundColor: number;
-  textColor: number;
-  boxShadowColor: number;
-  placeholderColor: number;
-}
-
-export interface IonThemeItem {
-  itemBackground: number;
-  cardBackground: number;
-  itemBorderColor: number;
-  borderColor: number;
-  itemColor: number;
-}
-
-export interface IonTheme {
-  primary: IonThemeColorDarkLight;
-  secondary: IonThemeColorDarkLight;
-  tertiary: IonThemeColorDarkLight;
-  success: IonThemeColorDarkLight;
-  warning: IonThemeColorDarkLight;
-  danger: IonThemeColorDarkLight;
-  dark: IonThemeColorDarkLight;
-  medium: IonThemeColorDarkLight;
-  light: IonThemeColorDarkLight;
-  background: {
-    palette: TonalPalette;
-    light: IonThemeBackground;
-    dark: IonThemeBackground;
-  };
-  item: {
-    palette: TonalPalette;
-    light: IonThemeItem;
-    dark: IonThemeItem;
-  };
-}

frontend/app/src/app/util/theme-utils.ts

@@ -1,93 +0,0 @@
-import {
-  Blend,
-  Hct,
-  SchemeContent,
-  SchemeExpressive,
-  SchemeFidelity,
-  SchemeFruitSalad,
-  SchemeMonochrome,
-  SchemeNeutral,
-  SchemeRainbow,
-  SchemeTonalSpot,
-  SchemeVibrant,
-} from '@material/material-color-utilities';
-import {ThemeCustomColor, ThemeCustomColorOptions, ThemeVariant} from './theme-types';
-
-export const DEFAULT_CONTRAST = 0;
-export const GLOBAL_CONTRAST = {
-  'more': 4,
-  'less': 0,
-  'no-preference': 0,
-};
-
-/**
- * Creates a DynamicScheme based on the variant.
- */
-export function dynamicScheme(
-  variant: ThemeVariant,
-  sourceColorHct: Hct,
-  isDark: boolean,
-  contrastLevel: number,
-) {
-  switch (variant) {
-    case 'content': {
-      return new SchemeContent(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'neutral': {
-      return new SchemeNeutral(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'rainbow': {
-      return new SchemeRainbow(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'vibrant': {
-      return new SchemeVibrant(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'fidelity': {
-      return new SchemeFidelity(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'expressive': {
-      return new SchemeExpressive(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'monochrome': {
-      return new SchemeMonochrome(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'tonal-spot': {
-      return new SchemeTonalSpot(sourceColorHct, isDark, contrastLevel);
-    }
-    case 'fruit-salad': {
-      return new SchemeFruitSalad(sourceColorHct, isDark, contrastLevel);
-    }
-  }
-}
-
-/**
- * Create a custom color that works with the theme
- */
-export function makeCustomColor(options: ThemeCustomColorOptions): ThemeCustomColor {
-  const color = options.blend ? Blend.harmonize(options.color, options.sourceColor) : options.color;
-  const light = dynamicScheme(options.variant, Hct.fromInt(color), false, options.contrastLevel);
-  const dark = dynamicScheme(options.variant, Hct.fromInt(color), true, options.contrastLevel);
-  return {
-    color,
-    source: options.color,
-    palette: light.primaryPalette,
-    light: {
-      color: light.primary,
-      onColor: light.onPrimary,
-      container: light.primaryContainer,
-      onContainer: light.onPrimaryContainer,
-    },
-    dark: {
-      color: dark.primary,
-      onColor: dark.onPrimary,
-      container: dark.primaryContainer,
-      onContainer: dark.onPrimaryContainer,
-    },
-    fixed: {
-      color: light.primaryFixed,
-      onColor: light.onPrimaryFixed,
-      dim: light.primaryFixedDim,
-      onVariant: light.onPrimaryFixedVariant,
-    },
-  };
-}

frontend/app/src/app/util/theme.provider.ts

@@ -1,61 +0,0 @@
-import {Injectable} from '@angular/core';
-import {fromMediaQuery, fromMediaQueryValues} from './rxjs/from-media-query';
-import {BehaviorSubject, Observable, combineLatest, distinctUntilChanged, map} from 'rxjs';
-import {argbFromHex} from '@material/material-color-utilities';
-import {applyIonicTheme, makeIonicTheme} from './theme-ionic-utils';
-import {DEFAULT_CONTRAST, GLOBAL_CONTRAST} from './theme-utils';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {ThemeVariant} from './theme-types';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ThemeProvider {
-  prefersDark = fromMediaQuery('(prefers-color-scheme: dark)');
-
-  constrastPreference = fromMediaQueryValues('prefers-contrast', ['more', 'less', 'no-preference']);
-
-  // TODO: fetch the color from somewhere
-  settingThemeColor = new BehaviorSubject<string>('#3880FF');
-
-  settingThemeVariant = new BehaviorSubject<ThemeVariant>('content');
-
-  settingThemeContrast = new BehaviorSubject<number | undefined>(undefined);
-
-  settingThemeMode = new BehaviorSubject<'light' | 'dark' | undefined>(undefined);
-
-  themeSourceColor = this.settingThemeColor.pipe(map(argbFromHex));
-
-  themeVariant = this.settingThemeVariant.asObservable();
-
-  themeContrastLevel: Observable<number> = combineLatest([
-    this.constrastPreference,
-    this.settingThemeContrast,
-  ]).pipe(
-    map(([prefersContrast, customContrast]) =>
-      customContrast === undefined
-        ? prefersContrast === undefined
-          ? DEFAULT_CONTRAST
-          : GLOBAL_CONTRAST[prefersContrast]
-        : customContrast,
-    ),
-    distinctUntilChanged(),
-  );
-
-  themeIsDark = combineLatest([this.prefersDark, this.settingThemeMode]).pipe(
-    map(([prefersDark, customMode]) => (customMode === undefined ? prefersDark : customMode === 'dark')),
-    distinctUntilChanged(),
-  );
-
-  ionicTheme = combineLatest([this.themeContrastLevel, this.themeVariant, this.themeSourceColor]).pipe(
-    map(([contrastLevel, variant, sourceColor]) => makeIonicTheme({variant, sourceColor, contrastLevel})),
-  );
-
-  constructor() {
-    combineLatest([this.ionicTheme, this.themeIsDark])
-      .pipe(takeUntilDestroyed())
-      .subscribe(([theme, isDark]) => {
-        applyIonicTheme(document.documentElement, theme, isDark);
-      });
-  }
-}

frontend/app/src/assets/i18n/de.json

@@ -422,7 +422,8 @@
       "placeholder": "Veranstaltungen, Personen, Orte und mehr"
     },
     "instruction": "Finde alle Informationen rund ums Studium und den Campus",
-    "nothing_found": "Keine Ergebnisse"
+    "nothing_found": "Keine Ergebnisse",
+    "SUGGESTIONS": "Meintest du"
   },
   "hebisSearch": {
     "title": "Bibliothekssuche",

frontend/app/src/assets/i18n/en.json

@@ -422,7 +422,8 @@
       "placeholder": "Events, places, persons and more"
     },
     "instruction": "Find all information related to your studies and campus",
-    "nothing_found": "No results"
+    "nothing_found": "No results",
+    "SUGGESTIONS": "Did you mean"
   },
   "hebisSearch": {
     "title": "Library Search",

frontend/app/src/environments/environment.ts

@@ -18,7 +18,7 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  backend_url: 'https://mobile.server.uni-frankfurt.de',
+  backend_url: 'http://localhost:3000',
   app_host: 'mobile.app.uni-frankfurt.de',
   custom_url_scheme: 'de.anyschool.app',
   backend_version: '999.0.0',

frontend/app/src/theme/colors.scss

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 @import './util/color-system';
-/*
+
 @include ion-color(primary, #3880ff);
 @include ion-color(secondary, #32db64);
 @include ion-color(tertiary, #f4a942);
@@ -26,7 +26,6 @@
 
 @include ion-background-color(#f5f5f5, #000);
 @include ion-item-color(#fff, #0e0e0e);
-*/
 
 :root {
   --calender-lecture-card: var(--ion-color-primary-tint);

packages/api-cli/README.md

@@ -23,7 +23,7 @@ node ./lib/cli.js e2e http://localhost:3000
 Example to clone the full database
 
 ```shell
-node app.js copy "*" https://mobile.app.uni-frankfurt.de http://localhost:3000 100
+node app.js copy "*" -a "999.0.0" https://mobile.server.uni-frankfurt.de http://localhost:3000 100
 ```
 
 ### Program arguments

packages/core/package.json

@@ -97,6 +97,8 @@
             "date",
             "validatable",
             "filterable",
+            "suggestable",
+            "completable",
             "inheritTags",
             "minLength",
             "pattern",

packages/core/src/protocol/search/result.ts

@@ -24,6 +24,11 @@ export interface SCSearchResult {
    */
   data: SCThings[];
 
+  /**
+   * Suggestions for query corrections
+   */
+  suggestions?: SCSearchSuggestions;
+
   /**
    * Facets (aggregations over all matching data)
    */
@@ -40,6 +45,18 @@ export interface SCSearchResult {
   stats: SCSearchResultSearchEngineStats;
 }
 
+/**
+ * Seach suggestions
+ *
+ * Not to be confused with search-as-you-type suggestions
+ */
+export interface SCSearchSuggestions {
+  /**
+   * Suggestions for query terms that might have been misspelled
+   */
+  terms?: Record<string, string[]>;
+}
+
 /**
  * Stores information about Pagination
  */

packages/core/src/things/abstract/thing.ts

@@ -63,7 +63,7 @@ export interface SCThingWithoutReferences {
   /**
    * Alternate names of the thing
    * @filterable
-   * @keyword
+   * @text
    */
   alternateNames?: string[];
 
@@ -92,6 +92,8 @@ export interface SCThingWithoutReferences {
    * @filterable
    * @minLength 1
    * @sortable ducet
+   * @completable
+   * @suggestable
    * @text
    */
   name: string;
@@ -240,6 +242,8 @@ export interface SCThingTranslatableProperties {
    * Translation of the name of the thing
    * @sortable ducet
    * @text
+   * @suggestable
+   * @completable
    */
   name?: string;
   /**

packages/es-mapping-generator/src/config/fieldmap.ts

@@ -43,6 +43,27 @@ export const fieldmap: ElasticsearchFieldmap = {
     },
     ignore: ['price'],
   },
+  suggestable: {
+    default: {
+      trigram: {
+        type: 'text',
+        analyzer: 'trigram',
+      },
+      reverse: {
+        type: 'text',
+        analyzer: 'reverse',
+      },
+    },
+    ignore: [],
+  },
+  completable: {
+    default: {
+      completion: {
+        type: 'search_as_you_type',
+      },
+    },
+    ignore: [],
+  },
 };
 
 export const filterableTagName = 'filterable';

packages/es-mapping-generator/src/config/settings.ts

@@ -19,4 +19,27 @@ export const settings: IndicesPutTemplateRequest['settings'] = {
   'max_result_window': 30_000,
   'number_of_replicas': 0,
   'number_of_shards': 1,
+  'index': {
+    analysis: {
+      analyzer: {
+        trigram: {
+          type: 'custom',
+          tokenizer: 'standard',
+          filter: ['lowercase', 'shingle'],
+        },
+        reverse: {
+          type: 'custom',
+          tokenizer: 'standard',
+          filter: ['lowercase', 'reverse'],
+        },
+      },
+      filter: {
+        shingle: {
+          type: 'shingle',
+          min_shingle_size: 2,
+          max_shingle_size: 3,
+        },
+      },
+    },
+  },
 };

pnpm-lock.yaml

@@ -791,9 +791,6 @@ importers:
       '@maplibre/ngx-maplibre-gl':
         specifier: 17.4.1
         version: 17.4.1(@angular/common@17.3.0)(@angular/core@17.3.0)(maplibre-gl@4.0.2)(rxjs@7.8.1)
-      '@material/material-color-utilities':
-        specifier: 0.3.0
-        version: 0.3.0
       '@ngx-translate/core':
         specifier: 15.0.0
         version: 15.0.0(@angular/common@17.3.0)(@angular/core@17.3.0)(rxjs@7.8.1)
@@ -5525,7 +5522,7 @@ packages:
       object-assign: 4.1.1
       open: 8.4.0
       proxy-middleware: 0.15.0
-      send: 0.19.0
+      send: 0.18.0
       serve-index: 1.9.1
     transitivePeerDependencies:
       - supports-color
@@ -7070,10 +7067,6 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@material/material-color-utilities@0.3.0:
-    resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==}
-    dev: false
-
   /@ngtools/webpack@17.3.0(@angular/compiler-cli@17.3.0)(typescript@5.4.2)(webpack@5.90.3):
     resolution: {integrity: sha512-wNTCDPPEtjP4mxYerLVLCMwOCTEOD2HqZMVXD8pJbarrGPMuoyglUZuqNSIS5KVqR+fFez6JEUnMvC3QSqf58w==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -18935,27 +18928,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /send@0.19.0:
-    resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      debug: 2.6.9
-      depd: 2.0.0
-      destroy: 1.2.0
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      etag: 1.8.1
-      fresh: 0.5.2
-      http-errors: 2.0.0
-      mime: 1.6.0
-      ms: 2.1.3
-      on-finished: 2.4.1
-      range-parser: 1.2.1
-      statuses: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /serialize-javascript@6.0.0:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
     dependencies: