ertugrulcetin / re-frame-flow

Graph based visualization tool for re-frame event chains

Re-frame Flow

re-frame-flow is a graph based visualization tool for re-frame event chains. Let's assume we clicked a login button and triggered a series of events. login-fx -> http-fx -> some-fx -> some-db-handler ... (event after event), so a path gets generated, re-frame-flow visualizes all paths in a graph.

Installation

• Add re-frame-flow to dev dependencies:

:profiles
   {:dev
      {:dependencies [[org.clojars.ertucetin/re-frame-flow "X.Y.Z"]] }}

• Add re-frame-flow.preload to preloads:

{...
 :preloads [re-frame-flow.preload]
 ...}

Usage

• Make sure you have followed all of the installation instructions above.
• Start up your application.
• Once it is loaded, trigger some events (Flow panel gets updated when an event is triggered).
• Focus the document window and press ctrl-g to open the flow panel.

Dispatch tracking (Optional)

If you want to track the flow of dispatch and dispatch-sync, you need to use re-frame-flow's custom dispatch and dispatch-sync. ClojureScript does not provide *ns* at runtime, so these functions implemented as custom macros. Which means you can't pass around like they are functions.

• You need to move re-frame-flow dependency from dev to prod
• Update your dev closure-defines inside shadow-cljs.edn

  •   :dev
       {:compiler-options
        {:closure-defines
         {re-frame-flow.trace.dispatch-enabled? true}}}

• Update your views (or any namespace that uses dispatch)

  • (ns app.views
     (:require [re-frame-flow.macros :refer-macros [dispatch dispatch-sync]]
      ...))

Live Demo

• Re-frame Flow Demo

Running the example

• git clone [email protected]:ertugrulcetin/re-frame-flow.git
• npm install
• lein watch
• Open http://localhost:8280

re-frame-flow's Issues

Re-Frame accepts nil in :dispatch-n vector but re-frame-flow fails to handle it and throws errors.

I can pass nil into :dispatch-n fx vector successfully with re-frame but re-frame-flow fails to deal with this

https://github.com/day8/re-frame/blob/ecb756e66fe30efca896879369a420df1e271605/src/re_frame/fx.cljc#L147

(reg-fx
  :dispatch-n
  (fn [value]
    (if-not (sequential? value)
      (console :error "re-frame: ignoring bad :dispatch-n value. Expected a collection, but got:" value)
      (doseq [event (remove nil? value)] (router/dispatch event)))))

I get errors because of a nil id param being passed into these two re-frame-flow.core functions:

(defn- kw->str [id]
  (if (qualified-keyword? id)
    (str (namespace id) "/" (name id))
    (name id)))


(defn- id->node [id]
  {:id (kw->str id)
   :style {:fontSize 14
           :fontFamily "monospace"
           :wordBreak "break-word"
           :width 200}
   :data {:label id
          :name (name id)
          :namespace (namespace id)}
   :sourcePosition "right"
   :targetPosition "left"
   :position {:x 0 :y 0}})

Ability to export flow as image

I think it would be nice to export the flow as an image for future uses.

I've found that exporting the flow as SVG would be pretty complex but it should be easier to export as JPG/PNG.