Bug: fixes for react-sizeme

Turns out the sizeme component isn't a complete drop-in replacement: * props are size:{width, height} rather than just width/height * its own props need tuning, and in particular extra markup around the child Credit to ctrlplusb/react-sizeme#120 (comment) for the latter
IMASau · Sep 1, 2021 · 9d14c5a · 9d14c5a
1 parent ae99d3d
commit 9d14c5a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 31 deletions.
diff --git 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
@@ -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?])