Add local backend mode

package.json

@@ -29,7 +29,7 @@
     "es-dirname": "^0.1.0",
     "express": "^4.18.2",
     "fs-extra": "^10.1.0",
-    "gbz-base": "^0.1.0-alpha.0",
+    "gbz-base": "^0.1.0-alpha.1",
     "gh-pages": "^4.0.0",
     "markdown-to-jsx": "^7.2.0",
     "multer": "^1.4.5-lts.1",
@@ -56,7 +56,8 @@
     "uuid": "^9.0.0",
     "webpack": "^5.82.0",
     "webpack-dev-server": "4.11.1",
-    "websocket": "^1.0.34"
+    "websocket": "^1.0.34",
+    "worker-rpc": "^0.2.0"
   },
   "scripts": {
     "start": "concurrently -n frontend,backend -c red,green 'HOST=${HOST:=127.0.0.1} PORT=${PORT:=3001} react-scripts start' 'npm:serve'",

src/App.js

@@ -14,8 +14,8 @@ import Footer from "./components/Footer";
 import { dataOriginTypes } from "./enums";
 import "./config-client.js";
 import { config } from "./config-global.mjs";
-import ServerAPI from "./ServerAPI.mjs";
-import { GBZBaseAPI } from "./GBZBaseAPI.mjs";
+import ServerAPI from "./api/ServerAPI.mjs";
+import { LocalAPI } from "./api/LocalAPI.mjs";
 
 const EXAMPLE_TRACKS = [
   // Fake tracks for the generated examples.
@@ -47,19 +47,6 @@ class App extends Component {
   constructor(props) {
     super(props);
 
-    // See if the WASM API is available.
-    // Right now this just tests and logs, but eventually we will be able to use it.
-    let gbzApi = new GBZBaseAPI();
-    gbzApi.available().then((working) => {
-      if (working) {
-        console.log("WASM API implementation available!");
-      } else {
-        console.error("WASM API implementation not available!");
-      }
-    });
-
-    this.APIInterface = new ServerAPI(props.apiUrl);
-
     console.log("App component starting up with API URL: " + props.apiUrl);
 
     // Set defaultViewTarget to either URL params (if present) or the first example
@@ -83,8 +70,68 @@ class App extends Component {
         colorSchemes: getColorSchemesFromTracks(this.defaultViewTarget.tracks),
         mappingQualityCutoff: 0,
       },
+      APIInterface: new ServerAPI(props.apiUrl)
     };
   }
+
+  /**
+   * Set which API implementation to query for graph data.
+   *
+   * Mode can be "local" or "server".
+   */
+  setAPIMode(mode) {
+    this.setState((state) => {
+      if (mode !== this.getAPIMode(state)) {
+        if (mode === "local") {
+          // Make a local API
+          return {
+            APIInterface: new LocalAPI(),
+            // Set up an empty view target that can't really render.
+            // TODO: Let us control HeaderForm's dataType state so we can pop it right over to custom, or feed it a different defaultViewTarget
+            dataOrigin: dataOriginTypes.API,
+            viewTarget: {
+              tracks: []
+            },
+            visOptions: {
+              ...state.visOptions,
+              colorSchemes: [],
+            },
+          };
+        } else if (mode === "server") {
+          // Make a server API
+          return {
+            APIInterface: new ServerAPI(this.props.apiUrl),
+            // Also reset to a current view target this can show
+            dataOrigin: dataOriginTypes.API,
+            viewTarget: this.defaultViewTarget,
+            visOptions: {
+              ...state.visOptions,
+              colorSchemes: getColorSchemesFromTracks(this.defaultViewTarget.tracks),
+            },
+          };
+        } else {
+          throw new Error("Unimplemented API mode: " + mode)
+        }
+      }
+    });
+  }
+
+  /**
+   * Get the string describing the current API mode ("local" or "server"),
+   * given the state (by default the current state).
+   */
+  getAPIMode(state) {
+    if (state === undefined) {
+      state = this.state;
+    }
+    if (state.APIInterface instanceof LocalAPI) {
+      return "local";
+    } else if (state.APIInterface instanceof ServerAPI) {
+      return "server";
+    } else {
+      throw new Error("Unnamed API implementation: " + state.APIInterface);
+    }
+  }
 
   /*
    * Drop undefined values
@@ -197,13 +244,13 @@ class App extends Component {
           dataOrigin={this.state.dataOrigin}
           defaultViewTarget={this.defaultViewTarget}
           getCurrentViewTarget={this.getCurrentViewTarget}
-          APIInterface={this.APIInterface}
+          APIInterface={this.state.APIInterface}
         />
         <TubeMapContainer
           viewTarget={this.state.viewTarget}
           dataOrigin={this.state.dataOrigin}
           visOptions={this.state.visOptions}
-          APIInterface={this.APIInterface}
+          APIInterface={this.state.APIInterface}
         />
         <CustomizationAccordion
           visOptions={this.state.visOptions}
@@ -217,6 +264,8 @@ class App extends Component {
             this.handleMappingQualityCutoffChange
           }
           setColorSetting={this.setColorSetting}
+          currentAPIMode={this.getAPIMode()}
+          setAPIMode={this.setAPIMode.bind(this)}
         />
         <Footer />
       </div>

src/App.test.js

@@ -11,7 +11,7 @@ import { fetchAndParse } from "./fetchAndParse";
 // We want to be able to replace the `fetchAndParse` that *other* files see,
 // and we want to use *different* implementations for different tests in this
 // file. We can mock it with Jest, but Jest will move this call before the
-// imports when runnin the tests, so we can't access any file-level variables
+// imports when running the tests, so we can't access any file-level variables
 // in it. So we need to do some sneaky global trickery.
 
 // Register the given replacement function to be called instead of fetchAndParse.
@@ -25,7 +25,7 @@ function clearFetchAndParseMock() {
 }
 
 jest.mock("./fetchAndParse", () => {
-  // This dispatcher will replace fetchAndParse when we or anyone eles imports it.
+  // This dispatcher will replace fetchAndParse when we or anyone else imports it.
   function fetchAndParseDispatcher() {
     // Ge tthe real fetchAndParse
     const { fetchAndParse } = jest.requireActual("./fetchAndParse");