Fork me on GitHub
#reagent
<
2016-03-04
>
nonrecursive00:03:30

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

nonrecursive00:03:46

has anyone else been able to do that?

gadfly36100:03:55

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

nonrecursive00:03:09

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

nonrecursive00:03:16

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)}))

nonrecursive00:03:43

that only draws on did-mount though

nonrecursive00:03:31

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

nonrecursive00:03:40

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]])))

nonrecursive00:03:08

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

gadfly36100:03:54

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/

gadfly36100:03:59

what does draw-chart look like?

nonrecursive01:03:08

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

gadfly36101:03:18

(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?

nonrecursive01:03:19

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

nonrecursive01:03:23

specifically that bit

nonrecursive01:03:40

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

gadfly36101:03:23

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

pez08:03:27

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?

not-much-io12:03:20

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

pepe12:03:03

@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

nidu12:03:22

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

not-much-io12:03:31

@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.

not-much-io12:03:01

@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-io12:03:46

@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.

not-much-io12:03:05

@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.

nidu12:03:13

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

not-much-io12:03:38

@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.

not-much-io12:03:13

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.

nidu12:03:16

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

not-much-io12:03:05

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

not-much-io12:03:06

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.

nidu12:03:54

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

not-much-io12:03:33

@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. simple_smile Though you won't be able to use advanced compilation that way.

nonrecursive15:03:16

@mikethompson: thanks, that’s great!