Unfilter mark by brush deselection

Question

I have a text mark and two area marks concatenated vertically (related to my earlier question). The area marks each have a parameter brush and area 2 brush controls the domain of area 1. Unlike my earlier question, I'm using the brushed areas to filter the dataset instead of using the brushed dates directly in the text mark - this enables setting up further calculations on the filtered dataset. For now, I just display the filtered time range.

The issue I have is when I deselect both brushes, the filter does not update and remains filtered on the last brushed values. The dates highlighted here should show between 2000 and 2010 instead of the previously filtered values because the brush has been deselected.

How can this filter be made to clear on deselecting the both brushes?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
    "title": "text mark:",
    "width": 480,
    "mark": "text",
    "transform": [
      {
        "joinaggregate": [
          {
            "op": "min",
            "field": "date",
            "as": "min_date"
          },
          {
            "op": "max",
            "field": "date",
            "as": "max_date"
          }
        ]
      },
      {
        "calculate": "brush1.date?brush1.date[0]:brush2.date?brush2.date[0]:datum.min_date",
        "as": "min_date"
      },
      {
        "calculate": "brush1.date?brush1.date[1]:brush2.date?brush2.date[1]:datum.max_date",
        "as": "max_date"
      },
      {
        "filter": "datum.date >= datum.min_date & datum.date <= datum.max_date"
      }
    ],
      "encoding": {
        "text": {
   "value":{"expr": "timeFormat(datum.min_date, '%d %b %Y') + ' to ' + timeFormat(datum.max_date, '%d %b %Y')"}
        }
      }
    },
    {
    "title": "area mark 1:",
    "width": 480,
    "mark": "area",
    "params": [{
      "name": "brush1",
      "select": {"type": "interval", "encodings": ["x"]}
    }],
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal",
        "scale": {"domain": {"param": "brush2"}},
        "axis": {"title": ""}
      },
      "y": {"field": "price", "type": "quantitative"}
    }
  }, {
    "title": "area mark 2:",
    "width": 480,
    "height": 60,
    "mark": "area",
    "params": [{
      "name": "brush2",
      "select": {"type": "interval", "encodings": ["x"]}
    }],
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal"
      },
      "y": {
        "field": "price",
        "type": "quantitative",
        "axis": {"tickCount": 3, "grid": false}
      }
    }
  }]
}

Answer 1

This works.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "params": [
    {"name": "a", "expr": "brush1.date?true:false"},
    {"name": "b", "expr": "brush2.date?true:false"},
    
  ],
  "vconcat": [
    {
      "title": "text mark:",
      "width": 480,
      "mark": "text",
      "transform": [
         {"extent": "date", "param": "c"},
        {
          "joinaggregate": [
            {"op": "min", "field": "date", "as": "min_date"},
            {"op": "max", "field": "date", "as": "max_date"}
          ]
        },
        {
          "calculate": "a?brush1.date[0]:b?brush2.date[0]:datum.min_date",
          "as": "min_date"
        },
        {
          "calculate": "a?brush1.date[1]:b?brush2.date[1]:datum.max_date",
          "as": "max_date"
        },
        {
          "filter": "datum.date >= datum.min_date & datum.date <= datum.max_date"
        }
      ],
      "encoding": {
        "text": {
          "value": {
            "expr": "timeFormat(a?brush1.date[0]:b?brush2.date[0]:c[0], '%d %b %Y') + ' to ' + timeFormat(a?brush1.date[1]:b?brush2.date[1]:c[1], '%d %b %Y')"
          }
        }
      }
    },
    {
      "title": "area mark 1:",
      "width": 480,
      "mark": "area",
      "params": [
        {"name": "brush1", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "scale": {"domain": {"param": "brush2"}},
          "axis": {"title": ""}
        },
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "title": "area mark 2:",
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush2", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}