hey yall - I’m trying to create a component which draws a d3 map whenever its data ratom changes, but I can’t quite get it to work

has anyone else been able to do that?

i havent done that specifically, but guessing you'll need to create a form-3 component and use :component-did-update and :component-did-mount that run some d3 function

yeah, that’s about where I’ve gotten stuck

I have

(defn chart-component
  [data]
  (r/create-class {:reagent-render chart
                   :component-did-mount (fn [] (draw-chart @data) true)
                   :component-did-update (fn [] (draw-chart @data) true)}))

that only draws on did-mount though

if I call [chart-component @data] and don’t deref the data within chart-component, then draw-chart gets called every time but only with the initial data

here’s the code for the scenario I just described:

(defn chart-component
  [data]
  (r/create-class {:reagent-render chart
                   :component-did-mount (fn [] (draw-chart data) true)
                   :component-did-update (fn [] (draw-chart data) true)}))

(defn view
  []
  (let [charts (subscribe [:key :data :charts :listing])
        data   (r/atom [{:x 5 :y 5}])]
    (fn []
      [:div.charts
       [:h2 "Charts yo"]
       [:div {:on-click #(swap! data conj {:x 1 :y 1})} "click me"]
       [chart-component @data]])))

(i threw in some trues in chart-component hoping they would magically do something and that didn’t work either)

You may have seen this already. I haven't read it, but at first glance, it appears like it might be relevant: http://zachcp.org/blog/2015/reagent-d3/

what does draw-chart look like?

oh man I think that’s the answer! thanks!

(defn chart-component
  [data]
  (r/create-class {:reagent-render chart
                   :component-did-mount (fn [] (draw-chart data) true)
                   :component-did-update (fn [this] (let [ [_ data] (reagent/argv this)] (draw-chart data) true))})) ;; <--- maybe something like that?

:component-did-update (fn [this]
                                           (let [[_ data] (r/argv this)]
                                             (draw-chart data)))

specifically that bit

yeah

yes thank you - I bow down to your helpfulness and your google-fu

hahah thank you for getting me started on clojure! #C0M8PCF7U

😄

@nonrecursive: https://github.com/Day8/re-frame/wiki/Using-Stateful-JS-Components

OMG, I’m new to all things Clojure but that :component-did-update thing makes total sense! At least I hope I get it, the chart got the old data to chew on with the first version, right?

Any tips for making nice looking UIs with reagent? Some suggestions framework wise?

@not-much-io: I started to use http://semantic-ui.com and I like it. WIthout js, just the semantic.css. It is easy to prototype in it and naming is most reasonable I have met

there is https://github.com/gadfly361/soda-ash for this, if you like

Have anyone used http://www.material-ui.com/ with reagent? (there's react wrapper https://github.com/callemall/material-ui)

@pepe: Yeah, I had a look at semantic-ui, was hoping that maybe there is something even better. I might end up using it if I don't find something even better to use.

@mmeix: I had a look at soda-ash, it was missing some basic functionality I would like to have, like collections. In the works as I understood, otherwise looked really nice.

@not-much-io: also take a look at https://github.com/Day8/re-com

@nidu: I've tried using it, the wrapper is outdate though and there isn't anything on cljsjs. Because the folk of Material-UI don't offer a packageable version as I understood. I got it to work for me on this om.next app after some tweaking: https://github.com/not-much-io/om-next-todo There was an issue on cljsjs on this.

@nidu Jep, also had a look at re-com. It looks very promising functionality wise, but visually not my cup of tea. It looked like it was using a bootstrap theme, I might try to switch it out and see what happens.

@not-much-io: there's also https://github.com/tuhlmann/reagent-material but project looks abandoned. Or it's just an example

@nidu That is where I got the base and the instructions for updating it and got it working in my example om-next-todo app.

Lots of options, but unfortunately nothing full fledged in every aspect. I will probably go with re-com and try to tweak the appearance or semantics-ui. Thanks for the suggestions.

Do you think it will be hard to make material ui work well?

It was a bit of a hassle to get it to work as I din't know what I was doing but I got it to work. Didn't have any bugs, but I didn't use it extensively. I used this to build the js and just included that and used it with js interop: https://github.com/taylorSando/om-material-ui/issues/3 My compiled js: https://github.com/not-much-io/om-next-todo/tree/master/resources/public/js/libs Also there was this "load react twice thing" in the bottom of the readme: https://github.com/taylorSando/om-material-ui

In the end I didn't really like it because of all the potential things that could be wrong with it. if it came stock packaged, I'd use it.

Thanks for the links! Maybe it's easier done with reagent than with om

@nidu The way I used it, it wasn't Om specific. Just javascript interop. The tricky part was figuring out to ignore the wrapper and just get the compiled js file. Though you won't be able to use advanced compilation that way.

@mikethompson: thanks, that’s great!