From 7d4b112937e7cfcc6ef031976075418b2b902c34 Mon Sep 17 00:00:00 2001
From: Mike Kucera <mikekucera@gmail.com>
Date: Mon, 16 Dec 2024 10:55:50 -0500
Subject: [PATCH] better defaults for mobile

---
 debug/webgl/index.html  |  1 +
 debug/webgl/init.js     | 23 +++++++++++++++--------
 debug/webgl/networks.js |  3 ++-
 debug/webgl/style.css   |  4 ++--
 src/core/renderer.js    |  5 +++--
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/debug/webgl/index.html b/debug/webgl/index.html
index 64757fb5d..89d6cc70e 100644
--- a/debug/webgl/index.html
+++ b/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>
diff --git a/debug/webgl/init.js b/debug/webgl/init.js
index 44efb7a9d..8e890fbdf 100644
--- a/debug/webgl/init.js
+++ b/debug/webgl/init.js
@@ -5,7 +5,7 @@ var cy;
 
 const paramDefs = {
   networkID: {
-    default: 'em-web',
+    default: 'style_test',
     control: '#network-select'
   },
   bgcolor: {
@@ -25,7 +25,7 @@ const paramDefs = {
   //   control: '#atlas-checkbox'
   // },
   webglTexSize: {
-    default: 4096,
+    default: 1024,
     control: '#texture-size-select'
   },
   webglTexRows: {
@@ -33,11 +33,11 @@ const paramDefs = {
     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());
diff --git a/debug/webgl/networks.js b/debug/webgl/networks.js
index 263201978..f15582d84 100644
--- a/debug/webgl/networks.js
+++ b/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' },
   },
diff --git a/debug/webgl/style.css b/debug/webgl/style.css
index e38b07b49..c6d7ae123 100644
--- a/debug/webgl/style.css
+++ b/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; }
diff --git a/src/core/renderer.js b/src/core/renderer.js
index da8d61bf5..fa1915f50 100644
--- a/src/core/renderer.js
+++ b/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]
 });