From f04c587899d64c05cef3b88f647ee322fae0341a Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Sun, 13 Apr 2025 10:20:33 +0100
Subject: [PATCH 1/3] Add some notes to chemical formula component

---
 webapp/src/components/ChemicalFormula.vue | 33 +++++++++++++++--------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/ChemicalFormula.vue b/webapp/src/components/ChemicalFormula.vue
index 2760657fc..255db8d05 100644
--- a/webapp/src/components/ChemicalFormula.vue
+++ b/webapp/src/components/ChemicalFormula.vue
@@ -1,11 +1,6 @@
 <template>
   <span>
     {{ chemFormulaFormat }}
-    <!--
-    <span v-for="(match, index) in chemFormulaFormat" :key="index">
-      {{ match[1] }}<sub v-if="match[2]">{{ match[2] }}</sub>
-    </span>
-    -->
   </span>
 </template>
 
@@ -19,13 +14,29 @@ export default {
   },
   computed: {
     chemFormulaFormat() {
+      // Need to capture several groups, if the overall format doesn't apply, then
+      // there should be no additional formatting whatsoever
+      //
+      // Some rules:
+      //
+      // * numbers between element symbols need to be subscripted, including "." and variables like "x"
+      //    - e.g., Na3P => Na<sub>3</sub>P, Na3+xP => Na<sub>3+x</sub>P
+      // * charges need to be handled separately and superscripted
+      //    - e.g., Na+Cl- => Na<sup>+</sup>Cl<sup>-</sup>
+      // * empirical labels for formula units like [pyr] must be left alone
+      // * dots, when not used within numbers, must be treated as an interpunct "dot product" style dot
+      //     - e.g., Cu2SO4.H2O => Cu<sub>2</sub>SO<sub>4</sub> · H<sub>2</sub>O
+      if (!this.formula) {
+        return this.formula;
+      }
+      // Optimistically subscript all numbers in formula if it matches
+      // regexp for element symbols, brackets and numbers only
+      const chemicalFormulaRegex = /[A-Z][a-z]{0,2}(?:\d*(?:\.\d+)?)?|[([{]|[)]}]/g;
+      if (this.formula.match(chemicalFormulaRegex)) {
+        // Do stuff
+      }
+
       return this.formula;
-      //if (!this.formula) {
-      //  return " ";
-      //}
-      //const re = /([A-Z][a-z]?)(\d+\.?\d*)?/g;
-      //var all_matches = [...this.formula.matchAll(re)];
-      //return all_matches;
     },
   },
 };

From d75ae0d77535135312f2f387c1c4a58b501ec565 Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Sun, 13 Apr 2025 10:36:49 +0100
Subject: [PATCH 2/3] Add a couple more tests, and try to handle the simplest
 formulae at least

---
 .../component/ChemicalFormulaTest.cy.jsx      | 25 +++++++++++++++----
 webapp/src/components/ChemicalFormula.vue     | 21 ++++++++++------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/webapp/cypress/component/ChemicalFormulaTest.cy.jsx b/webapp/cypress/component/ChemicalFormulaTest.cy.jsx
index 409ecc66c..4d4ebb08e 100644
--- a/webapp/cypress/component/ChemicalFormulaTest.cy.jsx
+++ b/webapp/cypress/component/ChemicalFormulaTest.cy.jsx
@@ -11,10 +11,10 @@ describe("ChemFormulaInput", () => {
     cy.get("input").should("have.value", "Na");
   });
 
-  // it("renders single element with subscript correctly", () => {
-  //   cy.get("input").type("Na3");
-  //   cy.get("input").should("have.value", "Na<sub>3</sub>P");
-  // });
+  it("renders single element with subscript correctly", () => {
+    cy.get("input").type("Na3P");
+    cy.get("input").should("have.value", "Na<sub>3</sub>P");
+  });
 
   // it("renders formula with parentheses correctly", () => {
   //   cy.get("input").type("Na3P");
@@ -31,8 +31,23 @@ describe("ChemFormulaInput", () => {
   //   cy.get("input").should("have.value", "Na<sub>3</sub>P<sub>4</sub>");
   // });
 
+  // it("renders formula with multiple elements and subscripts correctly", () => {
+  //   cy.get("input").type("Cu2SO4.H2O");
+  //   cy.get("input").should("have.value", "Cu<sub>2</sub>SO<sub>4</sub>·H<sub>2</sub>O");
+  // });
+
+  // it("handles empirical shorthand units correctly", () => {
+  //   cy.get("input").type("[pyr]");
+  //   cy.get("input").should("have.value", "[pyr]");
+  // });
+
+  // it("handles charges and subscripts", () => {
+  //   cy.get("input").type("[pyr]");
+  //   cy.get("input").should("have.value", "[pyr]");
+  // });
+
   // it("handles invalid input gracefully", () => {
   //   cy.get("input").type("Invalid@Formula");
-  //   cy.get("input").should("have.value", "InFo");
+  //   cy.get("input").should("have.value", "Invalid@Formula");
   // });
 });
