How to update the result in a Dash data table and Dash graphs from the new row in the input data table

Dash Python
1

I have a dash app below. The app for the moment updates a dash data table whenever the user clicks on the points on the map. I am a little stack in how to also use the dash map tools (box select and lasso select) to also update the table (keeping the click function too). I have tried adding a new callback that includes the’selecteddata’ function for the dash tools but it seems to stop all the previous callbacks.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go
import dash_bootstrap_components as dbc
import pandas as pd
from dash import dash_table

pd.options.mode.chained_assignment = None # default=‘warn’

df = pd.read_csv(r’C:\Users\KS43772\Documents\FARM_TREES_Project\Example_1\Data1.csv’)
app = dash.Dash(external_stylesheets=[dbc.themes.SLATE])
app.title = “Farm Tree Project Scotland”

server = app.server

color = {‘Mixed’: ‘#e48900’,
‘Arable’: ‘#5aa469’,
‘Livestock’: ‘#8ab6d6’}

def update_bar(df):
fig = go.Figure()
for type in df[‘Type’].unique():
df_by_Type = df[df[‘Type’]==type]
df_by_Type.sort_values(‘Capacity’,inplace=True)
fig.add_trace(go.Bar({
‘x’:df_by_Type[‘Capacity’],
‘y’:df_by_Type[‘Name’],
‘orientation’:‘h’,
‘name’:type,
‘marker’:{‘color’:color[type]},
# ‘cumulative’:{‘enabled’:True,‘direction’:‘decreasing’}
# ‘histfunc’:‘count’
}))

fig.update_layout(barmode=‘stack’,height=900)
fig.update_yaxes(categoryorder=‘category descending’)
fig.update_xaxes(title_text=‘Hectares’)

return fig

def update_map(df):
traces =

for type in df[‘Type’].unique():
traces.append(go.Scattermapbox(
lat=df[‘Latitude’],
lon=df[‘Longitude’],
mode=‘markers’,
customdata=df.loc[:, [‘Type’]],
hovertemplate=“%{text}

” +“Type: %{customdata[0]}
” +“”+ “”,
showlegend=False,
marker=go.scattermapbox.Marker(
size=20,
color=df[‘Code’]
),
text=df [‘Name’],
name = type
))

return {‘data’: traces,
‘layout’: go.Layout(hovermode=‘closest’,
height= 900,
mapbox=dict(
accesstoken=‘pk.eyJ1Ijoia29zdGFzc2FuIiwiYSI6ImNsaHJ5aW56OTBrNHgzaW9hMzNiY3lvd24ifQ.PtLxYEMkBft7PXkCgUqpDg’,
bearing=0,
center=go.layout.mapbox.Center(
lat=56.0,
lon=-4.0
),
pitch=0,
zoom=5
))}

app.layout = html.Div([
dbc.Card(
dbc.CardBody([
dbc.Row([
dbc.Col([
html.H1([‘Farm Tree Project Scotland’],style={‘text-align’:‘center’})
], width=15),
], align=‘center’),
html.Br(),
dbc.Row([
dbc.Col([
html.Label([‘Select Region’],style={‘font-weight’:‘bold’},),
dcc.Dropdown(id=‘region-dropdown’,
options=[{‘label’:i,‘value’:i} for i in df[‘Region’].unique()],
multi= True

                 )
            ], width=3),
            dbc.Col([
               html.Div(
                        [
                        dbc.Button('Submit', id='submit-button', color='primary', className='mr-1')
                        ],style={'margin-top':'20px'}
                )
            ], width=3),
        ], align='center'), 
        html.Br(),
        dbc.Row([
            dbc.Col([
                 html.Div([
              dcc.Graph(id = 'graph',figure=update_map(df))
              ])
            ], width=7),
            dbc.Col([
                html.Div([
              dcc.Graph(id = 'graph-1',figure=update_bar(df))
              ])
            ], width=5),
        ], align='center'), 
          html.Br(),

       dbc.Row([
           dbc.Col([dash_table.DataTable(id='table',columns=[{'name': col, 'id': col} for col in df.columns],
                                          style_cell_conditional=[{'if': {'column_id': 'Code',} ,  'display': 'None',}],
   style_table={'overflowX': 'scroll'},
    style_cell={
       'minWidth': '100px', 'width': '100px', 'maxWidth': '90px',
       'height': 'auto',

        'overflow': 'hidden',

       'textOverflow': 'ellipsis','textAlign': 'left',
       'fontSize':20, 'font-family':'sans-serif'
   })
           ], width=8),
         
       ], align='center'),      
   ])

)
])

@app.callback([Output(‘graph’,‘figure’),
Output(‘graph-1’,‘figure’)],
[Input(‘submit-button’,‘n_clicks’)],
[State(‘region-dropdown’,‘value’)],
)

def update_graph(n_clicks,region):
frames =
for region_name in region:
frames.append(df[(df[‘Region’]==region_name)])
df_filtered = pd.concat(frames,ignore_index=True)
return [update_map(df_filtered), update_bar(df_filtered)]

@app.callback(
Output(‘table’, ‘data’),
Input(‘graph’, ‘clickData’),
State(‘table’, ‘data’),
)

def update_table(selected_point, current_data):
if selected_point is None:
return current_data
else:
lat, lon = selected_point[‘points’][0][‘lat’], selected_point[‘points’][0][‘lon’]
selected_row = df[(df[‘Latitude’] == lat) & (df[‘Longitude’] == lon)]
if selected_row.empty:
return current_data
else:
return selected_row.to_dict(‘records’)

if name == ‘main’:
app.run_server()