From cd56e295f397d28cb46168471840fa4f65403a95 Mon Sep 17 00:00:00 2001
From: Eric P Green <ericpgreen2@gmail.com>
Date: Tue, 16 Apr 2024 14:06:10 -0700
Subject: [PATCH] Cloud UI: Surface Custom Dashboards in navigation (#4531)

* WIP commit

* Fix lint

* Use TanStack Query client to fetch chart data

* TODO: render a "read-only" version of the dashboard

* Utils to differentiate between Metrics Explorer and Custom Dashboard pages

* Show both Metrics Explorers and Custom Dashboards in the breadcrumb

* Remove console log

* Add wrongly-detected TS error to whitelist

* Small clean-up

* Fix merge

* Remove unused component
---
 scripts/tsc-with-whitelist.sh                 |  1 +
 .../dashboards/listing/DashboardsTable.svelte | 30 ++++++++---
 .../DashboardsTableCompositeCell.svelte       | 18 +++++--
 .../dashboards/listing/NoDashboardsCTA.svelte |  4 +-
 .../features/dashboards/listing/selectors.ts  | 11 ++--
 .../embeds/TopNavigationBarEmbed.svelte       |  2 +-
 web-admin/src/features/errors/error-utils.ts  | 10 ++--
 .../navigation/TopNavigationBar.svelte        | 44 ++++++++-------
 .../src/features/navigation/nav-utils.ts      | 15 +++++-
 web-admin/src/routes/+layout.svelte           | 12 +++--
 .../[project]/-/dashboards/+page.ts           |  6 +++
 .../-/dashboards/[dashboard]/+page.svelte     | 11 ++++
 .../__stories__/DropdownMenu.stories.svelte   |  6 +--
 .../icons/CustomDashboardIcon.svelte          | 53 +++++++++++++++++++
 ...Icon.svelte => MetricsExplorerIcon.svelte} |  0
 .../breadcrumbs/BreadcrumbItem.svelte         |  6 +--
 .../features/custom-dashboards/Chart.svelte   |  7 ++-
 .../src/features/dashboards/selectors.ts      | 18 +++++++
 .../resource-icon-mapping.ts                  |  7 +--
 19 files changed, 200 insertions(+), 61 deletions(-)
 mode change 100644 => 100755 scripts/tsc-with-whitelist.sh
 create mode 100644 web-admin/src/routes/[organization]/[project]/-/dashboards/+page.ts
 create mode 100644 web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte
 create mode 100644 web-common/src/components/icons/CustomDashboardIcon.svelte
 rename web-common/src/components/icons/{DashboardIcon.svelte => MetricsExplorerIcon.svelte} (100%)

diff --git a/scripts/tsc-with-whitelist.sh b/scripts/tsc-with-whitelist.sh
old mode 100644
new mode 100755
index 3fcbb4455d60..545d845059d1
--- a/scripts/tsc-with-whitelist.sh
+++ b/scripts/tsc-with-whitelist.sh
@@ -19,6 +19,7 @@ web-admin/src/features/scheduled-reports/selectors.ts: error TS2345
 web-admin/src/features/view-as-user/clearViewedAsUser.ts: error TS18047
 web-admin/src/features/view-as-user/clearViewedAsUser.ts: error TS2322
 web-admin/src/features/view-as-user/setViewedAsUser.ts: error TS2322
+web-admin/src/routes/[organization]/[project]/-/dashboards/+page.ts: error TS2307
 web-common/src/components/button-group/ButtonGroup.spec.ts: error TS2345
 web-common/src/components/data-graphic/actions/mouse-position-to-domain-action-factory.ts: error TS2322
 web-common/src/components/data-graphic/actions/outline.ts: error TS18047
diff --git a/web-admin/src/features/dashboards/listing/DashboardsTable.svelte b/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
index 6b9d3e889f45..0e23cb5f35ca 100644
--- a/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
+++ b/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
@@ -2,7 +2,7 @@
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { type Row, flexRender } from "@tanstack/svelte-table";
+  import { flexRender, type Row } from "@tanstack/svelte-table";
   import { createEventDispatcher } from "svelte";
   import Table from "../../../components/table/Table.svelte";
   import DashboardsError from "./DashboardsError.svelte";
