demo improvements mentioned in #29

iVis-at-Bilkent · Feb 26, 2024 · 07e1dcb · 07e1dcb
1 parent 23d22bb
commit 07e1dcb
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 53 deletions.
diff --git a/demo/accordion.css b/demo/accordion.css
@@ -2,7 +2,7 @@
     background-color: #eee;
     color: #444;
     cursor: pointer;
-    padding: 18px;
+    padding: 10px;
     width: 100%;
     border: none;
     text-align: left;

diff --git a/demo/index.html b/demo/index.html
@@ -44,22 +44,21 @@ <h1>Cytoscape - HySE</h1>
           <button hidden onclick="addNode()">Add Node</button>
 
           <!--create a dropdown showing sample graphs-->
-          <button class="accordion active">Save/Load</button>
+          <button class="accordion active">File</button>
           <div class="panel" style="display: block;">
             <div class="row">
-              <select id="experimentGraphs">
+              <select id="experimentGraphs" onchange="runLayout()">
                 <option value="unix-family-tree">unix-family-tree</option>
               </select>
-              <button title="Load and Layout Sample" onclick="runLayout()">Load Sample</button>
 
               <input type="file" id="fileInput" accept=".graphml" hidden>
-              <button title="Load Graph From File" onclick="loadGraph()">Load</button>
+              <button title="Load Graph From File" onclick="loadGraph()">Load...</button>
 
               <button title="Save Graph To File" onclick="saveGraph()">Save</button>
             </div>
           </div>
 
-          <button class="accordion active">HySE</button>
+          <button class="accordion active">HySE Options</button>
           <div class="panel" style="display: block;">
             <div class="row">
               <input class="form-check-input" type="checkbox" id="performPostProcessing" checked>
@@ -85,6 +84,11 @@ <h1>Cytoscape - HySE</h1>
               <input title="Are the nodes uniform in shape/size?" class="form-check-input" type="checkbox" id="uniformNodeDimensions" checked>
               <label title="Are the nodes uniform in shape/size?" class="form-label" for="uniformNodeDimensions">Uniform Node Dimensions</label>
             </div>
+
+            <div class="row">
+              <input title="Highlight swapped nodes with colored borders" class="form-check-input" type="checkbox" id="colorSwappedPair">
+              <label title="Highlight swapped nodes with colored borders" class="form-label" for="colorSwappedPair">Highlight Swapped Node Pair</label>
+            </div>
 
             <div class="row">
               <label title="Distance between ranks in heirarchy + maximum node height" class="form-label" for="rankGap"> Rank Gap </label>
@@ -93,8 +97,7 @@ <h1>Cytoscape - HySE</h1>
 
             <div class="row">
               <label title="Repulsion force between nodes" class="form-label" for="defaultNodeRepulsion"> Repulsion Force </label>
-              <input title="Repulsion force between nodes" type="range" min="50" max="100000" class="form-control form-control-sm" id="defaultNodeRepulsion" value="55000" oninput="setNodeRepulsionText()">
-              <input type="number" value="55000" id="nodeRepulsion" hidden/>
+              <input title="Repulsion force between nodes" type="range" min="50" max="100000" class="form-control form-control-sm" id="nodeRepulsion" value="5500" oninput="setNodeRepulsionText()">
               <p id="nodeRepulsionText"></p>
             </div>
 
@@ -104,12 +107,12 @@ <h1>Cytoscape - HySE</h1>
             </div>
 
             <div class="row">
-              <label title="Force Threshold above which nodes would be swapped in heirarchy" class="form-label" for="swapForceLimit"> Swap Force Limit </label>
-              <input title="Force Threshold above which nodes would be swapped in heirarchy" type="number" class="form-control form-control-sm" id="swapForceLimit" value="15000">
+              <label title="Force threshold above which nodes would be swapped in heirarchy" class="form-label" for="swapForceLimit"> Swap Force Limit </label>
+              <input title="Force threshold above which nodes would be swapped in heirarchy" type="number" class="form-control form-control-sm" id="swapForceLimit" value="500">
             </div>
             <div class="row">
               <label title="Iterations after which swapping function is called" class="form-label" for="swapPeriod"> Swap Period </label>
-              <input title="Iterations after which swapping function is called" type="number" class="form-control form-control-sm" id="swapPeriod" value="50">
+              <input title="Iterations after which swapping function is called" type="number" class="form-control form-control-sm" id="swapPeriod" value="5">
             </div>
             <div class="row">
               <label title="Hold period for nodes after being swapped" class="form-label" for="minPairSwapPeriod"> Min Pair Swap Period </label>
@@ -118,7 +121,7 @@ <h1>Cytoscape - HySE</h1>
 
             <div class="row">
               <label title="Animation Tick Delay" class="label">Animation Tick Delay</label>
-              <input title="Animation Tick Delay" type="number" class="number-input" id="tickDelay" value="100">
+              <input title="Animation Tick Delay" type="number" class="number-input" id="tickDelay" value="10">
             </div>
 
             <div class="row">
