simonduerr/gradio_molecule2d · Incompatibility with gradio dataframe

Hi, first of all great job for the widget. It works well and is very useful for prototyping molecular apps.

I found out that this component has inconsistency with itself and with gradio native Dataframe component.
When a dataframe or a second molecule2d component is present on the page before the main widget, we can't exit the widget by clicking the quit button anymore.

Looking at the javascript, it looks like the function called that get the SMILES on exit is getting it with a too large query

document.querySelector("iframe").contentWindow.ketcher.getSmiles().then((a)

Here, the query is triggered on the first iframe element of the whole document. It turns out that gradio dataframes are also using iframe element.
So if the first iframe element of the page is not the correct molecule2d component, the button will simply not work at all.

I think the best way would be to create a unique id for each new component and look for it instead of all iframes.
Unfortunately, by knowledge in Javascript is quite low (not even talking about svelte syntax)
As a temporary patch, I created a global variable "lastButtonClicked". On click, I save the element in this variable.
That way, when the query is triggered, I query in the closest parent of the button instead of querying the whole document.

First, I define the global variable

// Definition of the global variable
let lastClickedButton = null

Then in the triggering function, I save the clicked button in the variable

// function W0(d) ....
    t.$on("click", (event) => {     // inserted patch before the original call
      lastClickedButton = event.currentTarget;
      console.log("Button clicked and stored:", lastClickedButton);
    }),
    t.$on(      // original click handler
      "click",
      /*click_handler*/
      d[2]
    )

Finally in the triggered function, I get the closest common parent (a div with the absolute class)
And I look for my iframe in that component

// function nd(d) ...
// function t() ...
    // Find the closest parent element with class "absolute"
    const absoluteParent = lastClickedButton.closest(".absolute");
    const iframe = absoluteParent.querySelector("iframe");
    iframe.contentWindow.ketcher.getSmiles().then((a) =>      //  ... end of the function ...

Hope that will help if people have to face that issue in the future