|
1 | 1 | var sessionPromise; |
2 | 2 |
|
3 | | -$(function () { |
4 | | - // Ordinarily this would be a URL string of a rest |
5 | | - // interface for generating a new server side connection. |
6 | | - // Here we short circuit that code to generate a simulated |
7 | | - // session connecting to pregenerated files through |
8 | | - // Girder's rest interface. |
9 | | - var url = 'ws://localhost:9000/ws'; |
| 3 | +(function () { |
10 | 4 |
|
11 | 5 | var variables = { |
12 | | - "clt": { |
13 | | - "id": "clt", |
14 | | - "derivation": |
15 | | - [ |
16 | | - {"type": "file", "uri": "clt.nc"}, |
17 | | - {"parents": [0], "operation": {"type": "get", "id": "clt"}, "type": "variable"}, |
18 | | - {"parents": [1], "operation": {"squeeze": 0, "type": "subset", "axes": {"longitude": [-180, 180], "latitude": [-90, 90]}}, "type": "variable"} |
19 | | - ] |
20 | | - }, |
| 6 | + "clt": {"id": "clt", "derivation": [{"type": "file", "uri": "clt.nc"}, {"parents": [0], "operation": {"type": "get", "id": "clt"}, "type": "variable"}]}, |
21 | 7 | "u": {"id": "u", "derivation": [{"type": "file", "uri": "clt.nc"}, {"parents": [0], "operation": {"type": "get", "id": "u"}, "type": "variable"}]}, |
22 | 8 | "v": {"id": "v", "derivation": [{"type": "file", "uri": "clt.nc"}, {"parents": [0], "operation": {"type": "get", "id": "v"}, "type": "variable"}]} |
23 | 9 | } |
24 | 10 |
|
25 | | - var boxfill = {"fillareaopacity": [], "datawc_timeunits": "days since 2000", "projection": "linear", "xticlabels1": "*", "xticlabels2": "*", "ymtics1": "", "ymtics2": "", "datawc_x1": 1e+20, "datawc_x2": 1e+20, "boxfill_type": "linear", "xmtics1": "", "fillareacolors": null, "xmtics2": "", "color_2": 255, "datawc_calendar": 135441, "fillareaindices": [1], "color_1": 0, "colormap": null, "missing": [0.0, 0.0, 0.0, 100.0], "xaxisconvert": "linear", "level_2": 1e+20, "ext_1": false, "ext_2": false, "datawc_y2": 1e+20, "datawc_y1": 1e+20, "yaxisconvert": "linear", "legend": null, "name": "__boxfill_717978942019492", "yticlabels1": "*", "yticlabels2": "*", "fillareastyle": "solid", "levels": [1e+20, 1e+20], "g_name": "Gfb", "level_1": 1e+20}; |
| 11 | + var boxfill = {"fillareaopacity": [], "datawc_timeunits": "days since 2000", "projection": "linear", "xticlabels1": "*", "xticlabels2": "*", "ymtics1": "", "ymtics2": "", "datawc_x1": 1e+20, "datawc_x2": 1e+20, "boxfill_type": "linear", "xmtics1": "", "fillareacolors": null, "xmtics2": "", "color_2": 255, "datawc_calendar": 135441, "fillareaindices": [1], "color_1": 0, "colormap": null, "missing": [0.0, 0.0, 0.0, 100.0], "xaxisconvert": "linear", "level_2": 1e+20, "ext_1": false, "ext_2": false, "datawc_y2": 1e+20, "datawc_y1": 1e+20, "yaxisconvert": "linear", "legend": null, "color_2": 255, "datawc_calendar": 135441, "fillareaindices": [1], "color_1": 0, "colormap": null, "missing": [0.0, 0.0, 0.0, 100.0], "xaxisconvert": "linear", "level_2": 1e+20, "ext_1": false, "ext_2": false, "datawc_y2": 1e+20, "datawc_y1": 1e+20, "yaxisconvert": "linear", "legend": null, "name": "__boxfill_717978942019492", "yticlabels1": "*", "yticlabels2": "*", "fillareastyle": "solid", "levels": [1e+20, 1e+20], "g_name": "Gfb", "level_1": 1e+20}; |
26 | 12 | var vector = {"datawc_timeunits": "days since 2000", "projection": "linear", "reference": 1e+20, "xticlabels1": "*", "xticlabels2": "*", "linecolor": null, "ymtics1": "", "ymtics2": "", "linewidth": null, "datawc_x1": 1e+20, "datawc_x2": 1e+20, "xmtics1": "", "xmtics2": "", "datawc_calendar": 135441, "alignment": "center", "type": "arrows", "colormap": null, "xaxisconvert": "linear", "scale": 1.0, "linetype": null, "datawc_y2": 1e+20, "datawc_y1": 1e+20, "yaxisconvert": "linear", "name": "vector_full", "yticlabels1": "*", "yticlabels2": "*", "scalerange": [0.1, 1.0], "scaleoptions": ["off", "constant", "normalize", "linear", "constantNNormalize", "constantNLinear"], "g_name": "Gv", "scaletype": "constantNNormalize"}; |
27 | 13 | var vector_subview = {"datawc_timeunits": "days since 2000", "projection": "linear", "reference": 1e+20, "xticlabels1": "*", "xticlabels2": "*", "linecolor": null, "ymtics1": "", "ymtics2": "", "linewidth": null, "datawc_x1": 60, "datawc_x2": 180, "xmtics1": "", "xmtics2": "", "datawc_calendar": 135441, "alignment": "center", "type": "arrows", "colormap": null, "xaxisconvert": "linear", "scale": 1.0, "linetype": null, "datawc_y2": 90, "datawc_y1": 0, "yaxisconvert": "linear", "name": "subset_vector", "yticlabels1": "*", "yticlabels2": "*", "scalerange": [0.1, 1.0], "scaleoptions": ["off", "constant", "normalize", "linear", "constantNNormalize", "constantNLinear"], "g_name": "Gv", "scaletype": "constantNNormalize"}; |
| 14 | + var isofill = {"g_name": "Gfi"}; |
| 15 | + var dv3d = {ScaleColormap: null, ScaleOpacity: null, BasemapOpacity: null, Camera: "{}", ZSlider: null, YSlider: null, ToggleVolumePlot: null, PointSize: null, Configure: null, XSlider: null, SliceThickness: null, axes: "xyz", plot_attributes: {name: "3d_scalar", template: "default"}, IsosurfaceValue: null, VerticalScaling: null, ChooseColormap: null, ToggleSurfacePlot: null, Colorbar: null, ncores: 8, ScaleTransferFunction: null, name: "default", ToggleClipping: null, Animation: null, g_name: "3d_scalar" }; |
28 | 16 |
|
29 | 17 | // create the session |
30 | | - sessionPromise = vcs.createSession(url); |
| 18 | + var b = document.getElementById('vcs-boxfill'); |
| 19 | + var canvas = vcs.init(b); |
31 | 20 |
|
32 | | - sessionPromise.catch(() => { |
33 | | - console.log('Could not connect to ' + url); |
| 21 | + b.addEventListener('vcsPlotStart', function() { |
| 22 | + console.log("Began plotting boxfill"); |
34 | 23 | }); |
35 | 24 |
|
36 | | - var canvasPromise = sessionPromise.then(function (session) { |
37 | | - return session.init(document.getElementById('vcs-isofill')); |
| 25 | + b.addEventListener('vcsPlotEnd', function() { |
| 26 | + console.log("Finished plotting boxfill"); |
38 | 27 | }); |
39 | 28 |
|
40 | | - // generate the plot when all of the promises resolve |
41 | | - canvasPromise.then(function (canvas) { |
42 | | - var dataSpec = variables.clt; |
43 | | - canvas.plot(dataSpec, 'no_legend', boxfill, 'server'); |
| 29 | + var dataSpec = variables.clt; |
| 30 | + canvas.plot(dataSpec, boxfill, 'no_legend').then(function(){ |
| 31 | + console.log("Promise completed."); |
44 | 32 | }); |
45 | 33 |
|
46 | | - // generate another plot using client side rendering |
47 | | - // we don't have an api for getting data yet, so we'll |
48 | | - // just use an ajax request to data.kitware.com |
49 | | - var cltPromise = $.ajax('https://data.kitware.com/api/v1/file/576aa3c08d777f1ecd6701ae/download'); |
50 | | - var latPromise = $.ajax('https://data.kitware.com/api/v1/item/576aa3c08d777f1ecd6701b0/download'); |
51 | | - var lonPromise = $.ajax('https://data.kitware.com/api/v1/item/576aa3c08d777f1ecd6701b9/download'); |
52 | | - var canvasPromise2 = sessionPromise.then(function (session) { |
53 | | - return session.init(document.getElementById('plotly-isofill')); |
54 | | - }); |
55 | | - |
56 | | - |
57 | | - // This is all very rough, likely much of this should be wrapped inside the api |
58 | | - Promise.all([ |
59 | | - canvasPromise2, cltPromise, latPromise, lonPromise |
60 | | - ]).then(function (arg) { |
61 | | - console.log("1") |
62 | | - var canvas = arg[0]; |
63 | | - console.log("2") |
64 | | - var clt = arg[1]; |
65 | | - console.log("3") |
66 | | - var lat = arg[2]; |
67 | | - console.log("4") |
68 | | - var lon = arg[3]; |
69 | | - console.log("5") |
70 | | - var timestep = 0; |
71 | | - console.log("6") |
72 | | - |
73 | | - var data = { |
74 | | - x: lon.data, |
75 | | - y: lat.data |
76 | | - }; |
77 | | - console.log("7") |
| 34 | + var canvas2 = vcs.init(document.getElementById('plotly-isofill'), 'client'); |
| 35 | + canvas2.plot(dataSpec, isofill); |
78 | 36 |
|
79 | | - function draw() { |
80 | | - console.log("8") |
81 | | - data.z = ndarray(clt.data, clt.shape).pick(timestep, null, null); |
82 | | - console.log("9") |
83 | | - canvas.plot(data, 'default', { "g_type": "Gfi" }, 'client'); |
84 | | - console.log("10") |
85 | | - timestep = (timestep + 1) % clt.shape[0]; |
86 | | - } |
87 | | - console.log("11") |
88 | | - // call again for the next time step |
89 | | - draw(); |
90 | | - }); |
91 | | - |
92 | | - var canvasPromise3 = sessionPromise.then(function (session) { |
93 | | - return session.init(document.getElementById('vcs-vector')); |
94 | | - }); |
| 37 | + var canvas3 = vcs.init(document.getElementById('vcs-vector')); |
95 | 38 | // generate the plot when all of the promises resolve |
96 | | - canvasPromise3.then(function (canvas) { |
97 | | - var dataSpec = [variables.u, variables.v]; |
98 | | - canvas.plot(dataSpec, 'default', vector, 'server'); |
99 | | - }); |
100 | | - |
101 | | - var canvasPromise4 = sessionPromise.then(function (session) { |
102 | | - return session.init(document.getElementById('vcs-vector-subset')); |
103 | | - }); |
| 39 | + var dataSpec = [variables.u, variables.v]; |
| 40 | + canvas3.plot(dataSpec, vector_subview); |
104 | 41 |
|
105 | | - // generate the plot when all of the promises resolve |
106 | | - canvasPromise4.then(function (canvas) { |
107 | | - var dataSpec = [variables.u, variables.v]; |
108 | | - canvas.plot(dataSpec, 'default', vector_subview, 'server'); |
109 | | - }); |
110 | | - |
111 | | - $(window).on('beforeunload', function() { |
112 | | - canvasPromise.then((canvas) => canvas.close()); |
113 | | - canvasPromise3.then((canvas) => canvas.close()); |
114 | | - canvasPromise4.then((canvas) => canvas.close()); |
115 | | - return 'Your own message goes here...'; |
116 | | - }); |
117 | | -}); |
| 42 | + var canvas4 = vcs.init(document.getElementById('vcs-vector-subset')); |
| 43 | + var dataSpec = variables.clt; |
| 44 | + canvas4.plot(dataSpec, dv3d); |
118 | 45 |
|
| 46 | +})(); |
0 commit comments