SciCat's frontend configuration is managed in two configuration file, both served through the backend configuration:
- Frontend Config: frontend.config.json defines the setup of the UI componets. For more information on the Frontedend Config definitions see here
- Frontend Theme Config: frontend.theme.json defines the theming (color, font color etc) of the UI components.
The two frontend configs are served through the backend API so that it can be updated with ease. Adding these configs to the frontend would require a build step everytime the configuration file changed. To find out how to add the frontend configuration files to the backend please see here
This guide explains how to configure the List & Side-Panel Configuration Pattern used on the frontend. It allows customizing how list-based components (e.g., datasets, proposals) display table columns, side-panel filters, and optional query conditions.
The configuration should be defined or mounted at the location specified by the environment variable FRONTEND_CONFIG_FILE (default: src/config/frontend.config.json).
Defines how each field is displayed in the list table.
| Property | Type | Description | Example / Notes |
|---|---|---|---|
name |
string |
Object key whose value will be displayed in the column. | "datasetName" |
order |
number |
Position of the column in the table. | 2 |
type |
string |
How the value is rendered: • standard – plain text (default)• hoverContent – shows icon with popup/modal when mouseover (for long text)• date – formats ISO date strings; can include a format (e.g. yyyy-MM-dd)• editable – plain text and editable by clicking on cell if user has permission |
"date" |
width |
number |
Default width of the column. | 200 |
format |
string |
Optional property used only when type is set to date. Defines how ISO date strings are displayed (e.g. yyyy-MM-dd). it fallsback to dateFormat or yyyy-MM-dd HH:mm for dataset and yyyy-MM-dd for proposal |
"yyyy-MM-dd" |
enabled |
boolean |
Whether the column is displayed by default. | true |
Defines which filters appear in the side panel and how they behave.
| Property | Type | Description | Example / Notes |
|---|---|---|---|
key |
string |
Object key used for filtering. | "creationTime" |
label |
string |
Custom label for the filter. If not provided, it falls back to labelLocalization or key. |
"Creation Time" |
type |
string |
Filter input type: • text – deprecated (use search box)• multiSelect – dropdown with multiple options; supports checkBoxFilterClickTrigger for auto-apply• dateRange – calendar or manual from–to input• checkbox – pre-populated list; supports checkBoxFilterClickTrigger for auto-apply |
"multiSelect" |
description |
string |
Tooltip text for the filter. | "Filter by dataset type" |
enabled |
boolean |
Whether the filter is active by default. | true |
Defines predefined condition filter in the side panel (currently supported only for the dataset table)
| Property | Type | Description | Example / Notes |
|---|---|---|---|
| – | – | Currently supported only for dataset filters. | — |
lhs |
string |
Metadata key to filter on | "outgassing_values_after_1h" |
relation |
string |
Comparison operator: • GREATER_THAN• GREATER_THAN_OR_EQUAL• LESS_THAN• LESS_THAN_OR_EQUAL• EQUAL_TO• RANGE |
"EQUAL_TO" |
rhs |
string |
Value to compare against | "3.1e4" |
unit |
string |
Optional unit for the value | "mbar l/s/cm^2" |
unitsOptions |
string[] |
Optional A list of allowed units for this condition. When provided, the unit dropdown will be restricted to only these options | ["mbar l/s/cm^2", "Pa m^3/s/m^2"] |
The Dynamic Dataset Detail component can be customized to display dataset information in various templates and layouts based on your needs. It is an extra configuration file used in the Frontend Config. For more information on how to set this up please see here