11. File-Centric Cart Page

11.1. Introduction

The File-Centric Cart Page serves as a location where files related to cases or subjects of interest are aggregated through the cohort discovery and building process. Within this page, users can generate a file manifest containing identifiable file metadata that can be used to stream files on demand from cloud storage through partnering cloud resources to execute analyis pipelines and workflows on case-level genomic or transcriptomic files.

File-Centric Cart Page. Displayed are the configurable components of the File-Centric Cart Page.

 

11.2. Prerequisites

1. Fork the GitHub repo https://github.com/CBIIT/bento-frontend (representing your GitHub username as YOUR-USERNAME)

2. Create a local clone of your fork into a local directory, represented here as $(src).

 

11.3. Customizing the File-Centric Cart Page

The configuration for the File-Centric Cart Page is found in the javascript file: $(src)/packages/bento-frontend/src/bento/fileCentricCartWorkflowData.js

11.3.1. Page Properties

The page-level properties are configured using the following fields the myFilesPageData object: (e.g. export const myFilesPageData = { )

11.3.2. Page Header Items

• mainTitle: Table title on the page (e.g. “Cart >”)

• subTitle: Table sub title on the page (e.g. “Selected Files”)

• headerIconSrc: the header icon is to the left of the table title; this field value specifies the src for the icon (it should be a url)

• headerIconAlt: Alt text for header icon (e.g. ‘Cart logo’)

11.3.3. Download Button Items

• downButtonText: Text to appear on the download button (e.g. “DOWNLOAD MANIFEST”)

• manifestFileName: the filename used for the generated manifest file (e.g. ‘File Manifest’).

  • Note that the generated manifest filename will automatically have the date and time appended after the value provided here, following the scheme: “ + .csv”. For example: File Manifest 2020-05-22 11-34-07.csv

  • Note that is autogenerated and is not configurable.

• tooltipMessage: tooltip message that appears for the download button (e.g. ‘To access and analyze files: select and …’)

The generated file manifest will have a description field to help users remember key information. The default text that appears in the description’s text area can be configured:

• textareaPlaceholder: Default text message that appears in the textArea (e.g. ‘Please add a description for the …’)

11.3.4. Configuring the File-Centric Cart Page Table

The table on the File-Centric Cart Page is configured using the following fields in the table object: (e.g. export const table = { )

11.3.4.1. Sorting the Table

The default sorting behavior for the table can configured:

• defaultSortField: The field used as the default sort field; it must be one of the dataField listed in columns

• defaultSortDirection: The default sort direction can be either Ascending or Descending; value must be either asc or desc

For example, to configure the table’s default sort to be the ‘file_name’ column and to be sorted by ascending order:

  // Value must be one of the 'dataField's in "columns"
  defaultSortField: 'file_name',
  // 'asc' or 'desc'
  defaultSortDirection: 'asc', 

11.3.4.2. Columns and Ordering

The columns that appear in the File-Centric Cart Page table are configured in list columns. 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 entry 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 the link dynamically using {datafield}, for example:

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

11.3.5. Powering the File-Centric Cart Page Table with GraphQL

The data is retrieved using a GraphQL Query used in the Dashboard Page:

// code placeholder
export const GET_MY_CART_DATA_QUERY = gql`
query filesInList($file_ids: [String]) {
    filesInList(file_ids: $file_ids) {
        study_code
        subject_id
        file_name
        file_type
        association
        file_description
        file_format
        file_size
        file_id
        md5sum
    }
}`;

11.3.6. Configuring the Navigation Bar for the File-Centric Cart Page

11.3.6.1. Navigation Bar link text

To configure the link text that appears on the nav bar:

1. Under navBarCartData,

2. Set the field cartLabel to have the desired text value.

For example, to have the link appear as ‘MY FILES’:

export const navBarCartData = {
  cartLabel: 'MY FILES',

11.3.6.2. Navigation Bar icon

To configure the icon that appears on the menu bar:

1. Under navarBarCartData,

2. Set the field cartIcon to point to the new desired image file, the value should be a URL.

3. Update the field cartIconAlt to an appropriate “alternate text” description for the icon.

For example, to have the icon to use the file MyIcon.svg instead of file Icon-MyCases.svg

export const navBarCartData = {
  ...
  cartIcon: 'https://raw.githubusercontent.com/YOUR-USERNAME/bento-frontend/master/src/assets/icons/MyIcon.svg',
  cartIconAlt: 'my_icon_logo',
};