feature: Added pan and zoom functionality to the graph

CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add pan and zoom controls for large pipeline graphs. Users can now:
+  - Scroll to zoom in/out (centered on cursor position)
+  - Click and drag to pan the view
+  - Use pinch gestures on touch devices
+  - Use control buttons for zoom in, zoom out, reset, and fit-to-view
+
+  To enable, add `BroadwayDashboard.Hooks` to your LiveDashboard `on_mount` configuration.
+  Addresses [#17](https://github.com/dashbitco/broadway_dashboard/issues/17).
+
+### Changed
+
+- Require `phoenix_live_dashboard` version 0.8.5 or later (was 0.8.0).
+
 ## [0.4.1] - 2024-01-09
 
 ### Fixed

README.md

@@ -15,6 +15,31 @@ See [Distribution](#distribution) for details.
 
 ![Broadway Dashboard](https://raw.githubusercontent.com/dashbitco/broadway_dashboard/4da2a5f388a7579d41b63803652796c106b74785/priv/static/broadway-dashboard-01.gif)
 
+## Pan and Zoom
+
+For pipelines with large numbers of concurrent processors or batchers, you can use the
+pan and zoom controls to navigate the pipeline graph:
+
+- **Scroll to zoom**: Use your mouse wheel to zoom in and out (centered on cursor position)
+- **Drag to pan**: Click and drag to move the view around
+- **Touch support**: Pinch to zoom and drag to pan on touch devices
+- **Control buttons**: Use the buttons in the top-right corner:
+  - `+` / `-` for zoom in/out
+  - Reset button to return to default view
+  - Fit button to fit the entire pipeline in view
+
+To enable pan/zoom functionality, add `BroadwayDashboard.Hooks` to your LiveDashboard configuration:
+
+```elixir
+live_dashboard "/dashboard",
+  additional_pages: [
+    broadway: BroadwayDashboard
+  ],
+  on_mount: [BroadwayDashboard.Hooks]
+```
+
+**Note:** This feature requires `phoenix_live_dashboard` version 0.8.5 or later.
+
 ## Integration with Phoenix LiveDashboard
 
 You can add this page to your Phoenix LiveDashboard by adding as a page in

dev.exs

@@ -171,7 +171,8 @@ defmodule DemoWeb.Router do
       allow_destructive_actions: true,
       additional_pages: [
         broadway: BroadwayDashboard
-      ]
+      ],
+      on_mount: [BroadwayDashboard.Hooks]
     )
   end
 end

lib/broadway_dashboard.ex

@@ -276,7 +276,17 @@ defmodule BroadwayDashboard do
     ~H"""
     <.row>
       <:col>
-        <.live_layered_graph layers={@layers} id="pipeline" title="Pipeline" hint={@hint} background={&background/1} format_detail={&format_detail/1} />
+        <div id="pipeline-zoom-container" class="broadway-pipeline-zoom-container">
+          <div id="pipeline-zoom-controls" phx-update="ignore" data-panzoom-controls class="broadway-pipeline-zoom-controls">
+            <button type="button" data-zoom-in title="Zoom in">+</button>
+            <button type="button" data-zoom-out title="Zoom out">-</button>
+            <span data-zoom-level class="broadway-pipeline-zoom-level">100%</span>
+            <button type="button" data-zoom-reset title="Reset zoom">&#8634;</button>
+            <button type="button" data-zoom-fit title="Fit to view">&#9744;</button>
+          </div>
+          <.live_layered_graph layers={@layers} id="pipeline" title="Pipeline" hint={@hint} background={&background/1} format_detail={&format_detail/1} />
+          <div class="broadway-pipeline-zoom-hint">Scroll to zoom, drag to pan</div>
+        </div>
       </:col>
     </.row>
     """

lib/broadway_dashboard/hooks.ex

@@ -0,0 +1,68 @@
+defmodule BroadwayDashboard.Hooks do
+  @moduledoc """
+  LiveView hooks for Broadway Dashboard pan/zoom functionality.
+
+  This module provides an `on_mount` callback that registers the JavaScript
+  hooks required for pan/zoom functionality on the pipeline graph.
+
+  ## Usage
+
+  Add this module to your LiveDashboard configuration in your router:
+
+      live_dashboard "/dashboard",
+        additional_pages: [
+          broadway: BroadwayDashboard
+        ],
+        on_mount: [BroadwayDashboard.Hooks]
+
+  The hooks will automatically be injected into the page head, enabling
+  pan/zoom functionality on the pipeline visualization.
+
+  ## Features
+
+  - **Mouse wheel zoom**: Scroll to zoom in/out, centered on cursor position
+  - **Drag to pan**: Click and drag to move the view
+  - **Touch support**: Pinch to zoom and drag to pan on touch devices
+  - **Zoom controls**: Buttons for zoom in, zoom out, reset, and fit-to-view
+
+  ## Manual JavaScript Setup (Alternative)
+
+  If you prefer to bundle the JavaScript yourself instead of using `on_mount`:
+
+  1. Copy `priv/static/js/broadway_dashboard.js` to your assets
+  2. Import and register the hooks with your LiveSocket:
+
+      ```javascript
+      import BroadwayDashboardHooks from "./broadway_dashboard.js"
+
+      let liveSocket = new LiveSocket("/live", Socket, {
+        hooks: { ...BroadwayDashboardHooks }
+      })
+      ```
+
+  Note: When using the manual setup, you don't need to add this module
+  to the `on_mount` configuration.
+  """
+
+  import Phoenix.Component
+
+  alias Phoenix.LiveDashboard.PageBuilder
+
+  @doc """
+  Callback for `on_mount` that registers the Broadway Dashboard JavaScript hooks.
+  """
+  def on_mount(:default, _params, _session, socket) do
+    {:cont, PageBuilder.register_after_opening_head_tag(socket, &after_opening_head_tag/1)}
+  end
+
+  defp after_opening_head_tag(assigns) do
+    ~H"""
+    <script nonce={@csp_nonces[:script]}>
+      <%= Phoenix.HTML.raw(BroadwayDashboard.PanZoom.javascript_code()) %>
+    </script>
+    <style nonce={@csp_nonces[:style]}>
+      <%= Phoenix.HTML.raw(BroadwayDashboard.PanZoom.css_code()) %>
+    </style>
+    """
+  end
+end