Converting from Python's dash library to Node.js

Question

I am trying to convert code that was done in Python's dash into Node.js + express. I have the UI built but now I need to incorporate the functions that are written in Python for making updates to the UI.

For example this function in Python:

    # The Map generator    
@app.callback(Output('plot1', 'figure'),[Input('button', 'n_clicks')],
    [State('text1', 'value'),State('text2', 'value'),State('text3', 'value'),State('text4', 'value')])


def text_callback(building_address, year_end='2017',year_start='2016', mapping_variable = 'Median Household Income'):
    print("Using this function now")

    addresses = building_address.split(';')
    print("ADDRESSESsssssssssssssssssssss:", addresses)
    data_slider = []
    layers_slider = []
    if mapping_variable == 'Predicted Growth Rank':
        colormap = 'Blues_r'
    else:
        colormap = 'Blues'
    gdf =  get_gdf(addresses, all_data, year_end,year_start)[0]
    Building_lat,Building_lon,Building_name = get_building_info(addresses)
    cmin=gdf[mapping_variable].min()
    cmax=gdf[mapping_variable].max()
    sm= scalarmappable(colormap, cmin, cmax)
    colorscale_new = get_colorscale(sm, df=gdf[mapping_variable], cmin=gdf[mapping_variable].min(), cmax=gdf[mapping_variable].max())
    pl_colorscale = colorscale_new
    gdf_year =  gdf[gdf['Year']==year_end]
    gdf_year['Predicted Growth Rank'] = gdf_year['Predicted Growth Rank'].rank(ascending=False)
    gdf_year= gdf_year.reset_index()
    index_list = list(gdf_year.index)
    centers,layers = get_mapbox_choropleth_data(gdf_year, index_list, col_vals=mapping_variable, colorscale=colorscale_new, val_name=mapping_variable)

    data_slider.append(centers)
    layers_slider.append(layers)    
    data2 = go.Scattermapbox(
        lat=Building_lat, lon=Building_lon, mode='markers', marker=go.scattermapbox.Marker(size=9,color='rgb(231, 41, 74)'),
        showlegend=False,
        text=Building_name) 
    data_slider.append(data2)
    layoutmbx = dict(font=dict(family='Balto', size=16), autosize=False, height=740, width=1200,
                     hovermode='closest',
        mapbox=dict(accesstoken=mapbox_access_token,layers=layers,
                bearing=0,
                center=dict(lat=centers['lat'][0], lon=centers['lon'][0]),
                pitch=0,
                zoom=9,style = 'streets'),margin = dict(l = 0, r = 0, t = 0, b = 0),
                     plot_bgcolor= '#202d56',
                paper_bgcolor='#202d56')    
    return {'data': data_slider, 'layout': layoutmbx}

the @app.callback maps the different elements of the front end and identifies them in the order that the function needs to use them.

So like.. Button = n_clicks, text1= building address, text2 = year end, text3 = year_start, text4 = mapping variable.

How can I convert Python's Dash into Node.JS + Express?

UPDATE:

To be more specific what I have now is a UI that has 4 variables: address, year_end, year_start, and mapping_variable. The function above for one particular address will return this:

[{'type': 'scattermapbox', 'mode': 'markers', 'text': ['Census Tract:304.01<br>Median Household Income:52212<br> Year: 2017 '], 'marker': {'size': 1, 'color': ['rgba(247, 251, 255, 255)'], 'colorscale': [[0.0, 'rgba(247, 251, 255, 255)'], [0.05263157894736842, 'rgba(236, 244, 251, 255)'], [0.10526315789473684, 'rgba(226, 237, 248, 255)'], [0.15789473684210525, 'rgba(215, 230, 244, 255)'], [0.21052631578947367, 'rgba(206, 224, 241, 255)'], [0.2631578947368421, 'rgba(193, 217, 237, 255)'], [0.3157894736842105, 'rgba(177, 210, 231, 255)'], [0.3684210526315789, 'rgba(160, 202, 225, 255)'], [0.42105263157894735, 'rgba(139, 192, 221, 255)'], [0.47368421052631576, 'rgba(117, 179, 216, 255)'], [0.5263157894736842, 'rgba(98, 168, 210, 255)'], [0.5789473684210527, 'rgba(80, 155, 203, 255)'], [0.631578947368421, 'rgba(64, 144, 197, 255)'], [0.6842105263157894, 'rgba(49, 129, 189, 255)'], [0.7368421052631579, 'rgba(36, 116, 182, 255)'], [0.7894736842105263, 'rgba(24, 102, 172, 255)'], [0.8421052631578947, 'rgba(14, 89, 162, 255)'], [0.894736842105263, 'rgba(8, 74, 146, 255)'], [0.9473684210526315, 'rgba(8, 61, 126, 255)'], [1.0, 'rgba(8, 48, 107, 255)']], 'opacity': 0, 'cmin': 52212, 'cmax': 52212, 'showscale': False}, 'showlegend': False, 'lon': [-122.77720976814757], 'lat': [45.47996783203806], 'hoverinfo': 'text'}, Scattermapbox({
    'lat': [45.48553],
    'lon': [-122.77518],
    'marker': {'color': 'rgb(231, 41, 74)', 'size': 9},
    'mode': 'markers',
    'showlegend': False,
    'text': [9555 SW DUNCAN LN]
})]

What this function does in python with the dash api is overlay those colors onto the map. I have to do the same thing with Node.JS.

Answer 1

There are multiple ways of invoking python from JS. Its not a recommended way and its not preferred to invest time in converting. Please see my recommendations below based on my previous answer.

• first way is by doing npm install python-shell

and here's the code

var PythonShell = require('python-shell');
//you can use error handling to see if there are any errors
PythonShell.run('my_script.py', options, function (err, results) { 
//your code

you can send a message to python shell using pyshell.send('hello');

you can find the API reference here- https://github.com/extrabacon/python-shell

• second way - another package you can refer to is node python , you have to do npm install node-python

• third way - you can find an example of using a child process- using another answer below. a few more references - https://www.npmjs.com/package/python

if you want to use service-oriented architecture - http://ianhinsdale.com/code/2013/12/08/communicating-between-nodejs-and-python/

Here is the reference to my old answer

Answer 2

TLDR;

rather than translating the py to js maybe you could invoke child process to call py??

reference: https://www.geeksforgeeks.org/run-python-script-node-js-using-child-process-spawn-method/