Generic Cards

What is a card?

A card is a UI component that contains content and actions about a single subject. In this case, the Generic Card is a highly configurable component used to render a single row of a Synapse Table or View.

Here are a few examples:

Each UI field must be mapped to a column in the Synapse Table/View.

*type: Indicates the object type, for example “Project”. Icons are automatically mapped for some types.
*title: Column name to use for the title.
link: Column name that contains an URL to make the title a link.
subTitle: Column name to use for the sub-title.
description: Column name to use for the description.
descriptionLinkConfig: Indicate if the description is markdown.
icon: Column name that contains the name of the icon to use in this card.
imageFileHandleColumnName: Column name that contains the FileHandleID of a custom image to be displayed on the card.
ctaButtonLinkConfig: Configure the CTA button link. Define what the button text should be, and the link configuration (column to use for the value, and how to create the internal link).
labelLinkConfig: Instruct the card on how to create links in the secondary labels. Columns may contain markdown, or their value could be used to create an internal link (to a details page for example).
columnIconOptions: Also include a special icon/label for specific values found in the secondary label column.
dataTypeIconNames: Column name that contains the list of data types to show as additional icons.
backgroundColor: Background color of the card.
isHeader: Indicate if the card should be rendered as a Header.
iconOptions: For all cards in a list, use a custom icon mapping.

How would someone set these up in Synapse?

Initiatives Example

https://www.synapse.org/#!Synapse:syn24189696/tables/

Synapse Table schema contains the following relevant columns: initiative, summary, website, image (File type column that contain the custom images).

Example Card Configuration that a web engineer would write for your table/view:

 {
  genericCardSchema: {
    type: 'Initiative',
    title: 'initiative',    
    description: 'summary',    
    link: 'website',
    imageFileHandleColumnName: 'image',
  },
  ctaButtonLinkConfig: {
    buttonText: 'Explore Studies',
    linkConfig: {
      matchColumnName: 'initiative',
      isMarkdown: false,
      baseURL: 'Explore/Initiatives/DetailsPage',
      URLColumnName: 'initiative',
    }
  }

Studies Example

https://www.synapse.org/#!Synapse:syn16787123/tables/

Synapse Table schema contains the following relevant columns: studyName, summary, studyLeads, studyStatus, dataStatus, diseaseFocus, manifestation, fundingAgency,institutions, studyId, dataType (StringList type column that contain the names of data type icons).

Example Card Configuration that a web engineer would write for your table/view:

{
  genericCardSchema: {
    title: 'studyName',
    type: STUDY,
    description: 'summary',
    subTitle: 'studyLeads',
    icon: 'studyStatus',
    secondaryLabels: [
      'studyStatus',
      'dataStatus',
      'diseaseFocus',
      'manifestation',
      'fundingAgency',
      'institutions',
      'studyId',
    ],
    dataTypeIconNames: 'dataType'
  },
  iconOptions: {
    Active: studyActiveSvg,
    Completed: studyCompleteSvg,
  },
  titleLinkConfig: {
    isMarkdown: false,
    baseURL: 'Explore/Studies/DetailsPage',
    URLColumnName: 'studyId',
    matchColumnName: 'studyId',
  },
  columnIconOptions: {
    columns: {
      'dataStatus': {
        'Available': { icon: 'data', color: '#28A745' },
        'Partially Available': { icon: 'data', color: '#DE9A1F' },
        'Under Embargo': { icon: 'dataLocked', color: '#D46D1E' },
        'None': { icon: 'data', color: '#BBBBBC' },
      },
      'studyStatus': {
        'Active': { icon: 'reload', color: '#28A745' },
        'Completed': { icon: 'check', color: '#B2242A' },
      },
      'dataType': {
        'genomicVariants': { icon: 'geneVariants', label: 'Genomic Variants Data Available' },
        'geneExpression': { icon: 'geneExpression', label: 'Gene Expression Data Available' },
        'image': { icon: 'imaging', label: 'Image Data Available' },
        'drugScreen': { icon: 'lineGraph', label: 'Drug Screen (Cell) Data Available' },
        'behavior process': { icon: 'rat', label: 'Behavior Process Data Available' },
        'chromatinActivity': { icon: 'chromatin', label: 'Chromatin Activity Data Available' },
        'proteomics': { icon: 'proteomics', label: 'Proteomics Data Available' },
        'kinomics': { icon: 'kinomics', label: 'Kinomics Data Available' },
        'clinical': { icon: 'clinical', label: 'Clinical Data Available' },
        'other': { icon: 'other', label: 'Other Data Available' },
      }
    }
  }
}