5. Minor Report Edits

In this section we will discuss some minor edits to your report template including:

  • Adding a sentence that will describe the minor allele frequency from ExAC Variant Frequencies;
  • Changing the color of the header text;and
  • Changing the format of the dates in the rendered report.

Adding Alternate Allele Frequency from ExAC Variant Frequencies

Similar to the previous sections we will need to examine the identifier that corresponds to that data in the project by opening the JavaScript Development Console in VarSeq. To access the development console, click on the Gear icon and select Developer JavaScript Console. This will bring up a WebKit-like dev console.

  • Under the Console tab enter form.getProjectData()
  • Click on the sources drop-down menu. This is an array which lists the objects in the variant table.
  • Click on the drop-down for number 16 to view the ExAC Variant Frequencies 0.3, BROAD annotation source.

Note the Key for the annotation source ExAC Variant Frequencies. This is the value you’ll use in the report.js file to pull in information from your annotation source.

  • Click on the fields drop-down. This is an array which lists the objects in the ExAC Variant Frequencies annotation source.
  • Click on the drop-down for number 4 in the array to view the Alternate Allele Frequency.

Note the symbol field AltAlleleFreqAF see Figure 5-1. This is the identifier we will use to autofill the alternate allele frequency information from ExAC Variant Frequencies for each flagged variant.

ExAC JS console

Figure 5-1: Browsing to the ExAC key in the JavaScript Console.

Now that we have the necessary identifiers we can add this information into the variant interpretation section of the report.

  • In VarSeq, click the Gear menu and select Open Report Template Folder. Open the report.js file in a text editor such as Notepad ++.
  • Add the following line of code to the constructVariant function in the report.js file see Figure 5-2.
variant.freq =  templateUtils.formatFrequency(_.get(variantData,
                   'ExAC-Variant Frequencies.AltAlleleFreqAF'));

Note

Additional JavaScript helper functions have been included in scripts/templateUtils.js.

ExAC report JS

Figure 5-2: Editing the constructVariant Function Pull in ExAC Allele Frequency.

Next add the following line of code to the interpretation function in the report.js file see Figure 5-3. This calls out to the autofill function in the scripts/templateUtils.js file located in the Report Template folder.

interpStr += ' ' + templateUtils.varFreqExacString(variant);
ExAC report JS

Figure 5-3: Editing the Interpretation Function in the report.js File.

Save the report.js file and reload the report template in VarSeq by clicking on the Gear icon and select Reload Report Template. Refer to Figure 4-4. As shown in Figure 4-15 you will need to reselect variants in the Primary Findings section of the report template for the changes to take effect.

The Primary Findings section of the Report Template, will now contain information autofilled from the ExAC Variant Frequencies 0.3, BROAD annotation source. See Figure 5-4.

ExAC report JS

Figure 5-4: Alternate Allele Frequency in the Interpretation Section of the Report.

Editing The Color of the Header Text

By Default, reports are rendered in HTML, which can be easily saved as a PDF in VarSeq. To customize the style or ‘look’ of the rendered HTML report, users can modify style sheets found in the Report Templates folder.

Each report template has three style sheets:
  • main.css - Users can define a custom style of reports.
  • print.css - Print to PDF style sheet.
  • vendor.css - Primarily composed of Bootstrap CSS framework.
Let’s modify the font color for the Patient and Sample Information section of rendered report.
  • Click the Gear menu and select Open Report Template Folder. Open the main.css file in a text editor.
  • Scroll down to .dt-header and .dd-label class
  • Change the hexadecimal color code in the .dt-header from blue (#00abff) to black (#000000)
  • Save the report main.css style sheet and re-render the report for the changes to take effect. See Figure 5-5.

Note

When making changes to the template.tpl or CSS stlye sheets you do not have to reload the report template for the changes set for the changes to take effect.

Font Color Main CSS

Figure 5-5: Editing the Font Color in the main.css File.

Changing the Date & Time Format

The date time widget can be used to specify when an event occurred. The format for the value in this field can be specified with the following symbols. For more information on this widget please refer this section of the manual. Lets change the format of this widget from the full month name to rendering the date in the numeric dd/mm/yyyy format.

  • In VarSeq, click the Gear menu and select Open Report Template Folder. Open the report.js file in a text editor such as Notepad ++.
  • Edit the return date.toLocaleDateString line of code to the Handlebars.registerHeliper function in the report.js file to the code block below. see Figure 5-6.
return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear();
Font Color Main CSS

Figure 5-6: Editing the DateTimeEdit in the report.js File.

The Report Dates will now be rendered in the numeric dd/mm/yyyy format. See Figure 5-7.

Font Color Main CSS

Figure 5-7: Modified Dates Format in the Rendered Report.