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 {