Finish Katex and Statement components to render statements

src/components/Katex.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {HTMLString} from '../types'
+import {computed} from 'vue'
+import {MathStatement} from '../support/parse'
+
+const props = defineProps<{
+  statement: MathStatement,
+  size?: 'big' | 'small',
+}>()
+
+let displayHtml: HTMLString = props.statement.toHTMLString()
+computed(() => displayHtml = props.statement.toHTMLString())
+</script>
+
+<style>
+  .big {
+    transform: scale(1.3);
+  }
+
+  .small {
+    transform: scale(0.9);
+  }
+</style>
+
+<template>
+  <div class="big" v-if="props?.size === 'big'" v-html="displayHtml"></div>
+  <div class="small" v-else-if="props?.size === 'small'" v-html="displayHtml"></div>
+  <div v-else v-html="displayHtml"></div>
+</template>

src/components/Scratch.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
+  import {MathPage} from '../support/page'
+  import {v4 as uuidv4} from 'uuid'
+  import Statement from './Statement.vue'
 
+  const page = new MathPage(uuidv4())
+  const stmt1Id = page.addRaw('x = y+3/4')
+  const stmt2Id = page.addRaw('y = 9')
+  const evaluation = page.evaluate()
+  console.log({page, stmt1Id})
 </script>
 
 <template>
   <p>Scratch page for testing!</p>
+  <Statement :statement="page.getStatement(stmt1Id)" :evaluation="evaluation"/>
 </template>

src/components/Statement.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {EvaluationResult, Maybe} from '../types'
+import {MathStatement} from '../support/parse'
+import {computed} from 'vue'
+import Katex from './Katex.vue'
+
+const props = defineProps<{
+  statement: MathStatement,
+  evaluation: EvaluationResult,
+}>()
+
+const getValueStatement = (): Maybe<MathStatement> => {
+  const value = props.evaluation.statements[props.statement.id]
+  if ( value ) {
+    return MathStatement.temp(String(value))
+  }
+}
+
+let value = getValueStatement()
+computed(() => value = getValueStatement())
+</script>
+
+<style>
+  .math-statement {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    padding: 10px;
+  }
+</style>
+
+<template>
+  <div class="math-statement">
+    <Katex :statement="statement" size="big"/>
+    <div class="result" v-if="value">
+      <hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
+      <Katex :statement="value" size="small" style="color: #666"/>
+    </div>
+  </div>
+</template>

src/support/page.ts

@@ -2,7 +2,7 @@ import {MathStatement} from './parse'
 import * as math from 'mathjs'
 import {DepGraph} from 'dependency-graph'
 import { v4 as uuidv4 } from 'uuid'
-import {EvaluationResult, StatementID, VariableName} from '../types'
+import {EvaluationResult, Maybe, StatementID, VariableName} from '../types'
 
 /**
  * Wrapper for a page containing multiple interrelated mathematical statements.
@@ -16,6 +16,11 @@ export class MathPage {
         public readonly id: string,
     ) {}
 
+    /** Get a statement by ID if it exists. */
+    getStatement(id: StatementID): Maybe<MathStatement> {
+        return this.statements[id]
+    }
+
     /** Add a statement to this page. */
     addStatement(statement: MathStatement): this {
         this.statements[statement.id] = statement
@@ -23,8 +28,10 @@ export class MathPage {
     }
 
     /** Parse the math expression and add it to the page as a statement. */
-    addRaw(statement: string): this {
-        return this.addStatement(new MathStatement(uuidv4() as StatementID, statement))
+    addRaw(statement: string): StatementID {
+        const stmt = new MathStatement(uuidv4() as StatementID, statement)
+        this.addStatement(stmt)
+        return stmt.id
     }
 
     /** Get all symbols referenced by statements on this page. */

src/support/parse.ts

@@ -1,6 +1,7 @@
 import * as math from 'mathjs'
 import katex from 'katex'
 import {HTMLString, LaTeXString, StatementID} from '../types'
+import {v4 as uuidv4} from 'uuid'
 
 /** Base class for walks over MathNode trees. */
 export abstract class MathNodeWalk<TReturn> {
@@ -258,6 +259,10 @@ export class LValSymbolWalk extends SymbolWalk {
 
 /** A single mathematical statement. */
 export class MathStatement {
+    static temp(raw: string): MathStatement {
+        return new MathStatement(uuidv4() as StatementID, raw)
+    }
+
     constructor(
         /** Unique ID of this statement. */
         public readonly id: StatementID,

src/types.ts

@@ -85,7 +85,7 @@ export type LaTeXString = TypeTag<'@app.LaTeXString'> & string
 export type HTMLString = TypeTag<'@app.HTMLString'> & string
 export type StatementID = TypeTag<'@app.StatementID'> & string
 export type VariableName = TypeTag<'@app.VariableName'> & string
-export type RoutePath = TypeTag<'@app.RoutePath'> & string
+export type EvaluatedValue = TypeTag<'@app.EvaluatedValue'> & string
 
 export interface EvaluationResult {
     variables: Record<VariableName, any>