Showing Query Description in Infobox

Knowledge Graph is used to give a brief introduction about the search query instantly. But the information of knowledge graph becomes more useful when it is defined by one or two line description. Google currently shows a description of search query in its knowledge graph which makes the search results more meaningful. In this blog I will describe how I have description for query using Wikidata API implemented a similar functionality in Susper.


1.Adding a function to fetch data from Wikidata in Service:

getQueryDescription(searchquery) {
   const params = new URLSearchParams();
   params.set('origin', '*');
   params.set('action', 'wbsearchentities');
   params.set('search', searchquery);
   params.set('language', 'en');
   params.set('format', 'json');
   const headers = new Headers({ 'Accept': 'application/json' });
   const options = new RequestOptions({ headers: headers, search: params });
   return this.http.get(this.descriptionURL, options).map(res =>


2.Creating an effect for query description:

To implement the logic of getting query description from the results returned by the service is made in knowledge.ts file which creates an effect for knowledge description.

Here is the effect for query description

       .subscribe((response) => {
         if (response['search']) {
           return empty();
            } else { knowledge.DescriptionAction([]));
                         return empty();


The response is then dispatched to the corresponding knowledge action.

3.Creating an Action for Query description:

After dispatching the query description logic to the action, we must have an action which will correspond to get the query description. Here is the implementation of Query Description Action in knowledge.ts action file.

export const ActionTypes = {
 CONTENT_CHANGE: type('[Knowledge] Content Change'),
 IMAGE_CHANGE: type('[Knowledge] Image Change'),
 DESCRIPTION_CHANGE: type('[Knowledge] Description Change')
export class SearchContentAction implements Action {
 type = ActionTypes.CONTENT_CHANGE;
 constructor(public payload: object) {}
export class SearchImageAction implements Action {
 type = ActionTypes.IMAGE_CHANGE;
 constructor(public payload: object) {}
export class DescriptionAction implements Action {
 type = ActionTypes.DESCRIPTION_CHANGE;
 constructor(public payload: object) {}
export type Actions
 = SearchContentAction | SearchImageAction | DescriptionAction;


DescriptionAction is the action for Query Description and is then exported for the reducer.

4.Creating a case for query description in Knowledge reducer:

We must have a case to deal in reducer function to deal with query description action and here is the code for the case:

case knowledge.ActionTypes.DESCRIPTION_CHANGE: {
     const description_response = action.payload;
     return Object.assign({}, state, {
       content_response: state.content_response,
       image_response: state.image_response,
       description_response: description_response


The new state is then exported to the store:

export const getDescriptionResponse = (state: State) => state.description_response;


5.Updating the contents in store:

To update the store we just retrieve the getKnowledgeState and read its description_response and export it.

export const getDescriptionResponse = (state: State) => state.description_response;


6.Fetching Query Description from store in infobox component:

Now fetching results is very simple, we just need to select the getDescription from the store at store it in description_response$ and then we extract the query description and store in a local variable querydescription

this.description_response$ =;
   this.description_response$.subscribe(res => {
     if (res['search']) {
       this.querydescription = res['search'][0]['description'];


7.Displaying query description on the result page:

Now displaying the query description on our page is very simple we just need to use our querydescription variable.

<p class="query_description">{{this.querydescription}}</p><hr width="50%" align="left" *ngIf="this.image">


  1. Wikidata API:
  2. Angular Services:
  3. Corresponding Pull Request:




Continue ReadingShowing Query Description in Infobox

Using Wikipedia API for knowledge graph in SUSPER

Knowledge Graph is way to give a brief description about search query by connecting it to a real world entity. This helps users to get information about exactly what they want. Previously Susper had a Knowledge Graph which was implemented using DBpedia API. But since DBpedia do not provide content over HTTPS connections therefore the content was blocked on and there was a need to implement the Knowledge Graph using a new API that provide contents over HTTPS. In this blog, I will describe how getting a knowledge graph was made possible using Wikipedia API.

What is Wikipedia API ?

The MediaWiki action API is a web service that provides convenient access to wiki features, data, and metadata over HTTP, via a URL usually at api.php. Clients request particular “actions” by specifying an action parameter, mainly action=query to get information.

The endpoint :

The format :

format=json This tells the API that we want data to be returned in JSON format.

The action :


The MediaWiki web service API implements dozens of actions and extensions implement many more; the dynamically generated API help documents all available actions on a wiki. In this case, we’re using the “query” action to get some information.

The complete API which is used in SUSPER to extract information of a query is :

Where titles=Search_Query, here Japan

How it is implemented in SUSPER?

For implementing it a service has been created which fetches information by setting various URL parameters. This result can be fetched by creating an instance of service and passing search query to getsearchresults(searchquery) function.

export class KnowledgeapiService {
 server = '';
 searchURL = this.server + '/w/api.php?';
 homepage = '';
 logo = '../images/susper.svg';
 constructor(private http: Http,
             private jsonp: Jsonp,
             private store: Store<fromRoot.State>) {
 getsearchresults(searchquery) {
   let params = new URLSearchParams();
   params.set('origin', '*');
   params.set('format', 'json');
   params.set('action', 'query');
   params.set('prop', 'extracts');
   params.set('exintro', '');
   params.set('explaintext', '');
   params.set('titles', searchquery);
   let headers = new Headers({ 'Accept': 'application/json' });
   let options = new RequestOptions({ headers: headers, search: params });
   return this.http
     .get(this.searchURL, options).map(res =>


Since the result obtained is an observable therefore we have to subscribe for it and then extract information to local variables in infobox.component.ts file.

export class InfoboxComponent implements OnInit {
 public title: string;
 public description: string;
 query$: any;
 resultsearch = '/search';
 constructor(private knowledgeservice: KnowledgeapiService,
             private route: Router,
             private activatedroute: ActivatedRoute,
             private store: Store<fromRoot.State>,
             private ref: ChangeDetectorRef) {
   this.query$ =;
   this.query$.subscribe( query => {
     if (query) {
       this.knowledgeservice.getsearchresults(query).subscribe(res => {
         const pageId = Object.keys(res)[0];
         if (res[pageId].extract) {
           this.title = res[pageId].title;
           this.description = res[pageId].extract;
         } else {
           this.title = '';
           this.description = '';

The variable title and description are used to display results on results page.

<div *ngIf=“this.description” class=“card”>
    <p>{{this.description | slice:0:600}}<a href=‘{{this.title}}’>..more at Wikipedia</a></p>


1.MediaWiki API :

2.Stackoverflow :

3.Angular Docs :

Continue ReadingUsing Wikipedia API for knowledge graph in SUSPER