Skip to content

Instantly share code, notes, and snippets.

@shaunlebron

shaunlebron/intro.md

Last active February 25, 2021 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shaunlebron/bb011695f5511b86ce674064dbcb9f45 to your computer and use it in GitHub Desktop.
Save shaunlebron/bb011695f5511b86ce674064dbcb9f45 to your computer and use it in GitHub Desktop.
Download ZIP
PingThings and Mr. Plotter
Raw
intro.md
Raw
plotter.md

Son of Mr. Plotter

We explored different ways of polishing some parts of Mr. Plotter in our own implementation.

Auto-fit Y-axis

Mr. Plotter Son of Plotter
auto-fit-mr auto-fit
click button to auto-fit auto-fit periodically or double-click

Density Bar

Mr. Plotter Son of Plotter
samples-mr samples
off by default, shows absolute density always on, relative density, tucks away

Drawing raw points

Mr. Plotter Son of Plotter
points-mr points
switches to points when raw transitions to points, keeps lines

Microsecond-friendly scale

Mr. Plotter Son of Plotter
zoom-mr zoom-jr
snaps to milliseconds snaps to microseconds

Single Date

Mr. Plotter Son of Plotter
date-mr date
date on each side single context date shared by all ticks

Next Steps

  1. Connect to backend
  2. UI for Stream selection
  3. Get in front of users
Raw
z_caching.md

Windows

The UI cannot hold all data for a stream at once—there's too much. So it should think of the data it needs in terms of "windows".

For example, the current window of data needed to draw a given plot view is represented in the center below. It is also useful to have left and right windows of data on hand, since the user should immediately see some data when panning or zooming out.

|--------------------|--------------------|--------------------|
|                    |                    |                    |
|    LEFT WINDOW     |   CURRENT WINDOW   |   RIGHT WINDOW     |
|                    |   (what we see)    |                    |
|                    |                    |                    |
|                    |                    |                    |
|--------------------|--------------------|--------------------|

Mr. Plotter seems to be do this.

Caching Windows

We can reduce network load by keeping some windows in memory.

The caching method should be tuned to the behavior of our users, but our basic choices are to discard windows that are furthest in time or space from the current view:

  • time - discard least recently used windows
  • space - discard windows furthest from current view

Some ideas below to get a feel for possibilities:

Discard based on panning distance

For example, if the user pans the plot to the right, we can keep some of the previous windows, but they should be discarded after reaching some distance from the current view.

|---------|---------|---------|---------|---------|---------|---------|
|    X    |         |         |         | LEFT    | CURRENT |  RIGHT  |
|---------|---------|---------|---------|---------|---------|---------|
     ^
     | discard window when too far from current view

Discard previous windows when zooming

If we really want to keep caching simple, we can add to the previous method by discarding the entire cache when zooming.

|---------|---------|---------|---------|---------|---------|---------|
|    X    |    X    |    X    |    X    |    X    |    X    |    X    |
|---------|---------|---------|---------|---------|---------|---------|

                                   ^
                                   | discard all previous windows when zooming

    |--------------------|--------------------|--------------------|
    |                    |                    |                    |
    |         LEFT       |      CURRENT       |       RIGHT        |
    |                    |                    |                    |
    |                    |                    |                    |
    |                    |                    |                    |
    |--------------------|--------------------|--------------------|

Discard based on tree distance

If we want to keep windows across resolutions, we can discard windows based on some kind of distance function, using panning distance as one dimension and resolution distance (tree levels) as another.

|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| X | X | X | X |   |   |   |   |   |   |   |   |   |   | X | X | X | X |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|

 |---------|---------|---------|---------|---------|---------|---------|
 |    X    |         |         |         |         |         |    X    |
 |---------|---------|---------|---------|---------|---------|---------|

                      discard windows across resolutions
                       when too far from current window

     |--------------------|--------------------|--------------------|
     |                    |                    |                    |
     |         LEFT       |      CURRENT       |       RIGHT        |
     |                    |                    |                    |
     |                    |                    |                    |
     |                    |                    |                    |
     |--------------------|--------------------|--------------------|

The "center" from which we measure the distance should probably be the last zooming point rather than just using the middle of the screen, which will allow the user to scroll to quickly return to their previous zoom.

Discard based on recency

We can number our windows by time of access, and periodically discard those that are a certain distance from our current time, when a certain capacity is reached.

(windows numbered by time of access)

|---|---|---|---|       |---|---|---|---|---|           |---|---|---|---|
| 1 | 2 | 3 | 4 |       | 8 | 9 | 10| 11| 12|           | 17| 18| 18| 18|
|---|---|---|---|       |---|---|---|---|---|           |---|---|---|---|
  X   X   X   X           X   X

 |---------|---------|---------|---------|---------|---------|---------|
 |    5    |    6    |    7    |   13    |   15    |   16    |   16    |
 |---------|---------|---------|---------|---------|---------|---------|
      X         X         X

                      discard windows based on distance
                       from current time (say t=18)

     |--------------------|--------------------|--------------------|
     |                    |                    |                    |
     |        14          |         14         |       14           |
     |                    |                    |                    |
     |                    |                    |                    |
     |                    |                    |                    |
     |--------------------|--------------------|--------------------|

When to fetch windows

We will have to determine when to fetch our windows. Some ideas:

  • When zooming, debounce a call to update the resolution.
  • When panning outside the current window, immediately retrieve the next window
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment