Visualisation settings can be given with GET parameter or JSON file

README.md

@@ -26,3 +26,22 @@ It builds upon several technologies:
 5. Run FBA or FVA.
 6. Analyse the visualised results.
 
+### Visualisation settings
+IMFLer's basic default visualisation settings are encoded in a JSON file.
+It is stored as `static/data/settings.json`. You can change it in your local IMFLer version.
+
+You can also pass it as a GET parameter `settings` in your URL.
+
+Here is an example how to load a different map and a diffent model using JavaScript on Imfler's page:
+```js
+var newSettings = 
+{
+  "model": "https://escher.github.io/1-0-0/6/models/Escherichia%20coli/iJO1366.json",
+  "map": "https://escher.github.io/1-0-0/6/maps/Escherichia%20coli/iJO1366.Central%20metabolism.json"
+}
+var newURI = encodeURI(`${window.location.origin}/?settings=${JSON.stringify(newSettings)}`);
+window.location.href = newURI;
+```
+The resulting URL in the example would be:
+
+https://lv-csbg.github.io/?settings=%7B%22model%22:%22https://escher.github.io/1-0-0/6/models/Escherichia%2520coli/iJO1366.json%22,%22map%22:%22https://escher.github.io/1-0-0/6/maps/Escherichia%2520coli/iJO1366.Central%2520metabolism.json%22%7D

src/index.html

@@ -37,7 +37,9 @@
     </div>
   </div>
   <script>
-    init();
+    fetch("static/data/settings.json")
+      .then(response => response.json())
+      .then(settings => init(settings));
   </script>
 </body>
 

src/static/data/settings.json

@@ -0,0 +1,4 @@
+{
+  "model": "static/data/models/e_coli_core.json",
+  "map": "static/data/maps/e_coli_core.Core-metabolism.json"
+}

src/static/js/main.js

@@ -333,14 +333,27 @@ function initSavedStyleOptions() {
     b._curType = "None";
 }
 
-function init() {
+function init(settings) {
+    var searchParams = new URLSearchParams(window.location.search);
+    if (searchParams.has("settings")) {
+        const settingsJSON = searchParams.get("settings");
+        let givenSettings = JSON.parse(settingsJSON);
+        settings = givenSettings;
+    }
     addMessage("Python initialisation started...");
-    pyodideWorker.postMessage({ python: program_init });
-    escher.libs.d3_json('static/data/maps/e_coli_core.Core-metabolism.json', function (error, data) {
+    pyodideWorker.postMessage({
+        python: program_init
+    });
+    escher.libs.d3_json(settings.map, function(error, data) {
         if (error) console.warn(error);
-        var options = { menu: 'all', fill_screen: true, tooltip_component: FBAFVATooltip };
-        var modelDataUrl = 'static/data/models/e_coli_core.json';
+        var options = {
+            menu: 'all',
+            fill_screen: true,
+            tooltip_component: FBAFVATooltip
+        };
+        var modelDataUrl = settings.model;
         window.b = escher.Builder(data, null, null, escher.libs.d3_select('#map_container'), options);
+        b._imfler_settings = settings;
         b.callback_manager.set("load_model", loadModelToWebWorker);
         fetch(modelDataUrl)
             .then((x) => x.json())