From a09beecc722224032be388193f5701508a9874f7 Mon Sep 17 00:00:00 2001 From: ellvix Date: Wed, 13 Dec 2023 20:55:35 -0700 Subject: [PATCH] Updated to change name from 'elements' to 'selector' to better match conventions --- src/js/barplot.js | 18 +++---- src/js/boxplot.js | 7 +-- src/js/controls.js | 2 +- src/js/heatmap.js | 8 +--- src/js/histogram.js | 8 +--- src/js/lineplot.js | 8 +--- src/js/scatterplot.js | 48 +++++-------------- src/js/segmented.js | 10 ++-- user_study_pilot/task1_bar_plot.html | 2 +- user_study_pilot/task2_heatmap.html | 2 +- .../task3_boxplot_horizontal.html | 2 +- user_study_pilot/task3_boxplot_vertical.html | 2 +- user_study_pilot/task4_scatterplot.html | 8 ++-- user_study_pilot/tutorial1_bar_plot.html | 2 +- user_study_pilot/tutorial2_heatmap.html | 2 +- .../tutorial3_boxplot_horizontal.html | 2 +- .../tutorial3_boxplot_vertical.html | 2 +- user_study_pilot/tutorial4_scatterplot.html | 8 ++-- user_study_pilot/tutorial5_histogram.html | 2 +- user_study_pilot/tutorial6_lineplot.html | 5 +- user_study_pilot/tutorial7_stacked.html | 5 +- .../tutorial8_stacked_normalized.html | 4 +- user_study_pilot/tutorial9_dodged_bar.html | 4 +- 23 files changed, 50 insertions(+), 111 deletions(-) diff --git a/src/js/barplot.js b/src/js/barplot.js index 3a29f316..ad082d45 100644 --- a/src/js/barplot.js +++ b/src/js/barplot.js @@ -23,25 +23,21 @@ class BarChart { data = singleMaidr.data; } let elements = null; - if ('elements' in singleMaidr) { - if (typeof singleMaidr.elements === 'string') { - elements = document.querySelectorAll(singleMaidr.elements); - } else { - elements = singleMaidr.elements; - } + if ('selector' in singleMaidr) { + elements = document.querySelectorAll(singleMaidr.selector); } if (xlevel && data && elements) { if (elements.length != data.length) { // I didn't throw an error but give a warning constants.hasRect = 0; - logError.logDifferentLengths('elements', 'data'); + logError.LogDifferentLengths('elements', 'data'); } else if (xlevel.length != elements.length) { constants.hasRect = 0; - logError.logDifferentLengths('x level', 'elements'); + logError.LogDifferentLengths('x level', 'elements'); } else if (data.length != xlevel.length) { constants.hasRect = 0; - logError.logDifferentLengths('x level', 'data'); + logError.LogDifferentLengths('x level', 'data'); } else { this.bars = elements; constants.hasRect = 1; @@ -49,7 +45,7 @@ class BarChart { } else if (data && elements) { if (data.length != elements.length) { constants.hasRect = 0; - logError.logDifferentLengths('data', 'elements'); + logError.LogDifferentLengths('data', 'elements'); } else { this.bars = elements; constants.hasRect = 1; @@ -57,7 +53,7 @@ class BarChart { } else if (xlevel && data) { if (xlevel.length != data.length) { constants.hasRect = 0; - logError.logDifferentLengths('x level', 'data'); + logError.LogDifferentLengths('x level', 'data'); } logError.LogAbsentElement('elements'); } else if (data) { diff --git a/src/js/boxplot.js b/src/js/boxplot.js index 6b3dc0be..3c4d642b 100644 --- a/src/js/boxplot.js +++ b/src/js/boxplot.js @@ -100,7 +100,7 @@ class BoxPlot { this.plotData = singleMaidr.data; // bounds data - if ('elements' in singleMaidr) { + if ('selector' in singleMaidr) { this.plotBounds = this.GetPlotBounds(); constants.hasRect = true; } else { @@ -195,10 +195,7 @@ class BoxPlot { let plotBounds = []; let allWeNeed = this.GetAllSegmentTypes(); let re = /(?:\d+(?:\.\d*)?|\.\d+)/g; - let elements = - typeof singleMaidr.elements == 'string' - ? document.querySelector(singleMaidr.elements) - : singleMaidr.elements; + let elements = document.querySelector(singleMaidr.selector); // get initial set of elements, a parent element for all outliers, whiskers, and range let initialElemSet = []; diff --git a/src/js/controls.js b/src/js/controls.js index 02146e68..6310e301 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -542,7 +542,7 @@ class Control { } let rect; constants.hasRect = false; - if ('elements' in singleMaidr) { + if ('selector' in singleMaidr) { rect = new BoxplotRect(); constants.hasRect = true; } diff --git a/src/js/heatmap.js b/src/js/heatmap.js index c9a8e108..01c5f0a4 100644 --- a/src/js/heatmap.js +++ b/src/js/heatmap.js @@ -32,12 +32,8 @@ class HeatMap { } } let elements = null; - if ('elements' in singleMaidr) { - if (typeof singleMaidr.elements == 'string') { - elements = document.querySelectorAll(singleMaidr.elements); - } else { - elements = singleMaidr.elements; - } + if ('selector' in singleMaidr) { + elements = document.querySelectorAll(singleMaidr.selector); } // if (xlevel && ylevel && data && elements) { diff --git a/src/js/histogram.js b/src/js/histogram.js index 81dd78b0..43edfa26 100644 --- a/src/js/histogram.js +++ b/src/js/histogram.js @@ -19,12 +19,8 @@ class Histogram { } // elements (optional) this.bars = null; - if ('elements' in singleMaidr) { - if (typeof singleMaidr.elements == 'string') { - this.bars = document.querySelectorAll(singleMaidr.elements); - } else { - this.bars = singleMaidr.elements; - } + if ('selector' in singleMaidr) { + this.bars = document.querySelectorAll(singleMaidr.selector); } // labels (optional) diff --git a/src/js/lineplot.js b/src/js/lineplot.js index b7db2c76..2d05ef25 100644 --- a/src/js/lineplot.js +++ b/src/js/lineplot.js @@ -68,12 +68,8 @@ class LinePlot { */ SetLineLayer() { let elements; - if ('elements' in singleMaidr) { - if (typeof singleMaidr.elements == 'string') { - elements = document.querySelectorAll(singleMaidr.elements); - } else { - elements = singleMaidr.elements; - } + if ('selector' in singleMaidr) { + elements = document.querySelectorAll(singleMaidr.selector); } let len = elements.length; diff --git a/src/js/scatterplot.js b/src/js/scatterplot.js index 2e103e99..639e4eb6 100644 --- a/src/js/scatterplot.js +++ b/src/js/scatterplot.js @@ -137,19 +137,11 @@ class ScatterPlot { // initially set as smooth layer (layer 2), if possible let elIndex = this.GetElementIndex('point'); if (elIndex != -1) { - if (typeof singleMaidr.elements[elIndex] == 'string') { - this.plotPoints = document.querySelectorAll( - singleMaidr.elements[elIndex] - ); - } else { - this.plotPoints = elements[elIndex]; - } + this.plotPoints = document.querySelectorAll( + singleMaidr.selector[elIndex] + ); } else if (singleMaidr.type == 'point') { - if (typeof singleMaidr.elements == 'string') { - this.plotPoints = document.querySelectorAll(singleMaidr.elements); - } else { - this.plotPoints = elements; - } + this.plotPoints = document.querySelectorAll(singleMaidr.selector); } if (typeof this.plotPoints !== 'undefined') { let svgPointCoords = this.GetSvgPointCoords(); @@ -174,19 +166,11 @@ class ScatterPlot { // layer = 2, smooth layer (from singleMaidr types) let elIndex = this.GetElementIndex('smooth'); if (elIndex != -1) { - if (typeof singleMaidr.elements[elIndex] == 'string') { - this.plotLine = document.querySelectorAll( - singleMaidr.elements[elIndex] - )[0]; - } else { - this.plotLine = singleMaidr.elements[elIndex][0]; - } + this.plotLine = document.querySelectorAll( + singleMaidr.selector[elIndex] + )[0]; } else if (singleMaidr.type == 'smooth') { - if (typeof singleMaidr.elements == 'string') { - this.plotLine = document.querySelectorAll(singleMaidr.elements); - } else { - this.plotLine = singleMaidr.elements; - } + this.plotLine = document.querySelectorAll(singleMaidr.selector); } if (typeof this.plotLine !== 'undefined') { let svgLineCoords = this.GetSvgLineCoords(); @@ -330,23 +314,13 @@ class ScatterPlot { let element; if (pointIndex != -1) { - if (typeof singleMaidr.elements[pointIndex] == 'string') { - element = document.querySelectorAll( - singleMaidr.elements[pointIndex] - )[0]; - } else { - element = singleMaidr.elements[pointIndex][0]; - } + element = document.querySelectorAll(singleMaidr.selector[pointIndex])[0]; } else if (singleMaidr.type == 'point') { - if (typeof singleMaidr.elements == 'string') { - element = document.querySelectorAll(singleMaidr.elements)[0]; - } else { - element = singleMaidr.elements[0]; - } + element = document.querySelectorAll(singleMaidr.selector)[0]; } let prefix = ''; if ( - 'elements' in singleMaidr && + 'selector' in singleMaidr && element.tagName.toLowerCase() === 'circle' ) { prefix = 'c'; diff --git a/src/js/segmented.js b/src/js/segmented.js index 618c45fb..229aae23 100644 --- a/src/js/segmented.js +++ b/src/js/segmented.js @@ -34,17 +34,13 @@ class Segmented { if ('data' in singleMaidr) { data = singleMaidr.data; } - if ('elements' in singleMaidr) { - if (typeof singleMaidr.elements == 'string') { - elements = document.querySelectorAll(singleMaidr.elements); - } else { - elements = singleMaidr.elements; - } + if ('selector' in singleMaidr) { + elements = document.querySelectorAll(singleMaidr.selector); } // gracefull failure: must have level + fill + data, elements optional if (elements == null) { - LogError.LogAbsentElement('elements'); + logError.LogAbsentElement('elements'); constants.hasRect = 0; } if (level != null && fill != null && data != null) { diff --git a/user_study_pilot/task1_bar_plot.html b/user_study_pilot/task1_bar_plot.html index e32f1951..89788b04 100644 --- a/user_study_pilot/task1_bar_plot.html +++ b/user_study_pilot/task1_bar_plot.html @@ -1077,7 +1077,7 @@ var maidr = { type: 'bar', id: 'barplot1', - elements: document.querySelectorAll('g[id^="geom_rect"] > rect'), + selector: 'g[id^="geom_rect"] > rect', labels: { x: 'Continent', y: 'Total Population', diff --git a/user_study_pilot/task2_heatmap.html b/user_study_pilot/task2_heatmap.html index 659a5d28..5da671a8 100644 --- a/user_study_pilot/task2_heatmap.html +++ b/user_study_pilot/task2_heatmap.html @@ -1622,7 +1622,7 @@ var maidr = { type: 'heat', id: 'heatmap1', - elements: document.querySelectorAll('g[id^="geom_rect"] > rect'), + selector: 'g[id^="geom_rect"] > rect', labels: { x: 'Year', y: 'Continent', diff --git a/user_study_pilot/task3_boxplot_horizontal.html b/user_study_pilot/task3_boxplot_horizontal.html index d282a8b5..14bc5353 100644 --- a/user_study_pilot/task3_boxplot_horizontal.html +++ b/user_study_pilot/task3_boxplot_horizontal.html @@ -1606,7 +1606,7 @@ type: 'box', id: 'boxplot1', orientation: 'horz', - elements: document.querySelector('#geom_boxplot\\.gTree\\.177\\.1'), + selector: '#geom_boxplot\\.gTree\\.177\\.1', labels: { title: 'Life Expectancy by Continent.', x: 'Life Expectancy', diff --git a/user_study_pilot/task3_boxplot_vertical.html b/user_study_pilot/task3_boxplot_vertical.html index d15bb565..ffc30120 100644 --- a/user_study_pilot/task3_boxplot_vertical.html +++ b/user_study_pilot/task3_boxplot_vertical.html @@ -1605,7 +1605,7 @@ var maidr = { type: 'box', id: 'boxplot1', - elements: document.querySelector('#geom_boxplot\\.gTree\\.177\\.1'), + selector: '#geom_boxplot\\.gTree\\.177\\.1', labels: { title: 'Life Expectancy by Continent.', x: 'Continent', diff --git a/user_study_pilot/task4_scatterplot.html b/user_study_pilot/task4_scatterplot.html index 2fb5f79c..6044f202 100644 --- a/user_study_pilot/task4_scatterplot.html +++ b/user_study_pilot/task4_scatterplot.html @@ -1610,11 +1610,9 @@ name: 'Task 4: Scatterplot', title: 'The Relationship between GDP and Life Expectancy of European Countries in 2007.', - elements: [ - document.querySelectorAll('g[id^="geom_point"] > use'), - document.querySelector( - 'g[id^="geom_smooth.gTree"] > g[id^="GRID.polyline"] > polyline[id^="GRID.polyline"]' - ), + selector: [ + 'g[id^="geom_point"] > use', + 'g[id^="geom_smooth.gTree"] > g[id^="GRID.polyline"] > polyline[id^="GRID.polyline"]', ], axes: { x: { diff --git a/user_study_pilot/tutorial1_bar_plot.html b/user_study_pilot/tutorial1_bar_plot.html index 237790be..6e0356cf 100644 --- a/user_study_pilot/tutorial1_bar_plot.html +++ b/user_study_pilot/tutorial1_bar_plot.html @@ -1133,7 +1133,7 @@ type: 'bar', id: 'barplot1', title: 'The Number of Diamonds by Cut.', - elements: document.querySelectorAll('g[id^="geom_rect"] > rect'), + selector: 'g[id^="geom_rect"] > rect', axes: { x: { label: 'Cut', diff --git a/user_study_pilot/tutorial2_heatmap.html b/user_study_pilot/tutorial2_heatmap.html index a412e035..6c65ffe5 100644 --- a/user_study_pilot/tutorial2_heatmap.html +++ b/user_study_pilot/tutorial2_heatmap.html @@ -1245,7 +1245,7 @@ type: 'heat', id: 'heatmap1', title: 'Penguin Species by Island', - elements: document.querySelectorAll('g[id^="geom_rect"] > rect'), + selector: 'g[id^="geom_rect"] > rect', axes: { x: { label: 'Island', diff --git a/user_study_pilot/tutorial3_boxplot_horizontal.html b/user_study_pilot/tutorial3_boxplot_horizontal.html index 5490b4e3..c9d2934c 100644 --- a/user_study_pilot/tutorial3_boxplot_horizontal.html +++ b/user_study_pilot/tutorial3_boxplot_horizontal.html @@ -1758,7 +1758,7 @@ var maidr = { type: 'box', id: 'boxplot1', - elements: document.querySelector('#geom_boxplot\\.gTree\\.78\\.1'), + selector: '#geom_boxplot\\.gTree\\.78\\.1', labels: { title: 'Highway Mileage by Car Class.', x: 'Highway Mileage', diff --git a/user_study_pilot/tutorial3_boxplot_vertical.html b/user_study_pilot/tutorial3_boxplot_vertical.html index 2aada898..e61d56b3 100644 --- a/user_study_pilot/tutorial3_boxplot_vertical.html +++ b/user_study_pilot/tutorial3_boxplot_vertical.html @@ -1706,7 +1706,7 @@ var maidr = { type: 'box', id: 'boxplot1', - elements: document.querySelector('#geom_boxplot\\.gTree\\.78\\.1'), + selector: '#geom_boxplot\\.gTree\\.78\\.1', labels: { x: 'class', y: 'hwy', diff --git a/user_study_pilot/tutorial4_scatterplot.html b/user_study_pilot/tutorial4_scatterplot.html index 31927007..cc038bdd 100644 --- a/user_study_pilot/tutorial4_scatterplot.html +++ b/user_study_pilot/tutorial4_scatterplot.html @@ -4595,11 +4595,9 @@ id: 'scatter1', title: 'Highway Mileage by Engine Displacement.', name: 'Tutorial 4: Scatterplot', - elements: [ - document.querySelectorAll('g[id^="geom_point"] > use'), - document.querySelector( - 'g[id^="geom_smooth.gTree"] > g[id^="GRID.polyline"] > polyline[id^="GRID.polyline"]' - ), + selector: [ + 'g[id^="geom_point"] > use', + 'g[id^="geom_smooth.gTree"] > g[id^="GRID.polyline"] > polyline[id^="GRID.polyline"]', ], axes: { x: { diff --git a/user_study_pilot/tutorial5_histogram.html b/user_study_pilot/tutorial5_histogram.html index b22e3217..2cc74cfb 100644 --- a/user_study_pilot/tutorial5_histogram.html +++ b/user_study_pilot/tutorial5_histogram.html @@ -1166,7 +1166,7 @@ type: 'hist', id: 'hist1', title: 'Distribution of Engine Displacement', - elements: document.querySelectorAll('g[id^="geom_rect"] > rect'), + selector: 'g[id^="geom_rect"] > rect', axes: { x: { label: 'Displacement', diff --git a/user_study_pilot/tutorial6_lineplot.html b/user_study_pilot/tutorial6_lineplot.html index e5c0f231..af24bb32 100644 --- a/user_study_pilot/tutorial6_lineplot.html +++ b/user_study_pilot/tutorial6_lineplot.html @@ -408,9 +408,8 @@ title: 'Unemployment Rate Over Time', // elements: document.querySelectorAll('defs > style'), // elements: document.querySelectorAll('g > circle'), - elements: document.querySelectorAll( - 'g[clip-path="url(#cpNDcuODN8NzE0LjUyfDM4Ljg1fDUzMC44Nw==)"] > polyline' - ), + selector: + 'g[clip-path="url(#cpNDcuODN8NzE0LjUyfDM4Ljg1fDUzMC44Nw==)"] > polyline', axes: { x: { label: 'Year', diff --git a/user_study_pilot/tutorial7_stacked.html b/user_study_pilot/tutorial7_stacked.html index 42eee1f3..e64637ba 100644 --- a/user_study_pilot/tutorial7_stacked.html +++ b/user_study_pilot/tutorial7_stacked.html @@ -699,10 +699,7 @@ type: 'stacked_bar', id: 'stacked_bar', orientation: 'horz', - //elements: document.querySelectorAll( - //'#stacked_bar g:nth-of-type(2) rect[style*="butt"]' - //), - elements: '#stacked_bar g:nth-of-type(2) rect[style*="butt"]', + selector: '#stacked_bar g:nth-of-type(2) rect[style*="butt"]', labels: { title: 'Bar Plot', subtitle: diff --git a/user_study_pilot/tutorial8_stacked_normalized.html b/user_study_pilot/tutorial8_stacked_normalized.html index 058fb064..854d1f22 100644 --- a/user_study_pilot/tutorial8_stacked_normalized.html +++ b/user_study_pilot/tutorial8_stacked_normalized.html @@ -732,9 +732,7 @@ var maidr = { type: 'stacked_normalized_bar', id: 'stacked_normalized_bar', - elements: document.querySelectorAll( - 'svg g:nth-of-type(2) rect[style*="butt"]' - ), + selector: 'svg g:nth-of-type(2) rect[style*="butt"]', labels: { title: 'Stacked Normlized Bar Plot', subtitle: diff --git a/user_study_pilot/tutorial9_dodged_bar.html b/user_study_pilot/tutorial9_dodged_bar.html index 61a501a1..6100fa80 100644 --- a/user_study_pilot/tutorial9_dodged_bar.html +++ b/user_study_pilot/tutorial9_dodged_bar.html @@ -767,9 +767,7 @@ type: 'dodged_bar', id: 'dodged_bar', orientation: 'horz', - elements: document.querySelectorAll( - '#dodged_bar g:nth-of-type(2) rect[style*="butt"]' - ), + selector: '#dodged_bar g:nth-of-type(2) rect[style*="butt"]', labels: { title: 'Bar Plot', subtitle: