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

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 = { ) 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', 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) {

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