fix: interactive legends should be toggleable by default (#7115)

* fix: interactive legends should be toggleable by default

* chore: update examples [CI]

* Update src/compile/selection/legends.ts

Co-authored-by: Dominik Moritz <[email protected]>

Co-authored-by: GitHub Actions Bot <[email protected]>
Co-authored-by: Dominik Moritz <[email protected]>

examples/compiled/interactive_global_development.vg.json

@@ -147,7 +147,7 @@
       "on": [
         {
           "events": {"signal": "year_tuple"},
-          "update": "modify(\"year_store\", year_toggle ? null : year_tuple, year_toggle ? null : true, year_toggle ? year_tuple : null)"
+          "update": "modify(\"year_store\", year_tuple, true)"
         }
       ]
     },

examples/compiled/interactive_legend.vg.json

@@ -96,6 +96,16 @@
       "name": "industry_tuple_fields",
       "value": [{"type": "E", "field": "series"}]
     },
+    {
+      "name": "industry_toggle",
+      "value": false,
+      "on": [
+        {
+          "events": {"merge": [{"source": "view", "type": "click"}]},
+          "update": "event.shiftKey"
+        }
+      ]
+    },
     {
       "name": "industry_modify",
       "on": [

examples/compiled/interactive_legend_dblclick.vg.json

@@ -96,6 +96,16 @@
       "name": "industry_tuple_fields",
       "value": [{"type": "E", "field": "series"}]
     },
+    {
+      "name": "industry_toggle",
+      "value": false,
+      "on": [
+        {
+          "events": {"merge": [{"source": "view", "type": "dblclick"}]},
+          "update": "event.shiftKey"
+        }
+      ]
+    },
     {
       "name": "industry_modify",
       "on": [

examples/compiled/interactive_query_widgets.vg.json

@@ -91,7 +91,7 @@
       "on": [
         {
           "events": {"signal": "CylYr_tuple"},
-          "update": "modify(\"CylYr_store\", CylYr_toggle ? null : CylYr_tuple, CylYr_toggle ? null : true, CylYr_toggle ? CylYr_tuple : null)"
+          "update": "modify(\"CylYr_store\", CylYr_tuple, true)"
         }
       ]
     }

examples/compiled/selection_bind_cylyr.vg.json

@@ -58,7 +58,7 @@
       "on": [
         {
           "events": {"signal": "CylYr_tuple"},
-          "update": "modify(\"CylYr_store\", CylYr_toggle ? null : CylYr_tuple, CylYr_toggle ? null : true, CylYr_toggle ? CylYr_tuple : null)"
+          "update": "modify(\"CylYr_store\", CylYr_tuple, true)"
         }
       ]
     }

examples/compiled/selection_bind_origin.vg.json

@@ -46,7 +46,7 @@
       "on": [
         {
           "events": {"signal": "org_tuple"},
-          "update": "modify(\"org_store\", org_toggle ? null : org_tuple, org_toggle ? null : true, org_toggle ? org_tuple : null)"
+          "update": "modify(\"org_store\", org_tuple, true)"
         }
       ]
     }

examples/compiled/trellis_selections.vg.json

@@ -445,28 +445,12 @@
           "update": "xenc_X !== null ? {fields: xenc_tuple_fields, values: [xenc_X]} : null"
         },
         {"name": "xenc_tuple_fields", "value": [{"type": "E", "field": "X"}]},
-        {
-          "name": "xenc_toggle",
-          "value": false,
-          "on": [
-            {
-              "events": [
-                {
-                  "source": "scope",
-                  "type": "mouseover",
-                  "markname": "child_voronoi"
-                }
-              ],
-              "update": "event.shiftKey"
-            }
-          ]
-        },
         {
           "name": "xenc_modify",
           "on": [
             {
               "events": {"signal": "xenc_tuple"},
-              "update": "modify(\"xenc_store\", xenc_toggle ? null : xenc_tuple, xenc_toggle ? null : true, xenc_toggle ? xenc_tuple : null)"
+              "update": "modify(\"xenc_store\", xenc_tuple, true)"
             }
           ]
         }

src/compile/selection/index.ts

@@ -50,7 +50,7 @@ export interface SelectionComponent<T extends SelectionType = SelectionType> {
   // Transforms
   project: SelectionProjectionComponent;
   scales?: SelectionProjection[];
-  toggle?: any;
+  toggle?: string;
   translate?: any;
   zoom?: any;
   nearest?: any;
@@ -119,4 +119,5 @@ export function requiresSelectionId(model: Model) {
 export function disableDirectManipulation(selCmpt: SelectionComponent, selDef: SelectionDef<'point'>) {
   if (isString(selDef.select) || !selDef.select.on) delete selCmpt.events;
   if (isString(selDef.select) || !selDef.select.clear) delete selCmpt.clear;
+  if (isString(selDef.select) || !selDef.select.toggle) delete selCmpt.toggle;
 }

src/compile/selection/legends.ts

@@ -24,7 +24,12 @@ const legendBindings: SelectionCompiler<'point'> = {
   },
 
   parse: (model, selCmpt, selDef) => {
-    disableDirectManipulation(selCmpt, selDef);
+    // Allow legend items to be toggleable by default even though direct manipulation is disabled.
+    const selDef_ = duplicate(selDef);
+    selDef_.select = isString(selDef_.select)
+      ? {type: selDef_.select, toggle: selCmpt.toggle}
+      : {...selDef_.select, toggle: selCmpt.toggle};
+    disableDirectManipulation(selCmpt, selDef_);
 
     if (isObject(selDef.select) && (selDef.select.on || selDef.select.clear)) {
       const legendFilter = 'event.item && indexof(event.item.mark.role, "legend") < 0';

src/compile/selection/toggle.ts

@@ -9,13 +9,11 @@ const toggle: SelectionCompiler<'point'> = {
   },
 
   signals: (model, selCmpt, signals) => {
-    return selCmpt.events
-      ? signals.concat({
-          name: selCmpt.name + TOGGLE,
-          value: false,
-          on: [{events: selCmpt.events, update: selCmpt.toggle}]
-        })
-      : signals;
+    return signals.concat({
+      name: selCmpt.name + TOGGLE,
+      value: false,
+      on: [{events: selCmpt.events, update: selCmpt.toggle}]
+    });
   },
 
   modifyExpr: (model, selCmpt) => {