Customizing top left logo and background image

Table of content

Customizing top left logo and background image

The top left logo is a public file which path from the root installation of DatafariUI is:

...

You can change it to put any png file containing your logo. Note that you MUST keep the naming (and hence you must use the png format).

If you are using DatafariUI bundled with Datafari and the default installation path, the file is located at:

...

You can change it to put any png file containing your logo. Note that you MUST keep the naming (and hence you must use the png format).

If you are using DatafariUI bundled with Datafari and the default installation path, the file is located at:

...

This image should be minimum 1920px width and max 65px height. Note that you MUST keep the naming (and hence you must use the png format).

Customizing Displayed Facets and Elements

It is possible to customize the facets displayed as well as some of the elements displayed in DatafariUI by modifying a configuration file. This configuration file is ui-config.json and is present in the public folder of the DatafariUI project.

...

{
  "left": [
    {
      "type": "FieldFacet",
      "title": "Extension",
      "field": "extension",
      "op": "OR",
      "minShow": 2,
      "maxShow": 5
    },
    {
      "type": "FieldFacet",
      "title": "Language",
      "field": "language",
      "op": "OR",
      "minShow": 2,
      "maxShow": 5
    },
    {
      "type": "FieldFacet",
      "title": "Source",
      "field": "repo_source",
      "op": "OR",
      "minShow": 2,
      "maxShow": 5,
      "show": false
    },
    {
      "type": "QueryFacet",
      "title": "Creation Date",
      "queries": [
        "creation_date:[NOW/DAY TO NOW]",
        "creation_date:[NOW/DAY-7DAY TO NOW/DAY]",
        "creation_date:[NOW/DAY-30DAY TO NOW/DAY-8DAY]",
        "creation_date:([1970-09-01T00:01:00Z TO NOW/DAY-31DAY] || [* TO 1970-08-31T23:59:59Z])",
        "creation_date:[1970-09-01T00:00:00Z TO 1970-09-01T00:00:00Z]"
      ],
      "labels": [
        "Today",
        "From Yesterday Up To 7 days",
        "From 8 Days Up To 30 days",
        "Older than 31 days",
        "No date"
      ],
      "id": "date_facet",
      "minShow": 5,
      "children": [
        {
          "type": "DateFacetCustom"
        }
      ]
    },
    {
      "type": "HierarchicalFacet",
      "field": "urlHierarchy",
      "title": "hierarchical facet",
      "separator": "/"
    },
    {
      "type": "AggregatorFacet",
      "title": "Aggregator facet"
    }
  ],
  "center": {
    "main": [
      {
        "type": "SearchInformation",
        "data": ["filters", "facets"]
      },
      {
        "type": "ResultsList",
        "data": ["title", "url", "logo", "previewButton", "extract"],
        "folderLinkSources": ["enron"],
        "folderTarget": "_blank",
        "previewTarget": "_self"
      }
    ],
    "tabs": [
      { "type": "FieldFacet", "field": "repo_source", "max": 3 }
    ]
  },
  "right": [],
  "searchBar": {
    "suggesters": [
      {
        "type": "BASIC",
        "props": {
          "maxSuggestion": 5,
          "title": "SUGGESTED QUERIES",
          "subtitle": "Queries extending your current query terms"
        },
        "aggregator": false
      },

      {
        "type": "ENTITY",
        "props": {
          "field": "authorTokens",
          "suggester": "suggestAuthors",
          "dictionary": "suggesterEntityAuthors",
          "asFacet": false,
          "maxSuggestion": 5,
          "title": "Entities suggested",
          "subtitle": "Queries extending your current query terms"
        }
      }
    ]
  },
  "queryParams": {
    "fields": [
      "title",
      "url",
      "id",
      "extension",
      "preview_content",
      "last_modified",
      "crawl_date",
      "author",
      "original_file_size",
      "emptied",
      "repo_source"
    ]
  },
  "hotkeys": {
    "activeSearchBar": {
      "cmd": "shift",
      "key": "S",
      "enable": false
    }, 
    "deactiveSearchBar": {
      "cmd": "escape", 
      "enable": false
    }
  },
  "devMode": {
    "enable": false,
    "banner": {
      "location": "BOTTOM",
      "content": "Dev mode banner content",
      "props": {
        "backgroundColor": "orange"
      }
    }
  }
}

