#118 fixes

demo/demo-compounds-collapsed.html

@@ -43,26 +43,28 @@ <h1>cytoscape-expand-collapse demo</h1>
       <div class="accordion-container">
         <div class="accordion">Nodes</div>
         <div class="panel">
+          <button id="add-compound">Add compound for selected</button>
+          <button id="remove-compound">Remove selected compound</button>
           <button id="expandAllAndRemove">Expand all and remove</button>
           <button id="loadInCollapsedState">Load compouds collapsed</button>
           <button id="collapseAll">Collapse all nodes</button>
           <button id="expandAll">Expand all nodes</button>
           <button id="collapseRecursively">Collapse selected recursively</button>
           <button id="expandRecursively">Expand selected recursively</button>
           <button id="apply-markov-clustering">Apply Markov clustering</button>
-          <form>
+          <div>
             <label for="clustering-depth-input">
               <b> Clustering depth: </b>
             </label>
             <input id="clustering-depth-input" type="number" value="1" min="1" style="width:50px" oninput="(!validity.rangeUnderflow||(value=1)) &&
             (!validity.stepMismatch||(value=parseInt(this.value)));" />
-          </form>
-          <form>
+          </div>
+          <div>
             <label for="cluster-by-default">
               <b>Apply Markov clustering on load</b>
             </label>
             <input id="cluster-by-default" type="checkbox" />
-          </form>
+          </div>
         </div>
       </div>
       <div class="accordion-container">
@@ -74,18 +76,18 @@ <h1>cytoscape-expand-collapse demo</h1>
           <button id="expandSelectedEdges">Expand selected edges </button>
           <button id="collapseEdgesBetweenNodes"> Collapse edges between selected nodes</button>
           <button id="expandEdgesBetweenNodes"> Expand edges between selected nodes</button>
-          <form>
+          <div>
             <label for="cluster-by-default">
               <b>Group edges of similar type</b>
             </label>
             <input id="groupEdges" type="checkbox" />
-          </form>
-          <form>
+          </div>
+          <div>
             <label for="cluster-by-default">
               <b>Allow nested edge collapse </b>
             </label>
             <input id="allowNestedEdgeCollapse" type="checkbox" />
-          </form>
+          </div>
         </div>
       </div>
 

demo/demo-compounds.js

@@ -153,6 +153,15 @@ function activateAccordions() {
   }
 }
 
+function addParentNode(idSuffix, parent = undefined) {
+  const id = 'c' + idSuffix;
+  const parentNode = { data: { id: id } };
+  cy.add(parentNode);
+  cy.$('#' + id).move({ parent: parent });
+  return id;
+}
+
+
 function main() {
   const edgeStyles = {
     "type1": { "color": "#CFA79D", "arrowShape": "triangle" },
@@ -319,6 +328,12 @@ function main() {
   var elements = null;
   var markovClusteringClickable = true;
 
+
+  function setClusterBtn(isEnabled) {
+    markovClusteringClickable = isEnabled;
+    document.getElementById("apply-markov-clustering").disabled = !isEnabled;
+  }
+
   document.getElementById("collapseRecursively").addEventListener("click", function () {
     api.collapseRecursively(cy.$(":selected"));
   });
@@ -392,10 +407,7 @@ function main() {
 
     }
     cy.endBatch();
-    const btn = document.getElementById("apply-markov-clustering");
-    btn.removeEventListener("click", applyMarkovClustering);
-    btn.disabled = true;
-    markovClusteringClickable = false;
+    setClusterBtn(false);
   }
 
   document.getElementById("graphml-input").addEventListener("change", function (evt) {
@@ -417,9 +429,7 @@ function main() {
       document.getElementById("graphml-input").value = "";
       //avoid adding the same listener multiple times
       if (!markovClusteringClickable) {
-        document.getElementById("apply-markov-clustering").addEventListener("click", applyMarkovClustering);
-        document.getElementById("apply-markov-clustering").style.cursor = "pointer";
-        markovClusteringClickable = true;
+        setClusterBtn(true);
       }
       if (document.getElementById("cluster-by-default").checked) {
         applyMarkovClustering();
@@ -485,11 +495,46 @@ function main() {
     })
   });
 
+  document.getElementById('add-compound').addEventListener('click', function () {
+    const elems = cy.nodes(':selected');
+    if (elems.length < 1) {
+      return;
+    }
+    const parent = elems[0].parent().id();
+    for (let i = 1; i < elems.length; i++) {
+      if (parent !== elems[i].parent().id()) {
+        return;
+      }
+    }
+    const id = new Date().getTime();
+    addParentNode(id, parent);
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].move({ parent: 'c' + id });
+    }
+  });
+
+  document.getElementById('remove-compound').addEventListener('click', function () {
+    const elems = cy.nodes(':selected').filter(':compound');
+    if (elems.length < 1) {
+      return;
+    }
+    for (let i = 0; i < elems.length; i++) {
+      // expand if collapsed
+      if (elems[i].hasClass('cy-expand-collapse-collapsed-node')) {
+        api.expand(elems[i], { layoutBy: null, fisheye: false, animate: false });
+      }
+      const grandParent = elems[i].parent().id() ?? null;
+      const children = elems[i].children();
+      children.move({ parent: grandParent });
+      cy.remove(elems[i]);
+    }
+  });
+
   activateAccordions();
 
   setTimeout(() => {
     document.getElementsByClassName('accordion')[1].click();
-  }, 1000);
+  }, 500);
 }
 
 document.addEventListener('DOMContentLoaded', main);

demo/style.css

@@ -47,8 +47,8 @@ button {
   position: relative;
   display: inline-block;
   height: 36px;
-  padding: 0 16px;
-  margin: 10px 4px;
+  padding: 0 8px;
+  margin: 6px 2px;
   background-color: #ffffff;
   color: #3f51b5;
   border: 0;