draw-derivation-trees's Introduction

Drawing derivation trees

Installation

Include the script draw-derivation-trees.js in your web page, after the core.js script.

<script type="text/javascript" src="tau-prolog/core.js"></script>
<script type="text/javascript" src="tau-prolog/draw-derivation-trees.js"></script>

Usage

This tool adds a new method draw(max_answers, canvas, styles) to the pl.type.Session and pl.type.Thread prototypes. This method must be called after querying a goal (with the method query( goal )).

max_answers: maximum number of answers to find in the derivation (to avoid infinite trees).
canvas: identifier of the canvas HTML object, or canvas object.
styles (optional): JavaScript object with style properties. The default styles are shown below.

{
  "font-size": 14,
  "font-family": "Monospace, Courier New",
  "border-width": 2,
  "border-color": "#43207a",
  "padding": 5,
  "margin-x": 10,
  "margin-y": 20,
  order: {
    "radius": 15,
    "background-color": "#43207a",
    "border-width": 4,
    "border-color": "#43207a",
    "font-color": "#ffffff"
  },
  state: {
    "background-color": "#e0ccfd",
    "border-width": 4,
    "border-color": "#43207a",
    "font-color": "#43207a"
  },
  answer: {
    "background-color": "#a7e3a7",
    "border-width": 4,
    "border-color": "#0b6a0d",
    "font-color": "#0b6a0d"
  },
  error: {
    "background-color": "#ecc2c2",
    "border-width": 4,
    "border-color": "#881717",
    "font-color": "#881717"
  }
}

Example

<html>
  <head>
    <script type="text/javascript" src="tau-prolog/core.js"></script>
    <script type="text/javascript" src="tau-prolog/utils/draw-derivation-trees.js"></script>
    <script id="program.pl" type="text/prolog">
        powerset([], []).
        powerset([_|T], P) :- powerset(T, P).
        powerset([H|T], [H|P]) :- powerset(T, P).
    </script>
  </head>
  <body>
    <canvas id="derivation"></canvas>
    <script type="text/javascript">
        var session = pl.create();
        session.consult( "program.pl" );
        session.query( "powerset([1,2,3], X)." );
        session.draw( 10, "derivation" );
    </script>
  </body>
</html>

draw-derivation-trees's People

Contributors

Stargazers

Watchers

draw-derivation-trees's Issues

Derivation tree: What happens to subgoals, like in findall/3?

Just noticed new derivation tree feature. What happens to subgoals, like the
goal argument in findall/3. It disappears, but may naive expectation is to see it:

Feature request: Less clutter in derivation trees.

I wanted to use your derivation trees as an educational tool here https://stackoverflow.com/a/53229580/502187. I have some wishes to reduce clutter, based on experience with clutter less Byrd box debugger:

I don't understand the ('=')/2 goals that are shown in the derivation. The source code does not contain these ('=')/2. I guess they are "synthetic". Can they be supressed? Are they result of (is)/2?
I don't understand why conjunctions are shown. Isn't the tree an AND/OR tree? Which would only have primitive goals as nodes? As the example shows, conjunctions tails are replicated down the tree, and don't give a lot of informations.

Recommend Projects