diff --git a/frontend/src/cljs/imas_seamap/plot/views.cljs b/frontend/src/cljs/imas_seamap/plot/views.cljs index 4eff9bfea..3107607a0 100644 --- a/frontend/src/cljs/imas_seamap/plot/views.cljs +++ b/frontend/src/cljs/imas_seamap/plot/views.cljs @@ -282,7 +282,7 @@ (fn [{:keys [:transect.results/bathymetry :transect.results/habitat :transect.results/zone-colours - width height margin + size margin font-size-tooltip font-size-axes] :as props :or {font-size-tooltip 16 @@ -294,6 +294,7 @@ origin [(* 3 line-height-axes) (* 3 line-height-axes)] [ox oy] origin [m-left m-right m-top m-bottom] margin + {:keys [width height]} size graph-range (- height (+ m-top m-bottom oy)) graph-domain (- width (+ m-left m-right ox)) max-depth (* 1.01 (max-depth bathymetry)) @@ -432,18 +433,18 @@ :zone-colour-mapping habitat-zone-colours}) (defn transect-display-component [{:keys [:transect.results/status] :as results}] - (case status - :transect.results.status/empty [transect-no-data] - :transect.results.status/loading [transect-loading] - :transect.results.status/error [transect-error] - :transect.results.status/partial - [:div - [:div.transect-overlay - [non-ideal-state {:icon (reagent/as-element [spinner {:intent "success"}]) - :description (reagent/as-element - [button {:text "Cancel" - :on-click (handler-dispatch [:transect.query/cancel])}])}]] - [transect-graph results]] - ;; Default: - [transect-graph results])) + [:div {:style {:position "relative" :height "100%"}} + [:div {:style {:position "absolute" :width "100%" :height (str (get-in [:results :size :height] results) "px")}} + (case status + :transect.results.status/empty [transect-no-data] + :transect.results.status/loading [transect-loading] + :transect.results.status/error [transect-error] + :transect.results.status/partial + [:div.transect-overlay + [non-ideal-state {:icon (reagent/as-element [spinner {:intent "success"}]) + :description (reagent/as-element + [button {:text "Cancel" + :on-click (handler-dispatch [:transect.query/cancel])}])}]] + ;; Default: + [transect-graph results])]]) diff --git a/frontend/src/cljs/imas_seamap/views.cljs b/frontend/src/cljs/imas_seamap/views.cljs index db34d3115..5a2f9566f 100644 --- a/frontend/src/cljs/imas_seamap/views.cljs +++ b/frontend/src/cljs/imas_seamap/views.cljs @@ -310,7 +310,8 @@ :reagent-render (fn [_props child-component child-props] [:div.plot-container - [container-dimensions + [container-dimensions {:monitor-height true + :no-placeholder true} #(reagent/as-element [child-component (merge child-props (js->clj % :keywordize-keys true))])]])})) @@ -319,21 +320,22 @@ (let [show-plot (re-frame/subscribe [:transect.plot/show?]) force-resize #(js/window.dispatchEvent (js/Event. "resize")) transect-results (re-frame/subscribe [:transect/results])] - [:footer#plot-footer - {:on-click (handler-dispatch [:transect.plot/toggle-visibility]) - :data-helper-text "This shows the habitat data along a bathymetry transect you can draw" - :data-helper-position "top"} - [:div.drag-handle [:span.bp3-icon-large.bp3-icon-drag-handle-horizontal]] - [css-transition-group - (when @show-plot - [css-transition {:class-names "plot-height" - :timeout {:enter 300 :exit 300}} - [plot-component-animatable {:on-add force-resize :on-remove force-resize} - transect-display-component (assoc @transect-results - :on-mousemove - #(re-frame/dispatch [:transect.plot/mousemove %]) - :on-mouseout - #(re-frame/dispatch [:transect.plot/mouseout]))]])]])) + (fn [] + [:footer#plot-footer + {:on-click (handler-dispatch [:transect.plot/toggle-visibility]) + :data-helper-text "This shows the habitat data along a bathymetry transect you can draw" + :data-helper-position "top"} + [:div.drag-handle [:span.bp3-icon-large.bp3-icon-drag-handle-horizontal]] + [css-transition-group + (when @show-plot + [css-transition {:class-names "plot-height" + :timeout {:enter 300 :exit 300}} + [plot-component-animatable {:on-add force-resize :on-remove force-resize} + transect-display-component (assoc @transect-results + :on-mousemove + #(re-frame/dispatch [:transect.plot/mousemove %]) + :on-mouseout + #(re-frame/dispatch [:transect.plot/mouseout]))]])]]))) (defn loading-display [] (let [loading? @(re-frame/subscribe [:app/loading?])