Merge pull request #316 from uiuc-ischool-accessible-computing-lab/no…

…-queryselectorall fixed #314
xability · Dec 14, 2023 · 6b9e973 · 6b9e973
2 parents 8b0d0b8 + a09beec
commit 6b9e973
Show file tree

Hide file tree

Showing 24 changed files with 66 additions and 61 deletions.
diff --git a/src/js/audio.js b/src/js/audio.js
@@ -573,6 +573,11 @@ class Audio {
    * @returns {number} The new value between min and max.
    */
   SlideBetween(val, a, b, min, max) {
+    val = Number(val);
+    a = Number(a);
+    b = Number(b);
+    min = Number(min);
+    max = Number(max);
     let newVal = ((val - a) / (b - a)) * (max - min) + min;
     if (a == 0 && b == 0) {
       newVal = 0;

diff --git a/src/js/barplot.js b/src/js/barplot.js
@@ -23,37 +23,37 @@ class BarChart {
       data = singleMaidr.data;
     }
     let elements = null;
-    if ('elements' in singleMaidr) {
-      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;
       }
     } 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;
       }
     } 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
@@ -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,11 @@ class BoxPlot {
     let plotBounds = [];
     let allWeNeed = this.GetAllSegmentTypes();
     let re = /(?:\d+(?:\.\d*)?|\.\d+)/g;
+    let elements = document.querySelector(singleMaidr.selector);
 
     // get initial set of elements, a parent element for all outliers, whiskers, and range
     let initialElemSet = [];
-    let plots = singleMaidr.elements.children;
+    let plots = elements.children;
     for (let i = 0; i < plots.length; i++) {
       // each plot
       let plotSet = {};

diff --git 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
@@ -32,8 +32,8 @@ class HeatMap {
       }
     }
     let elements = null;
-    if ('elements' in singleMaidr) {
-      elements = singleMaidr.elements;
+    if ('selector' in singleMaidr) {
+      elements = document.querySelectorAll(singleMaidr.selector);
     }
 
     // if (xlevel && ylevel && data && elements) {
@@ -98,7 +98,7 @@ class HeatMap {
     //   if (!elements) logError.LogAbsentElement('elements');
     // }
 
-    this.plots = maidr.elements;
+    this.plots = elements;
     constants.hasRect = 1;
 
     this.group_labels = this.getGroupLabels();

diff --git a/src/js/histogram.js b/src/js/histogram.js
@@ -19,8 +19,8 @@ class Histogram {
     }
     // elements (optional)
     this.bars = null;
-    if ('elements' in singleMaidr) {
-      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
@@ -67,8 +67,14 @@ class LinePlot {
    * Sets the line layer for the chart.
    */
   SetLineLayer() {
-    let len = maidr.elements.length;
-    this.plotLine = maidr.elements[len - 1];
+    let elements;
+    if ('selector' in singleMaidr) {
+      elements = document.querySelectorAll(singleMaidr.selector);
+    }
+
+    let len = elements.length;
+    this.plotLine = elements[len - 1];
+
     if (typeof this.plotLine !== 'undefined') {
       let pointCoords = this.GetPointCoords();
       let pointValues = this.GetPoints();

diff --git a/src/js/scatterplot.js b/src/js/scatterplot.js
@@ -137,9 +137,11 @@ class ScatterPlot {
     // initially set as smooth layer (layer 2), if possible
     let elIndex = this.GetElementIndex('point');
     if (elIndex != -1) {
-      this.plotPoints = singleMaidr.elements[elIndex];
+      this.plotPoints = document.querySelectorAll(
+        singleMaidr.selector[elIndex]
+      );
     } else if (singleMaidr.type == 'point') {
-      this.plotPoints = singleMaidr.elements;
+      this.plotPoints = document.querySelectorAll(singleMaidr.selector);
     }
     if (typeof this.plotPoints !== 'undefined') {
       let svgPointCoords = this.GetSvgPointCoords();
@@ -164,9 +166,11 @@ class ScatterPlot {
     // layer = 2, smooth layer (from singleMaidr types)
     let elIndex = this.GetElementIndex('smooth');
     if (elIndex != -1) {
-      this.plotLine = singleMaidr.elements[elIndex];
+      this.plotLine = document.querySelectorAll(
+        singleMaidr.selector[elIndex]
+      )[0];
     } else if (singleMaidr.type == 'smooth') {
-      this.plotLine = singleMaidr.elements;
+      this.plotLine = document.querySelectorAll(singleMaidr.selector);
     }
     if (typeof this.plotLine !== 'undefined') {
       let svgLineCoords = this.GetSvgLineCoords();
@@ -264,7 +268,6 @@ class ScatterPlot {
     // but first, are we even in an svg that can be scaled?
     let isSvg = false;
     let element = this.plotPoints[0]; // a random start, may as well be the first
-    console.log(element);
     while (element) {
       if (element.tagName.toLowerCase() == 'body') {
         break;
@@ -307,16 +310,17 @@ class ScatterPlot {
    * @returns {string} The prefix.
    */
   GetPrefix() {
-    let elIndex = this.GetElementIndex('point');
+    let pointIndex = this.GetElementIndex('point');
+
     let element;
-    if (elIndex != -1) {
-      element = singleMaidr.elements[elIndex][0];
+    if (pointIndex != -1) {
+      element = document.querySelectorAll(singleMaidr.selector[pointIndex])[0];
     } else if (singleMaidr.type == 'point') {
-      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
@@ -34,13 +34,13 @@ class Segmented {
     if ('data' in singleMaidr) {
       data = singleMaidr.data;
     }
-    if ('elements' in singleMaidr) {
-      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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -699,9 +699,7 @@
         type: 'stacked_bar',
         id: 'stacked_bar',
         orientation: 'horz',
-        elements: document.querySelectorAll(
-          '#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
@@ -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
@@ -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: