From 106b166e043f577a02f7360fb85cc787ee407eff Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 10 Mar 2023 17:04:35 +0000
Subject: [PATCH 1/3] Use absolute URL for default zarr_samples.csv

---
 src/App.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 64f300f..d6d56d5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,8 @@ import Papa from "papaparse";
 
 import CatelogTable from "./CatelogTable";
 
+const zarr_samples_csv = "https://raw.githubusercontent.com/ome/ome-zarr-catalog/main/public/zarr_samples.csv";
+
 const supportedColumns = [
   "Version",
   "Axes",
@@ -40,7 +42,7 @@ export default function App() {
     new URL(csvUrl);
   } catch (error) {
     // If no valid URL provided, use default
-    csvUrl = "/zarr_samples.csv";
+    csvUrl = zarr_samples_csv;
   }
 
 

From 5f190e1790ed749d93b0e37e0348e4f39d37b183 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 10 Mar 2023 17:20:38 +0000
Subject: [PATCH 2/3] Handle no ?csv=file.csv with placeholder message

---
 src/App.jsx | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index d6d56d5..893b20d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -27,8 +27,11 @@ export default function App() {
   const [tableData, setTableData] = React.useState([]);
   const [tableColumns, setTableColumns] = React.useState([]);
 
+  const location = window.location.href;
+  let showPlaceholder = false;
+
   // check for ?csv=url
-  const params = new URLSearchParams(location.search);
+  const params = new URLSearchParams(window.location.search);
   let csvUrl = params.get("csv");
   // columns=Version,Thumbnail etc from supportedColumns
   let cols = params.get("columns");
@@ -40,24 +43,32 @@ export default function App() {
   }
   try {
     new URL(csvUrl);
+
   } catch (error) {
-    // If no valid URL provided, use default
-    csvUrl = zarr_samples_csv;
+    showPlaceholder = true;
   }
 
 
   React.useEffect(() => {
 
-    // load csv and use this for the left side of the table...
-    Papa.parse(csvUrl, {
-      header: true,
-      download: true,
-      complete: function (results) {
-        setTableData(results.data);
-        setTableColumns(results.meta.fields);
-      },
-    });
+    if (csvUrl) {
+      // load csv and use this for the left side of the table...
+      Papa.parse(csvUrl, {
+        header: true,
+        download: true,
+        complete: function (results) {
+          setTableData(results.data);
+          setTableColumns(results.meta.fields);
+        },
+      });
+    }
   }, []);
 
+  if (showPlaceholder) {
+    return <p>
+      To display a table of Zarr data, load a CSV table with a URL column.
+      For example <a href={location + "?csv=" + zarr_samples_csv}>{location + "?csv=" + zarr_samples_csv}</a>
+    </p>
+  }
   return <CatelogTable tableColumns={tableColumns} zarrColumns={zarrColumns} tableData={tableData} />
 }

From 5f17aa41e4ad192f11ca7a3bdbd00faf1851a91b Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 10 Mar 2023 17:53:14 +0000
Subject: [PATCH 3/3] Fix copy_icon image

---
 src/CopyButton.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/CopyButton.jsx b/src/CopyButton.jsx
index fe8c1be..968132a 100644
--- a/src/CopyButton.jsx
+++ b/src/CopyButton.jsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import copy_icon from "/copy_icon.png";
+
 export default function CopyButton({ source }) {
 
   let [shaking, setShaking] = React.useState(false);
@@ -47,7 +49,7 @@ export default function CopyButton({ source }) {
   
   return (
     <button title="Copy" style={buttonStyle} onClick={copyTextToClipboard}>
-      <img src="/copy_icon.png" />
+      <img src={copy_icon} />
     </button>
   );
 }