create component webView ignores layout considerations

[samreid]

In phetsims/projectile-data-lab#233 (comment) @matthew-blackman and I wanted to create a web view programatically. We did so in a self-contained minimal reproducible example based on the NewRandomNumbers exemplar:

https://github.com/concord-consortium/codap-data-interactives/blob/master/NewRandomNumbers/random-numbers.js

We applied this patch:

Details

Subject: [PATCH] Simplify the background gradient, and make it non-scaled, see https://github.com/phetsims/projectile-data-lab/issues/178
---
Index: NewRandomNumbers/random-numbers.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/NewRandomNumbers/random-numbers.js b/NewRandomNumbers/random-numbers.js
--- a/NewRandomNumbers/random-numbers.js	(revision 8a3a465487d89969b0269e317a92cb18d0a46fc8)
+++ b/NewRandomNumbers/random-numbers.js	(date 1710256056733)
@@ -224,3 +224,11 @@
   // handle errors
   console.log(msg);
 });
+
+setTimeout(()=>{
+  codapInterface.sendRequest({
+    action: 'create', resource: 'component', values: {
+      type: 'webView', name: 'projectileDataWebView', title: 'Data to Collect', URL: 'https://www.google.com'
+    }
+  });
+},5000)

And we observed that the created webView appears behind the data interactive, like so:

We found that web views created via Options => Display Web Page did respect other layout considerations. It was unclear what is causing the problem or how to correct or work around it.

[ddamelin]

Looks like your test URL is https://www.google.com. However, they don't allow their site to be iframed, so you will see this same behavior if you tried to manually create a webview using that URL. I would make sure the test URL you are using will work using the manual webview method first.

[samreid]

When we experimented with other URLs that did load correctly, they had the same layout problem, where the webview appeared at (0,0) behind the data interactive.

[ddamelin]

Have you explicitly tried setting the position to 'top' or 'bottom'?

[samreid]

We tried this experiment:

setTimeout( () => {
  codapInterface.sendRequest( {
    action: 'create', resource: 'component', values: {
      type: 'webView', name: 'projectileDataWebView', title: 'Data to Collect', 
      URL: 'https://codap.concord.org', 
      position: 'bottom'
    },
    position: 'bottom'
  } );
}, 5000 )

And saw that it rendered like so:

[ddamelin]

It seems you have found a bug. The only other thing I would suggest would be to also set the dimensions of the plugin. Clearly it has some default value for them, but perhaps setting custom dimensions would trigger the code that calculates an appropriate position. See the example of the webview from the api:
{ type: 'webView', name: /*{String}. Must be unique. */, title: /*{String} Optional. Displayed in graph titlebar. If omitted, graph name is used. */, dimensions: { width: /* {Number} in pixels*/, height: /* {Number in pixels */ }, position: /*{String} Default is 'top'. If 'bottom' CODAP will position the graph in empty space as close to the bottom of the document as it can manage.*/, cannotClose: /* {Boolean} Whether close button is displayed in upper right URL: /* {String} */ }

[samreid]

I tried adding the dimensions, and saw that the dimension correctly updated but the layout did not improve.

[ddamelin]

Well, sounds like you found a bug in the API. @bfinzer does that seem correct?

[bfinzer]

It certainly sounds like a bug. I'll try to investigate a bit later today and get back about it. On the plus side, assuming it is a bug, it should be one that's not difficult to fix in V2 and get into the next release build.

[bfinzer]

I found a fix. Current CODAP build is 0710. Look for the fix in the next release.