Switch to Tanstack useQuery (#24)

* initial tanstack wrapping

* groups to tanstack

* rm debug + treedropdown

* remove manual error+loading

* nodeFetching on tanstack.

* moved visualisers to tanstackquery

* readd loading spinner

Author: Bud-Macaulay

package-lock.json

@@ -32,6 +32,7 @@
   ],
   "dependencies": {
     "@spglib/moyo-wasm": "^0.7.1",
+    "@tanstack/react-query": "^5.90.21",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "bands-visualiser": "^0.0.2",
     "brillouinzone-visualizer": "^0.4.3",

package.json

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { fetchGroups, fetchFromQueryBuilder } from "../api";
 import TypeCheckboxTree from "./TypeCheckboxTree";
@@ -93,7 +94,6 @@ function sortGroups(groups) {
 // TODO - refactor, this is very messy atm.
 // TODO check the search feature - maybe wire into full_types api...?
 export default function GroupsViewer({ restApiUrl, setRootNodeId }) {
-  const [groups, setGroups] = useState([]);
   const [selectedGroups, setSelectedGroups] = useState([]);
   const [selectedTypes, setSelectedTypes] = useState([]);
   const [rawTableData, setRawTableData] = useState([]);
@@ -111,10 +111,14 @@ export default function GroupsViewer({ restApiUrl, setRootNodeId }) {
     ? columnOrder.filter((c) => c !== "Created")
     : columnOrder;
 
-  // fetch groups once
-  useEffect(() => {
-    fetchGroups(restApiUrl).then(setGroups).catch(console.error);
-  }, [restApiUrl]);
+  const {
+    data: groups,
+    isLoading: groupsLoading,
+    isError: groupsError,
+  } = useQuery({
+    queryKey: ["groups", restApiUrl],
+    queryFn: () => fetchGroups(restApiUrl),
+  });
 
   // fetch nodes
   const fetchNodes = useCallback(
@@ -190,7 +194,7 @@ export default function GroupsViewer({ restApiUrl, setRootNodeId }) {
         <div className="ae:font-medium ae:my-2 ae:mt-4">
           Filter by Defined Groups
         </div>
-        {sortGroups(groups).map((g) => (
+        {sortGroups(groups || []).map((g) => (
           <label
             key={g.label}
             className="ae:flex ae:items-start ae:gap-2 ae:mb-1"

src/AiidaExplorer/GroupsViewer/index.jsx

@@ -1,42 +1,45 @@
 import { BandsVisualiser } from "bands-visualiser";
 import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import CardContainer from "../../components/CardContainer";
 import ErrorDisplay from "../../components/Error";
 import Spinner from "../../components/Spinner";
 
 export default function BandsDataVisualiser({ nodeData }) {
   const containerRef = useRef(null);
-  const [bandsDataArray, setBandsDataArray] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
 
   const aiidaBandsPath = nodeData.downloadByFormat?.json;
   const yAxisUnits = nodeData?.attributes?.units || "N/A";
 
-  useEffect(() => {
-    if (!aiidaBandsPath) return;
-
-    const fetchData = async () => {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const res = await fetch(aiidaBandsPath);
-        if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
+  const {
+    data: bandsDataArray,
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["bandsJson", aiidaBandsPath],
+    queryFn: async () => {
+      if (!aiidaBandsPath) {
+        throw new Error("No bands JSON path available");
+      }
 
-        const json = await res.json();
-        setBandsDataArray([{ bandsData: json }]);
-      } catch (err) {
-        console.error("Failed to fetch bands JSON:", err);
-        setError(err.message);
-      } finally {
-        setLoading(false);
+      const res = await fetch(aiidaBandsPath);
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
       }
-    };
 
-    fetchData();
-  }, [aiidaBandsPath]); // no warnings, safe
+      const json = await res.json();
+
+      // match your original structure
+      return [{ bandsData: json }];
+    },
+    enabled: !!aiidaBandsPath,
+    staleTime: 5 * 60 * 1000, // 5 minutes fresh
+    gcTime: 5 * 60 * 1000, // cache lifetime (v5)
+    retry: 1,
+  });
 
   useEffect(() => {
     if (!containerRef.current || !bandsDataArray) return;
@@ -60,13 +63,13 @@ export default function BandsDataVisualiser({ nodeData }) {
         childrenClassName="ae:!p-0"
       >
         <div className="ae:w-full ae:h-[450px] ae:relative ae:flex ae:items-center ae:justify-center">
-          {loading && <Spinner />}
+          {isLoading && <Spinner />}
 
-          {error && !loading && (
-            <ErrorDisplay message={error} onRetry={() => {}} />
+          {error && !isLoading && (
+            <ErrorDisplay message={error} onRetry={refetch} />
           )}
 
-          {!loading && !error && bandsDataArray && (
+          {!isLoading && !error && bandsDataArray && (
             <div ref={containerRef} className="ae:absolute ae:inset-0 " />
           )}
         </div>

src/AiidaExplorer/VisualiserPane/Rich/BandsDataVisualiser.jsx

@@ -3,6 +3,8 @@ import { useMemo, useEffect, useState, useCallback } from "react";
 import { inv, multiply } from "mathjs";
 import StructureVisualizer from "mc-react-structure-visualizer";
 
+import { useQuery } from "@tanstack/react-query";
+
 import { StructDownloadButton } from "./StructDownloadButton";
 import {
   formatLattice,
@@ -24,40 +26,32 @@ import { analyzeCrystal } from "../../../spglib";
 // TODO - move spglib rendering and calc into its own component and make this more of a wrapper/layout component.
 export default function StructureDataVisualiser({ nodeData, restApiUrl }) {
   const aiidaCifPath = nodeData.downloadByFormat?.cif;
-
-  const [cifText, setCifText] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
   const [spgLib, setSpgLib] = useState(null);
 
   // --- Fetch CIF text ---
-  const fetchData = useCallback(async () => {
-    if (!aiidaCifPath) {
-      setError("No CIF file available");
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    setError(null);
-    try {
+  const {
+    data: cifText,
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["cifText", aiidaCifPath],
+    queryFn: async () => {
+      if (!aiidaCifPath) throw new Error("No CIF file available");
       const res = await fetch(aiidaCifPath);
       if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
-      const text = await res.text();
-      setCifText(text);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }, [aiidaCifPath]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+      return res.text();
+    },
+    enabled: !!aiidaCifPath,
+    staleTime: 1000 * 60 * 10, // 10 min cache.
+    retry: 1,
+  });
 
   const hasDerived =
     nodeData.derived_properties &&
     Object.keys(nodeData.derived_properties).length > 0;
+
   const lattice = nodeData.attributes?.cell || null;
   const latticeLengths = lattice ? formatLattice(nodeData) : null;
   const volume = hasDerived
@@ -85,7 +79,7 @@ export default function StructureDataVisualiser({ nodeData, restApiUrl }) {
   // --- Reverse mapping for rendering ---
   const reverseKindMap = useMemo(
     () => Object.fromEntries(Object.entries(kindMap).map(([k, v]) => [v, k])),
-    [kindMap]
+    [kindMap],
   );
 
   // --- Prepare atomic sites table (Å positions) ---
@@ -100,7 +94,7 @@ export default function StructureDataVisualiser({ nodeData, restApiUrl }) {
           "z [Å]": z.toFixed(4),
         };
       }),
-    [sites]
+    [sites],
   );
 
   // --- Density calculation ---
@@ -147,17 +141,17 @@ export default function StructureDataVisualiser({ nodeData, restApiUrl }) {
     }));
   }, [spgLib, reverseKindMap]);
 
-  if (loading)
+  if (isLoading)
     return (
       <div className="ae:w-full ae:min-h-[450px] ae:flex ae:items-center ae:justify-center">
         <Spinner />
       </div>
     );
 
-  if (error)
+  if (isError)
     return (
       <div className="ae:w-full ae:min-h-[450px] ae:flex ae:items-center ae:justify-center">
-        <ErrorDisplay message={error} onRetry={fetchData} />
+        <ErrorDisplay message={isError} onRetry={refetch} />
       </div>
     );