Boxes output in web frontend

src/boxes.ts

@@ -4,21 +4,21 @@ import { inTone } from './tokenize';
 import { Branch, Tree, isQuestion } from './tree';
 import { Tone } from './types';
 
-interface PostField {
+export interface PostField {
 	earlyAdjuncts: string[];
 	arguments: string[];
 	lateAdjuncts: string[];
 }
 
-interface BoxClause {
+export interface BoxClause {
 	/// If empty, means covert "ꝡa"
 	complementizer: string;
 	topic?: string;
 	verbalComplex: string;
 	postField: PostField;
 }
 
-interface BoxSentence {
+export interface BoxSentence {
 	clause: BoxClause;
 	/// If empty, means covert "da"
 	speechAct: string;

src/web/App.tsx

@@ -10,9 +10,11 @@ import { Glosser } from '../gloss';
 import { compact } from '../compact';
 import { useDarkMode } from 'usehooks-ts';
 import { textual_tree_from_json } from '../textual-tree';
+import { boxify } from '../boxes';
+import { Boxes } from './Boxes';
 
 type TreeMode = 'syntax-tree' | 'compact-tree' | 'semantics-tree' | 'raw-tree';
-type Mode = TreeMode | 'gloss' | 'technical-gloss' | 'english';
+type Mode = 'boxes' | TreeMode | 'gloss' | 'technical-gloss' | 'english';
 type TreeFormat = 'png' | 'textual' | 'json';
 
 function errorString(e: any): string {
@@ -42,6 +44,15 @@ export function App() {
 		[darkMode.isDarkMode, treeFormat],
 	);
 
+	function getBoxes(): ReactElement {
+		const trees = parse(inputText);
+		if (trees.length === 0) return <span>No parse</span>;
+		if (trees.length > 1) return <span>Ambiguous parse</span>;
+		const tree = trees[0];
+		const boxSentence = boxify(tree);
+		return <Boxes sentence={boxSentence} />;
+	}
+
 	function getEnglish(): ReactElement {
 		return <>{toEnglish(inputText)}</>;
 	}
@@ -87,6 +98,8 @@ export function App() {
 
 	function getOutput(mode: Mode): ReactElement {
 		switch (mode) {
+			case 'boxes':
+				return getBoxes();
 			case 'syntax-tree':
 			case 'compact-tree':
 			case 'semantics-tree':
@@ -140,6 +153,7 @@ export function App() {
 					</button>
 					<button onClick={() => generate('raw-tree')}>Raw tree</button>
 					<br />
+					<button onClick={() => generate('boxes')}>Boxes</button>
 					<button onClick={() => generate('gloss')}>Gloss</button>
 					<button onClick={() => generate('technical-gloss')}>
 						Technical gloss

src/web/Boxes.css

@@ -0,0 +1,26 @@
+.boxes-box {
+	display: flex;
+	flex-direction: column;
+	margin: 2px 2px 0px 2px;
+}
+
+.boxes-children {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	margin: 2px 2px 0px 2px;
+}
+
+.boxes-label {
+	font-size: 10px;
+	margin: 2px 4px;
+}
+
+.boxes-toaq {
+	flex: 1;
+	display: flex;
+	font-weight: bold;
+	justify-content: center;
+	align-items: end;
+	margin: 2px 4px 8px 4px;
+}

src/web/Boxes.tsx

@@ -0,0 +1,83 @@
+import { ReactElement, useState, useEffect, ReactNode } from 'react';
+import { BoxClause, BoxSentence, PostField } from '../boxes';
+import './Boxes.css';
+
+interface BoxProps {
+	color: string;
+	label: string;
+	children: ReactNode;
+}
+
+function Box(props: BoxProps) {
+	const { color, label, children } = props;
+	return (
+		<div
+			className="boxes-box"
+			style={{
+				// border: `2px solid ${color}`,
+				background: `color-mix(in srgb, ${color}, white 80%)`,
+			}}
+		>
+			<div className="boxes-label">{label}</div>
+			<div className="boxes-children">{children}</div>
+		</div>
+	);
+}
+
+function PostFieldBox(props: { postField: PostField }) {
+	const { earlyAdjuncts, arguments: args, lateAdjuncts } = props.postField;
+	if (earlyAdjuncts.length + args.length + lateAdjuncts.length === 0) {
+		return undefined;
+	}
+	return (
+		<Box color="#ffcc00" label="Post-field">
+			{earlyAdjuncts.map((a, i) => (
+				<Box key={i} color="purple" label="Adjunct">
+					<div className="boxes-toaq">{a}</div>
+				</Box>
+			))}
+			{args.map((a, i) => (
+				<Box key={i} color="teal" label="Argument">
+					<div className="boxes-toaq">{a}</div>
+				</Box>
+			))}
+			{lateAdjuncts.map((a, i) => (
+				<Box key={i} color="purple" label="Adjunct">
+					<div className="boxes-toaq">{a}</div>
+				</Box>
+			))}
+		</Box>
+	);
+}
+
+function ClauseBox(props: { clause: BoxClause }) {
+	const { complementizer, topic, verbalComplex, postField } = props.clause;
+	return (
+		<Box color="red" label="Clause">
+			<Box color="orange" label="Comp.">
+				<div className="boxes-toaq">{complementizer}</div>
+			</Box>
+			{topic && (
+				<Box color="aqua" label="Topic">
+					<div className="boxes-toaq">{topic}</div>
+				</Box>
+			)}
+			<Box color="green" label="Verbal complex">
+				<div className="boxes-toaq">{verbalComplex}</div>
+			</Box>
+			<PostFieldBox postField={postField} />
+		</Box>
+	);
+}
+
+export function Boxes(props: { sentence: BoxSentence }) {
+	const { clause, speechAct } = props.sentence;
+	return (
+		<Box color="blue" label="Sentence">
+			<ClauseBox clause={clause} />
+			<Box color="gray" label="Speech act">
+				<div className="boxes-toaq">{speechAct}</div>
+			</Box>
+		</Box>
+	);
+}