ParaviewWeb server setup for Visualizer webapp

README.md

These instructions are gathered from the different documents available on Paraview and Visualizer websites.

• Server setup
• Launcher setup
• Running

Server setup

The following instructions are for Apache on Ubuntu, similar setup could be done with other servers.

• Install Apache packages

sudo apt-get install apache2-dev apache2 libapr1-dev apache2-utils

• enable the required apache modules

sudo a2enmod vhost_alias
sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel
sudo a2enmod rewrite

• create a new site config file (e.g. mysite.conf) in /etc/apache2/site-available

• configure it with your custom path (where you see /path/to/), here is an example:

<VirtualHost *:80>
  ServerName   localhost
  ServerAdmin  admin@mycompany.com
  DocumentRoot /path/to/data
  ErrorLog /var/log/apache2/error.log
  CustomLog /var/log/apache2/access.log combined
  <Directory "/path/to/data">
      Options Indexes FollowSymLinks
      Order allow,deny
      Allow from all
      AllowOverride None
      Require all granted
  </Directory>

  # Handle launcher forwarding
  # port and endpoint should match launcher.config
  ProxyPass /paraview http://localhost:8080/paraview

  # Handle WebSocket forwarding
  RewriteEngine On

  # This is the path the mapping file Jetty creates
  # path to proxy should match launcher.config
  RewriteMap session-to-port txt:/path/to/proxy.txt

  # This is the rewrite condition. Look for anything with a sessionId= in the query part of the URL and capture the value to use below.
  RewriteCond %{QUERY_STRING} ^sessionId=(.*)&path=(.*)$ [NC]

  # This does the rewrite using the mapping file and the sessionId
  RewriteRule ^/proxy.*$  ws://${session-to-port:%1}/%2  [P]
</VirtualHost>

• make a symlink in site-enabled

cd /etc/apache2/site-enabled
ln -s ../site-available/mysite.conf mysite.conf

• enable the virtual host and restart Apache

sudo a2ensite mysite.conf
sudo service apache2 restart

# Check the Apache log just to make sure
# If you get issue with Apache not properly listening,
# disable the default host
sudo a2dissite 000-default.conf

Launcher setup

In a nutshell, the server will receive requests from the client and act on it. In case of our launcher, we get a POST request that will trigger a new instance of Visualizer to be launched. To get the full detail on how the API works, visit ParaViewWeb documentation.

• Download the Paraview binaries and extract them under your path of choice.

• create a new file launcher.config, same as before, replace occurences of /path/to/ with your custom path. In our case, the client will be sending an extra key data which will point to the filename of a data file to be loaded by default. This extra key is treated on the launcher side by the keyword ${data}:

{
  "configuration": {
    "host" : "localhost",
    "port" : 8080,
    "endpoint": "paraview",
    "content": "/path/to/static/www",
    "proxy_file" : "/path/to/proxy.txt",
    "sessionURL" : "ws://${host}:${port}/ws",
    "timeout" : 300,
    "log_dir" : "/path/to/logs",
    "upload_dir" : "/optional/path/to/upload/dir",
    "fields" : ["file", "host", "port", "updir"]
  },
  "resources" : [ { "host" : "localhost", "port_range" : [9001, 9003] } ],
  "properties" : {
    "python_exec" : "/path/to/paraview/home/bin/pvpython",
  },
  "apps": {
    "visualizer": {
        "cmd": [
            "${python_exec}", "-dr", "/path/to/visualizer/server/pvw-visualizer.py",
            "--port", "${port}", "-f", "--authKey", "${secret}",
            "--data", "/path/to/data", "--load-file", "${data}"
        ],
        "ready_line" : "Starting factory"
    }
  }
}

Note: JSON file do not accept comments line, remove them if you added any first.

It is important that the port, host and /path/to/proxy.txt match between the server config and the launcher. Feel free to add extra-options, make sure they are sent by the web client from dist/index.html when connecting to the server:

	// grab the parameter from the URL
	function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };
	
	Visualizer.connect({
	    application: 'visualizer',
	    data: getUrlParameter('data') + '.vti',
	    extra_param_1: 'extra_value_1',
	    [...]
	});

Running

• Finally start the server

export PV_HOME=/path/to/paraview
$PV_HOME/bin/pvpython $PV_HOME/lib/python2.7/site-packages/vtk/web/launcher.py /path/to/launcher.config

• Navigate with your web browser to host:port, it should start a new instance of Visualizer. To load data at startup, simply pass it as parameter in your query, e.g.:

http://localhost:8080/?data=my_data

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <link rel="icon" type="image/png" href="favicon-32x32.png">
    <title>Web Viewer</title>
</head>
<body>
    <div class='content'></div>
    <script src="Visualizer.js"></script>
    <script>
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };
    Visualizer.connect({
        application: 'visualizer',
        data: getUrlParameter('data') + '.vti'
    });
    Visualizer.autoStopServer(10);
    </script>
</body>
</html>

launcher.config

{
  "configuration": {
    "host" : "localhost",
    "port" : 8080,
    "endpoint": "paraview",
    "content": "/path/to/static/www",
    "proxy_file" : "/path/to/proxy.txt",
    "sessionURL" : "ws://${host}:${port}/ws",
    "timeout" : 300,
    "log_dir" : "/path/to/logs",
    "upload_dir" : "/optional/path/to/upload/dir",
    "fields" : ["file", "host", "port", "updir"]
  },
  "resources" : [ { "host" : "localhost", "port_range" : [9001, 9003] } ],
  "properties" : {
    "python_exec" : "/path/to/paraview/home/bin/pvpython",
  },
  "apps": {
    "visualizer": {
        "cmd": [
            "${python_exec}", "-dr", "/path/to/visualizer/server/pvw-visualizer.py",
            "--port", "${port}", "-f", "--authKey", "${secret}",
            "--data", "/path/to/data", "--load-file", "${data}"
        ],
        "ready_line" : "Starting factory"
    }
  }
}

mysite.conf

# example file
# to be copied under the apache site-available
# and symlinked in apache site-enabled
<VirtualHost *:80>
  ServerName   localhost
  ServerAdmin  admin@mycompany.com
  DocumentRoot /path/to/data
  ErrorLog /var/log/apache2/error.log
  CustomLog /var/log/apache2/access.log combined
  <Directory "/path/to/data">
      Options Indexes FollowSymLinks
      Order allow,deny
      Allow from all
      AllowOverride None
      Require all granted
  </Directory>

  # Handle launcher forwarding
  # port and endpoint should match launcher.config
  ProxyPass /paraview http://localhost:8080/paraview

  # Handle WebSocket forwarding
  RewriteEngine On

  # This is the path the mapping file Jetty creates
  # path to proxy should match launcher.config
  RewriteMap session-to-port txt:/path/to/proxy.txt

  # This is the rewrite condition. Look for anything with a sessionId= in the query part of the URL and capture the value to use below.
  RewriteCond %{QUERY_STRING} ^sessionId=(.*)&path=(.*)$ [NC]

  # This does the rewrite using the mapping file and the sessionId
  RewriteRule ^/proxy.*$  ws://${session-to-port:%1}/%2  [P]
</VirtualHost>

Hi Debopam,

glad you were able to fix all the issues (relative path to data dir, use of backward slash \ for Windows, etc.). I am giving the link to your gist as it will certainly be useful to other people.
Link to Depobam gist

thanks!
cheers