DOM injected in X3DCanvas after x_ite_dom is load is not processed

[create3000]

I came along this bug while I checked the D3 examples, but https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/ParticlePlot.html does sometimes not load. This happens especially in Chrome. If it takes to long to load the CSV then x_ite_dom is already loaded and first then d3 adds X3D DOM elements to the X3DCanvas, but these are not processed.

The script in the HTML page outputs a 'done' to the console when finished. If that 'done' comes after 'X_ITE XHTML DOM integration enabled' output from x_ite_dom, then the canvas left black.

[andreasplesch]

Ok, hm. I am not sure I understand the timing completely. Perhaps it is a matter of mutations.

The sequence probably is:

• xite_dom sees the empty the X3DCanvas and starts to observe it.
• d3-x3d loads the csv in the promise
• I think when it is done loading, the promise is fulfilled, and the chart dom is generated
• I think the chart dom is inserted and then mutated for each added data point. I am not quite sure how x_ite handles parsing empty x3d elements.
• It would be better if the chart dom would be completely generated outside of the X3DCanvas and only inserted once after it is complete. But d3 typically does not do this with svg. It is designed to update the current svg.
• Finally, it says 'done'.

[andreasplesch]

Using the debugger I found:

• x_ite_dom expects a X3D element inside the X3DCanvas to start observing the element. The example does not have it. There was probably a reason why there is a check for an existing X3D element but I do not remember it.
• x_ite_dom relies on the afterImport callback of the browser.importDocument SAI function to start observing. Not sure if x_ite calls the callback after importing an empty X3D element; ok, it does.

[andreasplesch]

@jamesleesaunders: here is a more robust way to dynamically construct the x3d:

<X3DCanvas id="chartholder" style="width: 500px; height: 500px;"><X3D></X3D></X3DCanvas>

  <p>The Bell Labs Pollen data set: In the 1980s, the ASA (American Statistical Association) held a data competition challenged contestants to find as many features as possible in a 5 dimensional data set of 4000 cases. Among other important (known) features in the data set, in a scatterplot of three of the dimensions, the word ’EUREKA’ was clearly apparent. Participants had a deadline, but were not timed; the number of insights or features identified by the contestants was used to judge the winner(s). (Handbook of Data Vis pg179)</p>
  <p>Dahshan & Polys 2021</p>
  <p>Available at: <a href="https://www.openml.org/d/529">https://www.openml.org/d/529</a></p>

  <script>
    function loadChart(data) {
      // Select chartholder

//AP use detached dom to build the x3d
      var ch = document.createElement('container');
      var chartHolder = d3.select(ch);

      // Declare the chart component
      var myChart = d3.x3d.chart.particlePlot()
        .mappings({x: "ridge", y: "nub", z: "crack", size: "density", color: "weight"})
        .colors(d3.schemeRdYlGn[8]);

      // Generate chart
      chartHolder.datum(data).call(myChart);
//AP: add the complete scene to the existing X3D
      document.querySelector('X3D').appendChild(ch.querySelector('Scene'));
    }

This will work without the timing issues.

x_ite_dom could also observe the whole html document for X3DCanvas insertions and changes. But currently this is not a goal.

However, there should be a way/API to trigger x_ite_dom to restart, on demand. Currently, one would need to reinsert the script node with x_ite_dom.js to do that. Should this restarting be part of x_ite.js in some way ? I guess, I could wrap the whole script into a global function X3D_start_dom(), and keep track of the mutationobservers to remove all on restart.