Color the <mutationList> according to some reference strain

[babarlelephant]

Hi, this is a proposal, obtained by adding a few lines in MutationTable.js

const ListOfMutations = ({node,name, muts, displayAsIntervals, isNuc, gene}) => { // more parameters
 [.....]
	return (
		<MutationLine>
		  <SubHeading key={name}>{title}</SubHeading>
		  {mutString.map((mut,isnotfirst) => getColoredSpan(mut,node,gene,isnotfirst))}   // one span per mutation
		</MutationLine>
    );
}

const MutationList = styled.span` `;
const MutationListRed = styled.span`color:red; `;
const MutationListBlue = styled.span`color:cyan;`;

const getColoredSpan = (mut,node,gene,isnotfirst) => {
	var col= babarGetColor(mut,node,gene);
	if (isnotfirst) mut = ","+mut;
	if (col == 0) return <MutationList>{mut}</MutationList>;
	if (col == 1) return <MutationListRed>{mut}</MutationListRed>;
	if (col == 2) return <MutationListBlue>{mut}</MutationListBlue>;
}



function babarGetColor(mut,node,gene) {
	if (node.name != secondNode.name) secondNode = fillMuts(node);   /// the mutation list of the clicked node, the list for the selected node was made previously
	
	var a = null;
	var b = null;
	mut = mut.substr(1);
	if (gene in selectedNode.mutationsList) {
		var ind = selectedNode.mutationsList[gene].indexOf(mut);
		if (ind != -1) a = selectedNode.parentList[gene][ind];
	}
	if (gene in secondNode.mutationsList) {
		var ind = secondNode.mutationsList[gene].indexOf(mut);
		if (ind != -1) b = secondNode.parentList[gene][ind];
	}
	if (!a) return 0;  /// mutation not found in the selected node, color in white
	if (a == b) return 1;     /// if the mutation appeared in the same node in both parent list then it must be the MRCA so color in red
	return 2;  // color in blue, the mutation appeared after the MRCA
}

let selectedNode = {name:"",mutationsList:{},parentList:{}};
let secondNode = {name:"",mutationsList:{},parentList:{}};
export function babarSelectStrain(node,clearSelectedNode) { /// called by the onclick of the REF button added in click.js
	clearSelectedNode(node);
	selectedNode=fillMuts(node.node.n);
}
function fillMuts(currentNode) {   /// make a list of the mutations in the tip and to each mutation associate the name of the node where it appears (last)
	var tmpMuts = {};
	var o = {name:currentNode.name,mutationsList:{},parentList:{}};
	while ( currentNode != currentNode.parent) {
		if (currentNode.branch_attrs && currentNode.branch_attrs.mutations) {
			for (var g in currentNode.branch_attrs.mutations) {
				if (!tmpMuts[g]) tmpMuts[g] = {};
				for (var j = 0; j < currentNode.branch_attrs.mutations[g].length; j++) {
					var mut = currentNode.branch_attrs.mutations[g][j];
					var ind = parseInt(mut.substr(1));
					var base = mut[mut.length-1];
					if (!tmpMuts[g][ind]) {
						tmpMuts[g][ind] = base;
						if (!o.parentList[g]) { o.parentList[g] = []; o.mutationsList[g] = [];}
						o.parentList[g].push(currentNode.name);
						o.mutationsList[g].push(mut.substr(1));    /// store the mutation as 614G we don't care that it is D614G
					}
				}
			}
		}
		currentNode = currentNode.parent;
	}
	return o;
}

/// in click.js
const SmallButtonSelect = styled.button`background-color: #04AA6D; border: none; color: white; padding: 5px; text-align: center; display: inline-block; font-size: 10px; margin: 4px 2px; cursor: pointer; border-radius: 50%; `;

const NodeClickedPanel = ({selectedNode, clearSelectedNode, colorings, observedMutations, geneSortFn, t}) => {
 [.....]
 <StrainName>{title}  <SmallButtonSelect onClick ={() =>babarselectStrain(selectedNode,clearSelectedNode)}>ref</SmallButtonSelect></StrainName>
 [....]
}

[victorlin]

Thanks for opening this feature request! This is currently out of our development scope currently, and we have added it to our backlog.