Forum Discussion

vfridkin's avatar
vfridkin
New Member
2 years ago

deneb vega - after cross filtering with brushed selection, brushed area disappears when moved

This is related to a previous question however it is a new issue.  (Please don't drag it into the previous question as it is different).

I have a deneb vega line chart next to a core table visual, both source the same data.  The x-axis can be brushed.  Clicking on the 'button' (which is a text mark in the top left with text 'activate filter') sends a cross filter to the table.  Here's an example where values 5-7 are brushed in the chart, then the button is clicked and the table is filtered.

The problem is if the brushed area is then moved (by dragging with the mouse) then it disappears.  Before activating the cross filter, the brushed area can be moved around fine.  

Also, if the brushed area is moved and the mouseup occurs outside the chart, then it doesn't disappear and the button can be clicked again and the process repeated.

 

How can I avoid having to move the mouse away from the chart when moving the brushed area?

 

pbix file

 

{
  "data": [
    {
      "name": "dataset",
      "transform": [
        {
          "type": "extent",
          "field": "x",
          "signal": "extent_x"
        }
      ]
    },
    // get dataset on refresh 
    {
      "name": "selected",
      "source": "dataset",
      "transform": [
        {
          "type": "filter",
          "expr": "datum.__selected__ == 'on'"
        },
        {
          "type": "extent",
          "field": "x",
          "signal": "extent_sel_x"
        }
      ]
    }
  ],
  "width": 500,
  "height": 500,
  "signals": [
    {
      "name": "colour",
      "value": "blue"
    },
    {
      "name": "c",
      "update": "(481)/(1+extent_x[1]-extent_x[0])"
    },
    {
      "name": "brush_init",
      "update": "[(extent_sel_x[0]-1)*c, extent_sel_x[1]*c]"
    },
    // brush
    {
      "name": "brush",
      "init": "brush_init",
      "on": [
        {
          "events": "@main:pointerdown",
          "update": "[x(), x()]"
        },
        {
          "events": "[@main:pointerdown, window:pointerup] > window:pointermove!",
          "update": "[round(brush[0]/c)*c, clamp(round(x()/c)*c, 0, width)]"
        },
        {
          "events": {
            "signal": "delta"
          },
          "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
        }
      ]
    },
    // anchor
    {
      "name": "anchor",
      "value": null,
      "on": [
        {
          "events": "@brush:pointerdown",
          "update": "slice(brush)"
        }
      ]
    },
    // xdown
    {
      "name": "xdown",
      "value": 0,
      "on": [
        {
          "events": "@brush:pointerdown",
          "update": "x()"
        }
      ]
    },
    // delta
    {
      "name": "delta",
      "value": 0,
      "on": [
        {
          "events": "[@brush:pointerdown, window:pointerup] > window:pointermove!",
          "update": "round((x() - xdown)/c)*c"
        }
      ]
    },
    // main_brush
    {
      "name": "main_brush",
      // "push": "outer",
      "on": [
        {
          "events": {
            "signal": "brush"
          },
          "update": "span(brush) ? invert('x_scale', brush) : null"
        }
      ]
    },
    // cross filter start ------------------------------------------
    {
      "name": "pbiCrossFilterSelection",
      "value": [],
      "on": [
        // when mark is brushed apply cross filter
        {
          "events": {
            "markname": "activate_filter",
            "type": "click"
          },
          "update": "pbiCrossFilterApply(event, \"datum['x'] >= main_brush[0] & datum['x'] <= main_brush[1]\" )"
        }
      ]
    }
    // cross filter end ------------------------------------------
  ],
  "scales": [
    {
      "name": "x_scale",
      "range": "width",
      "zero": false,
      "padding": {
        "signal": "c/2"
      },
      "domain": {
        "data": "dataset",
        "field": "x"
      }
    },
    {
      "name": "y_scale",
      "range": "height",
      "padding": 10,
      "domain": {
        "data": "dataset",
        "field": "y"
      }
    }
  ],
  "marks": [
    {
      "name": "activate_filter",
      "type": "text",
      "encode": {
        "enter": {
          "xc": {
            "value": 10
          },
          "yc": {
            "value": 10
          },
          "text": {
            "value": "activate filter"
          }
        }
      }
    },
    {
      "name": "main",
      "type": "group",
      "encode": {
        "enter": {
          "x": {
            "value": 0
          },
          "y": {
            "value": 20
          },
          "height": {
            "signal": "height"
          },
          "width": {
            "signal": "width"
          },
          "fill": {
            "value": "transparent"
          }
        }
      },
      "axes": [
        {
          "orient": "bottom",
          "scale": "x_scale"
        },
        {
          "orient": "left",
          "scale": "y_scale"
        }
      ],
      "marks": [
        // main line chart
        {
          "name": "main_line",
          "type": "line",
          "from": {
            "data": "dataset"
          },
          "encode": {
            "enter": {
              "x": {
                "scale": "x_scale",
                "field": "x"
              },
              "y": {
                "scale": "y_scale",
                "field": "y"
              }
            },
            "update": {
              "stroke": {
                "signal": "colour"
              }
            }
          }
        },
        // brush area mark
        {
          "type": "rect",
          "name": "brush",
          "encode": {
            "enter": {
              "y": {
                "value": 0
              },
              "height": {
                "signal": "height"
              },
              "fill": {
                "value": "#333"
              },
              "fillOpacity": {
                "value": 0.2
              }
            },
            "update": {
              "x": {
                "signal": "brush[0]"
              },
              "x2": {
                "signal": "brush[1]"
              }
            }
          }
        }
      ]
    }
  ]
}

 

 

1 Reply

  • I'm still stuck on this one so help would be really appreciated.  What is puzzling is that it clears the filter without clicking on the 'activate filter' text.  That should not happen as the cross filter is only defined for clicking on this text.  

    Another observation is that it seems that after applying the cross filter from the visual, clicking anywhere on the visual, such as outside the chart area but inside the visual boundary, will reset the brush and send a cross filter clear message.