Re-using transforms between marks and iterating once

[dleeftink]

Say we have an expensive selection/mapping/transformation that needs to be re-used between marks (example notebook):

// Complex transform that filters data where d.freq > 0
// and maps selection to return extent values {x1,x2}

const commonTransform = Plot.selectFirst(
  Plot.map(
    { x1: (d) => [d[0], undefined], x2: (d) => [d[1], undefined] }, // Needs to match 'x' column length
    Plot.select(
      {
        x: (I, Y) => {
          let selection = I.map((i) => ({ idx: i, ...long[i] })).filter(
            (d) => d.freq > 10, // just for demonstration
          );
          const sel = [selection[0]?.idx, selection.at(-1)?.idx];
          return sel;
        },
      },
      {
        x: "x",
      },
    ),
  ),
);

// Setting up two rulers that re-use the common transform, with different dy offsets 
const RangeA = Plot.ruleY(data, {
  ...commonTransform,
  y: 0,
  fx: (d) => fx(d.key),
  fy: (d) => fy(d.key),
  dy: 5,
  stroke: "red",
  strokeWidth: 1,
  shapeRendering: "crispEdges",
});

const RangeB = Plot.ruleY(data, {
  ...commonTransform,
  y: 0,
  fx: (d) => fx(d.key),
  fy: (d) => fy(d.key),
  dy: 10,
  strokeWidth: 2,
  stroke: "black",
  marker: "circle",
});

This will calculate the transform twice, once per mark. Now we could simply apply the filtering/mapping beforehand on the data array or provide a custom render function with some caching logic, but I would like to see if there is a more idiomatic way to re-use Plot's built-in transforms when the underlying data remains the same.

[Fil]

The simple answer is… no. I also note that the transform you're applying disregards the facets, is that on purpose?

[dleeftink]

Not on purpose, no. I'm possibly looking at the nesting from the wrong side in, as I imagined the facetting to be applied after the commonTransform had been merged into RangeA/RangeB (eyeing the plot, facetting appears to work as intended).

In any case, the underlying transform would ideally be shared by both marks.

[dleeftink]

I've settled on a simple caching approach, but I might be overlooking something: I am now passing the data twice (to retrieve a datum at a certain index) to both an inner caching (cachedTransform) and outer plotting (Plot.ruleY) function. While I could switch the function order around, I am wondering if I can access the original data object from within the cachedTransform itself? This way any Plot.mark can remain the outer function for consistency. Example: https://observablehq.com/d/f75b229a2a5185d8

 const RangeA = Plot.ruleY(data, {
    ...cachedTransform({
      data, // How to access the parent data inside the cached transform?
      cache,
      x: "x",
      y: 0,
      fx: (d) => fx(d.key),
      fy: (d) => fy(d.key),
      dy: 5,
      insetLeft: 10,
      insetRight: 10,
      stroke: "red",
      strokeWidth: 1,
      shapeRendering: "crispEdges"
    })
  });

  // Second ruler re-uses the cached results
  const RangeB = Plot.ruleY(data, {
    ...cachedTransform({
      data,
      cache,
      x: "x",
      y: 0,
      fx: (d) => fx(d.key),
      fy: (d) => fy(d.key),
      dy: 10,
      strokeWidth: 1,
      stroke: "black",
      marker: "circle"
    })
  });