9. Dashboard: Tabs and Tables

The dashboard is structured to organize the data tables using tabs beneath the widgets.

These tables can be configured to list key data entities in your data sharing platform along with a list of key data entity attributes. In the Bento reference implementation the Dashboard Table list the cases (or study subjects) in the program.

9.1. Tabs

The tabs can be configured as follows:

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

  2. To change Properties of tab go to tabs object:

  • name : Text to show on tab

  • dataField: specifies what data appears in the column, field must be from the GraphQL API query

:point_right: NOTE: the order of the entries in tabsshould match the order in the tabsIndex object. This is the order that the tabs will be displayed left to right on the UI.

To change style of tab go to tabIndex object :

  • title : Text to shown on tab

  • primaryColor : background color when tab is selected

  • selectedColor : font color when tab is selected

:point_right: NOTE: the order of the entries in tabIndex should match the order in the tabs object. This is the order that the tabs will be displayed left to right on the UI.

9.2. Tables

The tables on each tab can be configured as follows:

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

  2. The tabContainers object is an array of tables, with each table object having the following fields:

  • dataField : field name in “Data” object to get values for table.

    :point_right: NOTE: This field should be in the GraphQL API query specified in the api field.

  • defaultSortField: Value must be one of the ‘dataField’ in columns.

  • defaultSortDirection: Sort default column in Ascending or Descending order (value must be asc or desc)

  • buttonText: Text to appear on Add to cart button

  • saveButtonDefaultStyle: Style of on Add to cart button, with fields such as

    •   color: '#fff',
  backgroundColor: '#09A175',
  opacity: '1',
  border: '0px',
  cursor: 'pointer',

  • ActiveSaveButtonDefaultStyle: Style of on Add to cart button when it is active mode

  • DeactiveSaveButtonDefaultStyle: Style of on Add to cart button when it is disabled mode

  • columns: a list of column objects. There is a maximum limit of 10 columns. If more than 10 columns are added, Bento will display the first 10 columns without an error or warning message. The top-down order of columns will be displayed left to right on the UI. Each column object is described by the following fields:

    • dataField: specifies what data appears in the column, field must be from the GraphQL API query

    • header: Heading Text for column

    • sort: sort order for column

      • must be asc or desc

    • primary: applies to primary field of table like “sample_ID” or “File_ID” based on which files will be added in to cart.

      • must be true or false

    • display: Show or Hide column

      • must be true or false

    • dataFromRoot: Get data from parent element.

      • must be true or false

    • link: Hyperlink to internal or external page. The value can be injected in link dynamically using {datafield}, for example:

      // Internal Link 
link: '/arm/{dataField}',

// External Link
link: 'https://example.com/{dataField}',

9.2.3. Tool Tip

To change Properties of tool tip for each tab, table go to tooltipContent object:

  • icon: The help tip icon that appears next to the ‘add button’

  • alt: alt for the tooltip image

  • 0,1,2: tooltip content for first tab, second tab and third tab.

9.2.4. GraphQL Query

The GraphQL Query used in the Dashboard page is defined in DASHBOARD_QUERY. For example:

// GraphQL query to retrieve detailed info for a case
export const DASHBOARD_QUERY = gql`{
  numberOfPrograms
  numberOfStudies
  numberOfSubjects
  numberOfSamples
  numberOfLabProcedures
  numberOfFiles
  subjectCountByProgram{
        group
        subjects
      }
...
    fileOverview {
        file_id
        file_name
        association
        file_description
        file_format
        file_size
        program
        arm
        subject_id
        sample_id
        diagnosis
    }
  }`;

9.2.4.1. Suggested Best Practices

  • Dimension of the External Link Icon = 16 X 16 pixels.

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

:warning: WARNING: You can add a maximum of 10 columns to the dashboard tab table. If you add more than 10 columns, Bento will display only the first ten columns, without any warning or error message