2023-08-03 rum | Clojure Slack Archive

rum

simongray 2023-08-03T09:06:57.409349Z

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.

simongray 2023-08-04T07:18:40.397589Z

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

simongray 2023-08-04T07:19:15.944849Z

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"
          }
        ]}

Niki 2023-08-04T14:37:57.328269Z

Yeah, looks fine

Niki 2023-08-04T14:38:11.169239Z

you can try use js/React.createElement

Niki 2023-08-04T14:38:23.723109Z

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

Niki 2023-08-04T14:38:42.457929Z

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

🙏 1

simongray 2023-08-04T16:00:06.177709Z

Thanks. I'll try to investigate further then.

Niki 2023-08-03T13:11:18.287609Z

which guide? And what’s your code?

Clojurians Log v2

rum