1 // Copyright 2020 Blue Static <https://www.bluestatic.org>
2 // This program is free software licensed under the GNU General Public License,
3 // version 3.0. The full text of the license can be found in LICENSE.txt.
4 // SPDX-License-Identifier: GPL-3.0-only
6 import { createDependentEffect, createMemo, createState } from 'solid-js';
7 import { For, Show } from 'solid-js/dom';
8 import { TaxReturn, Form, Line } from 'ustaxlib/core';
9 import { Edge, getLastTraceList } from 'ustaxlib/core/Trace';
10 import { graphviz } from 'd3-graphviz';
12 const S = require('./FormView.css');
19 export default function FormView(props: FormProps) {
20 const lines = createMemo(() => {
21 const keys = Object.keys(props.form.lines);
22 keys.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
23 return keys.map(k => props.form.lines[k]);
28 <h2 class={S.formName}>Form {props.form.name}</h2>
32 {line => <LineView tr={props.tr} line={line} />}
44 function LineView(props: LineProps) {
45 const { tr, line } = props;
46 const value = createMemo(() => {
48 return JSON.stringify(line.value(tr), null, 1);
50 return <span class={S.error} title={e.stack}>{e.message}</span>;
54 const [ state, setState ] = createState({
55 trace: [] as readonly Edge[],
59 createDependentEffect(() => setState('trace', getLastTraceList()), [value]);
61 const toggleTrace = () => setState('showTrace', !state.showTrace);
66 <div class={S.id} onclick={toggleTrace}>{line.id}</div>
67 <div class={S.description}>
71 <div class={S.value}>{value()}</div>
73 <Show when={state.showTrace}>
74 <TraceViewer line={line} trace={state.trace} onClose={() => setState('showTrace', false)} />
80 interface TraceProps {
82 trace: readonly Edge[];
87 function TraceViewer(props: TraceProps) {
88 const renderGraph = (ref) => {
90 for (const edge of props.trace) {
91 graph += `"${edge[1]}" -> "${edge[0]}"; `;
94 .zoomScaleExtent([0.1, 1])
95 .renderDot(`digraph { ${graph} }`, () => {
96 if (ref.querySelector('svg').clientWidth > ref.parentNode.clientWidth) {
97 ref.parentNode.classList.add(S.large);
102 <div class={S.traceViewer}>
103 <h2>Trace {props.line.id} <button class={S.close} onclick={props.onClose}>\u24E7</button></h2>
104 <div forwardRef={renderGraph}></div>