ramonmeffert/elm-gossip

A user-friendly web tool for exploring dynamic gossip.

ElmGossip: Explore dynamic gossip in your browser

ElmGossip is a web tool for exploring and analysing dynamic gossip, built in Elm. The tool is available online, or you can follow the instructions below to run the tool locally. In general, we advise using the online version unless you plan to do anything with the source code.

About

This tool began its life as part of my bachelor's thesis. Since finishing my thesis, I have been working on implementing new features and polishing the tool.

Features

• 👁 Visualise gossip graphs
• ☎️ See which calls are allowed for any protocol
• ✅ Validate and execute call sequences
• ⏰ Time-travel between multiple graph states after executing calls
• 🛠 Create your own custom gossip protocols
• 🌳 Generate execution trees
• ⚠️ Helpful and human-oriented error messages
• 🪶 Lightweight¹

In progress

• Successfulness analysis
  That is, whether some protocol is weakly/strongly successful on a given graph
• GraphViz and LaTeX export
  Making it easy to use graphs and protocol formulae in other places
• Saving the state of the tool to LocalStorage
  So you don't lose your work when navigating away from the page
• Saving and loading custom protocols
  Transferability!
• Dark mode
  🌚

You can track the progress of these features on the issues page.

Future ideas

• Mobile support (#75)
• Turn the site into a Progressive Web App for offline access

Running locally

If you want to build this project yourself, you'll need yarn (or, alternatively, npm).

To install:

yarn install # or npm install

Building and running

If you just want to run the project, you can run a live-reload server in development mode:

yarn start # or npm start

If you want to build a release, you can run the following command:

yarn build # or npm build

This will generate a docs² directory. You can upload this directory to a web server or run a local web server from this directory (e.g. python3 -m http.server) to see the project. Since Elm is compiled to Javascript, uploading the compiled files is all you need to do – you don't have to start a web server as everything runs client side.

---

^{1 The entire application, bundled for production, weighs in at around 200kb. That includes compiled js, css, images and all favicons – most of which you won't even load, since they are platform-specific. For example, when loading the application on Firefox, only 129.29KB (45.73KB gzipped) is downloaded.
2 The application is configured for deployment to GitHub Pages, which expects a docs directory.}

elm-gossip's Issues

Save app state across sessions using LocalStorage port

To do after #24

Clicking a call in the list of possible calls should execute that call

You can click the calls in the call history section, but you can't click them in the list of possible calls. This is counterintuitive and should be fixed.

Clean up rendering

• (Re)move logic from update function in main
• Replace raw output with user-friendly output (e.g. instead of "Sun Graph: yes" show an icon, or at least have a neatly formatted section with graph details)

Also #21

Improve Readme

Add some information about the what and why of the project. Also probably mention some of the important packages used and include a license

Input validation for gossip graphs

• The identity relation for N and S should always be satisfied
  • either Flag input as incorrect w/ error;
    • 😕 bad ux
    • 😃 easy
  • or Give a warning and add implied identity relations.
    • 😃 good ux
    • 😕 might be unclear to some users
• Input should be in correct format
  • Numeric (03-20-123 0-1-2-3) or alphabetic (Abc ABC abC)
  • Different separators
    • either always allow multiple (possibly arbitrary) separators in input, and give a warning when more than one is used
      • 😃 good ux
      • 😕 how would number input work, as it needs 2 different separators?
    • or reject input when separators are inconsistent
      • 😕 bad ux
      • 😃 easy
• Input should not contain unconnected nodes (?)
  • If no one can reach a node, it will never be included in any ca

Check validity of possible calls for protocols

Using elm-test or something similar to make sure the possible calls that are presented are the correct ones for the protocol. See also https://github.com/m4lvin/GoMoChe/blob/master/test/results.lhs

Representation of constituents

Show old version of graph on input error

Right now, the graph disappears when an error occurs in the input. It would be better if the graph just would not change when the input is wrong.

Information about the graph should be explained more clearly

The information about the graph graph relations (i.e. weakly/strongly connected, sun graph) is unclear.

• It is probably not clear that you can hover over these items to see more information
• It might also not be clear why this information is present in the first place

To solve the first issue, it might be a good idea to move this information below the graph and just have the expanded view be the one visible all the time. To solve the second issue, another ? button could be added to that section with some information on what these properties represent and why they might be useful in the context of gossip graphs/protocols.

Custom protocol creation

I.e. a way to combine constituents in the UI to create a protocol

Consider switching to elm-parser

• Call Sequence parsing
• Gossip Graph parsing

Rendering artifact in top-left corner

Probably a bug in rendering edges

Errors show up too quickly when typing in the input fields

While typing in the input fields, the errors show immediately when there is an error. This can give users the wrong impression that their input is wrong before they are even done typing, causing them to think there is something wrong even though they weren't done typing. A short delay before showing errors could solve this.

Improve error reporting

Instead of the error being just a string, make it a record so the rendering can be improved. Something like:

type alias Error =
    { title : String
    , message : String
    , cause : String
    , advice : String
    }

Executing protocols

Rethink application structure

Show graph sequences

Based on the entered call sequence, list the resulting graphs

Successfulness

• Generate call sequence leading to complete graph if possible
  • Weakly successful
  • Strongly successful
• Colored calls based on which call leads to a complete graph
• Rendering which execution tree branches lead to complete graph (smiley or something)

Accept letters and numbers as input for gossip graphs

Permissibility

Impossible secret distributions are allowed

A gossip graph like Abc ABc abC cannot result from an initial gossip distribution Abc aBc abC (i.e. every agent only knows their own secret). It might be a good idea to show a warning for this.

Make sure title attributes are set where relevant

title attributes can be helpful in explaining the UI. Right now, there are some elements that do have a title attribute, but many don't.

Elements that benefit from title attributes:

• Input elements (<input>, <button>, <select> + <option>)
• Images (for this app mainly the FontAwesome icons)
• Any other interactive element (for example, the possible calls can be clicked. these might need to be turned into <button>s to make them more semantically correct anyway though)

Call sequence incorrectly not permissible for ANY (still)

I thought I had fixed this bug, but if you take the "All Secrets" example no call sequences will be permissible, according to the program.

Integrate package builder

Something like webpack or gulp. https://github.com/elm-community/elm-webpack-loader might be interesting. The yarn tasks are getting a bit out of hand

Fix `isSequencePermitted` function

Works on Nxy now, should work on N^sigma xy

Add section on related work

Set up CI/CD with GitHub Pages

Input validation is too strict

Gossip graph input: A⎵B⎵C is accepted as an input, but A⎵⎵B⎵C and A⎵B⎵C⎵ are not. This should not be as strict. A similar problem might exist with the Call Sequence input.

Add help page

A page for a more in-depth explanation of what is happening on the page

Save call sequences in reverse

Changes lookup time of the last call from O(n) to O(1). It seems like the last call is needed (way) more frequently than the first call.

Default protocol conditions

Normalized Agent String

i.e. even if the input is something like Fxl fEXl fL, generate a string like Acd aBCd aCD D (or its numerical equivalent)

Show all working parts in UI

• Call sequence parsing + error messages
• Graph to string (possibly normalized)

Generate execution tree

Idea: integrate this in the “Call History” section. Something like the following:

App should be usable on mobile devices

If the app can be used on mobile devices, it can be used in more scenarios by more people.

Add examples + update text

So you can just click an example and get it to show on the page

Import and Export of custom protocols

Probably just (de)serialize to JSON somehow (to do after #7)

Rework Graph data structure

Turns out saving bidirectional relations only on one agent isn't great.

Protocol editor is a bit intimidating

The protocol editor is potentially a bit intimidating, especially for new users. It might be nice to hide it somehow, for example by showing by default just the dropdown with the available protocols, along with an edit button that toggles the protocol editor.

State history

It would be very nice if you could use cmd / ctrl + z (undo) and cmd / shift + z / ctrl + y (redo) to undo or redo the most recent actions.

Call Sequence Parsing

Graph Analysis

• Connectedness
  • Weak
  • Strong
• Sun Graph Y/N
• Canonical representation

Switch to Browser.Application

Browser.sandbox is generally considered too limited. Changing to a different program type is somewhat involved, so doing it earlier is better – some functionality is not available in sandbox.

Export options

• Gossip graph
  • To GraphViz DOT code
  • To LaTeX file
• Execution tree
  • To GraphViz DOT code
  • To LaTeX file

Show version number in GUI

It would be nice to show the version number in the GUI. At this moment, this would need to be done manually. I will look into using either Elms versioning system (elm bump etc), but I'm not sure that'll work for this since that is aimed at APIs. Another would be defining it in package.json and providing it as a flag to Elm or something.

Add “To Graph Code“ button

The code to create GraphViz code already exists, so this is pretty easy. However, the GraphViz graph will look (significantly) different from the graph rendered on the page. That might be unexpected.

Improve Graph Rendering

• Consider rendering the first N agents in a circle to improve quality of rendered graph
• Look at how GraphViz renders graph (probably very hard)
• At the very least, make sure nodes do not overlap

Call Sequence Possibility

Execution tree rendering sometimes looks weird

I'm doing this purely with css and this is proving to be a challenge (I'm honestly surprised I got it to look like this in the first place)