...

{
      "type": "FieldFacet",
      "title": "Extension",
      "field": "extension",
      "op": "OR",
      "minShow": 2,
      "maxShow": 5,
      "show": true,
      "sendToSolr": true
    },

Parameters

Name	Optional	Default value	Description
title			The title showed at the top of the facet
field			The solr field associated to the facet
op			Operator, either “OR” or “AND”. Tells how documents are shown when selecting multiple entries in the facet. If “OR” documents need to have at least one selected element in the concerned field to be selected. If “AND” they need to have all selected elements as part of the concerned field
minShow			The maximum number of elements that are shown if the facet is not expanded
maxShow			The maximum number of elements that are shown if the facet is expanded (after clicking show more)
variant	yes	checkbox	Specify the type of FieldFacet to use. It can take these values : checkbox : use classic FieldFacet with a checkbox list Image Modified autocomplete Image Modified
show	yes	true	True to display the FieldFacet in the left panel. This option is only an UI effect. The facet is still registered as a field facet in the query.
sendToSolr	yes	false	Set to true to force the query to Solr even if show is false (keep in mind that if show is true, the facet is queried whatever the value of the sendToSolr parameter). Required to be true for the use of field facet tabs (https://datafari.atlassian.net/wiki/spaces/DATAFARI/pages/2625634305/Customizing+DatafariUI#Search-Tabs ), which is its only purpose for now.

QueryFacet:

A query facet displays a facet tied to provided queries with the possibility to filter results based on those queries. It can include children components, providing the ability for the user to provide a custom query. In the example below, we present a way to provide a custom date range.

...

{
      "type": "AggregatorFacet",
      "title": "Aggregator facet",
      "show": false
    }

Parameters:

• title: the title showed at the top of the facet

SearchInformation

Displays some information about the current search, such as:

• currently searched terms

• spell checking information if available as well as automatic spell checking query firing if 0 results were found

• filters applied

• facet filters applied

It looks like this:

...

The definition looks like:

...

...

• show: show or hide this facet

Quick Links widget

Widget to display links to quickly navigate to useful content.

...

It is usually used in the right column. The widget definition looks like this:

{
  "type": "SearchInformationDirectLinksWidget",
   
  "datatitle": ["filtersDirect Links",
  "facets"]show": true
  visible: 1
},

Parameters:

• data: An array of data to be displayed. Possible values:

  • “filters”: displays the “other filters” section if present

  • “facets”: displays the facets in the filters section if present

The current search and spellcheck info are always displayed if this component is used.

Search Tabs

The UI configuration allows to add graphical tabs below the search bar, between the All content tab and the Search Tools tab.

As of the writing of this documentation (March 2022), we propose two types of tabs :

• FieldFacet : it will generate as many tabs as a field contains out of a result query. For example, with the "extension" field in our demo, it will create one tab per type of extension returned by the search query (for instance one tab for the pdf type, one for the doc type etc).
  This type of tab has two parameters :
  field : the field name used to generate the tabs
  max: the max number of tabs that can be generated

• Raw : This type of tab is called raw because it is just a link to a given URL. It has 2 parameters :
  label : the label of the tab (it is i18n)
  url: an HTTP URL.
  target: (optional) define where to open the url. If absent, default is _self. Values accepted: _self OR _blank

These tabs can be declared as illustrated below in the ui-config.json, in the center property :

...

...

type - The type of component to place in the service
title - The title showed at the top of the facet
show - Custom parameter, default value is true. true - for will enable the display of the "Direct Links" widget in the right pane. false - to hide its display in the service. This option is just a user interface effect. The widget is still registered with the service.
visible - Custom parameter, default value is 10. Specifies the maximum number of records that will be immediately visible when the widget is displayed

Yellow Page widget

Widget to display useful contact information

...

It is usually used in the right column. The widget definition looks like this:

{
  "type": "YellowPagesWidget",
  "title": "Yellow Pages",
  "show": true
  visible: 1
}

Options:

type - The type of component to place in the service
title - The title showed at the top of the facet
show - Custom parameter, default value is true. true - for will enable the display of the "Yellow Pages" widget in the right pane. false - to hide its display in the service. This option is just a user interface effect. The widget is still registered with the service.
visible - Custom parameter, default value is 1. Specifies the maximum number of records that will be immediately visible when the widget is displayed

SearchInformation

Displays some information about the current search, such as:

• currently searched terms

• spell checking information if available as well as automatic spell checking query firing if 0 results were found

• filters applied

• facet filters applied

It looks like this:

...

The definition looks like:

{
      "type": "SearchInformation",
      "data": ["filters", "facets"]
}

Parameters:

• data: An array of data to be displayed. Possible values:

  • “filters”: displays the “other filters” section if present

  • “facets”: displays the facets in the filters section if present

The current search and spellcheck info are always displayed if this component is used.

Search Tabs

The UI configuration allows to add graphical tabs below the search bar, between the All content tab and the Search Tools tab.

As of the writing of this documentation (March 2022), we propose two types of tabs :

• FieldFacet : it will generate as many tabs as a field contains out of a result query. For example, with the "extension" field in our demo, it will create one tab per type of extension returned by the search query (for instance one tab for the pdf type, one for the doc type etc).
  This type of tab has two parameters :
  field : the field name used to generate the tabs
  max: the max number of tabs that can be generated

• Raw : This type of tab is called raw because it is just a link to a given URL. It has 2 parameters :
  label : the label of the tab (it is i18n)
  url: an HTTP URL.
  target: (optional) define where to open the url. If absent, default is _self. Values accepted: _self OR _blank

These tabs can be declared as illustrated below in the ui-config.json, in the center property :

"center": {
    "main": [
      {
        "type": "SearchInformation",
        "data": ["filters", "facets"]
      },
      {
        "type": "ResultsList",
        "data": ["title", "url", "logo", "previewButton", "extract"]
      }
    ],
    "tabs": [
      { "type": "FieldFacet", "field": "extension", "max": 3 },
      { "type": "FieldFacet", "field": "repo_source", "max": 3 },
      { "type": "Raw", "label": "google", "url": "https://www.google.fr" },
      { "type": "Raw", "label": "LinkedIn", "url": "https://www.linkedin.com" }
    ]
  }

...

From ui-config.json file, you can customize the following parameters of the chart :

Configuration example include in left facet :

...

The RangeBarChart component can be embed into any other component like the RangeFacet that displays the graph as a facet with a maximal height. This component uses the following props :

{ "x_datakey": "x_value", "y_datakey": "y_value" }

const chartData = [   
  { name: '01/02/2022', doc: 300 },   
  { name: '02/02/20222', doc: 145 }
]

const chartData = [   
  { index: 1, price: 1000 },   
  { index: 2, price: 350 }
]

Customize Search Bar component

...

The searchBar has the following parameters :

Available suggesters

There are 3 types of suggesters :

...

 ...
  "searchBar": {
    "suggesters": [
      {
        "type": "BASIC",
        "props": {
          "maxSuggestion": 5,
          "title": "SUGGESTED QUERIES",
          "subtitle": "Queries extending your current query terms",
        },
        "aggregator": false
      },

      {
        "type": "ENTITY",
        "props": {
          "field": "authorTokens",
          "suggester": "suggestAuthors",
          "dictionary": "suggesterEntityAuthors",
          "asFacet": false,
          "maxSuggestion": 5,
          "title": "Entities suggested",
          "subtitle": "Queries extending your current query terms"
        }
      }
    ]
  }
  ...

...

{
  "type": "BASIC",
  "props": {
    "maxSuggestion": 5,
    "title": "SUGGESTED QUERIES",
    "subtitle": "Queries extending your current query terms"
  },
        "aggregator": false
      }

parameters:

• maxSuggestion: The maximum number of suggestion that will be showed in the autocomplete for this suggester

• title: the title of the autocomplete section for this suggester

• subtitle: the subtitle / helper text of the autocomplete section for this suggestersubtitle: the subtitle / helper text of the autocomplete section for this suggester

• aggregator : indicates if aggregator is activated or not. If yes use the Datafari REST API rest/v2.0/noaggregator/suggest instead of rest/v2.0/suggest

ENTITY suggester

A suggester designed for entity suggestions. Adds to the query a statement like: field:(“suggestion”).

...

...
  "searchBar": {
    "suggesters": [
      {
        "type": "BASIC",
        "props": {
          "maxSuggestion": 5,
          "title": "SUGGESTED QUERIES",
          "subtitle": "Queries extending your current query terms",
        },
      },
      {
        "type": "ENTITY",
        "props": {
          "field": "authorTokens",
          "suggester": "suggestAuthors",
          "dictionary": "suggesterEntityAuthors",
          "asFacet": false,
          "maxSuggestion": 5,
          "title": "Entities suggested",
          "subtitle": "Queries extending your current query terms"
        }
      },
      {
        "type": "ENTITY",
        "props": {
          "field": "authorSocialSecurityNumber",
          "suggester": "suggestSocialSecurityNumber": "suggestSocialSecurityNumber",
          "dictionary": "suggesterEntitySocialSecurityNumbers",
          "asFacet": false,
          "maxSuggestion": 5,
          "title": "Entities suggested by social security number",
          "dictionarysubtitle": "suggesterEntitySocialSecurityNumbers",Queries extending your current query terms"
        }
 "asFacet": false,    }
    ]
 "maxSuggestion": 5,
          "title": "Entities suggested by social security number",
          "subtitle": "Queries extending your current query terms"
        }
      }
    ]
  }
  ...

