cyto.cljs

(defn gg
  [{:keys [id graph style layout] :or {style {} layout {}}}]
  (let [cy (r/atom nil)
        opts {:style  style
              :layout layout}

        on-update (fn [c] (js/console.log @cy))
        on-mount (fn [c]
                   (js/setTimeout
                     (fn []
                       (reset! cy (js/cytoscape
                                    (clj->js (merge {:container (.getElementById js/document (str "graph-view" id))
                                                     :elements  {:nodes (:nodes graph)
                                                                 :edges (:edges graph)}
                                                     :style
                                                                [{:selector "node"
                                                                  :style    {:label "data(id)"}}]
                                                     :layout    {:name "random"
                                                                 }

                                                     } opts))))
                       (on-update c))
                     1))
        ]
    (r/create-class
      {:component-did-mount  on-mount
       :component-did-update on-update
       :reagent-render       (fn [props]
                               [:div.w-full.h-screen
                                {:id    (str "graph-view" id) 
                                 :style {;;:width  500
                                         ;:height 500
                                         }}
                                ]
                               )})))



[h/js-loader
 {:scripts {#(exists? js/cytoscape) "https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.2/cytoscape.min.js"}

  :loading [:div "loading"]
  :loaded  [:div
            [gg {:id     "one"
                 :style
                         [{:selector "node"
                           :style    {;;:label "data(id)"
:shape "pentagon"
                                      :color (-> js/theme :colors :orange :800)
                                      :background-color (-> js/theme :colors :orange :800)
                                      }}
                          {:selector "edge"
                           :style    {:label "data(id)"
                                      :color (-> js/theme :colors :orange :800)
                                      :line-color (-> js/theme :colors :orange :800)
                                      }}]
                 :layout {:name "random"
                          }
                 :graph  {:nodes (map (fn [i]
                                        {:data {:id (str i) :label "a"}}
                                        ) (take 50 (range)))
                          :edges (map (fn [[a b]]
                                        {:data {:id     (str a b)
                                                :source (str a)
                                                :target (str b)}}
                                        )
                                      (take 50 (repeatedly (fn [] [(str (rand-int 50))
                                                                   (str (rand-int 50))]))))}}]]}]

here