Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(embedded): provides filter bar visibility setting on embedded dashboard (#21069) #21070

Merged
merged 1 commit into from
Sep 1, 2022
Merged

feat(embedded): provides filter bar visibility setting on embedded dashboard (#21069) #21070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion superset-embedded-sdk/README.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jileeon - considering DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY only has 2 keys namely visible and expanded and line number 115 does DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY[key]=filterConfig[key], i don't understand why there is a need for line number 41 ([key: string]: boolean | undefined) in the code.

I found this code while I was trying to add some additional capability add some extra url parameters to the embedded superset. But I don't want to add that code if the functionality already exist.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @jayakrishnankk, Sorry for the late reply.

these code you wrote are just for complying with Typescript lint.
I think there are no need to keep them If they should be changed.

Thanks.

}
}

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