TreeSS implementation - TreeViz/metastyle GitHub Wiki

How can we implement TreeCSS in most/all tree-viz applications?

Since the May 2017 workshop revealed general support for a tree-styling convention based on CSS, we should explore more about how this can be implemented with minimal burden on the developers of various tree-viz programs.

This includes more detail on how the early NexSS spec can be expanded to include useful phylogenetic concepts in selectors and property values, e.g. {NODE_ID}:clade-children {...}, edge-width: (support * 0.5)px;. Also exploration of common CSS parsers (and generators of same like ANTLR.

CSS parsers for popular languages

When implementing TreeSS, it's easiest to use an existing CSS parser for your preferred language. These typically provide lexing and parsing of modern CSS, exposing a rule-set (or equivalent) that your program . What remains is to walk this rule set, check its selectors against the current tree elements, and style them according to the listed properties and values.

• Python

  • tinycss (used in ETE proof-of-concept)
  • cssutils

• JavaScript

  • css
  • rework might be helpful for, e.g., evaluating exressions
  • css-js
  • cssparser
  • parse-css
  • JSCSSP is pre-release, but promising

• R

  • css.parser

    A minimal (very limited) CSS parser included in the R highlight package.

  • rvest

    Wrappers around the 'xml2' and 'httr' packages to make it easy to download, then manipulate, HTML and XML. [See the section titled 'CSS selector support' for details and limitations.]

  • selectr

    Translates a CSS3 selector into an equivalent XPath expression. This allows us to use CSS selectors when working with the XML package as it can only evaluate XPath expressions. Also provided are convenience functions useful for using CSS selectors on XML nodes. This package is a port of the Python package 'cssselect' (https://pythonhosted.org/cssselect/).

  • Rcssplot Rcssplot Examples

    Provides a means to style plots through cascading style sheets. This separates the aesthetics from the data crunching in plots and charts

TODO: Do any of these "do more" to resolve selectors, automate property modifications, etc.?

TODO: Do these provide syntax-error reporting? or do they silently ignore unrecognized/unparseable stuff?

TODO: What about caching of matching elements, etc.? Do any parsers provide this?

TOOD: Incorporate all of the above into a simple comparison grid here!

ANTLR (or similar) to generate lexers and parsers for some target languages

ANTLR is a powerful parser generator with runtime support for several popular languages. It includes a pretty comprehensive CSS grammar that might be useful if we need to add new keywords or elements for TreeCSS.

But generally speaking, we should try to use existing CSS parsers (above) instead. Most of our work will involve interpreting parsed TreeCSS and applying styles in the idiom of each runtime host (tree viewer). Note that ANTLR doesn't currently support some of our target languages, notably R.

Building on existing (partial) CSS parsers?

For example, R has a few parsers (links above) that are quite limited, but might be extended.

---

TODO: Include (or link to) a quick glossary of CSS terms (e.g. selector, rule, ruleset, cascade) and simple definitions.

TODO: Outline types ("reading", "writing") and levels ("core", "full") of support for TreeSS)