davidpomerenke / elm-problem-solving / Problem.Search.Visual

Search progress

scatter : Maybe (TooltipModel msg a) -> Problem.Search.Model a -> Svg msg

Scatterplot. - X-Axis: Search depth - Y-Axis: Heuristic - Size of dot: Number of explored search states

When the search is finished, also displays the path from the root to the goal state.

Search tree

These two visualizations present the search graph in the form of a tree or a tree map. These visualizations neglects that the search graph is actually not a tree but a graph. They are very neat and compact.

tree : Maybe (TooltipModel msg a) -> Problem.Search.Model a -> Svg msg

Tree of the searched states. Similar to treeMap but simpler layout.

treeMap : Maybe (TooltipModel msg a) -> Problem.Search.Model a -> Svg msg

Treemap of the searched states. Similar to tree but more compact.

Search graph

This visualizes the graph as it is: A network graph.


type alias GraphModel a =
Graph.Model a

A good graph visualization is computationally a bit more complicated, and therefore this visualization has its own data model that needs to be updated and queried. We need to embed it as a kind of sub-model into our application.

Tooltip

A tooltip is an info box displayed when hovering over an element with the mouse. It shows a visualization of the search state, and some basic information about its position in the search tree.


type alias TooltipModel msg a =
Tooltip.Model msg a

tooltip : { init : Problem a -> (Maybe (Problem.Search.Node a) -> msg) -> Maybe (a -> Html msg) -> TooltipModel msg a, view : TooltipModel msg a -> Html msg, sub : ({ x : Basics.Float, y : Basics.Float } -> msg) -> Platform.Sub.Sub msg }