Webapps¶
In Dataiku, webapps provide a way to create interactive visualizations that can be shared on dashboards for sophisticated reporting. You can create webapps with Python Bokeh, Dash, R Shiny, or HTML/Javascript.
Tip
To validate your knowledge of this area, register for the Visualization course, part of the Developer learning path, on the Dataiku Academy.
Code Sample | Download from a Dataiku webapp¶
When building a webapp in Dataiku DSS, you may want to allow users to download a file from a managed folder. Here are steps to build an HTML button, which will allow webapp users to download files stored in a managed folder.
Basic download¶
Here’s how you can download a file from a managed folder by clicking on a button in a webapp.
In the Python part of the webapp, define an endpoint like:
import dataiku
from flask import request
from flask import send_file
import io
@app.route('/downloadFile')
def first_call():
filename = request.args.get('filename')
stream = dataiku.Folder('FOLDER_ID').get_download_stream(filename)
with stream:
return send_file(
io.BytesIO(stream.read()),
as_attachment=True,
attachment_filename=filename)
Then in the Javascript section, you’d need a function like:
window.download = function(){
window.location.href = getWebAppBackendUrl('/downloadFile?filename=test.txt');
}
Finally, in the HTML you can add a button to trigger that JS function:
<button onclick="download()">Download</button>
What’s Next?¶
To learn more about webapps in Dataiku DSS, visit the Dataiku Academy for tutorials and examples.
Code Sample | Upload to a Dataiku webapp¶
Out of the box, Dataiku DSS offers datasets and managed folders in which users can upload files from their local machines, and then build their Flow on this uploaded data. But for users with no access to the Flow, or for automated tasks, manually uploading to a dataset or a managed folder in the UI can be out of the question.
Webapps can fill this gap by letting users upload files from their machine to Dataiku DSS, and trigger actions from the webapp.
Shiny offers a fileInput widget, but Python APIs for DSS’s managed folders are more convenient to use. Since Bokeh requires coding the uploading widget yourself, the simplest option is to use the simplest webapp type, namely standard webapps, that is, a combination of HTML/JS for the frontend and Flask for the backend.
Basic upload¶
The simplest version is an HTML form with a <input type="file" /> field, one Ajax call to send the data, and a route in the Flask app to forward the data to a managed folder via the Python API.
In a standard webapp which has jquery, Dataiku API, and Bootstrap Javascript libraries (see Settings tab), the frontend is:
<form style="margin: 20px;">
<div class="form-group" id="fileGroup">
<label for="newFile">Select file</label>
<input class="form-control" id="newFile" type="file" />
</div>
<button id="uploadButton" class="btn btn-primary">Upload to DSS</button>
</form>
$('#uploadButton').click(function (e) {
e.preventDefault();
let newFile = $('#newFile')[0].files[0];
let form = new FormData();
form.append('file', newFile);
$.ajax({
type: 'post',
url: getWebAppBackendUrl('/upload-to-dss'),
processData: false,
contentType: false,
data: form,
success: function (data) { console.log(data); },
error: function (jqXHR, status, errorThrown) { console.error(jqXHR.responseText); }
});
});
The Ajax call targets a route /upload-to-dss in the Flask backend, whose code is:
import dataiku
from flask import request
@app.route('/upload-to-dss', methods = ['POST'])
def upload_to_dss():
f = request.files.get('file')
mf = dataiku.Folder('box') # name of the folder in the flow
target_path = '/%s' % f.filename
mf.upload_stream(target_path, f)
return json.dumps({"status":"ok"})
This produces a UI like:
Select file, hit the upload button, and voilà, the file is now in the managed folder, ready to be used in a Flow or by the webapp itself!
Adding parameters¶
Just sending a file to the Python backend is often not enough, and additional parameters might be needed. To add a field to the form and retrieve its value in the backend, add:
...
<div class="form-group" id="paramGroup">
<label for="someParam">Some param</label>
<input class="form-control" id="someParam" type="text" />
</div>
...
...
let form = new FormData();
form.append('file', newFile);
form.append('extra', $('#someParam').val())
...
...
extra_param = request.form.get('extra', '')
f = request.files.get('file')
...
Simple UI improvements¶
In order to make the upload a bit more pleasant, you can tweak the html/js to add drag & drop on the form field:
$('#newFile').on('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#newFile').on('dragenter', function(e) {
e.preventDefault();
e.stopPropagation();
$("#newFile").css("opacity", "0.5")
});
$('#fileGroup').on('dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
$("#newFile").css("opacity", "")
});
$('#newFile').on('drop', function(e){
$("#newFile").css("opacity", "")
if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
$("#newFile")[0].files = e.originalEvent.dataTransfer.files;
}
});
If files to upload can be large, it’s a good idea to give some user feedback on the progress of the upload, to not give the impression nothing is happening. A simple progress bar would be:
let stopUpload = function() {
$("#progress").remove();
};
let startUpload = function() {
stopUpload();
let progress = $('<div id="progress"/>').css("height", "10px").css("margin", "10px 0").css("background","lightblue");
$('#fileGroup').append(progress);
};
...
$.ajax({
type: 'post',
...
xhr: function() {
startUpload();
var ret = new window.XMLHttpRequest();
ret.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var pct = parseInt(evt.loaded / evt.total * 100);
$('#progress').css("width", "" + pct + "%");
}
}, false);
return ret;
},
complete: function() { stopUpload(); }
});
After that, improvements could be feedback post-upload, styling, etc.
What’s next?¶
To learn more about HTML/JS, Python Bokeh, and R Shiny webapps in Dataiku DSS, visit the Dataiku Academy for tutorials and examples.
How-to | Display an image in a Bokeh webapp¶
This article applies both to:
Bokeh webapps;
Usage of the Bokeh library in a Jupyter notebook.
Add your image to the “Static web resources”¶
In the global menu of Dataiku, select Global Shared Code. If you don’t see this menu, your administrator needs to grant you additional permissions.
Click on Static Web Resources and upload your image.
Reference the image in your code¶
In your Bokeh code, use the image_url function:
path = "/local/static/path-of-the-image-within-resources.png"
p.image_url(url=[path])
What’s next?¶
For more information on using Bokeh in Dataiku DSS, please visit the reference documentation.
How-to | Use custom static files (Javascript, CSS) in a webapp¶
In addition to the JavaScript or CSS you type in a standard webapp, you may want to use certain code libraries.
Dataiku DSS comes with some embedded standard JS libraries (jQuery, boostrap, etc). Just go to the “Settings” tab of the webapp editor to activate them.
If the library you are looking for is not available in DSS, a quick way to load it, if your library is already hosted, is to simply link from your HTML:
<script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script>
Dataiku DSS also has a “static” folder where you can place static content (JavaScript, CSS, images) that will be served by DSS and available to your webapps.
There are two ways to move files to that folder:
using the web interface or
using the command line.
Import libraries using the graphical interface¶
If you have admin rights on your DSS instance, you can click on the Application menu near the top-right corner. Select Global Shared Code and navigate to the “Static Web Resources” tab on the right.
You can either create and edit files within Dataiku DSS, or upload your files.
Import libraries using the command line¶
If you have many files to import, you may want to use the command line. Here is how:
Navigate to the DSS Data Directory.
Check for the presence of a
local/staticdirectory. Create it if needed. Inside a terminal, enter:
mkdir -p local/static
Copy your static files into this directory. For instance, you might copy your team’s CSS and JavaScript common files.
Using static files in your webapp¶
Once they are in, you can use the static files from the HTML code of your webapp as in the following example. (Note that there is a ‘/’ before “local”).
<script type="text/javascript" src="/local/static/my-team.js" />
<link rel="stylesheet" href="/local/static/my-team.css" />
<img src="/local/static/my-image.jpg" />
That’s it! You can now use your favorite Javascript or CSS libs in Dataiku DSS!
Tip
A word of further explanation: This works thanks to DATA_DIR/nginx/conf/nginx.conf, which maps /local/static/ to dss-data-dir/local/static/.