WIP/Feedback: New bandstructure visualiser?

package.json

@@ -12,9 +12,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bands-visualiser": "file:bands-visualiser-0.0.1.tgz",
     "better-react-mathjax": "^2.0.3",
     "bootstrap": "^5.3.2",
-    "chart.js": "^4.4.1",
     "chartjs-plugin-annotation": "^3.0.1",
     "chartjs-plugin-zoom": "^2.0.1",
     "mathjs": "^13.2.0",

src/App.jsx

@@ -5,13 +5,6 @@ import { Routes, Route, HashRouter } from "react-router-dom";
 import MainPage from "./MainPage";
 import DetailPage from "./DetailPage";
 
-// Chart.js plugins need to be registered outside the library
-import Chart from "chart.js/auto";
-import zoomPlugin from "chartjs-plugin-zoom";
-import annotationPlugin from "chartjs-plugin-annotation";
-Chart.register(zoomPlugin);
-Chart.register(annotationPlugin);
-
 function App() {
   return (
     <HashRouter>

src/DetailPage/ElectronicSection/index.jsx

@@ -1,19 +1,20 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 import { McloudSpinner } from "mc-react-library";
 
 import { MCInfoBox } from "../components/MCInfoBox";
 
 import { Container, Row, Col } from "react-bootstrap";
 
-import BandsVisualizer from "mc-react-bands";
+//import BandsVisualizer from "mc-react-bands";
 
 import { ExploreButton } from "mc-react-library";
 
 import { loadAiidaBands } from "../../common/restApiUtils";
 
 import { AIIDA_REST_API_URL, EXPLORE_URL } from "../../common/restApiUtils";
 
+import { getXYData } from "bands-visualiser";
 import * as math from "mathjs";
 
 import { formatAiidaProp } from "../utils";
@@ -28,18 +29,32 @@ function shiftBands(bandsData, shift) {
   });
 }
 
