There are a few questions regarding the issue of adding a select all features for filtering data with numerous values. The one referenced below performs the function but it adds every value into the dropdown bar. Rather than a single tab or component that represents all the values.

Python Plotly Dash dropdown Adding a “select all” for scatterplot

I’ve replicated their data and attached a screenshot. Ideally, everything stays the same, except when select all is chosen, the dropdown bar only shows select all as a single tab (all data should be visible).

Further, if select all as a single tab is present and the user wants to select and unique id, then select all should be dropped for that id. Conversely, if a unique id is actioned and select all is executed, then the unique id should be dropped for the single select all tab.

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_mantine_components as dmc
import pandas as pd
import plotly.express as px
import numpy as np
import random
from string import ascii_letters

df = pd.DataFrame(data=list(range(100)), columns=["tcd"])
df['humidity'] = pd.DataFrame(np.random.rand(100, 1) * 254)
df['Capsule_ID'] = [''.join(random.choice(ascii_letters) for x in range(10)) for _ in range(len(df))]

capsuleID = df['Capsule_ID'].unique()
capsuleID_names = list(capsuleID)

capsuleID_names_1 = [{'label': k, 'value': k } for k in sorted(capsuleID)]
capsuleID_names_2 = [{'label': '(Select All)', 'value': 'All'}]
capsuleID_names_all = capsuleID_names_1 + capsuleID_names_2


app = dash.Dash(__name__)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    html.H1("Web Application Dashboards with Dash", style={'text-align': 'center'}),

    dcc.Dropdown(id="capsule_select",
             options=capsuleID_names_all,
             optionHeight=25,
             multi=True,
             searchable=True,
             placeholder='Please select...',
             clearable=True,
             value=[''],
             style={'width': "40%"}
             ),
    html.Div([
        dcc.Graph(id="the_graph")
    ]),

])

@app.callback(
    Output("the_graph", "figure"),
    Output("capsule_select", "value"),
    Input("capsule_select", "value"),
)
def update_graph(capsules_chosen):
    dropdown_values = capsules_chosen

    if "All" in capsules_chosen:
        dropdown_values = df["Capsule_ID"]
        dff = df
    else:
        dff = df[df["Capsule_ID"].isin(capsules_chosen)]

    scatterplot = px.scatter(
        data_frame=dff,
        x="tcd",
        y="humidity",
        color = "Capsule_ID"
    )

    scatterplot.update_traces(textposition="top center")

    return scatterplot, dropdown_values 

if __name__ == '__main__':
    app.run_server(debug=True)