diff --git a/README.md b/README.md
index 8040efe923edfb5a10cef1305cdcca256550864a..9eba89a874f012c02b7173fce28a796c52b38b59 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,6 @@ The API documentation is available at `<BASE URL>/swagger-ui.html`. A JSON versi
## TODO
* Fix bugs;
-* Add introduction page;
* Add author's view if needed;
* Implement delete methods if needed;
* Externalize configuration (DB parameters, security enabled/disabled, ...);
diff --git a/src/main/resources/static/frontend/app/images/stack/stack.png b/src/main/resources/static/frontend/app/images/stack/stack.png
new file mode 100644
index 0000000000000000000000000000000000000000..d602f948ab4f582c85f95bbccc4215e584a9e3f9
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stack.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackBody.png b/src/main/resources/static/frontend/app/images/stack/stackBody.png
new file mode 100644
index 0000000000000000000000000000000000000000..25a77ca02026a3d184104fc59ade9bd8a52e0666
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackBody.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackCells.png b/src/main/resources/static/frontend/app/images/stack/stackCells.png
new file mode 100644
index 0000000000000000000000000000000000000000..c577e3117d5eb3338b13ebd769d130ad5d2335cf
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackCells.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackChromosomes.png b/src/main/resources/static/frontend/app/images/stack/stackChromosomes.png
new file mode 100644
index 0000000000000000000000000000000000000000..92ea197086140f0eafdfe55a5d54743d5af01006
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackChromosomes.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackMicrocircuits.png b/src/main/resources/static/frontend/app/images/stack/stackMicrocircuits.png
new file mode 100644
index 0000000000000000000000000000000000000000..759aa70b2b1547077770021a718b34e744c7a4a3
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackMicrocircuits.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackProteins.png b/src/main/resources/static/frontend/app/images/stack/stackProteins.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb55e70c904875688a3c036a5c01844a01476491
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackProteins.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackRegions.png b/src/main/resources/static/frontend/app/images/stack/stackRegions.png
new file mode 100644
index 0000000000000000000000000000000000000000..e19a2f41ebd0aef85f4681b19c5d7892d4a3fbb9
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackRegions.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackSynapses.png b/src/main/resources/static/frontend/app/images/stack/stackSynapses.png
new file mode 100644
index 0000000000000000000000000000000000000000..c759a6b08e2da4c29236966046646cb4222a5f2d
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackSynapses.png differ
diff --git a/src/main/resources/static/frontend/app/images/stack/stackWhole.png b/src/main/resources/static/frontend/app/images/stack/stackWhole.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9036309abcc7146175f3cde64344431daabf8a1
Binary files /dev/null and b/src/main/resources/static/frontend/app/images/stack/stackWhole.png differ
diff --git a/src/main/resources/static/frontend/app/index.html b/src/main/resources/static/frontend/app/index.html
index e0062a44634c01abd921b0691ce5e1cf306c2185..45c4bdd4f22a1f047cc21a86064e29ef74416d7f 100644
--- a/src/main/resources/static/frontend/app/index.html
+++ b/src/main/resources/static/frontend/app/index.html
@@ -129,6 +129,7 @@
<script src="bower_components/jquery.ui/ui/jquery.ui.mouse.js"></script>
<script src="bower_components/jquery.ui/ui/jquery.ui.sortable.js"></script>
<script src="bower_components/angular-utf8-base64/angular-utf8-base64.min.js"></script>
+<script src="bower_components/image-map-resizer/js/imageMapResizer.min.js"></script>
<!-- endbower -->
<script type='text/javascript' src='styles/plugins/wijets/wijets.js'></script>
<!-- endbuild -->
diff --git a/src/main/resources/static/frontend/app/scripts/app/login/login.controller.js b/src/main/resources/static/frontend/app/scripts/app/login/login.controller.js
index 970e808c76736e20082bebc69f27fe2e2c6560b3..ec213f7e32c992e56f2a7a87e28906a3c748336e 100644
--- a/src/main/resources/static/frontend/app/scripts/app/login/login.controller.js
+++ b/src/main/resources/static/frontend/app/scripts/app/login/login.controller.js
@@ -10,6 +10,39 @@ angular.module('chuvApp.login').controller('LoginController', ['$scope', '$trans
$scope.password = null;
$scope.error = false;
+ $scope.currentDescription = {title: "Select a description", content: ""};
+ $scope.stackSrc = "stack.png";
+
+ var descriptions = new Array;
+ descriptions['Body'] = "Medical research has identified over five hundred brain diseases, ranging from migraine and addiction to depression and Alzheimer’s. These diseases are usually diagnosed in terms of symptoms and syndromes, i.e. their subjective and objective signs on the body.<br /><br />Such approach, however, makes it very difficult to produce correct diagnoses, or even to select patients for clinical trials. To prevent and cure brain disease, researchers need to understand their underlying causes. This means we need to move beyond isolated studies of individual disorders and investigate brain diseases systematically, identifying key similarities and distinctions, creating new biologically grounded classifications, and understanding the complex disease processes leading from changes at lower levels of brain organisation to clinical symptoms.";
+ descriptions['Whole Brain'] = "Multi-modal sensory physiology and anatomy map how different brain regions come together to shape perception-action and our sense of body ownership, awareness and consciousness, and can help validate human brain models. Whole brain synchrotron scans reveal the vasculature supporting cognition, and provide constraints for models of blood flow and brain metabolism.<br /><br />New techniques of ultra-microscopy can create detailed 3D pictures of whole animal brains, tracing the circuits involved in specific functions. Rapid improvements in imaging technology have made it possible to image the structure of the brain at ever higher resolution, to map the fibres linking different areas, and to elucidate the neuronal circuitry responsible for specific functions. ";
+ descriptions['Brain Regions'] = "Structural and functional MRI yield dimensions of brain regions which can be used to build models. Region-specific cellular architecture and densities constrain the cellular composition of model regions. Receptor, ion channel, signalling and other protein distributions further constrain neurochemical organisation within and across brain regions. Correlations between protein distributions, cognitive circuits and genomic variability point to neural mechanisms of cognition, provide global constraints for detailed brain models and generate data for model validation.";
+ descriptions['Microcircuits'] = "Microcircuits, functional modules that act as elementary processing units bridging single cells to systems and behavior, could provide the link between neurons and global brain function. Microcircuits are designed to serve particular functions. The cellular and molecular composition of microcircuits supports their role in cognition. Single-cell gene expression yields sets of genes that form different types of neurons and glia and determine their morphological and electrical properties. Global brain maps of gene and protein distributions constrain the cellular composition of microcircuit models. Cell geometry and synaptic selection rules constrain local synaptic connectivity in microcircuit models. Electrophysiology, multi-electrode recordings, voltage sensitive dye mapping and optogenetic studies provide data to validate microcircuit models.\n\nReference for the first two sentences: https://mitpress.mit.edu/books/microcircuits";
+ descriptions['Cells'] = "The brain and spinal cord are made up of many cells, including neurons and glial cells. 3D reconstruction of the anatomy of single cells yields the structural geometry needed to establish the morphological properties of different cell types. Correlations between gene expression and the geometric properties of cells constrain the artificial synthesis of cellular morphologies from gene expression patterns, as well as models of morphological plasticity. Single-cell gene expression, combined with general rules for the production and distribution of proteins and for protein interactions, constrain molecularly detailed models of neurons and glia.";
+ descriptions['Synapses'] = "Synapse activity is central to understanding the mechanisms of learning and memory. Physiological, biophysical and imaging studies of synaptic transmission, plasticity and neuromodulation constrain synaptic models. Pair-wise single cell gene expression constrains the repertoire of synaptic models at the synapses between pairs of neurons of known type, making it possible to model synapse activity. The dynamics of single cell gene expression constrain long-term molecular changes in synapses in response to environmental stimuli.";
+ descriptions['Chromosomes'] = "Recognising how a gene defect works through the different levels to produce major disease will be a crucial step in understanding the “bridging laws†linking the physiological properties of neuronal circuitry to specific cognitive and behavioural competencies. Combined with data on the genes expressed in single cells, sequencing technology has made it feasible to sequence whole genomes and to generate 3D maps of gene expression. The state of the chromosome reflects when genes are active or inactive and constrains gene network models. It is likely that the genome constrains the number of genetic cell types in the brain, the size of brain regions, connectivity between brain regions, and total brain size. It may also predict cognitive functions, behavioural traits, epigenetic vulnerability, and brain disorders.";
+ descriptions['Proteins'] = "The number and different types of proteins cells produce, the different parts of the cell where they are located, and their respective life cycles all constrain how many and which proteins can come together in a single cell. The set of proteins, other biochemicals, and ions that protein binds to and reacts with forms the protein’s interactome. Results on protein-protein interactions from biochemical studies, molecular dynamic simulations, and predictive informatics constrain reaction-diffusion models of cells.";
+
+ var stackImages = new Array;
+ stackImages['Body'] = 'stackBody.png';
+ stackImages['Whole Brain'] = 'stackWhole.png';
+ stackImages['Brain Regions'] = 'stackRegions.png';
+ stackImages['Microcircuits'] = 'stackMicrocircuits.png';
+ stackImages['Cells'] = 'stackCells.png';
+ stackImages['Synapses'] = 'stackSynapses.png';
+ stackImages['Chromosomes'] = 'stackChromosomes.png';
+ stackImages['Proteins'] = 'stackProteins.png';
+
+ $scope.explore = function () {
+ $state.go('explore');
+ };
+
+ $scope.showStackInfo = function(s) {
+ $scope.currentDescription.title = s;
+ $scope.currentDescription.content = descriptions[s];
+ $scope.stackSrc = stackImages[s];
+ };
+
$scope.login = function () {
User.authenticate($scope.username, $scope.password)
.then(function(user) {
diff --git a/src/main/resources/static/frontend/app/scripts/app/login/login.html b/src/main/resources/static/frontend/app/scripts/app/login/login.html
index b08b442238b8a862e16570612924c88f0a2c917f..8ebd7fb3ca9c581960b19c293658d95de49af277 100644
--- a/src/main/resources/static/frontend/app/scripts/app/login/login.html
+++ b/src/main/resources/static/frontend/app/scripts/app/login/login.html
@@ -1,25 +1,67 @@
-<div class="container login-form">
+<div class="panelCenter">
<a href="#" class="login-logo"><img masked-image src="images/logo-big.png"></a>
- <div class="row">
- <div class="col-md-12">
- <div class="block-header block-login">
- <h3> </h3>
- <h2>Login to HBP</h2>
+</div>
+
+<div class="panelTop">
+ <p>
+ Today, clinicians and researchers lack the data and tools to understand the causes of brain diseases and to develop new treatments. The Medical Informatics Platform will allow them to study disease mechanisms systematically, by analysing research and clinical data (genes, gene expression, imaging features etc.). The ability to analyse very large and diverse populations will enable them to identify biological signatures (groups of features in the clinical data) associated with specific kinds of lesion and specific defects of cognition and behaviour.
+ <br />
+ <br />
+ Medical Informatics Platform will provide the technical capabilities to federate imaging and other clinical data currently locked in hospital and research archives and databases, while guaranteeing strong protection for sensitive patient information. The Medical Informatics Platform consists of an innovative data management system that will allow researchers to access and analyse large amounts of anonymised clinical data from hospital, research, and pharmaceutical clinical trial databases.
+ <br />
+ <br />
+ The system integrates heterogeneous data formats seamlessly and federates data sources into a harmonized virtual database with a customized interface for navigation and data mining. The patterns discovered in the data ("biological signatures" which uniquely identify diseases) will generate new hypotheses about brain diseases for investigation and will lead to their novel classification, the latter based on biological, physiological and anatomical features in addition to the classical patterns of phenomenology expressed in symptoms, signs and syndromes.
+ </p>
+</div>
+
+<!--
+<div class="panelLeft">
+ <button type="button" class="btn-round" ng-click="explore()" ng-hide="true">
+ <span>
+ <span>{{'login.explore' | translate }}</span>
+ <i class="ti ti-arrow-down"></i>
+ </span>
+ </button>
+</div>
+-->
- <button type="button" ng-click='go()' class="btn-round">
- <span>
- <span>{{'login.title' | translate }}</span>
- <i class="ti ti-arrow-down"></i>
- </span>
- </button>
+<div class="panelCenter">
+ <button type="button" class="btn-round" ng-click="go()">
+ <span>
+ <span class="/run"></span>
+ <span>{{'login.title' | translate }}</span>
+ <i class="ti ti-arrow-down"></i>
+ </span>
+ </button>
+</div>
+
+<br />
+<br />
- <a href="" class="forgot-pass">{{'login.forgot-password' | translate }}</a>
- </form>
- <ul>
- <li>the human brain</li>
- <li>project</li>
- </ul>
- </div>
- </div>
+<div class="panelLeft">
+ <img id="stackImg" src="images/stack/{{stackSrc}}" width="1121" height="944" alt="Stack" usemap="#stackmap">
+ <map name="stackmap">
+ <area shape="poly" coords="414,182,525,246,637,181,637,171,525,107,413,171" ng-click="showStackInfo('Body')" href="javascript:void(0);" />
+ <area shape="poly" coords="415,259,524,324,637,259,637,249,581,217,525,249,468,217,414,249" ng-click="showStackInfo('Whole Brain')" href="javascript:void(0);" />
+ <area shape="poly" coords="414,337,524,401,637,336,637,326,581,294,524,328,469,295,414,326" ng-click="showStackInfo('Brain Regions')" href="javascript:void(0);" />
+ <area shape="poly" coords="412,412,524,478,635,414,635,404,581,371,526,405,469,372,412,404" ng-click="showStackInfo('Microcircuits')" href="javascript:void(0);" />
+ <area shape="poly" coords="412,489,524,555,635,491,635,481,581,448,526,482,469,449,412,481" ng-click="showStackInfo('Cells')" href="javascript:void(0);"/>
+ <area shape="poly" coords="412,566,524,632,635,568,635,558,581,525,526,559,469,526,412,558" ng-click="showStackInfo('Synapses')" href="javascript:void(0);"/>
+ <area shape="poly" coords="413,644,525,710,636,646,636,636,582,603,525,636,470,604,413,636" ng-click="showStackInfo('Chromosomes')" href="javascript:void(0);"/>
+ <area shape="poly" coords="413,723,525,789,636,725,636,715,582,682,524,714,471,682,413,715" ng-click="showStackInfo('Proteins')" href="javascript:void(0);"/>
+ </map>
+</div>
+
+<div class="panelRight">
+ <div id="description">
+ <h2>{{currentDescription.title}}</h2>
+ <p class="stackDescription" ng-bind-html="currentDescription.content"></p>
</div>
</div>
+
+<script>
+// This is a workaround to execute imageMapResize after full loading
+setTimeout(function() {
+ imageMapResize();
+}, 200);
+</script>
diff --git a/src/main/resources/static/frontend/app/styles/css/custom.css b/src/main/resources/static/frontend/app/styles/css/custom.css
index 9acc62516309d6a431ccd40cb4c82571f4a252e0..2235c7b28f2938c240874ce673cbc3b8759bc9a2 100644
--- a/src/main/resources/static/frontend/app/styles/css/custom.css
+++ b/src/main/resources/static/frontend/app/styles/css/custom.css
@@ -1,29 +1,65 @@
-.full-width{
- width: 100%;
-}
-
-.select2-container .select2-choice {
- background-image: none;
-}
-
-.article-modal{
- z-index: 1250;
-}
-
-.mt-xxxl {
- margin-top: 60px;
-}
-
-.toolbar-container {
- z-index: 1000;
-}
-
-h6.copyright {
- background: url("../../images/logo_chuv.png") no-repeat left center;
- text-indent: 70px;
- margin: 0;
-}
-
-.list-graphs li a .ti.ti-custom-bar-chart.graph-plot {
- background: url("../../images/pictos-graph-2.png") -248px 0;
-}
+.full-width{
+ width: 100%;
+}
+
+.select2-container .select2-choice {
+ background-image: none;
+}
+
+.article-modal{
+ z-index: 1250;
+}
+
+.mt-xxxl {
+ margin-top: 60px;
+}
+
+.toolbar-container {
+ z-index: 1000;
+}
+
+h6.copyright {
+ background: url("../../images/logo_chuv.png") no-repeat left center;
+ text-indent: 70px;
+ margin: 0;
+}
+
+.list-graphs li a .ti.ti-custom-bar-chart.graph-plot {
+ background: url("../../images/pictos-graph-2.png") -248px 0;
+}
+
+.panelLeft {
+ width: 60%;
+ float: left;
+ text-align:center;
+ border-radius: 25px;
+ padding: 20px;
+}
+
+.panelRight {
+ width: 40%;
+ float: left;
+ text-align:center;
+ border-radius: 25px;
+ padding: 20px;
+}
+
+.panelCenter {
+ text-align:center;
+}
+
+.panelTop {
+ width: 60%;
+ margin: auto;
+ text-align: justify;
+}
+
+.centeredTitle {
+ text-align:center;
+}
+
+#stackImg {
+ width: 100%;
+ border-radius: 25px;
+ padding: 20px;
+}
diff --git a/src/main/resources/static/frontend/bower.json b/src/main/resources/static/frontend/bower.json
index 7cb6344cdb3c9651f4e252811ba04fdf161b8dce..b2a724ff11d7aa5517c66fbca82f515a78b4398e 100644
--- a/src/main/resources/static/frontend/bower.json
+++ b/src/main/resources/static/frontend/bower.json
@@ -1,71 +1,72 @@
-{
- "name": "chuvFrontend",
- "version": "0.0.0",
- "dependencies": {
- "angular": "1.4.3",
- "bootstrap": "3.2.0",
- "angular-animate": "1.4.3",
- "angular-cookies": "1.4.3",
- "angular-resource": "1.4.3",
- "angular-route": "1.4.3",
- "angular-sanitize": "1.4.3",
- "angular-touch": "1.4.3",
- "angular-translate": "2.7.2",
- "angular-translate-loader-partial": "2.7.2",
- "angular-translate-loader-static-files": "2.7.2",
- "angular-translate-storage-cookie": "2.7.2",
- "angular-ui-router": "0.2.15",
- "angular-ui-tinymce": "0.0.9",
- "highcharts-ng": "0.0.8",
- "highcharts": "https://github.com/highslide-software/highcharts-release/archive/v4.1.7.zip",
- "highmaps": "https://github.com/highslide-software/highmaps-release/archive/v1.1.8.zip",
- "underscore": "1.8.3",
- "angular-i18n": "~1.4.4",
- "angular-dynamic-locale": "0.1.27",
- "font-awesome": "~4.2.0",
- "themify-icons": "~0.1.0",
- "moment": "~2.8.0",
- "angular-moment": "~0.10.2",
- "angular-bootstrap-colorpicker": "3.0.18",
- "angular-gridster": "~0.13.5",
- "javascript-detect-element-resize": "~0.5.3",
- "less": "~2.5.1",
- "gsap": ">1.0",
- "iCheck": "1.0.2",
- "angular-ui-select": "~0.12",
- "gridster": "0.5.6",
- "malihu-custom-scrollbar-plugin": "~3.0.9",
- "angular-bootstrap": "0.12.0",
- "jquery.ui": "~1.10.4",
- "angular-utf8-base64": "~0.0.5"
- },
- "devDependencies": {
- "angular-mocks": "1.4.3"
- },
- "overrides": {
- "gridster": {
- "main": [
- "dist/jquery.gridster.with-extras.min.js",
- "dist/jquery.gridster.min.css"
- ]
- },
- "jquery.ui": {
- "main": [
- "ui/jquery.ui.core.js",
- "ui/jquery.ui.widget.js",
- "ui/jquery.ui.mouse.js",
- "ui/jquery.ui.draggable.js",
- "ui/jquery.ui.sortable.js",
- "ui/jquery.ui.resizable.js"
- ]
- },
- "themify-icons": {
- "main": "themify-icons.css"
- }
- },
- "appPath": "app",
- "moduleName": "chuvApp",
- "resolutions": {
- "angular": "1.4.3"
- }
-}
+{
+ "name": "chuvFrontend",
+ "version": "0.0.0",
+ "dependencies": {
+ "angular": "1.4.3",
+ "bootstrap": "3.2.0",
+ "angular-animate": "1.4.3",
+ "angular-cookies": "1.4.3",
+ "angular-resource": "1.4.3",
+ "angular-route": "1.4.3",
+ "angular-sanitize": "1.4.3",
+ "angular-touch": "1.4.3",
+ "angular-translate": "2.7.2",
+ "angular-translate-loader-partial": "2.7.2",
+ "angular-translate-loader-static-files": "2.7.2",
+ "angular-translate-storage-cookie": "2.7.2",
+ "angular-ui-router": "0.2.15",
+ "angular-ui-tinymce": "0.0.9",
+ "highcharts-ng": "0.0.8",
+ "highcharts": "https://github.com/highslide-software/highcharts-release/archive/v4.1.7.zip",
+ "highmaps": "https://github.com/highslide-software/highmaps-release/archive/v1.1.8.zip",
+ "underscore": "1.8.3",
+ "angular-i18n": "~1.4.4",
+ "angular-dynamic-locale": "0.1.27",
+ "font-awesome": "~4.2.0",
+ "themify-icons": "~0.1.0",
+ "moment": "~2.8.0",
+ "angular-moment": "~0.10.2",
+ "angular-bootstrap-colorpicker": "3.0.18",
+ "angular-gridster": "~0.13.5",
+ "javascript-detect-element-resize": "~0.5.3",
+ "less": "~2.5.1",
+ "gsap": ">1.0",
+ "iCheck": "1.0.2",
+ "angular-ui-select": "~0.12",
+ "gridster": "0.5.6",
+ "malihu-custom-scrollbar-plugin": "~3.0.9",
+ "angular-bootstrap": "0.12.0",
+ "jquery.ui": "~1.10.4",
+ "angular-utf8-base64": "~0.0.5",
+ "image-map-resizer": "1.0.0"
+ },
+ "devDependencies": {
+ "angular-mocks": "1.4.3"
+ },
+ "overrides": {
+ "gridster": {
+ "main": [
+ "dist/jquery.gridster.with-extras.min.js",
+ "dist/jquery.gridster.min.css"
+ ]
+ },
+ "jquery.ui": {
+ "main": [
+ "ui/jquery.ui.core.js",
+ "ui/jquery.ui.widget.js",
+ "ui/jquery.ui.mouse.js",
+ "ui/jquery.ui.draggable.js",
+ "ui/jquery.ui.sortable.js",
+ "ui/jquery.ui.resizable.js"
+ ]
+ },
+ "themify-icons": {
+ "main": "themify-icons.css"
+ }
+ },
+ "appPath": "app",
+ "moduleName": "chuvApp",
+ "resolutions": {
+ "angular": "1.4.3"
+ }
+}