[WIP] Improving formatting of valid chemical formulae

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");
   // });
 });

webapp/src/components/ChemicalFormula.vue

@@ -1,12 +1,5 @@
 <template>
-  <span>
-    {{ chemFormulaFormat }}
-    <!--
-    <span v-for="(match, index) in chemFormulaFormat" :key="index">
-      {{ match[1] }}<sub v-if="match[2]">{{ match[2] }}</sub>
-    </span>
-    -->
-  </span>
+  <span v-html="chemFormulaFormat"></span>
 </template>
 
 <script>
@@ -19,13 +12,42 @@ 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;
+      }
+      // 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.matchAll(chemicalFormulaRegexFull)) {
+        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;
-      //if (!this.formula) {
-      //  return " ";
-      //}
-      //const re = /([A-Z][a-z]?)(\d+\.?\d*)?/g;
-      //var all_matches = [...this.formula.matchAll(re)];
-      //return all_matches;
     },
   },
 };