Skip to content

Instantly share code, notes, and snippets.

@bdunnette

bdunnette/README.md

Last active October 29, 2015 20:34
Show Gist options
  • Save bdunnette/20273b976b39ee7c8a11 to your computer and use it in GitHub Desktop.
Save bdunnette/20273b976b39ee7c8a11 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

VXM

Proof-of-concept HLA virtual crossmatch in the browser

Raw
app.js
var app = angular.module('vxm', ['ngPapaParse']);
app.controller('MainCtrl', function($scope, Papa) {
$scope.recipient = {};
$scope.sera = {};
$scope.$watch('csvString', function(newVal, oldVal) {
if (newVal) {
Papa.parse(newVal, {
header: true,
dynamicTyping: true,
step: function(results, parser) {
var row = results.data[0];
console.log(row);
if (row['Sample Date'] && row.Normalized) {
var sampleDate = moment(row['Sample Date']);
if (!(sampleDate in $scope.sera)) {
$scope.sera[sampleDate] = {};
}
$scope.sera[sampleDate][row['Specificity Abbreviation']] = row.Normalized;
}
}
});
console.log($scope.sera);
}
}, true);
})
.directive("fileread", [function() {
return {
scope: {
fileread: "="
},
link: function(scope, element, attributes) {
element.bind("change", function(changeEvent) {
var reader = new FileReader();
reader.onload = function(loadEvent) {
scope.$apply(function() {
scope.fileread = loadEvent.target.result;
});
};
reader.readAsText(changeEvent.target.files[0]);
});
}
};
}]);
Raw
index.html
<!DOCTYPE html>
<html ng-app="vxm">
<head>
<meta charset="utf-8" />
<title>Virtual Crossmatch</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MainCtrl">
<p>Choose a CSV file below:</p>
<input fileread="csvString" type="file" />
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="field in csvData.meta.fields">{{field}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, serum) in sera">
<td>{{key}}</td>
<td ng-repeat="(key, value) in serum">{{key}}:{{value}}</td>
</tr>
</tbody>
</table>
<p>Powered by <a href="https://docs.angularjs.org/api" target="_blank">AngularJS</a>
and <a href="http://papaparse.com/docs" target="_blank">PapaParse</a>
</p>
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<script src="//cdn.rawgit.com/stevemao/angular-PapaParse/v1.0.0/dist/js/angular-PapaParse.js"></script>
<script data-require="[email protected]" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Raw
style.css
/* Put your css in here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment