Skip to content

Instantly share code, notes, and snippets.

@antonycourtney

antonycourtney/DiamondExample.md

Last active May 6, 2024 05:21
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save antonycourtney/7befeef57075159f4743 to your computer and use it in GitHub Desktop.
Save antonycourtney/7befeef57075159f4743 to your computer and use it in GitHub Desktop.
Download ZIP
A real world example of recombinant / diamond wiring and feedback with RxJS
Raw
DiamondExample.md

A realistic RxJS app with diamond wiring

Consider the following user interface (inspired by Strava) for looking at time-series charts of network data:

esnet-estes-charts

Notes on this interface and my Rx implementation of it:

  • Each chart (stacked vertically) charts a different metric (latency, packet loss and throughput) but over the same time period.
  • As the user moves the mouse left and right on any chart, the vertical line (called the tracker) moves to track the mouse position on all charts. The number displayed in the gray box on the right is the value underneath the tracker for that metric.
  • It's essential that the values shown for all metrics reflect the same point in time. For this reason, the trackers on all charts always move in lock step -- moving the mouse left or right moves all trackers, not just the tracker for the chart under the mouse.
  • While there are multiple ways to model this problem in Rx, my modular interface to charts and trackers ended up with a diamond wiring pattern. To me this seemed like a reasonable and natural expression of the requirement that all trackers move in lock-step, not something artificial or contrived.
  • The smaller charts underneath the main chart show a thumbnail view of the main charts to show the time period of the main charts in the context of a larger time period. The transparent rectangle overlays (towards the right end of the charts here) indicates the time period of the main charts. (Google Finance charts work much the same way).
  • The user can change the time period of the main charts by dragging with the mouse, or by using the scroll wheel to zoom in and out, or by dragging the transparent overlay in the lower context window.
  • The transparent overlay in the context window adjusts its position and width in response to pan and zoom events from the main charts, and the time period shown in the main charts respond to pan and zoom events in the lower context displays. All charts should always display data for the same time period. Different metrics may be stored on different time servers and take differing, non-trivial amount of time to fetch data for a given period and resolution.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment