Merge pull request metabase#4596 from metabase/embed-resizing

Auto-resizing embeds

docs/administration-guide/13-embedding.md

@@ -56,6 +56,13 @@ If you wish to have a parameter locked down to prevent your embedding applicatio
 
 ![Locked parameters](images/embedding/06-locked.png)
 
+### Resizing Dashboards to fit their content
+Dashboards are a fixed aspect ratio, so if you'd like to ensure they're automatically sized vertically to fit their contents you can use the [iFrame Resizer](https://github.com/davidjbradshaw/iframe-resizer) script. Metabase serves a copy for convenience:
+```
+<script src="http://metabase.example.com/app/iframeResizer.js"></script>
+<iframe src="http://metabase.example.com/embed/dashboard/TOKEN" onload="iFrameResize({}, this)"></iframe>
+```
+
 ### Reference applications
 To see concrete examples of how to embed Metabase in applications under a number of common frameworks, check out our [reference implementations](https://github.com/metabase/embedding-reference-apps) on Github.
 

frontend/src/metabase/public/components/EmbedFrame.jsx

@@ -32,6 +32,28 @@ type Props = {
 
 @withRouter
 export default class EmbedFrame extends Component<*, Props, *> {
+    state = {
+        innerScroll: true
+    }
+
+    componentWillMount() {
+        if (window.iFrameResizer) {
+            console.error("iFrameResizer resizer already defined.")
+        } else {
+            window.iFrameResizer = {
+                autoResize: true,
+                heightCalculationMethod: "bodyScroll",
+                readyCallback: () => {
+                    this.setState({ innerScroll: false })
+                }
+            }
+            // $FlowFixMe: flow doesn't know about require.ensure
+            require.ensure([], () => {
+                require("iframe-resizer/js/iframeResizer.contentWindow.js")
+            });
+        }
+    }
+
     _getOptions() {
         let options = querystring.parse(window.location.hash.replace(/^#/, ""));
         for (var name in options) {
@@ -44,6 +66,8 @@ export default class EmbedFrame extends Component<*, Props, *> {
 
     render() {
         const { className, children, actionButtons, location, parameters, parameterValues, setParameterValue } = this.props;
+        const { innerScroll } = this.state;
+
         const footer = true;
 
         const { bordered, titled, theme } = this._getOptions();
@@ -52,10 +76,11 @@ export default class EmbedFrame extends Component<*, Props, *> {
 
         return (
             <div className={cx("EmbedFrame flex flex-column", className, {
+                "spread": innerScroll,
                 "bordered rounded shadowed": bordered,
                 [`Theme--${theme}`]: !!theme
             })}>
-                <div className="flex flex-column flex-full scroll-y relative">
+                <div className={cx("flex flex-column flex-full relative", { "scroll-y": innerScroll })}>
                     { name || (parameters && parameters.length > 0) ?
                         <div className="EmbedFrame-header flex align-center p1 sm-p2 lg-p3">
                             { name && (

frontend/src/metabase/public/containers/PublicDashboard.jsx

@@ -75,7 +75,6 @@ export default class PublicDashboard extends Component<*, Props, *> {
         const { dashboard, parameterValues } = this.props;
         return (
             <EmbedFrame
-                className="spread flex"
                 name={dashboard && dashboard.name}
                 description={dashboard && dashboard.description}
                 parameters={dashboard && dashboard.parameters}

frontend/src/metabase/public/containers/PublicQuestion.jsx

@@ -141,7 +141,6 @@ export default class PublicQuestion extends Component<*, Props, State> {
 
         return (
             <EmbedFrame
-                className="relative spread"
                 name={card && card.name}
                 description={card && card.description}
                 parameters={card && card.parameters}

frontend/src/metabase/public/lib/code.js

@@ -28,7 +28,7 @@ const html = ({ iframeUrl }) =>
     width="800"
     height="600"
     allowtransparency
-/>`
+></iframe>`
 
 const jsx = ({ iframeUrl }) =>
 `<iframe

package.json

@@ -23,6 +23,7 @@
     "history": "^4.5.0",
     "humanize-plus": "^1.8.1",
     "icepick": "^1.1.0",
+    "iframe-resizer": "^3.5.11",
     "inflection": "^1.7.1",
     "isomorphic-fetch": "^2.2.1",
     "js-cookie": "^2.1.2",

src/metabase/routes.clj

@@ -1,5 +1,6 @@
 (ns metabase.routes
   (:require [clojure.java.io :as io]
+            [clojure.string :as str]
             [cheshire.core :as json]
             (compojure [core :refer [context defroutes GET]]
                        [route :as route])
@@ -11,14 +12,19 @@
             [metabase.util :as u]
             [metabase.util.embed :as embed]))
 
+(defn- load-file [path]
+  (slurp (or (io/resource path)
+             (throw (Exception. (str "Cannot find '" path "'. Did you remember to build the Metabase frontend?"))))))
+
+(defn- load-template [path variables]
+  (stencil/render-string (load-file path) variables))
 
 (defn- entrypoint [entry embeddable? {:keys [uri]}]
   (-> (if (init-status/complete?)
-        (stencil/render-string (slurp (or (io/resource (str "frontend_client/" entry ".html"))
-                                          (throw (Exception. (str "Cannot find './resources/frontend_client/" entry ".html'. Did you remember to build the Metabase frontend?")))))
-                               {:bootstrap_json (json/generate-string (public-settings/public-settings))
-                                :embed_code     (when embeddable? (embed/head uri))})
-        (slurp (io/resource "frontend_client/init.html")))
+        (load-template (str "frontend_client/" entry ".html")
+                       {:bootstrap_json (json/generate-string (public-settings/public-settings))
+                        :embed_code     (when embeddable? (embed/head uri))})
+        (load-file "frontend_client/init.html"))
       resp/response
       (resp/content-type "text/html; charset=utf-8")))
 

yarn.lock

@@ -3496,6 +3496,10 @@ ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
+iframe-resizer@^3.5.11:
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-3.5.11.tgz#42c6373b970807a4979336eb3c73b044dc917e96"
+
 ignore@^3.2.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.7.tgz#4810ca5f1d8eca5595213a34b94f2eb4ed926bbd"