10. Cart Workflow

10.1. Introduction

The cart workflow is a mechanism for users to generate a manifest for working with case files.

File-centric Cart

Cart Workflow. Displayed are the configurable components of the file-centric Cart.

 

10.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).

 

10.3. Customizing the Cart Workflow:

The configuration for the Cart page is found in the javascript file: bento-frontend/src/bento/fileCentricCartWorkflowData.js

10.3.1. Page Properties

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

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’)

Download Button Items:

  • downButtonText: Text to appear on 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 downloadButton (e.g. ‘To access and analyze files: select and …’)

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

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

10.3.2. File Table Properties

The file table on the page is is configured using the following fields in the table object: (e.g. export const table = { )

Sorting:

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 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 link dynamically using {datafield}, for example:

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

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

10.3.3. File Table Data (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
    }
}`;

10.3.4. Configuring the Navigation Bar for the Cart Workflow

10.3.5. 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',