The faze gallery has been improved to give a better understanding of what the visualisation is representing. The change adds structure, tagging and a breakdown of the settings used to construct the image.

This work is part of the repository’s gallery info milestone.

A New Structure

Initial gallery structure

Initially, the gallery was simply organised into high-level albums which represented the underling game. This has been reworked to split the albums further into pipeline and variation albums.

Gallery structure

Images are still shown for each album, but the new structure allowed for created sub-albums to group the pipeline and variations. It was also possible to change the styling/content depending on if the album was at game, pipeline or variation level.

Gallery Image Info

Breakdown

In the following section I break down what a pipeline and variation is, in the context of the gallery. How they are formed and how they are used.

Pipeline

A pipeline represents all of the steps taken to create the visualisation and can expose its own configuration settings to allow for variations.

Take a look at the example pipeline below or view the code on GitHub.

ReversePipelineBuilder.Create()
    .GalleryImage(galleryService, galleryMetadata)
    .Render(new SquareTreeRenderer(config.GetRendererOptions()))
    .Paint(new PiecesBoardPainter())
    .GameTree(new SquareTreeAdapter(config.TreeSize))
    .Build(() => state);

Pipelines can also reference a DataId, if collecting the data takes a while. E.g. for collecting statistical information from simulating millions of games.

An example of a pipeline using a DataId is below (GitHub)

ReversePipelineBuilder.Create()
    .GalleryImage(galleryService, galleryMetaData)
    .Render(new SquareTreeRenderer(config.GetRendererOptions()))
    .Paint(new EightQueensProblemPainter(config.GetPainterConfig()))
    .Map(new CommutativePathTreeMerger())
    .LoadTree(DataId, treeDataProvider);

… and the pipeline with corresponding DataId (GitHub)

ReversePipelineBuilder.Create()
    .SaveTree(dataId, treeDataProvider)
    .Map(new EightQueensProblemSolutionTreeMapper(MaxEvaluationDepth))
    .GameTree(new SquareTreeAdapter(BoardSize))
    .Build(() => new PiecesBoardState(new PiecesBoardStateConfig(BoardSize, new QueenPiece(), onlySafeMoves: true)));

Currently, there is no link to a data pipeline from the gallery, but there will be in the future.

Variations

A variation represents (generally) a specific configuration of a pipeline. However, the same variation may produce several images which have different configurations. This is most common for configurations supporting a depth setting, where an image is produced at each depth but the other settings remain the same.

Depending on the level of configuration a pipeline exposes, two variations may differ by superficial styling changes like border proportion or represent completely different information.

The following bit of code illustrates how a variation is created. In this case, only the depth changes. See code on GitHub.

new GalleryItemMetadata<EightQueensProblemImagePipelineConfig>
{
    FileId = $"8 Queens Problem Solutions depth {depth}.png",
    Album = Albums.EightQueensProblem,
    PipelineId = EightQueensProblemImagePipeline.Id,
    Variation = "Var 1",
    Depth = depth,
    Config = new EightQueensProblemImagePipelineConfig
    {
        TreeSize = 8,
        ImageSize = 600,
        MaxDepth = depth,
        BlackUnavailableMoves = true,
        BlackParentMoves = true
    }
};

By clicking an image’s information button you are able to see a breakdown of the pipeline settings that was used to create it. The config section of the image information of created from the GalleryItemMetadata.Config property.

Gallery Image Info

Future plans

The faze gallery is intended to be a way of quickly browsing the visualisations, to document what is going on and serve as a reproducible example. Progress has been made against the first and last targets so the next focus will be improving the explanation.

Some ideas so far: