From 8daba8eeb7daabacc28ba5d6ed7ef6b3b9cdae2e Mon Sep 17 00:00:00 2001
From: Donghao Ren <donghao.ren@gmail.com>
Date: Wed, 3 Sep 2025 09:28:59 -0700
Subject: [PATCH] feat: add options to customize tooltip

---
 packages/backend/start_image.sh               |   2 +-
 .../src/lib/views/cells/CellContent.svelte    |  27 +++-
 .../cells/cell-contents/ImageContent.svelte   |  97 +++++++++++++++
 packages/viewer/src/lib/CategoryLegend.svelte |   2 +-
 .../viewer/src/lib/ColumnStylePicker.svelte   |  42 +++++++
 .../src/lib/ColumnStylePickerRow.svelte       |  69 +++++++++++
 packages/viewer/src/lib/EmbeddingAtlas.svelte | 115 ++++++++++--------
 packages/viewer/src/lib/EmbeddingView.svelte  |  11 +-
 .../viewer/src/lib/SearchResultList.svelte    |  24 ++--
 .../viewer/src/lib/TextStylePicker.svelte     |  53 --------
 packages/viewer/src/lib/Tooltip.svelte        |  38 ++----
 packages/viewer/src/lib/TooltipContent.svelte |  50 ++++++++
 packages/viewer/src/lib/TooltipText.svelte    |  33 -----
 packages/viewer/src/lib/custom_components.ts  |   2 -
 .../src/lib/renderers/ContentRenderer.svelte  |  41 +++++++
 packages/viewer/src/lib/renderers/image.ts    |   6 +-
 packages/viewer/src/lib/renderers/index.ts    |  61 +++++++---
 packages/viewer/src/lib/renderers/json.ts     |   6 +-
 packages/viewer/src/lib/search.ts             |  43 +++++--
 .../src/lib/{tableTheme.ts => table_theme.ts} |   0
 packages/viewer/src/lib/widgets/Slider.svelte |   4 +-
 21 files changed, 504 insertions(+), 222 deletions(-)
 create mode 100644 packages/table/src/lib/views/cells/cell-contents/ImageContent.svelte
 create mode 100644 packages/viewer/src/lib/ColumnStylePicker.svelte
 create mode 100644 packages/viewer/src/lib/ColumnStylePickerRow.svelte
 delete mode 100644 packages/viewer/src/lib/TextStylePicker.svelte
 create mode 100644 packages/viewer/src/lib/TooltipContent.svelte
 delete mode 100644 packages/viewer/src/lib/TooltipText.svelte
 create mode 100644 packages/viewer/src/lib/renderers/ContentRenderer.svelte
 rename packages/viewer/src/lib/{tableTheme.ts => table_theme.ts} (100%)

diff --git a/packages/backend/start_image.sh b/packages/backend/start_image.sh
index 1f1c657..bf7c868 100755
--- a/packages/backend/start_image.sh
+++ b/packages/backend/start_image.sh
@@ -1,3 +1,3 @@
 #!/bin/bash
 
-uv run embedding-atlas ylecun/mnist --image image --split train --static ../viewer/dist
+uv run embedding-atlas ylecun/mnist --image image --split train --static ../viewer/dist "$@"
diff --git a/packages/table/src/lib/views/cells/CellContent.svelte b/packages/table/src/lib/views/cells/CellContent.svelte
index 151b3d7..a472251 100644
--- a/packages/table/src/lib/views/cells/CellContent.svelte
+++ b/packages/table/src/lib/views/cells/CellContent.svelte
@@ -2,6 +2,9 @@
 <script lang="ts">
   import type { JSType } from "@uwdata/mosaic-core";
 
+  import BigIntContent from "./cell-contents/BigIntContent.svelte";
+  import CustomCellContents from "./cell-contents/CustomCellContents.svelte";
+  import ImageContent from "./cell-contents/ImageContent.svelte";
   import LinkContent from "./cell-contents/LinkContent.svelte";
   import NumberContent from "./cell-contents/NumberContent.svelte";
   import TextContent from "./cell-contents/TextContent.svelte";
@@ -9,8 +12,6 @@
   import { ConfigContext } from "../../context/config.svelte";
   import { Context } from "../../context/context.svelte";
   import { CustomCellsContext } from "../../context/custom-cells.svelte";
