Skip to content

Commit

Permalink
feat(embedded): provides filter bar visibility setting on embedded da…
Browse files Browse the repository at this point in the history
…shboard (#21069) (#21070)

Co-authored-by: 이재익 [jileeon] <jileeon@nexon.co.kr>
  • Loading branch information
jileeon and jileeon88 authored Sep 1, 2022
1 parent ad34f9d commit eb80568
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 4 deletions.
7 changes: 6 additions & 1 deletion superset-embedded-sdk/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,12 @@ embedDashboard({
supersetDomain: "https://superset.example.com",
mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
fetchGuestToken: () => fetchGuestTokenFromBackend(),
dashboardUiConfig: { hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional)
hideTitle: true,
filters: {
expanded: true,
}
},
});
```

Expand Down
4 changes: 4 additions & 0 deletions superset-embedded-sdk/src/const.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,7 @@
*/

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",
}
21 changes: 18 additions & 3 deletions superset-embedded-sdk/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@
* under the License.
*/

import { IFRAME_COMMS_MESSAGE_TYPE } from './const';
import {
DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY,
IFRAME_COMMS_MESSAGE_TYPE
} from './const';

// We can swap this out for the actual switchboard package once it gets published
import { Switchboard } from '@superset-ui/switchboard';
Expand All @@ -34,6 +37,11 @@ export type UiConfigType = {
hideTitle?: boolean
hideTab?: boolean
hideChartControls?: boolean
filters?: {
[key: string]: boolean | undefined
visible?: boolean
expanded?: boolean
}
}

export type EmbedDashboardParams = {
Expand All @@ -45,7 +53,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
/** Are we in debug mode? */
debug?: boolean
Expand Down Expand Up @@ -99,6 +107,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
Expand Down Expand Up @@ -132,7 +147,7 @@ export async function embedDashboard({
resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug }));
});

iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}`;
iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}`;
mountPoint.replaceChildren(iframe);
log('placed the iframe')
});
Expand Down

0 comments on commit eb80568

Please sign in to comment.