| 703 | } |
| 704 | |
| 705 | function updateHoverCard(type: HoverType, nodeOrLink?: nn.Node | nn.Link, |
| 706 | coordinates?: [number, number]) { |
| 707 | let hovercard = d3.select("#hovercard"); |
| 708 | if (type == null) { |
| 709 | hovercard.style("display", "none"); |
| 710 | d3.select("#svg").on("click", null); |
| 711 | return; |
| 712 | } |
| 713 | d3.select("#svg").on("click", () => { |
| 714 | hovercard.select(".value").style("display", "none"); |
| 715 | let input = hovercard.select("input"); |
| 716 | input.style("display", null); |
| 717 | input.on("input", function() { |
| 718 | if (this.value != null && this.value !== "") { |
| 719 | if (type === HoverType.WEIGHT) { |
| 720 | (nodeOrLink as nn.Link).weight = +this.value; |
| 721 | } else { |
| 722 | (nodeOrLink as nn.Node).bias = +this.value; |
| 723 | } |
| 724 | updateUI(); |
| 725 | } |
| 726 | }); |
| 727 | input.on("keypress", () => { |
| 728 | if ((d3.event as any).keyCode === 13) { |
| 729 | updateHoverCard(type, nodeOrLink, coordinates); |
| 730 | } |
| 731 | }); |
| 732 | (input.node() as HTMLInputElement).focus(); |
| 733 | }); |
| 734 | let value = (type === HoverType.WEIGHT) ? |
| 735 | (nodeOrLink as nn.Link).weight : |
| 736 | (nodeOrLink as nn.Node).bias; |
| 737 | let name = (type === HoverType.WEIGHT) ? "Weight" : "Bias"; |
| 738 | hovercard.style({ |
| 739 | "left": `${coordinates[0] + 20}px`, |
| 740 | "top": `${coordinates[1]}px`, |
| 741 | "display": "block" |
| 742 | }); |
| 743 | hovercard.select(".type").text(name); |
| 744 | hovercard.select(".value") |
| 745 | .style("display", null) |
| 746 | .text(value.toPrecision(2)); |
| 747 | hovercard.select("input") |
| 748 | .property("value", value.toPrecision(2)) |
| 749 | .style("display", "none"); |
| 750 | } |
| 751 | |
| 752 | function drawLink( |
| 753 | input: nn.Link, node2coord: {[id: string]: {cx: number, cy: number}}, |