# How to Access Multiple dynamic number of data sources passed via args in CustomJS?

**URL:** <https://discourse.bokeh.org/t/how-to-access-multiple-dynamic-number-of-data-sources-passed-via-args-in-customjs/11754>\
**Category:** Community Support\
**Tags:** customjs, hover, bokeh\
**Created:** [August 13, 2024, 4:29pm UTC](https://discourse.bokeh.org/t/how-to-access-multiple-dynamic-number-of-data-sources-passed-via-args-in-customjs/11754 "2024-08-13T16:29:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hannahhoang2704](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/hannahhoang2704/32/6867_2.png) [@hannahhoang2704](https://discourse.bokeh.org/u/hannahhoang2704)\
**Post date:** [August 13, 2024, 4:29pm UTC](https://discourse.bokeh.org/t/how-to-access-multiple-dynamic-number-of-data-sources-passed-via-args-in-customjs/11754/1 "2024-08-13T16:29:21Z")

</div>

Hello,

I’m learning Bokeh and have some issues trying to access args dict from CustomJS code. I’m working with a Bokeh plot that involves multiple `ColumnDataSource` objects. I need to dynamically access these data sources within a `CustomJS` callback, but the number of sources and variable names of these sources can vary.  
(The code below is the extension of the solution I found in community regarding hover tool dynamic fields.)  
[https://discourse.bokeh.org/t/hover-tool-dynamic-fields/9513](https://discourse.bokeh.org/t/hover-tool-dynamic-fields/9513)

```auto
from bokeh.layouts import column
from bokeh.plotting import figure, curdoc, show
from bokeh.models import ColumnDataSource, HoverTool, CustomJSHover, CustomJS

import numpy as np

data = {
	"x": [1,2,3,4],
	"y": [1,2,3,4],
	"extra_info": ["abc", None, None, 'cba'],
}
data2 = {
	"x": [5,4,6,5],
	"y": [1,2,3,4],
	"extra_info": ["abc", None, None, 'cba'],
}

TOOLTIPS = [[
    ("x", "@x"),
    ("y", "@y"),
], [
    ("x", "@x"),
    ("y", "@y"),
    ("extra_info", "@extra_info"),
]]

src = ColumnDataSource(data=data)
src1 = ColumnDataSource(data=data2)
data_sources = {"data": src, "data2": src1} #it is currently static dict but expected to be dynamic 
f = figure()
r = f.scatter(x='x',y='y', source=src)
r1 = f.scatter(x='x', y='y', source=src1)
r_list = [src, src1]
hvr = HoverTool()
#create args dict to parse to CustomJS
customjs_arg = dict(hover_tool=hvr, tooltips=TOOLTIPS)
properties_data = list(data_sources.keys())
#update args dict with dynamic data_sources dict
for key, v in data_sources.items():
    customjs_arg[key] = v
customjs_arg.update(dict(properties_data=properties_data))
dynamic_hover_tooltips = CustomJS(args=customjs_arg,code='''
               let tooltips_to_use = tooltips[0]; // Default tooltip
                for (let i = 0; i < properties_data.length; i++) {
                    let source_name = properties_data[i];
                  let source = this.properties.args._value.source_name
                    console.log(this.properties.args._value.source_name)
                if (source.inspected.indices.length > 0) {
                    let index = source.inspected.indices[0];

                    // Check if the 'extra_info' field exists and is not null
                    if (source.data['extra_info'][index] != null) {
                        tooltips_to_use = tooltips[1]; // Use the tooltip with "Path"
                        break; // Exit loop if condition met
                    }
                }
            }

            // Update the hover tool's tooltips
            hover_tool.tooltips = tooltips_to_use
              ''')

hvr.callback = dynamic_hover_tooltips
f.add_tools(hvr)

show(f)

```

The source code above is a simplified version of what I’m working on. The data\_sources is expected to have a dictionary of multiple key-value pair of ColumnDataSources which can varies.

Is there anyway to access args dict in CustomJS code? I’ve tried to use ‘this.properties.args.\_value.source\_name’ but it does not work

Thanks in advance

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [August 13, 2024, 5:28pm UTC](https://discourse.bokeh.org/t/how-to-access-multiple-dynamic-number-of-data-sources-passed-via-args-in-customjs/11754/2 "2024-08-13T17:28:34Z")

</div>

Everything from the Python-side `args` dict is dumped into a named variable in code on the JS side. So the short answer, is no, there is no way to access the `args` dict itself in the JS code.

However there is no reason you can’t pass another dict, e.g. the `data_sources` you already have, inside the `args` dict:

```python
args = {"sources": data_sources, ...}

cb = CustomJS(args=args, code='''
    // access sources["some_key"], etc.
''')

```

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [November 11, 2024, 5:28pm UTC](https://discourse.bokeh.org/t/how-to-access-multiple-dynamic-number-of-data-sources-passed-via-args-in-customjs/11754/3 "2024-11-11T17:28:40Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.