feat: public api for embeds

web-admin/.gitignore

@@ -1,2 +1,3 @@
 /.svelte-kit
-build
+build
+tests/embed.html

web-admin/src/features/embeds/ExploreEmbed.svelte

@@ -14,6 +14,7 @@
   });
   $: ({ isSuccess, isError, error, data } = $explore);
   $: isExploreNotFound = isError && error?.response?.status === 404;
+
   // We check for explore.state.validSpec instead of meta.reconcileError. validSpec persists
   // from previous valid explores, allowing display even when the current explore spec is invalid
   // and a meta.reconcileError exists.

web-admin/src/features/embeds/init-embed-public-api.ts

@@ -0,0 +1,126 @@
+import { goto } from "$app/navigation";
+import { page } from "$app/stores";
+import { get, derived, type Readable } from "svelte/store";
+
+import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
+import { convertExploreStateToURLSearchParams } from "@rilldata/web-common/features/dashboards/url-state/convertExploreStateToURLSearchParams";
+import { getDefaultExplorePreset } from "@rilldata/web-common/features/dashboards/url-state/getDefaultExplorePreset";
+import { useMetricsViewTimeRange } from "@rilldata/web-common/features/dashboards/selectors";
+
+import {
+  getTimeControlState,
+  type TimeControlState,
+} from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+import {
+  registerRPCMethod,
+  emitNotification,
+} from "@rilldata/web-common/lib/rpc";
+
+export default function initEmbedPublicAPI(instanceId: string): () => void {
+  const {
+    metricsViewName,
+    validSpecStore,
+    dashboardStore,
+    timeRangeSummaryStore,
+  } = getStateManagers();
+
+  const metricsViewNameValue = get(metricsViewName);
+  const metricsViewTimeRange = useMetricsViewTimeRange(
+    instanceId,
+    metricsViewNameValue,
+  );
+
+  const derivedState: Readable<string> = derived(
+    [
+      validSpecStore,
+      dashboardStore,
+      timeRangeSummaryStore,
+      metricsViewTimeRange,
+    ],
+    ([
+      $validSpecStore,
+      $dashboardStore,
+      $timeRangeSummaryStore,
+      $metricsViewTimeRange,
+    ]) => {
+      const exploreSpec = $validSpecStore.data?.explore ?? {};
+      const metricsViewSpec = $validSpecStore.data?.metricsView ?? {};
+
+      const defaultExplorePreset = getDefaultExplorePreset(
+        exploreSpec,
+        $metricsViewTimeRange?.data,
+      );
+
+      let timeControlsState: TimeControlState | undefined = undefined;
+      if (metricsViewSpec && exploreSpec && $dashboardStore) {
+        timeControlsState = getTimeControlState(
+          metricsViewSpec,
+          exploreSpec,
+          $timeRangeSummaryStore.data?.timeRangeSummary,
+          $dashboardStore,
+        );
+      }
+
+      return decodeURIComponent(
+        convertExploreStateToURLSearchParams(
+          $dashboardStore,
+          exploreSpec,
+          timeControlsState,
+          defaultExplorePreset,
+        ),
+      );
+    },
+  );
+
+  const unsubscribe = derivedState.subscribe((stateString) => {
+    emitNotification("stateChange", { state: stateString });
+  });
+
+  registerRPCMethod("getState", () => {
+    const validSpec = get(validSpecStore);
+    const dashboard = get(dashboardStore);
+    const timeSummary = get(timeRangeSummaryStore).data;
+    const metricsTime = get(metricsViewTimeRange);
+
+    const exploreSpec = validSpec.data?.explore ?? {};
+    const metricsViewSpec = validSpec.data?.metricsView ?? {};
+
+    const defaultExplorePreset = getDefaultExplorePreset(
+      exploreSpec,
+      metricsTime?.data,
+    );
+
+    let timeControlsState: TimeControlState | undefined = undefined;
+    if (metricsViewSpec && exploreSpec && dashboard) {
+      timeControlsState = getTimeControlState(
+        metricsViewSpec,
+        exploreSpec,
+        timeSummary?.timeRangeSummary,
+        dashboard,
+      );
+    }
+    const stateString = decodeURIComponent(
+      convertExploreStateToURLSearchParams(
+        dashboard,
+        exploreSpec,
+        timeControlsState,
+        defaultExplorePreset,
+      ),
+    );
+    return { state: stateString };
+  });
+
+  registerRPCMethod("setState", (state: string) => {
+    if (typeof state !== "string") {
+      return new Error("Expected state to be a string");
+    }
+    const currentUrl = new URL(get(page).url);
+    currentUrl.search = state;
+    void goto(currentUrl, { replaceState: true });
+    return true;
+  });
+
+  emitNotification("ready");
+
+  return unsubscribe;
+}

