feat: for interactive charts, changed cursor to pointer

examples/compiled/concat_bar_layer_circle.vg.json

@@ -303,6 +303,7 @@
           "from": {"data": "data_3"},
           "encode": {
             "update": {
+              "cursor": {"value": "pointer"},
               "fill": [
                 {
                   "test": "!length(data(\"pts_store\")) || vlSelectionTest(\"pts_store\", datum)",

examples/compiled/dynamic_color_legend.vg.json

@@ -497,6 +497,7 @@
           "from": {"data": "data_1"},
           "encode": {
             "update": {
+              "cursor": {"value": "pointer"},
               "fill": [
                 {
                   "test": "!length(data(\"click_store\")) || vlSelectionTest(\"click_store\", datum)",

examples/compiled/interactive_concat_layer.vg.json

@@ -313,6 +313,7 @@
           "from": {"data": "data_3"},
           "encode": {
             "update": {
+              "cursor": {"value": "pointer"},
               "fill": [
                 {
                   "test": "!length(data(\"pts_store\")) || vlSelectionTest(\"pts_store\", datum)",

examples/compiled/interactive_global_development.vg.json

@@ -295,6 +295,7 @@
         "update": {
           "opacity": {"value": 0.9},
           "size": {"value": 100},
+          "cursor": {"value": "pointer"},
           "fill": {"scale": "color", "field": "name"},
           "ariaRoleDescription": {"value": "circle"},
           "description": {

examples/compiled/interactive_layered_crossfilter_discrete.vg.json

@@ -259,6 +259,7 @@
           "from": {"data": "data_6"},
           "encode": {
             "update": {
+              "cursor": {"value": "pointer"},
               "fill": {"value": "#ddd"},
               "ariaRoleDescription": {"value": "bar"},
               "description": {
@@ -414,6 +415,7 @@
           "from": {"data": "data_7"},
           "encode": {
             "update": {
+              "cursor": {"value": "pointer"},
               "fill": {"value": "#ddd"},
               "ariaRoleDescription": {"value": "bar"},
               "description": {
@@ -569,6 +571,7 @@
           "from": {"data": "data_2"},
           "encode": {
             "update": {
+              "cursor": {"value": "pointer"},
               "fill": {"value": "#ddd"},
               "ariaRoleDescription": {"value": "bar"},
               "description": {

examples/compiled/interactive_point_init.vg.json

@@ -101,6 +101,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": [
             {
               "test": "!length(data(\"CylYr_store\")) || vlSelectionTest(\"CylYr_store\", datum)",

examples/compiled/interactive_seattle_weather.vg.json

@@ -492,6 +492,7 @@
           "from": {"data": "data_1"},
           "encode": {
             "update": {
+              "cursor": {"value": "pointer"},
               "fill": [
                 {
                   "test": "!length(data(\"click_store\")) || vlSelectionTest(\"click_store\", datum)",

examples/compiled/interactive_stocks_nearest_index.vg.json

@@ -147,6 +147,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": {"value": "#4c78a8"},
           "ariaRoleDescription": {"value": "point"},

examples/compiled/param_expr.vg.json

@@ -72,6 +72,7 @@
         "update": {
           "opacity": {"signal": "opacityVar/100"},
           "size": {"signal": "sel.Miles_per_Gallon * 10 || 75"},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": {"value": "#4c78a8"},
           "ariaRoleDescription": {"value": "point"},

examples/compiled/selection_heatmap.vg.json

@@ -95,6 +95,7 @@
       "encode": {
         "update": {
           "strokeWidth": {"value": 2},
+          "cursor": {"value": "pointer"},
           "fill": {"scale": "fill", "field": "count"},
           "stroke": [
             {

examples/compiled/selection_insert.vg.json

@@ -66,6 +66,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": [
             {
               "test": "!length(data(\"paintbrush_store\")) || vlSelectionIdTest(\"paintbrush_store\", datum)",

examples/compiled/selection_project_multi.vg.json

@@ -77,6 +77,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_project_multi_cylinders.vg.json

@@ -77,6 +77,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_project_multi_cylinders_origin.vg.json

@@ -80,6 +80,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_project_multi_origin.vg.json

@@ -74,6 +74,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_project_single.vg.json

@@ -66,6 +66,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_project_single_cylinders.vg.json

@@ -66,6 +66,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_project_single_cylinders_origin.vg.json

@@ -69,6 +69,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_project_single_origin.vg.json

@@ -63,6 +63,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": {"value": "transparent"},
           "stroke": [
             {

examples/compiled/selection_toggle_altKey.vg.json

@@ -77,6 +77,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": [
             {
               "test": "!length(data(\"paintbrush_store\")) || vlSelectionIdTest(\"paintbrush_store\", datum)",

examples/compiled/selection_toggle_altKey_shiftKey.vg.json

@@ -77,6 +77,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": [
             {
               "test": "!length(data(\"paintbrush_store\")) || vlSelectionIdTest(\"paintbrush_store\", datum)",

examples/compiled/selection_toggle_shiftKey.vg.json

@@ -77,6 +77,7 @@
       "encode": {
         "update": {
           "opacity": {"value": 0.7},
+          "cursor": {"value": "pointer"},
           "fill": [
             {
               "test": "!length(data(\"paintbrush_store\")) || vlSelectionIdTest(\"paintbrush_store\", datum)",

examples/compiled/selection_type_point.vg.json

@@ -85,6 +85,7 @@
       "from": {"data": "source_0"},
       "encode": {
         "update": {
+          "cursor": {"value": "pointer"},
           "fill": [
             {
               "test": "!length(data(\"pts_store\")) || vlSelectionIdTest(\"pts_store\", datum)",

examples/compiled/selection_type_single_dblclick.vg.json

@@ -85,6 +85,7 @@
       "from": {"data": "source_0"},
       "encode": {
         "update": {
+          "cursor": {"value": "pointer"},
           "fill": [
             {
               "test": "!length(data(\"pts_store\")) || vlSelectionIdTest(\"pts_store\", datum)",

examples/compiled/vconcat_flatten.vg.json

@@ -151,6 +151,7 @@
           "encode": {
             "update": {
               "opacity": {"value": 0.7},
+              "cursor": {"value": "pointer"},
               "fill": [
                 {
                   "test": "!length(data(\"pts_store\")) || vlSelectionTest(\"pts_store\", datum)",

examples/specs/interactive_bar_select_highlight.vl.json

@@ -18,8 +18,7 @@
   "mark": {
     "type": "bar",
     "fill": "#4C78A8",
-    "stroke": "black",
-    "cursor": "pointer"
+    "stroke": "black"
   },
   "encoding": {
     "x": {"field": "a", "type": "ordinal"},

src/compile/mark/init.ts

@@ -61,7 +61,8 @@ export function initMarkdef(originalMarkDef: MarkDef, encoding: Encoding<string>
     markDef.opacity = opacity(markDef.type, encoding);
   }
 
-  // set cursor, which should be pointer if href channel is present unless otherwise specified
+  // Set cursor, which should be pointer if href channel is present unless otherwise specified.
+  // We will also set the cursor in parse via getMarkGroup since we need access to the selections.
   const specifiedCursor = getMarkPropOrConfig('cursor', markDef, config);
   if (specifiedCursor === undefined) {
     markDef.cursor = cursor(markDef, encoding, config);

src/compile/mark/mark.ts

@@ -277,6 +277,21 @@ function getMarkGroup(model: UnitModel, opt: {fromPrefix: string} = {fromPrefix:
   const key = encoding.key;
   const sort = getSort(model);
   const interactive = interactiveFlag(model);
+
+  // set pointer cursor for point selections that are not bound
+  if (
+    interactive &&
+    Object.values(model.component.selection).some(
+      s =>
+        s.type === 'point' &&
+        !s.bind &&
+        // if on is a pointerover (hover) the pointer makes less sense since the mark is not clickable.
+        (s as any).on !== 'pointerover'
+    )
+  ) {
+    model.markDef.cursor ??= 'pointer';
+  }
+
   const aria = getMarkPropOrConfig('aria', markDef, config);
 
   const postEncodingTransform = markCompiler[mark].postEncodingTransform

test/compile/compile.test.ts

@@ -573,3 +573,55 @@ describe('compile/compile', () => {
     expect(spec.autosize['resize']).toBeTruthy();
   });
 });
+
+it('should generate right cursor for point selection', () => {
+  const {spec} = compile({
+    data: {url: 'data/population.json'},
+    params: [{name: 'select', select: 'point'}],
+    mark: 'bar',
+    encoding: {
+      x: {field: 'a', type: 'ordinal'},
+      y: {field: 'b', type: 'quantitative'}
+    }
+  });
+
+  expect(spec.marks[0].encode.update.cursor).toEqual({value: 'pointer'});
+});
+
+it('should not generate cursor for point selection with binding', () => {
+  const {spec} = compile({
+    data: {url: 'data/population.json'},
+    params: [
+      {
+        name: 'highlight',
+        value: [{Cylinders: 4, Year: 1977}],
+        select: {type: 'point', fields: ['Cylinders', 'Year']},
+        bind: {
+          Cylinders: {input: 'range', min: 3, max: 8, step: 1},
+          Year: {input: 'range', min: 1969, max: 1981, step: 1}
+        }
+      }
+    ],
+    mark: 'bar',
+    encoding: {
+      x: {field: 'a', type: 'ordinal'},
+      y: {field: 'b', type: 'quantitative'}
+    }
+  });
+
+  expect(spec.marks[0].encode.update.cursor).toBeUndefined();
+});
+
+it('should not generate cursor for interval selection', () => {
+  const {spec} = compile({
+    data: {url: 'data/population.json'},
+    params: [{name: 'brush', select: {type: 'interval', encodings: ['x']}}],
+    mark: 'bar',
+    encoding: {
+      x: {field: 'a', type: 'ordinal'},
+      y: {field: 'b', type: 'quantitative'}
+    }
+  });
+
+  expect(spec.marks[0].encode.update.cursor).toBeUndefined();
+});