Migrating Matlab's molecule viewer to UIFigure

Hi!

Matlab's molecule viewer uses Jmol (an open-source Java viewer for chemical structures in 3D) inside the Matlab-figure enviroment. I am now trying to get the JavaScript version of Jmol (JSmol) to work inside a Matlab UIFigure, which - as far as I understand - uses HTML/CSS/Javascript to essentially build a "Web app". I have been reading on Yair Altman's blog undocumentedmatlab to get some clues on how to interact with the UIFigure's document-object-model(DOM). Unfortunately I have not been able to embed the relevent JSmol code to the DOM. I am using mlapptools to manipulate the DOM.

I am thankful for any pointers that might help in trying to get this to work.

Here is my demo code where I am trying to inject the relevent script tags (scriptText) to the head tag.

% Create the figure
fig = uifigure('Name', 'JSmol test');
panel = uipanel(fig);

totalWidth  = 450; %px
totalHeight = 350; %px

% set the uipanel's Position property to the required dimensions
panel.Position(3) = totalWidth;  % WIDTH
panel.Position(4) = totalHeight; % HEIGHT

scriptText = [...
    '''<script type="text/javascript" src="./jsmol/JSmol.min.js"></script>\n', ...
    '  <script type="text/javascript" src="./jsmol/jquery/jquery.js"></script>\n', ...
    '\n',...
    'Jmol._isAsync = false;\n', ...
    'var jmolApplet0;\n', ...
    'var s = document.location.search;\n', ...
    'Jmol._debugCode = (s.indexOf("debugcode") >= 0);\n', ...
    'jmol_isReady = function(applet) {\n', ...
    '	document.title = (applet._id + " - Jmol " + Jmol.___JmolVersion)\n', ...
    ' 	Jmol._getElement(applet, "appletdiv").style.border="1px solid blue"\n', ...
    '}\n', ...
    '\n',...
    'var Info = {\n', ...
    '	width: 420,\n', ...
    ' 	height: 300,\n', ...
    ' 	debug: false,\n', ...
    ' 	color: "0xFFFFFF",\n', ...
    ' 	addSelectionOptions: true,\n', ...
    ' 	use: "HTML5",  \n', ...
    ' 	j2sPath: "./jsmol/j2s", \n', ...
    ' 	jarPath: "./java",\n', ...
    ' 	jarFile: "JmolAppletSigned.jar",\n', ...
    ' 	isSigned: true,\n', ...
    ' 	script: "set zoomlarge false;set antialiasDisplay;load data/1STM-chainA.pdb",\n', ...
    ' 	serverURL: "https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",\n', ...
    ' 	readyFunction: jmol_isReady,\n', ...
    ' 	disableJ2SLoadMonitor: true,\n', ...
    '   allowJavaScript: true	\n', ...
    '}\n', ...
    '\n',...
    '$(document).ready(function() {\n', ...
    '   $("#appdiv").html(Jmol.getAppletHtml("jmolApplet0", Info))\n', ...
    '})\n', ...
    ' var lastPrompt=0;', ...
    '</script>''', ...
    ];

% get the uipanel data-tag attr.
[webWindow, panelID] = mlapptools.getWebElements(panel);

% Make a nodeID string to make the JS call more generic
nodeID = sprintf('''[%s="%s"]''', panelID.ID_attr, panelID.ID_val);

% JS that creates a div called appdiv where JSmol will be put
js = sprintf( ...
    [ ...
    'var d = document.createElement("div");', ...
    'd.setAttribute("id","appdiv");', ...
    'document.querySelectorAll(%s)[0]',...
    '.replaceChild(d,document.querySelectorAll(%s)[0].firstChild);' ...
    ], ...
    nodeID, nodeID ...
    );

% execute the JS
webWindow.executeJS(js);

% get the webWindow object
webWindow = mlapptools.getWebWindow(fig);
% inject the script tags
webWindow.executeJS(['document.head.innerHTML += ',scriptText]);