fix id change in cmr by casting as str

Author: Bud-Macaulay

src/components/OptimadeClient/PaginationHandler.jsx

@@ -12,15 +12,17 @@ export function PaginationHandler({
 }) {
   if (!totalPages || totalPages < 1) return null;
 
-  console.log("metaData", metaData);
-
   const dataReturned = metaData?.data_returned || "N/A";
 
   const hasPrev = currentPage > 1;
-  const hasNext =
-    metaData.more_data_available === true ||
-    (typeof totalAvailable === "number" &&
-      totalAvailable > currentPage * perPage);
+
+  // check if next exists
+  let hasNext = false;
+  if (metaData?.more_data_available === true) {
+    hasNext = true;
+  } else if (currentPage < totalPages) {
+    hasNext = true;
+  }
 
   return (
     <div className="flex flex-wrap justify-center items-center gap-1">

src/components/OptimadeClient/ResultViewer.jsx

@@ -11,6 +11,8 @@ import { containerStyleHalf } from "../../styles/containerStyles";
 // TODO, switdch jsonview library
 
 export function ResultViewer({ selectedResult }) {
+  console.log("selectedResult", selectedResult);
+
   const lattice = selectedResult?.attributes?.lattice_vectors ?? [];
   const sitesRaw = selectedResult?.attributes?.cartesian_site_positions ?? [];
   const species = selectedResult?.attributes?.species_at_sites ?? [];

src/components/OptimadeClient/ResultsDropdown.jsx

@@ -6,6 +6,11 @@ export default function ResultsDropdown({
   selectedResult,
   setSelectedResult,
 }) {
+  const handleChange = (e) => {
+    const chosen = results?.data?.find((r) => String(r.id) === e.target.value);
+    if (chosen) setSelectedResult(chosen);
+  };
+
   return (
     <>
       <label className="block text-sm font-medium text-gray-700 mb-1">
@@ -14,10 +19,7 @@ export default function ResultsDropdown({
       <select
         className={`${slateDropdown} w-full`}
         value={selectedResult?.id || ""}
-        onChange={(e) => {
-          const chosen = results?.data?.find((r) => r.id === e.target.value);
-          if (chosen) setSelectedResult(chosen);
-        }}
+        onChange={handleChange}
         disabled={resultsLoading || !results?.data?.length}
       >
         {!results?.data?.length ? (
@@ -26,7 +28,9 @@ export default function ResultsDropdown({
           results.data.map((result) => (
             <option key={result.id} value={result.id}>
               {`${
-                result.attributes?.chemical_formula_descriptive || "Unknown"
+                result.attributes?.chemical_formula_descriptive ||
+                result.attributes?.chemical_formula_hill ||
+                "Unknown"
               } (${result.id})`}
             </option>
           ))