Shareable X-axis with combination of dropdown list buttons

Good afternoon. I am building two graphs in one subplot, in which there is a common X-axis. I have two dropdowns, in one of which I choose which value to build the X-axis by, and in the second dropdown, I select the metric by which to build the lower (second) subplot graph. A problem arose when, when switching the axis value from DATEMAIL to APPID, the X-axis gets lost and each X-axis of the subplot graphs acts as separate, not common axes, and on top of that, the lower graphs are not built along the APPID axis, even after the switch. How to make sure that when switching, the common axes are not destroyed and are common even after switching the value by which to build the X-axis. Maybe the problem is in the visible values ​​or the xaxis/xaxis2 settings in the dropdown arguments?

import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Generate 50 records
num_records = 50
date_range = pd.date_range(start='01-01-2023', periods=num_records, freq='D').strftime('%m-%d-%Y').tolist()
appids = [f'A{i}' for i in range(1, num_records + 1)]
mails = np.random.randint(100000, 300000, num_records)
resps = np.random.randint(200, 600, num_records)
rr = np.random.uniform(1.5, 2.5, num_records)
avg_gift = np.random.uniform(30, 50, num_records)
revenue = np.random.randint(100, 300, num_records)
cost = np.random.randint(50, 150, num_records)
net_revenue = revenue - cost
cpp = np.random.uniform(1, 2, num_records)
rpp = np.random.uniform(0.5, 1, num_records)
cpdollar = np.random.uniform(0.1, 0.3, num_records)
cta = np.random.uniform(5, 10, num_records)
roi = np.random.uniform(9, 15, num_records)

# Create new data dictionary
data_extended = {
    'APPID': appids,
    'DATEMAIL': date_range,
    'Mails': mails,
    'Resps': resps,
    'RR': rr,
    'AvgGift': avg_gift,
    'Revenue(1000$)': revenue,
    'Cost(1000$)': cost,
    'Net Revenue(1000$)': net_revenue,
    'CPP': cpp,
    'RPP, $': rpp,
    'CP\$R, $': cpdollar,
    'CTA, $': cta,
    'ROI, %': roi,
}

# Convert to DataFrame
st = pd.DataFrame(data_extended)

# st = pd.DataFrame(data)

st['DATEMAIL'] = pd.to_datetime(st['DATEMAIL'], format='%m-%d-%Y')
st = st.sort_values(by='DATEMAIL')
st['DATEMAIL'] = st['DATEMAIL'].dt.strftime('%m-%d-%Y')

# --------------------------
# Start making visualization
fig = make_subplots(rows=2, cols=1, shared_xaxes=True, 
                    specs=[[{'secondary_y': True}], [{'secondary_y': False}]],
                    vertical_spacing=0.2)

# Create traces for DATEMAIL
mail_barplot_date = go.Bar(x=st['DATEMAIL'], y=st['Mails'], name='Mails', yaxis='y1', offsetgroup=1)
resp_barplot_date = go.Bar(x=st['DATEMAIL'], y=st['Resps'], name='Resps', yaxis='y2', offsetgroup=2)

# Metrics plots for DATEMAIL
metrics_plots_date = {
    'Response Rate(%)': go.Scatter(x=st['DATEMAIL'], y=st['RR'], mode='markers+lines', name='Response Rate(%)', visible=True),
    'Average Gift($)': go.Scatter(x=st['DATEMAIL'], y=st['AvgGift'], mode='markers+lines', name='Average Gift($)', visible=False),
    'Revenue(1000$)': go.Scatter(x=st['DATEMAIL'], y=st['Revenue(1000$)'], mode='markers+lines', name='Revenue(1000$)', visible=False),
    'Cost(1000$)': go.Scatter(x=st['DATEMAIL'], y=st['Cost(1000$)'], mode='markers+lines', name='Cost(1000$)', visible=False),
    'Net Revenue(1000$)': go.Scatter(x=st['DATEMAIL'], y=st['Net Revenue(1000$)'], mode='markers+lines', name='Net Revenue(1000$)', visible=False),
    'Cost Per Piece($)': go.Scatter(x=st['DATEMAIL'], y=st['CPP'], mode='markers+lines', name='Cost Per Piece($)', visible=False),
    'Revenue Per Piece($)': go.Scatter(x=st['DATEMAIL'], y=st['RPP, $'], mode='markers+lines', name='Revenue Per Piece($)', visible=False),
    'Cost Per Dollar Raised($)': go.Scatter(x=st['DATEMAIL'], y=st['CP\$R, $'], mode='markers+lines', name='Cost Per Dollar Raised($)', visible=False),
    'Cost To Acquire($)': go.Scatter(x=st['DATEMAIL'], y=st['CTA, $'], mode='markers+lines', name='Cost To Acquire($)', visible=False),
    'Return On Investment(%)': go.Scatter(x=st['DATEMAIL'], y=st['ROI, %'], mode='markers+lines', name='Return On Investment(%)', visible=False)
}

