Merge pull request #2 from will-moore/add_readme

support csv table

README.md

@@ -0,0 +1,7 @@
+
+# ome-zarr-catalog
+
+An app for hosting a catalog of OME-Zarr samples: Images and Plates supported.
+
+You provide a list of OME-Zarr URLs and the app loads metadata and displays a
+zoomable thumbnail of the image in a table.

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@hms-dbmi/viv": "^0.13.3",
+    "papaparse": "^5.3.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },

public/csv_examples/idr_study.csv

@@ -0,0 +1,14 @@
+Study,URL
+idr0054,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025551.zarr
+idr0054,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025552.zarr
+idr0054,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025553.zarr
+idr0076,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0076A/10501752.zarr
+idr0047,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0047A/4496763.zarr
+idr0062,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr
+idr0052,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0052A/5514375.zarr
+idr0001,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0001A/2551.zarr
+idr0101,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457227.zarr
+idr0101,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457537.zarr
+idr0101,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457539.zarr
+idr0048,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846151.zarr/
+idr0048,https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846152.zarr/

public/csv_examples/url_only.csv

@@ -0,0 +1,19 @@
+URL
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001254.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001255.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001256.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001257.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/6001258.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9822151.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9822152.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836831.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836832.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836833.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836834.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836835.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836836.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836837.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836838.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836839.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836840.zarr
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836841.zarr

public/zarr_samples.csv

@@ -0,0 +1,12 @@
+URL,License,Study,DOI,Date added
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025553.zarr,CC BY 4.0,idr0054,,2022-06-03
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0076A/10501752.zarr,CC BY 4.0,idr0076,,2022-06-21
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0047A/4496763.zarr,CC BY 4.0,idr0047,,2022-06-21
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr,CC BY 4.0,idr0062,,2022-06-21
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0052A/5514375.zarr,CC BY 4.0,idr0052,,2022-06-21
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0001A/2551.zarr,CC BY 4.0,idr0001,,2022-07-06
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457227.zarr,CC BY 4.0,idr0101,,2022-10-13
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457537.zarr,CC BY 4.0,idr0101,,2022-10-13
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0101A/13457539.zarr,CC BY 4.0,idr0101,,2022-10-13
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846151.zarr/,CC BY 4.0,idr0048,,2023-01-12
+https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846152.zarr/,CC BY 4.0,idr0048,,2023-01-12

src/App.css

@@ -1,8 +1,8 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  padding: 0;
 }
 
 table {
@@ -20,6 +20,8 @@ th {
   background-color: #f0f0f0;
   border: 1px solid #e0e0e0;
   border-bottom: 1px solid #111;
+  position: sticky;
+  top: 0;
 }
 
 td {

src/App.jsx

@@ -1,35 +1,61 @@
-/// app.js
+
 import React from "react";
 
-import ImageItem from "./ImageItem";
+import Papa from "papaparse";
+
+import CatelogTable from "./CatelogTable";
+
+const supportedColumns = [
+  "Version",
+  "Axes",
+  "shape",
+  "chunks",
+  "Wells",
+  "Fields",
+  "Keywords",
+  "Thumbnail",
+];
 
-import zarr_samples_json from "../public/zarr_samples.json";
+const defaultColumns = [
+  "Thumbnail"
+]
 
-// DeckGL react component
 export default function App() {
-  let sources = zarr_samples_json.urls;
-
-  let items = sources.map((source) => <ImageItem key={source} source={source}/>);
-
-  return (
-    <table>
-      <tbody>
-        <tr>
-          <th>Version</th>
-          <th>s3 URL</th>
-          <th>sizeX</th>
-          <th>sizeY</th>
-          <th>sizeZ</th>
-          <th>sizeC</th>
-          <th>sizeT</th>
-          <th>Axes</th>
-          <th>Wells</th>
-          <th>Fields</th>
-          <th>Keywords</th>
-          <th>Thumbnail</th>
-        </tr>
-        {items}
-      </tbody>
-    </table>
-  );
+
+  const [tableData, setTableData] = React.useState([]);
+  const [tableColumns, setTableColumns] = React.useState([]);
+
+  // check for ?csv=url
+  const params = new URLSearchParams(location.search);
+  let csvUrl = params.get("csv");
+  // columns=Version,Thumbnail etc from supportedColumns
+  let cols = params.get("columns");
+  let zarrColumns = [];
+  if (cols) {
+    zarrColumns = cols.split(",").filter(col => supportedColumns.includes(col));
+  } else {
+    zarrColumns = defaultColumns;
+  }
+  try {
+    new URL(csvUrl);
+  } catch (error) {
+    // If no valid URL provided, use default
+    csvUrl = "/zarr_samples.csv";
+  }
+
+
+  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);
+      },
+    });
+  }, []);
+
+  return <CatelogTable tableColumns={tableColumns} zarrColumns={zarrColumns} tableData={tableData} />
 }

src/CatelogTable.jsx

@@ -0,0 +1,52 @@
+
+import React from "react";
+
+import ImageItem from "./ImageItem";
+import ZarrUrl from "./ZarrUrl";
+
+
+export default function CatelogTable({tableColumns, tableData, zarrColumns}) {
+
+  function renderRow(rowdata) {
+    return <React.Fragment>
+      {tableColumns.map((col_name) => {
+        if (col_name == "URL") {
+          return <td key={col_name}><ZarrUrl source={rowdata[col_name]} /></td>
+        } else {
+          return <td key={col_name}>{rowdata[col_name]}</td>
+        }
+  })}
+      </React.Fragment>
+  }
+
+  // ignore any row without a "URL" field
+  const validRows = tableData.filter(rowdata => rowdata.URL?.length > 0);
+
+  const table_rows = validRows.map((rowdata) => {
+    // Each row is a combination of custom csv data and NGFF Image data
+    return (<tr key={rowdata["URL"]}>
+        {renderRow(rowdata)}
+        <ImageItem
+          source={rowdata["URL"]}
+          zarr_columns={zarrColumns}
+        />
+      </tr>
+    );
+  });
+
+  return (
+    <table>
+      <tbody>
+        <tr>
+          {tableColumns.map((name) => (
+            <th key={name}>{name}</th>
+          ))}
+          {zarrColumns.map((name) => (
+            <th key={name}>{name}</th>
+          ))}
+        </tr>
+        {table_rows}
+      </tbody>
+    </table>
+  );
+}