-function ElectronicInfoBox({ electronicData, metadata }) {
+function ElectronicInfoBox({ electronicData, metadata, cbm = 0, vbm = 0 }) {
   let magStateStr = electronicData.magnetic_state;
   if (magStateStr == null) {
     magStateStr = "non-magnetic calculation;  magnetic state untested";
   }
 
+  console.log("CBM and VBM data:");
+  console.log(cbm);
+  console.log(vbm);
+
   return (
     <MCInfoBox style={{ height: "200px" }}>
       <div>
         <b>General info</b>
         <ul className="no-bullets">
           <li>Band gap: {formatAiidaProp(electronicData.band_gap, "eV")}</li>
+          {cbm?.value != null && vbm?.value != null && (
+            <>
+              <li>
+                CBM: {cbm.value.toFixed(3)} eV at k = {cbm.x.toFixed(3)}
+              </li>
+              <li>
+                VBM: {vbm.value.toFixed(3)} eV at k = {vbm.x.toFixed(3)}
+              </li>
+            </>
+          )}
           <li>Magnetic state: {magStateStr}</li>
           <li>
             Total magnetization:{" "}
@@ -59,91 +74,149 @@ function ElectronicInfoBox({ electronicData, metadata }) {
   );
 }
 
-const ElectronicSection = (props) => {
+//method to calculate the position of CBM and VBM
+function calculateBMs(bandsData) {
+  const allPoints = [];
+
+  bandsData.paths.forEach((obj) => {
+    const { x, values } = obj;
+    values.forEach((band) => {
+      band.forEach((val, idx) => {
+        allPoints.push({ x: x[idx], value: val });
+      });
+    });
+  });
+
+  const positivePoints = allPoints.filter((p) => p.value > 0);
+  const negativePoints = allPoints.filter((p) => p.value < 0);
+
+  const cbmPoint = positivePoints.reduce(
+    (minPoint, p) => (p.value < minPoint.value ? p : minPoint),
+    positivePoints[0],
+  );
+
+  const vbmPoint = negativePoints.reduce(
+    (maxPoint, p) => (p.value > maxPoint.value ? p : maxPoint),
+    negativePoints[0],
+  );
+
+  return { cbm: cbmPoint, vbm: vbmPoint };
+}
+
+// Lazy loading BandComponent.
+const BandComponent = ({
+  bandsData,
+  yRange = [-6.4, 6.4],
+  customTraces,
+  style,
+}) => {
+  const containerRef = useRef(null);
+
+  console.log("custom traces", customTraces);
+
+  useEffect(() => {
+    if (!containerRef.current || !bandsData) return;
+    import("bands-visualiser").then(({ BandsVisualiser }) => {
+      const bandsDataArray = [
+        {
+          bandsData,
+          traceFormat: {
+            showlegend: false,
+            line: { width: 2.0, color: "#636EFA" },
+          },
+        },
+      ];
+
+      BandsVisualiser(containerRef.current, {
+        bandsDataArray,
+        settings: { yaxis: { range: yRange } },
+        customTraces: customTraces || [],
+      });
+    });
+  }, [bandsData]);
+
+  return <div ref={containerRef} style={style} />;
+};
+
+const ElectronicSection = ({ loadedData }) => {
+  const electronicData = loadedData.details.electronic;
   const [bandsData, setBandsData] = useState(null);
   const [loadingBands, setLoadingBands] = useState(true);
+  const [cbm, setCbm] = useState(null);
+  const [vbm, setVbm] = useState(null);
 
-  let electronicData = props.loadedData.details.electronic;
-  console.log("electronicData", electronicData);
-
-  // check if we can display bands
-  let bandsAvailable = true;
-  if (
-    electronicData.bands_uuid == null ||
-    electronicData.fermi_energy.value == null ||
-    electronicData.band_gap.value == null
-  ) {
-    bandsAvailable = false;
-  }
+  const bandsAvailable =
+    electronicData.bands_uuid != null &&
+    electronicData.fermi_energy?.value != null &&
+    electronicData.band_gap?.value != null;
 
-  let bandShift = 0.0;
-  if (bandsAvailable) {
-    // Shifting the bands such that Fermi energy is 0:
-    // It looks like the fermi energy currently gives us the top of the conduction band
-    // instead of the middle of the band gap. Therefore, shift additionally by half the gap.
-    // Note: for spin-polarized calculations, there are 2 Fermi energies. Taking the maximum
-    // here seems to work best to align 0 to the middle of the gap (although not stricly correct).
-    bandShift = -math.max(electronicData.fermi_energy.value);
-    bandShift -= electronicData.band_gap.value / 2;
-  }
+  // Compute band shift
+  const bandShift = bandsAvailable
+    ? -Math.max(electronicData.fermi_energy.value) -
+      electronicData.band_gap.value / 2
+    : 0;
 
+  // Load band data if available
   useEffect(() => {
-    setBandsData(null);
-    if (bandsAvailable) {
-      loadAiidaBands(electronicData.bands_uuid).then((bands) => {
-        shiftBands(bands, bandShift);
-        setBandsData(bands);
-        setLoadingBands(false);
-      });
-    } else {
+    if (!bandsAvailable) {
       setLoadingBands(false);
+      return;
     }
-  }, []);
-
-  let bandsJsx = "";
-  if (!bandsAvailable) {
-    bandsJsx = (
-      <span>Electronic bands are not available for this material.</span>
-    );
-  } else if (loadingBands) {
-    bandsJsx = (
-      <div style={{ width: "150px", padding: "40px", margin: "0 auto" }}>
-        <McloudSpinner />
-      </div>
-    );
-  } else {
-    bandsJsx = (
-      <>
-        <div className="subsection-title">
-          Electronic band structure{" "}
-          <ExploreButton
-            explore_url={EXPLORE_URL}
-            uuid={electronicData.bands_uuid}
-          />
-        </div>
-        <BandsVisualizer
-          bandsDataList={[bandsData]}
-          energyRange={[-6.0, 6.0]}
-          bandsColorInfo={["#3560A0", "red"]}
-          formatSettings={{
-            bandsYlabel: "Electronic bands (eV)",
-          }}
-        />
-      </>
-    );
-  }
+
+    setBandsData(null);
+    setLoadingBands(true);
+
+    loadAiidaBands(electronicData.bands_uuid).then((bands) => {
+      shiftBands(bands, bandShift); //shift before passing
+
+      if (electronicData.band_gap.value > 0) {
+        const { cbm: cbmPoint, vbm: vbmPoint } = calculateBMs(bands);
+        setCbm(cbmPoint);
+        setVbm(vbmPoint);
+      }
+
+      setBandsData(bands);
+      setLoadingBands(false);
+    });
+  }, [electronicData.bands_uuid, bandsAvailable, bandShift]);
 
   return (
     <div>
       <div className="section-heading">Electronic properties</div>
       <Container fluid className="section-container">
         <Row>
-          <Col className="flex-column">{bandsJsx}</Col>
+          <Col className="flex-column">
+            {loadingBands ? (
+              <div
+                style={{ width: "150px", padding: "40px", margin: "0 auto" }}
+              >
+                <McloudSpinner />
+              </div>
+            ) : !bandsAvailable ? (
+              <span>Electronic bands are not available for this material.</span>
+            ) : (
+              <>
+                <div className="subsection-title">
+                  Electronic band structure{" "}
+                  <ExploreButton
+                    explore_url={EXPLORE_URL}
+                    uuid={electronicData.bands_uuid}
+                  />
+                </div>
+                <BandComponent
+                  bandsData={bandsData}
+                  style={{ height: "500px" }}
+                />
+              </>
+            )}
+          </Col>
           <Col className="flex-column">
             <div style={{ marginTop: "35px" }}>
               <ElectronicInfoBox
                 electronicData={electronicData}
-                metadata={props.loadedData.metadata}
+                metadata={loadedData.metadata}
+                cbm={cbm}
+                vbm={vbm}
               />
             </div>
           </Col>