@@ -132,7 +135,7 @@ <h1>Cytoscape - HySE</h1>
             </div>
           </div>
 
-          <button class="accordion">Graph Ops</button>
+          <button class="accordion">Graph Operations</button>
           <div class="panel">
             <div class="row">
               <button title="Add Selected To Heirarchy and Re-Layout" onclick="addNodesToHeirarchy()">Add To Heirarchy</button>
@@ -143,7 +146,7 @@ <h1>Cytoscape - HySE</h1>
               <input title="Probability of adding a node to heirarchical part" type="number" min="0" max="1" step="0.1" class="form-control form-control-sm" id="prob" value="1">
             </div>
             <div class="row">
-              <button title="Experiment" onclick="createRandomGraph()">Add Nodes to heirarchy randomly</button>
+              <button title="Add Nodes To Heirarchy Randomly" onclick="createRandomGraph()">Add Nodes To Heirarchy Randomly</button>
             </div>
 
             <div class="row">
@@ -164,7 +167,7 @@ <h1>Cytoscape - HySE</h1>
             </div>
           </div>
 
-          <button class="accordion">Cose/Dagre</button>
+          <button class="accordion">Cose/Dagre Layout</button>
           <div class="panel">
             <div class="row">
               <button title="Run Cose" onclick="runCose()">CoSE</button>
@@ -173,16 +176,16 @@ <h1>Cytoscape - HySE</h1>
             </div>
           </div>
 
-          <button class="accordion">Experiment/Test</button>
+          <button class="accordion">Experiments</button>
 
           <div class="panel">
             <div class="row">
-              <button title="Experiment" onclick="runExperiment2()">Run Experiment</button>
+              <button title="HySE is run on experimental dataset and results are compiled as charts" onclick="runExperiment2()">Run Experiment</button>
             </div>
 
             <div class="row">
-              <label title="Ratio of heirarchical nodes to non-heirarchical nodes" class="form-label" for="ratio"> Directed : Undirected (Ratio) </label>
-              <input title="Ratio of heirarchical nodes to non-heirarchical nodes" type="number" min="0" max="1" step="0.1" class="form-control form-control-sm" id="ratio" value="0.4">
+              <label title="Ratio of Heirarchical Nodes to Non-Heirarchical Nodes" class="form-label" for="ratio"> Directed : Undirected (Ratio) </label>
+              <input title="Ratio of Heirarchical Nodes to Non-Heirarchical Nodes" type="number" min="0" max="1" step="0.1" class="form-control form-control-sm" id="ratio" value="0.4">
             </div>
             <div class="row">
               <label title="Depth Of Undirected Parts" class="form-label" for="depthThreshold">Depth</label>
@@ -200,7 +203,7 @@ <h1>Cytoscape - HySE</h1>
             </div>
 
             <div class="row">
-              <button onclick="createTestGraph()">Create Test Graph</button>
+              <button title="Create a test graph with the above parameters" onclick="createTestGraph()">Create Test Graph</button>
             </div>
           </div>
 

diff --git a/demo/index.js b/demo/index.js
@@ -1,8 +1,7 @@
 document.addEventListener("DOMContentLoaded", pageLoaded);
 
 function setNodeRepulsionText(){
-  document.getElementById("nodeRepulsionText").innerText = document.getElementById("defaultNodeRepulsion").value;
-  console.log("running");
+  document.getElementById("nodeRepulsionText").innerText = document.getElementById("nodeRepulsion").value;
 }
 
 async function pageLoaded() {
@@ -137,11 +136,6 @@ async function pageLoaded() {
           ]
     });
 
-
-
-
-
-
     //window.cy = cy;
     window.layvo = cy.layvo("get");
 
