Synchronized Selections

Can someone show me how to use signals to synchronize two selections within two vconcat plots which share the same data?

1. The selection of the first plot is bound to its scales (interactive) and tied to the x encoding.
2. The selection of the second plot is tied to the x encoding.

At no time should the selections differ.

This is known as overview+detail display. Unlike the scale domain method it is bidirectional. See the performance plots of Chrome's developer tools for an example. You can use the scale domain example as a baseline:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "selection": {
        "s1": {
          "type": "interval",
          "encodings": ["x"],
          "bind": "scales"
        }
      },
      "width": 480,
      "mark": "area",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "axis": {"title": ""}
        },
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "selection": {
        "s2": {
          "type": "interval",
          "encodings": ["x"]
        }
      },
      "width": 480,
      "height": 60,
      "mark": "area",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}

Edit: Doing this in JavaScript does not work:

vegaEmbed('#vis', vegalitespec).then(function(result) {
    result.view.addDataListener("s1_store", async function(name, value) {
        if (Object.is(value[0], result.view.data("s2_store")[0]))
            return;
        await result.view.data("s2_store", value).runAsync();
    });
    result.view.addDataListener("s2_store", async function(name, value) {
        if (Object.is(value[0], result.view.data("s1_store")[0]))
            return;
        await result.view.data("s1_store", value).runAsync();
    });
}).catch(console.error);

Edit: This may not be possible due to the nested scopes of vconcat. I can wire a one-way binding as with scale domains; the reverse remains elusive. Still, a few approaches remain untested. Such as creating a nested signal handler in either JavaScript or Vega (assuming outer scopes are accessible), or patching VegaLite to push the "s1_x" signal to the outer scope.

vegaEmbed('#vis', vegalitespec3).then(async function(result) {
  result.view.addSignalListener("s1", function(name, value){
    result.view.signal("s2_date", value.date);
    result.view.runAsync();
  });
                
  result.view.addSignalListener("s2", function(name, value){
    // todo: handle bounds / null
    if (!value.date)
      return;
    // This does not work with individual plots. Maybe it has
    // been rewired as writable in vconcat plots. Result: nope.
    //result.view.signal("s1", value);
    // Thanks to nested scopes, "s1_x" is not available.
    //result.view.signal("s1_x", value.date.map(result.view.scale("concat_1_x")));
    // How about editing the runtime dataflow object? Result: nope.
    //result.view._runtime.subcontext[1].signals.s1_x.value = value.date.map(result.view.scale("concat_1_x"));
    result.view.runAsync();
  });

}).catch(console.error);