Rendering error under React

[antoinegaston]

Describe the bug Clustergrammer heatmap doesn't render well using clustergrammer2 generated network and clustergrammer-gl for rendering. Here is the piece of code in charge of rendering:

import cgm from 'clustergrammer-gl'

const ReactClustergrammer = ({ root, height, width, maxWidth, className, onColumnLabelClick, ...args }) => {
  const draw = () => {
    let network = args.network;
    cgm({
      network,
      viz_width: 900,
      viz_height: 900,
      use_hzome: true,
      root: `#${root}`,
    });
  };

  React.useEffect(() => {
    if (typeof window !== 'undefined' && args.network !== null) {
      window.d3 = d3;

      draw();
    }
  }, [args.network]);

  return <div id={root} className={className} style={{ height, width: width, maxWidth: maxWidth }}></div>;
};

Depending on the parameters it raises different problems:

• with parameter root: '#${root}' it doesn't render at all but without any error
• with parameter container: '#${root}' it raises the following error TypeError: targetel.getScreenCTM is not a function that seems to be linked to d3-tip .

Dependencies

clustergrammer-gl@^0.23.0:
  version "0.23.0"
  resolved "https://registry.yarnpkg.com/clustergrammer-gl/-/clustergrammer-gl-0.23.0.tgz#0321df460419221d2d2ccda9b2a54384b10d8007"
  integrity sha512-bAhd9EzyNRUspBKEaflo/XTPhkiD3zro+OK/jzYfkjijQ3iRNF1R6qirq863PEFtwKCFpVCzjfdRnyqUpz1WDA==
  dependencies:
    axios "0.19.0"
    d3 "5.15.0"
    d3-tip v0.9.1
    eases "^1.0.8"
    gl-mat4 "^1.1.4"
    gl-vec4 "^1.0.1"
    ify-loader "^1.1.0"
    mathjs "3.17.0"
    mouse-change "^1.4.0"
    mouse-event-offset "3.0.2"
    normalized-interaction-events "2.0.1"
    pako "1.0.6"
    regl "^1.3.7"
    underscore "1.8.3"
    util-extend "1.0.3"
    vectorize-text "^3.2.1"
    xtend "^4.0.1"

Desktop:

• macOS monterey 12.4

[cornhundred]

Hi, I haven't tried using Clustergrammer-gl with react before but I'll try to do some research on my end.