Help:WSSearchFront

The WSSearchFront extension is a front-end for WSSearch written in Vue.js

For installation instructions see the extension page

For full-text search and showing highlighted result snippets WSSemanticParsedText need to be installed and Semantic MediaWiki has to be configured to use elasticStore and store raw text in Elasticsearch with the following setting

$smwgElasticsearchConfig["indexer"]["raw.text"] = true;

Configuration

The WSSearchFront extension must be configured using the WSSearchFrontend parser function

There are 3 types of configuration:

• Settings, without a prefix
• Filter settings, prefixed with a @
• Result settings, prefixed with a ?

Configurations can have setting options prefixed with a #

Example configuration:

{{#WSSearchFrontend:
|size=10
|tite=Page Title
|@Tag
|@Year
    #display=range
    #max=20
    #type=date
    #label=Publication year
|?Users
    #display=link
|?Image
    #display=image
|?Rating
    #display=template
    #template=Rating icon
}}

Available configuration options

Settings

These are optional settings for the main interface

parameter	parameter values	settings	setting values	description	example
size	<number>			defines how many results are shown per page	size=10
size options	<number>, <number>			if set a drop-down with the defined size options will be shown	size options=10, 20, 50
title	<property>			property that will be used for the search results title and link	title=Title #highlight=true #urlstring=search
		#label	<text>	sets a label for the title column in table layout
		#highlight	true	highlights the search term in the title
		#urlstring	<text>	adds search terms as an url parameter named by the value to the links href
sort options	<property>, <property>			if set a drop-down with sort options will be shown, default results will be sorted by relevance, optional a label for the property to sort on can be set by adding text before the property devised by :	sort options=Version, Title
	<text>:<property>,<text>:<property>				sort options=Version number:Version, Page name:Title
layout	table			changes the layout for the search results to a table	layout=table
clear	term			if set, the 'clear all filters' button also clears the search term	clear=term

Search result settings

These are optional settings for the search result output they are divined by adding a ? in front of the property name

parameter	settings	setting values	description	example
?<property>	#display	image	displays an image, the property must be the full URL to the image	?Image#display=image
		link	creates a link from a property	?User#display=link
		pill	creates a pill, that can be used for filter selection	?Tag#display=pill
		template	parses a template, add #template=<template> . The {{{Page|}}} and {{{Value|}} parameters are passed to the template	?Icon#display=template #template=Icon for search
	#template	<template>	used with #display=template
	#label	<text>	adds a label in front of the displayed property value. When table layout is used it defines the tabel column header name	?Rating#label=Page rating
	#highlight	true	highlights the search term on the displayed property value	?Description#highlight=true

Facets filter settings

Facet filters are divined by adding an @ in front of the property name. All settings are optional. When no display setting is used the default check-boxes are displayed.

Filter properties also need to be set in the WSSearchConfig, except for display type ask combobox, search, datepicker and range see WSSearch for more information

Some display types need a setting with an ask query, see Semantic MediaWiki ask query string for more information about them

parameter	settings	setting values	description	example
@<property>	#display	combobox	shows a drop-down combo-box instead of the default check-boxes	@Author#display=combobox
		ask combobox	shows a comb-box and uses an ask query as you type to generate options. see ask combox for more information	@Author #display=ask combobox #query=[[Class::User]] #data=Full name
		search	adds a search input for the specified property	@Title#display=search
		datepicker	adds two DateInputWidgets that are used for filtering the results by a date property	@Modification date#display=datepicker
		range	adds the default check-boxes but with a set of ranges from the property. see range for more information	@Range #display=range #max=5 #step=1
		sorted	adds the default check-boxes but sorts on a given ask query. see sorted for more information	@Tag #display=sorted #query=[[Tag::+]] #data=-Tag group.Name #text=Tag name
	#label	<text>	defines a label to be used for display instead of the property name	@Modification date #label=Date
	#logic	or	set logic to or, needs 'post filter properties' setting in back-end WSSearchConfig see WSSearch for more information	@Tag #logic=or
	#sort	alphabetically	sorts the facets alphabetically, default facets are sorted by page count	@Tag #sort=alphabetically
	#translation	<property>	translates the property values based on a given ask query	@Service #translation=Name #query=[[Class::Service]]

ask combobox

#display=ask combobox

setting	values	description	example
#query	<ask>	ask query	@Tag #display=ask combobox #query=[[Class::Tag]] #data=Tag ID #text=Tag name
#data	<property>	property for options
#text	<property>	label for options
#search	true	searches for typed term on enter key

Sorted

#display=sorted

setting	values	description	example
#query	<ask>	ask query	@Tags #display=sorted #query=[[Tag::+]][[-Has subobject.Type::Search Tag]] #data=-Has subobject.Name #text=Tag name
#data	<property>	property to sort on
#text	<property>	property for display

Range

#display=range

setting	values	description	example
#max	<number>	maximum number of ranges	@Year #display=range #max=20 #type=date
#step	<number>	step for range
#type	date	type for date ranges

Styling and layout

WSSearchFront can be styled using CSS. Components are logically named using BEM convention, and the layout id defined with CSS Grid, you can just add your own style-sheet, by adding your CSS to common.css or you could use TemplateStyles

Layout

Below you find the default layout, grid-template-columns defines the columns sizes, grid-template-rows define the row sizes.

The different components can be moved around by changing the grid-template-areas in the default layout the search components spans over the whole first row

.wssearch {
  display: grid;
  grid-template-columns: 20ch 1fr auto;
  grid-template-rows:
    auto
    minmax(2em, auto)
    auto
    1fr;
  grid-template-areas:
    "search search search"
    "selected selected order"
    "filters total total"
    "filters main main";
  grid-gap: 0.5em 2em;
}

The available components are:

• search this is the search input including the search button
• selected this is the area where the pills for selected filter show up
• order this is the area where the sort options drop-down will show if sort options are set in the configuration
• filters this is where the different facet filters will be located
• total this where the result count will show up
• main this is the area where the search result are shown, including the pagers

Variables

WSSearchFront uses CSS variables to define colors and icons, the following variables are available to override

• --base-color
• --base-color-lighter
• --base-color-darker
• --tint-1
• --border-1
• --star-size

Icons

• --search-icon
• --clear-icon
• --check-icon
• --next-icon
• --back-icon
• --down-icon
• --up-icon

Development

WSSearchFront is written with Vue.js and is pre-build for performance and for old wiki support reasons the development version is based on a Vue-CLI and includes mock data and development modules for easy development. It can be find here wssearchfront-cli

The final build files are added to the modules folder in the WSSearchFront extension folder.