4. Global UI Elements

Global UI elements are displayed on every page of a Bento application. These are the (a) Web Browser tab, (b) Global Footer, (c) Navigation Bar and (d) Global Footer. The “Stats” bar, that displays the high-level statistics is a semi-global element as it is displayed only in the Program Listing, Program Detail, Dashboard and Case Detail pages. See below for details.

Global UI Elements

Global User Interface Elements. Displayed are the global elements that are displayed on all pages of a Bento-based data sharing platform. These are: the web browser tab, the global header, global footer, the navigation bar and the stats bar. The Stats Bar is semi-global in scope as it is displayed in only a subset of the application’s pages.

4.1. Prerequisites

  1. The files that specify the configuration parameters of the Bento UI are stored in the GitHub https://github.com/CBIIT/bento-frontend (representing your GitHub username as YOUR-USERNAME). Create a local clone of your fork into a local directory, represented in these instructions as $(src).

  2. All images and icons that you use in your Bento instance should be accessible via a public URL.

  3. Please review the list of GraphQL queries to select query type(s) that return your data of interest.

  4. Here is a mapping of each Global UI element to it’s configuration file:

Global UI Element Configuration File
Web Browser Tab $(src)/bento-frontend/public/index.html
Global Header $(src)/bento-frontend/src/bento/globalHeaderData.js
Global Footer $(src)/bento-frontend/src/bento/globalFooterData.js
Global Navigation Bar $(src)/bento-frontend/src/bento/navigationBarData.js
Stats Bar $(src)/bento-frontend/src/bento/globalStatsData.js

4.2. Web Browser Tab

Web browser tabs allow you to have multiple web pages open at the same time. An application-specific icon and text allows an end user to keep track of the tab running a Bento application.

4.2.1. Configuring the Favicon

The favorite icon (or favicon) that appears in the web browser tab can be configured in two ways:

Option A: Using a web-based location:

  1. Open $(src)/bento-frontend/public/index.html.

  2. Replace line <linkrel="shortcut icon" href="https://raw.githubusercontent.com/CBIIT/bento-frontend/master/public/favicon.ico"/> with <linkrel="shortcut icon"href="{URL of the file}"/>

Option B: Using a local file in your repo:

  1. The location is specified in the git repo and is in the file: $(src)/bento-frontend/public/

  2. Replace line <linkrel="shortcut icon" href="https://raw.githubusercontent.com/CBIIT/bento-frontend/master/public/favicon.ico"/> with <linkrel="shortcut icon"href="/{file_name}"/>

4.2.2. Configuring the Tab Title

The HTML Title element <title> defines the document’s title that is shown in a browser’s title bar or a page’s tab. The Title, or tab text, can be specified as follows:

  1. Open $(src)/bento-frontend/public/index.html.

  2. Replace line <title>Bento</title> with <title>{ title you want}</title>

4.6. “Stats” Bar

The Stats bar displays a set of summary statistics, for a Bento-based application, that gives the end user a high-level view of the volume and diversity of the curated data. A maximum of 6 statistics are allowed to be displayed. If you add more than 6 statistics, only the top 6 will be displayed without any warning or error message.

4.6.1. Configure the Stats Bar

  1. Open $(src)/bento-frontend/src/bento/stats.js.

  2. For each object in globalStatsData:

  • Set the field statTitle to the display label for the statistic.

  • Set the field datatable_field to have the respective in the dashboard query.

  • Set the field type to have one of the values [field, array, or object] how its returned in the dashboard query.

  • Set the field statAPI to have its respective field to get initial value from stats query

  • Under GET_GLOBAL_STATS_DATA_QUERY add the respective GraphQL query field to get the initial value.

  1. Example:

export const globalStatsData = [
  // A maximum of 6 stats are allowed
  {
    statTitle: '<Stat Label>',
    datatable_field: '<Your Datatable field name',
    datatable_sub_field:: '<Your Datatable subfield name, if applicable>',
    type: '<field|array|object>',
    statAPI: '<Your GraphQL API query>',
  },
  ...
  ]
export const GET_GLOBAL_STATS_DATA_QUERY = gql`{
  '<Your GraphQL API query>'
  ...
  }
  `;

4.7. Suggested Best Practice

  • Dimensions of the favicon: 32 X 32 pixels

  • The Web Browser Tab title should have a maximum of 33 characters

  • Dimensions of the Global Header Logo: 468x80 pixels

  • Dimensions of the Global Header Image: 1200x60 pixels

  • Dimensions of the Global Footer Logo: 310x80 pixels

  • Dimensions of the Footer Subsection Icon: 20 X 20 pixels

  • All images should have a resolution >= 72 ppi and should be in the PNG format.

  • All Alt tags should be short (maximum limit =125 characters). You may add multiple, comma-separated key words in the Alt tag.