add dynamic metadata additions.

Author: Bud-Macaulay

src/components/OptimadeClient/DatabaseSelector.jsx

@@ -3,58 +3,77 @@ import { getProviderLinks } from "../../api";
 import debounce from "lodash.debounce";
 import { slateDropdown } from "../../styles/dropdownStyles";
 
-export function DatabaseSelector({ providers, onQueryUrlChange }) {
+export function DatabaseSelector({
+  providers,
+  onQueryUrlChange,
+  onChildChange,
+}) {
   const [selectedProvider, setSelectedProvider] = useState("");
   const [childEntries, setChildEntries] = useState([]);
-  const [childSelected, setChildSelected] = useState("");
+  const [childSelected, setChildSelected] = useState(null); // full object
   const [customUrl, setCustomUrl] = useState("");
   const [loadingChildren, setLoadingChildren] = useState(false);
 
-  // 700 ms between no typing before setting url.
   const handleCustomChange = debounce((val) => setCustomUrl(val), 700);
 
   useEffect(() => {
-    if (!selectedProvider || selectedProvider === "__custom__") {
+    if (!selectedProvider) {
       setChildEntries([]);
-      setChildSelected("");
+      setChildSelected(null);
+      onQueryUrlChange("");
+      onChildChange?.(null);
+      return;
+    }
+
+    if (selectedProvider === "__custom__") {
+      setChildEntries([]);
+      setChildSelected(null);
       onQueryUrlChange(customUrl || "");
+      onChildChange?.(null);
       return;
     }
 
     async function fetchChildren() {
       try {
-        setLoadingChildren(true); // start loading
+        setLoadingChildren(true);
         const { children } = await getProviderLinks(selectedProvider);
         const entries = children.map((c) => c.attributes || {});
         setChildEntries(entries);
 
         if (entries.length === 1) {
-          // Auto-select the only child
-          setChildSelected(entries[0].base_url);
+          setChildSelected(entries[0]);
+          onQueryUrlChange(entries[0].base_url);
+          onChildChange?.(entries[0]);
         } else {
-          setChildSelected("");
+          setChildSelected(null);
+          onQueryUrlChange("");
+          onChildChange?.(null);
         }
       } catch (err) {
         console.error(err);
         setChildEntries([]);
-        setChildSelected("");
+        setChildSelected(null);
+        onQueryUrlChange("");
+        onChildChange?.(null);
       } finally {
-        setLoadingChildren(false); // stop loading
+        setLoadingChildren(false);
       }
     }
 
     fetchChildren();
   }, [selectedProvider]);
 
   useEffect(() => {
-    const url =
-      selectedProvider === "__custom__"
-        ? customUrl
-        : childSelected
-        ? childSelected
-        : "";
-    onQueryUrlChange(url);
-  }, [selectedProvider, childSelected, customUrl, onQueryUrlChange]);
+    if (selectedProvider === "__custom__") {
+      onQueryUrlChange(customUrl || "");
+      onChildChange?.(null);
+    } else if (childSelected) {
+      onQueryUrlChange(childSelected.base_url);
+      onChildChange?.(childSelected);
+    }
+  }, [customUrl, childSelected, selectedProvider]);
+
+  console.log("childSelected", childSelected);
 
   return (
     <div className="flex flex-col items-start space-y-2 w-full max-w-md">
@@ -86,9 +105,14 @@ export function DatabaseSelector({ providers, onQueryUrlChange }) {
         />
       ) : (
         <select
-          className={`${slateDropdown}`}
-          value={childSelected}
-          onChange={(e) => setChildSelected(e.target.value)}
+          className={slateDropdown}
+          value={childSelected?.base_url || ""}
+          onChange={(e) => {
+            const selected = childEntries.find(
+              (c) => c.base_url === e.target.value
+            );
+            setChildSelected(selected || null);
+          }}
           disabled={loadingChildren}
         >
           {loadingChildren ? (

src/components/OptimadeClient/OptimadeMetadata.jsx

@@ -0,0 +1,78 @@
+const containerclassName =
+  "items-center justify-center p-4 w-full bg-slate-50 border rounded";
+
+const paragraphclassName = "text-sm px-1";
+const headingclassName = "text-lg mb-1";
+
+const hyperlinkclassName = "text-blue-500 hover:underline hover:text-blue-600";
+const sectionclassName = "space-y-2";
+
+export default function OptimadeMetadata({ child }) {
+  if (!child) {
+    return (
+      <div className={containerclassName}>
+        <h3 className={headingclassName}>FAQs</h3>
+
+        <section className={sectionclassName}>
+          <h4 className={headingclassName}>What is the OPTIMADE Client?</h4>
+          <p className={paragraphclassName}>
+            This is a friendly client to search through databases and other
+            implementations exposing an OPTIMADE RESTful API. To get more
+            information about the OPTIMADE API, please see{" "}
+            <a
+              href="https://www.optimade.org/"
+              target="_blank"
+              className={hyperlinkclassName}
+              rel="noopener noreferrer"
+            >
+              the official web page
+            </a>
+            . All providers are retrieved from{" "}
+            <a
+              href="https://providers.optimade.org/"
+              target="_blank"
+              className={hyperlinkclassName}
+              rel="noopener noreferrer"
+            >
+              the OPTIMADE consortium's list of providers
+            </a>
+            .
+          </p>
+          <p className={paragraphclassName}>
+            To get started, select a provider and subdatabase and start
+            exploring! This message will be hidden when exploring starts.
+          </p>
+
+          <h4 className={headingclassName}>
+            Why is a given provider not shown in the client?
+          </h4>
+          <p className={paragraphclassName}>
+            This webapp has filtered some providers for various reasons; some do
+            not support open queries and others have no link to a meta-database.
+            Querying should still be possible through the 'Custom endpoint'
+            method.
+          </p>
+
+          <h4 className={headingclassName}>
+            Why does the structure visualiser not work for some structures?
+          </h4>
+          <p className={paragraphclassName}>
+            The visualiser is fairly primitive and the OPTIMADE specification is
+            very broad. For complex structure data (assemblies, unknown
+            positions, or partial occupancies), the JSON response is still
+            fetched but the visualisation often fails.
+          </p>
+        </section>
+      </div>
+    );
+  }
+
+  const { name, description, ...otherAttrs } = child;
+
+  return (
+    <div className={containerclassName}>
+      <h3 className={headingclassName}>{name}</h3>
+      {description && <p className={paragraphclassName}>{description}</p>}
+    </div>
+  );
+}

src/components/OptimadeClient/index.jsx

@@ -14,10 +14,12 @@ import { PaginationHandler } from "./PaginationHandler";
 import { AnimatePresence, motion } from "framer-motion";
 
 import MaterialsCloudHeader from "mc-react-header";
+import OptimadeMetadata from "./OptimadeMetadata";
 
 export function OptimadeClient({ hideProviderList = ["exmpl", "matcloud"] }) {
   const [providers, setProviders] = useState([]);
   const [queryUrl, setQueryUrl] = useState("");
+  const [selectedChild, setSelectedChild] = useState(null);
   const [currentFilter, setCurrentFilter] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
   const [currentResult, setCurrentResult] = useState(null);
@@ -97,6 +99,7 @@ export function OptimadeClient({ hideProviderList = ["exmpl", "matcloud"] }) {
           <div className="mt-4">
             <DatabaseSelector
               providers={providers}
+              onChildChange={setSelectedChild}
               onQueryUrlChange={(url) => {
                 // Only reset filter if provider actually changes
                 if (url !== queryUrl) {
@@ -122,6 +125,8 @@ export function OptimadeClient({ hideProviderList = ["exmpl", "matcloud"] }) {
             </div>
           )}
 
+          <OptimadeMetadata child={selectedChild} />
+
           <div className="pb-4 px-0.5 w-full">
             <ProviderInfo queryUrl={queryUrl} />
           </div>