9. The Case Details Page

The Case Details Page lists the key attributes of a case, subject or individual participating in a clinical or research-based study in a Bento-based data sharing platform.

Case Details Page

Case Details Page Displayed are the configurable components of a Bento-based Case Details Page

9.1. Prerequisites

  1. The files that specify the configuration parameters of the Case Details Page are stored in 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. Configuration parameters for all Case Details Page elements can be specified in the file: $(src)/packages/bento-frontend/src/bento/caseDetailData.js.

  3. All images and icons used in a Bento instance should be accessible via a public url.

  4. Please review the list of GraphQL queries to select query types that return the data of interest.

9.2. Configuring the Case Details Page

Key case attributes can be added to the Case Details Page as label:value pairs within a set of subsections. A maximum of 6 sections can be added to the Case Details Page; 3 in the left-hand Panel and 3 in the right-hand Panel. Within each subsection a maximum of 10 attributes can be displayed as label:value pairs.

  • If more than 3 subsections are configured in a panel, only the first 3 subsections will be displayed in the UI, other subsections will be ignored.

  • If more than 10 properties are configured, only first 10 properties will be displayed in the UI, other properties will be ignored.

  • An optional table can be added to the Case Details Page to list case-level data.

9.2.1. Configuring the Case Details Page Header

The Case Details Page Header displays a Case ID.

  1. Open the file $(src)/packages/bento-frontend/src/bento/caseDetailData.js.

  2. Under caseHeader:

    • Set the field label to the label text to be displayed.

    • Set the field dataField to the GraphQL API query field that returns the Case ID.

    • Add the GraphQL API query field to GET_CASE_DETAIL_DATA_QUERY.

9.2.2. Configuring the Left and Right-Hand Panels of the Case Details Page

The left and right-hand panels allow for the display of case attributes as label:value pairs with a set of subsections; related data attributes can be grouped together in a section.

  1. Open the file $(src)/packages/bento-frontend/src/bento/caseDetailData.js.

  2. Under the appropriate section leftPanel or rightPanel:

    • Add a object {sectionHeader: , secitionDesc: properties: } to add a subsection.

    • Set the field sectionHeader to the display name for the subsection.

    • Set the field sectionDesc to an optional description for the subsection.

    • Add an object {label:,dataField: ,link: ,labellink: } to add a label:value pair to the subsection.

    • Set the field label to the label name to be displayed.

    • Set the field dataField to the GraphQL API query that returns the value to be displayed.

    • You can embed an optional link in the label or value, or both. Links can be internal or external.

      • To add a link to the value specify an internal or external link by adding a link attribute to the object.

      • To add a link to the label specify an internal or external link by adding a labelLink attribute to the object.

    • Add the GraphQL API query field to GET_CASE_DETAIL_DATA_QUERY.

  3. Example of adding a subsection to the left-hand panel:

...
const leftPanel = [
  {
    sectionHeader: '<Your Subsection Header Title>',
    sectionDesc: '< Your Subsection description.>',
    properties: [
      {
        label: '<Display Label>',
        dataField: '<GraphQL API query field that returns value>',
        link: '<An internal or external link to be added to your value>',
      },
      {
        label: '<Display Label>',
        dataField: '<GraphQL API query field that returns value>',
        labelLink: '<An internal or external link to be added to your label>',
      },
      ...
      ]
  }
  ...
 ]

 const GET_CASE_DETAIL_DATA_QUERY = gql`
 <Your GraphQL API query fields>
 `

9.3. The Case Details Page Tables: “Associated Files” and “Associated Samples”

The Case Details Page has tables can be used to display case-level information such as the files and samples that belong to a case.

9.3.1. Configuring the “Associated Files” and/or “Associated Samples” tables

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

  2. The configuration for “Associated Files” is in filesTable and “Associated Samples” is in sampleTable.

  • The display field is set to true, by default. Set this field to false to disable the table in the Case Details Page.

  • Set the field title to the the title of the table.

  • Set the field dataField to the name of the GraphQL API query being used to return data for the Case Details Page. Note: This query should match the GraphQL API query in GET_CASE_DETAIL_DATA_QUERY.

  • Set the field defaultSortField to the name of the query field that will be used to sort the Case Details Page table. Note: this query field should be displayed as one of the columns in the Case Details Page table.

  • Set the field defaultSortDirection to the sort order to be displayed. Valid values are ‘asc’ (ascending) and ‘desc’ (descending).

  • Add the GraphQL API query to GET_CASE_DETAIL_DATA_QUERY.

  1. Example:

...
const filesTable = {
  display: true,
  title: '<Table Title>',
  dataField: '<GraphQL API query returning data for this page.>',
  defaultSortField: '<GraphQL API query field used to sort the table.>',
  defaultSortDirection: '<sort order, asc|desc>',
 ...
const GET_CASE_DETAIL_DATA_QUERY = gql`{
  '<Your GraphQL query>'' {
    '<Data fields returned by your GraphQL API query>'
  ... 
 }
}

9.3.2. Adding Columns to the “Associated Files” and/or “Associated Samples” Tables

Up to 10 columns can be added to the “Associated Files” Table. 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.

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

  2. The configuration for “Associated Files” is in filesTable and “Associated Samples” is in sampleTable.

  3. Under filesTable or sampleTable add an object {dataField: , header: , link: ,} to the columns list:

  • Set the field dataField to the GraphQL API query data field that returns the data for the column.

  • Set the field header to the column header name.

  • Set the field link to an internal or external link that is to be embedded into the the column value. See below for additional instructions on adding internal and external links. Links are optional.

  • Add the GraphQL API query data field to GET_PROGRAM_DETAIL_QUERY.

  1. Example:

const filesTable = {
  ...
  columns: [
    {
      dataField: '<GraphQL API query field returning data for this column>',
      header: '<Column Header>',
      link: '<link to be embedded in column value>',
    },
    {
      dataField: '<GraphQL API query field returning data for this column>',
      header: 'PubMed ID',
    },
    ...
  ],
};

const GET_CASE_DETAIL_DATA_QUERY = gql`{
  '<Your GraphQL query>'' {
    '<Data fields returned by your GraphQL API query>'
  ... 
 }
}

9.3.2.2. External Links in the Case Details Page Table

  1. External links shall start with http:// or https://.

  2. External links shall show-up with externalLinkIcon.

  3. External link shall be opened in a new tab.

  4. Dynamic links can be generated by passing a valid table filed to {}. For example, https://pubmed.ncbi.nlm.nih.gov/{pubmed_id} shall link to https://pubmed.ncbi.nlm.nih.gov/29860917/.