update BZvis to now track camera position

Author: Bud-Macaulay

package-lock.json

@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "bands-visualiser": "^0.0.2",
-    "brillouinzone-visualizer": "^0.4.2",
+    "brillouinzone-visualizer": "^0.4.3",
     "mc-react-structure-visualizer": "^0.8.3",
     "plotly.js-basic-dist-min": "^3.1.2",
     "react-json-view-lite": "^2.5.0",

package.json

@@ -0,0 +1,83 @@
+import { useState, useRef, useEffect } from "react";
+
+const labelStyle = "ae:flex ae:items-center ae:gap-1 ae:text-xs";
+
+// Control div rendered above teh BZVis component.
+export default function BZControls({
+  showPathpoints,
+  setShowPathpoints,
+  showBVectors,
+  setShowBVectors,
+  showAxes,
+  setShowAxes,
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const panelRef = useRef(null);
+
+  // Close when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (panelRef.current && !panelRef.current.contains(event.target)) {
+        setExpanded(false);
+      }
+    }
+
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, []);
+
+  // Close when escape is pressed
+  useEffect(() => {
+    function handleKey(e) {
+      if (e.key === "Escape") setExpanded(false);
+    }
+    document.addEventListener("click", handleKey);
+    return () => document.removeEventListener("click", handleKey);
+  }, []);
+
+  return (
+    <div
+      ref={panelRef}
+      className={`ae:absolute ae:top-1 ae:right-1 ae:z-10 ae:overflow-hidden ae:rounded-md ae:bg-slate-50  ae:transition-all ae:duration-300 ${
+        expanded ? "ae:w-22" : "ae:w-6"
+      }`}
+    >
+      <button
+        onClick={() => setExpanded((e) => !e)}
+        className="ae:text-xl ae:w-full ae:flex ae:justify-end ae:rounded-md ae:hover:cursor-pointer ae:hover:bg-slate-100"
+        aria-expanded={expanded}
+      >
+        ⚙️
+      </button>
+
+      {expanded && (
+        <div className="ae:flex ae:flex-col ae:gap-1 ae:pb-2 ae:pl-2">
+          <label className={`${labelStyle}`}>
+            <input
+              type="checkbox"
+              checked={showPathpoints}
+              onChange={(e) => setShowPathpoints(e.target.checked)}
+            />
+            Kpoints
+          </label>
+          <label className={`${labelStyle}`}>
+            <input
+              type="checkbox"
+              checked={showAxes}
+              onChange={(e) => setShowAxes(e.target.checked)}
+            />
+            Axes
+          </label>
+          <label className={`${labelStyle}`}>
+            <input
+              type="checkbox"
+              checked={showBVectors}
+              onChange={(e) => setShowBVectors(e.target.checked)}
+            />
+            Bvectors
+          </label>
+        </div>
+      )}
+    </div>
+  );
+}

src/AiidaExplorer/VisualiserPane/Rich/KpointsDataVisualiser/BZControls.jsx

@@ -2,55 +2,63 @@ import React, { useState, useEffect, useRef } from "react";
 import { createBZVisualizer } from "brillouinzone-visualizer";
 import useContainerBucket from "../../../hooks/useContainerBucket";
 
