Skip to content

Commit

Permalink
feature(ux): several user experience improvements
Browse files Browse the repository at this point in the history 
- Sidebar link 'Overview' renamed to 'Simulation setup' / 'Simulation status', matching the main view header.
- Trend header uses the trend label as header text, like what's done for the models.
- Button text indicates that another scenario is running.
- Scenario name texts changed, capitalizing and removing the .json-part. Add additional info to main view header.
- Trend action dropdown opens to the left. Change label "Trend" to "Time series", matching "New time series" option.
- Allow renaming of plot using keyboard enter and clicking outside of edit box.

Closes #53
  • Loading branch information
flakstad committed Mar 8, 2019
1 parent 4e64a11 commit dfc94ee
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 26 deletions.
11 changes: 11 additions & 0 deletions resources/public/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,14 @@ body {
#content table.ui.table thead th {
border-bottom: 2px solid #eee !important;
}
#content span.additional {
color: #777;
margin-left: 15px;
font-size: 20px;
}
#content .plotname-edit {
cursor: pointer;
}
#content .plotname-edit:hover {
color: #aaa;
}
35 changes: 22 additions & 13 deletions src/cse_client/components.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,36 @@

(defn variable-override-editor [module {:keys [name causality type]} value event]
(let [editing? (r/atom false)
internal-value (r/atom value)]
internal-value (r/atom value)
save (fn []
(rf/dispatch (if event
(conj event @internal-value)
[::controller/set-value module name causality type @internal-value]))
(reset! editing? false))
save-if-changed (fn [value]
(if (not= value @internal-value)
(save)
(reset! editing? false)))]
(fn [_ _ value]
(if @editing?
[:div.ui.action.input.fluid
[:input {:type :text
:autoFocus true
:auto-focus true
:id (str "input-" name)
:value (if @editing? @internal-value value)
:on-change #(reset! internal-value (.. % -target -value))}]
:on-change #(reset! internal-value (.. % -target -value))
:on-key-press #(when (= (.-key %) "Enter") (save-if-changed value))
:on-blur #(save-if-changed value)}]
[:button.ui.right.icon.button
{:on-click (fn [_]
(rf/dispatch (if event
(conj event @internal-value)
[::controller/set-value module name causality type @internal-value]))
(reset! editing? false))}
{:on-click save}
[:i.check.link.icon]]
[:button.ui.right.icon.button
{:on-click #(reset! editing? false)}
[:i.times.link.icon]]]
[:div {:style {:cursor :pointer}
:on-click (fn [_]
(reset! editing? true)
(reset! internal-value value))}
value]))))

[:div.plotname-edit
{:on-click (fn []
(reset! editing? true)
(reset! internal-value value))}

[:span [:i.edit.link.icon]] value]))))
11 changes: 8 additions & 3 deletions src/cse_client/scenario.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
(ns cse-client.scenario
(:require [re-frame.core :as rf]
[kee-frame.core :as k]
[clojure.string :as str]
[cse-client.controller :as controller]))

(defn scenario-filename-to-name [file-name]
(str/capitalize (first (str/split file-name "."))))

(defn cellie [text valid? message]
(if valid?
[:td text]
Expand All @@ -14,7 +18,9 @@
{:disabled (or any-running? invalid?)
:on-click #(rf/dispatch [::controller/load-scenario scenario-id])}
(if invalid? [:i.red.ban.icon] [:i.green.play.icon])
(if invalid? "Invalid syntax" "Load scenario")])
(if invalid?
"Invalid syntax"
(if any-running? "Other scenario running" "Load scenario"))])

(defn running-button [scenario-id]
[:button.ui.right.labeled.icon.button
Expand Down Expand Up @@ -67,6 +73,5 @@
[:div.item {:key (str "scenario-" id)}
[:i.file.alternate.icon {:class (when running? "green")}]
[:div.content
[:a {:href (k/path-for [:scenario {:id id}])} id]]])
[:a {:href (k/path-for [:scenario {:id id}])} (str (scenario-filename-to-name id) " - " id)]]])
scenarios)]))