@@ -293,24 +287,6 @@ async function runLayout() {
 
 function rerun(){
     //run cytoscape layout
-    //remove all nodes whose id starts with compound
-    //cy.remove('node[id ^= "compound"]');
-    let nodesLength = cy.nodes().length;
-    if (nodesLength < 150) {
-      var nodeRepulsion = document.getElementById("defaultNodeRepulsion").value;
-      nodeRepulsion = nodeRepulsion * 0.1;
-      document.getElementById("nodeRepulsion").value = nodeRepulsion;
-      document.getElementById("swapForceLimit").value = 1500;
-      document.getElementById("swapPeriod").value = 5;
-      document.getElementById("minPairSwapPeriod").value = 5;
-    }
-    else{
-      document.getElementById("nodeRepulsion").value = document.getElementById("defaultNodeRepulsion").value;;
-      document.getElementById("swapForceLimit").value = 15000;
-      document.getElementById("swapPeriod").value = 50;
-      document.getElementById("minPairSwapPeriod").value = 10;
-    }
-
     const o = getOptions();
     o.isForceDirected = true;
     cy.layout(o).run();
@@ -442,6 +418,7 @@ function getOptions() {
       "displayInitialPositions",
       "randomizeInitialPositions",
       "useFRGridVariant",
+      "colorSwappedPair"
     ];
     const o = { name: "hyse" };
     for (let i = 0; i < opts.length; i++) {
@@ -1227,18 +1204,32 @@ async function runExperiment2(){
       "g_00480",
       "g_00490",
       "g_00500",
-      "g_01000",
-      "g_02000",
-      "g_03000",
+      // "g_01000",
+      // "g_02000",
+      // "g_03000",
     ];
 
     for (let i = 0; i < graphFiles.length; i++) {
 
       var fileName = folder + graphFiles[i] + "_06.json";
       await createTestGraphFromTwoGraphs(fileName,fileName);
+
+      let nodesLength = cy.nodes().length;
+      if (nodesLength < 150) {
+        document.getElementById("nodeRepulsion").value = 4500;
+        document.getElementById("swapForceLimit").value = 500;
+        document.getElementById("swapPeriod").value = 5;
+        document.getElementById("minPairSwapPeriod").value = 5;
+      }
+      else{
+        document.getElementById("nodeRepulsion").value = 55000;
+        document.getElementById("swapForceLimit").value = 1500;
+        document.getElementById("swapPeriod").value = 50;
+        document.getElementById("minPairSwapPeriod").value = 10;
+      }
+
       // run force directed
       rerun();
-      var nodesLength = cy.nodes().length;
       let directedEdges = [];
       let undirectedEdges = [];
       let mixedEdges = [];

diff --git a/dist/cytoscape-hyse.js b/dist/cytoscape-hyse.js
@@ -8616,6 +8616,7 @@
             _this.useFRGridVariantHySE = true;
             _this.idealEdgeLength = 50;
             _this.forceUpdateGrid = false;
+            _this.colorSwappedPair = true;
             // this method is used to override layout-base.js
             _this.calcRepulsionRange = function () {
                 // formula is 2 x (level + 1) x idealEdgeLength
@@ -9685,7 +9686,7 @@
                 this.swapOnOrderedLayers(p.layerId, p.order1, p.order2);
                 this.swappedPairs[pairId] = this.totalIterations;
                 this.banned2SwapPairs[pairId] = true;
-                this.highlightPair(pairId, true);
+                this.highlightPair(pairId, this.colorSwappedPair);
                 var e1 = this.id2LNode[p.n1].edges;
                 var e2 = this.id2LNode[p.n2].edges;
                 for (var i_1 = 0; i_1 < e1.length; i_1++) {
@@ -35906,6 +35907,7 @@
         l.nodeRepulsion = opts.nodeRepulsion;
         l.useFRGridVariantHySE = opts.useFRGridVariant;
         l.idealEdgeLength = opts.idealEdgeLength;
+        l.colorSwappedPair = !opts.colorSwappedPair;
         coseBase.CoSEConstants.TILE = false;
         console.log("opts: ", opts);
         var gm = l.newGraphManager();

diff --git a/dist/cytoscape-hyse.js.map b/dist/cytoscape-hyse.js.map
diff --git a/src/hyse-layout.ts b/src/hyse-layout.ts
@@ -49,6 +49,7 @@ export class HySELayout extends CoSELayout {
     useFRGridVariantHySE: boolean = true;
     idealEdgeLength: number = 50;
     forceUpdateGrid: boolean = false;
+    colorSwappedPair: boolean = true;
     constructor(layering, cy) {
         //console.trace();
         super();
@@ -1285,7 +1286,7 @@ export class HySELayout extends CoSELayout {
           this.swapOnOrderedLayers(p.layerId, p.order1, p.order2);
           this.swappedPairs[pairId] = this.totalIterations;
           this.banned2SwapPairs[pairId] = true;
-          this.highlightPair(pairId, true);
+          this.highlightPair(pairId, this.colorSwappedPair);
 
           const e1 = this.id2LNode[p.n1].edges;
           const e2 = this.id2LNode[p.n2].edges;

diff --git a/src/spring-embedder.ts b/src/spring-embedder.ts
@@ -33,6 +33,7 @@ export function runSpringEmbedder(g, layering: string[][], opts, cy) {
   l.nodeRepulsion = opts.nodeRepulsion;
   l.useFRGridVariantHySE = opts.useFRGridVariant;
   l.idealEdgeLength = opts.idealEdgeLength;
+  l.colorSwappedPair = !opts.colorSwappedPair;
   coseBase.CoSEConstants.TILE = false;
   console.log("opts: " ,opts);
 
@@ -57,7 +58,6 @@ export function runSpringEmbedder(g, layering: string[][], opts, cy) {
         else{
           window['cy'].nodes('#' + n.id).scratch("force_directed_pos", { x: n.rect.x, y: n.rect.y });
         }
-
       }
     }
     if (opts.isRelayer) {