Try to surface CORS errors

README.md

@@ -49,7 +49,7 @@ Theo Sanderson
 bioRxiv 2022.06.03.494608; doi: https://doi.org/10.1101/2022.06.03.494608
 ```
 
-N.B. If you are citing the *tree* displayed at Cov2Tree.org, please cite [the UCSC tree](https://pubmed.ncbi.nlm.nih.gov/34469548/) (.. and ideally Taxonium too if you relied on it for exploration)
+N.B. If you are citing the _tree_ displayed at Cov2Tree.org, please cite [the UCSC tree](https://pubmed.ncbi.nlm.nih.gov/34469548/) (.. and ideally Taxonium too if you relied on it for exploration)
 
 ## Structure
 

docs/advanced.md

@@ -10,7 +10,6 @@ Any files must be uploaded to somewhere that allows Cross-Origin Resource Sharin
 
 If you supply only remote files, then you will find that the Taxonium.org interface encodes them into its URL as it loads the tree, meaning you can share your tree with other people by copying the Taxonium URL. In addition, any searches or colouring of the tree will also be stored in the URL. Each search will have a permalink button that will create a URL that zooms in on those particular nodes.
 
-
 #### Custom configuration
 
 There are a number of things you can do customise Taxonium. They all ultimately involve creating a "config" which Taxonium uses to define its behaviour. This config can be specified in several ways, which are listed here in rough order of the priority in which they are applied:
@@ -20,7 +19,6 @@ There are a number of things you can do customise Taxonium. They all ultimately
 3. As one of several custom parameters to `usher_to_taxonium`, e.g. `--title`,`--overlay_html`.
 4. As a `--config_json` file passed to [taxoniumtools.md](usher_to_taxonium).
 
-
 #### What you can configure
 
 You can configure many things. We only discuss some here. For more information have a look at the [config used for Cov2Tree](https://github.com/theosanderson/taxonium/blob/master/taxonium_backend/config_public.json).
@@ -44,7 +42,8 @@ The way that Taxonium handles colurs by default is that they are computed as a h
 }
 ```
 
-We can supply that config in the URL like this: 
+We can supply that config in the URL like this:
+
 ```
 https://cov2tree.org/?config={"colorMapping":{"AY.4":[255,0,0],"B.1.1.7":[0,0,255]}}
 ```
@@ -65,7 +64,6 @@ We can supply a title with the `title` key. It will display at the top.
 
 You can replace the contents of the "about" section using the `overlay` property, into which you will supply HTML. This can be a bit unwieldy as JSON needs to have no linebreaks in strings (you can use `\n` so it's easiest to do this in `usher_to_taxonium` by supplying the `overlay_html` parameter).
 
-
 #### Deploying your own Taxonium backend
 
 All of the description above involves the full tree being processed wholly locally in your own browser. For very large trees, this can mean a lot of memory and that the initial loading process is quite slow. To solve this issue, you can deploy your own Taxonium backend which will run continually in some cloud server, ready to receive traffic and emit a small part of the tree to a client.

taxonium_web_client/src/components/AboutOverlay.jsx

@@ -22,10 +22,9 @@ function AboutOverlay({ enabled, setEnabled, overlayContent }) {
               href="https://github.com/theosanderson/taxodium"
             >
               Github repository
-            </a> or <a
-              className="text-blue underline"
-              href="https://docs.taxonium.org"
-            >
+            </a>{" "}
+            or{" "}
+            <a className="text-blue underline" href="https://docs.taxonium.org">
               read the documentation
             </a>
             .

taxonium_web_client/src/hooks/useColor.js

@@ -86,10 +86,10 @@ const useColor = (colorMapping) => {
         return [255, 130, 82]; // UK all brick
       }
       if (string === "North America") {
-        return [200, 200, 50]; 
+        return [200, 200, 50];
       }
       if (string === "South America") {
-        return [200, 100, 50]; 
+        return [200, 100, 50];
       }
       if (string === "Wales") {
         return [148, 49, 22]; // UK all brick

taxonium_web_client/src/hooks/useInputHelper.js

@@ -44,11 +44,11 @@ export const useInputHelper = ({
   const [inputs, setInputs] = useState([]);
 
   function addInput(file_object, data) {
-    if(window.gtag){
-    window.gtag('event', 'addInput', {
-       'event_category' : 'addInput',
-       'event_label' : file_object.name
-    });
+    if (window.gtag) {
+      window.gtag("event", "addInput", {
+        event_category: "addInput",
+        event_label: file_object.name,
+      });
     }
     const gzipped = guessIfCompressed(file_object);
     const filetype = guessType(file_object);

taxonium_web_client/src/utils/processNewick.js

@@ -14,33 +14,81 @@ async function do_fetch(url, sendStatusMessage, whatIsBeingDownloaded) {
   if (!sendStatusMessage) {
     sendStatusMessage = () => {};
   }
+
+  sendErrorMessage = (message) => {
+    sendStatusMessage({ error: message });
+  };
   // send progress on downloadProgress
 
   if (url.endsWith(".gz")) {
-    const response = await axios.get(url, {
-      responseType: "arraybuffer",
-      onDownloadProgress: (progress) => {
-        sendStatusMessage({
-          message: "Downloading compressed " + whatIsBeingDownloaded,
-          percentage: (progress.loaded / progress.total) * 100,
-        });
-      },
-    });
+    const response = await axios
+      .get(url, {
+        responseType: "arraybuffer",
+        onDownloadProgress: (progress) => {
+          sendStatusMessage({
+            message: "Downloading compressed " + whatIsBeingDownloaded,
+            percentage: (progress.loaded / progress.total) * 100,
+          });
+        },
+      })
+      .catch(function (error) {
+        sendErrorMessage(
+          "Error loading " + url + ". This may be a CORS config issue."
+        );
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          // that falls out of the range of 2xx
+          sendErrorMessage(error.response.data);
+          console.log(error.response.status);
+          console.log(error.response.headers);
+        } else if (error.request) {
+          // The request was made but no response was received
+          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+          // http.ClientRequest in node.js
+          console.log(error.request);
+        } else {
+          // Something happened in setting up the request that triggered an Error
+          sendErrorMessage(error.message);
+        }
+        console.log(error.config);
+      });
     sendStatusMessage({
       message: "Decompressing compressed " + whatIsBeingDownloaded,
     });
     const inflated = pako.ungzip(response.data);
     const text = new TextDecoder("utf-8").decode(inflated);
     return text;
   } else {
-    const response = await axios.get(url, {
-      onDownloadProgress: (progress) => {
-        sendStatusMessage({
-          message: "Downloading " + whatIsBeingDownloaded,
-          percentage: (progress.loaded / progress.total) * 100,
-        });
-      },
-    });
+    const response = await axios
+      .get(url, {
+        onDownloadProgress: (progress) => {
+          sendStatusMessage({
+            message: "Downloading " + whatIsBeingDownloaded,
+            percentage: (progress.loaded / progress.total) * 100,
+          });
+        },
+      })
+      .catch(function (error) {
+        sendErrorMessage(
+          "Error loading " + url + ". This may be a CORS config issue."
+        );
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          // that falls out of the range of 2xx
+          sendErrorMessage(error.response.data);
+          console.log(error.response.status);
+          console.log(error.response.headers);
+        } else if (error.request) {
+          // The request was made but no response was received
+          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+          // http.ClientRequest in node.js
+          console.log(error.request);
+        } else {
+          // Something happened in setting up the request that triggered an Error
+          sendErrorMessage(error.message);
+        }
+        console.log(error.config);
+      });
     const text = response.data;
     //parse text:
     return text;