Allow <g> elements to represent treatments

[ptgolden]

There's an assumption that one shape represents a treatment in an SVG diagram, but this is not necessarily the case. In fact, it might be easiest, to make every case the same, to wrap non-<g> elements in <g> elements representing the actual shapes making up the transcripts. Then in https://github.com/dredge-bio/dredge/blob/c6a6a8f3d46addb80d3f77cb4ea2be4519375337/src/components/TreatmentSelector.js and

dredge/src/actions.js

Lines 544 to 620 in c6a6a8f

	function cleanSVGString(svgString, treatments) {
	const parser = new DOMParser()
	, svgDoc = parser.parseFromString(svgString, 'image/svg+xml')
	, iterator = svgDoc.createNodeIterator(svgDoc, NodeFilter.SHOW_ELEMENT)
	, treatmentNames = new Set(Object.keys(treatments))
	let curNode
	;[...svgDoc.querySelectorAll('title')].forEach(el => {
	el.parentNode.removeChild(el)
	})
	const anchorsToRemove = []
	while ( (curNode = iterator.nextNode()) ) {
	switch (curNode.nodeName.toLowerCase()) {
	case 'path':
	case 'rect':
	case 'circle':
	case 'elipse':
	case 'polyline':
	case 'polygon': {
	let treatment = null
	const popTreatmentFromAttr = attr => {
	treatment = curNode.getAttribute(attr)
	if (treatmentNames.has(treatment)) {
	curNode.removeAttribute(attr)
	return true
	}
	return false
	}
	popTreatmentFromAttr('id') || popTreatmentFromAttr('name')
	if (treatment) {
	const { label } = treatments[treatment]
	curNode.setAttribute('data-treatment', treatment)
	const titleEl = document.createElement('title')
	titleEl.textContent = label || treatment
	curNode.appendChild(titleEl)
	treatmentNames.delete(treatment)
	// Illustrator, for some reason, makes all paths the child of
	// an anchor tag. That messes up our clicking business. We
	// could probably preventDefault() or stopPropagation()
	// somewhere, but I'm just removing them here.
	const replaceParent = (
	curNode.parentNode.nodeName.toLowerCase() === 'a' &&
	curNode.parentNode.children.length === 1
	)
	if (replaceParent) {
	anchorsToRemove.push(curNode.parentNode)
	}
	}
	break;
	}
	}
	// Remove ID, since multiple instances of this SVG will be in the
	// document. Alternatively, the whole thing could always be wrapped
	// in an iframe, but that would require inter-frame communication,
	// which seems like a pain in the ass.
	curNode.removeAttribute('id')
	}
	anchorsToRemove.forEach(el => {
	el.replaceWith(el.children[0])
	})
	return svgDoc.rootElement.outerHTML
	}

we can operate on all descendants of those <g>s, rather than the elements-representing-treatments themselves.