enable pbesol-v1; fix some issues

materialscloud-org · Sep 5, 2024 · 92d3af1 · 92d3af1
1 parent ee8822c
commit 92d3af1
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 54 deletions.
diff --git a/src/DetailPage/OverviewSection/index.jsx b/src/DetailPage/OverviewSection/index.jsx
@@ -13,14 +13,13 @@ import {
   formatSpaceGroupSymbol,
 } from "mc-react-library";
 
-import { EXPLORE_URL } from "../../common/config";
-
 import { MCInfoBox } from "../../common/MCInfoBox";
 
 import SourceInfo from "./SourceInfo";
-import { getAiidaEndpoint } from "../../common/restApiUtils";
 
-function GeneralInfoBox({ details, metadata }) {
+import { AIIDA_API_URLS, EXPLORE_URLS } from "../../common/restApiUtils";
+
+function GeneralInfoBox({ details, metadata, methodLabel }) {
   function format_aiida_prop(property, metadata, prec = 3, factor = 1) {
     if (property == null) {
       return <span>N/A</span>;
@@ -34,7 +33,10 @@ function GeneralInfoBox({ details, metadata }) {
     return (
       <span>
         {valStr}{" "}
-        <ExploreButton explore_url={EXPLORE_URL} uuid={property.uuid ?? null} />
+        <ExploreButton
+          explore_url={EXPLORE_URLS[methodLabel]}
+          uuid={property.uuid ?? null}
+        />
       </span>
     );
   }
@@ -98,11 +100,12 @@ function GeneralInfoBox({ details, metadata }) {
   );
 }
 
-const StructureViewerBox = ({ uuid, structureInfo, aiidaRestEndpoint }) => {
+const StructureViewerBox = ({ uuid, structureInfo, methodLabel }) => {
   return (
     <>
       <div className="subsection-title">
-        Structure <ExploreButton explore_url={EXPLORE_URL} uuid={uuid} />
+        Structure{" "}
+        <ExploreButton explore_url={EXPLORE_URLS[methodLabel]} uuid={uuid} />
       </div>
       <div className="structure-view-box subsection-shadow">
         <StructureVisualizer
@@ -111,7 +114,7 @@ const StructureViewerBox = ({ uuid, structureInfo, aiidaRestEndpoint }) => {
         />
         <div className="download-button-container">
           <StructDownloadButton
-            aiida_rest_url={aiidaRestEndpoint}
+            aiida_rest_url={AIIDA_API_URLS[methodLabel]}
             uuid={uuid}
           />
         </div>
@@ -121,8 +124,6 @@ const StructureViewerBox = ({ uuid, structureInfo, aiidaRestEndpoint }) => {
 };
 
 function OverviewSection({ params, loadedData }) {
-  let aiidaRestEndpoint = getAiidaEndpoint(params.method);
-
   return (
     <div>
       <div className="section-heading">General overview</div>
@@ -132,14 +133,15 @@ function OverviewSection({ params, loadedData }) {
             <StructureViewerBox
               uuid={loadedData.details.general.uuid_structure}
               structureInfo={loadedData.structureInfo}
-              aiidaRestEndpoint={aiidaRestEndpoint}
+              methodLabel={params.method}
             />
           </Col>
           <Col className="flex-column">
             <div style={{ marginTop: "35px" }}>
               <GeneralInfoBox
                 details={loadedData.details}
                 metadata={loadedData.metadata}
+                methodLabel={params.method}
               />
             </div>
           </Col>

diff --git a/src/DetailPage/ProvenanceSection/index.jsx b/src/DetailPage/ProvenanceSection/index.jsx
@@ -4,7 +4,7 @@ import "./index.css";
 
 import { ExploreButton } from "mc-react-library";
 
-import { EXPLORE_URL } from "../../common/config";
+import { EXPLORE_URLS } from "../../common/restApiUtils";
 
 import { Container, Row, Col } from "react-bootstrap";
 
@@ -25,8 +25,8 @@ function ProvenanceSection(props) {
                     <li key={e.uuid}>
                       {e.label}{" "}
                       <ExploreButton
-                        explore_url={EXPLORE_URL}
-                        uuid={details.general.uuid_structure}
+                        explore_url={EXPLORE_URLS[props.params.method]}
+                        uuid={e.uuid}
                       />
                     </li>
                   );

diff --git a/src/DetailPage/StructureSection/index.jsx b/src/DetailPage/StructureSection/index.jsx
@@ -2,18 +2,14 @@ import React from "react";
 
 import { ExploreButton, StructDownloadButton } from "mc-react-library";
 
-import { EXPLORE_URL } from "../../common/config";
-
 import { Container, Row, Col } from "react-bootstrap";
 
 import { MCTable } from "../../common/MCTable";
 import { MCInfoBox } from "../../common/MCInfoBox";
 
-import { getAiidaEndpoint } from "../../common/restApiUtils";
+import { AIIDA_API_URLS, EXPLORE_URLS } from "../../common/restApiUtils";
 
 const StructureSection = ({ params, loadedData }) => {
-  let aiidaRestEndpoint = getAiidaEndpoint(params.method);
-
   let details = loadedData.details;
   let structureInfo = loadedData.structureInfo;
 
@@ -30,14 +26,14 @@ const StructureSection = ({ params, loadedData }) => {
                   <li>
                     Explore provenance{" "}
                     <ExploreButton
-                      explore_url={EXPLORE_URL}
+                      explore_url={EXPLORE_URLS[params.method]}
                       uuid={details.general.uuid_structure}
                     />
                   </li>
                   <li>
                     Download structure
                     <StructDownloadButton
-                      aiida_rest_url={aiidaRestEndpoint}
+                      aiida_rest_url={AIIDA_API_URLS[params.method]}
                       uuid={details.general.uuid_structure}
                     />
                   </li>

diff --git a/src/MainPage/MethodSelectionBox.css b/src/MainPage/MethodSelectionBox.css
@@ -13,7 +13,7 @@
   justify-content: center;
   padding: 10px 38px;
   background-color: #f8f8f8;
-  margin: 10px 0px 0px;
+  margin: 15px 0px 5px;
   gap: 10px;
 }
 

diff --git a/src/MainPage/MethodSelectionBox.jsx b/src/MainPage/MethodSelectionBox.jsx
@@ -37,9 +37,9 @@ export const MethodSelectionBox = (props) => {
             minWidth: "max-content",
           }}
         >
-          <option value="pbe-v1">PBE-v1</option>
+          {/* <option value="pbesol-v2">PBEsol-v2</option> */}
           <option value="pbesol-v1">PBEsol-v1</option>
-          <option value="pbesol-v2">PBEsol-v2</option>
+          <option value="pbe-v1">PBE-v1</option>
         </Form.Select>
         <HelpButton popover={popover} placement="bottom" />
       </div>

diff --git a/src/MainPage/index.jsx b/src/MainPage/index.jsx
@@ -22,7 +22,7 @@ import { MethodSelectionBox } from "./MethodSelectionBox";
 function MainPage() {
   const [columns, setColumns] = useState([]);
   const [rows, setRows] = useState([]);
-  const [method, setMethod] = useState("pbe-v1");
+  const [method, setMethod] = useState("pbesol-v1");
 
   useEffect(() => {
     loadDataMc3d(method).then((loadedData) => {

diff --git a/src/MainPage/restapi.jsx b/src/MainPage/restapi.jsx
@@ -1,7 +1,10 @@
-import { REST_API_COMPOUNDS, REST_API_AIIDA } from "../common/config";
+import { MC_REST_API_URL, AIIDA_API_URLS } from "../common/restApiUtils";
 
 import "./restapi.css";
 
+const INDEX_URL = `${MC_REST_API_URL}pbe-v1/entries`;
+const SINGLE_ENTRY_URL = `${MC_REST_API_URL}pbe-v1/entries/mc3d-10`;
+
 export const restapiText = (
   <div className="restapi-text-container">
     <p>
@@ -14,20 +17,20 @@ export const restapiText = (
       <ul>
         <li>
           Index of materials:{" "}
-          <a href={REST_API_COMPOUNDS} target="_blank">
-            {REST_API_COMPOUNDS}
+          <a href={INDEX_URL} target="_blank">
+            {INDEX_URL}
           </a>
         </li>
         <li>
-          Single compound data:{" "}
-          <a href={REST_API_COMPOUNDS + "/Ag20Gd8Mg6"} target="_blank">
-            {REST_API_COMPOUNDS + "/Ag20Gd8Mg6"}
+          Single entry data:{" "}
+          <a href={SINGLE_ENTRY_URL} target="_blank">
+            {SINGLE_ENTRY_URL}
           </a>
         </li>
         <li>
           AiiDA REST API for properties and provenance:{" "}
-          <a href={REST_API_AIIDA} target="_blank">
-            {REST_API_AIIDA}
+          <a href={AIIDA_API_URLS["pbe-v1"]} target="_blank">
+            {AIIDA_API_URLS["pbe-v1"]}
           </a>
         </li>
       </ul>

diff --git a/src/common/config.js b/src/common/config.js
diff --git a/src/common/restApiUtils.js b/src/common/restApiUtils.js
@@ -4,31 +4,37 @@
 
 // By default, use development API URLS
 let mcRestApiUrl = "https://dev-aiida.materialscloud.org/mc-rest-api/mc3d/";
-let aiidaRestBaseUrl = "https://dev-aiida.materialscloud.org/";
+let aiidaRestBaseUrl = "https://dev-aiida.materialscloud.org";
+let exploreBaseUrl = "https://dev-www.materialscloud.org/explore/";
 
 // Use production backend if specified
 if (import.meta.env.VITE_PRODUCTION_BACKEND === "true") {
   mcRestApiUrl = "https://aiida.materialscloud.org/mc-rest-api/mc3d/";
-  aiidaRestBaseUrl = "https://aiida.materialscloud.org/";
+  aiidaRestBaseUrl = "https://aiida.materialscloud.org";
+  exploreBaseUrl = "https://www.materialscloud.org/explore/";
 }
 
-const MC_REST_API_URL = mcRestApiUrl;
+export const MC_REST_API_URL = mcRestApiUrl;
 const AIIDA_REST_BASE_URL = aiidaRestBaseUrl;
+const EXPLORE_BASE_URL = exploreBaseUrl;
 
-const AIIDA_API_URLS = {
+export const AIIDA_API_URLS = {
   "pbe-v1": `${AIIDA_REST_BASE_URL}/mc3d/api/v4`,
+  "pbesol-v1": `${AIIDA_REST_BASE_URL}/mc3d-pbesol-v1/api/v4`,
   "pbesol-v2": `${AIIDA_REST_BASE_URL}/mc3d-pbesol-v2/api/v4`,
 };
 
-export function getAiidaEndpoint(method) {
-  return AIIDA_API_URLS[method];
-}
+export const EXPLORE_URLS = {
+  "pbe-v1": `${EXPLORE_BASE_URL}/mc3d`,
+  "pbesol-v1": `${EXPLORE_BASE_URL}/mc3d-pbesol-v1`,
+  "pbesol-v2": `${EXPLORE_BASE_URL}/mc3d-pbesol-v2`,
+};
 
 // delay function for testing loading animations:
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export async function loadIndex(method) {
-  await delay(2000);
+  // await delay(2000);
   let endpoint = `${MC_REST_API_URL}/${method}/entries`;
   try {
     const response = await fetch(endpoint, { method: "get" });