re-statecharts wraps https://github.com/lucywang000/clj-statecharts that u can use in non ui contexts.

Thanks.

there is also a #statecharts channel for everything statecharts.

Thanks a lot!

Impossible to tell without the code. But there's probably a solution.

It's almost a cut-and-paste of what's on the rollacaster site, stuffed into a view:

(defn graph []                                                              
  [:<>                                                                      
   [:div {:id "graph"}                                                      
    [:p {:id "graphdata"} (str "graph data:" @(subscribe [:graph])) ]       
    (let [size 400]
         (-> (d3/forceSimulation (.-nodes data))                            
           (.force "link"                                                   
            (-> (d3/forceLink (.-links data))                               
                (.id (fn [d] (.-id d)))))                                   
           (.force "charge" (d3/forceManyBody))                             
           (.force "center" (d3/forceCenter (/ size 2) (/ size 2)))         
           .stop 
           (.tick 1500))
   [:svg {:viewBox (str "0 0 " size " " size)}                              
    [:g (map (fn [node]                                                     
       [:circle                                                             
        {:key (.-id node), :cx (.-x node), :cy (.-y node), :r 5}])          
        (.-nodes data))]
    [:g
      (map (fn [link]
       [:line {:key (.-index link), 
      :x1 (.-x (.-source link)),                                            
      :y1 (.-y (.-source link)),                                            
      :x2 (.-x (.-target link)),                                            
      :y2 (.-y (.-target link)),                                            
      :stroke "black"}])                                                    
        (.-links data))]])                                                  
   
   ]
  ])                                                                        

I have found what I think is a better way to use D3. Wrap some interop around this lib https://airbnb.io/visx/ and then you can forget about all the lifecycle complications.

obviously not as nice as hiccup but, since you are doing interop anyway, this reduces a lot of complexity

@U02UHTG2YH5 The original example is static, the component is never re-rendered. But in your case, you're derefing a sub there - its change will result in a re-render, which the code doesn't handle. So as Steve says above, you gotta deal with proper lifecycle methods to fix that. Either by yourself or by using some library. Take a look here for some examples, including a Reagent wrapper for D3: https://github.com/Day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md#d3-examples Also note that some examples migth use getElementById - that's suboptimal, you should rely on React refs instead.

Thanks @U0510KXTU I will check that out!

@U2FRKM4TW I'm halfway getting it. I looked at those very D3 examples you linked, but the forceSimulation seems very different in nature because it kicks off some sort of async processing for updating the node locations. I couldn't figure out how to map that knowledge over to fit this use case. I understand the view is only updating because the subscription. But I don't understand where else to put the setup for the simulation.

The simplest way to achieve it would be to: 1. Split your view into two - one that accepts all its data via arguments and the other a wrapper for the former that would set up all ratoms/subscriptions and feed the actual values to the wrapped component 2. Make the wrapped component a form-3 one and handle argument changes correctly. No clue what it means it terms of D3 - you'd have to read its documentation to figure out how to substitute its data when the graph has already been set

Form-3? That's a new thing to me. Looks like that is diving deep into React 😰.

*Reagent, it's well documented.

Ah I see. Reading some of Eric Normand's stuff as I get the chance.

I'd start with Reagent documentation. ;) Especially this page: https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md

oh hah it's like you read my mind

If you’re already on the path to a solution and this comment complicates things further, feel free to ignore it! But, as an alternative to form-3 components, if you’re already familiar with https://reactjs.org/docs/hooks-reference.html, you should be able to do the same thing in a form-1-like component with hooks inside of it.

(defn my-component []
  (let [[someState setSomeState] (react/useState nil)]
    ;; The below effect is similar to the :component-did-mount lifecycle callback of a form-3 component
    (react/useEffect 
      (fn initialize-state []
         (setSomeState "new state")
         (return-cleanup-function))
      [])
    [:hiccup-stuff]))

;; Usage 👇 the :f> is essential because of the hook usage
[:f> my-component]

@U022T96EFV3 Sadly I'm not familiar at all with React, nor am I on a path to a solution. D3 is bewildering to me outside of very cut-and-paste simple examples. And the force directed graph seems like one of the most complex-to-use visualizations it supports.

You may also want to start with react in js and use redux - https://react-redux.js.org/ Redux is re-frame in many ways. (if you use https://redux-toolkit.js.org/ the toolkit, it includes immutable data structures by default too) because all these cljs libs use react having a solid understanding of it will help in general

That completely drops me out of Clojurescript, though. I was hoping to experience the ineffable joy of Clojure on both front and back ends 😄

:thinking_face: Maybe find a d3 react component library that already exists which you can then use from reagent! Or, find a tutorial that walks you through creating a d3 react component and then convert the JS to CLJS as you go -could be a good/less-daunting learning experience as well. I’m not familiar with it, but the https://airbnb.io/visx/ library linked in a comment above may be what you’re looking for?

ClojureScript doesn't churn like JS - when you're ready it will be there 😛

@U0510KXTU @U022T96EFV3 AFAICT, Visx does not have a graph layout algorithm built in. https://airbnb.io/visx/docs/network

When integrating D3 with React/Vue I found it to be most streight-forward to have React only draw an svg and stay in D3-Land when it comes to drawing the contents of the svg. I'd usually have a draw method that does everything D3-related that would update/redraw the svg only through D3. And I'd call that method from lifecycle events (and window resize events etc.) whenever necessary. (Not to forget the unmount to cleanup in case of lingering eventhandlers)

@U6JS7B99S I haven't been able to understand how d3-force works well enough to implement any of the examples in Re-frame. I haven't worked in React so I don't know how that approach would map over to Re-frame.

fwiw you might be able to learn from this project https://github.com/stevebuik/Stu It’s not re-frame but it’s a good example of interop and transitions in cljs

I think my problem is that d3-force is unlike the other d3 visualizations. I've been puzzling over how to use it for a week or more. But there doesn't seem to be any alternative graph layout component to use, so I guess I'm stuck with it.

there's this lib, not sure if it fits your needs though https://github.com/erikbrinkman/d3-dag