Allow marks to be skipped for rendering

Many examples use transparency to hide the marks when not needed, but this is a hack - the object is still there, and it still reacts to events. I would like to propose a new mark parameter to allow for mark’s “skipping”, e.g. "skip": {"expr": "..."} (or disable) During rendering of each mark, if skip is set to true, mark will not be rendered.

This graph represents a common scenario of showing all data (green box), but when clicked, show a drill-down data (red). The drill down mode has a “show all” button. In order to show and hide this button, I create a dummy data source with a single element, and filter that element out if the button should not be shown.

In Vega 2.0 it was possible to do this without creating an extra wrapping group, but Vega 3 does not allow filtering.

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width":400,
  "height":100,
  
  "signals": [
    {
      "name": "isEnabled",
      "value": false,
      "on": [
        {"events": "@mygraph:click", "update": "true"},
        {"events": "@button:click", "update": "false"}
      ]
    }
  ],
  "marks": [
    {
      "type": "rect",
      "name": "mygraph",
      "encode": {
        "update": {
          "width": {"value": 100},
          "height": {"value": 100},
          "fill": {"signal": "isEnabled ? '#f00' : '#0f0'"}
        }
      }
    },
    {
      "type": "group",
      "data": [
        {
          "name": "dataForShowAll",
          "values": [{}],
          "transform": [{"type": "filter", "expr": "isEnabled"}]
        }
      ],
      "encode": {
        "enter": {
          "xc": {"signal": "width/2"},
          "y": {"value": 30},
          "width": {"value": 80},
          "height": {"value": 30}
        }
      },
      "marks": [
        {
          "type": "group",
          "name": "button",
          "from": {"data": "dataForShowAll"},
          "encode": {
            "enter": {
              "cornerRadius": {"value": 6},
              "fill": {"value": "#f5f5f5"},
              "stroke": {"value": "#c1c1c1"},
              "strokeWidth": {"value": 2},
              "height": {"signal": "item.mark.group.height"},
              "width": {"signal": "item.mark.group.width"}
            },
            "update": {"opacity": {"value": 1}},
            "hover": {"opacity": {"value": 0.7}}
          },
          "marks": [
            {
              "type": "text",
              "interactive": false,
              "encode": {
                "enter": {
                  "xc": {"signal": "item.mark.group.width/2"},
                  "yc": {"signal": "item.mark.group.height/2 + 2"},
                  "align": {"value": "center"},
                  "baseline": {"value": "middle"},
                  "fontWeight": {"value": "bold"},
                  "text": {"value": "Show All"}
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

[dankrusi]

Such a Vega feature on the mark level would be very useful. Almost all my Vega-hacks revolve around not being able to disable or display:none elements using a signal.

[dankrusi]

Hi @TaridaGeorge ,

Thanks for the question: we would rather have a display-type property (as to a CSS-visibility type) that will disable any sort of rendering and processing for the mark and/or group mark children, including any side effects the mark would otherwise generate (like influencing the layout). This would greatly help in making more complex interactive charts and keeping performance up; also for charts that automatically reconfigure based on the data.

I’m not convinced “display” would be the best name for such a property, maybe “enabled”?

I would also be happy with your “visible” proposal, but could use the fully disabled mark setting much more.

RE “Is there any way to hide all the children from a group mark as of v5?”: According to the docs not officially. See https://vega.github.io/vega/docs/marks/group/ and https://github.com/vega/vega/blob/master/packages/vega-scenegraph/src/marks/group.js.