equation showing in component

Author: Jon Walls

package.json

@@ -30,6 +30,7 @@
     "@mui/material": "^5.4.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-mathjax": "^1.0.1",
     "react-stepper-horizontal": "^1.0.11",
     "styled-components": "^5.3.3"
   }

src/ExampleComponent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import MathJax from 'react-mathjax'
 
 import { Box, Button, Divider, TextField, Typography } from '@mui/material'
 
@@ -13,6 +14,11 @@ import { Box, Button, Divider, TextField, Typography } from '@mui/material'
   }
 */
 
+const tex = {
+  quadratic_solution: 'x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}',
+  tex_example: `f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} \\,d\\xi`,
+}
+
 const ExampleComponent = ({ triggerQuery, model, modelUpdate }) => {
   const handleChange = (e) => {
     modelUpdate({
@@ -21,34 +27,14 @@ const ExampleComponent = ({ triggerQuery, model, modelUpdate }) => {
   }
   return(
     <>
-          <Box sx={{ m: 1 }}>
-            <Typography variant='h2'>{model.greeting}{model.username}</Typography>
-            <Typography variant='h4'>{model.message}</Typography>
-            <Button variant="outlined"
-              onClick={()=>triggerQuery(model.runQuery)}
-            >Get a user name</Button>
-          </Box>
-
-          <Box sx={{ m: 1 }}>
-            <Typography variant='body1'>Want to trigger a query?</Typography>
-            <Button variant="outlined"
-              onClick={()=>triggerQuery(model.yesQuery)}
-            >
-              👍
-            </Button>
-            <Button variant="outlined"
-              onClick={()=>triggerQuery(model.noQuery)}
-            >
-              👎
-            </Button>
-          </Box>
-
-          <Divider />
-
-          <Box sx={{ m: 1 }}>
-            <TextField id="outlined-uncontrolled" label="Change Greeting" onChange={handleChange} />
-          </Box>
-      </>
+      <Box sx={{ m: 1 }} id="retool-custom-mathjax-container">
+        <Typography variant="body1">{model.text}</Typography>
+          <MathJax.Provider>
+          <MathJax.Node formula={model.equation} id="retool-custom-mathjax-equation"/>
+        </MathJax.Provider>
+        <Typography variant="body1">{model.question}</Typography>
+      </Box>
+    </>
   );
 }
 export default ExampleComponent;

yarn.lock

@@ -2827,6 +2827,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
@@ -3422,6 +3427,13 @@ react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-mathjax@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-mathjax/-/react-mathjax-1.0.1.tgz#a8c282e75d277a201632dfd07edf41edda372b4b"
+  integrity sha512-+mjFcciZY3GQoqiQm3aRTyDjgBKuoaXpY+SCONX00jScuPpTKwnASeFMS5+pbTIzDf5zPT2Y9ZZfQ9U/d4CKtQ==
+  dependencies:
+    load-script "^1.0.0"
+
 react-stepper-horizontal@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/react-stepper-horizontal/-/react-stepper-horizontal-1.0.11.tgz#ac10549c2ccb2d39ce820bdfe4bfeac113c90813"