MultiplexerTransform with dict ids?

Hello everyone, new day new question :slight_smile:

I have a set of images that I want to selectively highlight when clicked, and also I want to be able to rotate them clockwise / anticlockwise with two different buttons.

So far I’ve opted for the solution below, where I give the input of the image I want to turn and the value and state of two buttons. This is fine, but a bit heavy in terms of coding.

################################################################
@app.callback(
Output({“type”: “tile-image”, “index”: ALL}, “style”),
[Input({“type”: “tile-image”, “index”: ALL}, “n_clicks”),
Input({“type”: “rotate-button”, “index”: “anticlock-btn”}, “n_clicks”),
Input({“type”: “rotate-button”, “index”: “clock-btn”}, “n_clicks”)],
State({“type”: “tile-image”, “index”: ALL}, “id”),
State({“type”: “tile-image”, “index”: ALL}, “style”),
State({“type”: “rotate-button”, “index”: “anticlock-btn”}, “n_clicks”),
State({“type”: “rotate-button”, “index”: “clock-btn”}, “n_clicks”),
prevent_initial_call=True
)
def update_img(n_clicks_tile, n_clicks_btn_anticlock, n_clicks_btn_clock, ids_tile, styles_tile, n_clicks_btn_anticlock_state,n_clicks_btn_clock_state):

ctx = callback_context
      
triggered_str = ctx.triggered[0]['prop_id'].split('.')[0]
# this is a json str, needs to be parsed...
triggered_id = json.loads(triggered_str)["index"]
 
print(triggered_id)
 
# Changing tile and opacity:
if triggered_id != "anticlock-btn" and triggered_id != "clock-btn":
    for id, style in zip(ids_tile, styles_tile):
        if id["index"] == triggered_id:
            style["opacity"] = 0.5
        else:
            style["opacity"] = 1.0

# Rotating tile anticlockwise:
elif triggered_id == "anticlock-btn":
    for id, style in zip(ids_tile, styles_tile):
        #print(id)
        if style["opacity"] == 0.5:
        
            current_rotation = style["transform"]
            
            if current_rotation == 'rotate(0deg)':
                style["transform"] = 'rotate(270deg)'
            elif current_rotation == 'rotate(90deg)':
                style["transform"] = 'rotate(0deg)'
            elif current_rotation == 'rotate(180deg)':
                style["transform"] = 'rotate(90deg)'
            elif current_rotation == 'rotate(270deg)':
                style["transform"] = 'rotate(180deg)'
  
  
# Rotating tile clockwise:
elif triggered_id == "clock-btn":
    for id, style in zip(ids_tile, styles_tile):
        #print(id)
        if style["opacity"] == 0.5:
          
            current_rotation = style["transform"]
              
            if current_rotation == 'rotate(0deg)':
                style["transform"] = 'rotate(90deg)'
            elif current_rotation == 'rotate(90deg)':
                style["transform"] = 'rotate(180deg)'
            elif current_rotation == 'rotate(180deg)':
                style["transform"] = 'rotate(270deg)'
            elif current_rotation == 'rotate(270deg)':
                style["transform"] = 'rotate(0deg)'

  
return styles_tile

################################################################

I’ve learnt about the cool feature of MultiplexerTransform to target the same output with multiple callbacks. I’ve tried implementing it in my current project, but I keep getting errors such as “Attempting to connect a callback Input item to component: “page-1-dropdown””. I’ve read here that it might be due to the fact that I’m using dictionaries as ids? Is there a workaround for this? Thanks for your feedback!