Skip to content

Commit

Permalink
Add VTKWeb Backend
Browse files Browse the repository at this point in the history 
* Printing variables works using cdms2 and all plots work.

* Fix errors with new eslint.
  • Loading branch information
@danlipsa @chaosphere2112
danlipsa authored and chaosphere2112 committed Oct 13, 2016
1 parent a1e14a9 commit 43394e8
Show file tree
Hide file tree
Showing 16 changed files with 710 additions and 172 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@ module.exports = {
'no-param-reassign': [2, { props: false }],
'no-unused-vars': [2, { args: 'none' }],
'import/no-extraneous-dependencies': 0,
'import/prefer-default-export': 0,
},
};
19 changes: 3 additions & 16 deletions demo/demo.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,5 @@
html,body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
.plot {
height: 600px;
width: 800px;
}

#vcs-plot-1 {
height: 100%;
width: 48%;
float: left;
}

#vcs-plot-2 {
height: 100%;
width: 48%;
float: right;
}
198 changes: 150 additions & 48 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,101 @@
$(function () {
var sessionPromise;

/**
* Returns a promise object to the variables stored in a file
*/
function get_variables(fileName) {
// get the promise for the data object for the variables
return sessionPromise.then(function (session) {
return session.files();
}).then(function (files) {
// get the file object for a netcdf variable
var nc = files.filter(function (f) {
var re = new RegExp(fileName);
return f.fileName.match(re);
})[0];

if (!nc) {
console.log('No netcdf variables found');
return;
}

// get a list of variables
return nc.variables();
});
}

/**
* Prints the result from get_variables to the console.
* @param {string? filename An absolute path to a netcdf file
*/
function print_variables (filename) {
var fileVars = get_variables(filename);
var vars, axes, shape, axisList, lonLat, logString, boundsString,
gridType;
var v, i, al;
fileVars.then(
function (varsAxes) {
// variables
vars = varsAxes[0];
for (v in vars) {
// shape of the variable
shape = '(' + vars[v].shape[0];
for (i = 1; i < vars[v].shape.length; ++i) {
shape += (',' + vars[v].shape[i]);
}
shape += ')';
// axes for the variable
al = vars[v].axisList;
axisList = '(' + al[0];
for (i = 1; i < al.length; ++i) {
axisList += (', ' + al[i]);
}
axisList += ')';
// bounds are received for longitude and latitude
boundsString = '';
if (vars[v].bounds) {
boundsString += ': (' + vars[v].bounds[0] + ', ' +
vars[v].bounds[1] + ')';
}
// longitude, latitude for the variable
// these are different than the axes for the curvilinear or
// generic grids
lonLat = null;
if (vars[v].lonLat) {
lonLat = '(' + vars[v].lonLat[0] + ', ' +
vars[v].lonLat[1] + ')';
}
logString = v + shape + '[' + vars[v].name + ', ' +
vars[v].units + boundsString + ']' + ': ' + axisList;
if (lonLat) {
logString += (', ' + lonLat);
}
if (vars[v].gridType) {
logString += (', ' + vars[v].gridType);
}
console.log(logString);
}
// all axes in the file
axes = varsAxes[1];
for (v in axes) {
shape = '(' + axes[v].shape[0];
for (i = 1; i < axes[v].shape.length; ++i) {
shape += (',' + axes[v].shape[i]);
}
shape += ')';
console.log(v + shape + '[' + axes[v].name + ', ' +
axes[v].units + ': (' +
axes[v].data[0] + ', ' +
axes[v].data[axes[v].data.length - 1] + ')]');
}
},
function (reason) {
console.log(reason);
}
);
}

$(function () {
// Ordinarily this would be a URL string of a rest
// interface for generating a new server side connection.
// Here we short circuit that code to generate a simulated
Expand All @@ -7,75 +104,44 @@ $(function () {
var url = 'ws://localhost:9000/ws';

// create the session
var sessionPromise = vcs.createSession(url);
sessionPromise = vcs.createSession(url);

sessionPromise.catch(() => {
console.log('Could not connect to ' + url);
});

// create the canvas
var canvasPromise = sessionPromise.then(function (session) {
return vcs.init(document.getElementById('vcs-plot-1'), session);
});

// create the graphics method
var gmPromise = canvasPromise.then(function (canvas) {
// create a graphics method
return canvas.create('isofill', '¯\_(ツ)_/¯')
});

// get the data object for the clt variable
var cltPromise = sessionPromise.then(function (session) {
return session.files();
}).then(function (files) {
// print the list of files
console.log(files.map((f) => f.fileName));

// get the file object for a netcdf variable
var nc = files.filter(function (f) { return f.fileName.match(/\.nc$/); })[0];

if (!nc) {
console.log('No netcdf variables found');
return;
}

// get a list of variables
return nc.variables();
}).then(function (variables) {
console.log(variables);
return session.init(document.getElementById('vcs-isofill'));
});

// generate the plot when all of the promises resolve
Promise.all([
canvasPromise, gmPromise, cltPromise
]).then(function (arg) {
var canvas = arg[0];
var gm = arg[1];
var clt = arg[2];

canvas.plot(clt, gm, 'default', 'vtkweb');
canvasPromise.then(function (canvas) {
var dataSpec = {
file: 'coads_climatology.nc',
variable: 'SST',
};
canvas.plot(dataSpec, 'no_legend', 'isofill', 'robinson', 'server');
});

// generate another plot using client side rendering
// we don't have an api for getting data yet, so we'll
// just use an ajax request to data.kitware.com
var cltPromise = $.ajax('https://data.kitware.com/api/v1/file/576aa3c08d777f1ecd6701ae/download');
var latPromise = $.ajax('https://data.kitware.com/api/v1/item/576aa3c08d777f1ecd6701b0/download');
var lonPromise = $.ajax('https://data.kitware.com/api/v1/item/576aa3c08d777f1ecd6701b9/download');
var canvasPromise2 = sessionPromise.then(function (session) {
return vcs.init(document.getElementById('vcs-plot-2'), session);
return session.init(document.getElementById('plotly-isofill'));
});


// This is all very rough, likely much of this should be wrapped inside the api
Promise.all([
canvasPromise2, gmPromise, cltPromise, latPromise, lonPromise
canvasPromise2, cltPromise, latPromise, lonPromise
]).then(function (arg) {
var canvas = arg[0];
var gm = arg[1];
var clt = arg[2];
var lat = arg[3];
var lon = arg[4];
var clt = arg[1];
var lat = arg[2];
var lon = arg[3];
var timestep = 0;

var data = {
Expand All @@ -85,11 +151,47 @@ $(function () {

function draw() {
data.z = ndarray(clt.data, clt.shape).pick(timestep, null, null);
canvas.plot(data, gm, 'default', 'webgl');
canvas.plot(data, 'default', 'isofill', 'quick', 'client');
timestep = (timestep + 1) % clt.shape[0];
}

// call again for the next time step
draw();
});

var canvasPromise3 = sessionPromise.then(function (session) {
return session.init(document.getElementById('vcs-vector'));
});

// generate the plot when all of the promises resolve
canvasPromise3.then(function (canvas) {
var dataSpec = {
file: 'coads_climatology.nc',
variable: ['UWND', 'VWND'],
};
canvas.plot(dataSpec, 'default', 'vector', 'default', 'server');
});

var canvasPromise4 = sessionPromise.then(function (session) {
return session.init(document.getElementById('vcs-vector-subset'));
});

// generate the plot when all of the promises resolve
canvasPromise4.then(function (canvas) {
var dataSpec = {
file: 'coads_climatology.nc',
variable: ['UWND', 'VWND'],
subset: {'COADSX': [60, 180], 'COADSY': [0, 90]}
};
canvas.plot(dataSpec, 'default', 'vector', 'default', 'server');
});

$(window).on('beforeunload', function() {
canvasPromise.then((canvas) => canvas.close());
canvasPromise2.then((canvas) => canvas.close());
canvasPromise3.then((canvas) => canvas.close());
canvasPromise4.then((canvas) => canvas.close());
return 'Your own message goes here...';
});
});

22 changes: 18 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,28 @@

<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8">
<link rel="stylesheet" type="text/css" href="demo.css">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>

<body>
<div class="vcs-plot" id="vcs-plot-1"></div>
<div class="vcs-plot" id="vcs-plot-2"></div>
<table>
<tr>
<td><div class="plot" id="vcs-isofill"></div></td>
<td><div class="plot" id="plotly-isofill"></div></td>
</tr>
<tr>
<td><div class="plot" id="vcs-vector"></div></td>
<td><div class="plot" id="vcs-vector-subset"></div></td>
</tr>
</table>
<script type="text/javascript" src="../dist/vcs.js"></script>
<script type="text/javascript" src="demo.js"></script>

<ul>
<!-- Need a 3D variable for this: <li><a onclick="cdat.create_plot('http://test.opendap.org/opendap/data/nc/coads_climatology.nc', 'AIRT', '3d_scalar', 'default', 'default')" href="javascript:void(0)">Volume example</a></li> -->
<li><a onclick="print_variables('coads_climatology.nc')" href="javascript:void(0)">Rectilinear grid variables example</a></li>
<li><a onclick="print_variables('clt.nc')" href="javascript:void(0)">clt.nc variables example</a></li>
<li><a onclick="print_variables('sampleCurveGrid4.nc')" href="javascript:void(0)">Curvilinear grid variable example</a></li>
<li><a onclick="print_variables('sampleGenGrid3.nc')" href="javascript:void(0)">Generic grid variable example</a></li>
</body>

</html>
Loading

0 comments on commit 43394e8

Please sign in to comment.