rum 2023-08-03 | Slack Archive

simongray09:08:57

I can’t figure out why this adapt-class isn’t working (trying to adapt this small example: https://codesandbox.io/s/reagraph-example-mwh96q). The canvas div itself shows up, but with no content in it. It seems like the data input isn’t properly interpreted…? Just following the guide in the Rum docs.

Niki13:08:18

which guide? And what’s your code?

simongray07:08:40

The code is just what I posted a screenshot of. It doesn’t throw an error and the canvas itself comes out fine on the page, but what I’m wondering about is why the content isn’t showing up. It seems likely that just using plain Clojure data isn’t working, but since I’m getting no errors and this is just a straight translation of the example code, I’m not really sure how to proceed.

(rum/adapt-class
              GraphCanvas
              {:nodes [{:id    "n-1"
                        :label "1"}
                       {:id    "n-2"
                        :label "2"}
                       {:id    "n-3"
                        :label "3"}
                       {:id    "n-4"
                        :label "4"}]
               :edges [{:id     "1->2"
                        :source "n-1"
                        :target "n-2"
                        :label  "Edge 1-2"}
                       {:id     "1->3"
                        :source "n-1"
                        :target "n-3"
                        :label  "Edge 1-3"}
                       {:id     "1->4"
                        :source "n-1"
                        :target "n-4"
                        :label  "Edge 1-4"}]})

simongray07:08:15

which is an adaption of

<GraphCanvas
        nodes={[
          {
            id: "n-1",
            label: "1"
          },
          {
            id: "n-2",
            label: "2"
          },
          {
            id: "n-3",
            label: "3"
          },
          {
            id: "n-4",
            label: "4"
          }
        ]}
        edges={[
          {
            id: "1->2",
            source: "n-1",
            target: "n-2",
            label: "Edge 1-2"
          },
          {
            id: "1->3",
            source: "n-1",
            target: "n-3",
            label: "Edge 1-3"
          },
          {
            id: "1->4",
            source: "n-1",
            target: "n-4",
            label: "Edge 1-4"
          }
        ]}

Niki14:08:57

Yeah, looks fine

Niki14:08:11

you can try use js/React.createElement

Niki14:08:23

but you’ll have to prefix all your data structures with #js

Niki14:08:42

also you can look at generated code, maybe you’ll spot something weird there

🙏 2

simongray16:08:06

Thanks. I'll try to investigate further then.

2023-08-03

Channels