D3.js in App Report Builder

[Julie Chow]

Hello,

Recently, our group has been working on the report builder for a native app. We have used Liquid to access our output files to make tables, but our d3.js code for a bar chart does not work inside the report builder, although this same code works inside Plunker and displays our data. 

Our code is similar to the following example: http://bl.ocks.org/mbostock/3885304, and in order to avoid a security error, we have changed the src to:

<script src = "//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js" ></script>.

Currently we have two output files which are generated in folders named by unique .fastqgz input files. For example, a folder called 'truseqI1-8899-Name_S12_L001_R2_001.fastq.gz' contains 'count.tsv' and 'stat.tsv'. 

Plunker allows us to use:

d3.tsv("count.tsv", type, function(error, data) { ...

This does not work with the report builder. We have also tried combinations to replace "count.tsv" with and without quotations and {{ }} from Liquid such as:

 "{{result.files[key].tsv.parse}}", "{{result.files[key].href}}", "{{result.name}}/count.tsv", "{{result.samples[key].href}}", "{{result.files[key].content}}" 

with the d3.js script after

{% for key in result.files %}

{%if key contains 'count.tsv' %}

How can we modify our report builder code to access our output files and display d3.js charts?

Thanks for your help,

Julie Chow

[Mayank Tyagi]

Hello Julie,

Sorry to hear that you are encountering this issue.  This was recently reported to us and we are working on a fix for this, and there is a workaround available as well.  Here's what you can do:

First, put the content that you want to feed to the parser (e.g. the data) in a <div></div> tag like this with an empty tag for the chart - <div id="coverage-histogram-data" style="display:none">{{ result.files[key].content }}</div><div id="coverage_histogram_chart"></div>

Next, you can select that content via a script like the following - <script>var chart = new histogramChart({ selector: "coverage_histogram_chart", data: $("#coverage-histogram-data").text()});</script>

Once you have that available you can feed that into the D3 parser (d3.tsv.parse per the https://github.com/mbostock/d3/wiki/CSV#tsv_parse documentation) and that will be successful.

We hope the workaround resolves the issue for you, but please feel free to follow up should you run into any further issues, if any of the above information was unclear, or if this does not resolve your problem.  Thanks!

Sincerely,

The BaseSpace Platform Team