debug page for webgl

cytoscape · Jun 25, 2024 · b72d481 · b72d481
1 parent d9c713f
commit b72d481
Show file tree

Hide file tree

Showing 13 changed files with 1,456,651 additions and 56 deletions.
diff --git a/debug/webgl/actions.js b/debug/webgl/actions.js
@@ -0,0 +1,31 @@
+/* global $, cy, networks, params */
+
+(function(){
+
+  function reloadPage() {
+    const networkID = $("#network-select").value;
+    const webgl = $("#webgl-check").checked;
+
+    const params = new URLSearchParams();
+    params.set('networkID', networkID);
+    params.set('webgl', webgl);
+
+    const href = window.location.origin + window.location.pathname + '?' + params.toString();
+    window.location.href = href;
+  }
+
+  for(const [networkID, network] of Object.entries(networks)) {
+    const option = document.createElement('option');
+    option.value = networkID;
+    option.innerHTML = `${network.desc} (${network.nodes} nodes, ${network.edges} edges)`;
+    $("#network-select").appendChild(option);
+  }
+
+  $("#network-select").value = params.networkID;
+  $("#webgl-check").checked = params.webgl;
+
+  $("#fit-button").addEventListener('click', () => cy.fit());
+  $("#network-select").addEventListener('change', () => reloadPage());
+  $("#webgl-check").addEventListener('click', () => reloadPage());
+
+})();
diff --git a/debug/webgl/code.js b/debug/webgl/code.js
@@ -0,0 +1,156 @@
+
+const cy = cytoscape({
+  container: document.getElementById('cy'), // container to render in
+
+  layout: {
+    name: 'cose',
+    animate: false,
+  },
+
+  renderer: {
+    name: 'canvas',
+    webgl: true,
+    showFps: true
+  },
+
+  style: [
+    {
+      selector: 'node',
+      style: {
+        'label': 'data(id)',
+        'text-valign': 'center',
+        'color': '#000000',
+        'background-color': '#3a7ecf',
+        'font-family': 'Helvetica'
+      },
+    },
+    {
+      selector: '#n1',
+      style: {
+        'background-fill': 'linear-gradient',
+        'background-gradient-stop-colors': 'cyan magenta yellow',
+        'underlay-color': 'red',
+        'underlay-shape': 'round-rectangle',
+        'underlay-opacity': 0.5
+      }
+    },
+    {
+      selector: '#n2',
+      style: {
+        'background-fill': 'linear-gradient',
+        'background-gradient-direction': 'to-left',
+        'background-gradient-stop-colors': 'gold red lawngreen'
+      }
+    },
+    {
+      selector: '#n3',
+      style: {
+        'background-fill': 'radial-gradient',
+        'background-gradient-stop-colors': 'cyan magenta yellow',
+        'text-valign': 'top',
+        'text-rotation': 3.14/2
+      }
+    },
+    {
+      selector: '#n4',
+      style: {
+        "border-color": "black",
+        "border-style": "dashed",
+        "border-width": 2,
+        'background-opacity': 0.5,
+      }
+    },
+    {
+      selector: '#n5',
+      style: {
+        "border-color": "red",
+        "border-style": "dotted",
+        "border-width": 4,
+        'width': 50,
+        'background-opacity': 0.5,
+        'text-valign': 'top'
+      }
+    },
+    {
+      selector: 'edge',
+      style: {
+        'width': 2,
+        'line-color': '#3a7ecf',
+        'opacity': 0.5,
+      },
+    },
+    {
+      selector: '#n1-n2',
+      style: {
+        'line-style': 'solid'
+      }
+    },
+    {
+      selector: '#n1-n3',
+      style: {
+        'line-style': 'dotted'
+      }
+    },
+    {
+      selector: '#n1-n4',
+      style: {
+        'line-style': 'dashed'
+      }
+    },
+    {
+      selector: '#n1-n5',
+      style: {
+        'line-style': 'dashed',
+        'line-dash-pattern': [1, 1, 4, 1],
+      }
+    },
+    {
+      selector: '#n2-n3',
+      style: {
+        'line-fill': 'linear-gradient',
+        'line-gradient-stop-colors': 'lawngreen red'
+      }
+    },
+    {
+      selector: '#n2-n4',
+      style: {
+        'label': 'normal label',
+        'font-size': '6px',
+        'edge-text-rotation': 'autorotate',
+      }
+    },
+    {
+      selector: '#n2-n5',
+      style: {
+        'label': 'bold label',
+        'font-size': '6px',
+        'edge-text-rotation': 'autorotate',
+        'font-weight': 'bold'
+      }
+    }
+  ],
+  elements: {
+    nodes: [
+      { data: { id: 'n1', weight: 1 } },
+      { data: { id: 'n2', weight: 2 } },
+      { data: { id: 'n3', weight: 3 } },
+      { data: { id: 'n4', weight: 4 } },
+      { data: { id: 'n5', weight: 5 } },
+    ],
+    edges: [
+      { data: { id:'n1-n2', source: 'n1', target: 'n2', directed: 'false' } },
+      { data: { id:'n1-n3', source: 'n1', target: 'n3', directed: 'false' } },
+      { data: { id:'n1-n4', source: 'n1', target: 'n4', directed: 'false' } },
+      { data: { id:'n1-n5', source: 'n1', target: 'n5', directed: 'false' } },
+      { data: { id:'n2-n3', source: 'n2', target: 'n3', directed: 'false' } },
+      { data: { id:'n2-n4', source: 'n2', target: 'n4', directed: 'false' } },
+      { data: { id:'n2-n5', source: 'n2', target: 'n5', directed: 'false' } },
+      { data: { id:'n3-n4', source: 'n3', target: 'n4', directed: 'false' } },
+      { data: { id:'n3-n5', source: 'n3', target: 'n5', directed: 'false' } },
+      { data: { id:'n4-n5', source: 'n4', target: 'n5', directed: 'false' } },
+    ],
+  },
+});
+
+window.cy = cy;
+// console.log("hello!");
diff --git a/debug/webgl/index.html b/debug/webgl/index.html
@@ -14,7 +14,7 @@
 
     <link rel="shortcut icon" href="../images/favicon.png" />
 
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="./style.css" />
 
     <script>
       var $ = function( sel ){ return document.querySelector(sel); };
