feat(embedded-sdk): Add 'urlParams' option to pass query parameters to embedded dashboard #24408

grvoicu · 2023-06-15T12:26:07Z

SUMMARY

Add support for using the SQL Templating - Custom Url Parameters feature in embedded dashboards, as requested in #17187 (comment).

This was also implemented in #20259 and #23344, but both pull-requests seem to be stale and with reviewers concerns not fully addressed.

Specifically, this adds the urlParams option to the dashboardUiConfig:

import { embedDashboard } from "@superset-ui/embedded-sdk";

embedDashboard({
  id: "abc123", // given by the Superset embedding UI
  supersetDomain: "https://superset.example.com",
  mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
  fetchGuestToken: () => fetchGuestTokenFromBackend(),
  dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional), urlParams (optional)
      hideTitle: true,
      filters: {
          expanded: true,
      },
      urlParams: {
          foo: 'value1',
          bar: 'value2',
          // ...
      }
  },
});

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

github-actions

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

grvoicu · 2023-10-03T13:45:55Z

@justinpark Friendly reminder for a review here.

radu-tutueanu · 2023-10-24T09:53:20Z

Hello, @john-bodley @justinpark ! Could you please help move this PR forward? This functionality is quite important for us

gaeljw · 2024-01-11T08:51:14Z

Hello folks, could we have feedbacks on this PR: does it have a chance to be merged soon?

justinpark · 2024-01-11T22:14:07Z

superset-embedded-sdk/src/index.ts

@@ -149,7 +154,7 @@ export async function embedDashboard({
        resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug }));
      });

-      iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}`;
+      iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}${extraUrlParams}`;


There might be a conflict between keys in filterConfigUrlParams and extraUrlParams. It would be better to design a unique key-value pair and override its value sequentially, something like

Suggested change

iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}${extraUrlParams}`;

const getUniqueUrlParams = (urlParams: string[]) =>

new URLSearchParams(

Object.fromEntries(

urlParams.map(param => [...new URLSearchParams(param)]).flat(1),

),

).toString();

const urlParams = getUniqueUrlParams([dashboardConfig, filterConfigUrlParams, extraUrlParams]);

iframe.src = `${supersetDomain}/embedded/${id}${urlParams ? `?${urlParams}` : ''}`;

Good suggestion, @justinpark, thanks! I simplified the computation of all three url params categories, please review.

madoranges · 2024-02-01T13:43:20Z

hey @grvoicu any changes of merging this one? looks reeeeeally helpful!! ❇️

sridesmet · 2024-02-01T13:59:36Z

This would be really helpful to pre filter dashboards @grvoicu

…-to-the-embedded-dashboard * master: (1182 commits) fix(ci): mypy pre-commit issues (apache#27161) feat(Alerts and Reports): Modal redesign (apache#26202) refactor: Migrate ErrorBoundary to typescript (apache#27143) chore(tests): Remove unnecessary explicit Flask-SQLAlchemy session expunges (apache#27136) fix(plugins): Apply dashboard filters to comparison query in BigNumber with Time Comparison chart (apache#27138) fix: Duplicated toast messages (apache#27135) docs: add Geotab to users list (apache#27134) fix: Plain error message when visiting a dashboard via permalink without permissions (apache#27132) fix: ID param for DELETE ssh_tunnel endpoint (apache#27130) chore(hail mary): Update package-lock.json via npm-audit-fix (apache#26693) chore: lower cryptography min version to 41.0.2 (apache#27129) docs(miscellaneous): Export Datasoruces: export datasources exports to ZIP (apache#27120) fix(pivot-table-v2): Added forgotten translation pivot table v2 (apache#22840) fix: RLS modal overflow (apache#27128) refactor: Updates some database columns to MediumText (apache#27119) fix: gevent upgrade to 23.9.1 (apache#27112) fix: removes old deprecated sqllab endpoints (apache#27117) feat(storybook): Co-habitating/Upgrading Storybooks to v7 (dependency madness ensues) (apache#26907) fix: bump grpcio, urllib3 and paramiko (apache#27124) chore(internet_port): added new ports and removed unnecessary string class (apache#27078) ...

realpascuuu · 2024-02-20T12:21:10Z

it's a top notch idea! Which is the status of this merge?

raohammad · 2024-02-20T21:33:10Z

I am just a few hours away to switch to 'superset-embedded-sdk' if this PR is not merged @justinpark

amadejzv · 2024-02-28T10:36:14Z

hey @justinpark can we have some review maybe? 😄

justinpark

LGTM!

…o embedded dashboard (apache#24408)

grvoicu added 3 commits June 15, 2023 12:24

feat(embedded-sdk): Pass query parameters to embedded dashboard

8eb7674

feat(embedded-sdk): Simplify example

d74bdd2

feat(embedded-sdk): Simplify example

4df479b

pull-request-size bot added the size/S label Jun 15, 2023

github-actions bot reviewed Jun 15, 2023

View reviewed changes

john-bodley requested a review from justinpark June 16, 2023 16:52

justinpark reviewed Jan 11, 2024

View reviewed changes

dayknightmare approved these changes Jan 17, 2024

View reviewed changes

espositovitor approved these changes Jan 17, 2024

View reviewed changes

github-actions bot added the embedded label Feb 20, 2024

feat(embedded-sdk): Passed query parameters can override filter settings

e48a0f3

github-actions bot added the dependencies:npm label Feb 20, 2024

grvoicu requested a review from justinpark February 20, 2024 13:01

justinpark approved these changes Mar 1, 2024

View reviewed changes

rusackas merged commit 89d49e5 into apache:master Mar 1, 2024
28 checks passed

kgabryje mentioned this pull request Mar 21, 2024

feat: Support urlParams preset-io/frontend-sdk#20

Merged

sfirke pushed a commit to sfirke/superset that referenced this pull request Mar 22, 2024

feat(embedded-sdk): Add 'urlParams' option to pass query parameters t…

93f9845

…o embedded dashboard (apache#24408)

qleroy pushed a commit to qleroy/superset that referenced this pull request Apr 28, 2024

feat(embedded-sdk): Add 'urlParams' option to pass query parameters t…

a5336a2

…o embedded dashboard (apache#24408)

vinothkumar66 pushed a commit to vinothkumar66/superset that referenced this pull request Nov 11, 2024

feat(embedded-sdk): Add 'urlParams' option to pass query parameters t…

2195c63

…o embedded dashboard (apache#24408)

mistercrunch added the 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels label Nov 27, 2024

mistercrunch added the 🚢 4.1.0 label Nov 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(embedded-sdk): Add 'urlParams' option to pass query parameters to embedded dashboard #24408

feat(embedded-sdk): Add 'urlParams' option to pass query parameters to embedded dashboard #24408

grvoicu commented Jun 15, 2023 •

edited

Loading

github-actions bot left a comment

grvoicu commented Oct 3, 2023

radu-tutueanu commented Oct 24, 2023

gaeljw commented Jan 11, 2024

justinpark Jan 11, 2024

grvoicu Feb 20, 2024

madoranges commented Feb 1, 2024

sridesmet commented Feb 1, 2024

realpascuuu commented Feb 20, 2024

raohammad commented Feb 20, 2024 •

edited

Loading

amadejzv commented Feb 28, 2024

justinpark left a comment

-      iframe.src = `${supersetDomain}/embedded/${id}${dashboardConfig}${filterConfigUrlParams}${extraUrlParams}`;
+      const getUniqueUrlParams = (urlParams: string[]) =>
+        new URLSearchParams(
+          Object.fromEntries(
+            urlParams.map(param => [...new URLSearchParams(param)]).flat(1),
+          ),
+        ).toString();
+      const urlParams = getUniqueUrlParams([dashboardConfig, filterConfigUrlParams, extraUrlParams]);
+      iframe.src = `${supersetDomain}/embedded/${id}${urlParams ? `?${urlParams}` : ''}`;

feat(embedded-sdk): Add 'urlParams' option to pass query parameters to embedded dashboard #24408

feat(embedded-sdk): Add 'urlParams' option to pass query parameters to embedded dashboard #24408

Conversation

grvoicu commented Jun 15, 2023 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

github-actions bot left a comment

Choose a reason for hiding this comment

grvoicu commented Oct 3, 2023

radu-tutueanu commented Oct 24, 2023

gaeljw commented Jan 11, 2024

justinpark Jan 11, 2024

Choose a reason for hiding this comment

grvoicu Feb 20, 2024

Choose a reason for hiding this comment

madoranges commented Feb 1, 2024

sridesmet commented Feb 1, 2024

realpascuuu commented Feb 20, 2024

raohammad commented Feb 20, 2024 • edited Loading

amadejzv commented Feb 28, 2024

justinpark left a comment

Choose a reason for hiding this comment

grvoicu commented Jun 15, 2023 •

edited

Loading

raohammad commented Feb 20, 2024 •

edited

Loading