statebox / purescript-studio

Statebox studio + core + API + REST client

Statebox PureScript monorepo

studio demo: .

source code docs:

monorepo:

---

This contains Statebox Studio, Statebox REST API, Statebox REST client and associated projects.

See the docs in the studio directory.

purescript-studio's Issues

Add some example nets for the demo

Scale Petri nets

Related links:
github.com/klangner/purescript-linear-algebra
pursuit.purescript.org/search?q=vec

@epost ter informatie

Put CSS into its own files

Animated tokens should not be showing in top-left of viewport (0,0)

Reproduce:

1. Click on a PNPRO-defined net, eg the webshop (Enrico's Pizza Palazzo).
2. Fire a transition
3. A floating ghost should now be showing in the top left corner of the viewport.

Create place and transition editor components.

Separate modules into namespaces and dirs.

Improve label positioning so we can actually read them

Following GreatSPN, let's put place and transition labels under and over places and transitions, respectively.

Parse PNPRO format files

Wrap code from https://github.com/statebox/js-pnpro-parser in FFI. Needs to be converted to oldskool ecmascript first, ie replace fat arrow syntax x => ... by function (x) { return ... }.

Add Route data type

This captures some of the 'routing' (menu navigation) that we're already doing more neatly.

Make the UI look pretty.

• gradient background
• highlight selected net in chooser
• breadcrumbs should show path
• Select diagram editor by clicking menu on the left instead of ugly menu options
• hide place/transition editor forms when not focused
• put place/transition editor forms in the same column
• don't show both place and transition editors at the same time, by default
• focused transitions should be highlighted
• Fix the object chooser treelist menu for multi-projects

Get rid of the `Additive` constraints

We shouldn't be prescribing whether to use an additive or some other monoid over out token type.

Implement authorization, roles

• Allow for user-definable roles
• Attach a set of roles to a project
• Allow the Petri net editor to label certain transitions of nets within a project with a set of roles

halogen-petrinet-editor: arc arrow should have waypoints

• dagre layouts
• PNPRO

        <arc head="FinalApproval" kind="OUTPUT" tail="submitForFinalApproval">
          <point x="94.0" y="48.0"/>
        </arc>

Highlight selected transition

Add drop shadows to certain elements (eg dragged ones)

See https://www.w3schools.com/graphics/svg_feoffset.asp

Parse token weight from PNPRO file

Upgrade to PureScript >= 0.12.1

https://github.com/purescript/purescript/releases/tag/v0.12.1

Depend on purescript-halogen-svg instead of including the sources

Currently, the sources of kettlebell/purescript-halogen-svg are included verbatim in src/Svg. Furthermore, kettlebell/purescript-halogen-svg is a fork of kwohlfahrt/purescript-halogen-svg.

• see notes on this: https://hackmd.io/lYvFcjb7STe2YzIet9sM7w?both

Create Nix build for use with Travis

Use Justin Woo's work in this area.

Indicate label visibility state with the buttons

There are 3 buttons for toggling the visibility of arcs, places and transitions (ElemKinds) respectively. We would like to show whether labels for a given ElemKind are currently visible or not.

We can modify the style of the buttons or simply use checkboxes.

Fix the way arrows are displayed

• Wait for Vec2 semiring and monid typeclass instances to be integrated

Set SVG pointer-events in code instead of CSS

The pointer-events: none is to ensure that dragging operators around also works when dragging the operator's label. We do this in CSS now but we don't want someone to accidentally delete this from the CSS and mess up the behaviour (rather than the styling) of the draggable operators.

The current CSS is:

  pointer-events: none; /* mouse should click through to the underlying rectangle */

A Halogen SVG Attribute should be introduced for this.

Create arc editor

The arc editor should be able to edit:

• name label (should this be String (for now?) or some type variable?)
• guard label (newtype Guard = Guard String for now, similar to the Typedef newtype we're using)

Look at the PlaceEditor and TransitionEditor for inspiration.

TODO:

1. A click on an arc should emit an ArcFocused event, similar to ArcFocused and PlaceFocused.
2. This should bring up an ArcEditor.form as described above.
3. The arc editor form should emit arc update events that should be handled in PetriNetViews's eval function. For now, don't update the state or anything yet, just do pure next
4. Update the state. (Needs some changes to the model, etc.)

Allow enabling/disabling of place and transition labels.

The user should be able to switch them on or off individually. Also, show them on hover may be nice. Places have a title attr to sort of do that now but that sucks, for one because it takes a long time before the title appears.

Routing, navigation, menus, screens.

• introduce Route data type
• object chooser on the left should be a treeview
• treeview elements should be collapsible

Componentise

• Make the viewer/editor usable as a child component
• Move object chooser treeview menu into its own module
• ...

Token should appear in new place only after animation is completed

Currently when a tx is fired the token is animated travelling along arcs to appropriate places but they also immediately appear in their destination places (effectively showing the same token twice). It should be the case that the tokens only appear in the new place once the animation is finished.

Parse stbx-js NLL based petri net format

Try cloning and building this project

Basically, npm install, the look at package.json to see the build tasks available. To see it in action, open dist/index.html.

Introduce tabs on top of net/diagram chooser list

Should switch between showing nets or diagrams.

See https://bulma.io/documentation/components/panel.

Studio should have a Project type

A Project should have:

• a name
• multiple Statebox nets
• a list of auth roles

SVG animations

Fix initial window size when studio is loaded

Render petrinet node groupings (PNPRO text-box)

• How textboxes look when rendered: https://raw.githubusercontent.com/statebox/journal/master/journal-process.png
• How they look in the PNPRO XML: https://github.com/statebox/journal/blob/a63a597db6e6169c71550e06031e2d24fc3a9a49/journal-process.PNPRO#L51

Steps:

• 'parse' them from the PNPRO
• render them
• SVG viewBox consider textboxes as well

Create a screen for viewing typedefs

• define (another) fake Typedef with products, sums, unit
• add menu option
• add screen
• add a (sort of) tree view renderer
• render type tree recursively
• componentise
• make the accolades look more like accolades (HTML+CSS structure is there already, needs a bit of tweaking)
• allow alternatives for +, *, in the accolades, like choice and combination or something

Simplify types and ExampleData

Fix js in GSPN parser

This block should be referring to gspn.edges.arc

Embed String Diagram Editor component into Studio

fyi @wires

• Create an embeddable component
• Embed it as a child component of Studio
  • switch studio to multi-component setup
  • correct mouse coordinates relative to component's getBoundingClientRect
• move styling from code over to CSS
• restyle to fit in with Studio

Compute and show enabled transitions

Use ADTs for arrow marker `orient` and `markerUnits` attributes

Route type should cover 'nothing selected', Project

• 'Nothing selected' is when the studio is started; it should go to the 'home page'.
• the Project should be a part of the path that the route captures.

Add build instructions

Align implementation with stbx-js

Petrinet types should allow for editing

We want to be able to update labels types, and other properties for places, transitions, and arcs. Current types explicitly prohibit that.

Create a screen for auth roles

Draw arcs as arrows

We'll want something like a function edge or arc that does or invokes something along the lines of this thing:
https://github.com/statebox/purescript-stbx-sandbox/blob/208b9e571f46b3c6814656e04f4d52f0356efb9c/src/PetrinetView.purs#L174-L178

There are various ways of defining SVG 'components', e.g. defs, which might help.

Create a screen to show executions

Render place name labels

Assign unique HTML id's to places, transitions, etc

This allows us to:

• have multiple nets on a page without mucking up the rendering or animations
• address net elements by net-specific id's

Load project over HTTP

• Decide on http client. Options:
  • use Affjax; I think we use(d) this in the inbox, so have a look there.
  • Use Justin Woo's https://github.com/justinwoo/purescript-milkis
  • Use something else
• Use it to load a net definition (String), for example journal-process.PNPRO.
• Parse it using the PNPRO parser like we do here:

   pnproNetInfos1 :: Array NetInfo
   pnproNetInfos1 = PNPRO.mkNetInfo <$> pnproProject1.project.gspn
    where
      pnproProject1 :: PNPRO.Document
      pnproProject1 = PNPRO.fromStringUnsafe pnproXml1

• Add an import PNPRO project menu to the navbar .
• Set the Studio state to the resulting list of nets.