{"id":42005637,"url":"https://github.com/pip-install-python/dash-mosaic","last_synced_at":"2026-01-26T01:38:11.554Z","repository":{"id":265789135,"uuid":"861081704","full_name":"pip-install-python/dash-mosaic","owner":"pip-install-python","description":"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.","archived":false,"fork":false,"pushed_at":"2025-11-13T04:45:47.000Z","size":8200,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-13T06:20:23.171Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pip-install-python.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-22T00:23:46.000Z","updated_at":"2025-11-13T04:45:50.000Z","dependencies_parsed_at":"2024-11-30T23:59:20.847Z","dependency_job_id":null,"html_url":"https://github.com/pip-install-python/dash-mosaic","commit_stats":null,"previous_names":["pip-install-python/dash-mosaic"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pip-install-python/dash-mosaic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash-mosaic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash-mosaic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash-mosaic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash-mosaic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pip-install-python","download_url":"https://codeload.github.com/pip-install-python/dash-mosaic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash-mosaic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28764158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T00:37:26.264Z","status":"ssl_error","status_checked_at":"2026-01-26T00:37:25.959Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-26T01:38:11.043Z","updated_at":"2026-01-26T01:38:11.549Z","avatar_url":"https://github.com/pip-install-python.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Mosaic\n\n[![PyPI](https://img.shields.io/pypi/v/dash-mosaic.svg)](https://pypi.org/project/dash-mosaic/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nDash Mosaic is a powerful, flexible layout component for Dash applications that enables resizable, draggable multi-pane layouts. Built on top of [react-mosaic-component](https://github.com/nomcopter/react-mosaic-component) and integrated with [Blueprint.js](https://blueprintjs.com/), it provides an intuitive interface for organizing complex dashboards.\n\n![Dash Mosaic Demo](https://imgur.com/yBAK6si.gif)\n\n## Features\n\n- **Flexible Multi-Pane Layouts** - Create sophisticated split-view interfaces with hierarchical row and column arrangements\n- **Interactive Controls** - Built-in split, expand, and remove buttons for dynamic layout reconfiguration\n- **Drag-to-Resize** - Intuitive drag handles between panes for resizing\n- **Multiple Themes** - Choose between Blueprint (light), Blueprint Dark, or custom styling\n- **Responsive Design** - Mobile-friendly with optional navbar and adaptive controls\n- **Rich Content Support** - Embed any Dash components including maps, charts, calendars, and custom visualizations\n- **Layout Callbacks** - Track and respond to layout changes through Dash callbacks\n- **Customizable Titles** - Set custom titles for each window pane\n\n## Installation\n\n```bash\npip install dash-mosaic\n```\n\nThat's it! All assets (fonts, CSS, JavaScript) are automatically included and served by Dash when you install the package. No manual copying required.\n\n## Quick Start\n\nHere's a simple example to get you started:\n\n```python\nimport dash\nfrom dash import html\nfrom dash_mosaic import DashMosaic\n\napp = dash.Dash(__name__)\n\n# Define a three-pane layout: left pane and right split into top/bottom\ninitial_layout = {\n    'direction': 'row',\n    'first': 1,\n    'second': {\n        'direction': 'column',\n        'first': 2,\n        'second': 3,\n    },\n    'splitPercentage': 40,\n}\n\n# Define content for each pane\ntile_content = {\n    1: html.Div(\"Content for pane 1\", style={'padding': '20px'}),\n    2: html.Div(\"Content for pane 2\", style={'padding': '20px'}),\n    3: html.Div(\"Content for pane 3\", style={'padding': '20px'}),\n}\n\napp.layout = html.Div([\n    DashMosaic(\n        id='mosaic',\n        layout=initial_layout,\n        theme='Blueprint Dark',\n        tileContent=tile_content,\n        style={'height': '95vh'},\n        windowTitles={1: \"Left Panel\", 2: \"Top Right\", 3: \"Bottom Right\"},\n        showSplitButton=True,\n        showExpandButton=True,\n        showRemoveButton=True,\n        showNavbar=True\n    )\n])\n\nif __name__ == '__main__':\n    app.run(debug=True)\n```\n\n## Layout Configuration\n\n### Single Pane Layout\n\nFor a simple single-pane layout, just use a number:\n\n```python\nlayout = 1\n```\n\n### Multi-Pane Layout\n\nFor split layouts, use a nested dictionary structure:\n\n```python\nlayout = {\n    'direction': 'row',           # 'row' for horizontal, 'column' for vertical split\n    'first': 1,                   # Left/top pane (can be a number or nested layout)\n    'second': 2,                  # Right/bottom pane (can be a number or nested layout)\n    'splitPercentage': 40,        # Optional: percentage allocated to first pane (default: 50)\n}\n```\n\n### Complex Nested Example\n\n```python\nlayout = {\n    'direction': 'row',\n    'first': 1,\n    'second': {\n        'direction': 'column',\n        'first': {\n            'direction': 'row',\n            'first': 2,\n            'second': 3,\n        },\n        'second': 4,\n    },\n    'splitPercentage': 30,\n}\n```\n\n## Component Properties\n\n### DashMosaic\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `id` | string | - | The ID used to identify this component in Dash callbacks |\n| `layout` | dict or int | - | The layout configuration (number for single pane, dict for splits) |\n| `theme` | string | 'Blueprint' | Theme selection: 'Blueprint', 'Blueprint Dark', or 'None' |\n| `tileContent` | dict | - | Dictionary mapping pane IDs to Dash components |\n| `windowTitles` | dict | - | Dictionary mapping pane IDs to custom title strings |\n| `style` | dict | - | Inline CSS styles for the mosaic container |\n| `showSplitButton` | bool | True | Show/hide the split button in tile toolbar |\n| `showExpandButton` | bool | True | Show/hide the expand button in tile toolbar |\n| `showRemoveButton` | bool | True | Show/hide the remove button in tile toolbar |\n| `showNavbar` | bool | True | Show/hide the top navbar with theme selector |\n| `zeroStateView` | component | - | Component to display when layout is empty |\n\n## Advanced Examples\n\n### Using with Dash Leaflet Maps\n\n```python\nimport dash_leaflet as dl\n\ntile_content = {\n    1: html.Div([\n        dl.Map([\n            dl.TileLayer(\n                url=\"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\"\n            ),\n        ], center=[56, 10], zoom=6,\n           style={'width': '100%', 'height': '100%'},\n           id=\"map\")\n    ], style={\"width\": \"100%\", \"height\": \"100%\", \"position\": \"relative\"})\n}\n```\n\n### Tracking Layout Changes with Callbacks\n\n```python\nfrom dash import Output, Input\n\n@app.callback(\n    Output('output', 'children'),\n    Input('mosaic', 'layout')\n)\ndef display_output(layout):\n    return f'Current layout: {layout}'\n```\n\n### Dynamic Content Updates\n\n```python\nfrom dash import Output, Input, State\n\n@app.callback(\n    Output('mosaic', 'tileContent'),\n    Input('update-button', 'n_clicks'),\n    State('mosaic', 'layout')\n)\ndef update_content(n_clicks, current_layout):\n    # Update content based on user interaction\n    new_content = {\n        1: html.Div(f\"Updated content - Click {n_clicks}\"),\n        2: html.Div(\"Static content\"),\n    }\n    return new_content\n```\n\n### Custom Styling\n\n```python\napp.layout = html.Div([\n    DashMosaic(\n        id='mosaic',\n        layout=initial_layout,\n        theme='None',  # Use custom CSS\n        tileContent=tile_content,\n        style={\n            'height': '100vh',\n            'backgroundColor': '#f5f5f5',\n        }\n    )\n])\n```\n\n## Theming\n\nDash Mosaic supports three built-in themes:\n\n- **Blueprint** - Clean light theme with Blueprint.js styling\n- **Blueprint Dark** - Dark mode theme\n- **None** - No built-in styling (use your own CSS)\n\nChange themes dynamically through the navbar dropdown or programmatically via the `theme` prop.\n\n## Development\n\n### Setup Development Environment\n\n```bash\n# Clone the repository\ngit clone https://github.com/pip-install-python/dash-mosaic.git\ncd dash-mosaic\n\n# Install Python dependencies\npip install dash\u003e=2.0.0\n\n# Install Node dependencies\nnpm install\n\n# Start development server\nnpm start\n```\n\n### Build Process\n\n```bash\n# Build JavaScript bundle\nnpm run build:js\n\n# Generate Python/R/Julia bindings\nnpm run build:backends\n\n# Full build (both JS and bindings)\nnpm run build\n```\n\n### Running Tests\n\n```bash\npytest\n```\n\n## Contributing\n\nContributions are welcome! Here are some areas where we'd especially appreciate help:\n\n- **Additional Examples** - Create examples with different visualization libraries\n- **Documentation** - Improve API documentation and tutorials\n- **Testing** - Expand test coverage\n- **Performance Optimization** - Improve rendering performance for complex layouts\n\nPlease see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n### Reporting Issues\n\nIf you encounter bugs or have feature requests, please [open an issue](https://github.com/pip-install-python/dash-mosaic/issues) on GitHub.\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## Credits\n\n- Built on [react-mosaic-component](https://github.com/nomcopter/react-mosaic-component) by Palantir\n- UI components from [Blueprint.js](https://blueprintjs.com/)\n- Created with [Dash Component Boilerplate](https://github.com/plotly/dash-component-boilerplate)\n\n## Resources\n\n- **Documentation:** [GitHub Wiki](https://github.com/pip-install-python/dash-mosaic)\n- **Examples:** See `usage.py` for a complete example\n- **Dash Documentation:** https://dash.plotly.com/\n- **React Mosaic:** https://github.com/nomcopter/react-mosaic-component\n\n## Support\n\nFor questions and support:\n- Open an [issue](https://github.com/pip-install-python/dash-mosaic/issues) on GitHub\n- Check existing issues for solutions\n- Review the `usage.py` example file\n\n---\n\nBuilt with by [Pip Install Python](https://github.com/pip-install-python)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpip-install-python%2Fdash-mosaic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpip-install-python%2Fdash-mosaic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpip-install-python%2Fdash-mosaic/lists"}