-  import BigIntContent from "./cell-contents/BigIntContent.svelte";
-  import CustomCellContents from "./cell-contents/CustomCellContents.svelte";
 
   interface Props {
     row: string;
@@ -34,6 +35,24 @@
   const content: string | null = model.getContent({ row, col });
   const type: JSType = schema.dataType[col] ?? "string";
   const sqlType: string = schema.sqlType[col] ?? "TEXT";
+
+  function isLink(value: any): boolean {
+    return typeof value == "string" && (value.startsWith("http://") || value.startsWith("https://"));
+  }
+
+  function isImage(value: any): boolean {
+    if (value == null) {
+      return false;
+    }
+    if (typeof value == "string" && value.startsWith("data:image/")) {
+      return true;
+    }
+    if (value.bytes && value.bytes instanceof Uint8Array) {
+      // TODO: check if the bytes are actually an image.
+      return true;
+    }
+    return false;
+  }
 </script>
 
 <div
@@ -45,7 +64,7 @@
   {#if customCellsConfig[col]}
     <CustomCellContents row={row} col={col} customCell={customCellsConfig[col]} bind:height={contentHeight} />
   {:else if type === "string"}
-    {#if content && content.startsWith("http")}
+    {#if content && isLink(content)}
       <LinkContent url={content} bind:height={contentHeight} />
     {:else}
       <TextContent text={content} bind:height={contentHeight} clamped={clamped} parentHeight={height} />
@@ -56,6 +75,8 @@
     {:else}
       <NumberContent number={content as number | null} bind:height={contentHeight} />
     {/if}
+  {:else if isImage(content)}
+    <ImageContent image={content} bind:height={contentHeight} />
   {:else}
     <TextContent text={content} bind:height={contentHeight} clamped={clamped} parentHeight={height} />
   {/if}
diff --git a/packages/table/src/lib/views/cells/cell-contents/ImageContent.svelte b/packages/table/src/lib/views/cells/cell-contents/ImageContent.svelte
new file mode 100644
index 0000000..74a8a6e
--- /dev/null
+++ b/packages/table/src/lib/views/cells/cell-contents/ImageContent.svelte
@@ -0,0 +1,97 @@
+<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
+<script lang="ts">
+  import { ConfigContext } from "../../../context/config.svelte";
+
+  interface Props {
+    image: any | null;
+    height: number;
+  }
+
+  let { image, height = $bindable() }: Props = $props();
+
+  const config = ConfigContext.config;
+
+  let element: HTMLElement | null = $state(null);
+
+  function base64Encode(data: Uint8Array): string {
+    let binary = "";
+    for (let i = 0; i < data.length; i++) {
+      binary += String.fromCharCode(data[i]);
+    }
+    return btoa(binary);
+  }
+
+  function base64Decode(base64: string): Uint8Array {
+    const binaryString = atob(base64);
+    return new Uint8Array([...binaryString].map((char) => char.charCodeAt(0)));
+  }
+
+  function startsWith(data: Uint8Array, prefix: number[]): boolean {
+    if (data.length < prefix.length) {
+      return false;
+    }
+    for (let i = 0; i < prefix.length; i++) {
+      if (data[i] != prefix[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function detectImageType(data: Uint8Array): string {
+    if (startsWith(data, [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])) {
+      return "image/png";
+    } else if (startsWith(data, [0xff, 0xd8, 0xff])) {
+      return "image/jpeg";
+    } else if (startsWith(data, [0x49, 0x49, 0x2a, 0x00])) {
+      return "image/tiff";
+    } else if (startsWith(data, [0x42, 0x4d])) {
+      return "image/bmp";
+    } else if (
+      startsWith(data, [0x47, 0x49, 0x46, 0x38, 0x37, 0x61]) ||
+      startsWith(data, [0x47, 0x49, 0x46, 0x38, 0x37, 0x61])
+    ) {
+      return "image/gif";
+    }
+    // Unknown, fallback to generic type
+    return "application/octet-stream";
+  }
+
+  function imageToDataUrl(img: any): string | null {
+    if (img == null) {
+      return null;
+    }
+    if (typeof img == "string") {
+      if (img.startsWith("data:")) {
+        return img;
+      } else {
+        let type = detectImageType(base64Decode(img));
+        return `data:${type};base64,` + img;
+      }
+    } else {
+      let bytes: Uint8Array | null = null;
+      if (img.bytes && img.bytes instanceof Uint8Array) {
+        bytes = img.bytes;
+      }
+      if (img instanceof Uint8Array) {
+        bytes = img;
+      }
+      if (bytes != null) {
+        let type = detectImageType(bytes);
+        return `data:${type};base64,` + base64Encode(bytes);
+      }
+    }
+    return null;
+  }
+</script>
+
+<img
+  bind:this={element}
+  onload={() => {
+    if (element) {
+      height = element.scrollHeight;
+    }
+  }}
+  src={imageToDataUrl(image)}
+  alt=""
+/>
diff --git a/packages/viewer/src/lib/CategoryLegend.svelte b/packages/viewer/src/lib/CategoryLegend.svelte
index a9de542..b1c9ffb 100644
--- a/packages/viewer/src/lib/CategoryLegend.svelte
+++ b/packages/viewer/src/lib/CategoryLegend.svelte
@@ -95,7 +95,7 @@
   });
 </script>
 
-<div class="absolute right-0 top-0 p-2 m-2 rounded-md bg-opacity-90 bg-slate-100 dark:bg-slate-800">
+<div class="absolute right-0 top-0 p-2 m-2 rounded-md bg-slate-100/75 dark:bg-slate-800/75 backdrop-blur-sm">
   <table>
     <tbody>
       {#each items as item}
diff --git a/packages/viewer/src/lib/ColumnStylePicker.svelte b/packages/viewer/src/lib/ColumnStylePicker.svelte
new file mode 100644
index 0000000..76d8dfa
--- /dev/null
+++ b/packages/viewer/src/lib/ColumnStylePicker.svelte
@@ -0,0 +1,42 @@
+<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
+<script lang="ts">
+  import ColumnStylePickerRow from "./ColumnStylePickerRow.svelte";
+
+  import type { ColumnDesc } from "./database_utils.js";
+  import { type ColumnStyle } from "./renderers/index.js";
+
+  interface Props {
+    columns: ColumnDesc[];
+    styles: Record<string, ColumnStyle>;
+    onStylesChange: (value: Record<string, ColumnStyle>) => void;
+  }
+
+  let { columns, styles, onStylesChange }: Props = $props();
+</script>
+
+<div
+  class="max-h-60 overflow-x-hidden overflow-y-scroll border border-slate-200 dark:border-slate-600 p-2 rounded-md inset-shadow-sm"
+>
+  <table>
+    <thead>
+      <tr class="select-none">
+        <th class="pb-2 text-slate-500 dark:text-slate-400 text-left font-normal text-sm">Column</th>
+        <th class="pb-2 text-slate-500 dark:text-slate-400 text-left font-normal text-sm">Format</th>
+        <th class="pb-2 text-slate-500 dark:text-slate-400 text-left font-normal text-sm">Style</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each columns as column}
+        <ColumnStylePickerRow
+          column={column}
+          style={styles[column.name] ?? {}}
+          onChange={(s) => {
+            let newStyles = { ...styles };
+            newStyles[column.name] = s;
+            onStylesChange(newStyles);
+          }}
+        />
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/packages/viewer/src/lib/ColumnStylePickerRow.svelte b/packages/viewer/src/lib/ColumnStylePickerRow.svelte
new file mode 100644
index 0000000..89b52c2
--- /dev/null
+++ b/packages/viewer/src/lib/ColumnStylePickerRow.svelte
@@ -0,0 +1,69 @@
+<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
+<script lang="ts">
+  import Select from "./widgets/Select.svelte";
+  import Slider from "./widgets/Slider.svelte";
+
+  import type { ColumnDesc } from "./database_utils.js";
+  import { renderersList, type ColumnStyle } from "./renderers/index.js";
+
+  interface Props {
+    column: ColumnDesc;
+    style: ColumnStyle;
+    onChange: (value: ColumnStyle) => void;
+  }
+
+  let { column, style, onChange }: Props = $props();
+
+  function change(fields: Partial<ColumnStyle>) {
+    onChange({ ...style, ...fields });
+  }
+</script>
+
+<tr class="leading-10">
+  <td class="w-full">
+    <div class="max-w-80 whitespace-nowrap text-ellipsis overflow-x-hidden">
+      {column.name}
+    </div>
+  </td>
+  <td class="pr-2">
+    <div class="flex items-center gap-2">
+      <Select
+        value={style.renderer ?? null}
+        onChange={(v) => change({ renderer: v })}
+        options={[
+          { value: null, label: "(default)" },
+          ...renderersList.map((x) => ({ value: x.renderer, label: x.label })),
+        ]}
+      />
+
+      {#if style.renderer == "image"}
+        <Slider
+          bind:value={
+            () => style.rendererOptions?.size ?? 100,
+            (v) => {
+              change({ rendererOptions: { size: v } });
+            }
+          }
+          width={72}
+          min={16}
+          max={400}
+        />
+      {/if}
+    </div>
+  </td>
+  <td>
+    <div class="flex items-center gap-2">
+      <Select
+        value={style.display ?? "badge"}
+        onChange={(v) => {
+          change({ display: v });
+        }}
+        options={[
+          { value: "full", label: "Full" },
+          { value: "badge", label: "Badge" },
+          { value: "hidden", label: "Hidden" },
+        ]}
+      />
+    </div>
+  </td>
+</tr>
diff --git a/packages/viewer/src/lib/EmbeddingAtlas.svelte b/packages/viewer/src/lib/EmbeddingAtlas.svelte
index a9c5673..1226270 100644
--- a/packages/viewer/src/lib/EmbeddingAtlas.svelte
+++ b/packages/viewer/src/lib/EmbeddingAtlas.svelte
@@ -1,21 +1,22 @@
 <!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
 <script lang="ts">
+  import * as SQL from "@uwdata/mosaic-sql";
+  import * as vg from "@uwdata/vgplot";
   import { onMount } from "svelte";
   import { cubicOut } from "svelte/easing";
   import { Tween } from "svelte/motion";
   import { slide } from "svelte/transition";
 
   import { maxDensityModeCategories } from "@embedding-atlas/component";
+  import type { CustomCell } from "@embedding-atlas/table";
   import { Table } from "@embedding-atlas/table/svelte";
-  import * as SQL from "@uwdata/mosaic-sql";
-  import * as vg from "@uwdata/vgplot";
 
+  import ColumnStylePicker from "./ColumnStylePicker.svelte";
   import EmbeddingView from "./EmbeddingView.svelte";
   import PlotList from "./PlotList.svelte";
   import FilteredCount from "./plots/FilteredCount.svelte";
   import SearchResultList from "./SearchResultList.svelte";
   import Spinner from "./Spinner.svelte";
-  import TextStylePicker from "./TextStylePicker.svelte";
   import ActionButton from "./widgets/ActionButton.svelte";
   import Button from "./widgets/Button.svelte";
   import Input from "./widgets/Input.svelte";
@@ -43,10 +44,10 @@
   import { TableInfo, type ColumnDesc, type EmbeddingLegend } from "./database_utils.js";
   import type { Plot } from "./plots/plot.js";
   import { PlotStateStoreManager } from "./plots/plot_state_store.js";
-  import { makeCustomCellRenderers } from "./renderers/index.js";
+  import { getRenderer, type ColumnStyle } from "./renderers/index.js";
   import { querySearchResultItems, resolveSearcher, type SearchResultItem } from "./search.js";
-  import { tableTheme } from "./tableTheme";
-  import { debounce, getDefaults, setDefaults, startDrag } from "./utils.js";
+  import { tableTheme } from "./table_theme.js";
+  import { debounce, startDrag } from "./utils.js";
 
   const searchLimit = 500;
 
@@ -152,14 +153,44 @@
     sidebarTween.set(showSidebar ? 1 : 0);
   });
 
-  // Text Renderers
+  // Column styles
+  let columnStyles: Record<string, ColumnStyle> = $state.raw({});
+
+  export function resolveCustomCellRenderers(
+    columns: ColumnDesc[],
+    columnStyles: Record<string, ColumnStyle>,
+    tableCellRenderers: Record<string, string | CustomCell> | null | undefined,
+  ) {
+    let result: Record<string, any> = {};
+    for (let column of columns) {
+      if (tableCellRenderers?.[column.name] != null) {
+        result[column.name] = getRenderer(tableCellRenderers[column.name]);
+      }
+      if (columnStyles[column.name]?.renderer != null) {
+        result[column.name] = getRenderer(columnStyles[column.name]?.renderer);
+      }
+    }
+    return result;
+  }
 
-  let textRenderers: Record<string, string> = $state(getDefaults("textRenderers", {}));
-  let customCellRenderers = $derived(makeCustomCellRenderers(textRenderers, tableCellRenderers));
-  $effect(() => {
-    // Save the text renderers to a state.
-    setDefaults("textRenderers", textRenderers);
-  });
+  function resolveColumnStyles(
+    columns: ColumnDesc[],
+    styles: Record<string, ColumnStyle>,
+  ): Record<string, ColumnStyle> {
+    let result: Record<string, ColumnStyle> = {};
+    for (let column of columns) {
+      let style = styles[column.name];
+      if (style == null) {
+        // Default display style
+        style = { display: textColumn == column.name ? "full" : "badge" };
+      }
+      result[column.name] = style;
+    }
+    return result;
+  }
+
+  let resolvedCustomCellRenderers = $derived(resolveCustomCellRenderers(columns, columnStyles, tableCellRenderers));
+  let resolvedColumnStyles = $derived(resolveColumnStyles(columns, columnStyles));
 
   // Search
 
@@ -250,6 +281,7 @@
       coordinator,
       table,
       { id: idColumn, x: projectionColumns?.x, y: projectionColumns?.y, text: textColumn },
+      additionalFields,
       predicate,
       searcherResult,
     );
@@ -276,11 +308,6 @@
   // Category column
 
   let selectedCategoryColumn: string | null = $state(null);
-  let selectedTooltipTextColumn: string | null = $state(null);
-  let effectiveTooltipTextColumn = $derived(selectedTooltipTextColumn ?? textColumn);
-  let tooltipTextRenderer = $derived(
-    effectiveTooltipTextColumn != null ? (textRenderers[effectiveTooltipTextColumn] ?? "plain") : "plain",
-  );
   let categoryLegend: EmbeddingLegend | null = $state.raw(null);
 
   async function setCategoryColumn(column: string | null) {
@@ -316,10 +343,11 @@
 
   // Animation
 
-  async function animateEmbeddingViewToPoint(identifier?: any, x?: number, y?: number) {
+  async function animateEmbeddingViewToPoint(identifier?: any, x?: number, y?: number): Promise<void> {
     if (defaultViewportScale == null) {
       return;
     }
+
     let scale = (await defaultViewportScale) * 2;
     if (x == null || y == null) {
       if (projectionColumns == null) {
@@ -342,6 +370,7 @@
       y: y,
       scale: scale,
     });
+    embeddingView?.showTooltip(identifier);
   }
 
   // Filter
@@ -358,15 +387,6 @@
     let fields: any = {};
     fields.id = idColumn;
     for (let c of columns) {
-      if (
-        c.name == textColumn ||
-        c.name == projectionColumns?.x ||
-        c.name == projectionColumns?.y ||
-        c.name == idColumn
-      ) {
-        continue;
-      }
-
       fields[c.name] = c.name;
     }
     return fields;
@@ -393,7 +413,7 @@
     load("showEmbedding", (x) => (showEmbedding = x));
     load("showTable", (x) => (showTable = x));
     load("showSidebar", (x) => (showSidebar = x));
-    load("textRenderers", (x) => (textRenderers = x));
+    load("columnStyles", (x) => (columnStyles = x));
     load("selectedCategoryColumn", (x) => (selectedCategoryColumn = x));
     load("embeddingViewMode", (x) => (embeddingViewMode = x));
     load("minimumDensityExpFactor", (x) => (minimumDensityExpFactor = x));
@@ -417,7 +437,7 @@
         showEmbedding: showEmbedding,
         showTable: showTable,
         showSidebar: showSidebar,
-        textRenderers: textRenderers,
+        columnStyles: columnStyles,
         selectedCategoryColumn: selectedCategoryColumn,
         embeddingViewMode: embeddingViewMode,
         minimumDensityExpFactor: minimumDensityExpFactor,
@@ -478,7 +498,7 @@
 
                 {#if searchResultVisible}
                   <div
-                    class="absolute w-96 left-0 top-[32px] rounded-md right-0 z-20 bg-slate-100 dark:bg-slate-700 border border-slate-300 dark:border-slate-600 overflow-hidden resize shadow-lg"
+                    class="absolute w-96 left-0 top-[32px] rounded-md right-0 z-20 border border-slate-300 dark:border-slate-600 overflow-hidden resize shadow-lg bg-white/75 dark:bg-slate-800/75 backdrop-blur-sm"
                     style:height="48em"
                   >
                     {#if searchResult != null}
@@ -490,9 +510,10 @@
                         onClick={async (item) => {
                           scrollTableTo(item.id);
                           searchResultHighlight = item;
-                          animateEmbeddingViewToPoint(item.id, item.x, item.y);
+                          await animateEmbeddingViewToPoint(item.id, item.x, item.y);
                         }}
                         onClose={clearSearch}
+                        columnStyles={resolvedColumnStyles}
                       />
                     {:else if searcherStatus != null}
                       <div class="p-2">
@@ -571,27 +592,15 @@
       <div class="w-3"></div>
       <div class="flex flex-row gap-0.5">
         <PopupButton icon={IconSettings} title="Options">
-          <div class="min-w-96">
-            <!-- Tooltip settings -->
-            <h4 class="text-slate-500 dark:text-slate-400 mb-2 select-none">Tooltip</h4>
-            <Select
-              class="w-full"
-              value={selectedTooltipTextColumn}
-              onChange={(v) => (selectedTooltipTextColumn = v)}
-              options={[
-                { value: null, label: textColumn ?? "(none)" },
-                "---",
-                ...Object.keys(additionalFields).map((c) => ({ value: c, label: c })),
-              ]}
-            />
+          <div class="min-w-[420px]">
+            <!-- Text style settings -->
             {#if columns.length > 0}
-              <!-- Text style settings -->
-              <h4 class="text-slate-500 dark:text-slate-400 my-2 select-none">Text Style</h4>
-              <TextStylePicker
+              <h4 class="text-slate-500 dark:text-slate-400 mb-2 select-none">Column Styles</h4>
+              <ColumnStylePicker
                 columns={columns}
-                styles={textRenderers}
+                styles={resolvedColumnStyles}
                 onStylesChange={(value) => {
-                  textRenderers = value;
+                  columnStyles = value;
                 }}
               />
             {/if}
@@ -671,9 +680,8 @@
                 customTooltip={{
                   class: CustomTooltip,
                   props: {
-                    textRenderer: tooltipTextRenderer,
-                    textField: selectedTooltipTextColumn,
                     darkMode: $darkMode,
+                    columnStyles: resolvedColumnStyles,
                     onNearestNeighborSearch: allowNearestNeighborSearch
                       ? async (id: any) => {
                           doSearch(id, "neighbors");
@@ -718,12 +726,11 @@
                     scrollTo={tableScrollTo}
                     onRowClick={async (identifier) => {
                       await animateEmbeddingViewToPoint(identifier);
-                      embeddingView?.showTooltip(identifier);
                     }}
                     numLines={3}
                     colorScheme={$darkMode ? "dark" : "light"}
                     theme={tableTheme}
-                    customCells={customCellRenderers}
+                    customCells={resolvedCustomCellRenderers}
                     highlightHoveredRow={true}
                   />
                 {/key}
diff --git a/packages/viewer/src/lib/EmbeddingView.svelte b/packages/viewer/src/lib/EmbeddingView.svelte
index 7131b80..866d199 100644
--- a/packages/viewer/src/lib/EmbeddingView.svelte
+++ b/packages/viewer/src/lib/EmbeddingView.svelte
@@ -101,9 +101,14 @@
     currentViewportAnimation = requestAnimationFrame(callback);
   }
 
-  export function showTooltip(id: any) {
-    selection = [id];
-    tooltip = id;
+  export function showTooltip(id: any | null) {
+    if (id == null) {
+      selection = [];
+      tooltip = null;
+    } else {
+      selection = [id];
+      tooltip = id;
+    }
   }
 
   function clearViewportAnimation() {
diff --git a/packages/viewer/src/lib/SearchResultList.svelte b/packages/viewer/src/lib/SearchResultList.svelte
index 8ed6860..876e067 100644
--- a/packages/viewer/src/lib/SearchResultList.svelte
+++ b/packages/viewer/src/lib/SearchResultList.svelte
@@ -2,19 +2,23 @@
 <script lang="ts">
   import Mark from "mark.js";
 
-  import { IconClose } from "./icons";
-  import type { SearchResultItem } from "./search";
+  import TooltipContent from "./TooltipContent.svelte";
+
+  import { IconClose } from "./icons.js";
+  import type { ColumnStyle } from "./renderers/index.js";
+  import type { SearchResultItem } from "./search.js";
 
   interface Props {
     items: SearchResultItem[];
     label: string;
     highlight: string;
     limit?: number;
+    columnStyles?: Record<string, ColumnStyle>;
     onClick?: (item: SearchResultItem) => void;
     onClose?: () => void;
   }
 
-  let { items, label, highlight, limit = 100, onClick, onClose }: Props = $props();
+  let { items, label, highlight, limit = 100, columnStyles, onClick, onClose }: Props = $props();
 
   function markHighlight(element: HTMLElement, highlight: string) {
     let m = new Mark(element);
@@ -53,20 +57,13 @@
   <div class="flex flex-col overflow-x-hidden overflow-y-scroll">
     {#each items as item (item)}
       <button
-        class="m-1 p-2 text-left rounded-md hover:bg-slate-300 dark:hover:bg-slate-500"
+        class="m-1 p-2 text-left rounded-md hover:outline outline-slate-500"
         onclick={() => {
           onClick?.(item);
         }}
       >
-        <div
-          class="overflow-hidden text-ellipsis line-clamp-4 leading-5"
-          title={item.text}
-          use:markHighlight={highlight}
-        >
-          {item.text}
-        </div>
         {#if item.distance != null}
-          <div class="flex pt-1 text-sm">
+          <div class="flex pb-1 text-sm">
             <span class="px-2 flex gap-2 bg-slate-200 text-slate-500 dark:bg-slate-600 dark:text-slate-300 rounded-md">
               <div class="text-slate-400 dark:text-slate-400 font-medium">Distance</div>
               <div class="text-ellipsis whitespace-nowrap overflow-hidden max-w-72">
@@ -75,6 +72,9 @@
             </span>
           </div>
         {/if}
+        <div class="overflow-hidden text-ellipsis line-clamp-4 leading-5" use:markHighlight={highlight}>
+          <TooltipContent values={item.fields} columnStyles={columnStyles ?? {}} />
+        </div>
       </button>
       <hr class="border-slate-300 dark:border-slate-600" />
     {/each}
diff --git a/packages/viewer/src/lib/TextStylePicker.svelte b/packages/viewer/src/lib/TextStylePicker.svelte
deleted file mode 100644
index a453bd4..0000000
--- a/packages/viewer/src/lib/TextStylePicker.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
-<script lang="ts">
-  import Select from "./widgets/Select.svelte";
-
-  import type { ColumnDesc } from "./database_utils.js";
-  import { renderersList } from "./renderers";
-
-  interface Props {
-    columns: ColumnDesc[];
-    styles: Record<string, string>;
-    onStylesChange: (value: Record<string, string>) => void;
-  }
-
-  let { columns, styles, onStylesChange }: Props = $props();
-
-  function changeStyle(name: string, value: string | null | undefined) {
-    let newStyles: Record<string, string> = {};
-    for (let c of columns) {
-      if (c.name == name) {
-        if (value != null && value != "") {
-          newStyles[c.name] = value;
-        }
-      } else if (styles[c.name]) {
-        newStyles[c.name] = styles[c.name];
-      }
-    }
-    onStylesChange(newStyles);
-  }
-</script>
-
-<div class="max-h-48 overflow-x-hidden overflow-y-scroll border border-slate-200 dark:border-slate-600 p-2 rounded-md">
-  <table>
-    <tbody>
-      {#each columns as column}
-        <tr class="leading-10">
-          <td class="w-full">
-            <div class="max-w-80 whitespace-nowrap text-ellipsis overflow-x-hidden">{column.name}</div>
-          </td>
-          <td>
-            <Select
-              value={styles[column.name] ?? null}
-              onChange={(v) => changeStyle(column.name, v)}
-              options={[
-                { value: null, label: "(default)" },
-                ...renderersList.map((x) => ({ value: x.renderer, label: x.label })),
-              ]}
-            ></Select>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
diff --git a/packages/viewer/src/lib/Tooltip.svelte b/packages/viewer/src/lib/Tooltip.svelte
index 5cb0dc7..b616153 100644
--- a/packages/viewer/src/lib/Tooltip.svelte
+++ b/packages/viewer/src/lib/Tooltip.svelte
@@ -2,51 +2,29 @@
 <script lang="ts">
   import type { DataPoint } from "@embedding-atlas/component";
 
-  import TooltipText from "./TooltipText.svelte";
-  import { IconSearch } from "./icons";
+  import TooltipContent from "./TooltipContent.svelte";
+
+  import { IconSearch } from "./icons.js";
+  import type { ColumnStyle } from "./renderers/index.js";
 
   interface Props {
     tooltip: DataPoint;
-    textRenderer?: string;
-    textField: string | null;
+    columnStyles?: Record<string, ColumnStyle>;
     darkMode: boolean;
     onNearestNeighborSearch?: (id: any) => void;
   }
 
-  let { tooltip, textRenderer = "plain", textField, darkMode, onNearestNeighborSearch }: Props = $props();
-
-  function isLink(text: string): boolean {
-    return typeof text == "string" && (text.startsWith("http://") || text.startsWith("https://"));
-  }
+  let { tooltip, columnStyles, darkMode, onNearestNeighborSearch }: Props = $props();
 </script>
 
 <div class="embedding-atlas-root">
   <div
-    class="p-2 border flex flex-col gap-2 border-slate-500 shadow-md text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 rounded-md text-ellipsis overflow-x-hidden overflow-y-scroll"
+    class="p-2 border flex flex-col gap-2 border-slate-300 dark:border-slate-600 shadow-md text-slate-700 dark:text-slate-300 rounded-md text-ellipsis overflow-x-hidden overflow-y-scroll bg-white/75 dark:bg-slate-800/75 backdrop-blur-sm"
     class:dark={darkMode}
     style:max-width="400px"
     style:max-height="300px"
   >
-    <div class="flex-none">
-      <TooltipText text={textField == null ? tooltip.text : tooltip.fields?.[textField]} renderer={textRenderer} />
-    </div>
-    <div class="flex-none flex flex-row gap-1 flex-wrap">
-      {#if tooltip.fields != null}
-        {#each Object.keys(tooltip.fields) as field}
-          {@const text = tooltip.fields[field]?.toString() ?? "(null)"}
-          <div class="px-2 flex gap-2 bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300 rounded-md">
-            <div class="text-slate-400 dark:text-slate-400 font-medium">{field}</div>
-            <div class="text-ellipsis whitespace-nowrap overflow-hidden max-w-72" title={text}>
-              {#if isLink(text)}
-                <a href={text} class="underline" target="_blank">{text}</a>
-              {:else}
-                {text}
-              {/if}
-            </div>
-          </div>
-        {/each}
-      {/if}
-    </div>
+    <TooltipContent values={tooltip.fields ?? {}} columnStyles={columnStyles ?? {}} />
     {#if onNearestNeighborSearch}
       <div>
         <button
diff --git a/packages/viewer/src/lib/TooltipContent.svelte b/packages/viewer/src/lib/TooltipContent.svelte
new file mode 100644
index 0000000..4e1e192
--- /dev/null
+++ b/packages/viewer/src/lib/TooltipContent.svelte
@@ -0,0 +1,50 @@
+<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
+<script lang="ts">
+  import ContentRenderer from "./renderers/ContentRenderer.svelte";
+
+  import { stringify, type ColumnStyle } from "./renderers/index.js";
+
+  interface Props {
+    values: Record<string, any>;
+    columnStyles: Record<string, ColumnStyle>;
+  }
+
+  let { values, columnStyles }: Props = $props();
+
+  let fullSizedKeys = $derived(Object.keys(columnStyles).filter((x) => columnStyles[x].display == "full"));
+  let minifiedKeys = $derived(Object.keys(columnStyles).filter((x) => columnStyles[x].display == "badge"));
+</script>
+
+<div class="flex flex-col gap-2">
+  <!-- Full sized fields -->
+  {#each fullSizedKeys as key}
+    {@const value = values[key]}
+
+    <div class="flex flex-col">
+      <div class="text-slate-400 dark:text-slate-400 font-medium text-xs">{key}</div>
+      <div>
+        <ContentRenderer
+          value={value}
+          renderer={columnStyles[key].renderer}
+          rendererOptions={columnStyles[key].rendererOptions}
+        />
+      </div>
+    </div>
+  {/each}
+
+  <!-- Minified fields -->
+  <div class="flex-none flex flex-row gap-1 flex-wrap items-start">
+    {#each minifiedKeys as key}
+      {@const value = values[key]}
+
+      <div
+        class="px-2 flex items-center gap-2 border border-slate-200 dark:border-slate-700 bg-slate-100/25 dark:bg-slate-700/25 text-slate-700 dark:text-slate-300 rounded-md"
+      >
+        <div class="text-slate-400 dark:text-slate-400 font-medium text-sm">{key}</div>
+        <div class="text-ellipsis whitespace-nowrap overflow-hidden max-w-72" title={stringify(value)}>
+          <ContentRenderer value={value} />
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/packages/viewer/src/lib/TooltipText.svelte b/packages/viewer/src/lib/TooltipText.svelte
deleted file mode 100644
index 9b1f570..0000000
--- a/packages/viewer/src/lib/TooltipText.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
-<script lang="ts">
-  import { textRendererClasses } from "./renderers/index.js";
-
-  interface Props {
-    text?: string;
-    renderer?: string;
-  }
-
-  let { text = "", renderer = "plain" }: Props = $props();
-
-  let rendererClass = $derived(textRendererClasses[renderer] ?? null);
-
-  function action(element: HTMLDivElement, props: { class: any; value: any }) {
-    let component = new props.class(element, { value: props.value });
-    return {
-      update(props: { value: any }) {
-        component.update?.({ value: props.value });
-      },
-      destroy() {
-        component.destroy?.();
-      },
-    };
-  }
-</script>
-
-{#if rendererClass == null}
-  {text}
-{:else}
-  {#key rendererClass}
-    <div use:action={{ class: rendererClass, value: text }}></div>
-  {/key}
-{/if}
diff --git a/packages/viewer/src/lib/custom_components.ts b/packages/viewer/src/lib/custom_components.ts
index 99d1c9c..fac4d74 100644
--- a/packages/viewer/src/lib/custom_components.ts
+++ b/packages/viewer/src/lib/custom_components.ts
@@ -29,8 +29,6 @@ function createCustomComponentClass<Props extends {}>(Component: Component<Props
 
 export const CustomTooltip = createCustomComponentClass<{
   tooltip: DataPoint;
-  textField: string | null;
-  textRenderer: string;
   darkMode: boolean;
   onNearestNeighborSearch?: (id: any) => void;
 }>(Tooltip);
diff --git a/packages/viewer/src/lib/renderers/ContentRenderer.svelte b/packages/viewer/src/lib/renderers/ContentRenderer.svelte
new file mode 100644
index 0000000..227709d
--- /dev/null
+++ b/packages/viewer/src/lib/renderers/ContentRenderer.svelte
@@ -0,0 +1,41 @@
+<!-- Copyright (c) 2025 Apple Inc. Licensed under MIT License. -->
+<script lang="ts">
+  import { imageToDataUrl } from "../image_utils.js";
+  import { isImage, isLink, stringify, textRendererClasses } from "./index.js";
+
+  interface Props {
+    value?: string;
+    renderer?: string;
+    rendererOptions?: Record<string, any>;
+  }
+
+  let { value = "", renderer, rendererOptions = {} }: Props = $props();
+
+  let rendererClass = $derived(renderer != null ? (textRendererClasses[renderer] ?? null) : null);
+
+  function action(element: HTMLDivElement, props: { class: any; value: any; options: Record<string, any> }) {
+    let component = new props.class(element, { value: props.value, ...props.options });
+    return {
+      update(props: { value: any; options: Record<string, any> }) {
+        component.update?.({ value: props.value, ...props.options });
+      },
+      destroy() {
+        component.destroy?.();
+      },
+    };
+  }
+</script>
+
+{#if rendererClass == null}
+  {#if isLink(value)}
+    <a href={value} class="underline" target="_blank">{value}</a>
+  {:else if isImage(value)}
+    <img src={imageToDataUrl(value)} alt="" class="max-w-24 max-h-24" />
+  {:else}
+    {stringify(value)}
+  {/if}
+{:else}
+  {#key rendererClass}
+    <div use:action={{ class: rendererClass, value: value, options: rendererOptions ?? {} }}></div>
+  {/key}
+{/if}
diff --git a/packages/viewer/src/lib/renderers/image.ts b/packages/viewer/src/lib/renderers/image.ts
index d7cd5c0..dc6ffae 100644
--- a/packages/viewer/src/lib/renderers/image.ts
+++ b/packages/viewer/src/lib/renderers/image.ts
@@ -10,16 +10,18 @@ export class ImageRenderer {
     this.update(props);
   }
 
-  update(props: { value: any }) {
+  update(props: { value: any; size?: number }) {
     if (props.value == null) {
       this.element.innerText = "(null)";
       return;
     }
     let dataUrl = imageToDataUrl(props.value);
     if (dataUrl != null) {
+      let size = props.size ?? 100;
       let img = document.createElement("img");
       img.src = dataUrl;
-      img.style.maxHeight = "100px";
+      img.style.maxHeight = size + "px";
+      img.style.maxWidth = size + "px";
       this.element.replaceChildren(img);
     } else {
       this.element.innerText = `(unknown)`;
diff --git a/packages/viewer/src/lib/renderers/index.ts b/packages/viewer/src/lib/renderers/index.ts
index ea726af..b002f43 100644
--- a/packages/viewer/src/lib/renderers/index.ts
+++ b/packages/viewer/src/lib/renderers/index.ts
@@ -3,10 +3,20 @@
 import type { CustomCell } from "@embedding-atlas/table";
 
 import { ImageRenderer } from "./image.js";
-import { JSONRenderer } from "./json.js";
+import { JSONRenderer, safeJSONStringify } from "./json.js";
 import { MarkdownRenderer } from "./markdown.js";
 import { URLRenderer } from "./url.js";
 
+/** A type describing how to display a column in the table, tooltip, and search results */
+export interface ColumnStyle {
+  /** The renderer type */
+  renderer?: string;
+  /** Props passed to the renderer class */
+  rendererOptions?: any;
+  /** Display style */
+  display?: "full" | "badge" | "hidden";
+}
+
 export let textRendererClasses: Record<string, any> = {
   markdown: MarkdownRenderer,
   image: ImageRenderer,
@@ -21,8 +31,8 @@ export let renderersList = [
   { renderer: "json", label: "JSON" },
 ];
 
-function resolveRenderer(value: string | CustomCell | null | undefined) {
-  if (value == null || value == "plain") {
+export function getRenderer(value: string | CustomCell | null | undefined) {
+  if (value == null) {
     return undefined;
   }
   if (typeof value == "string") {
@@ -31,20 +41,37 @@ function resolveRenderer(value: string | CustomCell | null | undefined) {
   return value; // value is a CustomCell
 }
 
-export function makeCustomCellRenderers(
-  renderers: Record<string, string>,
-  tableCellRenderers: Record<string, string | CustomCell> | null | undefined,
-) {
-  let result: Record<string, any> = {};
-  if (tableCellRenderers != null) {
-    for (let column in tableCellRenderers) {
-      result[column] = resolveRenderer(tableCellRenderers[column]);
-    }
+export function isLink(value: any): boolean {
+  return typeof value == "string" && (value.startsWith("http://") || value.startsWith("https://"));
+}
+
+export function isImage(value: any): boolean {
+  if (value == null) {
+    return false;
+  }
+  if (typeof value == "string" && value.startsWith("data:image/")) {
+    return true;
+  }
+  if (value.bytes && value.bytes instanceof Uint8Array) {
+    // TODO: check if the bytes are actually an image.
+    return true;
+  }
+  return false;
+}
+
+export function stringify(value: any): string {
+  if (value == null) {
+    return "(null)";
+  } else if (typeof value == "string") {
+    return value.toString();
+  } else if (typeof value == "number") {
+    return value.toLocaleString();
+  } else if (Array.isArray(value)) {
+    return "[" + value.map((x) => stringify(x)).join(", ") + "]";
   }
-  for (let column in renderers) {
-    if (renderers[column] != null) {
-      result[column] = resolveRenderer(renderers[column]);
-    }
+  try {
+    return safeJSONStringify(value);
+  } catch (e) {
+    return value.toString();
   }
-  return result;
 }
diff --git a/packages/viewer/src/lib/renderers/json.ts b/packages/viewer/src/lib/renderers/json.ts
index faf5d03..25b22bf 100644
--- a/packages/viewer/src/lib/renderers/json.ts
+++ b/packages/viewer/src/lib/renderers/json.ts
@@ -1,6 +1,6 @@
 // Copyright (c) 2025 Apple Inc. Licensed under MIT License.
 
-function safeJSONStringify(value: any, space?: number): string {
+export function safeJSONStringify(value: any, space?: number): string {
   try {
     return JSON.stringify(
       value,
@@ -27,7 +27,9 @@ export class JSONRenderer {
 
   update(props: { value: any }) {
     let pre = document.createElement("pre");
-    pre.innerText = safeJSONStringify(props.value);
+    pre.style.whiteSpace = "pre-wrap";
+    pre.style.wordBreak = "break-all";
+    pre.innerText = safeJSONStringify(props.value, 2);
     this.element.replaceChildren(pre);
   }
 }
diff --git a/packages/viewer/src/lib/search.ts b/packages/viewer/src/lib/search.ts
index 7d41ce0..4d45b81 100644
--- a/packages/viewer/src/lib/search.ts
+++ b/packages/viewer/src/lib/search.ts
@@ -3,7 +3,7 @@
 import type { Coordinator } from "@uwdata/mosaic-core";
 import * as SQL from "@uwdata/mosaic-sql";
 
-import type { Searcher } from "./api";
+import type { Searcher } from "./api.js";
 
 class SearchWorkerAPI {
   worker: Worker;
@@ -112,6 +112,7 @@ export class FullTextSearcher implements Searcher {
 
 export interface SearchResultItem {
   id: any;
+  fields: Record<string, any>;
   distance?: number;
   x?: number;
   y?: number;
@@ -122,9 +123,30 @@ export async function querySearchResultItems(
   coordinator: Coordinator,
   table: string,
   columns: { id: string; x?: string | null; y?: string | null; text?: string | null },
+  additionalFields: Record<string, any> | null,
   predicate: string | null,
   items: { id: any; distance?: number }[],
 ): Promise<SearchResultItem[]> {
+  let fieldExpressions: string[] = [`${SQL.column(columns.id, table)} AS id`];
+  if (columns.x) {
+    fieldExpressions.push(`${SQL.column(columns.x, table)} AS x`);
+  }
+  if (columns.y) {
+    fieldExpressions.push(`${SQL.column(columns.y, table)} AS y`);
+  }
+  if (columns.text) {
+    fieldExpressions.push(`${SQL.column(columns.text, table)} AS text`);
+  }
+  let fields = additionalFields ?? {};
+  for (let key in fields) {
+    let spec = fields[key];
+    if (typeof spec == "string") {
+      fieldExpressions.push(`${SQL.column(spec, table)} AS "field_${key}"`);
+    } else {
+      fieldExpressions.push(`${SQL.sql(spec.sql)} AS "field_${key}"`);
+    }
+  }
+
   let ids = items.map((x) => x.id);
   let id2order = new Map<any, number>();
   let id2item = new Map<any, { id: any; distance?: number }>();
@@ -132,13 +154,9 @@ export async function querySearchResultItems(
     id2order.set(ids[i], i);
     id2item.set(ids[i], items[i]);
   }
-
   let r = await coordinator.query(`
     SELECT
-      ${SQL.column(columns.id, table)} AS id,
-      ${columns.x ? `${SQL.column(columns.x, table)} AS x,` : ``}
-      ${columns.y ? `${SQL.column(columns.y, table)} AS y,` : ``}
-      ${columns.text ? `${SQL.column(columns.text, table)} AS text,` : ``}
+      ${fieldExpressions.join(", ")}
     FROM (
       SELECT ${SQL.column(columns.id, table)} AS __search_result_id__
       FROM ${table}
@@ -148,7 +166,18 @@ export async function querySearchResultItems(
     )
     LEFT JOIN ${table} ON ${SQL.column(columns.id, table)} = __search_result_id__
   `);
-  let result = Array.from(r).map((x: any) => ({ ...x, distance: id2item.get(x.id)?.distance }));
+
+  let result = Array.from(r).map((x: any): any => {
+    let r: Record<string, any> = { id: x.id, distance: id2item.get(x.id)?.distance, fields: {} };
+    for (let key in x) {
+      if (key.startsWith("field_")) {
+        r.fields[key.substring(6)] = x[key];
+      } else {
+        r[key] = x[key];
+      }
+    }
+    return r;
+  });
   result = result.sort((a, b) => (id2order.get(a.id) ?? 0) - (id2order.get(b.id) ?? 0));
   return result;
 }
diff --git a/packages/viewer/src/lib/tableTheme.ts b/packages/viewer/src/lib/table_theme.ts
similarity index 100%
rename from packages/viewer/src/lib/tableTheme.ts
rename to packages/viewer/src/lib/table_theme.ts
diff --git a/packages/viewer/src/lib/widgets/Slider.svelte b/packages/viewer/src/lib/widgets/Slider.svelte
index 5684b32..985aa6f 100644
--- a/packages/viewer/src/lib/widgets/Slider.svelte
+++ b/packages/viewer/src/lib/widgets/Slider.svelte
@@ -5,11 +5,11 @@
     min?: number;
     max?: number;
     step?: number | null | undefined;
+    width?: number;
   }
 
-  let { value = $bindable(0), min = 0, max = 100, step = undefined }: Props = $props();
+  let { value = $bindable(0), min = 0, max = 100, step = undefined, width = 100 }: Props = $props();
 
-  let width: number = 100;
   let height: number = 28;
 
   let trackHeight: number = 4;