Skip to content

GitLab

B
BrainBox
Commit 7c998ef9 authored by r03ert0's avatar r03ert0
Browse files
Options

performance improvements

parent f5cc3a87
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 76 deletions
app.js
View file @ 7c998ef9
......@@ -10,6 +10,7 @@
const fs = require('fs');
const express = require('express');
var compression = require('compression');
const path = require('path');
const favicon = require('serve-favicon');
const logger = require('morgan');
......@@ -68,6 +69,9 @@ app.use(function(req, res, next) {
next();
});
// enable compression
app.use(compression());
app.engine('mustache', mustacheExpress());
app.set('views', path.join(dirname, 'templates'));
app.set('view engine', 'mustache');
......
package-lock.json
View file @ 7c998ef9
......@@ -1793,6 +1793,55 @@
"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
"dev": true
},
"compressible": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
"integrity": "sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==",
"requires": {
"mime-db": ">= 1.40.0 < 2"
},
"dependencies": {
"mime-db": {
"version": "1.42.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz",
"integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ=="
}
}
},
"compression": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
"integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
"requires": {
"accepts": "~1.3.5",
"bytes": "3.0.0",
"compressible": "~2.0.16",
"debug": "2.6.9",
"on-headers": "~1.0.2",
"safe-buffer": "5.1.2",
"vary": "~1.1.2"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
},
"on-headers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
}
}
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
......
package.json
View file @ 7c998ef9
......@@ -4,11 +4,16 @@
"private": true,
"scripts": {
"start": "PORT=3001 node ./bin/www",
"build-atlasmaker": "webpack --config webpack.atlasmaker.config.js && cp view/atlasmaker/dist/atlasmaker.js public/lib/atlasmaker.js",
"build-atlasmaker-tools": "webpack --config webpack.atlasmaker-tools.config.js && cp -r view/atlasmaker/dist/atlasmaker-tools public/lib/",
"build-brainbox": "webpack --config webpack.brainbox.config.js && cp view/brainbox/dist/brainbox.js public/lib/brainbox.js",
"build-pages": "webpack --config webpack.pages.config.js && cp view/brainbox/dist/*-page.js public/js/",
"build-atlasmaker": "webpack --mode production --config webpack.atlasmaker.config.js && cp view/atlasmaker/dist/atlasmaker.js public/lib/atlasmaker.js",
"build-atlasmaker-tools": "webpack --mode production --config webpack.atlasmaker-tools.config.js && cp -r view/atlasmaker/dist/atlasmaker-tools public/lib/",
"build-brainbox": "webpack --mode production --config webpack.brainbox.config.js && cp view/brainbox/dist/brainbox.js public/lib/brainbox.js",
"build-pages": "webpack --mode production --config webpack.pages.config.js && cp view/brainbox/dist/*-page.js public/js/",
"build": "npm run build-atlasmaker && npm run build-atlasmaker-tools && npm run build-brainbox && npm run build-pages",
"dev-atlasmaker": "webpack --mode development --config webpack.atlasmaker.config.js && cp view/atlasmaker/dist/atlasmaker.js public/lib/atlasmaker.js",
"dev-atlasmaker-tools": "webpack --mode development --config webpack.atlasmaker-tools.config.js && cp -r view/atlasmaker/dist/atlasmaker-tools public/lib/",
"dev-brainbox": "webpack --mode development --config webpack.brainbox.config.js && cp view/brainbox/dist/brainbox.js public/lib/brainbox.js",
"dev-pages": "webpack --mode development --config webpack.pages.config.js && cp view/brainbox/dist/*-page.js public/js/",
"dev": "npm run dev-atlasmaker && npm run dev-atlasmaker-tools && npm run dev-brainbox && npm run dev-pages",
"mocha-test": "mocha ./test/runner.js test/unit/*.js test/integration/*.js",
"lint": "eslint .",
"test": "docker exec brainbox_web_1 /bin/bash -c 'cd /brainbox && npm run mocha-test'"
......@@ -16,6 +21,7 @@
"dependencies": {
"async": "^2.0.1",
"body-parser": "~1.18.2",
"compression": "^1.7.4",
"cookie-parser": "~1.4.3",
"crypto": "1.0.1",
"dateformat": "^3.0.3",
......
templates/mri.mustache
View file @ 7c998ef9
......@@ -3,10 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="description" content="open science neuroimaging collaboration neuroscience MRI">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />
<title>{{title}}</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css">
{{! <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css"> }}
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');
</style>
<link rel="preconnect" href="https://www.google-analytics.com">
</head>
<body>
......@@ -30,7 +34,7 @@
<!-- Small left-top logo -->
<div style="display:inline-block;margin:10px">
<a href="/" style="text-decoration:none">
<img style="height:56px;vertical-align:middle" src="/img/brainbox-logo-small_noFont.svg"/>
<img style="height:56px;vertical-align:middle" src="/img/brainbox-logo-small_noFont.svg" alt="brainbox logo"/>
</a><span style="font-family: Roboto, sans-serif; font-size: 36px; font-weight:100;vertical-align:middle" id="fontLogo">
<a href="/" style="font-family: Roboto, sans-serif; font-size: 36px; font-weight:100; text-decoration:none">BrainBox</a>
</span>
......@@ -81,8 +85,8 @@
</table>
<div style="text-align:right">
<span id="annotationMessage"></span>
<img id="addAnnotation" class="button" style="width:19px; height:19px" src="/img/plus-square.svg"/>
<img id="removeAnnotation" class="button" style="width:19px; height:19px" src="/img/minus-square.svg"/>
<img id="addAnnotation" title="add annotation" alt="add annotation" class="button" style="width:19px; height:19px" src="/img/plus-square.svg"/>
<img id="removeAnnotation" title="remove annotation" alt="remove annotation" class="button" style="width:19px; height:19px" src="/img/minus-square.svg"/>
</div>
<b>Text Annotations</b><br/>
......@@ -100,8 +104,8 @@
</table>
<div style="text-align:right">
<span id="textAnnotationMessage"></span>
<img id="addTextAnnotation" class="button" style="width:19px; height:19px" src="/img/plus-square.svg"/>
<img id="removeTextAnnotation" class="button" style="width:19px; height:19px" src="/img/minus-square.svg"/>
<img id="addTextAnnotation" title="add text annotation" alt="add text annotation" class="button" style="width:19px; height:19px" src="/img/plus-square.svg"/>
<img id="removeTextAnnotation" title="remove text annotation" alt="remove text annotation" class="button" style="width:19px; height:19px" src="/img/minus-square.svg"/>
</div>
</div>
......@@ -131,7 +135,7 @@
<div style="flex:0 0 100px;background-color:#000">
<p style="width:100%;font-size:small;text-align:center">
<a target="_blank" href="http://neuroanatomy.github.io">
<img src="img/naat-bw.svg" style="width:28px;height:28px;margin-right:4px;display:inline-block;vertical-align:middle"/></a>
<img title="naat logo" alt="naat logo" src="img/naat-bw.svg" style="width:28px;height:28px;margin-right:4px;display:inline-block;vertical-align:middle"/></a>
<a target="_blank" href="http://neuroanatomy.github.io" class="linkNoULine">
groupe de neuroanatomie appliquée et théorique
</a>
......
view/atlasmaker/src/html/toolsFull.html
View file @ 7c998ef9
<div id='tools-side' style='display:block'>
<div id='tools-minimized'>
<div>
<img style='width:28px;position:absolute;top:10px;left:10px' src='./img/bars.svg' />
<img alt="menu" style='width:28px;position:absolute;top:10px;left:10px' src='./img/bars.svg' />
</div>
</div>
......@@ -10,10 +10,10 @@
<!-- tools hide/show, display left/right -->
<div id='headerBlock' style='flex:0 1 28px;background:#333'>
<div style='display:flex'>
<div style='flex:0 0 28px'><div id='display-minimize' title='Minimize toolbar' class='a push noBorder'><img class='icon' src='./img/times-circle.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-minimize' title='Minimize toolbar' class='a push noBorder'><img class='icon' alt="close" src='./img/times-circle.svg' /></div></div>
<div style='flex:1 1 auto'></div>
<div style='flex:0 0 28px'><div id='display-left' title='Display to the left' class='a push noBorder'><img class='icon' src='./img/caret-square-o-left.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-right' title='Display to the right' class='a push noBorder'><img class='icon' src='./img/caret-square-o-right.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-left' title='Display to the left' class='a push noBorder'><img class='icon' alt="left" src='./img/caret-square-o-left.svg' /></div></div>
<div style='flex:0 0 28px'><div id='display-right' title='Display to the right' class='a push noBorder'><img class='icon' alt="right" src='./img/caret-square-o-right.svg' /></div></div>
</div>
</div>
......@@ -48,30 +48,30 @@
<div style='flex:1'><div title='axi' class='a'>Axi</div></div>
</div>
<div style='display:flex'>
<div style='flex:1'><div id='fullscreen' title='Full screen' class='a toggle'><img class='icon' src='./img/fullscreen.svg' /></div></div>
<div style='flex:1'><div id='3drender' title='3D render' class='a push'><img class='icon' src='./img/3drender.svg' /></div></div>
<div style='flex:1'><div id='link' title='Link' class='a push'><img class='icon' src='./img/link.svg' /></div></div>
<div style='flex:1'><div id='bubble' title='Chat' class='a toggle pressed'><img class='icon' src='./img/chat.svg' /></div></div>
<div style='flex:1'><div id='upload' title='Upload' class='a push'><img class='icon' src='./img/upload.svg' /></div></div>
<div style='flex:1'><div id='download' title='Download' class='a push'><img class='icon' src='./img/download.svg' /></div></div>
<div style='flex:1'><div id='precise' title='Precise cursor' class='a toggle'><img class='icon' src='./img/preciseCursor.svg' /></div></div>
<div style='flex:1'><div id='fullscreen' title='Full screen' class='a toggle'><img class='icon' alt="fullscreen" src='./img/fullscreen.svg' /></div></div>
<div style='flex:1'><div id='3drender' title='3D render' class='a push'><img class='icon' alt="3d render" src='./img/3drender.svg' /></div></div>
<div style='flex:1'><div id='link' title='Link' class='a push'><img class='icon' alt="link" src='./img/link.svg' /></div></div>
<div style='flex:1'><div id='bubble' title='Chat' class='a toggle pressed'><img class='icon' alt="chat" src='./img/chat.svg' /></div></div>
<div style='flex:1'><div id='upload' title='Upload' class='a push'><img class='icon' alt="upload" src='./img/upload.svg' /></div></div>
<div style='flex:1'><div id='download' title='Download' class='a push'><img class='icon' alt="download" src='./img/download.svg' /></div></div>
<div style='flex:1'><div id='precise' title='Precise cursor' class='a toggle'><img class='icon' alt="precise cursor" src='./img/preciseCursor.svg' /></div></div>
</div>
</div>
<div style='flex:1 0 250px;width:50px'>
<div id='paintTool' style='display:flex' class='chose'>
<div style='flex:1'><div title='Show' class='a pressed'><img class='icon' src='./img/show.svg' /></div></div>
<div style='flex:1'><div title='Paint' class='a'><img class='icon' src='./img/paint.svg' /></div></div>
<div style='flex:1'><div title='Erase' class='a'><img class='icon' src='./img/erase.svg' /></div></div>
<div style='flex:1'><div title='Measure' class='a'><img class='icon' src='./img/ruler.svg' /></div></div>
<div style='flex:1'><div title='Adjust' class='a'><img class='icon' src='./img/adjust.svg' /></div></div>
<div style='flex:1'><div title='Eyedrop' class='a'><img class='icon' src='./img/eyedropper.svg' /></div></div>
<div style='flex:1'><div title='Show' class='a pressed'><img class='icon' alt="show" src='./img/show.svg' /></div></div>
<div style='flex:1'><div title='Paint' class='a'><img class='icon' alt="paint" src='./img/paint.svg' /></div></div>
<div style='flex:1'><div title='Erase' class='a'><img class='icon' alt="erase" src='./img/erase.svg' /></div></div>
<div style='flex:1'><div title='Measure' class='a'><img class='icon' alt="ruler" src='./img/ruler.svg' /></div></div>
<div style='flex:1'><div title='Adjust' class='a'><img class='icon' alt="adjust" src='./img/adjust.svg' /></div></div>
<div style='flex:1'><div title='Eyedrop' class='a'><img class='icon' alt="eyedropper" src='./img/eyedropper.svg' /></div></div>
</div>
<div style='display:flex'>
<div style='flex:1'><div id='color' title='Color' style='height:24px;background:#f00' class='a push'></div></div>
<div style='flex:1'><div id='fill' class='a toggle'><img class='icon' src='./img/fill.svg' /></div></div>
<div style='flex:1'><div id='undo' title='Undo' class='a push'><img class='icon' src='./img/undo.svg' /></div></div>
<div style='flex:1'><div id='save' title='Save' class='a push'><img class='icon' src='./img/floppy.svg' /></div></div>
<div style='flex:1'><div id='fill' class='a toggle'><img class='icon' alt="fill" src='./img/fill.svg' /></div></div>
<div style='flex:1'><div id='undo' title='Undo' class='a push'><img class='icon' alt="undo" src='./img/undo.svg' /></div></div>
<div style='flex:1'><div id='save' title='Save' class='a push'><img class='icon' alt="save" src='./img/floppy.svg' /></div></div>
</div>
</div>
......@@ -112,7 +112,7 @@
<!-- Labels -->
<div id='labelset'>
<div style='z-index:23;text-align:right'>
<img id='labels-close' class='button' src='./img/times-circle.svg'/>
<img id='labels-close' class='button' alt="close" src='./img/times-circle.svg'/>
</div>
<ul style='padding-left:1rem'>
......
view/brainbox/src/pages/mri-page.js
View file @ 7c998ef9
......@@ -23,19 +23,23 @@ import multiple from '../tools/multiple';
var mriInfoOrig;
var textAnnotationsArray = [];
var version=1;
var volAnnParam, textAnnParam;
var volAnnParam;
var textAnnParam;
// Prevent zoom on double tap
$('body').on('touchstart', function preventZoom(e) {
var t2 = e.timeStamp,
t1 = $(this).data('lastTouch') || t2,
dt = t2 - t1,
fingers = e.originalEvent.touches.length;
const t2 = e.timeStamp;
const t1 = $(this).data('lastTouch') || t2;
const dt = t2 - t1;
const fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
if (!dt || dt > 500 || fingers > 1) {
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
$(this).trigger('click')
.trigger('click');
});
if( $.isEmptyObject(mriInfo)) {
......@@ -56,8 +60,16 @@ if( $.isEmptyObject(mriInfo)) {
// Load data
BrainBox.initBrainBox()
.then(function () { console.log("BrainBox initialised"); return BrainBox.loadLabelsets(); })
.then(function () { console.log("Label sets loaded"); return BrainBox.configureBrainBox(params); })
.then(function () {
console.log("BrainBox initialised");
return BrainBox.loadLabelsets();
})
.then(function () {
console.log("Label sets loaded");
return BrainBox.configureBrainBox(params);
})
.then(function () {
console.log("BrainBox configured");
// backup the original MRI info
......
webpack.atlasmaker-tools.config.js
View file @ 7c998ef9
......@@ -12,36 +12,41 @@ for(const item of list) {
console.log(entries);
module.exports = {
mode: 'development',
entry: entries,
devtool: 'eval-source-map',
plugins: [new CleanWebpackPlugin(['dist'])],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'view/atlasmaker/dist/atlasmaker-tools')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(svg)$/,
use: {
loader: 'url-loader',
options: {
noquotes: true
}
}
},
{
test: /\.(html)$/,
use: ['html-loader']
}
mode: 'production',
entry: entries,
devtool: 'eval-source-map',
plugins: [new CleanWebpackPlugin(['dist'])],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'view/atlasmaker/dist/atlasmaker-tools')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
},
{
test: /\.(svg)$/,
use: {
loader: 'url-loader',
options: {
noquotes: true
}
}
},
{
test: /\.(html)$/,
use: ['html-loader']
}
]
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
webpack.atlasmaker.config.js
View file @ 7c998ef9
......@@ -3,7 +3,6 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
atlasmaker: './view/atlasmaker/src/atlasmaker.js'
},
......@@ -37,5 +36,10 @@ module.exports = {
use: ['html-loader']
}
]
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
webpack.brainbox.config.js
View file @ 7c998ef9
......@@ -3,7 +3,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
brainbox: './view/brainbox/src/brainbox.js'
},
......@@ -34,5 +33,10 @@ module.exports = {
use: ['file-loader']
}
]
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
webpack.pages.config.js
View file @ 7c998ef9
......@@ -4,7 +4,6 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
// const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
mode: 'development',
entry: {
"index-page": './view/brainbox/src/pages/index-page.js',
"mri-page": './view/brainbox/src/pages/mri-page.js',
......@@ -38,5 +37,10 @@ module.exports = {
use: ['file-loader']
}
]
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
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