# Create traces for APPID
mail_barplot_appid = go.Bar(x=st['APPID'], y=st['Mails'], name='Mails', yaxis='y1', offsetgroup=1, visible=False)
resp_barplot_appid = go.Bar(x=st['APPID'], y=st['Resps'], name='Resps', yaxis='y2', offsetgroup=2, visible=False)

# Metrics plots for APPID
metrics_plots_appid = {
    'Response Rate(%)': go.Scatter(x=st['APPID'], y=st['RR'], mode='markers+lines', name='Response Rate(%)', visible=False),
    'Average Gift($)': go.Scatter(x=st['APPID'], y=st['AvgGift'], mode='markers+lines', name='Average Gift($)', visible=False),
    'Revenue(1000$)': go.Scatter(x=st['APPID'], y=st['Revenue(1000$)'], mode='markers+lines', name='Revenue(1000$)', visible=False),
    'Cost(1000$)': go.Scatter(x=st['APPID'], y=st['Cost(1000$)'], mode='markers+lines', name='Cost(1000$)', visible=False),
    'Net Revenue(1000$)': go.Scatter(x=st['APPID'], y=st['Net Revenue(1000$)'], mode='markers+lines', name='Net Revenue(1000$)', visible=False),
    'Cost Per Piece($)': go.Scatter(x=st['APPID'], y=st['CPP'], mode='markers+lines', name='Cost Per Piece($)', visible=False),
    'Revenue Per Piece($)': go.Scatter(x=st['APPID'], y=st['RPP, $'], mode='markers+lines', name='Revenue Per Piece($)', visible=False),
    'Cost Per Dollar Raised($)': go.Scatter(x=st['APPID'], y=st['CP\$R, $'], mode='markers+lines', name='Cost Per Dollar Raised($)', visible=False),
    'Cost To Acquire($)': go.Scatter(x=st['APPID'], y=st['CTA, $'], mode='markers+lines', name='Cost To Acquire($)', visible=False),
    'Return On Investment(%)': go.Scatter(x=st['APPID'], y=st['ROI, %'], mode='markers+lines', name='Return On Investment(%)', visible=False)
}

# Add traces to the figure
fig.add_trace(mail_barplot_date, row=1, col=1, secondary_y=False)
fig.add_trace(resp_barplot_date, row=1, col=1, secondary_y=True)
fig.add_trace(mail_barplot_appid, row=1, col=1, secondary_y=False)
fig.add_trace(resp_barplot_appid, row=1, col=1, secondary_y=True)

# Add metric traces to the second subplot
for metric in metrics_plots_date.values():
    fig.add_trace(metric, row=2, col=1)
for metric in metrics_plots_appid.values():
    fig.add_trace(metric, row=2, col=1)

# Define the number of traces for visibility control
traces_num = 24
metric_labels = list(metrics_plots_date.keys())

# Initial visibility setup
initial_visibility = [True] * 2 + [False] * 2 + [True] + [False] * (traces_num // 2 - 1) + [False] * (traces_num // 2)

# Update layout with dropdown menus for x-axis
updatemenus_x = [
    {
        'buttons': [
            {
                'label': 'DATEMAIL',
                'method': 'update',
                'args': [
                    {'visible': initial_visibility},
                    {'xaxis': {'title': 'DATEMAIL'}, 'xaxis2': {'title': 'DATEMAIL'}}
                ],
            },
            {
                'label': 'APPID',
                'method': 'update',
                'args': [
                    {'visible': [False] * 2 + [True] * 2 + [False] * (traces_num // 2) + [True] + [False] * (traces_num // 2 - 1)},
                    {'xaxis': {'title': 'APPID'}, 'xaxis2': {'title': 'APPID'}}
                ],
            }
        ],
        'direction': 'down',
        'showactive': True,
        'x': 0.4,
        'xanchor': 'center',
        'y': 1.1,
        'yanchor': 'top'
    }
]

# Dropdown menu for metric selection
updatemenus_metrics = [
    {
        'buttons': [
            {
                'label': metric,
                'method': 'update',
                'args': [
                    {'visible': initial_visibility[:4] + [i == j for j in range(len(metrics_plots_date))] + [False] * len(metrics_plots_appid)}
                ]
            } for i, metric in enumerate(metric_labels)
        ],
        'direction': 'down',
        'showactive': True,
        'x': 0.5,
        'xanchor': 'center',
        'y': 1.1,
        'yanchor': 'top'
    }
]

# Set the initial layout visibility
fig.update_layout(
    title='Bar Plot with Dual Y-Axis and Subplots',
    updatemenus=updatemenus_x + updatemenus_metrics,
    height=800,
    barmode='group'
)

# Show the figure
fig.show()