4. Customizations ui-expert-blue

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 ui-expert-blue

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.

image

Figure 4.1 An example search page with canonical types and preconfigured use cases.

To create a search page template from scratch or edit the current template, you click the template icon (ui-template) and select the corresponding option. This opens the search page editor, where you can create new widgets by cliking ui-chart.

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 (ui-bars), you can delete the widget (ui-trash) 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 “ui-save Save as template”.

4.1.1. Input widgets ui-expert-blue

4.1.2. Results widgets ui-expert-blue

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.

image

Figure 4.3 All canonical types. The hits for the keyword “aspirin” are shown.

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.

image

Figure 4.4 A single canonical type, showing the number of hits for the keyword “aspirin”.

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.

image

Figure 4.5 An “open discovery” widget. The tile is configured to open a “Clinical Study” dashboard that shows clinical studies that are linked to active substances that match the search term “aspirin”.

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.

image

Figure 4.6 An “ontology graph” widget for the search term “malaria”.

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.

image

Figure 4.7 An “ontology graph” widget for the search term “malaria” while hovering over “Publication” shows the links from “Publication” to other canonical types.

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 ui-expert-blue

Static text

A widget that contains static text.

image

Figure 4.9 A static text widget

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.

image

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.

image

Figure 4.10 A button that opens another search page template .

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.

image

Figure 4.11 A vertical widget group containing two “single canonical type” widgets.

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.

image

Figure 4.12 An image widget

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.

image

Figure 4.13 A video widget

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 ui-expert-blue

4.2.1. Instance list menu ui-expert-blue

Through the instance list menu (ui-bars) (Figure 4.14), you have the options to:

  • Change the dock position of the instance list
  • Export instances and a selection of properties as a CSV or XLSX (ui-download)
  • Add (or remove) the selected instances to a collection (see section 7). If nothing is selected, all instances are added tot the collection.
  • Show the data sources that contributed to each shown property of the instance by toggling the switch
  • Enter technical mode to see the URIs of the properties by toggling the switch
  • Sort instances by relevance or property values (ascending or descending)
image

Figure 4.14 The instance list menu.

4.2.2. Instance list templates ui-expert-blue

It is possible to edit which information is shown in the instance list. Through the instance list templates (ui-template) (Figure 4.15), you have the options to:

  • Select a different template
  • Edit the currently selected template
  • Create a new template from scratch
image

Figure 4.15 The instance list templates.

4.2.3. Instance list editor ui-expert-blue

‘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 (ui-close) to go back to the instance list.

instance list editor

Figure 4.16 The instance list editor.

Saving a template

By clicking the “ui-save 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 ui-bars2, 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 (ui-trash)
  • Name the section (this will also make the section collapsable)
  • Change the lay-out of the sections, based on the section type
image

Figure 4.17 The section menu.

Below the existing sections, a plus-icon (ui-plus) 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).

secion types

Figure 4.18 The different section types.

Properties section

When you add a property section, a pop-up will appear where you can select properties (Figure 4.19).

selecting properties

Figure 4.19 Selecting properties to add to the section.

You can:

  • Use the arrow (ui-arrow-right) to select available properties
  • Move selected properties by dragging or unselect them using ui-trash

When you are finished choosing or moving properties, close the pop-up (ui-close) to apply the changes. By clicking the “ui-wrench 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 ui-wrench icon of the property, you can change the lay-out of each individual property (Figure 4.20):

image

Figure 4.20 The options to change the properties displayed in the instance list.

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 (ui-bars).

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 ui-plus 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 (ui-bars).

4.2.4. Tutorial: editing the instance list ui-expert-blue

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 (ui-template), and choose ‘Create new template’.

Example 1.1

A new template is created and the edit mode opens. Click ‘Edit properties’ to add some new properties.

Example 1.2

Find the ‘Datasources’ and the ‘MeSH ID’ properties in the left column and add them to the right column. Close the pop-up.

Example 1.3

You now see these two new properties next to the already present label property. Click the ui-wrench icon to style it.

Example 1.4

Switch off the ‘Include label’ option and switch on the ‘bold’ option.

Example 1.5

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.

Example 1.6

