How can I store the value of a Dash slider component?

Question

I am developing an MRI file viewer app using dash and plotly. The way it works is I can select a specific MRI file from my dataset and the app will generate a slider that could take you through the different MRI slices. There's also a show ROI (ROI is short for region of interest) check box that if toggled will re-size the slicer to only slide through the MRI slices on which the ROI could be shown. The problem is when I uncheck the Display ROI box and go back to the normal view with the original slider the MRI slice gets reset to the first one and not the one I was viewing last.

Is there a way to store the slider value when viewing the ROI so that when I uncheck the "Display ROI" box, the same slice I was viewing with the ROI remains selected for the full view?

Here's the app's code:

# Define the base directory where subdirectories and files are stored
BASE_DIRECTORY = path


# Function to get subdirectories from the base directory
def get_subdirectories(directory):
    """Returns a sorted list of subdirectories within the given directory."""
    return sorted([d for d in os.listdir(directory) if os.path.isdir(os.path.join(directory, d))])

# Function to get files within a selected subdirectory
def get_files(directory, subdirectory):
    """
    Returns a sorted list of files within a given subdirectory.
    Parameters:
        - directory: The base directory containing subdirectories.
        - subdirectory: The selected subdirectory to list files from.
    """
    subdirectory_path = os.path.join(directory, subdirectory)  # Full path to the selected subdirectory
    return sorted([f for f in os.listdir(subdirectory_path) if os.path.isfile(os.path.join(subdirectory_path, f))])

# Initialize the Dash app
app = dash.Dash(__name__)

# Define the layout of the Dash app
app.layout = html.Div(
    # Styling for the entire page
    style={
        "backgroundColor": "#f4f4f4",  # Light gray background
        "padding": "20px",  # Padding around content
        "borderRadius": "10px",  # Rounded corners for smooth UI
        "fontfamily": "Arial, sans-serif",  # Font styling
        "fontweight": "normal"  # Normal font weight
    },
    children=[  # Contains all UI elements within this Div
            
        # Main header
        html.H1("Interactive File Selector", style={"textAlign": "center", "color": "#333"}),  # Centered header with dark color

        # Container for dropdowns and output
        html.Div(
            # Styling for the container
            style={
                "maxWidth": "600px",  # Restricts width for a neat appearance
                "margin": "auto",  # Centers the container
                "padding": "20px",  # Adds padding inside the container
                "backgroundColor": "white",  # White background for contrast
                "borderRadius": "10px",  # Rounded corners
                "boxShadow": "0 4px 10px rgba(0, 0, 0, 0.1)"  # Light shadow for a modern look
            },
            children=[
                # Label for subdirectory selection
                html.Label("Select a Subdirectory:", style={"fontSize": "16px", "fontWeight": "bold"}),

                # Dropdown for selecting a subdirectory
                dcc.Dropdown(
                    id='subdirectory-dropdown',  # Unique ID to reference this component in callbacks
                    options=[{'label': subdir, 'value': subdir} for subdir in get_subdirectories(BASE_DIRECTORY)],
                    # Generates options dynamically based on available subdirectories
                    placeholder="Select a subdirectory",  # Default text displayed before selection
                    style={"marginBottom": "10px"}  # Adds spacing below the dropdown
                ),

                # Label for file selection
                html.Label("Select a File:", style={"fontSize": "16px", "fontWeight": "bold"}),

                # Dropdown for selecting a file (dynamically updated when a subdirectory is selected)
                dcc.Dropdown(
                    id='file-dropdown',  # Unique ID for referencing in callbacks
                    options=[],  # Initially empty, will be updated dynamically
                    placeholder="Select an MRI file",  # Default text before selection
                    style={"marginBottom": "10px"}  # Adds spacing below the dropdown
                ),

                html.Br(),  # Adds a line break for better spacing

                # Div to display the selected file
                html.Div(
                    id='selected-file-output',  # Unique ID to update output dynamically
                    style={"fontSize": "16px", "fontWeight": "bold", "color": "#007bff"}),

                # Display row data in a nice table format (using pandas DataFrame)
                html.Div(id='row-data-table-output', style={"marginTop": "20px", "marginBottom": "20px"}),

                # Label for file selection
                html.Label("Slide the handle to change the viewed slice:", style={"marginTop": "20px", "marginBottom": "10px", "fontSize": "16px", "fontWeight": "bold"}),

                html.Div(
                    dcc.Slider(
                        id='slice-slider',
                        min=0,
                        max=100,
                        step=1,
                        value=0,
                        marks={i: str(i) for i in range(0, 101, 10)},
                        tooltip={"placement": "bottom", "always_visible": True}
                    ),
                    style={'width': '80%', 'margin': '20px auto'}  # Increase width and center it
                ),

                html.Div([dcc.Graph(id='roi-slice-output')]),

                dcc.Checklist(
                    id='roi-toggle',
                    options=[{'label': 'Show ROI', 'value': 'show_roi'}],
                    value=[],  # Default is unchecked
                    style={'marginTop': '10px'}
                )

            ]
        )
    ]
)

