Skip to content

Commit 80bf1ab

Browse files
d-calland-callan
committed
wip adding various highlight examples instead of toggles
1 parent 70bb2aa commit 80bf1ab

File tree

1 file changed

+47
-92
lines changed

1 file changed

+47
-92
lines changed

‎app/index.html‎

Lines changed: 47 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -386,10 +386,14 @@ <h5 class="mb-0">
386386
data-parent="#accordion"
387387
>
388388
<div class="card-body">
389-
<!-- <div class="form-group">
390-
<label for="colorMode">Color Mode</label>
391-
<select id="colorMode" class="form-control form-control-sm skip"></select>
392-
</div> -->
389+
<div class="form-group">
390+
<label for="highlightMode">Highlighting Example</label>
391+
<select id="highlightMode" class="form-control form-control-sm skip">
392+
<option value="none">No highlighting</option>
393+
<option value="leaves">Highlight leaf nodes</option>
394+
<option value="monophyletic">Highlight E. coli and Shigella branches+nodes</option>
395+
</select>
396+
</div>
393397
<div class="form-group">
394398
<label>Default Node Color</label>
395399
<input
@@ -417,20 +421,6 @@ <h5 class="mb-0">
417421
value="#feb640"
418422
>
419423
</div>
420-
<div class="form-group">
421-
<div class="switch">
422-
<label>
423-
<input id="highlightLeaves" type="checkbox" class="skip"> Highlight Leaves
424-
</label>
425-
</div>
426-
</div>
427-
<div class="form-group">
428-
<div class="switch">
429-
<label>
430-
<input id="highlightBranches" type="checkbox" class="skip"> Highlight Branches
431-
</label>
432-
</div>
433-
</div>
434424
</div>
435425
</div>
436426
</div>
@@ -750,108 +740,73 @@ <h5 class="modal-title" id="exportModalLabel">Export</h5>
750740
tree.setAnimation(cached);
751741
});
752742

753-
// might want this back when we have more color mode options
754-
// for now, ill leave it out in favor of the highlight toggle
755-
/* d3.select("#colorMode").on("input", function() {
756-
// this could prove annoying, but ill leave it for now
757-
if (this.value === "list") {
758-
d3.select("#defaultNodeColor").node().value = "#243127";
759-
} else {
760-
d3.select("#defaultNodeColor").node().value = "#4682B4";
743+
d3.select("#highlightMode").on("input", function() {
744+
if (this.value === "none") {
745+
tree.setColorOptions({
746+
nodeColorMode: "none",
747+
branchColorMode: "none",
748+
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
749+
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
750+
highlightColor: d3.select("#highlightColor").node().value
751+
});
752+
} else if (this.value === "leaves") {
753+
tree.setColorOptions({
754+
nodeColorMode: "list",
755+
branchColorMode: "none",
756+
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
757+
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
758+
highlightColor: d3.select("#highlightColor").node().value,
759+
nodeList: tree.getNodeGUIDs(true)
760+
});
761+
} else if (this.value === "monophyletic") {
762+
tree.setColorOptions({
763+
nodeColorMode: "list",
764+
branchColorMode: "monophyletic",
765+
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
766+
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
767+
highlightColor: d3.select("#highlightColor").node().value,
768+
// todo set to false, to get branch nodes too
769+
// todo update this fxn, or add another, to return GUIDs based on some attribute, or the id of the node
770+
nodeList: tree.getNodeGUIDs(true)
771+
})
761772
}
762-
763-
tree.setColorOptions({
764-
colorMode: this.value,
765-
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
766-
highlightColor: d3.select("#highlightColor").node().value
767-
});
768773
});
769-
*/
774+
770775
d3.select("#defaultNodeColor").on("input", function() {
771776
tree.setColorOptions({
772-
nodeColorMode: d3.select("#highlightLeaves").property("checked") ? "list" : "none",
773-
branchColorMode: d3.select("#highlightBranches").property("checked") ? "monophyletic" : "none",
777+
nodeColorMode: d3.select("#highlightMode").property("value") === "none" ? "none" : "list",
778+
branchColorMode: d3.select("#highlightMode").property("value") === "monophyletic" ? "monophyletic" : "none",
774779
defaultNodeColor: this.value,
775780
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
776781
highlightColor: d3.select("#highlightColor").node().value,
782+
// todo make this dependent on highlightMode, once this fxn is updated
777783
nodeList: tree.getNodeGUIDs(true)
778784
});
779785
});
780786

