improve layout

materialscloud-org · Aug 8, 2024 · ee7a10b · ee7a10b
1 parent 59ed33e
commit ee7a10b
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 157 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "mc-react-header": "^0.3.1",
     "mc-react-library": "^0.3.1",
     "mc-react-ptable-materials-grid": "^0.7.3",
-    "mc-react-structure-visualizer": "^0.6.0",
+    "mc-react-structure-visualizer": "^0.7.2",
     "plotly.js": "^2.6.2",
     "react": "^18.1.0",
     "react-bootstrap": "^2.6.0",

diff --git a/src/DetailPage/OverviewSection/SourceInfo.jsx b/src/DetailPage/OverviewSection/SourceInfo.jsx
@@ -46,13 +46,13 @@ const SourceInfoText = ({ source, metadata }) => {
   if (source["info"]["is_high_pressure"]) {
     infoTextList.push("high pressure");
     infoPopupList.push(
-      `was characterized at a pressure higher than ${hpThresh["value"]} ${hpThresh["units"]}`,
+      `was characterized at a pressure higher than ${hpThresh["value"]} ${hpThresh["unit"]}`,
     );
   }
   if (source["info"]["is_high_temperature"]) {
     infoTextList.push("high temperature");
     infoPopupList.push(
-      `was characterized at a temperature higher than ${htThresh["value"]} ${htThresh["units"]}`,
+      `was characterized at a temperature higher than ${htThresh["value"]} ${htThresh["unit"]}`,
     );
   }
 

diff --git a/src/DetailPage/OverviewSection/index.css b/src/DetailPage/OverviewSection/index.css
@@ -1,26 +1,14 @@
-.overview-section {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-evenly;
-  margin-bottom: 5px;
+.structure-view-box {
   position: relative;
-}
-
-.structure-view-section {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 450px;
-}
-
-.subsection-title-container {
-  margin: 2px 0px 6px 0px;
+  min-height: 350px;
+  width: 100%;
+  flex: 1;
+  border-radius: 5px;
 }
 
 .download-button-container {
   position: absolute;
-  top: 40px;
+  top: 10px;
   right: 10px;
   z-index: 3;
 }
diff --git a/src/DetailPage/OverviewSection/index.jsx b/src/DetailPage/OverviewSection/index.jsx
@@ -18,6 +18,7 @@ import { EXPLORE_URL } from "../../common/config";
 import { MCInfoBox } from "../../common/MCInfoBox";
 
 import SourceInfo from "./SourceInfo";
+import { getAiidaEndpoint } from "../../common/restApiUtils";
 
 function GeneralInfoBox({ details, metadata }) {
   function format_aiida_prop(property, metadata, prec = 3, factor = 1) {
@@ -99,42 +100,47 @@ function GeneralInfoBox({ details, metadata }) {
 
 const StructureViewerBox = ({ uuid, structureInfo, aiidaRestEndpoint }) => {
   return (
-    <div className="structure-view-section">
-      <div className="subsection-title-container">
-        <b>Structure</b> <ExploreButton explore_url={EXPLORE_URL} uuid={uuid} />
+    <>
+      <div className="subsection-title">
+        Structure <ExploreButton explore_url={EXPLORE_URL} uuid={uuid} />
       </div>
-      <StructureVisualizer
-        cifText={structureInfo.cif}
-        initSupercell={[2, 2, 2]}
-      />
-      <div className="download-button-container">
-        <StructDownloadButton aiida_rest_url={aiidaRestEndpoint} uuid={uuid} />
+      <div className="structure-view-box subsection-shadow">
+        <StructureVisualizer
+          cifText={structureInfo.cif}
+          initSupercell={[2, 2, 2]}
+        />
+        <div className="download-button-container">
+          <StructDownloadButton
+            aiida_rest_url={aiidaRestEndpoint}
+            uuid={uuid}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
-function OverviewSection(props) {
-  let aiidaRestEndpoint = props.loadedData.aiidaRestEndpoint;
-  let details = props.loadedData.details;
-  let metadata = props.loadedData.metadata;
-  let structureInfo = props.loadedData.structureInfo;
+function OverviewSection({ params, loadedData }) {
+  let aiidaRestEndpoint = getAiidaEndpoint(params.method);
 
   return (
     <div>
       <div className="section-heading">General overview</div>
       <Container fluid className="section-container">
         <Row>
-          <Col>
+          <Col className="flex-column">
             <StructureViewerBox
-              uuid={details.general.uuid_structure}
-              structureInfo={structureInfo}
+              uuid={loadedData.details.general.uuid_structure}
+              structureInfo={loadedData.structureInfo}
               aiidaRestEndpoint={aiidaRestEndpoint}
             />
           </Col>
-          <Col>
+          <Col className="flex-column">
             <div style={{ marginTop: "35px" }}>
-              <GeneralInfoBox details={details} metadata={metadata} />
+              <GeneralInfoBox
+                details={loadedData.details}
+                metadata={loadedData.metadata}
+              />
             </div>
           </Col>
         </Row>

diff --git a/src/DetailPage/StructureSection/index.css b/src/DetailPage/StructureSection/index.css
diff --git a/src/DetailPage/StructureSection/index.jsx b/src/DetailPage/StructureSection/index.jsx
@@ -9,61 +9,69 @@ import { Container, Row, Col } from "react-bootstrap";
 import { MCTable } from "../../common/MCTable";
 import { MCInfoBox } from "../../common/MCInfoBox";
 
-import "./index.css";
+import { getAiidaEndpoint } from "../../common/restApiUtils";
 
-const StructureSection = (props) => {
-  let aiidaRestEndpoint = props.loadedData.aiidaRestEndpoint;
-  let details = props.loadedData.details;
-  let structureInfo = props.loadedData.structureInfo;
+const StructureSection = ({ params, loadedData }) => {
+  let aiidaRestEndpoint = getAiidaEndpoint(params.method);
+
+  let details = loadedData.details;
+  let structureInfo = loadedData.structureInfo;
 
   return (
     <div>
       <div className="section-heading">Structural details</div>
       <Container fluid className="section-container">
         <Row>
-          <Col>
-            <MCInfoBox title="General" style={{ marginBottom: "25px" }}>
-              <ul className="no-bullets">
-                <li>
-                  Explore provenance{" "}
-                  <ExploreButton
-                    explore_url={EXPLORE_URL}
-                    uuid={details.general.uuid_structure}
-                  />
-                </li>
-                <li>
-                  Download structure
-                  <StructDownloadButton
-                    aiida_rest_url={aiidaRestEndpoint}
-                    uuid={details.general.uuid_structure}
-                  />
-                </li>
-              </ul>
-            </MCInfoBox>
-            <MCTable
-              title="Cell"
-              headerRow={["", "x [Å]", "y [Å]", "z [Å]"]}
-              contents={structureInfo.aiidaAttributes.cell.map((v, i) => [
-                <span>
-                  v<sub>{i + 1}</sub>
-                </span>,
-                v[0],
-                v[1],
-                v[2],
-              ])}
-            />
+          <Col className="flex-column">
+            <div style={{ marginBottom: "10px" }}>
+              <div className="subsection-title">General</div>
+              <MCInfoBox title="General">
+                <ul className="no-bullets">
+                  <li>
+                    Explore provenance{" "}
+                    <ExploreButton
+                      explore_url={EXPLORE_URL}
+                      uuid={details.general.uuid_structure}
+                    />
+                  </li>
+                  <li>
+                    Download structure
+                    <StructDownloadButton
+                      aiida_rest_url={aiidaRestEndpoint}
+                      uuid={details.general.uuid_structure}
+                    />
+                  </li>
+                </ul>
+              </MCInfoBox>
+            </div>
+            <div>
+              <div className="subsection-title">Cell</div>
+              <MCTable
+                headerRow={["", "x [Å]", "y [Å]", "z [Å]"]}
+                contents={structureInfo.aiidaAttributes.cell.map((v, i) => [
+                  <span>
+                    v<sub>{i + 1}</sub>
+                  </span>,
+                  v[0],
+                  v[1],
+                  v[2],
+                ])}
+              />
+            </div>
           </Col>
-          <Col>
-            <MCTable
-              title="Atomic positions"
-              headerRow={["Kind label", "x [Å]", "y [Å]", "z [Å]"]}
-              contents={structureInfo.aiidaAttributes.sites.map((s) => [
-                s.kind_name,
-                s.position[0],
-                s.position[1],
-                s.position[2],
-              ])}
-            />
+          <Col className="flex-column">
+            <div>
+              <div className="subsection-title">Atomic positions</div>
+              <MCTable
+                headerRow={["Kind label", "x [Å]", "y [Å]", "z [Å]"]}
+                contents={structureInfo.aiidaAttributes.sites.map((s) => [
+                  s.kind_name,
+                  s.position[0],
+                  s.position[1],
+                  s.position[2],
+                ])}
+              />
+            </div>
           </Col>
         </Row>
       </Container>

diff --git a/src/DetailPage/index.css b/src/DetailPage/index.css
@@ -6,7 +6,6 @@
 .detail-page-heading {
   font-size: 30px;
   margin: 20px 0px;
-  /* background-color: rgb(250, 250, 250); */
 }
 
 .section-heading {
@@ -16,16 +15,25 @@
   border-bottom: 1px solid #c4c4c4;
 }
 
-.subsection-heading {
-  font-size: 18px;
-  margin: 10px 0px;
-}
-
 .section-container {
-  /* border: 1px solid rgb(238, 238, 238); */
   border-radius: 5px;
 }
 
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.subsection-title {
+  font-weight: bold;
+  padding: 5px;
+}
+
+.subsection-shadow {
+  box-shadow: 0 2px 6px 2px rgb(0 0 0 / 0.15);
+}
+
 ul.no-bullets {
   list-style-type: none;
   padding: 4px;

diff --git a/src/DetailPage/index.jsx b/src/DetailPage/index.jsx
@@ -91,10 +91,10 @@ function DetailPage() {
           <div className="detail-page-inner">
             <Container fluid="xxl">
               <div className="detail-page-heading">{title}</div>
-              <OverviewSection loadedData={loadedData} />
-              <StructureSection loadedData={loadedData} />
-              <ProvenanceSection loadedData={loadedData} />
-              <XrdSection loadedData={loadedData} params={params} />
+              <OverviewSection params={params} loadedData={loadedData} />
+              <StructureSection params={params} loadedData={loadedData} />
+              <ProvenanceSection params={params} loadedData={loadedData} />
+              <XrdSection params={params} loadedData={loadedData} />
               {/* <RelatedSection /> */}
             </Container>
           </div>

diff --git a/src/common/MCInfoBox.css b/src/common/MCInfoBox.css
@@ -2,17 +2,10 @@
   overflow-y: scroll;
   /* max-height: 450px; */
   min-width: 200px;
-  box-shadow: 0 2px 6px 2px rgb(0 0 0 / 0.15);
   background: #f8f8f8;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   height: 100%;
   padding: 5px 10px;
 }
-
-.mc-info-title {
-  font-weight: bold;
-  /* border-bottom: 1px solid var(--bs-border-color); */
-  padding: 5px;
-}