rgleichman / glance Goto Github PK

A visual Haskell

Home Page: https://www.youtube.com/channel/UCs2gsWfcy83Yqk873WkPfeg

License: Apache License 2.0

Haskell 100.00%

glance haskell visual-programming-language visual-programming graph-layout diagrams graphviz visual functional-programming gtk

glance's Introduction

Link to project wiki (for mobile viewers)

For updates and coding livestreams check out the Glance YouTube channel.

Also, check out Only1Loatheb's fork which has a different visual style and an interactive mode.

Glance

Glance is a visual syntax for the programming language Haskell. The goal of this project is to increase programmer happiness and productivity by allowing programmers to create and understand programs in new and different ways. Currently, the Glance executable produces a visual representation of your code in the form of an SVG image when given a textual Haskell source file. In the future, I hope to create a visual editor for Haskell. Please scroll down to see some example images.

The current Glance program is an experiment created to answer the question:
Is it possible to create a readable and compact graphical representation of Haskell function and value declarations?

For small to medium functions, in my opinion Glance produces images good enough to indicate that the answer is yes. For large functions, the results right now are inconclusive due to issues with graph layout. Specifically, large programs unnecessarily become very spread out. If you have any ideas about how to improve Glance, please create an issue.

The next steps for the project are to improve graph layout, and then to start work on a visual editor. If you would like to help and have any knowledge about graph layout, please make a comment on this issue. All contributions to any part of Glance are very much encouraged.

Try it

First install Graphviz. For instance, in Ubuntu run:

sudo apt install graphviz

Then build and execute glance:

stack build :glance-exe
stack exec glance-exe -- examples/fact.hs images/fact.svg 500

To see the command line options run

stack exec glance-exe -- --help

Now display the SVG image in a web browser

firefox --new-window images/fact.svg

You should now see in your browser window a visual representation of the factorial function. Next, you will probably want to read the Getting Started guide below to help understand the images Glance generates.

Issues

Glance is still in development, so for the time being, graph layout, line routing, and icon design all have much room for improvement. Here are some specific issues:

Text may be misaligned with some SVG viewers.
Images become very spread out when rendering medium to large functions.
Only a subset of Haskell is rendered.

To learn more

To learn more about the project after reading this README, please check out the Glance wiki.

Getting started

Below is a getting started guide for Glance rendered by Glance itself (source here). To generate this image run

stack exec glance-exe -- examples/tutorial.hs examples/tutorial.svg 873 -c

You should now be able to understand Glance's visual syntax. If you would like to see how visual code might be an improvement over textual code, or if you just want to see more examples, please take a look at the Glance wiki page Advantages of Glance.

Thanks

A large thanks to the creators of diagrams, the main Haskell library used in this project.

Thank you to the Santa Monica Haskell Users Group for their support and feedback.

Also thanks to the /r/haskell subreddit for reviewing a very early design of the language.

glance's People

Contributors

Stargazers

Watchers

Forkers

silky shauns techscientist hbcbh1999 dmgleichman artisdom hardentoo www3838438 only1loatheb chenxian01 pel-daniel beauvankirk antimike jadegeek

glance's Issues

fail to install

Looks like a promising project but had troubles installing after stack build :glance-exe.
Using Ubuntu 20.04, Stack 2.7.3

linear                           > Installing library in /home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/lib/x86_64-linux-ghc-8.8.4/linear-1.21.3-CqLrHLH1FJI8zNjM7Fnk1w
linear                           > Registering library for linear-1.21.3..
Progress 127/147        

