Timeline design

[simongray]

Currently going through different options for creating a timeline.

Sofie's timeline (VEGA-based)

https://github.com/kuhumcst/sofie-vega-timeline

She got pretty far, but the design is not favoured by Viggo (and probably Frans too). It also has a few remaining layout issues that I am unlikely to solve (e.g. what to do about clipped or overlaid text). On the other hand, it is easy to embed inside reagent.

Simile widgets timeline

https://github.com/simile-widgets/timeline (or maybe https://github.com/simile-widgets/ancient-simile-widgets)

This is the timeline widget used by the Georg Brandes project. The design is exactly what Frans and Viggo want but, aside from certain issues I have with the design itself, it has a few problems:

• It is unmaintained and people are having problems actually building it from source.
• The official documentation is gone.
• It definitely isn't accessibility-compliant.
• It is based on static compilation using a Java program into an HTML file. This is fine for a single static page (i.e. Viggos data), but it won't work for a dynamic view of search results.

[simongray]

React timelines

https://freefrontend.com/react-js-timelines/

The issue with React timelines is that they all seem to fall in one of two categories:

• single-track, often vertical timelines
• highly specialised multi-track timelines, with little text focus

[simongray]

I went down the road of trying to make the Simile timeline widget work. It seems like the ant build.xml script were made for a slightly different project structure and contain a few implicit requirements. Chasing the errors created by the build scripts, ended in a missing compilations directory for the simile-ajax lib. Anyway, that doesn't really seem noteworthy anyway, since the code can be made to work by simply navigating into the webapp dir and serving the index.html file, e.g.

✔ ~/Code/timeline/src/webapp [master|✔] 
15:50 $ python3 -m http.server

I am going to attempt to create a reagent wrapper for the relevant code instead.

Once running (using the Python web server) access at

• http://localhost:8000/
• http://localhost:8000/docs/ - documentation
• http://localhost:8000/examples/ - examples

[simongray]

Wrapping the Simile Widgets timeline in reagent on this branch: https://github.com/kuhumcst/glossematics/tree/timeline-experiment