@@ -55,14 +55,40 @@
 
         <button id="hide-commands">-</button>
 
-        <h2>Testing</h2>
-        <select id="test-type-select">
-        </select>
+        <h2>Network</h2>
+        <select id="network-select">
+        </select><br />
+        <br />
+        <button id="fit-button">Fit to view</button> <br />
+        <br />
+        <h2>Settings</h2>
+        <div>
+          <input type="checkbox" id="webgl-check" checked />
+          <label for="webgl-check">Use WebGL2</label>
+        </div>
+        <!--
+        <div>
+          <input type="checkbox" id="show-labels" checked />
+          <label for="show-labels">Show Labels</label>
+        </div>
+        -->
+
+        <!--
+          What else to show...
+          - Toggle color mapping
+          - Toggle transparancy
+          - Style stuff...
+            - Images?
+          - Run a layout
+          - Delete selected elements
+          - Add elements??
+        -->
 
       </div>
 
-
+      <script src="networks.js"></script>
       <script src="init.js"></script>
+      <script src="actions.js"></script>
   </body>
 
 </html>
diff --git a/debug/webgl/init.js b/debug/webgl/init.js
@@ -1,59 +1,54 @@
 /* eslint-disable no-console, no-unused-vars */
-/* global $, cytoscape, options, cy */
+/* global $, cytoscape, options, cy, networks, styles */
 
-var cy, defaultSty, options;
+var cy;
+
+var params = {};
 
 (function(){
-  options = {
-    container: $('#cytoscape'),
-    renderer: {
-      name: 'canvas',
-      showFps: true
-    },
-    webgl: true,
-    layout: {
-      name: 'preset',
-      animate: false
-    },
-
-    style: [{
-        "selector": "node",
-        "style": {
-          "border-width": "12px",
-          "border-opacity": "0",
-          "width": "40px",
-          "height": "40px",
-          "font-size": "8px",
-          "text-valign": "center",
-          "text-wrap": "wrap",
-          "text-max-width": "80px",
-          "background-color": "lightblue",
-          "z-index": "1",
-          "label": "data(description)",
-          'text-outline-width': 2,
-          'color': '#fff',
-          'background-color': 'mapData(NES, -3.14, 3.14, blue, red)',
-          'text-outline-color': 'mapData(NES, -3.14, 3.14, blue, red)',
-        },
-      },
-      {
-        selector: 'edge',
-        style: {
-          'line-color' : '#888',
-          'line-opacity': 0.9,
-          'curve-style': 'haystack',
-          'haystack-radius': 0,
-          'width': ele => ele.data('similarity_coefficient') * 15,
-        }
+
+  const urlParams = new URLSearchParams(window.location.search);
+  params.networkID = urlParams.get('networkID') || networks.def;
+  params.webgl  = urlParams.get('webgl') || false;
+
+  const network = networks[params.networkID];
+  const style = styles[params.networkID];
+
+
+  function load(elements, style) {
+    console.log('style', style);
+    options = {
+      container: $('#cytoscape'),
+
+      renderer: {
+        name: 'canvas',
+        showFps: true,
+        webgl: params.webgl,
       },
-    ]
-  };
 
-  fetch('./em-network.json')
+      style: style,
+      elements: elements,
+      layout: network.layout
+    };
+    options.layout.animate = false;
+    cy = cytoscape(options);
+  }
+
+  if(style.file) {
+    console.log('loading style from file: ', style.file);
+    Promise.all([
+      fetch(network.file).then(res => res.json()),
+      fetch(style.file).then(res => res.json())
+    ]).then(([networkJson, styleJson]) => {
+      load(networkJson.elements, styleJson.style);
+    });
+  } else {
+    fetch(network.file)
     .then(res => res.json())
-    .then(json => {
-      options.elements = json.elements;
-      cy = cytoscape(options);
+    .then(networkJson => {
+      const style = styles[params.networkID];
+      load(networkJson.elements, style);
     });
+  }
 
 })();