add download button

package.json

@@ -14,9 +14,10 @@
   "dependencies": {
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.10.3",
+    "file-saver": "^2.0.5",
     "mc-react-header": "^0.3.1",
     "mc-react-library": "^0.3.1",
-    "mc-react-ptable-materials-grid": "^0.7.3",
+    "mc-react-ptable-materials-grid": "^0.8.0",
     "mc-react-structure-visualizer": "^0.7.2",
     "plotly.js": "^2.6.2",
     "react": "^18.1.0",

src/MainPage/DownloadButton.css

@@ -0,0 +1,22 @@
+.aggrid-style-button {
+  padding: 10px;
+  background-color: #f8f8f8;
+  color: #000000;
+  font-family: var(--ag-font-family);
+  font-size: 12px;
+  font-weight: bold;
+  border: 1px solid #babfc7;
+  cursor: pointer;
+  margin-bottom: 3px;
+  margin-top: 2px;
+}
+
+.aggrid-style-button:hover {
+  background-color: #dbdbdb;
+}
+
+.aggrid-style-button-disabled {
+  opacity: 0.4;
+  cursor: none;
+  pointer-events: none;
+}

src/MainPage/DownloadButton.jsx

@@ -0,0 +1,36 @@
+import { saveAs } from "file-saver";
+
+import "./DownloadButton.css";
+
+export const DownloadButton = ({ materialSelectorRef, disabled }) => {
+  /*
+    Note: the plan is to potentially also include direct download links (via the AiiDA rest api)
+    to each of the materials in the downloaded file, but currently the index page doesn't have
+    the structure UUIDs. Including them in the default index download is not great, as they would
+    increase the initial download size considerably, while not really needed for the table.
+    
+    Therefore, it probably might make sense to implement an additional endpoint, e.g. pbe-v1/uuids
+    that is only called when this download button is clicked.
+  */
+
+  const handleDownload = () => {
+    if (materialSelectorRef.current) {
+      const data = materialSelectorRef.current.getFilteredRows();
+      const json = JSON.stringify(data, null, 2);
+      const blob = new Blob([json], { type: "application/json" });
+      const filename = `mc3d_index_data_n${data.length}.json`;
+      saveAs(blob, filename);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleDownload}
+      disabled={disabled}
+      className={`aggrid-style-button ${disabled ? "aggrid-style-button-disabled" : ""}`}
+      style={{ marginTop: "5px" }}
+    >
+      Download filtered entries
+    </button>
+  );
+};

src/MainPage/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 
 import "./index.css";
 
@@ -16,12 +16,13 @@ import { restapiText } from "./restapi";
 
 import { loadDataMc3d } from "./loadDataMc3d";
 
+import { DownloadButton } from "./DownloadButton";
+
 import Form from "react-bootstrap/Form";
 
 function MainPage() {
   const [columns, setColumns] = useState([]);
   const [rows, setRows] = useState([]);
-
   const [method, setMethod] = useState("pbe-v1");
 
   useEffect(() => {
@@ -37,6 +38,8 @@ function MainPage() {
     setMethod(event.target.value);
   };
 
+  const materialSelectorRef = useRef(null);
+
   return (
     <MaterialsCloudHeader
       activeSection={"discover"}
@@ -78,7 +81,15 @@ function MainPage() {
               Search for materials by filtering based on the periodic table and
               the columns of the table below:
             </div>
-            <MaterialSelector columns={columns} rows={rows} />
+            <MaterialSelector
+              ref={materialSelectorRef}
+              columns={columns}
+              rows={rows}
+            />
+            <DownloadButton
+              materialSelectorRef={materialSelectorRef}
+              disabled={rows.length == 0}
+            />
           </Tab>
           <Tab eventKey="about" title="About">
             {aboutText}

src/MainPage/loadDataMc3d.js

@@ -151,7 +151,9 @@ function formatRows(indexData, metadata, method) {
 
     let row = {};
     Object.entries(entry).map(([key, value]) => {
-      row[labelMap[key]] = value;
+      if (key in labelMap) {
+        row[labelMap[key]] = value;
+      }
     });
 
     let modifiedKeys = {