smiles working

Author: Bud-Macaulay

package-lock.json

@@ -25,7 +25,8 @@
     "react-dom": "^18.2.0",
     "react-json-view-lite": "^2.5.0",
     "react-range": "^1.10.0",
-    "react-router-dom": "^7.12.0"
+    "react-router-dom": "^7.12.0",
+    "smiles-drawer": "^2.1.7"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.16",

package.json

@@ -289,7 +289,7 @@
       "attributes": {
         "name": "Physical Sciences Data Infrastructure",
         "description": "A namespace for properties and data related to the Physical Sciences Data Infrastructure (PSDI), UK-based integrated data instructure for the Physical Sciences.",
-        "base_url": null,
+        "base_url": "https://metadata.psdi.ac.uk/optimade-index-metadb",
         "homepage": "https://www.psdi.ac.uk",
         "link_type": "external"
       }

public/cachedProviders.json

@@ -2,9 +2,6 @@ import { corsProxies } from "./corsProxies.js";
 
 import { elements } from "./components/OptimadeClient/OptimadeFilters/OptimadePTable/elements.js";
 
-const OFFICIAL_PROVIDERS_URL =
-  "https://raw.githubusercontent.com/Materials-Consortia/providers/refs/heads/master/src/links/v1/providers.json";
-
 async function fetchWithCorsFallback(url) {
   const attempts = [
     { name: "direct", url },
@@ -28,8 +25,11 @@ async function fetchWithCorsFallback(url) {
 }
 
 // --- Providers list ---
-// Fetch from the Materials Consortia official list, fallback to the cached version in this repo
-export async function getProvidersList(excludeIds = []) {
+// go to optimade url, if that fails use the fallback here.
+export async function getProvidersList(
+  providersUrl = "https://raw.githubusercontent.com/Materials-Consortia/providers/refs/heads/master/src/links/v1/providers.json",
+  excludeIds = [],
+) {
   async function fetchJson(url) {
     const res = await fetch(url);
     if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
@@ -38,22 +38,21 @@ export async function getProvidersList(excludeIds = []) {
 
   let json;
   try {
-    json = await fetchJson(OFFICIAL_PROVIDERS_URL);
+    json = await fetchJson(providersUrl);
   } catch (err) {
     console.warn(
       "Remote fetch failed, falling back to cachedProviders.json:",
       err,
     );
-    json = await fetchJson("cachedProviders.json");
+    try {
+      json = await fetchJson("cachedProviders.json");
+    } catch (fallbackErr) {
+      console.error("Both remote and local fetches failed:", fallbackErr);
+      throw fallbackErr;
+    }
   }
 
-  const filteredData = json.data.filter(
-    (p) =>
-      !excludeIds.includes(p.id) &&
-      typeof p.attributes.base_url === "string" &&
-      p.attributes.base_url.trim() !== "",
-  );
-
+  const filteredData = json.data.filter((p) => !excludeIds.includes(p.id));
   return { ...json, data: filteredData };
 }
 

src/api.js

@@ -7,9 +7,21 @@ import QEInputButton from "../common/QEInputButton";
 import { containerStyleHalf } from "../../styles/containerStyles";
 
 import { optimadeToCrystalStructure } from "../../utils";
-
 import { structureToCif } from "matsci-parse";
 
+import { SmilesViewer } from "../OptimadeSmilesHandler";
+
+function getSmiles(attributes) {
+  if (!attributes) return null;
+
+  const key = Object.keys(attributes).find((k) =>
+    k.toLowerCase().includes("smiles"),
+  );
+
+  if (key) return attributes[key];
+  return null;
+}
+
 export function ResultViewer({ selectedResult }) {
   const { structureData, cifText } = useMemo(() => {
     if (!selectedResult) return { structureData: null, cifText: "" };
@@ -24,13 +36,29 @@ export function ResultViewer({ selectedResult }) {
     }
   }, [selectedResult]);
 
+  const crystalPositions = selectedResult?.attributes?.cartesian_site_positions;
+  const smiles = getSmiles(selectedResult?.attributes);
+
+  const shouldRenderCrystal = structureData && crystalPositions;
+  const shouldRenderSmiles = !shouldRenderCrystal && smiles;
+
   return (
     <div className="w-full flex flex-col">
       {selectedResult ? (
         <div>
           <div className="@container w-full flex flex-col md:flex-row gap-2 md:gap-4">
             <div className="w-full md:w-1/2">
-              <StructureViewerWithDownload OptimadeStructure={selectedResult} />
+              {shouldRenderCrystal ? (
+                <StructureViewerWithDownload
+                  OptimadeStructure={selectedResult}
+                />
+              ) : shouldRenderSmiles ? (
+                <SmilesViewer smilesStr={smiles} width={450} height={450} />
+              ) : (
+                <div className="text-center text-red-600">
+                  No crystal structure or SMILES available
+                </div>
+              )}
             </div>
             <div className={containerStyleHalf}>
               <JsonView

src/components/OptimadeClient/ResultViewer.jsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef } from "react";
+import SmilesDrawer from "smiles-drawer";
+
+import HelpIcon from "../common/HelpIcon";
+
+const container = `w-full h-full flex border
+   border-slate-500 rounded-sm
+    items-center justify-center bg-slate-50 relative`;
+
+export function SmilesViewer({
+  smilesStr,
+  type = "svg",
+  width = 400,
+  height = 400,
+}) {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (!smilesStr || !containerRef.current) return;
+
+    const sd = new SmilesDrawer.SmiDrawer({
+      width,
+      height,
+      padding: 15,
+      bondThickness: 0.6,
+
+      fontSizeLarge: 6,
+    });
+
+    sd.draw(smilesStr, containerRef.current);
+  }, [smilesStr, width, height]);
+
+  if (type === "img") {
+    return (
+      <div className={container}>
+        <img
+          ref={containerRef}
+          style={{ width, height }}
+          alt="SMILES structure"
+        />
+      </div>
+    );
+  }
+
+  return (
+    // svg doesnt play that nice with the baseContainer so we hard code it here.
+    <div className={container}>
+      <div className="absolute top-2 right-2 z-10">
+        <HelpIcon
+          popover={`Smiles rendering is experimental and being done by SmilesDrawer 2.0, please report any issues you observe.`}
+          placement="left"
+          color="rgb(40,40,40)"
+        />
+      </div>
+      <svg ref={containerRef} width={width} height={height} />
+    </div>
+  );
+}

src/components/OptimadeSmilesHandler/index.jsx

@@ -53,7 +53,7 @@ export default function HelpIcon({
       {popover && (
         <span
           className={`absolute ${positionClasses} w-max max-w-xs rounded-sm ${popoutBgColor} ${popoutTextColor} text-xs p-1
-          text-center opacity-0 group-hover:opacity-100 transition-opacity z-50 pointer-events-none ${popoutStyleOverrides}`}
+          text-center opacity-0 group-hover:opacity-100 transition-opacity duration-400 z-50 pointer-events-none ${popoutStyleOverrides}`}
         >
           {popover}
         </span>