diff --git a/src/App.jsx b/src/App.jsx index 64f300f..893b20d 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", @@ -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
+ To display a table of Zarr data, load a CSV table with a URL column. + For example {location + "?csv=" + zarr_samples_csv} +
+ } return