33 changes: 23 additions & 10 deletions src/cse_client/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"trend" (semantic/ui-dropdown-item
{:key (str "trend-item-" id)
:text label
:label (str/capitalize plot-type)
:label "Time series"
:onClick #(rf/dispatch [::controller/add-to-trend current-module name causality type value-reference index])})
"scatter"
#_(semantic/ui-dropdown-item
Expand All @@ -42,7 +42,7 @@
(semantic/ui-dropdown-item
{:key (str "trend-item-" id)
:text label
:label (str/capitalize plot-type)
:label "Scatter"
:onClick #(rf/dispatch [::controller/add-to-trend current-module name causality type value-reference index])})))

(defn action-dropdown [current-module name causality type value-reference trend-info]
Expand All @@ -51,7 +51,7 @@
{:icon "chart line icon"
:button true}
(semantic/ui-dropdown-menu
nil
{:direction "left"}
(semantic/ui-dropdown-header nil "Create new trend")
(semantic/ui-dropdown-divider)
(semantic/ui-dropdown-item
Expand Down Expand Up @@ -144,6 +144,9 @@
{:style {:margin-top "20%"}}
"Loading"])))

(defn- simulation-status-header-text [simulation-has-loaded?]
(if simulation-has-loaded? "Simulation status" "Simulation setup"))

(defn sidebar []
(let [module-routes @(rf/subscribe [:module-routes])
route @(rf/subscribe [:kee-frame/route])
Expand All @@ -157,7 +160,7 @@
[:div.item
[:a.header {:href (k/path-for [:index])
:class (when (= route-name :index) "active")}
"Overview"]]
(simulation-status-header-text loaded?)]]
(when (and loaded? (> (count trend-info) 0))
[:div.item
[:div.header "Trends"]
Expand All @@ -177,7 +180,7 @@
(map (fn [{:keys [id running?]}]
[:a.item {:class (when (= (-> route :path-params :id) id) "active")
:key id
:href (k/path-for [:scenario {:id id}])} id
:href (k/path-for [:scenario {:id id}])} (scenario/scenario-filename-to-name id)
(when running? [:i.green.play.icon])])
scenarios)]])
[:div.ui.divider]
Expand Down Expand Up @@ -283,11 +286,19 @@
[:i.delete.icon]]]]])
@prev-paths)]]]]))))

(defn- scenario-header [file-name]
(let [name (scenario/scenario-filename-to-name file-name)]
[:div.row name
[:span.additional (str "scenario data from ") file-name]]))

(defn root-comp []
(let [socket-state (rf/subscribe [:kee-frame.websocket/state socket-url])
loaded? (rf/subscribe [:loaded?])
status (rf/subscribe [:status])
module (rf/subscribe [:current-module])]
module (rf/subscribe [:current-module])
trends @(rf/subscribe [:trend-info])
active-trend-index @(rf/subscribe [:active-trend-index])
scenario-name @(rf/subscribe [:scenario-id])]
[:div
[:div.ui.inverted.huge.borderless.fixed.menu
[:a.header.item {:href "/"} "Core Simulation Environment - demo application"]
Expand Down Expand Up @@ -320,11 +331,13 @@
[:div.row
[:h1.ui.huge.header [k/switch-route (comp :name :data)
:module (or @module "")
:trend "Trend"
:trend (if (and (number? (int active-trend-index)) (not-empty trends))
(:label (nth trends (int active-trend-index)))
"")
:guide "User guide"
:index (if @loaded? "Simulation status" "Simulation setup")
:index (simulation-status-header-text @loaded?)
:scenarios "Scenarios"
:scenario "Scenario"
:scenario (scenario-header scenario-name)
nil [:div "Loading..."]]]]
[:div.ui.divider]
[:div.row
Expand All @@ -345,4 +358,4 @@
[:i.heartbeat.icon]
"Lost server connection!"]
[:div.sub.header "It looks like the server is down. Try restarting the server and hit F5"]]]])
[command-feedback-message]]))
[command-feedback-message]]))

0 comments on commit dfc94ee

Please sign in to comment.