App.svelte

<script lang="ts">
    import type { ConjunctiveClause } from './models';
    import {getGraphCodeForNodeTree} from './dpll-grapher'
    import {parse, SyntaxError} from './knf-parser';
    import { runAlgo } from './dpll-algo';
    import mermaid from "mermaid";

    mermaid.mermaidAPI.initialize({
      startOnLoad: false,
    });
    function tryParse(textToParse: string): ConjunctiveClause {
        try {
            return parse(input);
        } catch (ex) {
            console.warn(ex);
            return []
        }
    }

    let input = '{{X1∨X2∨X3}∧{¬X1∨X2∨¬X4}∧{¬X2}∧{¬X1∨X3}∧{¬X1∨¬X3∨X4}∧{X1∨¬X3}}';
    $: parsed = tryParse(input);
    $: algoResult = parsed.length > 0 ? runAlgo(parsed) : null;
    $: mermaidCode = algoResult !== null ? getGraphCodeForNodeTree(algoResult, parsed) : '';
    $: graphSvg = mermaidCode !== '' ?mermaid.mermaidAPI.render("graphDiv", mermaidCode): '';
</script>

<main>
    Enter your text here:
    <textarea bind:value={input} style="width: 100%;"/>
    <br>
    <details>
        <summary>AST</summary>
        <pre>{JSON.stringify(parsed, null, 2)}</pre>
    </details>
    <details>
        <summary>Result JSON</summary>
        <pre>{JSON.stringify(algoResult, null, 2)}</pre>
    </details>
    <br>
    <svg>{@html graphSvg}</svg>
</main>

<a href="https://gitlab.fachschaften.org/jfowl/swk-dpll">SourceCode</a>

<style>
  svg {
    padding: 0.5%;
    min-height: 50rem;
    min-width: 99%;
    border: 2px solid;
  }
</style>