feat: move export into dedicated menu action

Author: domoritz

packages/viewer/src/EmbeddingAtlas.svelte

@@ -373,15 +373,37 @@
         <div class="flex flex-none gap-2 items-center">
           <FilteredCount coordinator={coordinator} filter={crossFilter} table={data.table} />
           <div class="flex flex-row gap-1 items-center">
-            <button
-              class="flex px-2.5 mr-1 select-none items-center justify-center text-slate-500 dark:text-slate-300 rounded-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-600 focus-visible:outline-2 outline-blue-600 -outline-offset-1"
-              onclick={resetFilter}
-              title="Clear filters"
-            >
-              Clear
-            </button>
+            <Button label="Clear" title="Clear filters" onClick={resetFilter} />
+
+            {#if onExportSelection}
+              <PopupButton label="Export" title="Export Selection">
+                <div class="min-w-[420px] flex flex-col gap-2">
+                  <div class="flex flex-row gap-2">
+                    <ActionButton
+                      icon={IconExport}
+                      label="Export Selection"
+                      title="Export the selected points"
+                      class="w-48"
+                      onClick={() => onExportSelection(currentPredicate(), exportFormat)}
+                    />
+                    <Select
+                      label="Format"
+                      value={exportFormat}
+                      onChange={(v) => (exportFormat = v)}
+                      options={[
+                        { value: "parquet", label: "Parquet" },
+                        { value: "jsonl", label: "JSONL" },
+                        { value: "json", label: "JSON" },
+                        { value: "csv", label: "CSV" },
+                      ]}
+                    />
+                  </div>
+                </div>
+              </PopupButton>
+            {/if}
           </div>
         </div>
+
         <div class="flex flex-none flex-row gap-2">
           <div class="grid grid-cols-1 grid-rows-1 justify-items-end items-center">
             {#key layout}
@@ -429,41 +451,17 @@
                   }}
                 />
               {/if}
-              <!-- Export -->
-              {#if onExportSelection || onExportApplication}
+              <!-- Export Application -->
+              {#if onExportApplication}
                 <h4 class="text-slate-500 dark:text-slate-400 select-none">Export</h4>
                 <div class="flex flex-col gap-2">
-                  {#if onExportSelection}
-                    <div class="flex flex-row gap-2">
-                      <ActionButton
-                        icon={IconExport}
-                        label="Export Selection"
-                        title="Export the selected points"
-                        class="w-48"
-                        onClick={() => onExportSelection(currentPredicate(), exportFormat)}
-                      />
-                      <Select
-                        label="Format"
-                        value={exportFormat}
-                        onChange={(v) => (exportFormat = v)}
-                        options={[
-                          { value: "parquet", label: "Parquet" },
-                          { value: "jsonl", label: "JSONL" },
-                          { value: "json", label: "JSON" },
-                          { value: "csv", label: "CSV" },
-                        ]}
-                      />
-                    </div>
-                  {/if}
-                  {#if onExportApplication}
-                    <ActionButton
-                      icon={IconDownload}
-                      label="Export Application"
-                      title="Download a self-contained static web application"
-                      class="w-48"
-                      onClick={onExportApplication}
-                    />
-                  {/if}
+                  <ActionButton
+                    icon={IconDownload}
+                    label="Export Application"
+                    title="Download a self-contained static web application"
+                    class="w-48"
+                    onClick={onExportApplication}
+                  />
                 </div>
               {/if}
               <h4 class="text-slate-500 dark:text-slate-400 select-none">About</h4>

packages/viewer/src/app/Test.svelte

@@ -6,11 +6,15 @@
 
   import type { EmbeddingAtlasProps } from "../api.js";
   import { initializeDatabase } from "../utils/database.js";
+  import { downloadBuffer } from "../utils/download";
+  import { exportMosaicSelection, type ExportFormat } from "../utils/mosaic_exporter";
   import type { DataSource } from "./data_source.js";
 
   export class TestDataSource implements DataSource {
     private count: number;
 
+    downloadSelection: ((predicate: string | null, format: ExportFormat) => Promise<void>) | undefined = undefined;
+
     constructor(count: number) {
       this.count = count;
     }
@@ -55,6 +59,11 @@
         UPDATE ${table} SET y = y + 5 * floor(floor(var_uniform * 24 + random()) / 5);
       `);
 
+      this.downloadSelection = async (predicate, format) => {
+        let [bytes, name] = await exportMosaicSelection(coordinator, table, predicate, format);
+        downloadBuffer(bytes, name);
+      };
+
       return {
         data: {
           table: table,