index.html
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="js/lib/jquery.dataTables.min.js"></script>
<script src="js/lib/jquery.qtip.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/lib/underscore-min.js"></script>
<script>
/**
* To make node specific functions work in browser, include fake require
* function and module object
*/
var require = function(module) {
if (typeof window[module] === "undefined") {
return {};
} else {
return window[module];
}
};
var module = {};
/**
* To ensure backward compatibility of the method Object.setPrototypeOf
* introduced in ECMA6, not supported by PhantomJS
*/
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
obj.__proto__ = proto;
return obj;
}
</script>
<script src="//cdn.rawgit.com/MrRio/jsPDF/v1.3.5/dist/jspdf.min.js"></script>
<script src="//html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="js/lib/d3-timeline.js"></script>
<script src="js/plugins/util.js"></script>
<script src="js/plugins/pluginPrototype.js"></script>
<script src="js/plugins/exportTimeline.js"></script>
<script src="js/plugins/trimTimeline.js"></script>
<script src="js/plugins/verticalLine.js"></script>
<script src="js/plugins/helperLines.js"></script>
<script src="js/plugins/overviewAxis.js"></script>
<script src="js/plugins/zoom.js"></script>
<script src="js/plugins/configButton.js"></script>
<script src="js/clinicalTimeline.js"></script>
<script src="js/sanity.js"></script>
<script src="js/parser.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="css/lib/jquery.qtip.min.css" type="text/css" rel="stylesheet" />
<link href="css/lib/dataTables.tableTools.min.css" type="text/css" rel="stylesheet" />
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
#timeline .overview-axis path,
#timeline .overview-axis line{
fill: none;
stroke: #bbb;
shape-rendering: crispEdges;
}
#timeline .overview-axis .tick text{
color: #ddd;
}
#timeline .overview-axis-mirror .tick text{
font-size: 0px !important;
}
#timelineZoomOut {
fill: blue;
}
.axis .tick text {
font-family: sans-serif;
font-size: 10px;
}
.show-track, .hide-track {
font-family: sans-serif;
font-size: 12px;
}
.timeline-label {
font-family: sans-serif;
font-size: 12px;
}
body {
text-align: center;
background-color: white;
}
#jsonInput {
width: 500px;
height: 600px;
margin: 10px auto;
}
#timeline {
width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: 10px;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.btn-group-view{
margin-left: 600px;
}
.btn-group > .btn, .dropdown-toggle{
padding: 6px 15px;
font-size: 12px;
border-radius: 6px;
}
.dropdown{
width: 100px;
display: inline-block;
}
.dropdown-menu{
font-size: 12px;
}
#timeline .overview {
margin: 0 auto;
display: block;
position: relative;
left: 80px;
}
#tooltip-controller{
position: relative;
left: 325px;
top: -85px;
font-size: 12px;
visibility: hidden;
cursor: pointer;
}
#export-div{
left: -370px;
}
#config-div{
position: absolute;
top: 5px;
left: 5px;
}
#config-div ul li {
font-size: 14px;
padding-left: 5px;
}
#config-div ul input{
margin: 3px 5px 0 0;
float: left;
}
</style>
<script>
$(document).ready(function() {
function getURLParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var jsonURL = getURLParameterByName("json");
var jsonCBioPortal = getURLParameterByName("cbioportal");
var patientId = getURLParameterByName("patientid");
var patientJSON = getURLParameterByName("patientjson");
var viewType = getURLParameterByName("view");
var testData = getURLParameterByName("test");
var dataFed = "data1";
var waitForParse = false;
if (jsonURL !== "") {
if (jsonURL.indexOf("?view=") > -1) {
jsonURL = jsonURL.substring(0, jsonURL.indexOf("?view="));
}
$("#jsonInput").val(JSON.stringify(JSON.parse(decodeURIComponent(jsonURL)), null, ' '));
} else if (jsonCBioPortal !== "") {
var jsonTransformed = clinicalTimelineParser(JSON.parse(decodeURIComponent(jsonCBioPortal)));
$("#jsonInput").val(JSON.stringify(jsonTransformed, null, ' '));
} else if (patientId !== "" && patientJSON !== "") {
waitForParse = true;
$.getJSON(patientJSON, function(data) {
$("#jsonInput").val(JSON.stringify(data[patientId], null, ' '));
if (!waitForParse) {
$("#parseJson").click();
}
});
} else {
if (testData !== "") {
dataFed = testData.substring(0, testData.indexOf("?view="));
$(".data-control").css("display", "none");
}
$.getJSON("test/data/"+dataFed+".json", function(data) {
$("#jsonInput").val(JSON.stringify(data, null, ' '));
if (!waitForParse) {
$("#parseJson").click();
}
}).error(function() {
alert("Error Loading JSON Data");
});
}
$("#parseJson").on("click", function() {
initTimeline(viewType === "simple");
});
function initTimeline(trimmingForSceenshotTest) {
allData = JSON.parse($("#jsonInput").val());
var timeline = clinicalTimeline()
.width(800)
.data(allData)
.divId("#timeline")
.splitByClinicalAttributes("Surgery", "Location")
.splitByClinicalAttributes("Test", "Type")
.splitByClinicalAttributes("TreatmentType", ["TREATMENT_TYPE", "AGENT"])
.splitByClinicalAttributes("TreatmentTypeStuff", ["TREATMENT_TYPE", "STUFF"])
.sizeByClinicalAttribute("PSA", "Result")
.sizeByClinicalAttribute("Phos", "Result")
.orderAllTooltipTables(["Source","Location"])
.enableTrackTooltips(true)
.plugins([
{
obj: new trimClinicalTimeline("Trim Timeline"),
enabled: trimmingForSceenshotTest
},
{
obj: new clinicalTimelineHelperLines("Helper Lines"),
enabled: false
},
{
obj: new clinicalTimelineZoom("Zoom"),
enabled: !trimmingForSceenshotTest
},
{
obj: new clinicalTimelineOverviewAxis("Overview Axis"),
enabled:!trimmingForSceenshotTest
},
{
obj: new clinicalTimelineVerticalLine("Vertical Timeline",
{
tooltipControllerId: "#tooltip-controller",
hoverBegin: 200,
hoverEnd: 770
}),
enabled: false
},
{
obj: new configCheckManager(null,
{
configUlId: "#timeline-wrapper #config-div #config-dropdown"
}),
enabled: true
},
{
obj: new clinicalTimelineExporter("Export",
{
exportDivId : "#export-div",
}),
enabled: true
}
])
.collapseAll();
timeline();
}
})
</script>
</head>
<body>
<div id="timeline-wrapper">
<h3>clinical timeline</h3>
<div class="dropdown" id="config-div">
<button class="btn btn-default dropdown-toggle" type="button" id="configDropdownBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Config
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="config-dropdown">
<!-- dynamically populated via js/plugins/configButton.plugins -->
</ul>
</div>
<div class="dropdown" id="export-div">
<button class="btn btn-default dropdown-toggle" id="export-button" type="button" data-toggle="dropdown">Export As
<span class="caret"></span></button>
<ul class="dropdown-menu">
<script type="text/javascript">
var exporter = (new clinicalTimelineExporter()).run(null, {exportDivId : "#export-div", timelineDiv : "#timeline"});
</script>
<li><a href='javascript:exporter.generateSVG()'>SVG Image</a></li>
<li><a href='javascript:exporter.generatePNG(true)'>PNG Image</a></li>
<li><a href='javascript:exporter.generatePDF()'>PDF Document</a></li>
</ul>
</div>
<div id="timeline">
</div>
<span id="tooltip-controller">
<a>Hide tooltips on vertical-line</a>
</span>
<h4 class="data-control">data</h4>
<button id="parseJson" class="btn btn-primary data-control">Parse JSON</button><br />
<textarea id="jsonInput" class="form-control data-control">
</textarea>
<!-- canvas and div used for redrawing the timeline SVG required for exporting -->
<canvas id="canvas" width="800" height="268" style="display:none"></canvas>
<div id="png-container" style="display:none"></div>
</div>
</body>
</html>