esquisse | RStudio add-in to make plots interactively with ggplot2 | Data Visualization library

You have two radioButtons, one for each sidebar, but both of them have the inputId = "controller". Same with inputId = "toggleSidebar". InputIds need to be unique in shiny!

I suggest you either use a single sidebar for the entire app, or since both tabs are essentially identical you can also use modules.

1. I checked the HTML of esquisserUI, they give all dropdowns the same IDs if you use multiple esquisserUI. This is a big NO in HTML development and will cause a lot of issues. They call it a module, but they didn't follow Shiny module guidelines where to use NS() for all UI IDs. The easy proof is try this below. Then uncomment the second set of esquisserUI and esquisserServer and try again. You will find the dropdown no longer works.

The UI is easy to fix: just add this

You can make a group based on both UG and S variables using a composite variable UGS:

I shut down R, updated to R 4.0.3, and installed cachem from sources and this combination worked.

So, a few CSS elements have to be changed for this to work. The "Old" box is in a div with class container-drag-source and the "New" box is in a div with class shiny-split-layout. These different divs did not start out with all of the same properties, which is why I had to change more in one than another. Further, the actual box size for the "New" box is governed by an un-named, un-classed div which is a descendant of the shiny-split-layout div. That was hard coded to be 90% height. The interior of the "New" box into which you could move the badges is a div of class box-dad, with default padding of only 5px, which I had to change to 10px to match the white space around the edges in the "Old" box. The main thing that had to change was to set each div's display property to inline-block, which sets them side-by-side. The other stuff just makes them appear the same size.

You'll have to change the css properties of the badges. If you inspect the badge html, you'll see that they are each in a tag with id=label-dragula label label-danger.

Since a span tag doesn't respond to height and width directives, you'll have to turn it into an inline-block element to change the size (thanks to this post). All of this is done in the tags$style() function - width and height are self-explanatory, background-color is the color of the badge and color is the color of the text.

If you read the example from here (which I assume you did) carefully, you can probably see, that no reactive(...) parts are used. To fix your server part, use (as in the example) a combination of reactiveValue and observeEvent.

The reactiveValue is used, to initialize a default variable called data_r. To update the variable, the observeEvent observes the input parameters am, gear or carb and change the data_r when ever one of the input paramter changes.

Your server function can look like: