Some problems when I'm trying to use with react and electron

[pedrogiroldo]

First, for some reason, my tree gets this way, it's wrong, right?

Second, when I click on an node, a get this error:

Here is my code

import { phylotree } from 'phylotree';
import { useRef, useLayoutEffect } from 'react';
import $ from 'jquery';

export default function Phylotree() {
  const treeContainer = useRef();
  const tree = new phylotree(
    '(((EELA:0.150276,CONGERA:0.213019):0.230956,(EELB:0.263487,CONGERB:0.202633):0.246917):0.094785,((CAVEFISH:0.451027,(GOLDFISH:0.340495,ZEBRAFISH:0.390163):0.220565):0.067778,((((((NSAM:0.008113,NARG:0.014065):0.052991,SPUN:0.061003,(SMIC:0.027806,SDIA:0.015298,SXAN:0.046873):0.046977):0.009822,(NAUR:0.081298,(SSPI:0.023876,STIE:0.013652):0.058179):0.091775):0.073346,(MVIO:0.012271,MBER:0.039798):0.178835):0.147992,((BFNKILLIFISH:0.317455,(ONIL:0.029217,XCAU:0.084388):0.201166):0.055908,THORNYHEAD:0.252481):0.061905):0.157214,LAMPFISH:0.717196,((SCABBARDA:0.189684,SCABBARDB:0.362015):0.282263,((VIPERFISH:0.318217,BLACKDRAGON:0.109912):0.123642,LOOSEJAW:0.3971):0.287152):0.140663):0.206729):0.222485,(COELACANTH:0.558103,((CLAWEDFROG:0.441842,SALAMANDER:0.299607):0.135307,((CHAMELEON:0.771665,((PIGEON:0.150909,CHICKEN:0.172733):0.082163,ZEBRAFINCH:0.099172):0.272338):0.014055,((BOVINE:0.167569,DOLPHIN:0.15745):0.104783,ELEPHANT:0.166557):0.367205):0.050892):0.114731):0.295021)',
  );
  useLayoutEffect(() => {
    tree.render({
      container: treeContainer.current,
      height: 500,
      width: 500,
      'left-right-spacing': 'fit-to-size',
      'top-bottom-spacing': 'fit-to-size',
      zoom: true,
    });

    $(tree.display.container).append(tree.display.show());

    console.log(tree);
  });

  return <div className="tree" ref={treeContainer} />;
}

[stevenweaver]

Dear @pedrogiroldo,

You'll need to include the CSS somehow in order for the tree to render correctly, located here https://github.com/veg/phylotree.js/blob/master/phylotree.css.

As far as the second issue, I might need to debug that one.

Best, Steven

[pedrogiroldo]

Thanks @stevenweaver for the css info, it worked! But I just don't know what I'll do to solve the querySelector issue.

[pedrogiroldo]

I'm trying, but got nothing

[nickynicolson]

@pedrogiroldo - I have the same querySelector issue in electron - did you find a workaround?

[pedrogiroldo]

@nickynicolson, unfortunately not, I just gave up after some tries. Do you have any idea?