web-admin/src/routes/-/embed/+layout.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import { onMount } from "svelte";
   import RuntimeProvider from "@rilldata/web-common/runtime-client/RuntimeProvider.svelte";
+  import { createIframeRPCHandler } from "@rilldata/web-common/lib/rpc";
 
   const instanceId = $page.url.searchParams.get("instance_id");
   const runtimeHost = $page.url.searchParams
     .get("runtime_host")
     .replace("localhost:9091", "localhost:8081");
   const accessToken = $page.url.searchParams.get("access_token");
+
+  onMount(() => {
+    createIframeRPCHandler();
+  });
 </script>
 
 <RuntimeProvider

web-admin/tests/embeds.spec.ts

@@ -0,0 +1,104 @@
+import { expect } from "@playwright/test";
+import { test } from "./setup/base";
+
+import { type Page } from "@playwright/test";
+
+async function waitForReadyMessage(embedPage: Page, logMessages: string[]) {
+  return new Promise<void>((resolve) => {
+    embedPage.on("console", async (msg) => {
+      if (msg.type() === "log") {
+        const args = await Promise.all(
+          msg.args().map((arg) => arg.jsonValue()),
+        );
+        const logMessage = JSON.stringify(args);
+        logMessages.push(logMessage);
+        if (logMessage.includes(`{"method":"ready"}`)) {
+          resolve();
+        }
+      }
+    });
+  });
+}
+
+test.describe("Embeds", () => {
+  test("embeds should load", async ({ embedPage }) => {
+    const frame = embedPage.frameLocator("iframe");
+
+    await frame.getByLabel("Timezone selector").click();
+    await frame.getByRole("menuitem", { name: "UTC GMT +00:00 UTC" }).click();
+
+    await expect(
+      frame.getByRole("button", { name: "Advertising Spend Overall $1.30M" }),
+    ).toBeVisible();
+  });
+
+  test("state is emitted for embeds", async ({ embedPage }) => {
+    const logMessages: string[] = [];
+    await waitForReadyMessage(embedPage, logMessages);
+    const frame = embedPage.frameLocator("iframe");
+
+    await frame.getByLabel("Timezone selector").click();
+    await frame.getByRole("menuitem", { name: "UTC GMT +00:00 UTC" }).click();
+
+    await frame.getByRole("row", { name: "Instacart $107.3k" }).click();
+    await embedPage.waitForTimeout(500);
+
+    expect(
+      logMessages.some((msg) =>
+        msg.includes("tz=UTC&f=advertiser_name+IN+('Instacart')"),
+      ),
+    ).toBeTruthy();
+  });
+
+  test("getState returns from embed", async ({ embedPage }) => {
+    const logMessages: string[] = [];
+    await waitForReadyMessage(embedPage, logMessages);
+    const frame = embedPage.frameLocator("iframe");
+
+    await frame.getByLabel("Timezone selector").click();
+    await frame.getByRole("menuitem", { name: "UTC GMT +00:00 UTC" }).click();
+
+    await frame.getByRole("row", { name: "Instacart $107.3k" }).click();
+    await embedPage.waitForTimeout(500);
+
+    await embedPage.evaluate(() => {
+      const iframe = document.querySelector("iframe");
+      iframe?.contentWindow?.postMessage({ id: 1337, method: "getState" }, "*");
+    });
+
+    await embedPage.waitForTimeout(500);
+    expect(
+      logMessages.some((msg) =>
+        msg.includes(
+          `{"id":1337,"result":{"state":"tz=UTC&f=advertiser_name+IN+('Instacart')"}}`,
+        ),
+      ),
+    ).toBeTruthy();
+  });
+
+  test("setState changes embedded explore", async ({ embedPage }) => {
+    const logMessages: string[] = [];
+    await waitForReadyMessage(embedPage, logMessages);
+    const frame = embedPage.frameLocator("iframe");
+
+    await embedPage.evaluate(() => {
+      const iframe = document.querySelector("iframe");
+      iframe?.contentWindow?.postMessage(
+        {
+          id: 1337,
+          method: "setState",
+          params: "tz=UTC&f=advertiser_name+IN+('Instacart')",
+        },
+        "*",
+      );
+    });
+
+    await expect(frame.getByLabel("Timezone selector")).toHaveText("UTC");
+    await expect(
+      frame.getByRole("row", { name: "Instacart $107.3k" }),
+    ).toBeVisible();
+    expect(
+      logMessages.some((msg) => msg.includes(`{"id":1337,"result":true}`)),
+    ).toBeTruthy();
+  });
+});