@@ -10,7 +10,7 @@
   import DashboardsTableEmpty from "./DashboardsTableEmpty.svelte";
   import DashboardsTableHeader from "./DashboardsTableHeader.svelte";
   import NoDashboardsCTA from "./NoDashboardsCTA.svelte";
-  import { type DashboardResource, useDashboardsV2 } from "./selectors";
+  import { useDashboardsV2, type DashboardResource } from "./selectors";
 
   export let isEmbedded = false;
 
@@ -30,13 +30,27 @@
     {
       id: "composite",
       cell: ({ row }) => {
-        const dashboard = row.original as DashboardResource;
+        const dashboardResource = row.original as DashboardResource;
+        const resource = dashboardResource.resource;
+        const refreshedOn = dashboardResource.refreshedOn;
+        const name = resource.meta.name.name;
+
+        // If not a Metrics Explorer, it's a Custom Dashboard.
+        const isMetricsExplorer = !!resource?.metricsView;
+        const title = isMetricsExplorer
+          ? resource.metricsView.spec.title
+          : resource.dashboard.spec.title;
+        const description = isMetricsExplorer
+          ? resource.metricsView.spec.description
+          : "";
+
         return flexRender(DashboardsTableCompositeCell, {
-          name: dashboard.resource.meta.name.name,
-          title: dashboard.resource.metricsView.spec.title,
-          lastRefreshed: dashboard.refreshedOn,
-          description: dashboard.resource.metricsView.spec.description,
-          error: dashboard.resource.meta.reconcileError,
+          name,
+          title,
+          lastRefreshed: refreshedOn,
+          description,
+          error: resource.meta.reconcileError,
+          isMetricsExplorer,
           isEmbedded,
         });
       },
diff --git a/web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte b/web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte
index 4cc46c9b675d..88784891f672 100644
--- a/web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte
+++ b/web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import DashboardIcon from "@rilldata/web-common/components/icons/DashboardIcon.svelte";
+  import CustomDashboardIcon from "@rilldata/web-common/components/icons/CustomDashboardIcon.svelte";
+  import MetricsExplorerIcon from "@rilldata/web-common/components/icons/MetricsExplorerIcon.svelte";
   import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
@@ -11,6 +12,7 @@
   export let lastRefreshed: string;
   export let description: string;
   export let error: string;
+  export let isMetricsExplorer: boolean;
   export let isEmbedded: boolean;
 
   $: organization = $page.params.organization;
@@ -18,16 +20,26 @@
 
   $: lastRefreshedDate = new Date(lastRefreshed);
   $: isValidLastRefreshedDate = !isNaN(lastRefreshedDate.getTime());
+
+  $: href = isEmbedded
+    ? undefined
+    : isMetricsExplorer
+      ? `/${organization}/${project}/${name}`
+      : `/${organization}/${project}/-/dashboards/${name}`;
 </script>
 
 <svelte:element
   this={isEmbedded ? "button" : "a"}
   class="flex flex-col gap-y-0.5 group px-4 py-[5px] w-full"
-  href={isEmbedded ? undefined : `/${organization}/${project}/${name}`}
+  {href}
   role={isEmbedded ? "button" : "link"}
 >
   <div class="flex gap-x-2 items-center">
-    <DashboardIcon size={"14px"} className="text-slate-500" />
+    {#if isMetricsExplorer}
+      <MetricsExplorerIcon size={"14px"} className="text-slate-500" />
+    {:else}
+      <CustomDashboardIcon size={"14px"} className="text-slate-500" />
+    {/if}
     <div
       class="text-gray-700 text-sm font-semibold group-hover:text-primary-600"
     >
diff --git a/web-admin/src/features/dashboards/listing/NoDashboardsCTA.svelte b/web-admin/src/features/dashboards/listing/NoDashboardsCTA.svelte
index af8daa18cf4b..dc95282fdb0f 100644
--- a/web-admin/src/features/dashboards/listing/NoDashboardsCTA.svelte
+++ b/web-admin/src/features/dashboards/listing/NoDashboardsCTA.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import DashboardIcon from "@rilldata/web-common/components/icons/DashboardIcon.svelte";
+  import MetricsExplorerIcon from "@rilldata/web-common/components/icons/MetricsExplorerIcon.svelte";
 </script>
 
 <div
@@ -7,7 +7,7 @@
 >
   <div class="flex flex-col justify-center items-center">
     <div class="relative">
-      <DashboardIcon className="text-slate-300 w-12 h-12" />
+      <MetricsExplorerIcon className="text-slate-300 w-12 h-12" />
     </div>
   </div>
   <div
diff --git a/web-admin/src/features/dashboards/listing/selectors.ts b/web-admin/src/features/dashboards/listing/selectors.ts
index f70973f2cd9f..b62edcc67f82 100644
--- a/web-admin/src/features/dashboards/listing/selectors.ts
+++ b/web-admin/src/features/dashboards/listing/selectors.ts
@@ -241,10 +241,13 @@ export function useDashboardsV2(
   return createRuntimeServiceListResources(instanceId, undefined, {
     query: {
       select: (data) => {
-        const dashboards = data.resources.filter((res) => res.metricsView);
-        return dashboards.map((db) => {
-          const refreshedOn = getDashboardRefreshedOn(db, data.resources);
-          return { resource: db, refreshedOn };
+        // Filter for Metrics Explorers and Custom Dashboards
+        const resources = data.resources.filter(
+          (res) => res.metricsView || res.dashboard,
+        );
+        return resources.map((resource) => {
+          const refreshedOn = getDashboardRefreshedOn(resource, data.resources);
+          return { resource, refreshedOn };
         });
       },
     },
diff --git a/web-admin/src/features/embeds/TopNavigationBarEmbed.svelte b/web-admin/src/features/embeds/TopNavigationBarEmbed.svelte
index 15784c52d2e8..0360d1812e5d 100644
--- a/web-admin/src/features/embeds/TopNavigationBarEmbed.svelte
+++ b/web-admin/src/features/embeds/TopNavigationBarEmbed.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import BreadcrumbItem from "@rilldata/web-common/components/navigation/breadcrumbs/BreadcrumbItem.svelte";
   import { useValidDashboards } from "@rilldata/web-common/features/dashboards/selectors";
   import type {
     V1MetricsViewSpec,
@@ -7,7 +8,6 @@
   import { createEventDispatcher } from "svelte";
   import LastRefreshedDate from "../dashboards/listing/LastRefreshedDate.svelte";
   import { isErrorStoreEmpty } from "../errors/error-store";
-  import BreadcrumbItem from "@rilldata/web-common/components/navigation/breadcrumbs/BreadcrumbItem.svelte";
 
   export let instanceId: string;
   export let activeResourceName: string;
diff --git a/web-admin/src/features/errors/error-utils.ts b/web-admin/src/features/errors/error-utils.ts
index a43e488735a5..32f0663bb974 100644
--- a/web-admin/src/features/errors/error-utils.ts
+++ b/web-admin/src/features/errors/error-utils.ts
@@ -2,7 +2,7 @@ import { goto } from "$app/navigation";
 import { page } from "$app/stores";
 import { isAdminServerQuery } from "@rilldata/web-admin/client/utils";
 import {
-  isDashboardPage,
+  isMetricsExplorerPage,
   isProjectPage,
 } from "@rilldata/web-admin/features/navigation/nav-utils";
 import { errorEventHandler } from "@rilldata/web-common/metrics/initMetrics";
@@ -68,10 +68,10 @@ export function createGlobalErrorCallback(queryClient: QueryClient) {
       }
     }
 
-    // Special handling for some errors on the Dashboard page
-    const onDashboardPage = isDashboardPage(get(page));
-    if (onDashboardPage) {
-      // Let the Dashboard page handle errors for runtime queries.
+    // Special handling for some errors on the Metrics Explorer page
+    const onMetricsExplorerPage = isMetricsExplorerPage(get(page));
+    if (onMetricsExplorerPage) {
+      // Let the Metrics Explorer page handle errors for runtime queries.
       // Individual components (e.g. a specific line chart or leaderboard) should display a localised error message.
       // NOTE: let's start with 400 errors, but we may want to include 500-level errors too.
       if (
diff --git a/web-admin/src/features/navigation/TopNavigationBar.svelte b/web-admin/src/features/navigation/TopNavigationBar.svelte
index 66071c2146df..d3e4a87ca116 100644
--- a/web-admin/src/features/navigation/TopNavigationBar.svelte
+++ b/web-admin/src/features/navigation/TopNavigationBar.svelte
@@ -2,9 +2,14 @@
   import { page } from "$app/stores";
   import Bookmarks from "@rilldata/web-admin/features/bookmarks/Bookmarks.svelte";
   import Home from "@rilldata/web-common/components/icons/Home.svelte";
+  import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
+  import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
+  import OrganizationAvatar from "@rilldata/web-common/components/navigation/breadcrumbs/OrganizationAvatar.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import { useValidVisualizations } from "@rilldata/web-common/features/dashboards/selectors";
   import StateManagersProvider from "@rilldata/web-common/features/dashboards/state-managers/StateManagersProvider.svelte";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import {
     createAdminServiceGetCurrentUser,
     createAdminServiceListOrganizations as listOrgs,
@@ -13,20 +18,15 @@
   import ViewAsUserChip from "../../features/view-as-user/ViewAsUserChip.svelte";
   import { viewAsUserStore } from "../../features/view-as-user/viewAsUserStore";
   import CreateAlert from "../alerts/CreateAlert.svelte";
+  import { useAlerts } from "../alerts/selectors";
   import AvatarButton from "../authentication/AvatarButton.svelte";
   import SignIn from "../authentication/SignIn.svelte";
   import LastRefreshedDate from "../dashboards/listing/LastRefreshedDate.svelte";
   import ShareDashboardButton from "../dashboards/share/ShareDashboardButton.svelte";
   import { isErrorStoreEmpty } from "../errors/error-store";
   import ShareProjectButton from "../projects/ShareProjectButton.svelte";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { useReports } from "../scheduled-reports/selectors";
-  import OrganizationAvatar from "@rilldata/web-common/components/navigation/breadcrumbs/OrganizationAvatar.svelte";
-  import { isDashboardPage, isProjectPage } from "./nav-utils";
-  import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
-  import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
-  import { useAlerts } from "../alerts/selectors";
-  import { useValidDashboards } from "@rilldata/web-common/features/dashboards/selectors";
+  import { isMetricsExplorerPage, isProjectPage } from "./nav-utils";
 
   const user = createAdminServiceGetCurrentUser();
 
@@ -36,7 +36,7 @@
   $: ({ organization, project, dashboard, alert, report } = $page.params);
 
   $: onProjectPage = isProjectPage($page);
-  $: onDashboardPage = isDashboardPage($page);
+  $: onMetricsExplorerPage = isMetricsExplorerPage($page);
 
   $: organizationQuery = listOrgs(
     { pageSize: 100 },
@@ -53,14 +53,14 @@
     },
   });
 
-  $: dashboardsQuery = useValidDashboards(instanceId);
+  $: visualizationsQuery = useValidVisualizations(instanceId);
 
   $: alertsQuery = useAlerts(instanceId);
   $: reportsQuery = useReports(instanceId);
 
   $: organizations = $organizationQuery.data?.organizations ?? [];
   $: projects = $projectsQuery.data?.projects ?? [];
-  $: dashboards = $dashboardsQuery.data ?? [];
+  $: visualizations = $visualizationsQuery.data ?? [];
   $: alerts = $alertsQuery.data?.resources ?? [];
   $: reports = $reportsQuery.data?.resources ?? [];
 
@@ -73,12 +73,20 @@
     return map.set(label, { label });
   }, new Map<string, PathOption>());
 
-  $: dashboardPaths = dashboards.reduce((map, { meta, metricsView }) => {
-    const id = meta.name.name;
-    return map.set(id, {
-      label: metricsView?.state?.validSpec?.title || id,
-    });
-  }, new Map<string, PathOption>());
+  $: visualizationPaths = visualizations.reduce(
+    (map, { meta, metricsView, dashboard }) => {
+      const id = meta.name.name;
+      const isMetricsExplorer = !!metricsView;
+      return map.set(id, {
+        label:
+          (isMetricsExplorer
+            ? metricsView?.state?.validSpec?.title
+            : dashboard?.spec?.title) || id,
+        section: isMetricsExplorer ? undefined : "-/dashboards",
+      });
+    },
+    new Map<string, PathOption>(),
+  );
 
   $: alertPaths = alerts.reduce((map, alert) => {
     const id = alert.meta.name.name;
@@ -99,7 +107,7 @@
   $: pathParts = [
     organizationPaths,
     projectPaths,
-    dashboardPaths,
+    visualizationPaths,
     report ? reportPaths : alert ? alertPaths : null,
   ];
 
@@ -128,7 +136,7 @@
     {#if onProjectPage}
       <ShareProjectButton {organization} {project} />
     {/if}
-    {#if onDashboardPage}
+    {#if onMetricsExplorerPage}
       <StateManagersProvider metricsViewName={dashboard}>
         <LastRefreshedDate {dashboard} />
         {#if $user.isSuccess && $user.data.user}
diff --git a/web-admin/src/features/navigation/nav-utils.ts b/web-admin/src/features/navigation/nav-utils.ts
index 31fee38397ed..6abe242db222 100644
--- a/web-admin/src/features/navigation/nav-utils.ts
+++ b/web-admin/src/features/navigation/nav-utils.ts
@@ -14,13 +14,24 @@ export function isProjectPage(page: Page): boolean {
   );
 }
 
-export function isDashboardPage(page: Page): boolean {
+export function isMetricsExplorerPage(page: Page): boolean {
   return (
     page.route.id === "/[organization]/[project]/[dashboard]" ||
     page.route.id === "/-/embed"
   );
 }
 
+export function isCustomDashboardPage(page: Page): boolean {
+  return page.route.id === "/[organization]/[project]/-/dashboards/[dashboard]";
+}
+
+/**
+ * Returns true if the page is any kind of dashboard page (either a Metrics Explorer or a Custom Dashboard).
+ */
+export function isAnyDashboardPage(page: Page): boolean {
+  return isMetricsExplorerPage(page) || isCustomDashboardPage(page);
+}
+
 export function isReportPage(page: Page): boolean {
   return page.route.id === "/[organization]/[project]/-/reports/[report]";
 }
@@ -42,7 +53,7 @@ export function getScreenNameFromPage(page: Page): MetricsEventScreenName {
       return MetricsEventScreenName.Organization;
     case isProjectPage(page):
       return MetricsEventScreenName.Project;
-    case isDashboardPage(page):
+    case isMetricsExplorerPage(page):
       return MetricsEventScreenName.Dashboard;
     case isReportPage(page):
       return MetricsEventScreenName.Report;
diff --git a/web-admin/src/routes/+layout.svelte b/web-admin/src/routes/+layout.svelte
index b0f0e1cc5089..b85478bdcb17 100644
--- a/web-admin/src/routes/+layout.svelte
+++ b/web-admin/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { beforeNavigate } from "$app/navigation";
   import { page } from "$app/stores";
-  import { isDashboardPage } from "@rilldata/web-admin/features/navigation/nav-utils";
+  import { isMetricsExplorerPage } from "@rilldata/web-admin/features/navigation/nav-utils";
   import { initCloudMetrics } from "@rilldata/web-admin/features/telemetry/initCloudMetrics";
   import NotificationCenter from "@rilldata/web-common/components/notifications/NotificationCenter.svelte";
   import {
@@ -9,6 +9,7 @@
     retainFeaturesFlags,
   } from "@rilldata/web-common/features/feature-flags";
   import RillTheme from "@rilldata/web-common/layout/RillTheme.svelte";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
   import { errorEventHandler } from "@rilldata/web-common/metrics/initMetrics";
   import { QueryClientProvider } from "@tanstack/svelte-query";
   import { onMount } from "svelte";
@@ -16,7 +17,6 @@
   import { createGlobalErrorCallback } from "../features/errors/error-utils";
   import TopNavigationBar from "../features/navigation/TopNavigationBar.svelte";
   import { clearViewedAsUserAfterNavigate } from "../features/view-as-user/clearViewedAsUser";
-  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 
   // Motivation:
   // - https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#a-bad-api
@@ -36,11 +36,11 @@
 
   $: isEmbed = $page.url.pathname === "/-/embed";
 
-  // The Dashboard component assumes a page height of `h-screen`. This is somehow motivated by
+  // The Dashboard (Metrics Explorer) component assumes a page height of `h-screen`. This is somehow motivated by
   // making the line charts and leaderboards scroll independently.
   // However, `h-screen` screws up overflow/scroll on all other pages, so we only apply it to the dashboard.
   // (This all feels hacky and should not be considered optimal.)
-  $: onDashboardPage = isDashboardPage($page);
+  $: onMetricsExplorerPage = isMetricsExplorerPage($page);
 </script>
 
 <svelte:head>
@@ -49,7 +49,9 @@
 
 <RillTheme>
   <QueryClientProvider client={queryClient}>
-    <main class="flex flex-col min-h-screen {onDashboardPage && 'h-screen'}">
+    <main
+      class="flex flex-col min-h-screen {onMetricsExplorerPage && 'h-screen'}"
+    >
       {#if !isEmbed}
         <TopNavigationBar />
       {/if}
diff --git a/web-admin/src/routes/[organization]/[project]/-/dashboards/+page.ts b/web-admin/src/routes/[organization]/[project]/-/dashboards/+page.ts
new file mode 100644
index 000000000000..882f18af5204
--- /dev/null
+++ b/web-admin/src/routes/[organization]/[project]/-/dashboards/+page.ts
@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = ({ params }) => {
+  throw redirect(307, `/${params.organization}/${params.project}`);
+};
diff --git a/web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte
new file mode 100644
index 000000000000..f4a77f108107
--- /dev/null
+++ b/web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  $: customDashboardName = $page.params.dashboard;
+</script>
+
+<div>
+  A "read-only" version of the Custom Dashboard named <span
+    class="font-semibold">{customDashboardName}</span
+  > goes here.
+</div>
diff --git a/web-common/src/components/dropdown-menu/__stories__/DropdownMenu.stories.svelte b/web-common/src/components/dropdown-menu/__stories__/DropdownMenu.stories.svelte
index c6c290391a22..da5e40ef487d 100644
--- a/web-common/src/components/dropdown-menu/__stories__/DropdownMenu.stories.svelte
+++ b/web-common/src/components/dropdown-menu/__stories__/DropdownMenu.stories.svelte
@@ -2,9 +2,9 @@
   import { Meta, Story } from "@storybook/addon-svelte-csf";
   import * as DropdownMenu from "..";
 
-  import CopyIcon from "../../icons/CopyIcon.svelte";
-  import DashboardIcon from "../../icons/DashboardIcon.svelte";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import CopyIcon from "../../icons/CopyIcon.svelte";
+  import MetricsExplorerIcon from "../../icons/MetricsExplorerIcon.svelte";
 
   let subMenuOpen = false;
 </script>
@@ -34,7 +34,7 @@
         Option 1
       </DropdownMenu.Item>
       <DropdownMenu.Item>
-        <DashboardIcon className="w-4 h-4 mr-2" />
+        <MetricsExplorerIcon className="w-4 h-4 mr-2" />
         Option 2
       </DropdownMenu.Item>
     </DropdownMenu.Content>
diff --git a/web-common/src/components/icons/CustomDashboardIcon.svelte b/web-common/src/components/icons/CustomDashboardIcon.svelte
new file mode 100644
index 000000000000..86bc1c15c789
--- /dev/null
+++ b/web-common/src/components/icons/CustomDashboardIcon.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  export let size = "1em";
+  export let color = "currentColor";
+  export let className = "";
+</script>
+
+<svg
+  height={size}
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+>
+  <g clip-path="url(#clip0_10949_303000)">
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.000976562)"
+      fill={"white"}
+      fill-opacity="0.01"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.00016 1.33398C1.63197 1.33398 1.3335 1.63246 1.3335 2.00065V8.00065C1.3335 8.36884 1.63197 8.66732 2.00016 8.66732H6.66683C7.03502 8.66732 7.3335 8.36884 7.3335 8.00065V2.00065C7.3335 1.63246 7.03502 1.33398 6.66683 1.33398H2.00016ZM2.66683 7.33398V2.66732H6.00016V7.33398H2.66683Z"
+      fill={color}
+    />
+    <path
+      d="M9.3335 1.33398C8.96531 1.33398 8.66683 1.63246 8.66683 2.00065V5.33398C8.66683 5.70217 8.96531 6.00065 9.3335 6.00065H14.0002C14.3684 6.00065 14.6668 5.70217 14.6668 5.33398V2.00065C14.6668 1.63246 14.3684 1.33398 14.0002 1.33398H9.3335Z"
+      fill={color}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.66683 8.00065C8.66683 7.63246 8.96531 7.33398 9.3335 7.33398H14.0002C14.3684 7.33398 14.6668 7.63246 14.6668 8.00065V14.0007C14.6668 14.3688 14.3684 14.6673 14.0002 14.6673H9.3335C8.96531 14.6673 8.66683 14.3688 8.66683 14.0007V8.00065ZM10.0002 8.66732V13.334H13.3335V8.66732H10.0002Z"
+      fill={color}
+    />
+    <path
+      d="M2.00016 10.0007C1.63197 10.0007 1.3335 10.2991 1.3335 10.6673V14.0007C1.3335 14.3688 1.63197 14.6673 2.00016 14.6673H6.66683C7.03502 14.6673 7.3335 14.3688 7.3335 14.0007V10.6673C7.3335 10.2991 7.03502 10.0007 6.66683 10.0007H2.00016Z"
+      fill={color}
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_10949_303000">
+      <rect
+        width="16"
+        height="16"
+        fill="white"
+        transform="translate(0 0.000976562)"
+      />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/web-common/src/components/icons/DashboardIcon.svelte b/web-common/src/components/icons/MetricsExplorerIcon.svelte
similarity index 100%
rename from web-common/src/components/icons/DashboardIcon.svelte
rename to web-common/src/components/icons/MetricsExplorerIcon.svelte
diff --git a/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte b/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
index 1a515a745366..2574a205ecc2 100644
--- a/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
+++ b/web-common/src/components/navigation/breadcrumbs/BreadcrumbItem.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { page } from "$app/stores";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import Check from "@rilldata/web-common/components/icons/Check.svelte";
-  import { page } from "$app/stores";
-  import type { PathOptions, PathOption } from "./Breadcrumbs.svelte";
+  import type { PathOption, PathOptions } from "./Breadcrumbs.svelte";
 
   const regex = /\[.*?\]/g;
 
@@ -30,7 +30,7 @@
       .slice(0, option?.depth ?? depth)
       .filter((p): p is string => !!p);
 
-    if (selected?.section) newPath.push(selected?.section);
+    if (option?.section) newPath.push(option.section);
 
     newPath.push(id);
 
diff --git a/web-common/src/features/custom-dashboards/Chart.svelte b/web-common/src/features/custom-dashboards/Chart.svelte
index 7519b02e1657..6634dcd8eff5 100644
--- a/web-common/src/features/custom-dashboards/Chart.svelte
+++ b/web-common/src/features/custom-dashboards/Chart.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import DashVegaRenderer from "@rilldata/web-common/features/custom-dashboards/DashVegaRenderer.svelte";
   import { useChart } from "@rilldata/web-common/features/charts/selectors";
+  import DashVegaRenderer from "@rilldata/web-common/features/custom-dashboards/DashVegaRenderer.svelte";
   import { createRuntimeServiceGetChartData } from "@rilldata/web-common/runtime-client/manual-clients";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { useQueryClient } from "@tanstack/svelte-query";
   import { onDestroy, onMount } from "svelte";
   import type { VisualizationSpec } from "svelte-vega";
-  import { useQueryClient } from "@tanstack/svelte-query";
 
   const observer = new ResizeObserver((entries) => {
     for (const entry of entries) {
@@ -14,11 +14,10 @@
       clientWidth = width;
     }
   });
+  const queryClient = useQueryClient();
 
   export let chartName: string;
 
-  const queryClient = useQueryClient();
-
   let clientHeight: number;
   let clientWidth: number;
   let container: HTMLDivElement;
diff --git a/web-common/src/features/dashboards/selectors.ts b/web-common/src/features/dashboards/selectors.ts
index 09247df6fcba..f8a4153e57d4 100644
--- a/web-common/src/features/dashboards/selectors.ts
+++ b/web-common/src/features/dashboards/selectors.ts
@@ -12,6 +12,7 @@ import {
   V1Expression,
   V1MetricsViewSpec,
   createQueryServiceMetricsViewTimeRange,
+  createRuntimeServiceListResources,
   type V1MetricsViewTimeRangeResponse,
 } from "@rilldata/web-common/runtime-client";
 import type {
@@ -46,6 +47,23 @@ export function useValidDashboards(instanceId: string) {
   );
 }
 
+export function useValidVisualizations(instanceId: string) {
+  return createRuntimeServiceListResources(
+    instanceId,
+    undefined, // TODO: it'd be nice if we could provide multiple kinds here
+    {
+      query: {
+        select: (data) => {
+          // Filter for valid Metrics Explorers and all Custom Dashboards (which don't yet have a valid/invalid state)
+          return data?.resources?.filter(
+            (res) => !!res.metricsView?.state?.validSpec || res.dashboard,
+          );
+        },
+      },
+    },
+  );
+}
+
 /**
  * Gets the valid metrics view spec. Only to be used in displaying a dashboard.
  * Use {@link useDashboard} in the metrics view editor and other use cases.
diff --git a/web-common/src/features/entity-management/resource-icon-mapping.ts b/web-common/src/features/entity-management/resource-icon-mapping.ts
index 3b56395ba84a..15262f6527fa 100644
--- a/web-common/src/features/entity-management/resource-icon-mapping.ts
+++ b/web-common/src/features/entity-management/resource-icon-mapping.ts
@@ -1,7 +1,8 @@
 import ApiIcon from "@rilldata/web-common/components/icons/APIIcon.svelte";
 import AlertCircleOutline from "@rilldata/web-common/components/icons/AlertCircleOutline.svelte";
 import Chart from "@rilldata/web-common/components/icons/Chart.svelte";
-import DashboardIcon from "@rilldata/web-common/components/icons/DashboardIcon.svelte";
+import CustomDashboardIcon from "@rilldata/web-common/components/icons/CustomDashboardIcon.svelte";
+import MetricsExplorerIcon from "@rilldata/web-common/components/icons/MetricsExplorerIcon.svelte";
 import ReportIcon from "@rilldata/web-common/components/icons/ReportIcon.svelte";
 import ThemeIcon from "@rilldata/web-common/components/icons/ThemeIcon.svelte";
 import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
@@ -10,10 +11,10 @@ import { Code2Icon, Database } from "lucide-svelte";
 export const resourceIconMapping = {
   [ResourceKind.Source]: Database,
   [ResourceKind.Model]: Code2Icon,
-  [ResourceKind.MetricsView]: DashboardIcon,
+  [ResourceKind.MetricsView]: MetricsExplorerIcon,
   [ResourceKind.API]: ApiIcon,
   [ResourceKind.Chart]: Chart,
-  [ResourceKind.Dashboard]: DashboardIcon, // TODO: show this be different?
+  [ResourceKind.Dashboard]: CustomDashboardIcon,
   [ResourceKind.Theme]: ThemeIcon,
   [ResourceKind.Report]: ReportIcon,
   [ResourceKind.Alert]: AlertCircleOutline,