Connecting Map and DashTable ids

[KJ4SON]

I have a map and a table that I am trying to connect. I have it set so if the point is selected on the map the background color changes on the table and if you select a row on the table the point size changes on the map. I’m having a problem where whenever I select an item either on the map or the table the incorrect point or row gets changed.

I want to say the problem has to do with the color in the map because I have selected a point in the table that made one of each of the colors on the map change.

I changed the index of the pandas file to match my ID number, and made sure the id came into both the table and the map but it does not seem to be reading that field.

I’m sure this is a mess, I am new to Dash. I changed some names of my fields, hopefully it still makes sense.

Thanks!

Below is just the dash section of my data, let me know if you need more. Thank you.

buffer = io.StringIO()
MYDATA.write_html(buffer)
html_bytes = buffer.getvalue().encode()
encoded = b64encode(html_bytes).decode()
app = JupyterDash(__name__)

app.layout= html.Div([ 

    html.H1("HEADER", style={'textAlign':'center'}), 
    dcc.Graph(id="TOTALS", figure=TOTALS, config = {"displayModeBar": True}),
    dcc.DatePickerRange(
    id='date-range', max_date_allowed=dt(2021,1,6), min_date_allowed=dt(2019,12,1), start_date=dt(2020,1,1), end_date=dt(2020,12,31)),    
    dcc.Graph(id="MAP", figure=MAP, config = {"displayModeBar": True}),
    
    dash_table.DataTable(
        style_data={'whiteSpace': 'normal', 'height':'auto',},
        style_cell={'textAlign': 'left'},
        id='table',
        columns= [{"name":"id","id":"id"},{"name": "ID NUMBER", "id": "ID NUMBER"}, 
                  {"name": "First Date", "id":"First Date", 'type': 'datetime'} , {"name": "FIELD1","id":"FIELD1"},
                  {"name": "FIELD2","id": "FIELD2"}], 
        hidden_columns=['id'],
        data= MYDATA.to_dict('records'),
        editable=False,
        selected_rows=[],
        filter_action='native',
        sort_action = 'native',
        row_selectable='multi',
        style_header={'color':'black', 'backgroundColor': 'lightgray', 'fontWeight': 'bold'},
        style_cell_conditional=[
            {'if':{'column_id':'FIELD1'},
            'width': '350px'},
            {'if':{'column_id':'First Date'},
            'width': '100px'},
            {'if':{'column_id':'ID Number'},
            'width': '115px'}
        ],),

], 
    style = {'marginLeft':100, 'marginRight':  100})
def date_string_to_date(date_string):
    return pd.to_datetime(date_string, infer_datetime_format=True)
def update_table_style(selectedData):

    if selectedData !=None:
        points_selected = []
        for point in selectedData['points']:
            points_selected.append(point['pointIndex']) #want to be id but the if will not take row_id
        selected_styles = [{'if':{'row_index':i},
                           'backgroundColor':'lightblue'} for i in points_selected]
        table_style_conditions =(selected_styles)
    elif selectedData ==None: 
        selected_styles = [{'if':{'row_index': 'odd'},
                           'backgroundColor':'#EEEFF1'}]
        table_style_conditions =(selected_styles)
    return table_style_conditions

@app.callback(
Output('table', 'data'),
Output('MAP', 'figure'),    
Input('date-range','start_date'),
Input('date-range', 'end_date'),
Input('table','selected_row_ids'))

def update_table(start_date, end_date, selected_row_ids):
    
    if start_date and end_date:
        
        mask = (date_string_to_date(MYDATA["First Date"])>=date_string_to_date(start_date)) & ( date_string_to_date(MYDATA["First Date"]) <= date_string_to_date(end_date))
        data=MYDATA.loc[mask].to_dict("records")
        if selected_row_ids is None:
            selected_row_ids = []
        selectsize = [25 if data[i]['id'] in selected_row_ids else 8 for i in range(len(data))]
        MAP = px.scatter_mapbox(data_frame = data,lon='X Coordinate', lat='Y Coordinate',  color = 'FIELD3', mapbox_style='carto-positron',  custom_data={'id'},
                            hover_name='ID Number', hover_data={"First Date": True, "First Time": True, "X Coordinate": False, "Y Coordinate": False}, zoom=10.51, title="TITLE"
                           ,color_discrete_sequence=["red", "deepskyblue"],color_discrete_map={"SPECIFICITEM": 'Red'})
        MAP.update_layout(height=1000, clickmode='event+select', mapbox={"layers":[
                                                                    {"source":json.loads(shape.geometry.to_json()), "below":"traces",
                                                                                 "type":"fill","color":"gold", "line":{"width": 3}},
                                                                    {"source":json.loads(shpfile.geometry.to_json()), "below":"traces",
                                                                                 "type":"line","color":"darkgray", "line":{"width": 1.5}}]})                
        MAP.update_traces(marker=dict(size=selectsize))
 

        return data, MAP

    
@app.callback(
Output('table','style_data_conditional'),
[Input('MAP','selectedData')])

def display_selected_data(selectedData):
    table_style_conditions = update_table_style(selectedData)
    return table_style_conditions

     
app.run_server(mode='external', port=8058, dev_tools_ui = True, dev_tools_hot_reload=True, threaded=True)