web-admin/tests/setup/base.ts

@@ -1,12 +1,22 @@
 import { test as base, type Page } from "@playwright/test";
 import { ADMIN_STORAGE_STATE, VIEWER_STORAGE_STATE } from "./constants";
 import { cliLogin, cliLogout } from "./fixtures/cli";
+import path from "path";
+import { fileURLToPath } from "url";
+import {
+  RILL_EMBED_SERVICE_TOKEN_FILE,
+  RILL_ORG_NAME,
+  RILL_PROJECT_NAME,
+} from "./constants";
+import fs from "fs";
+import { generateEmbed } from "../utils/generate-embed";
 
 type MyFixtures = {
   adminPage: Page;
   viewerPage: Page;
   anonPage: Page;
   cli: void;
+  embedPage: Page;
 };
 
 export const test = base.extend<MyFixtures>({
@@ -44,4 +54,34 @@ export const test = base.extend<MyFixtures>({
     await use();
     await cliLogout();
   },
+
+  embedPage: [
+    async ({ browser }, use) => {
+      const __dirname = path.dirname(fileURLToPath(import.meta.url));
+      const readPath = path.join(
+        __dirname,
+        "..",
+        "..",
+        RILL_EMBED_SERVICE_TOKEN_FILE,
+      );
+      const rillServiceToken = fs.readFileSync(readPath, "utf-8");
+
+      await generateEmbed(
+        RILL_ORG_NAME,
+        RILL_PROJECT_NAME,
+        "bids_explore",
+        rillServiceToken,
+      );
+      const filePath = "file://" + path.resolve(__dirname, "..", "embed.html");
+
+      const context = await browser.newContext();
+      const embedPage = await context.newPage();
+      await embedPage.goto(filePath);
+
+      await use(embedPage);
+
+      await context.close();
+    },
+    { scope: "test" },
+  ],
 });

web-admin/tests/setup/constants.ts

@@ -4,3 +4,8 @@ export const VIEWER_STORAGE_STATE = "playwright/.auth/viewer.json";
 
 export const RILL_DEVTOOL_BACKGROUND_PROCESS_PID_FILE =
   "playwright/rill-devtool-background-process-pid.txt";
+export const RILL_EMBED_SERVICE_TOKEN_FILE =
+  "playwright/rill-service-token.txt";
+export const RILL_ORG_NAME = "e2e";
+export const RILL_PROJECT_NAME = "openrtb";
+export const RILL_SERVICE_NAME = "e2e";