Adding a new type of suggester

This requires developing new components in DatafariUI. Refer to the DatafariUI read me for more information on how to do that.

Define the list of prefered sources

You can define a list of prefered sources by adding a “sources” key to the ui-config object that holds an array of source names, ordered in decreasing order of their importance.

{
...
"sources": ["source name 1", "source name 2"]
}

If absent or empty, this has no effect. When present, results coming from the preffered sources are boosted and appear higher in the search results.

...

 }
  ...

Adding a new type of suggester

This requires developing new components in DatafariUI. Refer to the DatafariUI read me for more information on how to do that.

Define the list of prefered sources

You can define a list of prefered sources by adding a “sources” key to the ui-config object that holds an array of source names, ordered in decreasing order of their importance.

{
...
"sources": ["source name 1", "source name 2"]
}

If absent or empty, this has no effect. When present, results coming from the preffered sources are boosted and appear higher in the search results.

MappingValues (optional)

From ui-config.json file, you can customize labels from results list for each FieldFacet or Field tab. This field is a map key/value to rename a specific name.

Example:

"mappingValues": {
  "pdf": "Fichier PDF",
  "doc": "Fichier Doc",
  "html": "Fichier Web"
}

Key value is case sensitive, the label from label have to match exactly to rename the label (i.e. html is different of HTML)

