Read external Newick file

[jaygray0919]

A beautiful piece of work! We would like to customize your structure. For starters, we'll update your menus based on our customization. But we also would like to load Newick strings from external files. Do you have a version that does so? We've not been able to successfully process an external Newick file modifying this loading structure:

$("#example_GVZ").on ("click", function (e) {
    default_tree_settings ();

    function GVZ_colorizer (element, data) {
        element.style ('stroke-width', 4)
               .style ('stroke-linejoin', 'round')
               .style ('stroke-linecap', 'round');
    }
    var GVZ = 

As shown here: https://github.com/veg/phylotree.js/blob/master/index.html

If a modification is difficult, we'll follow your structure as-is and load the specific strings we choose to feature.

/jay gray

[stevenweaver]

Hi @jaygray0919,

Thank you for your kind words, I'm sure @spond will appreciate it when he sees this issue.

Have you seen the github page that loads a Newick file?

Specifically, you want to use the built-in JavaScript FileReader object.

This is the relevant code in the script portion of index.html :

$("#newick_file").on ("change", function (e) {
    var files = e.target.files; // FileList object
    if (files.length == 1) {
      var f = files[0];
      var reader = new FileReader();
      reader.onload = (function(theFile) {
        return function(e) {
            var res = d3.layout.newick_parser (e.target.result);

            if (res["json"]) {
                if (!("children" in res["json"])) {
                    res["error"] = "Empty tree";
                } 
            }

            var warning_div = d3.select ("#main_display").insert ("div", ":first-child");
            if (res["error"]) {
                warning_div.attr ("class", "alert alert-danger alert-dismissable")
                            .html ("<strong>Newick parser error for file " + f.name +": </strong> In file " + res["error"]);
            } else {
                default_tree_settings ();
                tree (res).svg (svg).layout();
                warning_div.attr ("class", "alert alert-success alert-dismissable")
                            .html ("Loaded a tree from  file <strong>" + f.name +": </strong>");
            }          
            warning_div.append ("button")
                       .attr ("type", "button")
                       .attr ("class", "close")
                       .attr ("data-dismiss", "alert")
                       .attr ("aria-hidden", "true")
                       .html ("&times;");
        };
      })(f);
      reader.readAsText(f);
    }
});

Basically, you read the file by using the readAsText method. The reader.onload callback is executed once the file has been read as text, the file contents are stored in e.target.result, and we pass that into d3.layout.newick_parser.

It might be worthwhile to incorporate some of this code into a method called readNewickFromFile directly into phylotree.js.

Best, Steven

[jaygray0919]

TY - will work on this next. We've worked with several Newick parsers; none compare to your implementation. /jg