# Callback to update the file dropdown when a subdirectory is selected
@app.callback(
    Output('file-dropdown', 'options'),  # Dynamically updates the file dropdown options
    Input('subdirectory-dropdown', 'value')  # Runs when the user selects a subdirectory
)
def update_file_dropdown(selected_subdirectory):
    """
    Updates the file dropdown based on the selected subdirectory.
    If no subdirectory is selected, it returns an empty list.
    """
    if not selected_subdirectory:
        return []  # Return empty list if no subdirectory is selected

    # Retrieve files from the selected subdirectory
    files = get_files(BASE_DIRECTORY, selected_subdirectory)

    # Returns a list of dictionaries where each file is {'label': file_name, 'value': file_name}
    return [{'label': f, 'value': f} for f in files]

# Callback to display the selected file
@app.callback(
    Output('selected-file-output', 'children'),  # Updates the text display dynamically
    Input('file-dropdown', 'value')  # Runs when a file is selected
)
def display_selected_file(selected_file):
    """
    Updates the text output to display the selected file name.
    If no file is selected, it displays 'No file selected.'
    """
    if not selected_file:
        return "No file selected."  # Default message if no file is chosen

    return f"Selected File: {selected_file}"  # Displays the selected file name

# Callback to update slider min, max, and marks dynamically
@app.callback(
    [Output('slice-slider', 'min'),
     Output('slice-slider', 'max'),
     Output('slice-slider', 'marks'),
     Output('slice-slider', 'value')],
    [Input('file-dropdown', 'value'), 
     Input('roi-toggle', 'value')]
)
def update_slider(selected_file, show_roi):
    if selected_file:
      if 'show_roi' in show_roi:
        first_roi_slice = roi_dict[selected_file][1]['roiZ']
        last_roi_slice = first_roi_slice + roi_dict[selected_file][1]['roiDepth'] - 1 # Get total slices
        marks = {i: str(i) for i in range(0, last_roi_slice - first_roi_slice + 1, 1)}
        return first_roi_slice, last_roi_slice, marks, first_roi_slice  # Reset to first slice
      else:
        mri_data = roi_dict[selected_file][2]
        first_slice = 0
        last_slice = mri_data.shape[0]
        marks = {i: str(i) for i in range(0, last_slice, 1)}
        return first_slice, last_slice, marks, first_slice  # Reset to first slice
    return 0, 10, {0: '0', 10: '10'}, 0  # Default values if no file selected