The mappingValues block is global, it does not belong to a facet block, so it must be declared at the same level than the queryParams block or the hotkeys block

QueryParams

From ui-config.json file, you can customize labels from results list for each FieldFacet or Field tab. This field is a map key/value to rename a specific name.Example: the fields you send to Solr. queryParams is an object which can have the following keys :

...

"fields": [
      "title",
      "url",
      "id",
      "extension",
      "preview_content",
      "last_modified",
      "crawl_date",
      "author",
      "original_file_size",
      "emptied",
  

...

...

   "

...

Key value is case sensitive, the label from label have to match exactly to rename the label (i.e. html is different of HTML)

QueryParams

From ui-config.json file, you can customize the fields you send to Solr. queryParams is an object which can have the following keys :

...

Key name

...

description

...

Default value

...

fields

...

An array of string that define fields sent to solr for each query.

...

"fields": [
      "title",
      "url",
      "id",
      "extension",
      "preview_content",
      "last_modified",
      "crawl_date",
      "author",
      "original_file_size",
      "emptied",
      "repo_source"
    ]

useHotkey hook

This hook allows to define a hotkey with one command key plus an optional second letter key.
Command keys are defined as below (case sensitive) :

• shift

• alt

• ctrl

• escape

These command keys are defined in src/Hooks/useHotkey.js. Use exported cmd keys ID in other components.

These command keys can be associated with another key like any alphanumeric key, to provide hotkey under the form : [CMD+key] such as [ctrl+k], [shift+S] etc.

useHotkey hook can be used anywhere in the react application. Exemple of use :

import { CTRL } from "src/Hooks/useHotkey.js"

const { hotkey: ctrlHotkey } = useHotkey({
  cmd: CTRL,
  key: "D",
  enable: true,  
  callback: handleHotkey,
});

The hook uses the following parameters :

• cmd : Command key, one of defined command keys in the useHotkey js file

• key (optional, default value to "") : Second key of the hotkey.

• enable (optional, default is false) : True to enable the hotkey. False otherwise. In this last case, empty string will be returned

• callback : Called if command key matched and either the second key matched or it equals to empty string

The hook returns a component that represents the hotkey. You can mount it wherever you want in your component. By default, this component displays the hotkey between [] like [⇧S].

Hotkeys configuration

...

repo_source"
    ]

