4. Customizations ¶
To allow flexibility in different use cases, the search page, instance list and instance details can be customized depending on their intended purpose, and saved as a template that you can re-apply on other searches. This chapter contains an overview of the customization options available.
4.1. Customizing the search page ¶
The entire DISQOVER search page can be adapted to specific use cases. Figure 4.1 shows an example of a customized search page. On the left, you see the (semantic) hits for your search term for a small selection of canonical types. On the right, you see the search results of a predefined search path that can include filtering and linking.
To create a search page template from scratch or edit the current template, you click the template icon () and select the corresponding option. This opens the search page editor, where you can create new widgets by cliking .
There are three categories of search page widgets:
- Input widgets gather input from a user, such as a search term.
- Results widgets display the results of a query or discovery.
- Other widgets include visual elements, text fields and buttons to open other templates.
Widgets can be moved by clicking and dragging their top left corner. The width of widgets can be changed by dragging their bottom right corner, and the height adjusts accordingly.
By clicking the widget menu (), you can delete the widget () or access the chart settings with additional options.
To start using the edited search page, close the editor. To save the search page layout as a template, click “ Save as template”.
4.1.1. Input widgets ¶
Search bar¶
A search bar is an input field where the user can enter keywords for a full text search of the data. Users can fine-tune their search using query operators (section 2.2.3) and synonyms (see section 2.2.2).
The search bar does not have any chart settings.
4.1.2. Results widgets ¶
All canonical types¶
An “all canonical types” widget shows the tiles of all visible canonical types. Clicking a tile opens a dashboard of instances within that canonical type that match the current search term. As described in section 2.2.1, the numbers within each tile indicate the number of text hits and semantic hits.
In the chart settings, you have the following options:
- Visible canonical types: this option allows you to select which canonical types are shown. Leave empty to show all available canonical types.
Single canonical type¶
A “single canonical type” widget shows one canonical type and its description. As described in section 2.2.1, the numbers within the tile indicate the number of text hits and semantic hits.
In the chart settings, you have the following options:
- Canonical type: the canonical type that is shown.
- Show description toggle: if this option is turned on, a markdown field appears in which you can write a description of the canonical type. The description is then shown next to the tile. Leave empty to show the default description of that canonical type.
- Show information button: if this option is turned on, a markdown field appears in which you can write additional information. If a user hovers over the widget, an information button appears and displays the additional information when clicked.
Open discovery¶
An “open discovery” widget is a tile that opens a complete discovery path to which the current search term is applied. You can also choose the template of the opened dashboard.
In the chart settings, you have the following options:
- Select open dashboard: when clicking the tile, a new dashboard is opened with the same search path (including followed links and filters) as the selected dashboard.
- Select template: when clicking the tile, a new dashboard is opened with the same widgets configuration and applied restrictions as the selected template.
- Show description: if this option is turned on, a markdown field appears in which you can write a description of the canonical type. The description is then shown next to the tile.
- Show intermediate steps: if this option is turned on, the tile includes an overview of the links followed during the search path.
- Only show results for non-empty search string: if this option is turned on, the tile only shows the number of results if a search term is entered in the search bar. If the search bar is empty, the tile is grayed out.
- Apply search term at step: this option defines where in the search path the search term is applied.
- Show information button: if this option is turned on, a markdown field appears in which you can write additional information. If a user hovers over the widget, an information button appears and displays the additional information when clicked.
Ontology graph¶
An “ontology graph” widget is a tile that shows the search result in a visual way by showing all the query results canonical types and their links in a graph. The color and size of the dots visualize the number of search hits. The thickness of the connection visualises the number of links between the instances of those canonical types.
The widget is interactive: hovering over a canonical types shows the details of the search hits for that canonical types and its links. The right pane shows how many instances of that canonical type link to a different canonical type. Clicking on a canonical type circle or on the canonical type name in the right pane opens a dashboard with the search result of that type.
In the chart settings, you have the following options:
- Height: this option sets the height of tile.
- Data location: on a federated setup, this option defines if the “ontology graph” shows the results from the Non-federated or Federated data.
4.1.3. Other widgets ¶
Product logo¶
The product logo is defined in the customizations panel in the Admin Console, and can be placed on the search page as a widget.
In the chart settings, you have the following options:
- Height: this option sets the height of the logo.
Static text¶
A widget that contains static text.
In the chart settings, you have the following options:
- Text: a markdown field in which you can write the text to display.
- Text size: the size of the text.
- Weight: whether the font is default, bold or light.
- Alignment: the alignment of the text, either left, center or right.
- Color: the color of the text, either black, the primary color or secondary color.
- Fixed Height: if this option is turned on, you can choose the height of the text box. Otherwise the box size is fitted to the text.
- Show information button: if this option is turned on, a markdown field appears in which you can write additional information. If a user then hovers over the widget, an information button appears and displays the additional information when clicked.
Vertical spacer¶
A vertical spacer is a widget containing a horizontal line, and can be used as a subdivision between other widgets.
In the chart settings, you have the following options:
- Height: this option sets the height of the widget.
- Line Width: this option sets the width of the line. Set to 0 to hide the line entirely.
Open template¶
An open template button opens another search page template when clicked.
When creating the button, you have the option to choose a search page template.
In the chart settings, you have the following options:
- Name: the text that is shown on the button.
- Button style: the color of the button.
Vertical widget group¶
A vertical widget group combines other widgets, and can be shown or collapsed. Once placed, the ‘Add’ button allows you to add widgets inside the vertical widget group.
In the chart settings, you have the following options:
- Title: the name shown at the top of the vertical widget group.
- Show information button: if this option is turned on, a markdown field appears in which you can write additional information. If a user hovers over the widget, an information button appears and displays the additional information when clicked.
Image widget¶
The image widget can be used to display any image from a given URL.
In the settings, you have the following options:
- URL of the image: Provide the link to the image.
Video widget¶
The video widget can be used to display video.
In the settings, you have the following options:
- Source URL of the video in WebM format: Provide the link to the video in WebM format. This is needed to support Chrome, Edge and Firefox
- Source URL of the video in mp4 format: Provide the link to the video in WebM format. This is needed to support Safari and IE11.
4.2. Customizing the instance list ¶
4.2.2. Instance list templates ¶
It is possible to edit which information is shown in the instance list. Through the instance list templates () (Figure 4.15), you have the options to:
- Select a different template
- Edit the currently selected template
- Create a new template from scratch
4.2.3. Instance list editor ¶
‘Edit current template’ or ‘Create new template’ brings you to the template editor (Figure 4.16), from which you can save a template, and edit the sections that contain the properties. When you are finished editing, you save the template or close the editor () to go back to the instance list.
Saving a template¶
By clicking the “ Save as template”-button, you can save the instance list as a template, with the options to:
- Enter a name (mandatory)
- Add a description
- Save the template for personal or general use [1]
- Use as a personal default template for instance lists of the same canonical type
Editing sections¶
In the main body of the editor, you see an overview of the existing sections and properties that are already selected. You can drag and drop the sections to different positions to change the layout of your template. You can also drag selected properties between different sections.
By clicking , you enter the section’s menu (Figure 4.17). Here, you can find some additional layout options for a section. You can:
- Delete the entire section ()
- Name the section (this will also make the section collapsable)
- Change the lay-out of the sections, based on the section type
Below the existing sections, a plus-icon () gives you the option to add new sections. After adding a section you can choose its section type by clicking on “add content”, this will show you all the available section types (Figure 4.18).
Properties section¶
When you add a property section, a pop-up will appear where you can select properties (Figure 4.19).
You can:
- Use the arrow () to select available properties
- Move selected properties by dragging or unselect them using
When you are finished choosing or moving properties, close the pop-up () to apply the changes. By clicking the “ Edit properties…” button in the section you can re-open this pop-up.
You now see the selected properties within the chosen section. By clicking the icon of the property, you can change the lay-out of each individual property (Figure 4.20):
Based on the type of the property you can choose a renderer and additional layout options (e.g. text style, color, font-size, …).
Some available renderers are:
- Text: you can choose how many property values are visible, and whether they should be on a single line or not.
- Paragraph: this renderer is optimized for properties containing a lot of text. It has options to show the property values in multiple columns, or to limit the number of lines visible.
- Image: renders property images, you can choose the size of an image in the options.
- External link: renders the property as a link.
- HTML
- …
You can choose to align the properties of a section, by selecting this option in the section menu ().
Rows/columns section¶
Row or column sections can be used to nest sections and make more advanced layouts to show properties and links. You can add rows or column subsections using the button, and move subsections using drag and drop.
Static text section¶
A static text section allows you to display a custom text message. You can set the text message in the section menu ().
4.2.4. Tutorial: editing the instance list ¶
With two practical examples, you see how instance list customization can improve usability.
Example 1
In this example, you create a new list template for the canonical type “Chemicals”, containing the label of each instance, the associated datasources and the MeSH ID. You will use styling to clearly differentiate the label from the secondary information.
Click the template icon (), and choose ‘Create new template’.
A new template is created and the edit mode opens. Click ‘Edit properties’ to add some new properties.
Find the ‘Datasources’ and the ‘MeSH ID’ properties in the left column and add them to the right column. Close the pop-up.
You now see these two new properties next to the already present label property. Click the icon to style it.
Switch off the ‘Include label’ option and switch on the ‘bold’ option.
Click the ‘Datasources’ property to style it: switch on ‘italic’, switch off ‘Multiple values on separate lines’ and reduce the text size (for example size 3). Then repeat the same procedure for the ‘MeSH ID’ property.
To see the result, close the edit mode by saving the template or clicking .
Example 2
In this example, you create a new list template for the canonical type “Chemicals”, that shows a table containing the label and the CAS registry number for each instance.
Click the template icon (), and choose ‘Create new template’.
A new template is created and the edit mode opens. Remove the existing section by opening the section menu () and clicking the remove icon ().
Click the -icon to add a new section, click ‘Add content’ and add a column section.
You can now add a second subsection using the within the column section.
In the first subsection, click ‘Add content’ and choose ‘Add properties’.
Select the ‘label’ property and close the pop-up.
Repeat this procedure for the second subsection, but now choose the property ‘CAS Registry Number’.
To show the property labels at the top of the instance list instead of repeating them for every instance, first click the properties to style them and then uncheck the ‘Include label’ option for both.
Next, in the template menu, enable the option ‘Show legend on top’, to show the labels for the properties in the header.
To see the result, close the edit mode by saving the template or clicking .
4.3. Customizing the instance table ¶
4.3.1. Instance table templates ¶
It is possible to edit which information is shown in the instance table. Through the instance table templates () (Figure 4.21), you have the options to:
- Select a different template
- Create a new template from scratch
- Save a template
4.3.2. Instance table layout ¶
Adding columns¶
It’s possible to add a column by clicking on the plus button () (Figure 4.22) on the left side of the header, which opens a popup where a new property can be selected.
Remove columns¶
A column can be removed by hovering over the column header and clicking the remove icon () (Figure 4.23).
Ordering columns¶
A column can be reordered by hovering over the column header, and drag and dropping the drag icon () to the new place. (Figure 4.24).
Resizing columns¶
A column can be resized by dragging the column divider, until the column has the desired size (Figure 4.25).
Change column renderer¶
Based on the type of the property you can choose a renderer and additional layout options for a column (e.g. text style, color, font-size, …) by hovering over the column header, and clicking the wrench button ().
(Figure 4.26).
4.4. Customizing the instance details ¶
The instance details can be customized similarly to the instance list using the instance options () and instance templates editor (). When done editing the template, save the template or close the editor () to go back to the updated instance details pop-out.
4.4.1. Instance options ¶
After opening the instance options (), you can:
- Open a printable version of the details
- Enter technical mode (in which the URIs are shown)
- View information about the collections this instance belongs to (see section 7)
- Add this instance to a collection
- Remove this instance from a collection
4.4.2. Instance templates ¶
After opening the instance templates (), you can:
- Select a different template
- Edit the currently selected template
- Create a new template from scratch
4.4.3. Instance properties ¶
Clicking instance templates () and then ‘Edit current template’ or ‘Create new template’ opens the editor, which is analog to section 4.2.3. For the instance templates, 3 additional section types are available: Links, Chart and Open Disqovery. When available for the canonical type, you can choose from an extra section type, the subinstances section, which allows you to create a list view for the subinstances of an instance.
Links section ¶
A new links section is empty by default. Through the section menu (), you can toggle the switch () to show all available links in this section. Conversely, you can add a selection of link buttons by clicking the plus icon (). A pop-up then opens where you can see all canonical types and choose which links to inlcude (Figure 4.29).
Sometimes there are typed links between canonical types. In the pop-up, the presence of typed links with a canonical type is indicated with a icon. After clicking such a canonical type, you can choose to include all links or specific typed links by making the appropriate choice in the right side op the pop-up.
After making the selection and closing the pop-up, the links appear in the link section (Figure 4.30). Here, you can remove (), rearrange (by dragging) and rename () the buttons.
Instance charts ¶
You can also add charts to the instance details that show information from a linked canonical type. In the instance details editor, you can choose the option “Add chart”. This opens new popups where you can choose the canonical type and facet(s) that you want to show. Adding a chart to the instance details is further analogous to adding a dashboard widget.
Open discovery ¶
An “open discovery button” opens a complete discovery path from an instance. You can also choose the template of the opened dashboard. By adding an “open discovery” to the instance details, you can quickly perform a predefined search with a single click.
To do so, first perform the wanted search by following links and applying filters from a single instance and leave the final dashboard tab open. In the instance details editor, you can choose the option “Add open discovery button”, and select the correct tab. Configuration options of an “open discovery button” are similar to those described for the respective search page widget (see Open discovery ).
Example
In this example, you create a simple instance detail template for the canonical type “Chemicals”, containing links, the visual representation of the chemical and some basic information.
Open the instance details by clicking an instance in the instance list. Click the template icon (), and choose ‘Create new template’.
A new template is created and opens in edit mode. Remove the existing section by opening the section menu () and clicking the remove icon ().
Add three new empty sections by clicking the plus button ().
The first section will show the links to other instances. Click the ‘Add content’ button of the first section, and then select ‘Add links’.
By default, the links section shows all links. You can manually define which links should be shown using the section menu.
Now you can add some properties to the next two sections. Click ‘Add content’ and select ‘Add columns template’. Add two columns per section.
Add properties by clicking ‘Add content’ and selecting ‘Add properties’. For the first subsection, choose the ‘description’ property. In the other subsections, add ‘structure’, ‘protein association’ and some links.
Now you can use the many section and property options to tweak the layout. Below, there is an overview of options used in this example.
‘Description’ property options:
‘Structure’ property options:
‘Protein association’ section options:
‘Protein association’ property options:
‘External links’ section options:
To see the result, close the edit mode by saving the template or clicking .
[1] | The option to save templates for general use is only available to users with the right permissions. |