Merge pull request #9 from will-moore/fix_default_samples_csv

Fix default samples csv

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",
@@ -25,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");
@@ -38,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} />
 }

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>
   );
 }