Enhancement/weather dashboard

docs/tutorials/weather-dashboard.md

@@ -0,0 +1,141 @@
+# Tutorial: Building an Interactive Weather Dashboard
+
+In this tutorial, you will create a professional weather analysis dashboard that explores Seattle weather patterns from 2012-2015.
+
+By the end, you'll have built a complete interactive application with multi-year filtering, animated charts, and a modern Material UI design that works beautifully in both light and dark modes.
+
+<!-- <iframe src="https://www.youtube.com/embed/placeholder" title="Tutorial: Building a Weather Dashboard with HoloViz MCP" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="display:block;height:300px;width:500px;margin-left:auto;margin-right:auto"></iframe> -->
+
+!!! note "Prerequisites"
+    Before starting, ensure you have:
+
+    - An understanding of Python, [Panel](https://panel.holoviz.org/index.html), and data visualization concepts
+    - HoloViz MCP installed and configured ([Getting Started Guide](getting-started.md))
+    - VS Code with GitHub Copilot or another MCP-compatible AI assistant
+    - Configured the `HoloViz Planner` agent ([HoloViz Agents](copilot.md/#using-holoviz-agents))
+    - The HoloViz MCP server running ([How to start the server](getting-started.md/#start-the-server))
+
+## Step 1: Provide Context
+
+Before we start building, let's examine an existing project to understand the key elements of an effective weather visualization.
+
+- In VS Code, open the Copilot Chat interface
+- Click the **Pick Model** dropdown and select a **powerful model**
+- Click the **Set Agent** dropdown and select **Agent**
+- Ask the agent to read and summarize the context:
+
+```text
+For context please read and summarize https://altair-viz.github.io/case_studies/exploring-weather.html using the #fetch tool.
+```
+
+- Take a moment to review the summary. This summary will guide our dashboard design!
+
+## Step 2: Plan Your Dashboard
+
+Now that we have the context, let's use the *HoloViz Planner* agent to design our application architecture. This agent knows best practices for Panel dashboards and will create a comprehensive plan.
+
+- Select the **HoloViz Planner** agent
+- Then **ask**:
+
+```text
+Plan the most awesome dashboard for exploring the Seattle Weather dataset:
+
+- Enable the user to filter multiple years. Default is 2015.
+- Include plots for temperature and wind grouped by year
+- Include a plot by weather type
+- Include a table with the raw data
+- Use ECharts with awesome transitions
+- Use consistent and modern styling for the plots and Page
+
+Keep it simple:
+
+- clean, well-organized and well tested code
+```
+
+- Press Enter and wait for the HoloViz Planner to respond
+
+![HoloViz Planner](../assets/images/weather-dashboard-planner.png)
+
+!!! success "What you'll see"
+    The planner will provide a detailed architecture including:
+
+    - Data layer with caching and filtering functions
+    - Chart creation functions using ECharts
+    - Dashboard class with reactive parameters
+    - Recommendations for file organization
+    - Color palette suggestions
+
+Take time to read through the plan - it's the blueprint for your application!
+
+## Step 3: Implement the Dashboard
+
+With a solid plan in hand, let's bring it to life!
+
+- In the same Copilot Chat conversation, switch to the **Agent** and ask:
+
+```text
+Implement the plan outlined above.
+```
+
+- Wait for the agent to generate the complete implementation
+
+The agent follows the architecture plan we reviewed, ensuring clean separation of concerns.
+
+- Once the code is generated, the agent will create tests and run them
+
+You should see output like:
+
+```text
+✓ 23 tests passed
+✓ Server starting on port 5006
+```
+
+- Click the server URL to view your dashboard!
+
+![Dashboard Served](../assets/images/weather-dashboard-served.gif)
+
+!!! success "Checkpoint"
+    If you see an interactive dashboard with charts, filters, and a data table - congratulations! You've built a complete data application. Try:
+
+    - Selecting different years in the filter
+    - Hovering over the charts to see interactive tooltips
+    - Exploring the animated transitions when filters change
+
+## Step 4: Test and Fix the Dashboard
+
+- **Fix issues**: When testing the app, you might identify issues that you can ask the agent to fix.
+
+## Step 5: Fine-tune the Dashboard
+
+Once the dashboard is running, you can further fine-tune it:
+
+- **Add more visualizations**: Include humidity, pressure, or other weather metrics
+- **Style**: Improve the styling of the app.
+- **Download Data**: Add more or more buttons to enable the user to download the data
+- **Enhance interactivity**: Add cross-filtering between charts
+- **Documentation**: Add documentation
+
+## What You've Accomplished
+
+Congratulations! In this tutorial, you have:
+
+- ✅ Used the HoloViz Planner agent to design a complex dashboard architecture
+- ✅ Implemented a multi-file Python application with proper separation of concerns
+- ✅ Created animated, interactive charts with ECharts
+- ✅ Built a Material UI dashboard with professional styling
+- ✅ Implemented theme support for light and dark modes
+- ✅ Used reactive programming with Panel parameters
+- ✅ Debugged and fixed styling issues
+- ✅ Wrote and ran a comprehensive test suite
+- ✅ Created a shareable single-file version
+
+You now have a production-ready weather dashboard and the skills to build your own data applications!
+
+## Additional Resources
+
+- [Panel Documentation](https://panel.holoviz.org)
+- [Panel Material UI Components](https://github.com/awesome-panel/panel-material-ui)
+- [ECharts Documentation](https://echarts.apache.org/en/index.html)
+- [HoloViz Discourse](https://discourse.holoviz.org) - Share your creation!
+
+---

mkdocs.yml

@@ -97,6 +97,7 @@ nav:
         - Use the Display Server: tutorials/display-server.md
         - Use the Display Tool: tutorials/display-tool.md
         - Stock Analysis: tutorials/stock-analysis.md
+        - Weather Dashboard: tutorials/weather-dashboard.md
     - How-To Guides:
         - Install: how-to/installation.md
         - Configure your IDE: how-to/ide-configuration.md

pixi.toml

@@ -91,7 +91,7 @@ mkdocstrings-python = "*"
 mkdocs-pycafe = "*"
 
 [feature.docs.tasks]
-serve = "mkdocs serve"
+serve = "mkdocs serve --livereload"
 build = "mkdocs build"
 
 [environments]

pyproject.toml

@@ -90,6 +90,7 @@ pydata = [
     "altair",
     "duckdb",
     "polars",
+    "pytest",
     "scikit-learn",
     "seaborn",
     "yfinance",

src/holoviz_mcp/config/resources/skills/panel-material-ui.md

@@ -163,6 +163,7 @@ def test_characters_reactivity():
 - DO use `sizing_mode` parameter over `sx` css styling parameter
 - DO use Material UI `sx` parameter for all css styling over `styles` and `stylesheets`
 - DO use panel-material-ui components instead of panel components for projects already using panel-material-ui and for new projects
+- DON'T configure the `design`, i.e. DO NOT `pn.extension(design='material')`.
 
 ## Component Instructions
 
@@ -226,6 +227,7 @@ DO synchronize component themes with Page theme:
 ### Grid
 
 - DO set `spacing=2` or higher to separate sub components in the grid.
+- DO not use `ncols` keyword argument. It is not supported.
 
 ### Column/ Row
 
@@ -246,6 +248,14 @@ DON'T provide them as separate arguments:
 pmui.Row([child1, child2, child3,]) # DON'T
 ```
 
+### Paper
+
+DO change the default margin to 10px:
+
+```python
+pmui.Paper.param.margin.default=10
+```
+
 ### Switch
 
 - Do add `margin=(10, 20)` when displaying in the sidebar.
@@ -284,13 +294,16 @@ pmui.IconButton(icon=icon, disabled=True, ...)
 ```
 
 ### Static Components Pattern (Material UI)
+
 ```python
 import panel as pn
 import panel_material_ui as pmui
 import param
 
 pn.extension()
 
+pmui.Paper.param.margin.default=10
+
 class HelloWorld(pn.viewable.Viewer):
     characters = param.Integer(default=10, bounds=(1, 100), doc="Number of characters to display")
 

src/holoviz_mcp/config/resources/skills/panel.md

@@ -609,6 +609,37 @@ option = {
 
 If you need complex formatting logic, pre-process your data in Python before passing to ECharts rather than using formatters.
 
+**Reactive Updates with replaceMerge**:
+
+When updating ECharts dynamically (e.g., filtering data that changes the number of series), ECharts uses a **merge strategy** by default. This can cause old series to persist when series are removed.
+
+✅ **DO use `replaceMerge` option** when series count can change:
+```python
+# ✅ CORRECT: Use replaceMerge to fully replace series on updates
+chart_pane = pn.pane.ECharts(
+    self._chart_config,  # Reactive method or parameter
+    options={"replaceMerge": ["series"]},  # Replace series array instead of merging
+    sizing_mode="stretch_width",
+    height=400,
+)
+```
+
+❌ **WITHOUT replaceMerge** - old series persist:
+```python
+# ❌ WRONG: Old series remain when filtering reduces series count
+chart_pane = pn.pane.ECharts(
+    self._chart_config,
+    sizing_mode="stretch_width",
+)
+# If config changes from 4 series to 2, ECharts merges and keeps all 4!
+```
+
+Use `replaceMerge` for any chart where:
+
+- Users can filter data (year selectors, category filters)
+- The number of series changes dynamically
+- Data is grouped by categories that may be added/removed
+
 ### Date time widgets
 
 When comparing to date or time values to Pandas series convert to `Timestamp`: