Update to transitions 0.9.1

.coveragerc

@@ -1,3 +1,3 @@
 [run]
-source = transitions
-include = */transitions/*
+source = transitions_gui
+relative_files = True

.github/workflows/pytest.yml

@@ -0,0 +1,54 @@
+# This workflow will install Python dependencies, run tests and lint with a variety of Python versions
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-python-with-github-actions
+
+name: pytest
+
+on:
+  push:
+    branches: [master, dev-gha]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ["3.9", "3.10", "3.11", "3.12"]
+        include:
+          - python-version: "3.12"
+            extras: "[mypy]"
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ matrix.python-version }}
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          python -m pip install -r requirements.txt
+          python -m pip install -U -r requirements_test.txt
+      - name: Install dependencies for mypy
+        if: contains(matrix.extras, 'mypy')
+        run: |
+          pip install mypy
+      - name: Test with pytest
+        run: |
+          coverage run -m pytest --doctest-modules tests/
+          coverage lcov --ignore-errors
+      - name: Coveralls Parallel
+        if: contains(matrix.extras, 'mypy')
+        uses: coverallsapp/github-action@v2
+        with:
+          flag-name: run-${{ join(matrix.*, '-') }}
+          parallel: true
+  finish:
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Coveralls Finished
+        uses: coverallsapp/github-action@v2
+        with:
+          parallel-finished: true

Changelog.md

@@ -1,7 +1,14 @@
 # Changelog
 
-## 0.2.0 ()
+## 0.9.0 (May 2024)
 
+Release 0.9.0 has been developed to be compatible with `transitions` 0.9.1.
+
+  * Update all npm packages to their recent version
+  * Align minor version to transitions
+  * Add stub files and `py.typed`
+  * Extend documentation with styling example
+  * Bugfix: Add default machine name to graph when none was passed by markup
   * Bugfix #24: Edges with same source not correctly disambiguated for highlighting (thanks @Bilby42)
 
 ## 0.1.0 (June 2020)

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Alexander Neumann
+Copyright (c) 2024 Alexander Neumann
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

MANIFEST.in

@@ -3,7 +3,9 @@ include *.txt
 include .coveragerc
 include LICENSE
 include MANIFEST
-include tox.ini
+include noxfile.py
+include pytest.ini
+include mypy.ini
 
 include frontend/.eslintrc.yml
 include frontend/package.json
@@ -13,11 +15,13 @@ include frontend/README.md
 
 include transitions_gui/static/js/main.js
 include transitions_gui/static/js/main.js.map
+include transitions_gui/static/thirdpartynotice.txt
 
 recursive-include doc/img *.png
 recursive-include examples *.py
 recursive-include frontend/src *.js
 recursive-include tests *.py
+recursive-include transitions_gui *.pyi
 recursive-include transitions_gui/static/css *.css
 recursive-include transitions_gui/static/img *.svg
 recursive-include transitions_gui/templates *.html

README.md

@@ -1,8 +1,11 @@
 
 # transitions-gui - A frontend for [transitions](https://github.com/pytransitions/transitions) state machines 
-[![Version](https://img.shields.io/badge/version-v0.1.0-orange.svg)](https://github.com/pytransitions/transitions-gui)
-[![Build Status](https://travis-ci.org/pytransitions/transitions-gui.svg?branch=master)](https://travis-ci.org/pytransitions/transitions-gui)
+[![Version](https://img.shields.io/badge/version-v0.9.0-orange.svg)](https://github.com/pytransitions/transitions)
+[![Build Status](https://github.com/pytransitions/transitions-gui/actions/workflows/pytest.yml/badge.svg)](https://github.com/pytransitions/transitions-gui/actions?query=workflow%3Apytest)
+[![Coverage Status](https://coveralls.io/repos/github/pytransitions/transitions-gui/badge.svg?branch=master)](https://coveralls.io/github/pytransitions/transitions-gui?branch=master)
 [![PyPi](https://img.shields.io/pypi/v/transitions-gui.svg)](https://pypi.org/project/transitions-gui)
+[![Copr](https://img.shields.io/badge/dynamic/json?color=blue&label=copr&query=builds.latest.source_package.version&url=https%3A%2F%2Fcopr.fedorainfracloud.org%2Fapi_3%2Fpackage%3Fownername%3Daleneum%26projectname%3Dpython-transitions%26packagename%3Dpython-transitions-gui%26with_latest_build%3DTrue)](https://copr.fedorainfracloud.org/coprs/aleneum/python-transitions/)
+[![GitHub commits](https://img.shields.io/github/commits-since/pytransitions/transitions-gui/0.1.0.svg)](https://github.com/pytransitions/transitions-gui/compare/0.1.0...master)
 [![License](https://img.shields.io/github/license/pytransitions/transitions-gui.svg)](LICENSE)
 
 An extension for the [transitions](https://github.com/pytransitions/transitions) state machine package.
@@ -108,6 +111,65 @@ You might remember that graph from transitions' documentation.
 
 ![](doc/img/example-graph.png)
 
+### Custom styling
+
+If you want to adjust more than just the position of nodes, you can pass CSS styling information to `WebMachine` via `graph_css`. 
+This will be forwarded to cytoscape.
+A styling item contains a `selector` and a `css` field.
+
+```python
+import time
+
+from transitions_gui import WebMachine
+
+# just a simple state machine setup
+states = ["Red", "Yellow", "Green"]
+transitions = [
+    ["tick", "Red", "Green"],
+    ["tick", "Green", "Yellow"],
+    ["tick", "Yellow", "Red"],
+    ["reset", "*", "Red"]
+]
+
+# Check https://js.cytoscape.org/#selectors and https://js.cytoscape.org/#style for more options
+styling = [
+    {"selector": 'node[id = "Green"]',  # state names are equal to node IDs
+     "css": {"font-size": 28, "color": "white", "background-color": "darkgreen"}},
+    {"selector": 'node[id = "Red"]',
+     "css": {"shape": "ellipse", "color": "darkred"}},
+    {"selector": 'node[id != "Green"]',  # select all nodes EXCEPT green
+     "css": {"border-style": "dotted"}},
+    {"selector": "edge",  # select all edges
+     "css": {"font-size": 12, "text-margin-y": -12, "text-background-opacity": 0}},
+    {"selector": 'edge[source = "Red"][target = "Green"]',  # select all edges from Red to Green
+     "css": {"line-gradient-stop-colors": "red yellow black", "line-fill": "linear-gradient"}},
+    {"selector": 'edge[label = "reset"]',  # transition triggers map to edge labels (without conditions)
+     "css": {"line-style": "dotted", "target-arrow-shape": "triangle-tee"}}
+]
+
+machine = WebMachine(
+    states=states,
+    transitions=transitions,
+    initial="Red",
+    name="Traffic Machine",
+    ignore_invalid_triggers=True,
+    auto_transitions=False,
+    graph_css=styling,
+)
+
+try:
+    while True:
+        time.sleep(5)
+        machine.tick()
+except KeyboardInterrupt:  # Ctrl + C will shutdown the machine
+    machine.stop_server()
+```
+
+To get a better of what you can adjust, have a look at the cytoscape documentation, especially the sections [selectors](https://js.cytoscape.org/#selectors) and [style](https://js.cytoscape.org/#style). The example above should look like this:
+
+![](doc/img/example-styling.png)
+
+
 ### NestedWebMachine
 
 In case you want to use hierarchical machines, you need to use `NestedWebMachine` instead of `WebMachine`.

examples/styling.py

@@ -0,0 +1,52 @@
+import sys
+import time
+from os.path import join, realpath, dirname
+import logging
+
+sys.path.append(join(dirname(realpath(__file__)), ".."))
+
+from transitions_gui import WebMachine
+
+logging.basicConfig(level=logging.INFO)
+
+# just a simple state machine setup
+states = ["Red", "Yellow", "Green"]
+transitions = [
+    ["tick", "Red", "Green"],
+    ["tick", "Green", "Yellow"],
+    ["tick", "Yellow", "Red"],
+    ["reset", "*", "Red"]
+]
+
+# Check https://js.cytoscape.org/#selectors and https://js.cytoscape.org/#style for more options
+styling = [
+    {"selector": 'node[id = "Green"]',  # state names are equal to node IDs
+     "css": {"font-size": 28, "color": "white", "background-color": "darkgreen"}},
+    {"selector": 'node[id = "Red"]',
+     "css": {"shape": "ellipse", "color": "darkred"}},
+    {"selector": 'node[id != "Green"]',  # select all nodes EXCEPT green
+     "css": {"border-style": "dotted"}},
+    {"selector": "edge",  # select all edges
+     "css": {"font-size": 12, "text-margin-y": -12, "text-background-opacity": 0}},
+    {"selector": 'edge[source = "Red"][target = "Green"]',  # select all edges from Red to Green
+     "css": {"line-gradient-stop-colors": "red yellow black", "line-fill": "linear-gradient"}},
+    {"selector": 'edge[label = "reset"]',  # transition triggers map to edge labels (without conditions)
+     "css": {"line-style": "dotted", "target-arrow-shape": "triangle-tee"}}
+]
+
+machine = WebMachine(
+    states=states,
+    transitions=transitions,
+    initial="Red",
+    name="Traffic Machine",
+    ignore_invalid_triggers=True,
+    auto_transitions=False,
+    graph_css=styling,
+)
+
+try:
+    while True:
+        time.sleep(5)
+        machine.tick()
+except KeyboardInterrupt:  # Ctrl + C will shutdown the machine
+    machine.stop_server()