Passing JS functions through Trame state variables

[rmakvandi]

Hi,

I'm trying to pass a function to a JS library inside Trame.

state.objectOptions = {
    ...,
    "subObjectOptions" : {
       "subObjectFunctions" : {
            "myFunction1" : "function(param){return 'test'}",
            ...
       }
    }
}
LIBRARY_OBJECT(..., options=("objectOptions",), ...)

I was hoping that Trame will translate the "function(param){return 'test'}" part to a JS function, but it passes the variable as a string.

My assumption was that Trame will evaluate anything inside the quote as a JS expression. I tried other options, including putting the function expression inside another state variable and passing the tuple, but it doesn't get translated as well. Am I missing something here?

Thanks.

[bourdaisj]

Hi,
You must use either Script or JsEval.
Examples:

• https://github.com/Kitware/trame-client/blob/master/examples/test/script.py
• https://github.com/Kitware/trame/tree/master/examples/09_advanced/custom_js

Maybe Sebastien has a better solution

[rmakvandi]

Hi Jules,

Thanks for the quick response. I actually tried Script, but it also doesn't solve the problem.

To test, I added:

JS_CONTENT = (
    "window.testFunction = function(p){console.log('Test function called with:', p);};"
)
client.Script(JS_CONTENT, module=True)

Then:

state.objectOptions = {
    ...,
    "subObjectOptions" : {
       "subObjectFunctions" : {
            "test" : "window.testFunction",
            ...
       }
    }
}
LIBRARY_OBJECT(..., options=("objectOptions",), ...)

I can see that the function is defined. Console log:

window.testFunction
ƒ (p){console.log('Test function called with:', p);}

window.testFunction('test')
VM21:1 Test function called with: test

but when I try to call it from the component, Console log:

trame.refs.***.test
{test: 'window.testFunction'}test: "window.testFunction"[[Prototype]]: Object

trame.refs.***.test('test')
VM490:1 Uncaught TypeError: trame.refs.***.test is not a function

(*** is the path to the subobject options)

It looks like it again considers "window.testFunction" to be a string. I think unless the function is created by the component itself, it cannot recognize it.

[bourdaisj]

I didn't see the exact code you a running, but from my understanding you are basically trying to turn a string into a JS statement (function invokation), which is not a valid JS syntax (actually you may use eval but that is discouraged.
Imo, try not to put "window." in your JS_CONTENT. and in your component use this syntax to invoke the function: window[subObject.**.test](args)
this way you directly lookup your function on the window object and invoke it.

[jourdain]

Please share a full and simple example, as providing JS function is fairly trivial.
But for that we need to understand what you want to do. All the examples provided are good reference.

Side note, in the vue template, the Js expression have a different scope and you may need to do some extra work to get your hand on some global/window function/objects.

Also do you understand the difference between a static property vs dynamic? str vs tuple in trame.

[rmakvandi]

Thanks for your responses. I will need some time to prepare an example code. The library that I'm working with is AG Grid. There, it happens a lot that one can pass a function as "renderer" to customize how, for instance, cells should look.

one example
https://www.ag-grid.com/vue-data-grid/component-cell-renderer/

<template>
    <ag-grid-vue :columnDefs="columnDefs" ...other properties>
    </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "ag-grid-vue3";

export default {
    components: {
        AgGridVue
    },
    data() {
        return {
            columnDefs: [
                {
                    headerName: "Value",
                    field: "value",
                    cellRenderer: params => params.value > 1000 ? "LARGE VALUE" : "SMALL VALUE"
                }
            ]
        }
    }
    //...
}
</script>

or
https://www.ag-grid.com/javascript-data-grid/components/

gridOptions = {

    // register the components using 'components' grid property
    components: {
        // 'countryCellRenderer' is mapped to class CountryCellRenderer
        countryCellRenderer: CountryCellRenderer,
        // 'countryFilter' is mapped to class CountryFilter
        countryFilter: CountryFilter
    },

    // then refer to the component by name
    columnDefs: [
        {
            field: 'country',
            cellRenderer: 'countryCellRenderer',
            filter: 'countryFilter'
        },
    ],

    ...
}

I found a workaround with modifying the main JS file of the component to embed my component, which solves the problem to some extent, but it's not ideal. Especially that the same situation happens a lot with AG Charts and its tooltips.

as for the static/dynamic, I assume that the same logic as this slide applies here as well (or?)

[jourdain]

So you should probably put your JS in the trame.utils.xxx and like your pointed out, you can then pass your JS functions as dynamic props.