Digital aCC Website for visualizing protein interaction over aCC volumes.
- Use ES6 dependency using modern toolsets such as Webpack, NPM. Following this Tutorial
$ npm init
$ npm install vtk.js kw-web-suite --save-dev- Create
webpack.config.jsfile containing the following script.
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'digitalacc.js',
},
module: {
rules: [
{ test: entry, loader: "expose-loader?MyWebApp" },
{ test: /\.html$/, loader: 'html-loader' },
].concat(vtkRules),
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};- And extend
package.jsonfile with the following set of scripts.
{
[...],
"scripts": {
"build": "webpack",
"build:release": "webpack -p",
"start": "webpack-dev-server --content-base ./dist",
"commit": "git cz",
"semantic-release": "semantic-release pre && npm publish && semantic-release post"
}
}
- Install dependencies
$ npm install vis --save-dev- Build the application
$ npm run build- Start a dev WebServer
$ npm start- dist
- css -> contain style format
- data -> contain all kinds of volume data
- template_parts -> the template volume
- volume -> data volumes
- js -> contain local copy of javascript libraries
- volumelist.txt -> contain list of availabel neuron volume and its number of timesteps.
- src
- index.js -> main javascript code.
- isoviewer.js -> Iso surface viewer code using VTK.js.
- volumeviewer.js -> Volume rendering code using VTK.js.
- proteinnetwork.js -> Protein network code using vis.js.
- template.js -> Neuron template code using three.js.