digitalacc

Digital aCC Website for visualizing protein interaction over aCC volumes.

Installation for dev WebServer

1. Use ES6 dependency using modern toolsets such as Webpack, NPM. Following this Tutorial

$ npm init
$ npm install vtk.js kw-web-suite --save-dev

2. Create webpack.config.js file 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,
    ],
  },
};

3. And extend package.json file 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"
  }
}

4. Install dependencies

$ npm install vis --save-dev

5. Build the application

$ npm run build

6. Start a dev WebServer

$ npm start

Folder Hierarchy

• 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.