better defaults for mobile

debug/webgl/index.html

@@ -138,6 +138,7 @@ <h2>WebGL Settings</h2>
         <div>
           Texture Rows: 
           <select id="texture-rows-select">
+            <option value="8">8</option>
             <option value="12">12</option>
             <option value="18">18</option>
             <option value="24">24</option>

debug/webgl/init.js

@@ -5,7 +5,7 @@ var cy;
 
 const paramDefs = {
   networkID: {
-    default: 'em-web',
+    default: 'style_test',
     control: '#network-select'
   },
   bgcolor: {
@@ -25,19 +25,19 @@ const paramDefs = {
   //   control: '#atlas-checkbox'
   // },
   webglTexSize: {
-    default: 4096,
+    default: 1024,
     control: '#texture-size-select'
   },
   webglTexRows: {
     default: 24,
     control: '#texture-rows-select'
   },
   webglBatchSize: {
-    default: 1024,
+    default: 2048,
     control: '#batch-size-select'
   },
   webglTexPerBatch: {
-    default: 12,
+    default: 14,
     control: '#texture-units-select'
   },
 };
@@ -166,22 +166,29 @@ const paramDefs = {
       console.log(p);
       const control = $(paramDefs[p].control);
       const value = control.type == 'checkbox' ? control.checked : control.value;
-      urlParams.set(p, value);
+      console.log(paramDefs[p], value, paramDefs[p].default);
+      if(String(value) !== String(paramDefs[p].default)) {
+        urlParams.set(p, value);
+      }
     }
-
+    
     window.location.href = origin + pathname + '?' + urlParams.toString();
   }
 
   $('#hide-commands').addEventListener('click', () => {
     document.body.classList.remove('commands-shown');
     document.body.classList.add('commands-hidden');
-		cy.resize();
+    if(cy) {
+      cy.resize();
+    }
   });
 
   $('#show-commands').addEventListener('click', () => {
     document.body.classList.add('commands-shown');
     document.body.classList.remove('commands-hidden');
-		cy.resize();
+		if(cy) {
+		  cy.resize();
+    }
   });
 
   $("#fit-button").addEventListener('click', () => cy.fit());

debug/webgl/networks.js

@@ -57,7 +57,8 @@ var networks = {
     desc: 'NDEX large',
     nodes: 3238,
     edges: 68641,
-    url: 'https://pub-835fc16db602427ba8b9a874e4754257.r2.dev/network-ndex-large.json',
+    // url: 'https://pub-835fc16db602427ba8b9a874e4754257.r2.dev/network-ndex-large.json',
+    url: 'network-ndex-large.json',
     layout: { name: 'preset' },
     style: { file: 'network-ndex-large-style.json' },
   },

debug/webgl/style.css

@@ -1,6 +1,6 @@
 body { font: 14pt helvetica; width: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; height: 100%; width: 100%;}
-#cytoscape { position: absolute; left: 0; right: 21em; top: 0; bottom: 0; }
-#commands { padding: 0.25em; width: 27em; z-index: 3; position: absolute; right: 0; top: 0; bottom: 0; overflow: auto; font-size: 0.75em; line-height: 1; background: rgba(200, 200, 200, 0.5); border-radius: 0.333em; }
+#cytoscape { position: absolute; left: 0; right: 19.5em; top: 0; bottom: 0; }
+#commands { padding: 0.25em; width: 25em; z-index: 3; position: absolute; right: 0; top: 0; bottom: 0; overflow: auto; font-size: 0.75em; line-height: 1; background: rgba(200, 200, 200, 0.5); border-radius: 0.333em; }
 #commands h2 { margin-top: 1em; font-size: 1.25em; }
 #nodes-number, #edges-number, #parent-node { width: 5em; }
 .ui-tooltip { font-size: 0.75em; max-width: 400px; }

src/core/renderer.js

@@ -16,10 +16,11 @@ let rendererDefaults = util.defaults({
   webgl: false,
   webglDebug: false,
   webglDebugShowAtlases: false,
-  webglTexSize: 4096,
+  // defaults good for mobile
+  webglTexSize: 1024,
   webglTexRows: 24,
   webglBatchSize: 2048,
-  webglTexPerBatch: 16,
+  webglTexPerBatch: 14,
   webglBgColor: [255, 255, 255]
 });