781787
d3.select("#defaultBranchColor").on("input", function() {
782788
tree.setColorOptions({
783-
nodeColorMode: d3.select("#highlightLeaves").property("checked") ? "list" : "none",
784-
branchColorMode: d3.select("#highlightBranches").property("checked") ? "monophyletic" : "none",
789+
nodeColorMode: d3.select("#highlightMode").property("value") === "none" ? "none" : "list",
790+
branchColorMode: d3.select("#highlightMode").property("value") === "monophyletic" ? "monophyletic" : "none",
785791
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
786792
defaultBranchColor: this.value,
787793
highlightColor: d3.select("#highlightColor").node().value,
794+
// todo make this dependent on highlightMode, once this fxn is updated
788795
nodeList: tree.getNodeGUIDs(true)
789796
});
790797
});
791798

792799
d3.select("#highlightColor").on("input", function() {
793-
if (!d3.select("#highlightLeaves").property("checked")) {
794-
d3.select("#highlightLeaves").property("checked",true);
795-
}
796800
tree.setColorOptions({
797-
nodeColorMode: d3.select("#highlightLeaves").property("checked") ? "list" : "none",
798-
branchColorMode: d3.select("#highlightBranches").property("checked") ? "monophyletic" : "none",
801+
nodeColorMode: d3.select("#highlightMode").property("value") === "none" ? "none" : "list",
802+
branchColorMode: d3.select("#highlightMode").property("value") === "monophyletic" ? "monophyletic" : "none",
799803
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
800804
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
801805
highlightColor: this.value,
806+
// todo make this dependent on highlightMode, once this fxn is updated
802807
nodeList: tree.getNodeGUIDs(true)
803808
});
804809
});
805-
806-
d3.select("#highlightLeaves").on("input", function() {
807-
if (d3.select("#highlightLeaves").property("checked")) {
808-
tree.setColorOptions({
809-
nodeColorMode: "list",
810-
branchColorMode: d3.select("#highlightBranches").property("checked") ? "monophyletic" : "none",
811-
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
812-
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
813-
highlightColor: d3.select("#highlightColor").node().value,
814-
nodeList: tree.getNodeGUIDs(true)
815-
})
816-
} else {
817-
if (d3.select("#highlightBranches").property("checked")) {
818-
d3.select("#highlightBranches").property("checked", false);
819-
}
820-
tree.setColorOptions({
821-
nodeColorMode: "none",
822-
branchColorMode: d3.select("#highlightBranches").property("checked") ? "monophyletic" : "none",
823-
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
824-
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
825-
highlightColor: d3.select("#highlightColor").node().value,
826-
nodeList: tree.getNodeGUIDs(false)
827-
})
828-
}
829-
});
830-
831-
d3.select("#highlightBranches").on("input", function() {
832-
if (d3.select("#highlightBranches").property("checked")) {
833-
if (!d3.select("#highlightLeaves").property("checked")) {
834-
d3.select("#highlightLeaves").property("checked", true);
835-
}
836-
tree.setColorOptions({
837-
nodeColorMode: "list",
838-
branchColorMode: "monophyletic",
839-
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
840-
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
841-
highlightColor: d3.select("#highlightColor").node().value,
842-
nodeList: tree.getNodeGUIDs(true)
843-
})
844-
} else {
845-
tree.setColorOptions({
846-
nodeColorMode: d3.select("#highlightLeaves").property("checked") ? "list" : "none",
847-
branchColorMode: "none",
848-
defaultNodeColor: d3.select("#defaultNodeColor").node().value,
849-
defaultBranchColor: d3.select("#defaultBranchColor").node().value,
850-
highlightColor: d3.select("#highlightColor").node().value,
851-
nodeList: tree.getNodeGUIDs(true)
852-
})
853-
}
854-
});
855810

856811
d3.select("#branchNodeSize").on("input", function() {
857812
tree.eachBranchNode((node, data) => {

0 commit comments

Comments
 (0)