How We Integrated Custom CSS-Like Language to Style Graphs

The text discusses the integration of a custom CSS-like language called Graph Style Script (GSS) for styling graphs within the Orb JavaScript library, which is used by Memgraph to visualize graphs in its products like Memgraph Playground and Lab. Originally, Orb allowed graph styling through JSON definitions and JavaScript callbacks, which posed limitations for users unfamiliar with coding, leading to the development of GSS. GSS simplifies the process by allowing users to define graph styles using a syntax similar to CSS, thus providing a more accessible, flexible, and efficient way to apply styles to nodes and edges based on properties and relationships. The article details the parsing and compilation processes of GSS, including lexical and syntax analysis, as well as semantic analysis and runtime error handling, and demonstrates how GSS can be used to replicate style rules initially implemented in JavaScript. It emphasizes the advantages of using GSS for defining constants, functions, and style rules, making graph styling more intuitive and adaptable for end-users, and encourages readers to explore GSS in Memgraph Lab to enhance graph visualization.