useHotkey hook

This hook allows to define a hotkey with one command key plus an optional second letter key.
Command keys are defined as below (case sensitive) :

• shift

• alt

• ctrl

• escape

These command keys are defined in src/Hooks/useHotkey.js. Use exported cmd keys ID in other components.

These command keys can be associated with another key like any alphanumeric key, to provide hotkey under the form : [CMD+key] such as [ctrl+k], [shift+S] etc.

useHotkey hook can be used anywhere in the react application. Exemple of use :

import { CTRL } from "src/Hooks/useHotkey.js"

const { hotkey: ctrlHotkey } = useHotkey({
  cmd: CTRL,
  key: "D",
  enable: true,  
  callback: handleHotkey,
});

The hook uses the following parameters :

• cmd : Command key, one of defined command keys in the useHotkey js file

• key (optional, default value to "") : Second key of the hotkey.

• enable (optional, default is false) : True to enable the hotkey. False otherwise. In this last case, empty string will be returned

• callback : Called if command key matched and either the second key matched or it equals to empty string

The hook returns a component that represents the hotkey. You can mount it wherever you want in your component. By default, this component displays the hotkey between [] like [⇧S].

Hotkeys configuration

Hotkeys can be configured into ui-config.json file, like below ;

"hotkeys": {
    "activeSearchBar": {
      "cmd": "shift",
      "key": "S",
      "enable": false
    },
    "deactiveSearchBar": {
      "cmd": "escape",
      "enable": false
    }
  }

Be care, cmd and key are case sensitive. If you use shift as command, the key MUST be in CAPITAL.

Hotkeys IDs are defined into the useHotkey.js (activeSearchBar, deactiveSearchBar, ...). Defined here other IDs to increase the list of hotkeys available

Export search results

In ui-config.json, you can add some export format that the backend offer. So far (31.01.2023), Datafari API offers excel format to export results list.

"hotkeysexportResults": {
    "activeSearchBarexcel": {
      "cmdminResults": "shift"1,
      "keymaxResults": "S"5000,
      "enabledefaultResults": false100
    },
    "deactiveSearchBar": {
      "cmd": "escape",
      "enable": false
    }
  }

Be care, cmd and key are case sensitive. If you use shift as command, the key MUST be in CAPITAL.

...

}

exportResults have to have at least one key under (here is Excel. Each keys here will be a format in the export modal:

...

Under each key, the following fields are mandatory:

• minResults : minimum number of results to be exported

• maxResults : maximum number of results to be exported

• defaultResults : default number of results to be exported

The key format is the type format defined in the backend (excelfor example)

DEV mode banner

In ui-config.json, you can set the dev mode on. It can be useful for instance to warn your datafari users that you have not finished configuring your Datafari, but that they can start playing with it. In DatafariUI, a warn banner will be showed in the bottom of the screen. Here is a sample configuration :

...

You can decide which fields to display in the advanced search dropdown lists, and which labels to use. For that, please refer to Advanced search - Fixed values list for fields and labeled fieds /wiki/spaces/DATAFARI/pages/331415555

Customizing colors and theme

...