To see the result, close the edit mode by saving the template or clicking ui-close.

Example 1.7

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 (ui-template), and choose ‘Create new template’.

Example 1.1

A new template is created and the edit mode opens. Remove the existing section by opening the section menu (ui-bars2) and clicking the remove icon (ui-trash).

Example 2.1

Click the ui-plus-icon to add a new section, click ‘Add content’ and add a column section.

Example 2.2

You can now add a second subsection using the ui-plus within the column section.

Example 2.3

In the first subsection, click ‘Add content’ and choose ‘Add properties’.

Example 2.4

Select the ‘label’ property and close the pop-up.

Example 2.5

Repeat this procedure for the second subsection, but now choose the property ‘CAS Registry Number’.

Example 2.6

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.

Example 2.7

To see the result, close the edit mode by saving the template or clicking ui-close.

Example 2.7

4.3. Customizing the instance table ui-expert-blue

4.3.1. Instance table templates ui-expert-blue

It is possible to edit which information is shown in the instance table. Through the instance table templates (ui-template) (Figure 4.21), you have the options to:

  • Select a different template
  • Create a new template from scratch
  • Save a template
image

Figure 4.21 The instance table templates.

4.3.2. Instance table layout ui-expert-blue

Adding columns

It’s possible to add a column by clicking on the plus button (ui-plus) (Figure 4.22) on the left side of the header, which opens a popup where a new property can be selected.

image

Figure 4.22 Add a column to the instance table.

Remove columns

A column can be removed by hovering over the column header and clicking the remove icon (ui-trash) (Figure 4.23).

image

Figure 4.23 Remove a column from the instance table.

Ordering columns

A column can be reordered by hovering over the column header, and drag and dropping the drag icon (ui-drag) to the new place. (Figure 4.24).

image

Figure 4.24 Reordering a column from the instance table.

Resizing columns

A column can be resized by dragging the column divider, until the column has the desired size (Figure 4.25).

image

Figure 4.25 Resizing a column from the instance table.

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 (ui-wrench).

(Figure 4.26).

image

Figure 4.26 Changing the column renderer in the instance table.

4.4. Customizing the instance details ui-expert-blue

The instance details can be customized similarly to the instance list using the instance options (ui-bars) and instance templates editor (ui-template). When done editing the template, save the template or close the editor (ui-close) to go back to the updated instance details pop-out.

4.4.1. Instance options ui-expert-blue

After opening the instance options (ui-bars), 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
image

Figure 4.27 Instance options.

4.4.2. Instance templates ui-expert-blue

After opening the instance templates (ui-template), you can:

  • Select a different template
  • Edit the currently selected template
  • Create a new template from scratch
image

Figure 4.28 Instance templates.

4.4.3. Instance properties ui-expert-blue

Clicking instance templates (ui-template) 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.

Instance charts ui-expert-blue

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.

image

Figure 4.31 An instance chart that shows the locations and phases of clinical studies related to the disease ALS.

Open discovery ui-expert-blue

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 ).

image

Figure 4.32 An open discovery that first follows the link to Clinical Study and then to Active Substances, from a Disease instance.

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 (ui-template), and choose ‘Create new template’.

Example 3.2

A new template is created and opens in edit mode. Remove the existing section by opening the section menu (ui-bars) and clicking the remove icon (ui-trash).

Example 3.4

Add three new empty sections by clicking the plus button (ui-plus).

Example 3.5

The first section will show the links to other instances. Click the ‘Add content’ button of the first section, and then select ‘Add links’.

Example 3.6

By default, the links section shows all links. You can manually define which links should be shown using the section menu.

Example 3.7

Now you can add some properties to the next two sections. Click ‘Add content’ and select ‘Add columns template’. Add two columns per section.

Example 3.9

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.

Example 3.10

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:

Example 3.11

‘Structure’ property options:

Example 3.12

‘Protein association’ section options:

Example 3.13

‘Protein association’ property options:

Example 3.14

‘External links’ section options:

Example 3.15

To see the result, close the edit mode by saving the template or clicking ui-close.

Example 3.16
[1]The option to save templates for general use is only available to users with the right permissions.