@app.callback(
    Output('row-data-table-output', 'children'),
    Input('file-dropdown', 'value')
)
def display_mri_row_data(selected_mri_filename):
    """
    This function retrieves the row data from the dictionary and formats it for display.
    It also fetches the corresponding ROI slice to display in the app.
    """
    if not selected_mri_filename:
        return "", "", "" # Default message if no file is chosen

    # Get the corresponding row data from the dictionary roi_dict
    row = roi_dict[selected_mri_filename][1]  # This is a pandas Series

    # Extract individual fields from the pandas Series
    examId = row['examId']
    seriesNo = row['seriesNo']
    aclDiagnosis = row['aclDiagnosis']
    kneeLR = row['kneeLR']
    roiX = row['roiX']
    roiY = row['roiY']
    roiZ = row['roiZ']
    roiHeight = row['roiHeight']
    roiWidth = row['roiWidth']
    roiDepth = row['roiDepth']
    volumeFilename = row['volumeFilename']

    # Format the row data for display
    row_data_str = html.Div([
        f"examId: {examId}",
        html.Br(),
        f"seriesNo: {seriesNo}",
        html.Br(),
        f"aclDiagnosis: {aclDiagnosis}",
        html.Br(),
        f"kneeLR: {kneeLR}",
        html.Br(),
        f"roiX: {roiX}",
        html.Br(),
        f"roiY: {roiY}",
        html.Br(),
        f"roiZ: {roiZ}",
        html.Br(),
        f"roiHeight: {roiHeight}",
        html.Br(),
        f"roiWidth: {roiWidth}",
        html.Br(),
        f"roiDepth: {roiDepth}",
        html.Br(),
        f"volumeFilename: {volumeFilename}"
    ])

    # Create a table to display the row data in a structured format
    row_data_table = html.Table(
        children=[html.Tr([html.Th(col), html.Td(row[col])]) for col in row.index]
    )
    # Return row data, table, and the ROI images
    return row_data_table

# Callback to display the MRI row data and visualization using matplotlib
@app.callback(
    Output('roi-slice-output', 'figure'),
    [Input('file-dropdown', 'value'),
     Input('slice-slider', 'value'),
     Input('roi-toggle', 'value')] 
)
def display_mri_with_mask(selected_mri_filename, selected_slice, show_roi):
    """
    This callback function retrieves the MRI data and mask from the selected MRI file,
    and generates a visualization overlaying the mask on the MRI slice.
    """
    if not selected_mri_filename:
        blank_image = np.ones((256, 256)) * 255  # White image (all pixels set to 255)
        return px.imshow(blank_image, color_continuous_scale='gray')  # Return an empty figure if no file is chosen


    # Check if the selected filename exists in roi_dict
    if selected_mri_filename not in roi_dict:
        return go.Figure()# Return an empty figure if the filename is invalid

    # Retrieve the data and mask from roi_dict
    mri_data = roi_dict[selected_mri_filename][2]
    mask = roi_dict[selected_mri_filename][3]

    # Ensure the arrays are NumPy arrays
    if not isinstance(mri_data, np.ndarray):
        print(f"Error: MRI data for {selected_mri_filename} is not a numpy array")
        return go.Figure()# Return an empty figure if the MRI data is not a numpy array

    if not isinstance(mask, np.ndarray):
        print(f"Error: Mask for {selected_mri_filename} is not a numpy array")
        return go.Figure() # Return an empty figure if the mask is not a numpy array

    # Ensure the slice index is valid (e.g., check for 'roiZ' in metadata)
    if 'roiZ' not in roi_dict[selected_mri_filename][1]:
        print(f"Error: 'roiZ' not found in metadata for {selected_mri_filename}")
        return go.Figure() # Return an empty figure if roiZ is not available

    try:
      mri_slice = mri_data[selected_slice, :, :]
      mask_slice = mask[selected_slice, :, :]
      if 'show_roi' in show_roi:
        updated_mri_slice = mri_slice * mask_slice
        fig = px.imshow(updated_mri_slice, color_continuous_scale='gray', labels={'color': 'MRI Data'})
      else:  
        # Plot the MRI data using Plotly Express
        fig = px.imshow(mri_slice, color_continuous_scale='gray', labels={'color': 'MRI Data'})
    except IndexError:
        print(f"Error: Invalid 'roiZ' index {roi_dict[selected_mri_filename][1]['roiZ']} for {selected_mri_filename}")
        return go.Figure() # Return an empty figure if the slice index is out of bounds
          # Update the layout of the figure

    fig.update_layout(
          title="MRI with Mask Overlay",
          coloraxis_showscale=False,
          template="plotly_white",
          xaxis={'showgrid': False, 'zeroline': False},
          yaxis={'showgrid': False, 'zeroline': False},
          dragmode='pan'
      )
    
    return fig # Return the updated figure and the updated slice index

# Run the Dash app
if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False, port=8000)  # Runs the app with debug mode enabled for easier troubleshooting

I tried usind dcc.Store() as well as updating the 'value' of 'slice-slider' through my display_mri_with_mask() function by adding Output('slice-slider', 'value') to the callback, but nothing worked.

I'm just stuck and any help would be much appreciated!

Thank you in advance!