ENCD-6284 sescc bug fix (#4259)

ENCODE-DCC · Feb 11, 2022 · a07e17d · a07e17d
1 parent 5425c8b
commit a07e17d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git 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 {
                 >
                     <div className="body-map-expander">Filter results by cell lineage</div>
                     {svgIcon('expandArrows')}
-                    <div className="vertical-node-graph vertical-node-graph-thumbnail" />
+                    <div className="vertical-node-graph vertical-node-graph-thumbnail immune-cells-graph" />
                 </button>
                 {this.state.isThumbnailExpanded ?
                     <div className="modal" style={{ display: 'block' }}>

diff --git 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
@@ -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
@@ -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 {