543 fixing Plot setting panel icon

[kartikeyakirar]

this fixes insightsengineering/teal.modules.general#543

Here I have added Jquery to toggle icon and added class card-heading to identify target div() bs4/bs5 version.

[github-actions]

Code Coverage Summary

Filename                   Stmts    Miss  Cover    Missing
-----------------------  -------  ------  -------  --------------------------------------------
R/basic_table_args.R          23       0  100.00%
R/draggable_buckets.R         82      82  0.00%    57-152
R/get_dt_rows.R               13      13  0.00%    27-39
R/ggplot2_args.R              49       0  100.00%
R/include_css_js.R             7       1  85.71%   17
R/optionalInput.R            225     182  19.11%   87-362, 414, 465, 471, 486-499
R/panel_group.R               90      90  0.00%    12-132
R/plot_with_settings.R       382      21  94.50%   272-285, 344-345, 356-357, 607-608, 610, 612
R/standard_layout.R           35       0  100.00%
R/table_with_settings.R      173       1  99.42%   79
R/utils.R                     11       1  90.91%   7
R/verbatim_popup.R            99      49  50.51%   63-78, 104-105, 107, 115-143, 164
R/white_small_well.R           7       7  0.00%    18-24
TOTAL                       1196     447  62.63%

Diff against main

Filename           Stmts    Miss  Cover
---------------  -------  ------  --------
R/panel_group.R       +1      +1  +100.00%
TOTAL                 +1      +1  -0.05%

Results for commit: 69d0132

Minimum allowed coverage is 80%

♻️ This comment has been updated with latest results

[github-actions]

Unit Tests Summary

    1 files    10 suites   16s ⏱️
101 tests 101 ✔️ 0 💤 0 ❌
208 runs  208 ✔️ 0 💤 0 ❌

Results for commit 71bfdba.

♻️ This comment has been updated with latest results.

[chlebowa]

Something isn't right. The first click does not affect the icon.

plot_settings.mp4

[kartikeyakirar]

I am not able to reproduce this. I am testing in chrome in mac and window

Screen.Recording.2023-08-21.at.6.26.02.PM.mov

Screen.Recording.2023-08-21.at.6.30.16.PM.mov

[chlebowa]

I am on Ubuntu 20.04 and use Brave, which is Version 1.57.47 Chromium: 116.0.5845.96 (Official Build) (64-bit)

[kartikeyakirar]

Something isn't right. The first click does not affect the icon.

Understood, it appears that the problem is limited to Bootstrap version 5. It seems to be functioning correctly in versions 3 and 4.

Can you please confirm if you are using Bootstrap version 5? I am only able to reproduce the issue in BS 5.

[chlebowa]

Actually, it works fine with when I set options("teal.bs_theme" = bslib::bs_theme(version = 5)).
The problem arises in versions 3 and 4.

[kartikeyakirar]

That's quite intriguing! My system is actually experiencing the complete opposite. 😄. I might have identify the issue but I'm uncertain how it's impacting various versions on different systems. let me fix all version in my system and hopefully it will fix in all system aswell.

[kartikeyakirar]

When using .click() or similar event registration methods in jQuery, an event handler is attached to the target element. However, each time the element is clicked, a new event handler is added, causing multiple event handlers to execute and leading to unexpected behavior.

screenshot for single click

To fix this I have used event delegation here.

There is a similar implementation called teal.slice:::toggle_icon, but it requires server-side processing, so I didn't use it here.

DEMO

Screen.Recording.2023-08-23.at.7.06.46.PM.mov

[chlebowa]

Yup, that's better 👍