chore(embedded): Control Filter bar visibility/state via the embedded…

… SDK (#15)

* chore: Add filter controls
* endline
* bumping version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preset-sdk/embedded",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Frontend SDK for embedding Preset data analytics into your own application",
   "access": "public",
   "keywords": [

src/const.ts

@@ -1,2 +1,6 @@
 
 export const IFRAME_COMMS_MESSAGE_TYPE = "__embedded_comms__";
+export const DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY: { [index: string]: any } = {
+    visible: "show_filters",
+    expanded: "expand_filters",
+}

src/index.ts

@@ -1,5 +1,8 @@
 import { Switchboard } from '@superset-ui/switchboard';
-import { IFRAME_COMMS_MESSAGE_TYPE } from './const';
+import {
+  DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY,
+  IFRAME_COMMS_MESSAGE_TYPE
+} from './const';
 import { getGuestTokenRefreshTiming } from './guestTokenRefresh';
 import { applyReplaceChildrenPolyfill } from './polyfills';
 
@@ -14,6 +17,11 @@ export type UiConfigType = {
   hideTitle?: boolean
   hideTab?: boolean
   hideChartControls?: boolean
+  filters?: {
+    [key: string]: boolean | undefined
+    visible?: boolean
+    expanded?: boolean
+  }
 }
 
 export type EmbedDashboardParams = {
@@ -25,7 +33,7 @@ export type EmbedDashboardParams = {
   mountPoint: HTMLElement
   /** A function to fetch a guest token from the Host App's backend server */
   fetchGuestToken: GuestTokenFetchFn
-  /** The dashboard UI config: hideTitle, hideTab, hideChartControls **/
+  /** The dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded **/
   dashboardUiConfig?: UiConfigType
   /** Enables extra logging */
   debug?: boolean
@@ -85,6 +93,13 @@ export async function embedDashboard({
     return new Promise(resolve => {
       const iframe = document.createElement('iframe');
       const dashboardConfig = dashboardUiConfig ? `?uiConfig=${calculateConfig()}` : ""
+      const filterConfig = dashboardUiConfig?.filters || {}
+      const filterConfigKeys = Object.keys(filterConfig)
+      const filterConfigUrlParams = filterConfigKeys.length > 0
+        ? "&"
+        + filterConfigKeys
+          .map(key => DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key] + '=' + filterConfig[key]).join('&')
+        : ""
 
       // setup the iframe's sandbox configuration
       iframe.sandbox.add("allow-same-origin"); // needed for postMessage to work
@@ -102,7 +117,7 @@ export async function embedDashboard({
         resolve(switchboard);
       });
 
-      iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}`;
+      iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}`;
       mountPoint?.replaceChildren(iframe);
       log('placed the iframe')
     });