+import BZControls from "./BZControls";
+
 export default function BZVisualizer({ data }) {
   const containerRef = useRef(null);
+  const bzRef = useRef(null);
+  const cameraStateRef = useRef(null);
 
-  // ----- Local state for the checkbox -----
   const [showPathpoints, setShowPathpoints] = useState(false);
+  const [showBVectors, setShowBVectors] = useState(true);
+  const [showAxes, setShowAxes] = useState(true);
 
-  // ----- Options object -----
-  const options = {
-    showAxes: true,
-    showBVectors: true,
-    showPathpoints,
-    disableInteractOverlay: true,
-  };
-
-  // Reset the visualizer whenever the container width changes significantly
-  const widthBucket = useContainerBucket(containerRef, 100);
+  const widthBucket = useContainerBucket(containerRef, 50);
 
   useEffect(() => {
     if (!containerRef.current) return;
 
-    containerRef.current.innerHTML = "";
-    createBZVisualizer(containerRef.current, data, options);
-  }, [data, showPathpoints, widthBucket]); // re-run if data, checkbox, or bucket changes
+    const timer = setTimeout(() => {
+      if (bzRef.current?.getCameraState) {
+        cameraStateRef.current = bzRef.current.getCameraState();
+      }
+
+      // clear the container.
+      containerRef.current.innerHTML = "";
+
+      bzRef.current = createBZVisualizer(
+        containerRef.current,
+        data,
+        {
+          showAxes,
+          showBVectors,
+          showPathpoints,
+          disableInteractOverlay: true,
+        },
+        (bzInstance) => {
+          // use the saved camera state to update the camera.
+          if (cameraStateRef.current) {
+            bzInstance.camera.position.copy(cameraStateRef.current.position);
+            bzInstance.controls.target.copy(cameraStateRef.current.target);
+            bzInstance.controls.update();
+          }
+        }
+      );
+    }, 100); //100ms debounce stops fastdrags from resetting view.
+
+    return () => clearTimeout(timer);
+  }, [data, showAxes, showBVectors, showPathpoints, widthBucket]);
 
   return (
-    <div className="relative w-full" style={{ height: "400px" }}>
-      {/* Overlayed checkbox */}
-      <label
-        style={{
-          position: "absolute",
-          top: 8,
-          right: 8,
-          zIndex: 10,
-          background: "rgba(255,255,255,0.8)",
-          padding: "4px 8px",
-          borderRadius: 4,
-          fontSize: 12,
-        }}
-      >
-        <input
-          type="checkbox"
-          checked={showPathpoints}
-          onChange={(e) => setShowPathpoints(e.target.checked)}
-          style={{ marginRight: 4 }}
-        />
-        Overlay Kpoints
-      </label>
-
-      {/* Visualizer container */}
+    <div className="ae:relative ae:w-full" style={{ height: "400px" }}>
+      <BZControls
+        showPathpoints={showPathpoints}
+        setShowPathpoints={setShowPathpoints}
+        showBVectors={showBVectors}
+        setShowBVectors={setShowBVectors}
+        showAxes={showAxes}
+        setShowAxes={setShowAxes}
+      />
       <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
     </div>
   );

src/AiidaExplorer/VisualiserPane/Rich/KpointsDataVisualiser/BZVis.jsx

@@ -163,7 +163,7 @@ export default function KpointsDataVisualiser({ nodeData = {} }) {
       {attributes?.cell && bzData && (
         <CardContainer
           header={`Brillouin Zone${path ? ` (${path})` : ""}`}
-          className="ae:!px-1.5 ae:!py-2"
+          className="ae:px-1.5! ae:py-2!"
           childrenClassName="ae:!p-0"
         >
           <div className="ae:w-full">

src/AiidaExplorer/VisualiserPane/Rich/KpointsDataVisualiser/index.jsx

@@ -40,7 +40,7 @@ export function reciprocalLattice(cell) {
   return [b1, b2, b3];
 }
 
-// Static columns (won’t change between renders)
+// Static columns for tables.
 export const Columns = {
   recipColumns: ["", "x", "y", "z"],
   cellColumns: ["x", "y", "z"],

src/AiidaExplorer/VisualiserPane/Rich/KpointsDataVisualiser/utils.js

@@ -65,7 +65,7 @@ export default function Overlay({
           {title && <div className="ae:text-lg ae:font-medium">{title}</div>}
           <button
             onClick={onClose}
-            className="ae:text-gray-600 ae:hover:text-black ae:p-1"
+            className="ae:text-gray-600 ae:hover:text-black ae:hover:bg-slate-50 ae:rounded-lg ae:hover:cursor-pointer ae:p-1"
           >
             ✕
           </button>