Add options for available symbols and coefficient scaling to Chemistry

src/components/semantic/presenters/questionPresenters.tsx

@@ -411,7 +411,7 @@ const EditableAvailableSymbols = ({doc, update}: PresenterProps<IsaacSymbolicQue
 };
 const EditableFormulaSeed = EditableDocPropFor<IsaacSymbolicQuestion>("formulaSeed", {format: "latex", label: "Formula seed", placeHolder: "Enter initial state here"});
 
-const availableMetaSymbols = [
+const availableMetaSymbols: [string,string][] = [
     ["_trigs", "Trigs"],
     ["_1/trigs", "1/Trigs"],
     ["_inv_trigs", "Inv Trigs"],
@@ -422,11 +422,23 @@ const availableMetaSymbols = [
     ["_no_alphabet", "No Alphabet"]
 ];
 
+const availableChemistryMetaSymbols: [string,string][]  = [
+    ["_state_symbols", "State Symbols"], 
+    ["_plus", "Plus"],
+    ["_minus", "Minus"],
+    ["_fraction", "Fraction"],
+    ["_right_arrow", "Right Arrow"],
+    ["_equilibrium_arrow", "Equilibrium Arrow"],
+    ["_brackets_round", "Round Brackets"],
+    ["_brackets_square", "Square Brackets"],
+    ["_dot", "Dot"]
+];  
+
 function hasSymbol(availableSymbols: string[] | undefined, symbol: string) {
     return availableSymbols?.find(s => s === symbol);
 }
 
-function SymbolicMetaSymbols({doc, update}: PresenterProps<IsaacSymbolicQuestion>) {
+function SymbolicMetaSymbols({doc, update, metaSymbols}: PresenterProps<IsaacSymbolicQuestion> & {metaSymbols: [string, string][]}) {
     function toggle(symbol: string) {
         const availableSymbols = [...doc.availableSymbols ?? []];
         const index = availableSymbols.indexOf(symbol);
@@ -441,7 +453,7 @@ function SymbolicMetaSymbols({doc, update}: PresenterProps<IsaacSymbolicQuestion
     }
 
     return <div className={styles.symbolicMetaButtons}>
-        {availableMetaSymbols.map(([symbol, label]) =>
+        {metaSymbols.map(([symbol, label]) =>
             <Button key={symbol}
                     size="sm"
                     color={hasSymbol(doc.availableSymbols, symbol) ? "primary" : "secondary"}
@@ -452,24 +464,35 @@ function SymbolicMetaSymbols({doc, update}: PresenterProps<IsaacSymbolicQuestion
     </div>;
 }
 
-export function SymbolicQuestionPresenter(props: PresenterProps<IsaacSymbolicQuestion>) {
-    const {doc} = props;
+function SymbolicQuestionPresenterHead(props: PresenterProps<IsaacSymbolicQuestion>) {
     return <>
         <QuestionMetaPresenter {...props} />
         <div className={styles.editableFullwidth}>
             <EditableAvailableSymbols {...props} />
         </div>
-        {doc.type === "isaacSymbolicQuestion" && <SymbolicMetaSymbols {...props} />}
+    </>;
+}
+
+export function SymbolicChemistryQuestionPresenter(props: PresenterProps<IsaacSymbolicChemistryQuestion>) {
+    return <>
+        <CheckboxDocProp {...props} prop="isNuclear" label="Nuclear question" />
+        <CheckboxDocProp {...props} prop="allowPermutations" label="Allow molecule permutations" disabled={props.doc.isNuclear} />
+        <CheckboxDocProp {...props} prop="allowScalingCoefficients" label="Allow coefficient scaling" disabled={props.doc.isNuclear} />
+        <SymbolicQuestionPresenterHead {...props} />
+        {!props.doc.isNuclear && <SymbolicMetaSymbols {...props} metaSymbols={availableChemistryMetaSymbols} />}
         <div className={styles.editableFullwidth}>
             <EditableFormulaSeed {...props}/>
         </div>
     </>;
 }
 
-export function SymbolicChemistryQuestionPresenter(props: PresenterProps<IsaacSymbolicChemistryQuestion>) {
+export function SymbolicQuestionPresenter(props: PresenterProps<IsaacSymbolicQuestion>) {
     return <>
-        <SymbolicQuestionPresenter {...props} />
-        <CheckboxDocProp {...props} prop="isNuclear" label="Nuclear question" />
+        <SymbolicQuestionPresenterHead {...props} />
+        {props.doc.type === "isaacSymbolicQuestion" && <SymbolicMetaSymbols {...props} metaSymbols={availableMetaSymbols} />}
+        <div className={styles.editableFullwidth}>
+            <EditableFormulaSeed {...props}/>
+        </div>
     </>;
 }
 

src/components/semantic/props/CheckboxDocProp.tsx

@@ -1,6 +1,6 @@
 import { Input, Label } from "reactstrap";
 import styles from "../styles/question.module.css";
-import React from "react";
+import React, { useEffect } from "react";
 import { PresenterProps } from "../registry";
 
 type CheckboxDocProps<K extends keyof D, D> =
@@ -9,17 +9,29 @@ type CheckboxDocProps<K extends keyof D, D> =
     prop: K;
     label: string;
     checkedIfUndefined?: boolean;
+    disabled?: boolean;
 };
 
 export function CheckboxDocProp<K extends keyof D, D extends { [Key in K]?: boolean }>({
     doc,
     update,
     prop,
     label,
-    checkedIfUndefined
+    checkedIfUndefined,
+    disabled,
 }: CheckboxDocProps<K, D>) {
-    return <Label className={styles.checkboxLabel}>
+    useEffect(()=> {
+        if (disabled && doc[prop]) {
+            update({
+                ...doc,
+                [prop]: checkedIfUndefined ?? false,
+            });
+        }
+    }, [checkedIfUndefined, disabled, doc, prop, update]);
+
+    return <Label className={styles.checkboxLabel} style={{color: disabled ? "gray" : "black"}}>
         <Input type="checkbox"
+               disabled={disabled}
                checked={doc[prop] ?? checkedIfUndefined ?? false}
                onChange={(e) => {
                    update({

src/isaac-data-types.d.ts

@@ -176,6 +176,8 @@ export interface IsaacInlinePart extends IsaacQuestionBase {
 
 export interface IsaacSymbolicChemistryQuestion extends IsaacSymbolicQuestion {
     isNuclear?: boolean;
+    allowPermutations?: boolean;
+    allowScalingCoefficients?: boolean;
 }
 
 export interface IsaacSymbolicLogicQuestion extends IsaacSymbolicQuestion {