Page Comparison

...

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

Here are a few examples:

...

*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 image in the cardvalue, and how to create the internal link).
secondaryLabelslabelLinkConfig: Instruct the card on how to render create links in the secondary labels. Columns may contain markdown, or perhaps their value should could be used to create a 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.iconOptions: For all cards in a list, use a custom icon mapping.
backgroundColor: Background color of the card.
isHeader: Indicate if the card should be rendered as a Header.

How are cards used?

What are the components within a card (e.g. Data type icons, custom image, CTA button link, etc) and how would someone set these up in Synapse?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' },
      }
    }
  }
}