Commit 854a663d authored by Fintan McGee's avatar Fintan McGee
Browse files

up0dated with latest code from dev repository to include PCA plot and fix for...

up0dated with latest code from dev repository to include PCA plot and fix for data inmdicator control
parent f250aaad
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -2,7 +2,16 @@ import gulp from 'gulp';
import runSequence from 'run-sequence';
import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();
var cleanCSS = require('gulp-clean-css');
var useref = require('gulp-useref');
var htmlmin = require('gulp-htmlmin');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var size = require('gulp-size');
var gulpif = require('gulp-if');
var rename = require("gulp-rename");
var uncss = require('gulp-uncss');
gulp.task('scripts', () =>
gulp.src([
......@@ -35,6 +44,7 @@ gulp.task('scripts', () =>
'js/controllers/colourmapctrl.js',
'js/controllers/dataindicatorctrl.js',
'js/controllers/dimredctrl.js',
'js/controllers/dimredctrlPCA.js',
'js/controllers/dimreddisplayctrl.js',
'js/controllers/dimredplotctrl.js',
'js/controllers/escgctrl.js',
......@@ -60,41 +70,38 @@ gulp.task('scripts', () =>
'js/services/r.js',
'js/services/tag.js'
])
.pipe($.concat('app.min.js'))
.pipe($.uglify({preserveComments: 'some', mangle: false}))
.pipe(concat('app.min.js'))
.pipe(uglify({preserveComments: 'some', mangle: false}))
// Output files
.pipe(gulp.dest('.'))
.pipe($.size({title: 'scripts'}))
.pipe(size({title: 'scripts'}))
);
// Scan your HTML for assets & optimize them
gulp.task('html', () => {
const assets = $.useref.assets({searchPath: '{., ./css}'});
const assets = useref.assets({searchPath: '{., ./css}'});
return gulp.src('index-raw.html')
.pipe($.rename('index.html'))
.pipe(assets)
return gulp.src('./index-raw.html')
.pipe(rename('index.html'))
.pipe(useref())
// Remove any unused CSS
.pipe($.if('css/*.css', $.uncss({
.pipe(gulpif('./css/*.css', uncss({
html: ['index-raw.html']
})))
// Concatenate and minify styles
// In case you are still using useref build blocks
.pipe($.if('**/*.css', $.minifyCss()))
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulpif('**/*.css', cleanCSS()))
//.pipe(assets.restore())
//.pipe(useref())
// Minify any HTML
.pipe($.if('*.html', $.minifyHtml()))
.pipe(gulpif('./*.html', htmlmin({collapseWhitespace: true})))
// Output files
.pipe(gulp.dest('.'))
.pipe($.size({title: 'html'}));
.pipe(size({title: 'html'}));
});
gulp.task('default', [], cb =>
runSequence(
['scripts', 'html'],
cb
)
);
//gulp.task('default', ['scripts', 'html'], function() { });
gulp.task('default', [ 'scripts','html'], function() { });
//gulp.task('default', ['scripts'], function() { });
......@@ -21,9 +21,9 @@
</div>
<form class="navbar-form navbar-right form-inline">
<div class="btn-group" ng-controller="ManualColoringCtrl" ng-show="manualColoringEnabled" dropdown="true">
<div class="btn-group" ng-controller="ManualColoringCtrl" ng-show="manualColoringEnabled" dropdown>
<button type="button" class="btn btn-default" ng-disabled="!itemsBrushed" ng-style="{'background-color': colors[0]}">Apply color to selection</button>
<button type="button" class="btn btn-default dropdown-toggle" ng-disabled="!itemsBrushed" dropdown-toggle="true">
<button type="button" class="btn btn-default dropdown-toggle" ng-disabled="!itemsBrushed" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
......@@ -44,7 +44,13 @@
<bar ng-repeat="bar in counts track by $index"
value="bar.rows / rowCount"
type="{{bar.type}}">
<b ng-hide="(bar.rows / rowCount) < 0.15">{{bar.rows}}</b>
<div ng-hide="(bar.rows / rowCount)< 0.01">
<b style="z-index: 1;position: relative;">{{bar.rows}}</b>
</div>
<div ng-hide="(bar.rows / rowCount)>= 0.01">
<b style="z-index: 1;position: relative; font-size: 0px;">dummy</b>
</div>
<!-- <b ng-hide="(bar.rows / rowCount) < 0.005">{{bar.rows}}</b> -->
</bar>
</progress>
</div>
......@@ -119,6 +125,7 @@
<script src="js/controllers/parcoordsvarsctrl.js"></script>
<script src="js/controllers/filterctrl.js"></script>
<script src="js/controllers/dimredctrl.js"></script>
<script src="js/controllers/dimredctrlPCA.js"></script>
<script src="js/controllers/dimredplotctrl.js"></script>
<script src="js/controllers/colorctrl.js"></script>
<script src="js/controllers/manualcoloringctrl.js"></script>
......
<!DOCTYPE html><html lang=en ng-app=contigBinningApp><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width, initial-scale=1"><title></title><link href=libs/fontawesome/css/font-awesome.css rel=stylesheet><link href=libs/parcoords/d3.parcoords.css rel=stylesheet><link href=libs/dimredplot/dimredplot.css rel=stylesheet><link href=css/light.css rel=stylesheet id=maincss></head><body><nav class="navbar navbar-default navbar-fixed-top" role=navigation><div class=container-fluid><div class=navbar-header><a class=navbar-brand><span style="color: #337ab7">I</span>nteractive <span style="color: #337ab7">Co</span>ntig-bin <span style="color: #337ab7">Ve</span>rification and <span style="color: #337ab7">R</span>efinement</a></div><form class="navbar-form navbar-right form-inline"><div class=btn-group ng-controller=ManualColoringCtrl ng-show=manualColoringEnabled dropdown=true><button type=button class="btn btn-default" ng-disabled=!itemsBrushed ng-style="{'background-color': colors[0]}">Apply color to selection</button><button type=button class="btn btn-default dropdown-toggle" ng-disabled=!itemsBrushed dropdown-toggle=true><span class=caret></span> <span class=sr-only>Toggle Dropdown</span></button><ul class="dropdown-menu brush-color" role=menu id=brush-color-menu><li ng-repeat="color in colors"><a href=# ng-style="{'background-color': color}" ng-click=colorSelection(color)><span class=colorpatch></span></a></li></ul></div><div class=form-group ng-controller=NameHighlightCtrl ng-hide=noHighlightAvailable><label class="control-label col-lg-4" for=rowNameHighlight>Highlight</label><input type=text id=rowNameHighlight class="col-lg-5 input-sm" ng-model=rowName ng-change=highlightRow()></div><div class=form-group ng-controller=DataIndicatorCtrl><progress ng-click=changeScale() max=1 animate=false><bar ng-repeat="bar in counts track by $index" value="bar.rows / rowCount" type={{bar.type}}><b ng-hide="(bar.rows / rowCount) < 0.15">{{bar.rows}}</b></bar></progress></div><div class=form-group ng-controller=ThemeCtrl><label class=control-label>Theme:</label><div class=btn-group><label class="btn btn-default" ng-model=theme btn-radio="'light'">Light</label><label class="btn btn-default" ng-model=theme btn-radio="'dark'">Dark</label></div></div></form></div></nav><div id=main class=container-fluid><div id=top class=row><div id=parcoords class=col-lg-12><div class=parcoords ng-controller=ParcoordsCtrl></div></div></div><div id=bottom class=row ng-controller=PlotCtrl><div id=options ng-style=sliding><ng-include src="'js/templates/options.html'"></ng-include></div><div class=col-lg-1></div><div id=charts class=col-lg-11 ng-controller=ChartsCtrl><div class=row id=dimRedPlots><div id=dimRedPlot class="tab-pane container-fluid active" ng-class=dimredplotWidth ng-repeat="analysis in analyses" ng-controller=DimRedPlotCtrl></div></div></div></div></div><script src=app.min.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" ng-app="contigBinningApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="libs/fontawesome/css/font-awesome.css" rel="stylesheet">
<link href="libs/parcoords/d3.parcoords.css" rel="stylesheet">
<link href="libs/dimredplot/dimredplot.css" rel="stylesheet">
<link href="css/light.css" rel="stylesheet" id="maincss">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">
<span style="color: #337ab7">I</span>nteractive <span style="color: #337ab7">Co</span>ntig-bin
<span style="color: #337ab7">Ve</span>rification and <span style="color: #337ab7">R</span>efinement</a>
</div>
<form class="navbar-form navbar-right form-inline">
<div class="btn-group" ng-controller="ManualColoringCtrl" ng-show="manualColoringEnabled" dropdown>
<button type="button" class="btn btn-default" ng-disabled="!itemsBrushed" ng-style="{'background-color': colors[0]}">Apply color to selection</button>
<button type="button" class="btn btn-default dropdown-toggle" ng-disabled="!itemsBrushed" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu brush-color" role="menu" id="brush-color-menu">
<li ng-repeat="color in colors">
<a href="#" ng-style="{'background-color': color}" ng-click="colorSelection(color)">
<span class="colorpatch"></span>
</a>
</li>
</ul>
</div>
<div class="form-group" ng-controller="NameHighlightCtrl" ng-hide="noHighlightAvailable">
<label class="control-label col-lg-4" for="rowNameHighlight">Highlight</label>
<input type="text" id="rowNameHighlight" class = "col-lg-5 input-sm" ng-model="rowName" ng-change="highlightRow()">
</div>
<div class="form-group" ng-controller="DataIndicatorCtrl">
<progress ng-click="changeScale()" max="1" animate="false">
<bar ng-repeat="bar in counts track by $index"
value="bar.rows / rowCount"
type="{{bar.type}}">
<div ng-hide="(bar.rows / rowCount)< 0.01">
<b style="z-index: 1;position: relative;">{{bar.rows}}</b>
</div>
<div ng-hide="(bar.rows / rowCount)>= 0.01">
<b style="z-index: 1;position: relative; font-size: 0px;">dummy</b>
</div>
<!-- <b ng-hide="(bar.rows / rowCount) < 0.005">{{bar.rows}}</b> -->
</bar>
</progress>
</div>
<div class="form-group" ng-controller="ThemeCtrl">
<label class="control-label">Theme:</label>
<div class="btn-group">
<label class="btn btn-default" ng-model="theme" btn-radio="'light'">Light</label>
<label class="btn btn-default" ng-model="theme" btn-radio="'dark'">Dark</label>
</div>
</div>
</form>
</div>
</nav>
<div id="main" class="container-fluid">
<!-- Top half of the sceen -->
<div id="top" class="row">
<!--<div id="colourmap" class="col-lg-1">
<div class="colourmap" ng-controller="ColourmapCtrl">
</div>
</div>-->
<div id="parcoords" class="col-lg-12">
<div class="parcoords" ng-controller="ParcoordsCtrl">
</div>
</div>
</div>
<!-- Bottom half of the sceen -->
<div id="bottom" class="row" ng-controller="PlotCtrl">
<div id="options" ng-style="sliding">
<ng-include src="'js/templates/options.html'"></ng-include>
</div>
<div class="col-lg-1">
</div>
<!-- Scatterplot -->
<div id="charts" class="col-lg-11" ng-controller="ChartsCtrl">
<div class="row" id="dimRedPlots">
<div id="dimRedPlot" class="tab-pane container-fluid active" ng-class="dimredplotWidth" ng-repeat="analysis in analyses" ng-controller="DimRedPlotCtrl">
</div>
</div>
</div>
</div>
</div>
<script src="app.min.js"></script>
</body>
</html>
/*jslint indent: 2, nomen: true */
/*global angular, _, list */
/*
ICoVeR - Interactive Contig-bin Verification and Refinement
Copyright 2015 Luxembourg Institute of Science and technology <tto@list.lu>.
All rights reserved.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
angular.module('contigBinningApp.controllers')
.controller('DimRedCtrlPCA', function ($scope, $modal, Analytics, R, DimRedPlot, DataSet) {
'use strict';
var d = {
schema: undefined
};
function createGroupTypeRestrictionTest(restriction) {
var groupType = restriction,
test = function (gt) { return gt === groupType; };
if (restriction[0] === '!') {
groupType = restriction.substr(1);
test = function (gt) { return gt !== groupType; };
}
return function (variable) {
return test(variable.group_type);
};
}
function createTypeRestrictionTest(restriction) {
if (restriction === 'schema.numeric') {
return function (variable) {
return R.is.numeric(variable.type);
};
}
if (restriction === 'schema.factor') {
return function (variable) {
return R.is.factor(variable.type);
};
}
throw ('Unsupported type restriction');
}
function updateSelectedVariables(variables) {
if (variables.length === 0) {
$scope.selectionText = "Select variables...";
$scope.selectionTextLong = "No variables selected";
} else {
var text = _.reduce(variables, function (str, variable) {
return str === "" ? variable.name : str + ", " + variable.name;
}, "");
if (text.length > "Select variables...".length) {
$scope.selectionTextLong = text;
text = "Selected " + variables.length + " variables";
}
$scope.selectionText = text;
$scope.selectedVariables = variables;
}
$scope.configurationInvalid = $scope.selectedVariables.length === 0;
}
function setVariables() {
if ($scope.selectedDimRedMethod === undefined || d.schema === undefined) {
$scope.variables = [];
} else {
// FIXME: This is a sloppy implementation as I didn't think this out
// very well. Actually, it should allow for multiple types for
// group restriction.
var restrictions = $scope.selectedDimRedMethod.restrict,
matchesGroupRestriction = createGroupTypeRestrictionTest(restrictions.group_type),
matchesTypeRestriction = createTypeRestrictionTest(restrictions.type);
$scope.variables = _.filter(d.schema, matchesGroupRestriction);
$scope.variables = _.filter($scope.variables, matchesTypeRestriction);
$scope.variables = _.filter($scope.variables, function (variable) {
return variable.analysable;
});
}
}
function setSelectedDimRedMethodByName(methodName){
$scope.dimRedMethods.some(function (method) {
if (method.name === methodName) {
$scope.selectedDimRedMethod = method;
return true;
}
return false;
});
}
$scope.selectionText = "Select variables...";
$scope.selectionTextLong = "No variables selected";
$scope.variables = [];
$scope.dimRedMethods = [];
$scope.configurationInvalid = true;
$scope.selectedDimRedMethod = $scope.dimRedMethods[0];
$scope.selectedVariables = [];
$scope.$watch('selectedDimRedMethod', function (newMethod) {
if (newMethod === undefined) { return; }
setVariables();
});
$scope.$on('DimRedPlot::variablesSelected', function (e, dimRedMethod) {
/*jslint unparam: true*/
$scope.dimRedMethods.some(function (method) {
if (method.name === dimRedMethod) {
$scope.selectedDimRedMethod = method;
return true;
}
return false;
});
setVariables();
var variables = [],
selectedVariables = DimRedPlot.selectedVariables();
_.forEach(selectedVariables, function (variable) {
$scope.variables.some(function (schemaVariable) {
if (schemaVariable.name === variable) {
variables.push(schemaVariable);
return true;
}
return false;
});
});
updateSelectedVariables(variables);
});
function updateCaOnTnf() {
$scope.selectedVariables = _.filter($scope.variables, function (variable) {
return variable.group === "Tetra nucleotide frequencies";
});
updateSelectedVariables($scope.selectedVariables);
if ($scope.selectedVariables.length > 2) {
$scope.reduceDimensionality();
}
}
/*jslint unparam: true */
$scope.$on('DataSet::schemaLoaded', function (e, schema) {
$scope.dataAvailable = true;
d.schema = schema;
setVariables();
});
/*jslint unparam: false */
$scope.$on('DataSet::filtered', updateCaOnTnf);
/*jslint unparam: true */
$scope.$on('Analytics::dimRedMethodsAvailable', function (e, methods) {
// ICoVeR: this version of the controller only supports PCA
$scope.dimRedMethods = _.filter(methods, function (m) { return m.name === "pca"; });
$scope.selectedDimRedMethod = $scope.dimRedMethods[0];
setVariables();
});
/*jslint unparam: false */
$scope.$on('Analytics::dimensionalityReduced', function () {
$scope.configurationInvalid =
$scope.selectedVariables.length === 0
|| $scope.selectedDimRedMethod === undefined;
});
$scope.openSelectionDialog = function (drMethodName) {
if(drMethodName) {
setSelectedDimRedMethodByName(drMethodName);
setVariables();
}
var dialog = $modal.open({
templateUrl: 'js/templates/selectvars.html',
size: 'sm',
controller: 'VariableSelectionCtrl',
resolve: {
variables: function () {
return $scope.variables;
},
selected: function () {
return $scope.selectedVariables;
}
}
});
dialog.result.then(updateSelectedVariables);
};
$scope.reduceDimensionality = function () {
var drMethod = $scope.selectedDimRedMethod.name,
vars = _.pluck($scope.selectedVariables, 'name');
// For quick loading purposes we are making sure here that all variables requested are loaded
DataSet.get(vars, function () { return; });
$scope.configurationInvalid = true;
Analytics.reduce(drMethod, vars);
};
});
......@@ -48,6 +48,10 @@ angular.module('contigBinningApp.controllers')
switchOptions();
};
$scope.removeAnalysis = function (analysisMethodName) {
var index = _.findIndex($scope.analyses, {'method': analysisMethodName});
$scope.analyses.splice(index, 1);
}
// Makes sure that the labels of points are no longer than 80px
function createWrappedLabels(points) {
var testText = d3.select("body").append("div").style("float", "left");
......
<form role="form" class="form-horizontal"
ng-controller="DimRedCtrlPCA"
ng-show="dataAvailable">
<div class="form-group">
<label class="col-sm-3 adjusted-right-padding control-label text-right"
popover="Dimensionality Reduction"
popover-trigger="mouseenter">Dim. Red (PCA):</label>
<div class="col-sm-6 no-left-padding">
<!-- disabled for now, we assume default settings
<button type="button" class="btn btn-default btn-sm">
<span class="fa fa-cog"></span>
</button>
--> <button type="button" class="btn btn-default btn-sm"
ng-click="openSelectionDialog('pca')"
popover={{selectionTextLong}}
popover-trigger="mouseenter">{{selectionText}}</button>
<button type="button" class="btn btn-default btn-sm"
ng-disabled="configurationInvalid"
ng-click="reduceDimensionality()">Reduce</button>
<button type="button" class="btn btn-default btn-sm"
ng-disabled="configurationInvalid"
ng-click="removeAnalysis('pca')">Remove</button>
</div>
</div>
</form>
......@@ -26,6 +26,11 @@
<tab heading="ESCGs">
<ng-include src="'js/templates/escgsctrl.html'"></ng-include>
</tab>
<tab heading="PCA">
<ng-include src="'js/templates/dimredPCActrl.html'"></ng-include>
<!--<ng-include src="'js/templates/colorctrl.html'"></ng-include>-->
<!--<ng-include src="'js/templates/dimreddisplayctrl.html'"></ng-include>-->
</tab>
<button id="SwitchOptions" type="button" class="btn btn-default btn-sm"
ng-click="switchOptions()">
......
......@@ -14,8 +14,8 @@
"gulp-imagemin": "^2.0.0",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.1.6",
"gulp-minify-html": "0.1.5",
"gulp-clean-css": "^2.0.13",
"gulp-htmlmin": "1.3.0",
"gulp-rename": "1.2.2 ",
"gulp-replace": "^0.5.3",
"gulp-sass": "^2.0.0",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment