fix: scroll dashboard to new chart on adding a new chart with plus button

packages/viewer/src/charts/builder/ConfirmButton.svelte

@@ -1,3 +1,4 @@
+<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
 <script lang="ts">
   interface Props {
     label: string;

packages/viewer/src/charts/common/plot_layout.ts

@@ -1,3 +1,5 @@
+// Copyright (c) 2025 Apple Inc. Licensed under MIT License.
+
 import { solveExtents } from "./solve_extents.js";
 import type { IntermediatePositionScale, PlotLayout } from "./types.js";
 

packages/viewer/src/charts/common/solve_extents.ts

@@ -1,3 +1,5 @@
+// Copyright (c) 2025 Apple Inc. Licensed under MIT License.
+
 export function solveExtents(
   data: [number, number][],
   length: number,

packages/viewer/src/layouts/dashboard/DashboardChartPanel.svelte

@@ -63,6 +63,8 @@
 
   let editingSpec = $state.raw<any | undefined>();
 
+  let container: HTMLDivElement;
+
   function dragHandler(mask: [number, number, number, number]) {
     return (e1: CursorValue) => {
       let numColumns = grid.numColumns;
@@ -115,11 +117,16 @@
       };
     };
   }
+
+  export function scrollIntoView() {
+    container?.scrollIntoView({ block: "nearest" });
+  }
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
+  bind:this={container}
   class="absolute"
   style:left="{x}px"
   style:top="{y}px"

packages/viewer/src/layouts/dashboard/DashboardLayout.svelte

@@ -1,6 +1,6 @@
 <!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
 <script lang="ts">
-  import { untrack } from "svelte";
+  import { onMount, untrack } from "svelte";
   import { fade } from "svelte/transition";
 
   import DashboardChartPanel from "./DashboardChartPanel.svelte";
@@ -75,6 +75,7 @@
   });
 
   function removeChart(id: string) {
+    onStateChange({ grids: { [gridKey]: { placements: { ...placements, [id]: undefined as any } } } });
     onChartsChange({ [id]: undefined });
     onChartStatesChange({ [id]: undefined });
   }
@@ -90,6 +91,27 @@
     onChartsChange({ [id]: { type: "builder", title: "New" } });
     onStateChange({ grids: { [gridKey]: { placements: { [id]: placement } } } });
   }
+
+  let chartPanels = $state<Record<string, DashboardChartPanel | null>>({});
+  onMount(() => {
+    let chartIDs = new Set(Object.keys(charts));
+    $effect(() => {
+      let oldIDs = chartIDs;
+      chartIDs = new Set(Object.keys(charts));
+      if (chartIDs.size != oldIDs.size + 1) {
+        return;
+      }
+      let diff: string[] = [];
+      for (let id of chartIDs) {
+        if (!oldIDs.has(id)) {
+          diff.push(id);
+        }
+      }
+      if (diff.length == 1) {
+        chartPanels[diff[0]]?.scrollIntoView();
+      }
+    });
+  });
 </script>
 
 <div
@@ -123,6 +145,7 @@
 
     {#each Object.keys(charts) as id (id)}
       <DashboardChartPanel
+        bind:this={chartPanels[id]}
         context={context}
         id={id}
         spec={charts[id]}