2 files changed, 79 insertions(+), 5 deletions(-)

M project.clj
M src/wikisophy/core.cljs

@@ 9,7 9,8 @@
   :dependencies [[org.clojure/clojure "1.10.1"]
                  [org.clojure/clojurescript "1.10.597"]
                  [reagent "0.9.0-rc3"]
-                 [cljs-ajax "0.8.0"]]
+                 [cljs-ajax "0.8.0"]
+                 [metasoarous/oz "1.6.0-alpha6"]]
 
   :plugins [[lein-cljsbuild "1.1.7"]
             [lein-figwheel "0.5.19"]]

@@ 1,6 1,7 @@
 (ns wikisophy.core
     (:require [reagent.core :as r]
-              [ajax.core :refer [GET POST]]))
+              [ajax.core :refer [GET POST]]
+              [oz.core :as oz]))
 
 (def path (r/atom []))
 


@@ 13,12 14,18 @@
    [:h2 "Do all paths lead to "
     [:a {:href "https://wikipedia.org/wiki/Philosophy"} "Philosophy"] "?"]])
 
+(defn response-handler [response]
+  (map-indexed (fn [i v] {:id (inc i)
+                          :value v
+                          :parent (if (= i 0) nil i)})
+               response))
+
 (defn get-query! [query]
   (GET "http://localhost:4242/wikisophy"
        {:content-type :json
         :api (js/XMLHttpRequest.)
         :url-params {:query query}
-        :handler #(reset! path %)}))
+        :handler #(reset! path (response-handler %))}))
 
 (defn input []
   (let [query (r/atom "Search wikipedia..")]


@@ 31,6 38,73 @@
        [:input {:type "submit"
                 :on-click #(do (reset! path "waiting") (get-query! @query))}]])))
 
+(defn path-tree [path]
+  {:$schema "https://vega.github.io/schema/vega/v5.json"
+   :width 600
+   :height 600
+   :padding 5
+   :autosize {:type "fit-x"
+              :resize true}
+   :signals [{:name "labels"
+              :value true}
+             {:name "layout"
+              :value "tidy"}
+             {:name "links"
+              :value "diagonal"}
+             {:name "separation"
+              :value false}]
+   :data [{:name "path",
+           :values path
+           :transform
+           [{:type "stratify",
+             :key "id",
+             :parentKey "parent"}
+            {:type "tree",
+             :method {:signal "layout"},
+             :size
+             [{:signal "height"}
+              {:signal "width - 100"}],
+             :separation {:signal "separation"},
+             :as ["y" "x" "depth" "children"]}]}
+          {:name "links",
+           :source "path",
+           :transform
+           [{:type "treelinks"}
+            {:type "linkpath",
+             :orient "horizontal",
+             :shape {:signal "links"}}]}]
+   :marks [{:type "path",
+     :from {:data "links"},
+     :encode
+     {:update
+      {:path {:field "path"},
+       :stroke {:value "#ccc"}}}}
+    {:type "symbol",
+     :from {:data "path"},
+     :encode
+     {:enter
+      {:size {:value 100},
+       :stroke {:value "#fff"}
+       :fill {:value "#000"}},
+      :update
+      {:x {:field "x"}
+       :y {:field "y"}}}}
+    {:type "text",
+     :from {:data "path"},
+     :encode
+     {:enter
+      {:text {:field "value"},
+       :fontSize {:value 9},
+       :baseline {:value "middle"}},
+      :update
+      {:x {:field "x"},
+       :y {:field "y"},
+       :dx {:signal "datum.children ? -7 : 7"},
+       :align
+       {:signal
+        "datum.children ? 'right' : 'left'"},
+       :opacity {:signal "labels ? 1 : 0"}}}}]})
+
 (defn graph []
   (fn []
     (if (= @path "waiting")


@@ 38,8 112,7 @@
        [:img {:src "img/loading.svg"}]
        [:p "Please wait while crawling through Wikipedia."]]
       [:div
-       [:ol (for [node @path]
-              ^{:key node} [:li node])]])))
+       [oz/vega (path-tree @path)]])))
 
 (defn front-page []
   [:body [header]