--  While building package haskell-gi-0.23.1 (scroll up to its section to see the error) using:
      /home/hud/.stack/setup-exe-cache/x86_64-linux-tinfo6/Cabal-simple_mPHDZzAJ_3.0.1.0_ghc-8.8.4 --builddir=.stack-work/dist/x86_64-linux-tinfo6/Cabal-3.0.1.0 configure --user --package-db=clear --package-db=global --package-db=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/pkgdb --libdir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/lib --bindir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/bin --datadir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/share --libexecdir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/libexec --sysconfdir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/etc --docdir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/doc/haskell-gi-0.23.1 --htmldir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/doc/haskell-gi-0.23.1 --haddockdir=/home/hud/.stack/snapshots/x86_64-linux-tinfo6/049412a74f7341233b6f5aa5a46fc04e234c5daf4cc67b57911791bf42ef2acf/8.8.4/doc/haskell-gi-0.23.1 --dependency=Cabal=Cabal-3.0.1.0 --dependency=ansi-terminal=ansi-terminal-0.10.3-9zJT3Osp5wTAaMBIHKdPu2 --dependency=attoparsec=attoparsec-0.13.2.4-AHmlmm44dvnKaiPmUJc2M1 --dependency=base=base-4.13.0.0 --dependency=bytestring=bytestring-0.10.10.1 --dependency=containers=containers-0.6.2.1 --dependency=directory=directory-1.3.6.0 --dependency=filepath=filepath-1.4.2.1 --dependency=haskell-gi-base=haskell-gi-base-0.23.0-8eZFmSUT7kd6BiSIiRePNX --dependency=mtl=mtl-2.2.2 --dependency=pretty-show=pretty-show-1.10-7q5amcqtFPNELOrR9L3gUm --dependency=process=process-1.6.9.0 --dependency=regex-tdfa=regex-tdfa-1.3.1.0-4a72PEc42IGJORTi63oOLR --dependency=safe=safe-0.3.19-LxDJURZu1921pHCEJqjvRE --dependency=text=text-1.2.4.0 --dependency=transformers=transformers-0.5.6.2 --dependency=xdg-basedir=xdg-basedir-0.2.2-LVv1BwILCJR4v8JryE8LvJ --dependency=xml-conduit=xml-conduit-1.9.0.0-I2LCqlxoj6q4Fw2bZ4mRaN --exact-configuration --ghc-option=-fhide-source-paths
    Process exited with code: ExitFailure 1

Strange Exception

Hi there, glance throws the following:

glance-exe: evalPattern: No pattern in case for PBangPat (PVar (Ident "n"))
CallStack (from HasCallStack):
  error, called at app/Translate.hs:249:8 in main:Translate

on this code here

Display undo state

The number of events _asUndoPosition is behind relative to _asHistory should be displayed in the GUI, as well as the total length of _asHistory. This is so that users know how far back in history they are. The principle behind this is that all state should be visible.

Enable zooming in the GUI

Improve graph layout

Problem

Graphviz produces very spread out images when laying out medium to large functions. Please see this SVG image.
findParentsWithEdges.zip

Background

There are a few causes for the large layout.

In the function doGraphLayout in app/Rendering.hs, the Graphviz node is set as a circle with a radius equal to the maximum height or width of the diagram. Since icon rotation happens after layout, using a large circle for the Graphviz node shape ensures that icons can be rotated without overlapping. However, this also means that the Graphviz node is much larger than the actual icon, especially for non-circular icons.
Graphviz does not seem to do a good job at graph layout when the node sizes have a high degree of variation. If Graphviz can not find a layout without overlaps, it reverts to scaling up the size of the layout. This means that all edges become longer.

Possible Solutions

Graphviz has many layout algorithms, and each algorithm has many parameters. It's possible a better choice of algorithm or parameters in app/Rendering.hs could improve things.
Something that might help would the following: after getting the graph layout from Graphviz, iteratively rotate the icons and check for overlap. Keep scaling down the layout until there is overlap. This approach might help a bit, but would not fix the deeper problem of a bad layout.
Create a better graph layout algorithm. Such an algorithm ideally would also incorporate node rotation with layout.

The current plan of action is to investigate solution #3, creating a better graph layout algorithm.

glance-exe: fromParseResult: Parse failed at [/home/noon/dev/literate-readme/README.lhs] (9:1): Parse error: #
CallStack (from HasCallStack):
  error, called at src/Language/Haskell/Exts/ParseMonad.hs:80:41 in haskell-src-exts-1.17.1-CHFwoWxepXQKBbAz4YNlQX:Language.Haskell.Exts.ParseMonad

might be nice to support literate haskell :)