Barplot: Sonification loading lag

[jooyoungseo]

CC @sandeep-ps and @ellvix

Similar to #4, I have created barplot test via R binder, but the sonification is loaded with a lag. If you move around your arrows, the sonification is fired after a few second lag.

Please also help me debug and fix the issue in the upstream maidr repo. The test file can be found at https://github.com/uiuc-ischool-accessible-computing-lab/r_maidr/blob/f12820d3d0ffd998ee9f6a2ecb42ec3fa8dafc1f/test/barplot_test

Repros

library(maidr)
library(tidyverse)

g <- ggplot(mpg, aes(class)) +
  geom_bar()

maidr(g)

[jooyoungseo]

@sandeep-ps -- The scatterplot fix did not resolve this issue and this issue still exists. Could you please address this?

[sandeep-ps]

Yes, I will look into this issue this week.

[sandeep-ps]

There are at least a couple of issues here. I will list them here as I discover them. We can investigate these separately or together if there is a perceived connection.

1. The bars are not getting highlighted in any mode. The "fill" attribute in the active element seems to be null. Line 278 in control.js this.activeElementColor = this.activeElement.getAttribute('fill');
2. The bell tone starts once the user navigates to the end of the bar plot and traverses the plot in the reverse order. So, we can ignore any network delay or file load delay, but it seems to be an issue with the way the SVG plot generated from R interacts with the MAIDR library.

I'm continuing to investigate this.

[sandeep-ps]

Hi, @jooyoungseo and @ellvix, I think I might have found the root cause. In the r-maidr example, the rect elements in the SVG data use style attributes, while in the examples/tutorials in the main maidr repo use those style-related attributes as set as direct attributes of the rect element.

I.e., in the r-maidr example, a rect element looks like this:

<rect x='44.33' y='210.83' width='67.17' height='17.08' style='stroke-width: 1.07; stroke: none; stroke-linecap: butt; stroke-linejoin: miter; fill: #595959;' />,

while should have looked like below:

<rect x='44.33' y='210.83' width='67.17' height='17.08' stroke-width='1.0' stroke='none' stroke-linecap='butt' stroke-linejoin='miter' stroke-dasharray="none" fill=rgb(89,89,89) stroke-opacity="0" fill-opacity="1"/>

Please note that the fill attribute uses an RGB function call instead of a hex value.

Because of this in barplot.js, when the code in line 278 looked for the fill attribute, it came out null, which resulted in an error in the ColorInvert method, causing plot.PlayTones(); line to be not executed, resulting in no tones.

We can fix this by either updating the HTML to match what the MAIDR.js is expecting (i.e., similar to the examples and tutorials) or handling the case of style attribute when the code is looking for color and handling hex color codes. But the latter fix needs to be applied to other plots as well. Please share your thoughts and I can proceed accordingly.

[jooyoungseo]

Thanks for the thorough investigation, @sandeep-ps ! Please go with the latter option because our maidr js library needs to be flexible. The svg structure discrepancy came from the recent update of the svglite R package, which started to generating the nested style attributes. However, we would like to support the new update while maintaining the previous version compatibility.

[ellvix]

Agreed, let's update the main barplot constructor to be able to handle any structure. This will be an ongoing battle, as every time the html structure changes significantly we may have to update our scripts. I'd like a long term solution to this issue, but I'm not sure right now what that would be.