chemdoodle datatable

[chapmandu2]

Hi @zachcp - I've managed to work out how to use chemdoodle to depict chemical structures in a data table within a shiny app. It's very minimalist but I've put the code on github: https://github.com/chapmandu2/ShinyStructuresPublic

And the shiny app is here: https://cruk-mi-ddu.shinyapps.io/ShinyStructuresPublic/

What I can't get my head around is how one would implement an HTMLWidget for compound depiction inside another HTMLWidget (ie DT::datatable).

I also kept the dependencies minimal by only using format conversion available within the open source chemdoodle web components. So you can depict molfiles but not smiles strings. It would be great to incorporate this functionality into your chemdoodle package if you think it would be useful.

[harveyl888]

Nice effort. You beat me to this - I was also starting to experiment with chemdoodle inside a datatable! One thought would be to wrap the htmlwidget in a span, similar to how sparklines is handled.

[zachcp]

Hi @chapmandu2, Hi @harveyl888 ,

I don't see any molecule images in your example app. But I think you may get the most mileage if you pre-render the images (with CDK-depict, say) and serve those within the cells of your DataTable as mentioned here. Although if you can get the widget-in-widget to work that would be cool.

If you have a small number of images I would prerender all the images and put them in a directory. Then you can simply add an tag linking to your image (shiny can access the wwww/ directory, right?). If you have a big Database and want to render images on demand I'm not sure the best way but I guess I would go the same route (render and save to disk, then view it with the tag). I believe you could also keep all images in memory/on-demand within the shiny app but I don't know how the interface with the DataTables widget would work in that case since there is a clear R interface to DT and a separate one for serving images and mashing them up would might be a bit tricky.

Nice work, though - keep it up zcp

[chapmandu2]

@zachcp you just have to select the MOLFILE column from the dropdown then it should work? Let me know if not! I tried to make it applicable to generic datasets, but there's an inbuilt one for convenience.

@harveyl888 i was thinking about sparklines too as it seemed similar. Currently the widget is itself a canvas tag so I don't see why it couldn't be put in a span? But the positioning was what caused the most amount of headscratching: if I tried to create the canvas using the javasript library it didn't work, if I created the canvas manually with a specific id and then referenced it in javascript it was ok.

[zachcp]

@chapmandu2 ah yes, I see - now it works. Would it be possible to make the reading of the Molfile eager so that on page-load the molecules are shown?

[chapmandu2]

@zachcp Yea in retrospect I should have set it up that way, but I wanted it to be flexible enough to be able to import arbitrary data not just the example data. It shouldn't really be that hard to either autodetect which column is the molfile or autoselect the right column for the example data.

[chapmandu2]

@zachcp now set up to render structures by default

[zachcp]

very nice.