pipeline.md

Compile-Eval-Render Pipeline

Summary of the render process that happens on every tick (pan/zoom) in the graph.

Compile-Eval-Render pipeline for intervals

Let's assume we call functionPlot with the following configuration (note that graphType: 'interval' is the default):

functionPlot({
  target: '#playground',
  data: [
    { fn: 'x^2' }
  ]
})

There are multiple compute heavy steps that happen in the rendering pipeline:

• Compile + Eval
  • compile fn to a *-eval function (see interval-arithmetic-eval or built-in-math-eval), the evaluated function is added to the configuration object which becomes.

{
  "target": "#playground",
  "data": [
    {
      "fn": "x^2",
      "interval_Expression_fn": "x^2",
      "interval_Compiled_fn": {
        "code": "return $$mathCodegen.functionProxy($$mathCodegen.getProperty(\"pow\", scope, ns), \"pow\")($$mathCodegen.getProperty(\"x\", scope, ns), ns.factory(2))",
        "eval": function(scope) {
          scope = scope || {};
          $$processScope(scope);
          return $$mathCodegen.functionProxy(
            $$mathCodegen.getProperty("pow", scope, ns), "pow")($$mathCodegen.getProperty("x", scope, ns), ns.factory(2)
          )
        }
      },
    }
  ]
}

• The above interval_ prefixed values are cached so that when functionPlot is invoked the compilation isn't run many times.
• use nSamples to create nSamples equally distinct points, e.g. [x_0, x_1, ..., x_{n_samples - 1}]
• In O(n), iterate over all the points and evaluate each them against the compiled function evaluator (created in the preparation stage), return a data structure that encodes the result (Array<Array<[Interval, Interval]> | null>)
• Render
  • In O(n) iterate over all the results and create a <path d={rectanglePaint} /> where rectanglePaint is a series of commands of the form M <x> <y> v <width> which move to (x, y) and paint a rectangle of width width.

Perf stats

Using npm run perf:pipeline for fn: 1/x:

┌─────────┬───────────────────────────────┬─────────┬────────────────────┬──────────┬─────────┐
│ (index) │           Task Name           │ ops/sec │ Average Time (ns)  │  Margin  │ Samples │
├─────────┼───────────────────────────────┼─────────┼────────────────────┼──────────┼─────────┤
│    0    │    'compile and eval 1000'    │ '1,002' │ 997696.8855496896  │ '±4.88%' │   502   │
│    1    │ 'async compile and eval 1000' │ '2,300' │ 434699.05905056576 │ '±3.51%' │  1151   │
└─────────┴───────────────────────────────┴─────────┴────────────────────┴──────────┴─────────┘
┌─────────┬─────────────────┬─────────┬────────────────────┬──────────┬─────────┐
│ (index) │    Task Name    │ ops/sec │ Average Time (ns)  │  Margin  │ Samples │
├─────────┼─────────────────┼─────────┼────────────────────┼──────────┼─────────┤
│    0    │ 'drawPath 1000' │ '8,375' │ 119393.74110532468 │ '±1.32%' │  4188   │
└─────────┴─────────────────┴─────────┴────────────────────┴──────────┴─────────┘