link from details page to about/definitions

materialscloud-org · Dec 3, 2024 · 4514de5 · 4514de5
1 parent a211a83
commit 4514de5
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.css b/src/App.css
@@ -4,12 +4,12 @@
   align-items: center;
 }
 
-.bs-overrides a {
+a {
   color: #3366cc;
   text-decoration: none;
 }
 
-.bs-overrides a:hover {
+a:hover {
   color: #1a0dab;
   text-decoration: underline;
 }
diff --git a/src/DetailPage/OverviewSection/index.jsx b/src/DetailPage/OverviewSection/index.jsx
@@ -36,17 +36,40 @@ function formatPowerOf10(number, precision = 2) {
   );
 }
 
+const openNewTabAndScroll = (url, elementId) => {
+  const newTab = window.open(url, "_blank");
+
+  newTab.onload = () => {
+    // Find the target element and scroll to it
+    const targetElement = newTab.document.getElementById(elementId);
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+};
+
 function GeneralInfoBox({
   details,
   metadata,
   symmetryInfo,
   primaryParentInfo,
 }) {
-  let parentSymmInfo = getSymmetryInfo(primaryParentInfo.space_group_number);
   return (
     <MCInfoBox style={{ height: "460px" }}>
       <div>
-        <b>General info</b>
+        <b>General info</b> (
+        <a
+          href="javascript:void(0)"
+          onClick={() =>
+            openNewTabAndScroll(
+              `${import.meta.env.BASE_URL}#/about`,
+              "definitions",
+            )
+          }
+        >
+          See definitions
+        </a>
+        )
         <ul className="no-bullets">
           <li>Formula: {formatChemicalFormula(details.general.formula)}</li>
           <li>
@@ -58,48 +81,6 @@ function GeneralInfoBox({
           <li>Abundance: {formatPowerOf10(details.general.abundance)}</li>
         </ul>
       </div>
-      {/* <div>
-        <b>Primary 3D parent</b> (details in section "3D parent crystals")
-        <ul className="no-bullets">
-          <li>Formula: {formatChemicalFormula(primaryParentInfo.formula)}</li>
-          <li>
-            Source database:{" "}
-            {formatSourceLink(
-              primaryParentInfo.source_db,
-              primaryParentInfo.source_db_id,
-            )}
-          </li>
-          <li>
-            Bravais lattice: {parentSymmInfo.bravais_lattice} (
-            {parentSymmInfo.bravais_lattice_pearson})
-          </li>
-          <li>
-            Space group:{" "}
-            {formatSpaceGroupSymbol(parentSymmInfo.space_group_symbol)} (
-            {primaryParentInfo.space_group_number})
-          </li>
-          <li>
-            DF2-C09 Binding energy:{" "}
-            {formatAiidaProp(primaryParentInfo.binding_energy_df2, "meV/Å²", 1)}
-          </li>
-          <li>
-            rVV10 Binding energy:{" "}
-            {formatAiidaProp(
-              primaryParentInfo.binding_energy_rvv10,
-              "meV/Å²",
-              1,
-            )}
-          </li>
-          <li>
-            Δ<sub>DF2</sub>:{" "}
-            {formatAiidaProp(primaryParentInfo.delta_df2, "%", 1, 100)}
-          </li>
-          <li>
-            Δ<sub>rVV10</sub>:{" "}
-            {formatAiidaProp(primaryParentInfo.delta_rvv10, "%", 1, 100)}
-          </li>
-        </ul>
-      </div> */}
       <div>
         <b>Exfoliation info</b> (from primary parent{" "}
         {formatSourceLink(

diff --git a/src/DetailPage/index.css b/src/DetailPage/index.css
@@ -38,13 +38,3 @@ ul.no-bullets {
 ul.no-bullets li {
   margin: 3px 0px 3px;
 }
-
-.source-a {
-  color: #303f9f;
-  text-decoration: none;
-}
-
-.source-a:hover {
-  filter: brightness(80%);
-  text-decoration: underline;
-}
diff --git a/src/DetailPage/utils.jsx b/src/DetailPage/utils.jsx
@@ -1,9 +1,4 @@
-import {
-  ExploreButton,
-  StructDownloadButton,
-  formatChemicalFormula,
-  formatSpaceGroupSymbol,
-} from "mc-react-library";
+import { ExploreButton } from "mc-react-library";
 
 import { EXPLORE_URL } from "../common/restApiUtils";
 
@@ -40,12 +35,7 @@ function sourceUrl(db, id) {
 
 export function formatSourceLink(db, id) {
   return (
-    <a
-      className="source-a"
-      href={sourceUrl(db, id)}
-      title={"Go to source data"}
-      target="_blank"
-    >
+    <a href={sourceUrl(db, id)} title={"Go to source data"} target="_blank">
       {db} - {id}
     </a>
   );

diff --git a/src/MainPage/about.jsx b/src/MainPage/about.jsx
@@ -492,7 +492,9 @@ export const aboutText = (
         <li>phonon dispersion curves.</li>
       </ul>
       <p>More details can be found in the associated publications.</p>
-      <div className="about-h">Definitions and further details</div>
+      <div id="definitions" className="about-h">
+        Definitions and further details
+      </div>
       <MathJax>
         <ul>
           <li>