Hexalith EventStore — UI Refresh Patterns

Hexalith EventStore — UI Refresh Patterns

This sample demonstrates three approaches for handling projection change invalidation signals from EventStore via SignalR. Each pattern uses the EventStoreSignalRClient to subscribe to the "changed" signal — a notification that contains only (projectionType, tenantId) with no data payload. Patterns must re-query the EventStore to get updated data.

Pattern Comparison

Pattern
UX Impact
Implementation Effort
Best Use Case
1: NotificationLeast disruptive — user controls refreshLowDashboards, admin panels
2: Silent ReloadRefreshes seamlessly after received signalsLowLive monitoring, counters
3: Selective RefreshBest — only affected components updateMediumComplex dashboards, multi-panel UIs

Recommended Learning Order

  1. Pattern 2: Silent Reload — Simplest (~20 lines). Data re-queries automatically on received signals with debounce. Start here for immediate gratification.
  2. Pattern 1: Notification — Adds user control. A persistent message bar prompts the user to refresh when data changes. No layout shifts until user acts.
  3. Pattern 3: Selective Refresh — Most sophisticated. Each component manages its own subscription and refreshes independently. Best UX but more implementation effort.

How to Run

  1. Start the Aspire AppHost: dotnet run --project src/Hexalith.EventStore.AppHost
  2. Verify EventStore is running with SignalR enabled (EventStore:SignalR:Enabled = true). The Aspire topology configures this automatically.
  3. Authentication is handled automatically by the sample UI. In local dev without Keycloak it generates a development JWT for tenant-a. When Keycloak is enabled, it requests a demo token using the Aspire-wired realm configuration.
  4. Open the Blazor UI URL from the Aspire dashboard (look for "sample-blazor-ui" resource).
  5. Try the patterns: Navigate using the sidebar. Use the Counter domain sample to trigger projection changes and observe each pattern's behavior.