Feature/12 trending any signal (#13)

* #12 Added more info to trending

* #12 Proper width for trending.

* #12 Show a bunch of status instead of boat

* #12 Nicer header for module

* #12 Less silly stuff

project.clj

@@ -4,6 +4,7 @@
                  [reagent "0.8.1"]
                  [re-frame "0.10.6" :exclusions [reagent]]
                  [cljsjs/highstock "6.0.7-0"]
+                 [cljsjs/chartjs "2.7.0-0"]
                  [org.clojure/clojurescript "1.10.339"]
                  [org.clojure/clojure "1.9.0"]]
   :plugins [[lein-figwheel "0.5.16"]

resources/public/css/style.css

@@ -55,4 +55,8 @@ body {
 
 .pull-right {
     float: right !important;
+}
+
+#charty {
+    width: 1000px;
 }

src/cse_client/controller.cljs

@@ -86,8 +86,10 @@
                          {:db (assoc db :trend-values [])})))
 
 (k/reg-event-fx ::trend
-                (fn [{:keys [db]} [{:keys [module signal]}]]
-                  (merge (socket-command db ["trend" module signal])
+                (fn [{:keys [db]} [{:keys [module signal causality type]}]]
+                  (merge (socket-command db ["trend" module signal causality type])
                          {:db (assoc db :trend-values [{:trend-data []
                                                         :module     module
-                                                        :signal     signal}])})))
+                                                        :signal     signal
+                                                        :causality  causality
+                                                        :type       type}])})))

src/cse_client/core.cljs

@@ -2,14 +2,15 @@
   (:require [kee-frame.core :as k]
             [re-frame.core :as rf]
             [cse-client.view :as view]
-            [cse-client.controller :as controller]))
+            [cse-client.controller :as controller]
+            [cse-client.config :refer [socket-url]]))
 
 (enable-console-print!)
 
 (def routes
   [["/" :index]
    ["/modules/:module" :module]
-   ["/trend/:module/:signal" :trend]])
+   ["/trend/:module/:signal/:causality/:type" :trend]])
 
 (defn causalities [db]
   (some->> db
@@ -25,6 +26,22 @@
           causalities
           first)))
 
+(defn simulation-time [db]
+  (some-> db :state :time (.toFixed 3)))
+
+(defn status-data [db]
+  {
+   "Algorithm type"               "Fixed step"
+   "Simulation time"              (simulation-time db)
+   "Real time factor"             "0.9998324"
+   "Step size"                    "0.1 s"
+   "Connection status"            (get-in db [:kee-frame.websocket/sockets socket-url :state])
+   "CPU load"                     "12 %"
+   "Total memory"                 "121 MB"
+   "Path to loaded config folder" (-> db :state :configDir)})
+
+(rf/reg-sub :overview status-data)
+(rf/reg-sub :time simulation-time)
 (rf/reg-sub :loaded? (comp :loaded :state))
 (rf/reg-sub :status (comp :status :state))
 (rf/reg-sub :module (comp :module :state))

src/cse_client/trend.cljs

@@ -98,7 +98,7 @@
        :component-did-update   update
        :reagent-render         (fn [comp]
                                  [:div {:style {:flex "1 1 auto"}}
-                                  (doall (map (partial range-selector (:trend-millis comp)) range-configs))
+                                  #_(doall (map (partial range-selector (:trend-millis comp)) range-configs))
                                   [:div#charty]])})))
 
 (defn trend-outer []

src/cse_client/view.cljs

@@ -26,7 +26,7 @@
                [:td name]
                [:td type]
                [:td value]
-               [:td [:a {:href (k/path-for [:trend {:module (:name module) :signal name}])} "Trend"]]])
+               [:td [:a {:href (k/path-for [:trend {:module (:name module) :signal name :causality causality :type type}])} "Trend"]]])
             signals)]]]))
 
 (defn module-listing []
@@ -63,12 +63,21 @@
    [:button.ui.button {:on-click #(rf/dispatch [::controller/play])} "Play"]
    [:button.ui.button {:on-click #(rf/dispatch [::controller/pause])} "Pause"]])
 
+(defn dashboard []
+  [:table.ui.basic.table.definition
+   [:tbody
+    (for [[k v] @(rf/subscribe [:overview])]
+      ^{:key k}
+      [:tr
+       [:td k]
+       [:td v]])]])
+
 (defn index-page []
   (let [loaded? (rf/subscribe [:loaded?])
         load-dir (r/atom "")]
     (fn []
       (if @loaded?
-        [dp/svg-component]
+        [dashboard]
         [:div [:div "Specify a folder with FMUs:"]
          [:div.row
           [:input {:style         {:min-width "400px"}
@@ -88,20 +97,27 @@
       [:div.right.menu
        (when (and @loaded? (= @status "pause"))
          [:a.item {:on-click #(rf/dispatch [::controller/teardown])} "Teardown"])
+       (when (= :disconnected (:state @socket-state))
+         [:div.item
+          [:div "Lost server connection!"]])
        [:div.item
-        [:div "Connection:" (:state @socket-state)]]
-       [:button.ui.button {:on-click #(rf/dispatch [::controller/play])
-                           :disabled (or (not @loaded?) (= @status "play"))} "Play"]
-       [:button.ui.button {:on-click #(rf/dispatch [::controller/pause])
-                           :disabled (or (not @loaded?) (= @status "pause"))} "Pause"]]]
+        [:div "Time: " @(rf/subscribe [:time])]]
+       (when (and @loaded? (= @status "pause"))
+         [:a.item {:on-click #(rf/dispatch [::controller/play])} "Play"])
+       (when (and @loaded? (= @status "play"))
+         [:a.item {:on-click #(rf/dispatch [::controller/pause])} "Pause"])]]
      [:div.ui.grid
       [:div.row
        [:div#sidebar.column
         [sidebar]]
        [:div#content.column
         [:div.ui.grid
          [:div.row
-          [:h1.ui.huge.header "Dashboard"]]
+          [:h1.ui.huge.header [k/switch-route (comp :name :data)
+                               :trend "Trend"
+                               :module "Model"
+                               :index "Simulation status"
+                               nil [:div "Loading..."]]]]
          [:div.ui.divider]
          [:div.row
           [k/switch-route (comp :name :data)