Knora-ui search module

This module is part of Knora-ui modules, developed by the team at the Data and Service Center for Humanities DaSCH.

Search module allows to make simple searches or extended searches in Knora. In extended search, resource class and its properties related to one specific ontology are selected to create your query.

Prerequisites

For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using Knora-ui search.

Install

You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.

Yarn

$ yarn add @knora/search

NPM

$ npm install --save @knora/search

Dependencies

This module has the following package dependencies, which you also have to install.

• @angular/[email protected]
• @angular/[email protected]
• @knora/[email protected]
• @knora/[email protected]
• @knora/[email protected]
• @knora/[email protected]
• [email protected]

Required version of Knora: 12.0.0

Components

This module contains various components to search. The main component is the kui-search-panel, which contains the kui-fulltext-search, kui-extended-search and kui-expert-search. All of them can be used standalone or in combination in kui-search-panel.

Search panel

Fully customizable panel. You can set the following parameters in kui-search-panel:

• route: string; url-route for search results
• filterbyproject: string; project iri to limit search results by project
• projectfilter: boolean; selection of all projects to filter by one of them
• advanced: boolean; additional menu with advanced / extended search
• expert: boolean; additional menu with expert search / gravsearch "editor"

If everything is set to false or undefined the search-panel is a simple full-text search. Read more

Full-text search (Deprecated)

<kui-fulltext-search [route]="/search-results"></kui-fulltext-search>

The parameter route defines the route where the search-results-component of the app is defined.

We suggest to define a route for the search-results in the app.routing

        path: 'search',
        component: SearchComponent,         // --> Component with the search panel
        children: [
            {
                path: ':mode/:q/:project',
                component: SearchResultsComponent       // --> search results, in case of paramter filterByProject and/or projectFilter
            },
            {
                path: ':mode/:q',
                component: SearchResultsComponent
            }
        ]

Extended / advanced search

Generic search filter tool to limit search results to ontology and resource class and / or properties. Read more

If you want to use this search, you have to add the following css style to you main app stylesheet to style the date picker properly.

.mat-datepicker-content {
  .mat-calendar {
    height: auto !important;
  }
}

Setup

Import the search module in your app.module.ts and add it to the NgModules's imports:

import { AppComponent } from './app.component';
import { KuiSearchModule } from '@knora/search';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        KuiSearchModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

The search components need a global styling in the app to override some material styling rules. Please update your angular.json file as follow:

...
    "styles": [
        "src/styles.scss",
        "node_modules/@knora/search/assets/style/search.scss" // <- add this line
    ],
...