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] 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} />
 }