Dash Mosaic - The Most Dynamic Layout Wrapper

Dash Python
,
1

Dash Mosaic

Dash Mosaic is a flexible, resizable, and draggable layout component for Dash applications. It allows users to split the view into multiple panes that can be resized, rearranged, and customized.

Features

  • Flexible layout with resizable and draggable panes
  • Customizable themes (Blueprint, Blueprint Dark, None)
  • Ability to add, remove, and rearrange panes
  • Support for custom content in each pane
  • Responsive design with mobile-friendly options

Installation

pip install dash-mosaic

Go to the assets folder and copy over these files to your project’s assets folder:
dash_mosaic/assets/8a26d7e1bb38c9c64a59.woff2
dash_mosaic/assets/8a525ab91769f6d60c94.ttf
dash_mosaic/assets/8b1c5e35bad17bae103e.woff2
dash_mosaic/assets/9ad9cbe47f2f5821528d.woff
dash_mosaic/assets/565ce5e4e7c8be823549.ttf
dash_mosaic/assets/3843580eab4844b48210.woff
dash_mosaic/assets/main.js
dash_mosaic/assets/style.css

Usage

Here’s a basic example of how to use the DashMosaic component:

import dash
from dash import html
from dash_mosaic import DashMosaic

app = dash.Dash(__name__)

initial_layout = {
    'direction': 'row',
    'first': 1,
    'second': {
        'direction': 'column',
        'first': 2,
        'second': 3,
    },
    'splitPercentage': 40,
}

tile_content = {
    1: html.Div("Content for pane 1"),
    2: html.Div("Content for pane 2"),
    3: html.Div("Content for pane 3"),
}

app.layout = html.Div([
    DashMosaic(
        id='mosaic',
        layout=initial_layout,
        theme='Blueprint Dark',
        tileContent=tile_content,
        style={'height': '95vh'},
        windowTitles={1: "Pane 1", 2: "Pane 2", 3: "Pane 3"},
        showSplitButton=True,
        showExpandButton=True,
        showRemoveButton=True,
        showNavbar=True
    )
])

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

Properties

  • id (string; optional): The ID used to identify this component in Dash callbacks.
  • layout (dict; optional): The layout configuration for the mosaic.
  • theme (string; optional): The theme to apply to the mosaic. Options are ‘Blueprint’, ‘Blueprint Dark’, or ‘None’.
  • tileContent (dict; optional): An object containing the content for each tile, keyed by tile ID.
  • style (dict; optional): Inline styles to apply to the mosaic container.
  • windowTitles (dict; optional): An object containing custom titles for each window, keyed by tile ID.
  • showSplitButton (boolean; optional): Whether to show the split button in the tile toolbar.
  • showExpandButton (boolean; optional): Whether to show the expand button in the tile toolbar.
  • showRemoveButton (boolean; optional): Whether to show the remove button in the tile toolbar.
  • showNavbar (boolean; optional): Whether to show the navbar at the top of the mosaic.

Callbacks

You can use the layout property in Dash Mosaic callbacks to show the changes in the mosaic layout. For example:

@app.callback(
    Output('output', 'children'),
    Input('mosaic', 'layout')
)
def display_output(layout):
    return f'Current layout: {layout}'

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Could use help setting up assets in a way that they are automatically included in the package.

4 Likes
2

Hi @PipInstallPython
I really like this new component. It appears to be even better than the other dynamic layout component you built - Dash Dynamic Grid Layout.

  1. What exactly do the three buttons on the top right part of every window represent? I can’t read the symbol/text inside them and their interactivity wasn’t clear to me.

image
image941×442 4.15 KB

  1. I thought it’s an interesting example to use the callback to show the changes in the mosaic layout property. Although I’m not sure yet in what scenarios I would use this inside a Dash app? Maybe it’s just good to know what the layout looks like programmatically…
@app.callback(
    Output('output', 'children'),
    Input('mosaic', 'layout')
)
def display_output(layout):
    return f'Current layout: {layout}'
  1. Lastly, if the user chooses to add another window while interacting with the app, how would they add content to that window? Would that be done through the Pattern Matching callback?
3

Hey,

Thanks for checking it out and the kind words, I’ll go in order of your questions and see if I can get everything answered.

  1. What exactly do the three buttons on the top right part of every window represent? I can’t read the symbol/text inside them and their interactivity wasn’t clear to me.

Screenshot 2024-09-25 at 12.52.44 PM

  • this is what the buttons should look like, haven’t been able to figure out a way to include the assets in the package automatically so you’ll need to add them manually by copying these files into your assets folder of your app:
    Go to the assets folder and copy over these files to your project’s assets folder:
    dash_mosaic/assets/8a26d7e1bb38c9c64a59.woff2
    dash_mosaic/assets/8a525ab91769f6d60c94.ttf
    dash_mosaic/assets/8b1c5e35bad17bae103e.woff2
    dash_mosaic/assets/9ad9cbe47f2f5821528d.woff
    dash_mosaic/assets/565ce5e4e7c8be823549.ttf
    dash_mosaic/assets/3843580eab4844b48210.woff
    dash_mosaic/assets/main.js
    dash_mosaic/assets/style.css

located here: dash-mosaic/assets at main · pip-install-python/dash-mosaic · GitHub

You can turn them on and off with props:
showSplitButton=False, # Example: disabling the remove button
showExpandButton=True,
showRemoveButton=True,

showSplitButton currently doesn’t work and is still being worked on but that will ideally open up another screen of the same component.

show expandButton - works and will expand the window you click the expand button on

RemoveButton - works and will remove a window

  1. I thought it’s an interesting example to use the callback to show the changes in the mosaic layout property. Although I’m not sure yet in what scenarios I would use this inside a Dash app? Maybe it’s just good to know what the layout looks like programmatically…
  • this one is just to show the current layout, it could be useful as you adjust the size and percentage of individual windows you and dynamically set the application to what you’d like the dash-mosaic to render into like for example setting a percentage of how much you want a window to take up in comparison to other windows like in this example setting up the splitPercentage:
initial_layout = {
    'direction': 'row',
    'first': 1,
    'second': {
        'direction': 'column',
        'first': 2,
        'second': 3,
        'splitPercentage': 70,
    },
    'splitPercentage': 60,
}

Outside of this, all props should be able to be used in callbacks. So for example you can extend this by creating a button to hide or show the nav as a simple example.

  1. Lastly, if the user chooses to add another window while interacting with the app, how would they add content to that window? Would that be done through the Pattern Matching callback?

going to extend this functionality in the next update to dynamically add new windows a bit more work, but its on the road map. Currently only supports initial renders and not adding new windows

1 Like
4

That makes things a lot clearer. Thank you @PipInstallPython .
Looking forward to see what comes next :smiley: