Electron (#411)

* initial commit of taxonium electron

* electron

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Delete LICENSE.md

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

taxonium_backend/package.json

@@ -17,6 +17,7 @@
     "cors": "^2.8.5",
     "express": "^4.17.3",
     "express-queue": "^0.0.13",
+    "node-fetch": "^3.2.10",
     "pako": "^2.0.4",
     "taxonium_data_handling": "file:../taxonium_data_handling",
     "xml2js": "^0.4.23"

taxonium_backend/server.js

@@ -16,6 +16,13 @@ var importing;
 var filtering;
 var exporting;
 
+if (!global.fetch) {
+  // use dynamic import to load node-fetch
+  import("node-fetch").then((fetch) => {
+    global.fetch = fetch;
+  });
+}
+
 const { program } = require("commander");
 
 program
@@ -107,6 +114,7 @@ app.use(queue({ activeLimit: 10, queuedLimit: 10 }));
 
 const logStatusMessage = (status_obj) => {
   console.log("status", status_obj);
+  process.send(status_obj);
 };
 
 app.get("/", function (req, res) {
@@ -503,6 +511,10 @@ const loadData = async () => {
     logStatusMessage
   );
 
+  logStatusMessage({
+    status: "finalising",
+  });
+
   if (config.no_file) {
     importing.generateConfig(config, processedData);
   }
@@ -527,6 +539,10 @@ const loadData = async () => {
   cached_starting_values = result;
   console.log("Saved cached starting vals");
   // set a timeout to start listening
+  logStatusMessage({
+    status: "loaded",
+  });
+
   setTimeout(() => {
     console.log("Starting to listen");
     startListening();

taxonium_backend/yarn.lock

@@ -115,6 +115,11 @@ cors@^2.8.5:
     object-assign "^4"
     vary "^1"
 
+data-uri-to-buffer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
+  integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
+
 [email protected], debug@^2.2.0:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -218,6 +223,14 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
+  dependencies:
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz"
@@ -236,6 +249,13 @@ follow-redirects@^1.14.8:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
 
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
+  dependencies:
+    fetch-blob "^3.1.2"
+
 [email protected]:
   version "0.2.0"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -333,6 +353,20 @@ [email protected]:
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
+node-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
+node-fetch@^3.2.10:
+  version "3.2.10"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.2.10.tgz#e8347f94b54ae18b57c9c049ef641cef398a85c8"
+  integrity sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
 object-assign@^4:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -513,6 +547,11 @@ vary@^1, vary@~1.1.2:
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+web-streams-polyfill@^3.0.3:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
+  integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
+
 xml2js@^0.4.23:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"

taxonium_data_handling/importing.js

@@ -2,6 +2,10 @@ import zlib from "zlib";
 import stream from "stream";
 import buffer from "buffer";
 
+if (!fetch) {
+  var fetch = require("node-fetch");
+}
+
 const roundToDp = (number, dp) => {
   return Math.round(number * Math.pow(10, dp)) / Math.pow(10, dp);
 };

taxonium_electron/.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: daily
+      time: "13:00"
+    open-pull-requests-limit: 99
+    versioning-strategy: increase

taxonium_electron/.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+
+out/

taxonium_electron/README.md

@@ -0,0 +1,40 @@
+# electron-quick-start
+
+**Clone and run for a quick way to see Electron in action.**
+
+This is a minimal Electron application based on the [Quick Start Guide](https://electronjs.org/docs/latest/tutorial/quick-start) within the Electron documentation.
+
+A basic Electron application needs just these files:
+
+- `package.json` - Points to the app's main file and lists its details and dependencies.
+- `main.js` - Starts the app and creates a browser window to render HTML. This is the app's **main process**.
+- `index.html` - A web page to render. This is the app's **renderer process**.
+- `preload.js` - A content script that runs before the renderer process loads.
+
+You can learn more about each of these components in depth within the [Tutorial](https://electronjs.org/docs/latest/tutorial/tutorial-prerequisites).
+
+## To Use
+
+To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
+
+```bash
+# Clone this repository
+git clone https://github.com/electron/electron-quick-start
+# Go into the repository
+cd electron-quick-start
+# Install dependencies
+npm install
+# Run the app
+npm start
+```
+
+Note: If you're using Linux Bash for Windows, [see this guide](https://www.howtogeek.com/261575/how-to-run-graphical-linux-desktop-applications-from-windows-10s-bash-shell/) or use `node` from the command prompt.
+
+## Resources for Learning Electron
+
+- [electronjs.org/docs](https://electronjs.org/docs) - all of Electron's documentation
+- [Electron Fiddle](https://electronjs.org/fiddle) - Electron Fiddle, an app to test small Electron experiments
+
+## License
+
+[CC0 1.0 (Public Domain)](LICENSE.md)

taxonium_electron/child.js

@@ -0,0 +1,5 @@
+process.send("Hello from child");
+// output to stdio
+console.log("Hello from child io");
+// output to stderr
+console.error("Hello from child err");

taxonium_electron/index.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <link href="./styles.css" rel="stylesheet" />
+    <title>Taxonium backend</title>
+  </head>
+  <body>
+    <h2>Start Taxonium</h2>
+    Select JSONL file:
+
+    <!-- You can also require other files to run in this process -->
+    <script src="./renderer.js"></script>
+    <!-- Button to open file-->
+    <input type="file" id="fileInput" />
+    <!-- progress bar with bar and text on top -->
+    <div class="progress_container">
+      <div class="progress_bar" id="progress_bar"></div>
+      <div class="progress_text" id="progress_text"></div>
+    </div>
+    <div id="how_to_load">
+      <p>The backend is now loaded</p>
+      <ul>
+        <li>
+          You can access it
+          <a
+            href="https://taxonium.org/?backend=http://localhost:8000"
+            target="_blank"
+            >here</a
+          >
+        </li>
+        <!--<li>You need to <a href="https://stackoverflow.com/a/31900210">disable localhost from HTTPS protection</a></li>-->
+      </ul>
+    </div>
+    <style>
+      #how_to_load {
+        display: none;
+      }
+      .progress_container {
+        width: 100%;
+        height: 20px;
+        border: 1px solid #000;
+        position: relative;
+      }
+      .progress_bar {
+        width: 0%;
+        height: 100%;
+        background-color: #0f0;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .progress_text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        line-height: 20px;
+        color: #000;
+      }
+    </style>
+
+    <script>
+      const { ipcRenderer } = require("electron");
+      const fileInput = document.getElementById("fileInput");
+      fileInput.addEventListener("change", (event) => {
+        ipcRenderer.send("open-file", fileInput.files[0].path);
+        // hide file input
+        fileInput.style.display = "none";
+        const progress_text = document.getElementById("progress_text");
+        progress_text.innerHTML = "Loading file...";
+      });
+
+      ipcRenderer.on("status", (event, status) => {
+        if (status.percentage) {
+          const progress_bar = document.getElementById("progress_bar");
+          const progress_text = document.getElementById("progress_text");
+          progress_bar.style.width = status.percentage + "%";
+          progress_text.innerHTML = status.percentage + "%";
+        }
+        if (status.status) {
+          const progress_text = document.getElementById("progress_text");
+          progress_text.innerHTML = status.status;
+        }
+        if (status.status == "loaded") {
+          const progress_text = document.getElementById("progress_text");
+          progress_text.innerHTML = "Loaded";
+          const how_to_load = document.getElementById("how_to_load");
+          how_to_load.style.display = "block";
+        }
+      });
+    </script>
+  </body>
+</html>