diff --git a/webapp/src/components/ChemicalFormula.vue b/webapp/src/components/ChemicalFormula.vue
index 255db8d05..5995a5be5 100644
--- a/webapp/src/components/ChemicalFormula.vue
+++ b/webapp/src/components/ChemicalFormula.vue
@@ -1,7 +1,5 @@
 <template>
-  <span>
-    {{ chemFormulaFormat }}
-  </span>
+  <span v-html="chemFormulaFormat"></span>
 </template>
 
 <script>
@@ -29,11 +27,20 @@ export default {
       if (!this.formula) {
         return this.formula;
       }
-      // Optimistically subscript all numbers in formula if it matches
-      // regexp for element symbols, brackets and numbers only
-      const chemicalFormulaRegex = /[A-Z][a-z]{0,2}(?:\d*(?:\.\d+)?)?|[([{]|[)]}]/g;
+      // For now, just regexp for simple formulas and subscript the numbers in them
+      const chemicalFormulaRegex = /([A-Z][a-z]{0,2})|([0-9.]+)/g;
+
       if (this.formula.match(chemicalFormulaRegex)) {
-        // Do stuff
+        return this.formula.replace(chemicalFormulaRegex, (match, element, number) => {
+          if (element) {
+            // If it's an element, return it unchanged
+            return element;
+          } else if (number) {
+            // If it's a number or period, wrap in subscript tags
+            return `<sub>${number}</sub>`;
+          }
+          return match;
+        });
       }
 
       return this.formula;

From b386ed46e624a5d7e3582628c262114b72ccd319 Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Sun, 13 Apr 2025 10:48:57 +0100
Subject: [PATCH 3/3] Use exhaustive element list for regexp matching

---
 webapp/src/components/ChemicalFormula.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/ChemicalFormula.vue b/webapp/src/components/ChemicalFormula.vue
index 5995a5be5..c72a04428 100644
--- a/webapp/src/components/ChemicalFormula.vue
+++ b/webapp/src/components/ChemicalFormula.vue
@@ -27,10 +27,14 @@ export default {
       if (!this.formula) {
         return this.formula;
       }
-      // For now, just regexp for simple formulas and subscript the numbers in them
-      const chemicalFormulaRegex = /([A-Z][a-z]{0,2})|([0-9.]+)/g;
+      // From an LLM, needs checking...
+      const elementSymbols =
+        "H|He|Li|Be|B|C|N|O|F|Ne|Na|Mg|Al|Si|P|S|Cl|Ar|K|Ca|Sc|Ti|V|Cr|Mn|Fe|Co|Ni|Cu|Zn|Ga|Ge|As|Se|Br|Kr|Rb|Sr|Y|Zr|Nb|Mo|Tc|Ru|Rh|Pd|Ag|Cd|In|Sn|Sb|Te|I|Xe|Cs|Ba|La|Ce|Pr|Nd|Pm|Sm|Eu|Gd|Tb|Dy|Ho|Er|Tm|Yb|Lu|Hf|Ta|W|Re|Os|Ir|Pt|Au|Hg|Tl|Pb|Bi|Po|At|Rn|Fr|Ra|Ac|Th|Pa|U|Np|Pu|Am|Cm|Bk|Cf|Es|Fm|Md|No|Lr|Rf|Db|Sg|Bh|Hs|Mt|Ds|Rg|Cn|Nh|Fl|Mc|Lv|Ts|Og";
+      // Create a regex that matches either element symbols or sequences of digits/periods
+      const chemicalFormulaRegexFull = new RegExp(`^(${elementSymbols})|(\\d+\\.?\\d*)+$`, "g");
+      const chemicalFormulaRegex = new RegExp(`(${elementSymbols})|(\\d+\\.?\\d*)`, "g");
 
-      if (this.formula.match(chemicalFormulaRegex)) {
+      if (this.formula.matchAll(chemicalFormulaRegexFull)) {
         return this.formula.replace(chemicalFormulaRegex, (match, element, number) => {
           if (element) {
             // If it's an element, return it unchanged