pnpm + ptable migration

Author: Bud-Macaulay

package-lock.json

@@ -17,7 +17,8 @@
     "framer-motion": "^12.23.19",
     "gl-matrix": "^3.4.4",
     "lodash.debounce": "^4.0.8",
-    "matsci-parse": "^0.0.2",
+    "matsci-parse": "^0.5.2",
+    "mc-periodic-table": "^0.0.2",
     "mc-react-header": "^0.4.5",
     "mc-react-library": "^0.5.0",
     "mc-react-structure-visualizer": "^0.8.4",

package.json

@@ -0,0 +1,4 @@
+allowBuilds:
+  core-js: true
+  core-js-pure: true
+  esbuild: true

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 // Simple periodic table data up to 118
 // Each element has atomic number, symbol, row, and column (group)
 export const elements = [
+  {},
   // Period 1
   { num: 1, sym: "H", row: 1, col: 1, group: "group1" },
   { num: 2, sym: "He", row: 1, col: 18, group: "group18" },

pnpm-workspace.yaml

@@ -1,74 +1,52 @@
-import React, { useEffect, useState } from "react";
-import { elements as allElements } from "./elements";
+import React, { useEffect, useState, useMemo } from "react";
+import { symbols, names } from "mc-periodic-table";
 
 import HelpIcon from "../../../common/HelpIcon";
-
-const defaultColors = {
-  group1: "bg-[#d7bbbb]",
-  group2: "bg-[#d7cdbb]",
-  group17: "bg-[#d7d9c2]",
-  group18: "bg-[#d0d5ee]",
-  transition: "bg-[#c4d0d8]",
-  lanthanide: "bg-[#e5cbee]",
-  actinide: "bg-[#aebcee]",
-  metalloid: "bg-[#cdd9c2]",
-  postTransition: "bg-[#c2c8d9]",
-  mainGroup: "bg-[#d9c2ce]",
-  default: "bg-gray-200",
-};
+import { PTableWrapper } from "../../../common/PTableWrapper";
 
 export default function PTable({
   providerUrl = null,
   selected = {},
   onSelectionChange,
-  colors = defaultColors,
-  selectedClassName = "bg-green-400 border border-green-700 text-white scale-105",
-  deselectedClassName = "bg-red-400 border border-red-700 text-white scale-105",
-  defaultBorderClassName = "border border-slate-700",
-  hoverClassName = "transform transition-transform duration-100 hover:scale-105 hover:z-10 hover:cursor-pointer",
 }) {
-  const [elements, setElements] = useState(allElements);
   const [cachedPTable, setCachedPTable] = useState(null);
   const [lastModified, setLastModified] = useState(null);
 
-  // Load cached PTable once on mount
+  // ----------------------------
+  // cache loading
+  // ----------------------------
   useEffect(() => {
     const loadCache = async () => {
       const urls = [
         "./cachedPTable.json",
         "https://raw.githubusercontent.com/materialscloud-org/tools-optimadeclient-react/main/public/cachedPTable.json",
       ];
+
       let json = null;
+
       for (const url of urls) {
         try {
           const res = await fetch(url);
-          if (!res.ok)
-            throw new Error(`Failed to load cached PTable from ${url}`);
+          if (!res.ok) throw new Error(`Failed ${url}`);
           json = await res.json();
-          console.log(`Loaded cached PTable from ${url}`);
           break;
-        } catch (err) {
-          console.warn(err.message);
+        } catch (e) {
+          console.warn(e.message);
         }
       }
 
-      if (!json) {
-        console.error("Failed to load cached PTable from all sources");
-        return;
-      }
+      if (!json) return;
 
-      // Use lastUpdated for UI
       if (json.lastUpdated) {
         setLastModified(new Date(json.lastUpdated).toLocaleDateString());
       }
 
-      // Convert to lookup map
       const map = {};
       json.data.forEach((entry) => {
         if (!entry.providerUrl) return;
 
         const key = entry.providerUrl.replace(/\/+$/, "");
-        // Check if `ptable` exists, otherwise check flattened object
+
         const ptable =
           entry.ptable ??
           Object.fromEntries(
@@ -79,93 +57,81 @@ export default function PTable({
 
         map[key] = ptable;
       });
+
       setCachedPTable(map);
     };
 
     loadCache();
   }, []);
 
-  // Update elements when providerUrl changes
-  useEffect(() => {
-    if (!providerUrl || !cachedPTable) return;
+  // ----------------------------
+  // convert selected symbols → atomic state
+  // ----------------------------
+  const selectionState = useMemo(() => {
+    const atomic = {};
+    for (const [sym, value] of Object.entries(selected)) {
+      const idx = symbols.indexOf(sym);
+      if (idx > 0) atomic[idx] = value;
+    }
+    return atomic;
+  }, [selected]);
+
+  // ----------------------------
+  // handle updates from web component
+  // ----------------------------
+  const handleChange = (atomicState) => {
+    const mapped = {};
+
+    for (const [atomic, value] of Object.entries(atomicState)) {
+      const sym = symbols[Number(atomic)];
+      if (!sym) continue;
+      mapped[sym] = value;
+    }
+
+    onSelectionChange?.(mapped);
+  };
 
-    const ptable = cachedPTable[providerUrl];
+  // ----------------------------
+  // noHighlight from cache (IMPORTANT FIX)
+  // ----------------------------
+  const noHighlightArray = useMemo(() => {
+    if (!providerUrl || !cachedPTable) return [];
 
-    const updatedElements = allElements.map((el) => {
-      // Case 1: provider not in cache everything full color
-      if (!ptable) return { ...el, present: true };
+    const ptable = cachedPTable[providerUrl];
+    if (!ptable) return [];
 
-      // Case 2: element in cache use cached value
-      if (el.sym in ptable) return { ...el, present: ptable[el.sym] };
+    const out = [];
 
-      // Case 3: element missing in provider full color
-      return { ...el, present: true };
-    });
+    for (let i = 1; i < symbols.length; i++) {
+      const sym = symbols[i];
+      if (ptable[sym] === false) out.push(i);
+    }
 
-    setElements(updatedElements);
+    return out;
   }, [providerUrl, cachedPTable]);
 
-  const toggle = (sym) => {
-    if (!onSelectionChange) return;
-    const newState = ((selected[sym] ?? 0) + 1) % 3;
-    onSelectionChange({ [sym]: newState });
-  };
-
-  const getColorClass = (el) => {
-    const state = selected[el.sym] ?? 0;
-    const baseColor = colors[el.group] ?? colors.default;
-
-    if (state === 1) return selectedClassName;
-    if (state === 2) return deselectedClassName;
-
-    // Only grey out elements explicitly marked as absent (false)
-    const opacityClass = el.present === false ? "opacity-30" : "";
-
-    return `${baseColor} ${defaultBorderClassName} ${opacityClass}`;
-  };
+  const noInteractArray = [];
 
+  // ----------------------------
+  // render
+  // ----------------------------
   return (
-    <div className="w-full max-w-full mx-auto px-0 md:px-2">
-      <div className="@container">
-        <div className="flex justify-end pb-2 pr-1.5">
-          <HelpIcon
-            popover={`All OPTIMADE provider databases have been prefiltered, with unavailable structures greyed out. Last updated: ${lastModified}.`}
-            placement="left"
-            color="rgb(40,40,40)"
-          />
-        </div>
-        <div
-          className="grid @gap-0.5 @sm:gap-1 w-full"
-          style={{ gridTemplateColumns: "repeat(18, minmax(0, 1fr))" }}
-        >
-          {elements.map((el) => (
-            <div
-              key={el.sym}
-              style={{ gridColumn: el.col, gridRow: el.row }}
-              className="relative w-full"
-            >
-              <div className="w-full aspect-square">
-                <button
-                  onClick={() => toggle(el.sym)}
-                  className={`flex flex-col justify-center items-center w-full h-full rounded-sm ${hoverClassName} ${getColorClass(
-                    el,
-                  )}`}
-                >
-                  <span className="text-[0px] opacity-0 @sm:text-[0.3rem] @sm:opacity-100 @md:text-[0.5rem] @lg:text-[0.7rem] text-gray-700 leading-tight">
-                    {el.num}
-                  </span>
-                  <span
-                    className="text-[0.55rem] font-medium leading-none"
-                    style={{ fontSize: "clamp(0.55rem, 2.5vw, 1.25rem)" }}
-                  >
-                    {el.sym}
-                  </span>
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
+    <div className="@container">
+      <div className="flex justify-end pb-2 pr-2.5">
+        <HelpIcon
+          popover={`All OPTIMADE provider databases have been prefiltered. Last updated: ${lastModified}.`}
+          placement="left"
+          color="rgb(40,40,40)"
+        />
       </div>
+
+      <PTableWrapper
+        noInteractArray={noInteractArray}
+        noHighlightArray={noHighlightArray}
+        selected={selectionState}
+        onChange={handleChange}
+        zoomLevel={1050}
+      />
     </div>
   );
 }

src/components/OptimadeClient/OptimadeFilters/OptimadePTable/elements.js

@@ -21,7 +21,7 @@ export default function OptimadeFilters({ queryUrl, initialFilter, onSubmit }) {
     [1, 1000],
     selectedElements,
     numAtomsRange,
-    numSitesRange
+    numSitesRange,
   );
 
   const filterString = manualMode ? manualQuery : generatedQuery;

src/components/OptimadeClient/OptimadeFilters/OptimadePTable/index.jsx

@@ -51,7 +51,7 @@ export function OptimadeClient({ hideProviderList }) {
   const [selectedResult, setSelectedResult] = useState(null);
 
   return (
-    <div className="min-h-screen max-w-5xl mx-auto bg-white mb-4 shadow-md rounded-xs">
+    <div className="min-h-screen max-w-6xl mx-auto bg-white mb-4 shadow-md rounded-xs">
       <div className="flex flex-col items-center w-full px-2 md:px-4 py-2">
         <OptimadeHeader />
         <div className="p-2 w-full">
@@ -68,7 +68,6 @@ export function OptimadeClient({ hideProviderList }) {
             dbParam={dbParam}
             updateUrlParams={updateUrlParams}
           />
-
           <ResultViewer selectedResult={selectedResult} />
         </div>
       </div>