In Exaptive, assets are files that you upload or create that are used as dependencies to your JS, R, or Python scripts. They typically contain either data, libraries, or helper functions.


This article first walks through how to create an Asset and then provides reference material for different kinds of assets. 




Creating an Asset

To create an asset, go to your Studio and click the '+' icon, then select 'Asset'.




From here, you can drag a JS, R, or Python script onto the page to upload it.



Alternatively, you can click "create new" and give your asset a name and file extension, then write the asset's contents.

Adding an Asset to the Component Spec


To add the asset, you'll need to access the component SPEC in the Component Editor.

For every language, you'll need to specify three pieces of information.

  • type - "js", "python", "url", or "data"
  • asset - The asset guid. Currently the only way to get the asset guid is to copy it from the url in the asset's page.
  • name - This varies by language. More details below.

This is the asset guid. 

blob1475844845230.png




JavaScript


In JavaScript, the name can be a single string or an array of strings and must correspond to a module or functions in the asset.

For example, my JavaScript asset's contents are:
function importantFunc() {
return "Hello, World!";
}

 

In the spec of a JavaScript component that uses this asset, you'd have the following:

 

"dependencies": {
"file": [
{
"type": "js",
"asset": "1234-5678-9101-1213",
"name": "importantFunc"
}
]
},

 

It's important for JavaScript that the name you put in the spec matches the function name(s) inside the asset's contents. If there is a mismatch between the name in the spec and the asset's functions, then your function will be undefined at runtime.


If the JavaScript asset had two functions that I wanted to use, you'd add it via the spec like so:

  

"dependencies": {
"file": [
{
"type": "js",
"asset": "1234-5678-9101-1213",
"name": [
"importantFunc",
"anotherFunc"
]
}
]
},

  

The reason behind importing functions by name is to allow you to cherrypick functions for use inside your component. This helps with performance if you use a large library. Instead of importing dozens of functions from a library like Numeric JS, you can specify which functions you'll use in this component. Additionally, doing this prevents global namespace pollution. 


Python


In python, assets are loaded as modules and the name you assign in the spec acts as the module name. So it can be whatever you want as the component author.


Suppose you have a Python asset whose contents are:

def important_func():
    return "Hello, World!"

 

Your spec would look like:

 

"dependencies": {
"file": [
{
"type": "python",
"asset": "0fe213c0-8bfd-11e6-a897-2dbff63efc07",
"name": "my_awesome_asset"
}
]
}

 

The name "my_awesome_asset" can be anything you'd like. Inside the component, you'll use whatever you named it within the spec to access the module.


R


Adding an R asset is a bit different than expected, as R scripts are not a supported asset type yet.


My R asset's contents:

important_func <- function(){
  return("Hello, World!")
}

 

My component spec:

"dependencies": {
"file": [
{
"type": "url",
"asset": "ef945a90-8bfe-11e6-a897-2dbff63efc07",
"name": "my_awesome_asset"
}
],
"cran": []
},

 

Note the type "R" is not supported and will cause an error. Instead, we use a type of "url". This file will be handled as a string inside the component.



Data:


My data asset's contents:

 

term,frequency,
waffles,1.00,

 


Like Python and R scripts, the name can be anything you'd like.

"dependencies": {
"file": [
{

                     "type": "data",
                     "asset": "6197a780-8c06-11e6-a897-2dbff63efc07",
                        "name": "awesomeData"
}
]
},



Using an Asset In the Component Script


To use the asset in the component, you'll need to access the component SCRIPT in the Component Editor.

Javascript Assets:


Inside the script, using the asset looks like this.

 

var importantFunc = this.api.imports.importantFunc;

var anotherFunc = this.api.imports.anotherFunc;

var importantVal = importantFunc();

var anotherVal = anotherFunc();

 

The functions are imported by name and can be used like normal JS functions. My variable name matches the function name, but this need not be the case at this point. You could name the variable anything, but the function name will be the same. For example:

 

var impF = this.api.imports.importantFunc;

impF();

 

This is also valid.


Python Assets:


Inside the script, using the asset looks like this.

 

my_awesome_asset = self.api.imports["my_awesome_asset"]
important_value = my_awesome_asset.important_func()

 


R Assets:

 

source(self$api$imports$my_awesome_asset)
  
important_val <- important_func()

 

We use source to read the R script that was loaded as a "url" type.


Data Assets in JS:

 

myAwesomeData = this.api.imports.myAwesomeData

 

Now my_awesome_data contains a csv file as a string data type.


Data Assets in Python:

 

my_awesome_data = self.api.imports["awesomeData"]


Now my_awesome_data contains a .csv file as a string data type.


Data Assets in R:


Documentation coming soon. If you need help contact us!