Skip to content

Adding New Pages

OptiScope's Dash app is designed to be easily extensible. You can add new pages by creating a new module in optiscope/dash_app/pages and subclassing PageModule.

Step-by-Step Guide

  1. Create a New Directory: Create a new directory in optiscope/dash_app/pages/ for your page (e.g., my_custom_page).

  2. Create the Page Module: Create a page.py file inside your new directory.

  3. Implement the Page Class:

import dash_mantine_components as dmc
from dash import html
from optiscope.dash_app.pages._base import PageModule

class MyCustomPage(PageModule):
    name = "My Custom Page"
    path = "/my-custom-page"
    icon = "carbon:chart-custom"
    description = "A custom page for specific analysis."
    category = "Analysis"

    def layout(self, **kwargs):
        return dmc.Container([
            dmc.Title("My Custom Analysis"),
            dmc.Text("This is a custom page added to OptiScope."),
            # Add your components here
        ])

    def register_callbacks(self, app):
        # Register any callbacks needed for your page
        pass
  1. Register the Page: The app automatically discovers pages in the optiscope.dash_app.pages package. Ensure your directory has an __init__.py that exposes your page class or that the discovery mechanism can find it.

Page Attributes

  • name: The display name in the navigation menu.
  • path: The URL path for the page.
  • icon: The icon to display (uses Iconify names).
  • category: The section in the navigation menu where the page should appear.
  • requires_data: Set to True if the page requires loaded data to function.

Adding Pages via Entry Points

You can also distribute your custom pages as separate Python packages and register them using entry points. This allows users to install your plugin package and automatically have the page appear in the OptiScope app.

1. Create Your Page Module

Create a Python module (e.g., my_plugin/page.py) and define your page class. Crucially, you must instantiate the class as page_module at the module level.

# my_plugin/page.py
from optiscope.dash_app.pages._base import PageModule
# ... imports ...

class MyPluginPage(PageModule):
    name = "Plugin Page"
    path = "/plugin-page"
    # ... implementation ...

# Instantiate the page class
page_module = MyPluginPage()

2. Register the Entry Point

In your package's pyproject.toml (or setup.py), add an entry point under the group optiscope.pages.

# pyproject.toml
[project.entry-points."optiscope.pages"]
my_plugin_page = "my_plugin.page"

When OptiScope starts, it will discover and load my_plugin.page, find the page_module instance, and register it as a page in the application.