tree-node.component.html

@let hasChildren = node().children.length > 0;
<div
    class="tree-node d-flex flex-column"
    [class.terminal-node]="!hasChildren"
>
    @if (hasChildren) {
    <div class="d-flex">
        @for (childRow of node().children; track $index) {
        <la-tree-node class="w-100" [node]="childRow" [treeType]="treeType()" />
        }
    </div>
    }
    <div
        class="node-content d-flex flex-column align-items-center px-2 py-1 gap-1"
    >
        @switch (node().type) {
            @case ('leaf') {
                <div class="d-flex flex-column align-items-center gap-1">
                    <div class="fw-bold mb-0">
                        <strong>{{ node().leaf?.lem }}</strong>
                    </div>
                    <div class="text-secondary">
                        <small>{{ node().leaf?.tok }}</small>
                        <br />
                        <small>{{ node().leaf?.pos }}</small>
                        <br />
                        <small>{{ node().leaf?.ner }}</small>
                    </div>
                    @if (node().content; as nodeContent) {
                        <div [innerHTML]="nodeContent | subscript" class="text-nowrap"></div>
                    }
                </div>
            } @case ('var') {
                <div class="d-flex flex-column gap-1">
                    <strong class="h5 fw-bold mb-0">
                        {{ node().content }}
                        @if (node().rule) {
                        <span class="badge rounded-pill text-bg-secondary mt-2">
                            {{ node().rule }}
                        </span>
                        }
                    </strong>
                    <br />
                    <span>{{ node().var?.typeInfo }}</span>
                </div>
            } @case ('node') {
                <p class="my-0">
                    @if (node().rule; as nodeRule) {
                    <span class="badge rounded-pill text-bg-secondary me-2">
                        {{ nodeRule }}
                    </span>
                    }
                    @if (node().content; as nodeContent) {
                    <span
                        class="mb-0 text-nowrap"
                        [innerHTML]="nodeContent | selectiveUpperCase: treeType() | subscript"
                    ></span>
                    }
                </p>
            }
        }
    </div>
</div>