diff --git a/src/encoded/static/components/immune_cells.js b/src/encoded/static/components/immune_cells.js index b019b9ac71c..70623234bde 100644 --- a/src/encoded/static/components/immune_cells.js +++ b/src/encoded/static/components/immune_cells.js @@ -661,15 +661,13 @@ class MatrixGraph extends React.Component { }); } - setSelectedNodes(newNode) { - const nodeClass = document.getElementsByClassName(`js-cell-${nodeKeyName(newNode)}`)[0].classList; - + setSelectedNodes(newNode, activeBool) { this.setState((prevState) => { let tempNodes = []; if (document.getElementsByClassName('active-cell').length > 0) { tempNodes = prevState.selectedNodes; } - if ([...nodeClass].indexOf('active-cell') > -1) { + if (activeBool) { return { selectedNodes: tempNodes.filter((s) => s !== newNode) }; } return { selectedNodes: [...tempNodes, newNode] }; @@ -724,7 +722,7 @@ class MatrixGraph extends React.Component { >
Filter results by cell lineage
{svgIcon('expandArrows')} -
+
{this.state.isThumbnailExpanded ?
diff --git a/src/encoded/static/components/matrix_sescc_stem_cell.js b/src/encoded/static/components/matrix_sescc_stem_cell.js index ba2ba1dd948..cb74455a8d5 100644 --- a/src/encoded/static/components/matrix_sescc_stem_cell.js +++ b/src/encoded/static/components/matrix_sescc_stem_cell.js @@ -371,23 +371,17 @@ class MatrixPresentation extends React.Component { } } - setSelectedNodes(newNode) { + setSelectedNodes(newNode, activeBool) { this.setState((prevState) => { const matrixSelection = formatName(newNode, '_'); const newSelection = formatName(newNode, ''); const matrixRows = document.getElementsByClassName(matrixSelection); - if (prevState.selectedNodes.indexOf(newSelection) > -1 && prevState.selectedNodes.length > 1) { + if (activeBool) { for (let idx = 0; idx < matrixRows.length; idx += 1) { matrixRows[idx].classList.add('hide'); } return { selectedNodes: prevState.selectedNodes.filter((s) => s !== newSelection) }; } - if (prevState.selectedNodes.indexOf(newSelection) > -1) { - for (let idx = 0; idx < matrixRows.length; idx += 1) { - matrixRows[idx].classList.add('hide'); - } - return { selectedNodes: [] }; - } for (let idx = 0; idx < matrixRows.length; idx += 1) { matrixRows[idx].classList.remove('hide'); } diff --git a/src/encoded/static/libs/ui/node_graph.js b/src/encoded/static/libs/ui/node_graph.js index a5ab800810d..fcfaea975a1 100644 --- a/src/encoded/static/libs/ui/node_graph.js +++ b/src/encoded/static/libs/ui/node_graph.js @@ -107,7 +107,7 @@ export const drawTree = (d3, targetDiv, data, fullWidth, fullHeight, margin, sel if (children) { children.forEach((child) => { const clickedName = nodeKeyName(child.data.name); - setSelectedNodes(child.data.name); + setSelectedNodes(child.data.name, activeBool); if (activeBool) { d3.selectAll(`.js-cell-${nodeKeyName(child.data.name)}`).classed('active-cell', false); internalSelectedNodes = internalSelectedNodes.filter((s) => s !== clickedName); @@ -190,11 +190,11 @@ export const drawTree = (d3, targetDiv, data, fullWidth, fullHeight, margin, sel }); // If "hide all" has been selected and no nodes are active, the internal selected nodes need to be cleared - if (document.querySelectorAll('.active-cell').length === 0 && targetDiv.indexOf('thumbnail') === -1) { + if (document.querySelectorAll('.active-cell').length === 0 && targetDiv.indexOf('thumbnail') === -1 && treeName === 'immune') { internalSelectedNodes = []; } // If "show all" has been selected and all nodes are active, the internal selected nodes need to be added - if (document.querySelectorAll('.active-cell').length > 0 && internalSelectedNodes.length === 0 && targetDiv.indexOf('thumbnail') === -1) { + if (document.querySelectorAll('.active-cell').length > 0 && internalSelectedNodes.length === 0 && targetDiv.indexOf('thumbnail') === -1 && treeName === 'immune') { internalSelectedNodes = selectedNodes; } @@ -205,9 +205,10 @@ export const drawTree = (d3, targetDiv, data, fullWidth, fullHeight, margin, sel .attr('class', (d) => `node ${d.data.class ? d.data.class : ''} ${nodeKeyName(d.data.name)}`) .attr('transform', `translate(${source.x0},${source.y0})`) .on('click', (e, d) => { - setSelectedNodes(d.data.name); const clickedName = nodeKeyName(d.data.name); + // 'activeBool' represents if a clicked node is currently selected or de-selected so that that state can be toggled (and its children changed to that toggle value if shift is not pressed) const activeBool = d3.select(`.js-cell-${nodeKeyName(d.data.name)}`).classed('active-cell'); + setSelectedNodes(d.data.name, activeBool); if (document.querySelectorAll('.active-cell').length === 0) { internalSelectedNodes = []; } @@ -267,8 +268,10 @@ export const drawTree = (d3, targetDiv, data, fullWidth, fullHeight, margin, sel .then((svgXml) => { let newSvg; iconFileMapping[iconFile].forEach((n) => { - newSvg = svgXml.documentElement.cloneNode(true); - d3.select(n).node().append(newSvg); + if (d3.select(n) && d3.select(n).node()) { + newSvg = svgXml.documentElement.cloneNode(true); + d3.select(n).node().append(newSvg); + } }); }); }); diff --git a/src/encoded/static/scss/encoded/modules/_immune_cells.scss b/src/encoded/static/scss/encoded/modules/_immune_cells.scss index ac16f957b39..99dba5d5a27 100644 --- a/src/encoded/static/scss/encoded/modules/_immune_cells.scss +++ b/src/encoded/static/scss/encoded/modules/_immune_cells.scss @@ -97,7 +97,7 @@ $default-hover: #f2f2f2; border: 1px solid #d2d2d2; } -.vertical-node-graph { +.immune-cells-graph { svg { max-width: 100%; font-size: 0.8rem; @@ -236,7 +236,7 @@ $default-hover: #f2f2f2; .matrix__row-data { &.hide { - visibility: hidden; + display: none; } } @@ -312,18 +312,22 @@ $default-hover: #f2f2f2; .js-cell { .unlabeled { fill: $unlabeled-light; + stroke: #000; } .mesoderm { fill: $mesoderm-light; + stroke: #000; } .ectoderm { fill: $ectoderm-light; + stroke: #000; } .stem { fill: $stem-light; + stroke: #000; } &.active-cell {