From fa09820ac04f332ec3ca65bacd61f9b11313f8ab Mon Sep 17 00:00:00 2001 From: JessamineQ Date: Wed, 10 Apr 2024 23:17:27 -0400 Subject: [PATCH 1/2] For interactive charts, changed cursor to pointer (also updated tests) --- src/compile/mark/mark.ts | 1 + test/compile/compile.test.ts | 14 ++++++++++++++ test/compile/selection/layers.test.ts | 9 +++++++++ 3 files changed, 24 insertions(+) diff --git a/src/compile/mark/mark.ts b/src/compile/mark/mark.ts index 74e241b4ff..1746bd729b 100644 --- a/src/compile/mark/mark.ts +++ b/src/compile/mark/mark.ts @@ -313,6 +313,7 @@ function getMarkGroup(model: UnitModel, opt: {fromPrefix: string} = {fromPrefix: const key = encoding.key; const sort = getSort(model); const interactive = interactiveFlag(model); + interactive ? (model.markDef.cursor ??= 'pointer') : {}; const aria = getMarkPropOrConfig('aria', markDef, config); const postEncodingTransform = markCompiler[mark].postEncodingTransform diff --git a/test/compile/compile.test.ts b/test/compile/compile.test.ts index e4667bdc07..cbd065b7da 100644 --- a/test/compile/compile.test.ts +++ b/test/compile/compile.test.ts @@ -573,3 +573,17 @@ describe('compile/compile', () => { expect(spec.autosize['resize']).toBeTruthy(); }); }); + +it('should generate right cursor', () => { + 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'}); +}); diff --git a/test/compile/selection/layers.test.ts b/test/compile/selection/layers.test.ts index 050b085935..1b1b81a55c 100644 --- a/test/compile/selection/layers.test.ts +++ b/test/compile/selection/layers.test.ts @@ -81,6 +81,9 @@ describe('Layered Selections', () => { ariaRoleDescription: { value: 'circle' }, + cursor: { + value: 'pointer' + }, description: { signal: '"Horsepower: " + (format(datum["Horsepower"], "")) + "; Miles_per_Gallon: " + (format(datum["Miles_per_Gallon"], "")) + "; Origin: " + (isValid(datum["Origin"]) ? datum["Origin"] : ""+datum["Origin"])' @@ -129,6 +132,9 @@ describe('Layered Selections', () => { ariaRoleDescription: { value: 'square' }, + cursor: { + value: 'pointer' + }, description: { signal: '"Horsepower: " + (format(datum["Horsepower"], "")) + "; Miles_per_Gallon: " + (format(datum["Miles_per_Gallon"], "")) + "; Origin: " + (isValid(datum["Origin"]) ? datum["Origin"] : ""+datum["Origin"])' @@ -172,6 +178,9 @@ describe('Layered Selections', () => { ariaRoleDescription: { value: 'point' }, + cursor: { + value: 'pointer' + }, description: { signal: '"Horsepower: " + (format(datum["Horsepower"], "")) + "; Miles_per_Gallon: " + (format(datum["Miles_per_Gallon"], "")) + "; Origin: " + (isValid(datum["Origin"]) ? datum["Origin"] : ""+datum["Origin"])' From 05677b34e0d5b5a75dd2c2d4fb566728247ba8f7 Mon Sep 17 00:00:00 2001 From: JessamineQ Date: Mon, 13 May 2024 23:52:32 -0500 Subject: [PATCH 2/2] updated to only change cursor to pointer for interactive charts with point selection (rather than interval) and no binding --- src/compile/mark/mark.ts | 16 ++++++++++- test/compile/compile.test.ts | 40 ++++++++++++++++++++++++++- test/compile/selection/layers.test.ts | 9 ------ 3 files changed, 54 insertions(+), 11 deletions(-) diff --git a/src/compile/mark/mark.ts b/src/compile/mark/mark.ts index 1746bd729b..aa6e69c60f 100644 --- a/src/compile/mark/mark.ts +++ b/src/compile/mark/mark.ts @@ -313,7 +313,21 @@ function getMarkGroup(model: UnitModel, opt: {fromPrefix: string} = {fromPrefix: const key = encoding.key; const sort = getSort(model); const interactive = interactiveFlag(model); - interactive ? (model.markDef.cursor ??= 'pointer') : {}; + + let isPoint = false; + let isBind = false; + if (model.component.selection) { + for (const k of keys(model.component.selection)) { + if (model.component.selection[k].bind) { + isBind = true; + } + if (model.component.selection[k].type == 'point') { + isPoint = true; + } + } + } + interactive && isPoint && !isBind ? (model.markDef.cursor ??= 'pointer') : {}; + const aria = getMarkPropOrConfig('aria', markDef, config); const postEncodingTransform = markCompiler[mark].postEncodingTransform diff --git a/test/compile/compile.test.ts b/test/compile/compile.test.ts index cbd065b7da..e589bd0ebd 100644 --- a/test/compile/compile.test.ts +++ b/test/compile/compile.test.ts @@ -574,7 +574,7 @@ describe('compile/compile', () => { }); }); -it('should generate right cursor', () => { +it('should generate right cursor for point selection', () => { const {spec} = compile({ data: {url: 'data/population.json'}, params: [{name: 'select', select: 'point'}], @@ -587,3 +587,41 @@ it('should generate right cursor', () => { 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(); +}); diff --git a/test/compile/selection/layers.test.ts b/test/compile/selection/layers.test.ts index 1b1b81a55c..050b085935 100644 --- a/test/compile/selection/layers.test.ts +++ b/test/compile/selection/layers.test.ts @@ -81,9 +81,6 @@ describe('Layered Selections', () => { ariaRoleDescription: { value: 'circle' }, - cursor: { - value: 'pointer' - }, description: { signal: '"Horsepower: " + (format(datum["Horsepower"], "")) + "; Miles_per_Gallon: " + (format(datum["Miles_per_Gallon"], "")) + "; Origin: " + (isValid(datum["Origin"]) ? datum["Origin"] : ""+datum["Origin"])' @@ -132,9 +129,6 @@ describe('Layered Selections', () => { ariaRoleDescription: { value: 'square' }, - cursor: { - value: 'pointer' - }, description: { signal: '"Horsepower: " + (format(datum["Horsepower"], "")) + "; Miles_per_Gallon: " + (format(datum["Miles_per_Gallon"], "")) + "; Origin: " + (isValid(datum["Origin"]) ? datum["Origin"] : ""+datum["Origin"])' @@ -178,9 +172,6 @@ describe('Layered Selections', () => { ariaRoleDescription: { value: 'point' }, - cursor: { - value: 'pointer' - }, description: { signal: '"Horsepower: " + (format(datum["Horsepower"], "")) + "; Miles_per_Gallon: " + (format(datum["Miles_per_Gallon"], "")) + "; Origin: " + (isValid(datum["Origin"]) ? datum["Origin"] : ""+datum["Origin"])'